/**************************************************
* 버전관리
* version : v=1
* Last Update : 
**************************************************/

/********************************************************
■ swiper control
********************************************************/
.control{display:flex; gap:0.5rem; align-items:center;}
.control .button-prev,
.control .button-next{ width:1rem; height:1rem; display:inline-block; background:url('/images/layout/icon_arrow.svg')no-repeat 50% 50%; background-size:100% auto; cursor:pointer;}
.control .button-prev.swiper-button-lock,
.control .button-next.swiper-button-lock{display:none;}
.control .button-prev{transform:scaleX(-1);}
.control .pagination{width:auto;font-family: 'LINESeedSans'; color:var(--black); font-weight:600;}
.control .pagination .swiper-pagination-current{font-weight:600;}
.control .pagination .swiper-pagination-total{font-weight:400; color:var(--gray-7);}
.control .play{display:inline-block; width:1rem; height:1rem; font-size:0; background:url('/images/layout/icon_play.svg')no-repeat 50% 50%; background-size:100% auto; cursor:pointer; }
.control .play.on{background-image:url('/images/layout/icon_stop.svg')}

/********************************************************
■ 비쥬얼
********************************************************/
#visual{height:25rem; position:relative;}
#visual .swiper-container{height:100%;}
#visual .swiper-slide{display:flex; align-items:center; justify-content:center; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; z-index:0; overflow:hidden;}
#visual .swiper-slide .vis-img{position:absolute; left:50%; top:50%; z-index:-1; width:100%; height:100%; background-position:60% 50%; background-size:cover; transform:translate(-50%,-50%) scale(1.1); transition: all 3s ease-out 0s;}
#visual .vtext{width:69rem; color:var(--black); margin-bottom:3rem;}
#visual .vtext h3{display:flex; align-items:flex-end; gap:0.75rem; font-size:2.1rem; font-weight:700; line-height:1; overflow:hidden;}
#visual .vtext h3 span{}
#visual .vtext p{font-size:1.45rem; font-weight:500; margin-top:1rem;overflow:hidden; }
#visual .vtext h3 span{display:block;   transform: translateY( 150%); -webkit-transform:  translateY( 150%); transition: transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98); -webkit-transition: transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);}
#visual .vtext p span{display:block;   transform: translateX(-100%); -webkit-transform: translateX(-100%); transition: transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98); -webkit-transition: transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98);}
#visual .vtext a{display:flex; align-items:center; justify-content:center; gap:1rem; color:#fff; margin-top:2rem; outline:2px solid rgba(255,255,255,0.7); width:9rem; border-radius:1.5rem; height:2.75rem; font-size:0.75rem;
                 background-image: url(/images/layout/symbol_w.svg), linear-gradient(90deg, #0554a9, #2a82c7); background-repeat: no-repeat, no-repeat; background-position: right -1rem top 50%, left; background-size: auto 2rem, 100%;
                 opacity:0; transform:  translateY( 150%); -webkit-transform:  translateY( 150%); transition: opacity 0.5s, transform 1.5s cubic-bezier(0.16, 1.08, 0.38, 0.98); -webkit-transition: opacity 0.5s, transform 1.5s cubic-bezier(0.16, 1.08, 0.38, 0.98)}
#visual .vtext a i{font-size:0.9rem;}
#visual .control{ width:69rem; position:absolute; left:calc(50% -  34.5rem); bottom:6rem;  z-index: 1; gap:0.25rem;}
#visual .control .play{order:3;}
#visual .control .button-next{order:4;}

#visual .swiper-slide-active  .vis-img,
#visual .swiper-slide-duplicate-active  .vis-img{transform:translate(-50%,-50%) scale(1);}
#visual .swiper-slide-active .vtext span{transform:  translateY( 0); -webkit-transform:  translateY( 0);}
#visual .swiper-slide-duplicate-active .vtext span{transform: translateX(0); -webkit-transform: translateX(0);}
#visual .swiper-slide-active .vtext h3 span,
#visual .swiper-slide-duplicate-active .vtext h3 span{ transition-delay: .1s;}
#visual .swiper-slide-active .vtext p span,
#visual .swiper-slide-duplicate-active .vtext p span{ transition-delay: .3s;}
#visual .swiper-slide-active .vtext a,
#visual .swiper-slide-duplicate-active .vtext a{transform:  translateY( 0); -webkit-transform:  translateY( 0); opacity:1; transition-delay: .5s;}

