@charset "utf-8"; 

html { margin: 0 auto; overflow: hidden; } 
html, body {display: block;width: 100%;height: 100%;margin: 0;touch-action: auto;-webkit-overflow-scrolling: touch;} 
body { margin: 0; padding: 0; height: auto; } 
.sidebar { position: fixed; top: 50%; left: 0px; transform: translateY(-50%); z-index: 9; margin-left: -7px; display: flex; flex-direction: column; align-items: center; } 
.dot { width: 13px; height: 13px; background-color: #667482CC; margin: 21px 43px; border-radius: 50%; display: block; position: relative; border: 1px solid #CDD1D5; } 
.dot.active { width: 99px; height: 39px; border-radius: 0 30px 30px 0; background: #052B57; display: flex; align-items: center; justify-content: center; margin: 0; } 
.dot .hide { color: #fff; opacity: 0; font-size: 0.8824rem; font-weight: 600; line-height: 1; transition: opacity .2s; } 
.dot.active .hide { opacity: 1; } 
.sidebar::after { content:''; display: block; background: url(/images/main/sidebar_mouse.png); width: 16px; height: 40px; position: absolute; top: 100%; left: 0; right: 0; margin: 17px auto 0; } 

[class^=sec] {padding-top: 116px;display: flex;align-items: center;} 
[class^=sec] h3.title { font-size: 2.1176rem; color: #081952; font-family: var(--point-font700); } 
[class^=sec] .more-btn { display: block; background: #002088; width: 40px; height: 40px; border-radius: 10px; position: relative; transition: all .3s; } 
[class^=sec] .more-btn::before,
[class^=sec] .more-btn::after { content:''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 2px; height: 15px; background: #fff; transition: all .3s; border-radius: 2px; } 
[class^=sec] .more-btn::after { transform: rotate(90deg); } 
[class^=sec] .more-btn:hover,
[class^=sec] .more-btn:focus { box-shadow: 3px 3px 10px rgba(0,0,0,.15); } 


@media all and (max-width:1499px) { 
    [class^=sec] .inner { width: calc(100% - 60px); } 
 }
@media all and (max-width:1280px) { 
  html { overflow-y: auto; height: auto; } 
 [class^=sec] { display: block; padding: 60px 0 } 
 .sidebar { display: none; } 
 }
@media all and (max-width:1199px) { 
 [class^=sec] .inner { width: auto; } 
 [class^=sec] { display: block; padding: 67px 0 60px } 
 }
@media all and (max-width:768px) { 
    [class^=sec] h3.title { font-size: 26px; color:#1E2124; font-family: 'Pretendard', sans-serif; font-weight: 800 } 
 }

 
 @media screen and (max-height: 900px) and (min-width: 1281px) {
    [class^=sec] .inner { transform: scale(.8); } 
  }


/* ******************* *
* section01
* ******************* */
.sec01 { background: #eff3ff url(/images/main/sec01_bg.png) no-repeat center 116px; } 
.sec01 .inner { padding: 55px 0 30px; display: flex; flex-wrap: wrap; } 
.sec01 .top { position: relative; width: 100%; } 
.sec01 .top .bold { font-family: var(--point-font800); } 
.mlib-status { position: absolute; left: 0; top:0; z-index: 2; } 
.mlib-status .open-barcode { color:#1A3C69; font-family:var(--point-font400); font-size: 1.1176rem; background: linear-gradient(0deg, #F4F7FF 0%, #F4F7FF 100%), white; box-shadow: 3px 3px 10px rgba(49.04, 76.50, 255, 0.20); border: 1px solid #416A9A; border-radius: 6px; padding: 7px 15px 7px 24px; display: flex; align-items: center; margin-bottom: 14px; } 
.mlib-status .open-barcode::after { content:''; display: block; width: 35px; height: 35px; background: url(/images/main/ico_mo_member.png); margin-left: 20px; } 

.mlib-status .status-area { align-items: center; position: relative; padding-left: 46px; } 
.mlib-status .status-area::before { content: ''; display: block; width: 38px; height: 40px; background: url(/images/main/ico_cal.png); position: absolute; left: 0; top: 5px; } 
.mlib-status .status-area p { display: flex; margin-bottom:7px; font-family:var(--point-font500); font-size: 1.8824rem; color: #1A3C69; } 
.mlib-status .status-area .state { background: #FA052E; color: #fff; font-size: 1.2941rem; padding: 6px 32px; border-radius: 8px; margin-left: 8px; } 
.mlib-status .status-area .small { color: #485C82; font-size: 0.9412rem; font-weight: 600; } 
.msearch-wrap { margin-bottom: 60px; position: relative; z-index: 1; } 
.msearch-wrap .search-tit { color: #1E2124; font-size: 1.7647rem; font-family: 'Jalnan', sans-serif; text-align: center; margin-bottom: 10px; } 
.msearch-wrap .search-tit span { color: #1B57c5; } 
.msearch-wrap form {display: flex;border: 2px solid #2C5DB5;background: #fff;border-radius: 100px;width: 605px;padding: 0 24px;height: 52px;align-items: center;box-shadow: 4px 4px 30px rgba(26.58, 64.77, 134.86, 0.15);margin: 0 auto;} 
.msearch-wrap .sbHolder { border: none; position: relative; display: flex; align-items: center; padding: 0 34px 0 16px; flex-direction: column; } 
.msearch-wrap .sbHolder a { color: #1B57C5; font-weight: 600; } 
.msearch-wrap .sbHolder::before,
.msearch-wrap .sbHolder::after { content: ''; display: block; } 
.msearch-wrap .sbHolder::before { border: 1px solid transparent; border-bottom-color: #1B57C5; border-right-color: #1B57C5; transform: rotate(45deg) skew(0deg, 0deg); width: 6px; height: 6px; position: absolute; top: -5px; bottom: 0; right: 14px; margin: auto; transition: 0.35s; } 
.msearch-wrap .sbHolder::after { content:''; display: block; width: 1px; background: #A7A7A7; height: 100%; position: absolute; right: 0; } 
.msearch-wrap .sbOptions {position: absolute;background: rgba(255,255,255,.9);padding: 10px;border-radius: 10px;z-index: 1;} 
.msearch-wrap .sbOptions li a { font-weight: 400; color: #1E2124; display: block; padding: 3px 0; font-size: 0.9412rem; } 
.msearch-wrap .sbOptions li a:hover { text-decoration: underline; } 
.msearch-wrap .intext { height: 100%; border: none; position: relative; padding: 0 0 0 16px; width: 100%; } 
.msearch-wrap .intext::placeholder { color: #666; } 
.msearch-wrap .inbtn { width: 30px; height: 30px; background: url(/images/main/ico_search_b.png)no-repeat; border: none; flex-shrink: 0; } 
.mbook-quick { position: absolute; right: -35px; top:-35px; z-index: 2; display: block; background: url(/images/common/quick_book.png); width: 197px; height: 202px;animation:mbook-quick-motion 2s cubic-bezier(0.36,0.45,0.63,0.53) infinite;} 

@keyframes mbook-quick-motion {
  0%   {transform:translateY(-10px);}
  50%  {transform:translateY(10px);}
  100% {transform:translateY(-10px);}
}

.sec01 .cont { display: flex; margin-bottom: 40px; } 
.mlib-wrap { width: calc(100% - 43.14% - 30px); margin-left: auto; display: flex; background: #fff; border-radius: 30px 15px 15px; flex-shrink: 1; flex-wrap: wrap; } 
.mlib-wrap .lib-info { background: #256EF4; padding: 20px; border-radius: 30px 10px 30px 10px; position: relative; overflow: hidden; width: 39.074%; } 
.mlib-wrap .lib-info .img { background: #ddd; border-radius: 30px 30px 0 0; width: 100%; aspect-ratio: 1 / .8; position: relative; display: block; overflow:hidden } 
.mlib-wrap .lib-info .img img { width:100%; height:100%; } 
.mlib-wrap .lib-info .img::before { content:''; display: block; background: linear-gradient(0deg, #256EF4 0%, #256EF4 20%, rgba(37, 110, 244, 0) 90%); width: 100%; position: absolute; height: 40%; left: 0; bottom: 0px; z-index: 0; } 
.mlib-wrap .lib-info .tit { font-size: 1.7647rem; font-family: var(--point-font700); color:#fff; position: relative; z-index: 1; margin-top: 10px; padding: 0 6px; } 
.mlib-wrap .lib-info .addr {color: #fff;font-size: 0.9412rem;display: flex;margin: 8px 6px 16px;position: relative;z-index: 1;} 
.mlib-wrap .lib-info .addr::before {content: '';display: block;background: url(/images/main/ico_location.png);width: 18px;height: 26px;margin-top: -3px;} 
.mlib-wrap .link-btn-wrap { display: flex; gap: 8px; position: relative; z-index: 1; padding: 0 6px; } 
.mlib-wrap .link-btn-wrap a { display: flex; border: 1px solid #FFFFFF80; color: #fff; padding: 8px 10px 8px 18px; border-radius: 6px; gap: 10px; } 
.mlib-wrap .link-btn-wrap a::after { content: '→'; display:block; } 
.mlib-wrap .lib-cont-list { padding: 30px 24px 30px 54px; width: calc(100% - 39.074% + 30px); box-shadow: 2px 4px 30px rgba(44.24, 54.75, 170.41, 0.20); margin-left: -30px; border-radius: 0 15px 15px 0; } 
.mlib-wrap .lib-cont-list > .tit { display: none; } 
.mlib-wrap .lib-ntc { display: grid; background: #F6F6F6; border-radius: 10px; padding: 10px; grid-template-columns: 104px auto; column-gap: 12px; margin-bottom: 8px; } 
.mlib-wrap .lib-ntc .status { display: flex; align-items:center; justify-content: center; color:#fff; font-family: var(--point-font700); font-weight: 700; font-size: 1.1176rem; background: #FF0D42E5; border-radius: 30px; padding: 11px; grid-column: 1; grid-row: 1 / span 2; text-align: center; } 
.mlib-wrap .lib-ntc .info { grid-column: 2; font-family: 'Paperlogy500' } 
.mlib-wrap .lib-ntc .info span { font-weight:600; color: #D7254C; } 
.mlib-wrap .lib-cont-list ul { max-height: 252px; overflow: auto; } 
.mlib-wrap .lib-cont-list ul li { display: flex; flex-wrap: wrap; border-bottom: 1px dashed #8A949E; padding: 0px 12px 8px; margin-bottom: 8px; gap: 5px; } 
.mlib-wrap .lib-cont-list ul li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0 } 
.mlib-wrap .lib-cont-list ul li .tit { color:#052B57; font-weight: 700 } 
.mlib-wrap .lib-cont-list ul li .tel { display: flex; align-items: center; color: #2554AA; font-size: 0.9412rem; margin-left: auto; font-weight: 500; } 
.mlib-wrap .lib-cont-list ul li .tel::before { content: ''; display: block; background: url(/images/main/ico_tel.png)no-repeat; width: 12px; height: 12px; margin-right: 5px; } 
.mlib-wrap .lib-cont-list ul li .time { width: 100%; font-size: 0.9412rem; color: #464C53; } 

.mpopup {position: relative;width: 43.14%;height: fit-content;/* flex-shrink: 1; */z-index: 0;} 
.mpopup-slide { overflow: hidden; border-radius: 20px; margin-top: 8px; } 
.mpopup .swiper-slide a { display: block; aspect-ratio: 1 / .618; background: #ddd; border-radius: 40px; overflow: hidden; border: 1px solid #ccc; } 
.mpopup .swiper-slide a img { width: 100%; height: 100%; } 
.mpopup-ctrl { display: flex; background: #eff3ff; position: absolute; right: 0; bottom: 0; border-radius: 40px 0 0 0; z-index: 1; gap: 8px; align-items: center; padding: 17px 23px 6px 35px; } 
.mpopup-ctrl .pagination { display: flex; align-items: center; justify-content: center; width: max-content; } 
.mpopup-ctrl .pagination span { font-weight: 700; margin-left: 3px; } 
.mpopup-ctrl .pagination .swiper-pagination-current { color: #EF1417; margin-left: 0; margin-right: 3px; } 
.mpopup-ctrl [class*="btn-"]:not([class^="btn-play"]) { display: flex; } 
.mpopup-ctrl [class*="btn-"][disabled] { cursor: default; } 
.mpopup-ctrl [class*="btn-"] { position: relative; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; transition: all .3s; background: none; margin-left: 0px; border: none; } 
.mpopup-ctrl [class*="btn-"]::before { content: ''; display:block; box-sizing: border-box; } 
.mpopup-ctrl .btn-stop::before { border-left: 2px solid #5B5B5B; border-right: 2px solid #5B5B5B; width: 10px; height: 12px; } 
.mpopup-ctrl .btn-play { display: none; } 
.mpopup-ctrl .btn-play::before { border-width: 7px 0 7px 9px; border-style: solid; border-color: transparent transparent transparent #5B5B5B; width: 0; height: 0; } 
.mpopup-ctrl .btn-prev::before,
.mpopup-ctrl .btn-next::before { width: 10px; height: 10px; border-width: 2px; border-style: solid; border-color: transparent #33363D #33363D transparent; transition: all .3s; } 
.mpopup-ctrl .btn-prev::before { transform: translateX(3px) rotate(135deg); } 
.mpopup-ctrl .btn-next::before { transform: translateX(-3px) rotate(-45deg); } 
.mquick { position: relative; overflow: hidden; display: flex; gap: 24px; align-items: center; margin-top: 40px; } 
.mquick .tit-wrap .tit { font-family: var(--point-font800); font-size: 1.8824rem; line-height: 1; margin-bottom: 10px; } 
.mquick .tit-wrap span { color:#1E69F1; } 
.mquick .tit-wrap p { font-size: 0.9412rem; color: #464C53; line-height: 1; } 
.mquick-slide-wrap { position: relative; width: calc(100% - 90px); padding: 0 50px; } 
.mquick-slide-wrap { overflow: hidden; } 
.mquick-slide-wrap .mquick-slide {/* overflow: hidden; */} 
.mquick-slide-wrap .swiper-slide a { display: flex; align-items: center; justify-content: center; flex-direction: column; } 
.mquick-slide-wrap .swiper-slide a .img { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 7px;  transition: 1s;} 
.mquick-slide-wrap .swiper-slide a .tit { font-weight: 700; font-size: 0.9412rem; color: #1E2124; text-align: center; line-height: normal; word-break: auto-phrase; } 
.mquick-slide-wrap .swiper-slide a:hover .tit,
.mquick-slide-wrap .swiper-slide a:focus .tit { text-decoration: underline } 
.mquick-slide-wrap .swiper-slide a:focus { margin: 2px } 
.mquick-slide-wrap .swiper-slide a:hover .img{transform: rotateY(360deg); }
.mquick-ctrl {width: 100%;display: flex;justify-content: space-between;position: absolute;top: 0;bottom: 0;left: 0;margin: auto;align-items: center;} 
.mquick-ctrl [class*="btn-"] { position: relative; display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; transition: all .3s; background: none; border: none; border-radius: 50%; } 
.mquick-ctrl [class*="btn-"]::before { content: ''; display:block; box-sizing: border-box; } 
.mquick-ctrl .btn-prev::before,
.mquick-ctrl .btn-next::before { width: 18px; height: 18px; border-width: 4px; border-style: solid; border-color: transparent #9E9E9E #9E9E9E transparent; transition: all .3s; border-radius: 3px; } 
.mquick-ctrl .btn-prev::before { transform: translateX(3px) rotate(135deg); } 
.mquick-ctrl .btn-next::before { transform: translateX(-3px) rotate(-45deg); } 
.mquick-ctrl .swiper-button-lock { display: none; } 

@media all and (max-width:1499px){
 .msearch-wrap { margin-bottom: 40px } 
 .mlib-wrap .lib-cont-list { padding: 15px 20px 15px 40px; } 
 .mlib-wrap .lib-ntc { grid-template-columns: auto; padding: 5px; } 
 .mlib-wrap .lib-ntc .status { padding: 11px 2px } 
 .mlib-wrap .link-btn-wrap { padding: 0; margin-top: auto; } 
 .mlib-wrap .link-btn-wrap a {padding: 8px 10px;width: fit-content;} 
 .mbook-quick { top: 0; right: 0; width: 140px; height: 140px; background-size: contain; } 
 .mlib-status .open-barcode { padding: 4px 12px 4px 20px; font-size: 1rem; margin-bottom: 5px } 
 .mlib-wrap .lib-info .tit { font-size: 1.4rem } 
 .mlib-status .status-area p { margin-bottom: 0 } 
 .mlib-wrap .lib-info .addr { margin: 0 0 10px } 
 }
@media all and (max-width:1499px){
.sec01 .inner {padding-top: 115px}
}

@media all and (max-width:1199px){
 .sec01 .inner {padding-top: 60px}
 .sec01 .cont { flex-direction: column; } 
 .sec01 .top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 40px; } 
 .msearch-wrap { order: 3; width: 100%; margin-bottom: 20px; } 
 .mlib-status { position: relative; display: flex; gap: 10px; align-items: flex-start; } 
 .mlib-status .open-barcode { padding: 6px 10px; margin-bottom: 0; } 
 .mlib-status .status-area .state { padding: 6px 25px } 
 .mlib-status .status-area .small { display: none } 
 .mbook-quick {position: relative;background: url(/images/common/quick_book_m.svg);width: 173px;height: 41px;top: 0;right: -7px;margin-bottom: -5px;animation: none} 
 .mlib-wrap { width: calc(100% - 43.14% - 15px) } 
 .mlib-wrap .lib-info { padding: 15px; } 
 .mlib-wrap .lib-cont-list { padding: 15px 15px 15px 40px; } 
 .mlib-wrap .lib-cont-list ul li { padding: 0 8px 8px; } 
 .mquick { gap: 0 } 
 .mquick-slide {overflow: hidden;padding: 0 29px;} 
 }

 @media all and (max-width:1024px){
 .mpopup {width: 100%;margin: 0 auto 30px;} 
 .mlib-wrap { margin: 0 auto; width: 100%; } 
 }

@media all and (max-width:786px){
 .sec01 { padding: 76px 0 0; } 
 .msearch-wrap .search-tit, .mlib-status .open-barcode, .mquick .tit-wrap { display: none; } 
 .sec01 .inner { padding: 0; } 
 .sec01 .top { order: 2; align-items: flex-end; gap: 16px; } 
 .mpopup { order: 1; width: 100% } 
 .mpopup-ctrl { background: #eff3ff; padding: 14px 14px 8px 30px } 
 .mpopup-ctrl [class*="btn-"] { background: transparent; } 
 .mlib-status .status-area {padding-left: 30px;} 
 .mlib-status .status-area::before {width: 27px;height: 27px;background-size: contain;background-repeat: no-repeat;top: 1px;} 
 .mlib-status .status-area p { font-size: 21px } 
 .mlib-status .status-area .state { font-size: 14px; padding: 4px 22px; border-radius: 5px; } 
 .msearch-wrap { margin-bottom: 0 } 
 .msearch-wrap form { border-color: #A1A1A133; width: 100%; height: 52px; padding: 0 12px 0 28px; } 
 .msearch-wrap .sbHolder { padding-left: 0 } 
 .mquick-slide-wrap .swiper-slide a .tit {width: 71px;} 
 .mlib-wrap { order: 4; flex-direction: column; position: relative; } 
 .mlib-wrap::before { content:''; display: block; height: 100%; background: url(/images/main/m_lib_info_bg.png) no-repeat top right, linear-gradient(to bottom, #256EF4 40%, #fff 0%); position: absolute; top: 0; width: calc(100% + 40px); margin: 0; left: -20px; } 
 .mlib-wrap .lib-info { width:100%; display: flex; flex-wrap: wrap; background: none; padding: 40px 0; } 
 .mlib-wrap .lib-info .img { order: 4; aspect-ratio: 1 / .61; border-radius: 20px } 
 .mlib-wrap .lib-info .img::before { display: none; } 
 .mlib-wrap .lib-info .tit { font-size: 30px; } 
 .mlib-wrap .lib-info .addr { order: 3; width: 100%; margin-bottom: 33px; } 
 .mlib-wrap .link-btn-wrap { order: 2; margin-left: auto; } 
 .mlib-wrap .link-btn-wrap a { font-size: 0; width: 43px; height: 43px; border: none; } 
 .mlib-wrap .link-btn-wrap a:first-child { background: url(/images/main/ico_lib_home_m.png) }
 .mlib-wrap .link-btn-wrap a:last-child { background: url(/images/main/ico_lib_loc_m.png) } 
 .mlib-wrap .lib-cont-list { width: 100%; margin: 0; position: relative; box-shadow: none; padding: 0; padding-bottom: 30px; } 
 .mlib-wrap .lib-cont-list > .tit { display: flex; color: #000155; font-weight: 700; font-size: 19px; gap: 8px; align-items: center; margin-bottom: 10px } 
 .mlib-wrap .lib-cont-list > .tit::before { content:'→'; display: flex; align-items:center; justify-content: center; font-size: 12px; width:20px; height: 20px; color: #fff; background:#00318C; border-radius: 50% } 
 .mlib-wrap .lib-ntc { grid-template-columns: 46px auto } 
 .mlib-wrap .lib-ntc .status { font-size: 13px; height: 46px; } 
 .mlib-wrap .lib-ntc .info { font-family: 'Pretendard',sans-serif } 
 .mquick { order: 3; margin-bottom: 60px; } 
 .mquick-slide-wrap { width: 100%; padding: 0; } 
 .mquick-slide-wrap .swiper-slide a .img {width: 60px;height: 60px;background: #fff;border-radius: 20px} 
 .mquick-slide-wrap .swiper-slide a .img img { filter: brightness(1.1) hue-rotate(10deg); width: 30px; height: 30px; object-position: center; } 
 .mquick-slide {padding: 0} 
}

/* ******************* *
* section02
* ******************* */
.sec02 .tit-wrap { display: flex; justify-content: space-between; flex-wrap: wrap; margin-bottom: 16px; align-items: center; } 
.sec02 .inner {display: flex;flex-wrap: wrap;gap: 40px;} 
.mnotice {width: 38.334%;position: relative;} 
.mnotice h3.title { font-size: 1.7647rem; color: #1E2124; font-family: var(--point-font700); } 
.mnotice .tit-wrap { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid #CAC9C9; padding-bottom: 12px; margin-bottom: 20px; } 
.mnotice .cont {display: flex;flex-direction: column;gap: 16px;} 
.mnotice .cont li { display: flex; gap: 10px; align-items: center; } 
.mnotice .cont li .cate { min-width: 84px; text-align:center; color: #fff; background: #0B9A81; padding: 4px 0; border-radius: 50px } 
.mnotice .cont li a .ntc { color: #052B57; font-weight: 700; margin-right: 10px } 
.mnotice .cont li a { color:#1E2124; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; font-size: 1.1176rem;} 
.mnotice .cont li .date {color:#464C53;font-size: 1.1176rem;} 

.mcalendar {background: #F4F7FF;border-radius: 20px;display: flex;width: calc(100% - 38.334% - 40px);padding: 32px 40px;gap: 44px;position: relative;} 
.mcalendar > .tit-wrap { display: none } 
.mcalendar .more-btn { display: block; position: relative; transition: all .3s; margin-left: auto; width: 20px; background: none; height: 20px; border-radius: 0; } 
.mcalendar .more-btn::before,
.mcalendar .more-btn::after { content:''; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 2px; height: 20px; background: #081952; transition: all .3s; border-radius: 2px; } 
.mcalendar .more-btn::after { transform: rotate(90deg); } 
.mcalendar .more-btn:hover,
.mcalendar .more-btn:focus { box-shadow: 3px 3px 10px rgba(0,0,0,.15); } 
.mcalendar .cal-tb tbody td p.friday { background: #96969633; } 
.mcalendar .cal-tb tbody td.today p { background: #EA3547; color: #fff; } 
.mcalendar .calendar { width: 42.221%; } 
.mcalendar .schedule { width: calc(100% - 42.221% - 38px); display: flex; flex-direction: column; } 
.mcalendar .schedule .tit-wrap { margin-bottom: 21px; } 
.mcalendar .schedule .tit { font-size: 1.7647rem; color: #081952; font-family: var(--point-font700); display: flex; align-items: center; gap: 6px; } 
.mcalendar .schedule .tit::before { content: ''; display: block; width: 30px; height: 30px; background: url(/images/main/ico_megaphone.png); } 
.mcalendar .schedule .tit span { color:#4C44CC } 
.mcalendar .schedule .date { width: 100%; background: #5D53EE; padding: 7px; font-size: 1.2941rem; font-weight: 700; color: #fff; border-radius: 10px; text-align: center; margin-top: 11px; position: relative; } 
.mcalendar .schedule .date::after { content: ''; display: block; width: 75px; height: 65px; background: url(/images/main/deco_book.png); position: absolute; right: 0; top: -1px; } 
.mcalendar .schedule .more-btn::before,
.mcalendar .schedule .more-btn::after { background-color: #002088; } 
.mcalendar .schedule-list { display: flex; flex-direction: column; gap: 21px; } 
.mcalendar .schedule-list li { display: flex; gap: 10px; align-items: center; border-bottom: 1px dashed #8A949E; padding-bottom: 10px; } 
.mcalendar .schedule-list li:last-child { border-bottom: none; } 
.mcalendar .schedule-list li::before { content: ''; display: block; width: 6px; height: 6px; background-color: #919191; border-radius: 50%; } 
.mcalendar .schedule-list li a { color: #1E2124; font-size: 1.1176rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 0; max-width: 100%; } 
.mcalendar .cal-state {display: flex;gap: 16px;margin-top: auto;justify-content: flex-end;position: absolute;right: 40px;bottom: 30px;} 
.mcalendar .cal-state li { color: #323232; font-weight: 700; display: flex; align-items: center; gap: 5px; } 
.mcalendar .cal-state li::before { content: ''; display: block; width: 10px; height: 10px; background: #2E72EC; border-radius: 50%; } 
.mcalendar .cal-state li.closed::before { background:#E1E4EA } 
.mcalendar .cal-state li.today::before { background: #DA525D; } 
.middle-banner { width: 100% } 
.middle-banner .mo { display: none; } 

@media all and (max-width:1499px){
 .sec02 .inner { gap: 20px } 
 .mnotice-slide .swiper-slide a { padding: 20px } 
 .mnotice-slide .swiper-slide a .date { margin-bottom: 15px } 
 }

@media all and (max-width:1024px){
 .mnotice,
 .mcalendar {width: 100%;} 
 }
 @media all and (max-width:768px){
 .sec02 {padding: 30px 0} 
 .mnotice {background: #EEF2F7;margin: 0 -15px;padding: 30px 15px;width: -webkit-fill-available;} 
 .mcalendar { width: 100%; flex-direction: column; background: none; position: relative; gap: 0; padding: 30px 0 } 
 .mcalendar::before { content:''; display: block; background: #fff; position: absolute; width:calc(100% + 40px); height: 100%; top: 0; left: -20px; z-index: 0; } 
 .mcalendar > .tit-wrap { display: flex; position: relative; z-index: 1; margin-bottom: 10px; flex-direction: column; align-items: flex-start } 
 .mcalendar .calendar { background: #EFF3FF; padding: 26px 20px; border-radius: 20px; /* position: relative; */z-index: 1; width: 100%; margin-bottom: 27px } 
 .mcalendar .schedule { width: 100%; z-index: 1 } 
 .mcalendar .cal-state {position: static;} 
 .mcalendar .tit-wrap .more-btn { background: #002088; width: 40px; height: 40px; border-radius: 10px } 
 .mcalendar .tit-wrap .more-btn::before, 
 .mcalendar .tit-wrap .more-btn::after { background: #fff; } 
 }

 @media all and (max-width: 480px) {
  .middle-banner .mo { display: block; } 
.middle-banner .pc { display: none; } 
 }

/* ******************* *
* section03
* ******************* */
.sec03 { background: url(/images/main/sec03_bg.png); position: relative; background-size: cover; } 
.sec03::before { content:''; display: block; width: 469px; height: 272px; background:url(/images/main/sec03_deco.png); position: absolute; top: 80px; right: 0; } 
.sec03 .tit-wrap { display: flex; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; gap: 2px 14px; align-items: center; } 
.sec03 .tit-wrap .desc { width: 100%; text-align: center; font-weight: 400; color: #2c2c2c } 
.mculture .cont { display: flex; gap: 20px; flex-wrap: wrap; } 
.mculture-slide {overflow: hidden;min-height: 506px;min-width: 1500px;} 
.mculture-slide .swiper-wrapper {flex-wrap: wrap;gap: 20px}
.mculture-slide .swiper-slide {width: calc(25% - 15px);}
.mculture .swiper-slide a { display: flex; flex-direction: column; padding: 30px 30px 0; border: 1px solid #E0E6EB; background: linear-gradient(0deg, #FBFCFF 0%, #FBFCFF 100%); border-radius: 20px; box-shadow: 3px 3px 10px rgba(196.67, 204.91, 237.84, 0.40); height: 100%; width: 100%; transition: all .2s; } 
.mculture .swiper-slide .tit { font-size: 1.4118rem; color: #142c6d; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 14px 0 7px; transition: all .2s; } 
.mculture .swiper-slide .grade { color: #2B499D; background-color: #EFF2FE; padding: 4px 10px; border-radius: 50px; width: fit-content; font-weight: 600; margin-bottom: 34px; transition: all .2s; } 
.mculture .swiper-slide .date { color: #1E2124; display: flex; margin-bottom: 8px; transition: all .2s; line-height: 1.1; } 
.mculture .swiper-slide .date span { font-weight: 600; margin-right: 6px } 
.mculture .swiper-slide .date:last-of-type { margin-bottom: 16px } 
.mculture .swiper-slide .status { color: #fff; background: #5271EF; border-radius: 16px 0 16px 0; width: 178px; height:40px; display: flex; align-items: center; justify-content: center; margin: 0 -30px; align-self:end; margin-top: auto; } 
.mculture .swiper-slide a:hover,
.mculture .swiper-slide a:focus { background: #256EF4; } 
.mculture .swiper-slide a:hover .cate-wrap .cate,
.mculture .swiper-slide a:focus .cate-wrap .cate { background: #fff; color: #00489A; } 
.mculture .swiper-slide a:hover .tit,
.mculture .swiper-slide a:focus .tit,
.mculture .swiper-slide a:hover .date,
.mculture .swiper-slide a:focus .date { color: #fff; } 
.mculture .swiper-slide a:hover .grade,
.mculture .swiper-slide a:focus .grade { background-color: #001B864D; color: #fff; } 
.mculture .swiper-slide a:hover .status,
.mculture .swiper-slide a:focus .status {background: #10299f}

.mculture-ctrl { display: none; } 
@media all and (max-width:1399px){
.mculture-slide {min-width: auto;}
}
@media all and (max-width:1199px){
 .sec03::before {width: 150px;background-size: contain;height: 80px;top: 0;}
  .mculture-slide .swiper-slide {width: 100%}
  .mculture-slide .swiper-slide:nth-child(n+5) {display: none}
 .mculture-slide {min-height: auto;}
 .mculture .swiper-slide a {padding: 26px 20px 0;} 
 .mculture .swiper-slide .status {width: 137px;margin: 0 -20px;} 
 
 }

@media all and (max-width:768px){
 .sec03 { padding: 30px 0 } 
 .sec03::before { display: none } 
 .sec03 .tit-wrap { justify-content: flex-start } 
 .sec03 .tit-wrap .desc { text-align: left } 
 .sec03 .tit-wrap .more-btn { margin-left: auto; } 
 .mculture .swiper-slide .tit { margin: 0 0 2px } 
 .mculture .swiper-slide .grade { margin-bottom: 22px } 
 .mculture .swiper-slide .date br { display: none; } 
 .mculture-ctrl {/* display: flex; */gap: 8px;align-items: center;justify-content: center;margin-top: 30px} 
 .mculture-ctrl .pagination { display: flex; align-items: center; width: fit-content; } 
 .mculture-ctrl .pagination span { font-weight: 700; margin-left: 3px; } 
 .mculture-ctrl .pagination .swiper-pagination-current { color: #256EF4; margin-left: 0; margin-right: 3px; } 
 .mculture-ctrl [class*="btn-"][disabled] { cursor: default; } 
 .mculture-ctrl [class*="btn-"] { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; transition: all .3s; margin-left: 0px; border: none; background: none; } 
 .mculture-ctrl [class*="btn-"]::before { content: ''; display:block; box-sizing: border-box; } 
 .mculture-ctrl .btn-prev::before,
 .mculture-ctrl .btn-next::before { width: 12px; height: 12px; border-width: 2px; border-style: solid; border-color: transparent #33363D #33363D transparent; transition: all .3s; } 
 .mculture-ctrl .btn-prev::before { transform: translateX(3px) rotate(135deg); } 
 .mculture-ctrl .btn-next::before { transform: translateX(-3px) rotate(-45deg); } 
 }

/* ******************* *
* section04
* ******************* */
.sec04 { background: #f4f6f7 url(/images/main/sec04_bg.png) no-repeat; padding: 116px 0 0px; background-size: cover; } 
.sec04 .inner { width: 100%; } 
.sec04 .tit-wrap { display: flex; justify-content: center; margin-bottom: 20px; flex-wrap: wrap; gap: 12px 14px; align-items: center; } 
.sec04 .tit-wrap .desc { width: 100%; text-align: center; font-weight: 400; color: #2c2c2c } 
.mbook .tab-list { display: flex; justify-content: center; margin: 26px 0 60px; gap: 12px; } 
.mbook .tab-list li a { display: block; color: #838899; font-size: 1.1765rem; font-weight: 700; background: #fff; border: 1px solid #b7c5ff; transition: all .2s; width: 320px; text-align: center; padding: 14px 20px; border-radius: 10px; } 
.mbook .tab-list li a.active,
.mbook .tab-list li a:hover,
.mbook .tab-list li a:focus { color: #fff; background: #5271EF; } 

[class^='mbook-slide-wrap'] { position: relative; } 
.mbook-slide {max-width: 1397px;position: relative;margin: 0 auto;overflow: hidden;padding: 90px 0;} 
.mbook-slide .swiper-slide { width: calc(20% - 25px); } 
.mbook-slide .swiper-slide-active {transform: scale(1.373);} 
.mbook-slide .swiper-slide a { display: flex; align-items: center; justify-content: center; flex-direction: column; } 
.mbook-slide .swiper-slide .info {font-size: 1.1176rem;color: #1e2124;font-weight: 700;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;width: 100%;text-align: center;} 
.mbook-slide .swiper-slide .cate {margin: 24px 0 3px;}
.mbook-slide .swiper-slide-active .info {font-size: 16px;}
.mbook-slide .swiper-slide-active .cate {font-size: 15px;text-align: center;margin-top: 20px;}
.mbook-slide .writer {color: #464c53;text-align: center;} 
.mbook-slide .swiper-slide .book-thumb { width: 212px; height: 306px; box-shadow: 4px 4px 30px rgba(0, 0, 0, 0.25); } 
.mbook-slide .swiper-slide .book-thumb img { width: 100%; height: 100%; } 
[class^='mbook-ctrl'] { position: absolute; display: flex; justify-content: space-between; align-items: center; width: 100%; top: -60px; bottom: 0; margin: auto; } 
[class^='mbook-ctrl'] button { display: block; width: 50px; height: 50px; background: none; position: relative; margin: 0 -30px; z-index: 1; border: none; } 
[class^='mbook-ctrl'] button::before { content: ''; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-width: 4px; border-style: solid; border-color: transparent #3B3B3B #3B3B3B transparent; box-sizing: border-box; width: 25px; height: 25px; border-radius: 4px; } 
[class^='mbook-ctrl'] .next-btn::before { transform: rotate(-45deg) translate(-3px, -3px); } 
[class^='mbook-ctrl'] .prev-btn::before { transform: rotate(135deg) translate(-3px, -3px); } 

@media all and (max-width:1499px){
 .sec04 .inner { width: calc(100% - 60px); } 
 .mbook-slide { max-width: 100% } 
 }
@media all and (max-width:1199px){
 .sec04 .inner {width: auto;}
 .mbook-slide .swiper-slide .book-thumb { width: 172px; height:248px } 
 .mbook-slide.swiper-slide-active { transform:scale(1.46) } 
 .mbook-slide .swiper-slide-active .tit { font-size: 1rem } 
 .mbook-slide .swiper-slide-active .writer { font-size: .8em } 
 }

 
@media all and (max-width:768px){
 .sec04 { padding: 30px 0 } 
 .mbook .tab-list li { width: 48% } 
 .mbook .tab-list li a { width: 100% } 
 .mbook-slide { padding: 50px 100px; margin: 0 48PX; } 
 .mbook-slide .swiper-slide { opacity: .6 } 
 .mbook-slide .swiper-slide-active { opacity: 1 } 
 .mbook-slide { overflow: visible; } 
 [class^='mbook-ctrl'] {left: 0;padding: 0;} 
 [class^='mbook-ctrl'] button { margin:0; width: 60px; height: 60px; background:rgba(0,0,0,.6); border-radius: 50% } 
 [class^='mbook-ctrl'] button::before { border-width: 1px; border-color: transparent #fff #fff transparent; width: 15px; height: 15px; border-radius: 0px; } 
 }

 @media all and (max-width:540px){
 .mbook-slide { padding: 50px 80px; } 
 }

 @media all and (max-width:480px){
 .mbook-slide {padding: 50px 55px;} 
 }

 @media all and (max-width:420px){
 .mbook-slide { padding: 50px 15px; } 
 }

/* ******************* *
* layer-pop
* ******************* */
#layer-pop-wrap { display: none; align-items: center; background: rgba(0,0,0,.6); opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; transition: opacity .35s; z-index: 101; }
#layer-pop-wrap.show { display: flex; }
#layer-pop-wrap.show.stable { opacity: 1; }
#layer-pop-wrap.hide { display: none; }
#layer-pop { display: flex; flex-direction: column; background: #fff; box-sizing: border-box; margin: 0 auto; position: relative; width: 100%; max-width: 725px; max-height: 661px; border-radius: 20px; overflow: hidden; }
#layer-pop-head .title { font-size: 1.556em; font-weight: 700; line-height: 1.25; padding: 20px 50px; background: #7b3fd1; color: #fff; }
#layer-pop-cont { flex: 1 1 100%; overflow-y: auto; padding: 31px 45px 36px; }
#layer-pop-close { border: none; position: absolute; top: 0; right: 0; margin: 0; width: 56px; height: 56px; background: #000; }
#layer-pop-close:before,
#layer-pop-close:after { content: ''; display: block; background: #fff; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 20px; height: 2px; }
#layer-pop-close:before { transform: rotate(45deg); }
#layer-pop-close:after { transform: rotate(-45deg); }
#layer-pop-cont .layer-mculture { display: flex; flex-direction: column; height: 100%; }
#layer-pop-cont .layer-mculture .title-wrap { background: #F6F9FF; margin: -31px -45px 0; padding: 31px 45px 18px; }
#layer-pop-cont .layer-mculture .cate-wrap .cate { background: #0C8499; padding: 5px 14px; border-radius: 5px; color: #fff; font-weight: bold }
#layer-pop-cont .layer-mculture .cate-wrap .status { color:#256EF4; font-weight: bold }
#layer-pop-cont .layer-mculture .title { font-size: 1.4118rem; font-weight: bold; margin-top: 10px }
#layer-pop-cont .layer-mculture ul { margin: 30px 0 16px; border-bottom: 1px solid #CDD1D5 }
#layer-pop-cont .layer-mculture ul li { display: flex; gap: 16px; font-size: 0.9412rem; border-bottom: 1px solid #CDD1D5; padding: 11px 0; }
#layer-pop-cont .layer-mculture ul li .tit { min-width: 86px; font-weight: 600 }
#layer-pop-cont .layer-mculture .desc { color: #464C53; text-align: center; margin-bottom: 20px }
#layer-pop-cont .layer-mculture .btn-app { background: #256EF4; color: #fff; font-size: 1.1176rem; font-weight: bold; display: block; text-align: center; border-radius: 6px; width: 408px; padding: 12px 0; align-self: center; margin-top: auto; }
#layer-mculture {display: none;}
@media all and (max-width:1199px){
 #layer-pop-wrap { padding: 30px 30px 0; width: 100% !important; }
 #layer-pop-head .title { font-size: 1.356em; padding: 20px; }
 #layer-pop-cont { padding: 30px; }
 #layer-pop-close { margin: 12px 20px; }
}
@media all and (max-width:640px){
 #layer-pop-wrap { padding: 20px 15px 0; }
 #layer-pop-cont { padding: 20px 15px 20px; }
}