#visual .control .pagination{width:15rem; height:3px; margin-right:1rem;}
#visual .control .swiper-pagination-bullet{display:none; width:100%; opacity: 1; background:none;  margin:0;  border-radius:0; -webkit-border-radius:0; text-align:left; }
#visual .control .swiper-pagination-bullet .timer{position:relative; display:block;  height:1px; width: 100%; }
#visual .control .swiper-pagination-bullet .timer:before{content : ""; display : block; position : absolute; left : 0; top:-3px;  width :100%;  height:1px; background:rgba(255,255,255,1); }
#visual .control .swiper-pagination-bullet .timer .timerbar{position:absolute; display:block; content:""; top:-3px; left:0; width:0;  height:1px; background:#2f54a6; z-index:1;  transform-origin: center left; }
#visual .control .swiper-pagination-bullet-active{opacity:1; display:block; }
#visual .control .swiper-pagination-bullet-active .timer{height:3px;}
#visual .control .swiper-pagination-bullet-active .timer:before{height:3px; background:rgba(255,255,255,1);}
#visual .control .swiper-pagination-bullet-active .timer .timerbar{width:100%; height:3px; animation:progressAnim 5s linear; animation-play-state: running;}  

@keyframes progressAnim {
	0% {
		transform: scaleX(0);
	}
	100% {
		transform: scaleX(1);
	}
}


@media (max-width:1440px) {
    #visual .vtext{width:100%; padding:0 2rem;}
    #visual .control{ width:100%; left:0; padding:0 2rem; }
}
@media (max-width:1024px) {
    #visual{height:70vh;}
}
@media (max-width:768px) {
    #visual{height:65vh;}
    #visual .vtext h3{display:block;}
    #visual .vtext h3 em{display:block; margin-top:0.4rem;}
    #visual .vtext p{font-size:1rem;}

    #visual .control{bottom:2rem;}
    #visual .control .button-prev,
    #visual .control .button-next,
    #visual .control .play{width:2rem; height:2rem;}
    #visual .control .pagination{flex:1;}
}

/********************************************************
■ 공통
********************************************************/
.inner{max-width:76rem; padding:0 1rem; margin:0 auto;}

.title{text-align:center; color:var(--black); margin-bottom:2.5rem;}
.title h3{font-size:2rem;}
.title p{font-size:1rem;}

.moreBtn{display:inline-flex; align-items:center; gap:1rem; padding:0.5rem; padding-left:1rem; background:#fff; border-radius:1.5rem; border:1px solid #000; color:var(--gray-3); font-size:var(--font15); transition: all 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0s;}
.moreBtn .arrow{display:inline-block; width:1.4rem; height:1.4rem; border-radius:50%; background:#000 url('/images/content/arrow_more_w.svg')no-repeat 50% 50%; background-size:0.8rem auto; transition: all 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0s;}
.moreBtn:hover{background:#000; color:#fff;}
.moreBtn:hover .arrow{background:#fff url('/images/content/arrow_more.svg')no-repeat 50% 50%; background-size:0.8rem auto;}

.swiper-pagination-bullet{width:8px; height:8px; background:#000; border-radius:4px;     opacity: 0.15; }
.swiper-pagination-bullet-active{width:30px;  opacity: 1; background:#000;}

@media (max-width:1440px) {
    .title{padding:0 1rem;}
}

.fadeInUp{animation: fadeInUp 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes fadeInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(60px);
        transform: translateY(60px)
    }

    to {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}



/********************************************************
■ 사이트정보
********************************************************/
.site_wrap{background:#EFF8FE; position:relative; padding:4.5rem 0;}
.site_tab{position:absolute; right:0; top:11.5rem; background:#D1E9F8; border-radius:1rem 0 0 1rem; padding:1.5rem 0; width:7.5rem;}
.site_tab li a{display:block; padding:1rem; padding-right:2rem; color:var(--gray-3); font-size:var(--font15); cursor:pointer;}
.site_tab li.on a{ width: calc(100% + 2rem); left: -2rem; position: relative;border-radius:1rem 0 0 1rem; background-image:url('/images/layout/symbol_w.svg'), linear-gradient(#146eba, #2a82c7); background-repeat: no-repeat,no-repeat; background-position: right -1rem top 50%, left; background-size: auto 2rem, 100%;
                   color:#fff; font-weight:600; font-size:var(--font17);     transition: width 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0s;}

.qtBox_wrap{display:flex; gap:2rem;}
.qtBox_wrap .slide{width:30rem; border-radius:1rem; box-shadow:0 0 0.7rem rgba(0,0,0,0.06); overflow:hidden;}
.qtBox_wrap .slide .swiper-container{height:100%;}
.qtBox_wrap .slide .swiper-slide {aspect-ratio: 30 / 19;}
.qtBox_wrap .slide .swiper-slide img{height:100%; width:100%; object-fit:cover;}
.qtBox_wrap .slide .swiper-slide .slide-tit{color:var(--gray-1); font-size:var(--font28); line-height:1.3;}
.qtBox_wrap .slide .swiper-slide .slide-cont{font-size:var(--font15); margin-top:0.5rem;}
.qtBox_wrap .slide .swiper-slide .slide-tag{display:block; color:#025cab; margin-bottom:0.5rem; font-weight:600;}
.qtBox_wrap .qt_box{position:relative; display:flex; flex-direction: column; flex:1; border-radius:1rem; background:#14357f; padding:1.5rem 1.5rem 1rem; min-height: 19rem; }
.qtBox_wrap .qt_box h4{position:absolute; left:0; top:0; width:100%; height:3.5rem; line-height:3.5rem; color:#fff; font-weight:700; font-size:var(--font24); text-align:center; z-index:2;}
.qtBox_wrap .qt_box p{text-align:center; color:#fff; margin-top:0.7rem; font-size:var(--font19); }
.qtBox_wrap .qt_box .box{position:relative; display:flex;  flex:1; background:#F1F8FD url('/images/layout/qt_box_big.jpg')no-repeat left bottom; border-radius:0 0 1rem 1rem; padding:1rem; padding-bottom:2rem; color:#14357f; margin-top:2rem;}
.qtBox_wrap .qt_box .box > div{width:65%; padding:0 2rem; z-index:2;     display: flex; flex-direction: column; justify-content: center;}
.qtBox_wrap .qt_box .box:before{content:""; position:absolute; left:0; top:-2.05rem; width:9.9rem; height:2.05rem; background:url('/images/layout/qt_box_basic.png')no-repeat 0 0; background-size:100% 100%; z-index:1;}
.qtBox_wrap .qt_box .box:after{content:""; position:absolute; right:0; top:-41px; width:9.95rem; height:88px; background:url('/images/layout/qt_box_right.png')no-repeat 0 0; background-size:100% 100%; z-index:1;}
.qtBox_wrap .qt_box .box span{position:relative; display:block; font-weight:700; margin-bottom:0.4rem; }
.qtBox_wrap .qt_box .box span.ac img{display:block; margin:0 auto;}
.qtBox_wrap .qt_box .box h5{font-family: 'SejongHospital'; color:#14357f; font-weight:600; font-size:1.5rem;  text-wrap: pretty;}
.qtBox_wrap .qt_box .box .book{ width:35%; display:flex; justify-content:center; align-items:center; }
.qtBox_wrap .qt_box .box .book img{width:50%; box-shadow:1px 1px 15px 3px rgba(5,24,65,0.15); aspect-ratio: 31 / 42; }
.qtBox_wrap .qt_box .box.qtData_box,
.qtBox_wrap .qt_box .box.qteen_box{padding-bottom:1rem;}
.qtBox_wrap .qt_box .date{ height:3.5rem; display:flex; align-items: center; padding-right:3rem; color:#fff; }
.qtBox_wrap .qt_box .date .now-date{width:15rem; font-size:1rem; text-align:center; flex-shrink:0; font-weight:500; margin-top:1rem;}
.qtBox_wrap .qt_box .date ul{display:flex; flex:1; gap:0.5rem;  z-index: 1; padding-top:1rem;}
.qtBox_wrap .qt_box .date ul li{flex:1; text-align:center; font-weight:600;}
.qtBox_wrap .qt_box .date ul li a{display:block;  padding:0.75rem 0; cursor:pointer;}
.qtBox_wrap .qt_box .date ul li .day{display:block; font-size:var(--font15); font-weight:400;}
.qtBox_wrap .qt_box .date ul li .day.sun{color:#8fe3d4;}
.qtBox_wrap .qt_box .date ul li.on a{border:3px solid #14357f; background:#fff; color:#14357f; border-radius:1.25rem; transform: translateY(-15px); font-weight:700;}
.qtBox_wrap .qt_box .date ul li.on a .day{font-weight:700;}
.qtBox_wrap .qt_box .date ul li.on a .day.sun{color:#14357f;}

#s04 .qtBox_wrap .slide{order:2;}
#s04 .qtBox_wrap .qt_box{order:1;}
.qtBox_wrap .qt_box .half_box{display:flex; gap:1rem; height:100%; margin-top:2rem;}
.qtBox_wrap .qt_box .half_box > div{position:relative; flex:1; border-radius:1rem; background:#F1F8FD url('/images/layout/qt_box.jpg')no-repeat 50% bottom; background-size:100% auto; padding:2rem 1.5rem; display:flex; align-items: center; gap:1.5rem;}
.qtBox_wrap .qt_box .half_box > div:before{content:""; position:absolute; left:0; top:-41px; width:9.9rem; height:41px; background:url('/images/layout/qt_box_basic.png')no-repeat 0 0; background-size:100%;}
.qtBox_wrap .qt_box .half_box > div.box2_left{border-top-left-radius:0}
.qtBox_wrap .qt_box .half_box > div.box2_left:before{left:0;}
.qtBox_wrap .qt_box .half_box > div.box2_right{border-top-right-radius:0}
.qtBox_wrap .qt_box .half_box > div.box2_right:before{left: auto; right:0; transform: scaleX(-1);}
.qtBox_wrap .qt_box .half_box > div p{flex:1; margin-top:0; margin-bottom:4rem; text-align:left;}
.qtBox_wrap .qt_box .half_box > div .book{width:40%;  overflow:hidden; box-shadow:1px 1px 15px 3px rgba(5,24,65,0.15); aspect-ratio: 31 / 42;}
.qtBox_wrap .qt_box .half_box > div p img{display:block;}
.qtBox_wrap .qt_box .half_box > div a{display:inline-flex; align-items:center; gap:0.2rem; border:1px solid #afbac5; margin-top:1rem; background:#fff; border-radius:1rem; font-size:var(--font15); color:var(--gray-3); padding:0.5rem;  transition: all 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0s;}
.qtBox_wrap .qt_box .half_box > div a i{display:inline-block; flex-shrink: 0; width:1rem; height:1rem; border-radius:50%; background:#0353AA url('/images/content/arrow_w.svg')no-repeat 50% 50%; background-size:0.3rem auto;}
.qtBox_wrap .qt_box .half_box > div a:hover{background:#0353AA; color:#fff; }
.qtBox_wrap .qt_box .half_box > div a:hover i{background:#fff url('/images/content/arrow_m.svg')no-repeat 50% 50%; background-size:0.3rem auto;}

.banList { margin-top: 1.5rem;}
.banList .swiper-container{overflow: visible;}
.banList a{position:relative; display:flex; align-items:center; gap:1rem; z-index:0;  transition: all 0.3s cubic-bezier(0.390, 0.575, 0.565, 1.000) 0s;}
.banList a .img{flex-shrink:0; width:10rem; height:6rem; border-radius:0.4rem; border:1px solid var(--gray-e0); background-repeat:no-repeat; background-position:50% 50%; background-size:cover; }
.banList a .txt strong{display:block; font-size:var(--font19); color:var(--gray-3);}
.banList a .txt p{ text-wrap-style: balance;}
.banList a:hover .txt strong{color:var(--blue-4);}
.banList a:hover:before{content:""; position:absolute; left:-0.25rem; top:-0.25rem; width:calc(100% + 0.5rem); height:calc(100% + 0.5rem);  background:#fff; border-radius:0.5rem; box-shadow: 0 0 1rem rgba(36, 78, 162, 0.1); z-index:-1; }
.banList .swiper-pagination{position:relative; bottom:auto; margin-top:0.5rem;}


@media (max-width:1900px) {
    .site_wrap .inner{margin-right:7rem;}

    .site_tab{width:6rem;}
    .site_tab li a{padding-right:1rem;}
    .site_tab li.on a{ width: calc(100% + 1rem); left: -1rem;}
}
@media (max-width:1650px) {
    .qtBox_wrap .qt_box .date{padding-right:0;}
    .qtBox_wrap .qt_box .date .now-date{width:auto; padding:0 1rem;}

    .qtBox_wrap .qt_box .box > div{padding:0 1rem}

    .banList a .img{width:6rem; height:5rem;}
}
@media (max-width:1440px) {
    .qtBox_wrap{gap:1.5rem;}
    .qtBox_wrap .slide{width:37%}
    
    .qtBox_wrap .slide .swiper-slide .app-down img{height:2rem;}
    .qtBox_wrap .slide .swiper-slide .slide-cont{padding-right:5rem;}
    .qtBox_wrap .slide .swiper-slide .slide-cont br{display:none;}

    .qtBox_wrap .qt_box{padding:1.5rem 1rem 1rem;}
    .qtBox_wrap .qt_box .box .book img{width:65%;}
    .qtBox_wrap .qt_box .half_box > div{gap:0.5rem; padding:2rem 1rem;}
    .qtBox_wrap .qt_box .half_box > div p{margin-bottom:2rem;}
    .qtBox_wrap .qt_box .half_box > div:before{top:-37px;}

    .banList{width:calc(100% + 7rem);}
    .intro .banList{width:100%;}
}

@media (max-width:1024px) {
    .site_wrap .inner{margin-right:0}

    .site_tab{position:relative; right:auto; top:auto; border-radius:0; width:100%; padding:0 1rem; background:none;}
    .site_tab ul{display:flex; background: #D1E9F8; border-radius:1rem; margin-bottom:2.5rem;}
    .site_tab ul li{flex:1;}
    .site_tab ul li a{display:flex; align-items:center; justify-content:center; font-size:var(--font17); text-align:center; height:100%;}
    .site_tab li.on a{width:100%; left:0; border-radius:1rem;     background-size: auto 3rem, 100%;}

    .qtBox_wrap{gap:1rem; flex-direction:column-reverse;}
    .qtBox_wrap .slide{width:100%;}
    .qtBox_wrap .slide .swiper-slide .slide-cont{padding-right:20vw;}
    .qtBox_wrap .qt_box .box{padding:2rem 1rem;}
    .qtBox_wrap .qt_box .box > div{display:flex; flex-direction:column; justify-content: center; }
    .qtBox_wrap .qt_box .date{flex-direction: column-reverse; height:auto;}
    .qtBox_wrap .qt_box .date .now-date{padding:0;}
    .qtBox_wrap .qt_box .date ul{padding-top:0; width:100%;}
    .qtBox_wrap .qt_box .half_box > div:before{top:-35px;}

    #s04 .qtBox_wrap .slide{order:1;}

    .banList{width:100%;}
}
@media (max-width:768px) {
    .site_tab ul{flex-wrap:wrap; gap:0.5rem; padding:0.5rem}
    .site_tab ul li{flex:1 0 calc(50% - 0.25rem);}
    .site_tab ul li a{padding:1rem 0.5rem; background:rgba(255,255,255,0.4); border-radius:0.5rem;}
    .site_tab ul li a br{display:none;}

    .qtBox_wrap .qt_box h4{text-align:left; padding-left:1rem;}
    .qtBox_wrap .qt_box .box{border-top-left-radius:1.5rem;}
    .qtBox_wrap .qt_box .box:before{display:none;}
    .qtBox_wrap .qt_box .box h5{font-size:1.2rem;}
    .qtBox_wrap .qt_box .box .book img{width:100%;}
    .qtBox_wrap .qt_box .box > div{padding-right:0;}

    .qtBox_wrap .qt_box .half_box{flex-direction: column}
    .qtBox_wrap .qt_box .half_box > div p{margin-bottom:0;}
    .qtBox_wrap .qt_box .half_box > div .book{width:25vw;}
    .qtBox_wrap .qt_box .half_box > div.box2_left{    border-top-left-radius: 1rem; border-top-right-radius:0;}
    .qtBox_wrap .qt_box .half_box > div.box2_left:before{left:auto; right:0; transform: scaleX(-1); top:-31px;}
    .qtBox_wrap .qt_box .half_box > div.box2_right{border-top-right-radius:1rem;}
    .qtBox_wrap .qt_box .half_box > div.box2_right:before{display:none;}
}



/********************************************************
■ 정기구독정보
********************************************************/
.book_wrap{padding:4.5rem 0;}

.book_list .swiper-container{overflow:visible;}
.book_list .swiper-slide{display:flex; flex-direction:column;  filter: drop-shadow(0px 6px 10px rgba(0,0,0,0.1) ); -webkit-filter: drop-shadow(0px 6px 10px rgba(0,0,0,0.1) );}
.book_list .swiper-slide .img{position:relative;}
.book_list .swiper-slide .img img {width:100%; }
.book_list .swiper-slide .img img.over{position:absolute; left:0; bottom:0; width:100%; opacity:0; transition: all 0.2s ease-out 0s;}
.book_list .swiper-slide:hover .img img.over{opacity:1;}
.book_list .swiper-slide .txt{flex:1; border:2px solid #fff; border-top:none; border-radius:0 0 0.5rem 0.5rem; background:#fff;}
.book_list .swiper-slide .txt > div{display:flex; flex-direction:column; height:100%; border:1px solid #0A0A0A; border-top:none; border-radius:0 0 0.5rem 0.5rem;}
.book_list .swiper-slide .txt .book-tit{height:4rem; display:flex; align-items:center; justify-content:center; gap:0.6rem; color:var(--gray-2); font-size:var(--font24); line-height:1.2; font-weight:700; border-bottom:1px solid #0A0A0A;}
.book_list .swiper-slide .txt .book-tit img{height:1.7rem;}
.book_list .swiper-slide .txt .book-tit .month{line-height:1.3rem; padding: 0 0.8rem; background: #241815; color:#fff; font-size:var(--font15); transition: background 0.1s ease-out 0s; }
.book_list .swiper-slide .txt .book-tit .month b{font-size:var(--font19); margin-right:0.15rem;}
.book_list .swiper-slide .txt .links{border:1px solid #fff; display:flex; background:#F3F7FD; border-radius:0 0 0.5rem 0.5rem; overflow:hidden;}
.book_list .swiper-slide .txt .links a{position:relative; flex:1; height:2.5rem; display:flex; align-items:center; justify-content:center; font-weight:500; color:var(--gray-2); text-align:center; line-height:1.2; transition: background 0.1s ease-out 0s;}
.book_list .swiper-slide .txt .links a:not(:first-child):before{content:""; position:absolute; left:0; top:0.4rem; width:1px; height:calc(100% - 0.8rem); background: #241815;}
.book_list .swiper-slide .txt .links .icon_book{display:inline-block; width:1rem; height:1rem; margin-left:0.2rem; background:url('/images/layout/icon_book.svg')no-repeat 50% 50%; background-size:100%;}
.book_list .swiper-slide .txt .links a:hover{background:#0054AA; color:#fff;}
.book_list .swiper-slide .txt .links a:hover:before,
.book_list .swiper-slide .txt .links a:hover + a:before{display:none;}
.book_list .swiper-slide .txt .links a:hover .icon_book{background-image:url('/images/layout/icon_book_ov.svg')}
.book_list .swiper-slide .txt:has(a:hover) .book-tit .month{background:#0054AA;}
.book_list .swiper-pagination{position:relative; bottom:auto; margin-top:0.5rem;}


@media (max-width:1440px) {
    .book_list .swiper-slide .txt{border-width:0.1rem;}
    .book_list .swiper-slide .txt > div{border-color:#686868;}
    .book_list .swiper-slide .txt .book-tit{text-align:center; font-size:var(--font22); padding:0 0.5rem; gap:0.4rem;}
}
@media (max-width:1024px) {
    .book_list .swiper-slide .txt{border-width:0.15rem;}
    .book_list .swiper-slide .txt > div{border-width:0.12rem;}
}
@media (max-width:768px) {
    .book_list .swiper-slide .txt{border-width:0.15rem;}
    .book_list .swiper-slide .txt > div{border-width:0.1rem;}
}

/********************************************************
■ 공지사항 알림판
********************************************************/
.notice_wrap{ padding:3rem 0 3.5rem;}
.notice_wrap .inner{display:flex; gap:2rem;}
.notice_wrap .notice{flex:1; display:flex; flex-direction:column; gap:1rem;}
.notice_wrap .notice .noti-tab{height:2.75rem; position:relative;}
.notice_wrap .notice .noti-tab ul li{display:inline-block; }
.notice_wrap .notice .noti-tab ul li h4{font-size:var(--font28); font-weight:700; line-height:2.75rem; opacity:0.4; color:var(--gray-1); cursor:pointer;}
.notice_wrap .notice .noti-tab ul li a{display:none; position:absolute; right:0; top:calc(50% - 1rem); width:2rem; height:2rem; border-radius:50%; background:var(--blue-3) url('/images/layout/icon_plus_w.svg')no-repeat 50% 50%; background-size:0.9rem auto; border:1px solid #cfcfcf; font-size:0; }
.notice_wrap .notice .noti-tab ul li.on h4{opacity:1;}
.notice_wrap .notice .noti-tab ul li.on a{display:block;}
.notice_wrap .notice .noti-tab ul li:not(:first-child){margin-left:1.7rem;}
.notice_wrap .notice .noti-cont{flex:1; border:1px solid #eee; border-radius:1rem; padding:0 0.75rem;}
.notice_wrap .notice .noti-cont ul{display:flex; flex-direction:column; height:100%;}
.notice_wrap .notice .noti-cont ul li{ min-height:25%; border-bottom:1px solid #e6e6e6;}
.notice_wrap .notice .noti-cont ul li:nth-child(4){border-bottom:none;} 
.notice_wrap .notice .noti-cont ul li:nth-child(n+5){display:none;}
.notice_wrap .notice .noti-cont ul li a{ display:flex; align-items:center; position:relative; height: 100%; padding:0.25rem;  padding-right:3.25rem; transition: all 0.2s ease-out 0s;}
.notice_wrap .notice .noti-cont ul li .table-date{width:6rem; text-align:center; font-size:0.7rem; color:#565656; }
.notice_wrap .notice .noti-cont ul li .table-date b{display:block; font-weight:600; font-size:1.25rem; line-height:1.2; }
.notice_wrap .notice .noti-cont ul li .table-tit{flex:1; margin-left:1rem; display:flex; align-items:center; gap:1rem;}
.notice_wrap .notice .noti-cont ul li .table-tit em{display:inline-block; line-height:1.4rem; padding:0 0.6rem; color:#fff; font-size:var(--font15);  background: linear-gradient(135deg, #64b5f6 0%, #0073d1 20%, #0053ab 100%);}
.notice_wrap .notice .noti-cont ul li .table-tit span{font-weight:500; color:var(--gray-1); font-size:var(--font17); overflow: hidden;text-overflow: ellipsis;display: -webkit-box;	-webkit-line-clamp: 1; -webkit-box-orient: vertical;word-wrap:break-word; line-height: 1.3em;height: 1.3em; }
.notice_wrap .notice .noti-cont ul li .arrow{position:absolute; right:1rem; top:calc(50% - 0.9rem); width:1.8rem; height:1.8rem; line-height:1.8rem; background:#fff; color:#565656; text-align:center; border-radius:50%; box-shadow:0 0.3rem 1rem 0.1rem rgba(0,0,0,0.06); }
.notice_wrap .notice .noti-cont ul li a:hover{background:#EFF8FE; box-shadow:0 0.3rem 1rem 0.1rem rgba(0,0,0,0.06);}
.notice_wrap .notice .noti-cont ul li a:hover .arrow{box-shadow:0 1px 2px rgba(0,0,0,1), 0 0.3rem 1rem 0.1rem rgba(0,0,0,0.06); }
.notice_wrap .notice .noti-cont ul li.no-post{height:100%; flex-direction:column; justify-content:center; align-items: center; border-bottom:none;}

.notiSlide{position:relative; width:26.5rem; padding:0.5rem; border-radius:1rem; background:#fff; box-shadow:0 0 1rem rgba(0,3,6,0.06);}
.noti-slide .control{position:absolute; right:0; bottom:0; z-index:1; background:#fff; height:2.5rem; border-radius:2rem 0 1rem 0; padding:0 1.5rem 0 2rem;}
.noti-slide .swiper-container{border-radius:0.5rem;}
.noti-slide img{width:100%}
.noti-slide:has(.swiper-button-lock) .control{display:none;}

@media (max-width:1440px) {
    .notice_wrap .inner{gap:1.5rem;}
}
@media (max-width:1023px) {
    .notice_wrap .inner{flex-direction: column;}
    .notiSlide{width:100%;}
}
@media (max-width:768px) {
    .notice_wrap .notice .noti-tab ul li:not(:first-child){margin-left:1rem;}
    .notice_wrap .notice .noti-cont ul li .table-date{ width: 4rem;}
    .notice_wrap .notice .noti-cont ul li .table-tit{margin-left:0.5rem; gap:0.5rem;}
}

/********************************************************
■ 날샘 배너
********************************************************/
.nsBanner{position:relative; margin:2rem auto 5rem; min-height:15rem; color:#fff; padding:3rem 0; padding-left:10.5rem; border-radius:1rem; background:url('/images/layout/banner_bg.jpg')no-repeat 50% 50%; background-size:cover;}
.nsBanner h4{font-size:var(--font24); font-weight:600; margin-bottom:0.5rem;}
.nsBanner p{opacity:0.8; margin-bottom:1.5rem;}
.nsBanner a{display:inline-flex; align-items:center; gap:1rem; padding:0.5rem  0.5rem 0.5rem 1.5rem; color:var(--gray-3); font-weight:600; background:#fff; border-radius: 2rem;  outline:1px solid rgba(255,255,255,0.5); box-shadow:0 0 1rem rgba(25,65,152,0.14); }
.nsBanner a i{display:block; width:1.8rem; text-align:center; line-height:1.8rem; border-radius:50%; color:#fff;  background: linear-gradient(135deg, #83ffdf 0%, #009a73 20%, #006a4f 100%); }
.nsBanner img{position:absolute; right:7.5rem; top:-2rem; width:26.6rem;}

@media (max-width:1440px) {
    .nsBanner{ padding-left: 5rem;}
    .nsBanner img{right:3.5rem;}
}
@media (max-width:1280px) {
    .nsBanner{ padding-left: 3rem;}
    .nsBanner img{right:1.5rem;}
}
@media (max-width:1024px) {
    .nsBanner{display:flex; align-items:flex-start; padding:3rem 2rem;}
    .nsBanner img{ position:relative; right:auto;  width:38vw; margin-top: -2rem;}
}
@media (max-width:768px) {
    .nsBanner{flex-direction: column-reverse; }
    .nsBanner img{width:100%;}
}