/* 공통 ================ */
:root { --container-pd-tb:var(--unit-3x)}
@media (min-width:768px)  { :root { --container-pd-tb:var(--unit-4x) } }
@media (min-width:1070px) { :root { --container-pd-tb:64px} }
@media (max-width:1069px) {footer{border-top:none}}
.global-container{position:relative}
.section-contents{padding-top:var(--container-pd-tb); padding-bottom:var(--container-pd-tb)}
section.visual{padding-top:0; padding-bottom:0; overflow:hidden}
@media (max-width:767px) { .section-contents.section-periodical{padding-top:var(--unit-5x)} }
@media (max-width:1069px){ section{display:flex; flex-direction:column; gap:var(--unit-2x); padding-top:var(--unit-5x)} }
@media (min-width:768px) { section.visual{padding-bottom:var(--unit-3x) } }
@media (min-width:1070px){
  section.visual{padding-top:var(--container-pd-tb); padding-bottom:var(--container-pd-tb)}
  section:last-of-type{padding-bottom:var(--unit-20x)}
}
.section-head{display:flex; flex-direction:column; gap:5px}
.section-head .title{font-size:var(--typo-display-5); font-weight:700}
.section-head .desc *{color:var(--color-text-gray); font-size:var(--typo-pragraph-2)}
.section-contents .row{row-gap:var(--unit-2x)}
@media (min-width:1070px) { .section-head{gap:var(--unit-2x)} }


/* 비주얼 ================ */
.visual{width:100%}
.visual .visual-counter{position:absolute; bottom:20px; left:50%; transform:translateX(-50%); display:flex; column-gap:4px; align-items:center; font-size:14px; font-weight:500}
.visual .visual-counter .counter-separator{display:inline-block; width:2px; height:2px; border-radius:99px; background-color:var(--color-overlay-medium)}
.visual .visual-counter .counter-total{color:var(--color-overlay-medium)}
.visual-carousel .photo::before{display:none}
.visual-carousel .photo figure{position:relative}
.visual-carousel .photo .visual-poster{position:relative; z-index:1; opacity:1}
.visual-carousel .item.is-video-ready .visual-video{opacity:1}
/* 트렌지션 설정 시간 */
.visual-carousel .photo .visual-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:2; opacity:0; transition:opacity 1s ease}
.visual-carousel .item.is-video-ended .visual-video{opacity:1; transition-duration:1s}

.visual .owl-carousel.overlay-element .item{width:100%; min-height:380px; height:380px; background-color:#eee}
.visual .owl-nav{display:none !important}
.visual .item-caption,
.visual .item-caption .heading,
.visual .item-caption .subtitle,
.visual .visual-counter,
.visual .visual-counter span,
.visual .owl-carousel.overlay-element .item-caption .btn{transition:color .2s cubic-bezier(0.75, 0.05, 0.57, 1), background-color .2s cubic-bezier(0.75, 0.05, 0.57, 1), border-color .2s cubic-bezier(0.75, 0.05, 0.57, 1), fill .2s cubic-bezier(0.75, 0.05, 0.57, 1)}
.visual .item-caption{display:flex; align-items:center; width:100%; padding:48px 24px!important}
.visual .subtitle{font-size:var(--typo-pragraph-1); font-weight:400}
.visual .heading{font-size:var(--typo-display-4); font-weight:700; letter-spacing:-.64px; margin-top:0; line-height:1.4}
.visual .owl-carousel.overlay-element .item-caption .btn{margin-top:var(--unit-1x); padding:var(--unit-1x) var(--unit-2x)}
.visual .text-wrap{max-width:380px; width:100%; display:flex; flex-direction:column; gap:var(--unit-1x)}
.visual .dark .visual-counter .counter-total{color:rgb(255 255 255 / 40%)}
.visual .dark .visual-counter .counter-separator{background-color:rgb(255 255 255 / 40%)}
@media (min-width:1070px) {
  .visual .owl-carousel.overlay-element .item{height:550px}
  .visual .item-caption{padding:var(--container-pd-tb) var(--unit-15x) !important}
  .visual .subtitle{font-size:var(--typo-pragraph-1)}
  .visual .heading{font-size:var(--typo-display-4)}
  .visual .owl-carousel.overlay-element .item-caption .btn{margin-top:var(--unit-2x) ; padding:14px var(--unit-3x)}
  .visual .text-wrap{max-width:460px; gap:var(--unit-2x)}
}
/* animation */
.list-item.book .list-link:hover .thum{box-shadow:0px 6px 12px 0px rgba(0, 0, 0, 0.1)}


/* 정기간행물 ================ */
.section-periodical .row{--periodical-spacing:32px; --bs-gutter-x:var(--periodical-spacing)}
.section-periodical .periodical-list .owl-stage-outer{padding-right:0}
.section-periodical .owl-carousel .owl-dots{display:none !important}
.section-head .desc{display:none}
@media (max-width:767px){
  .visible, .home .owl-carousel.visible .owl-stage-outer{overflow:visible}
}
@media (min-width:1070px){
  .section-periodical .owl-carousel{display:flex; gap:var(--unit-4x)}
  .section-head .desc{display:block}
}


/* 신간소개 ================ */
.section-new-books .lists .info > *:not(:first-child){margin-top:0 !important}
.section-new-books .info{display:flex; flex-direction:column; gap:var(--unit-1x)}
.section-new-books .post-title{font-size:var(--typo-display-6); font-weight:700}
.section-new-books .sub-title{display:none; font-weight:500; line-height:1.5}
.section-new-books .info .desc{ color:var(--color-text-gray); font-size:var(--typo-pragraph-3); font-weight:400; line-height:1.6; margin-top:var(--unit-1x) !important}
@media (min-width:768px){
  :root{
    --thum-img:240px;
    --new-books-pd:var(--unit-5x)
  }
  .section-new-books .thum{display:flex; align-items:center; justify-content:center}
  .section-new-books .thum .thum-img{min-width:var(--thum-img)}
  .section-new-books .info-wrap{flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; padding:var(--new-books-pd); padding-bottom:80px}
  .section-new-books .info{display:flex; flex-direction:column; gap:var(--unit-2x)}
  .section-new-books .sub-title{display:block; font-size:16px}
  .section-new-books .card-link{display:block; height:100%; color:inherit; text-decoration:none}
  .section-new-books .list-item.book .list-link{flex-direction:row; gap:0; background-color:#F8F7F5}  
  .section-new-books .info{ gap:var(--unit-2x)}
  .section-new-books .post-title{font-size:var(--typo-display-5)}
  .section-new-books .info .desc{font-size:var(--typo-pragraph-2)}
}
@media (min-width:1070px){
  :root{
    --thum-img:336px;
    --new-books-pd:var(--unit-7x)
  }
  .section-new-books .info-wrap{padding:var(--new-books-pd); margin-bottom:64px}
  .section-new-books .info{gap:var(--unit-2x)}
  .section-new-books .sub-title{font-size:var(--typo-pragraph-1)}
  .new-books-card-nav{top:24px; right:24px}
  .section-new-books .owl-theme .owl-nav{bottom:56px}
}


/* owl 관련  ================ */
.owl-nav{ display:flex !important; justify-content:flex-end; margin-top:var(--unit-2x) !important; gap:var(--unit-1x)}
.owl-nav > *{transition:.25s; background-image:url('../images/ui/ico_double_arrow.svg'); background-size:42px; background-position:-15px 13px; background-repeat:no-repeat} 
.owl-nav .owl-prev{transform:rotate(180deg)}
.owl-theme .owl-nav [class*='owl-']{position:initial; width:40px; height:40px; background-color:transparent; border:1px solid #333; border-radius:999px}
.owl-theme .owl-nav .owl-prev::before,
.owl-theme .owl-nav .owl-next::before{display:none}
@media (min-width:768px){  
  .owl-carousel{top:auto}
  .owl-nav{width:88px; left:calc(var(--thum-img) + var(--new-books-pd)); top:auto; bottom:32px; display:flex}
  .owl-carousel:not(.owl-loaded){display:flex; column-gap:16px; height:100%}
  .owl-carousel:not(.owl-loaded) .list-item{flex:1; min-width:0}
}

@media (min-width:1070px){  
/* animation */
.owl-nav > *:not(.disabled):hover{background-position:12px 13px}
}


/* layout-two-cols:배경화면 + 오늘, 한 문장 ================ */
.layout-two-cols{padding-top:0}
.layout-two-cols .section-head .desc{display:block}
.layout-two-cols .section-contents{display:flex; flex-direction:column; row-gap:var(--unit-2x)}
.layout-two-cols .section-contents:last-child{padding-bottom:0}
@media (min-width:1070px){
  .layout-two-cols{padding-top:var(--container-pd-tb)}
  .layout-two-cols .section-contents{padding-top:0; padding-bottom:0}
}


/* 배경화면 ================ */
.section-wallpaper .list-link{display:block; aspect-ratio:3 / 4; overflow:hidden}
.section-wallpaper .list-link:hover .thum-img{transform:scale(1.05)}
.section-wallpaper .thum-img{transition:.5s}
.section-wallpaper .info{position:absolute; bottom:0; padding:var(--unit-4x); flex-direction:row; justify-content:space-between; align-items:center; gap:var(--unit-4x)}
.section-wallpaper .info .subtitle{opacity:0.5; font-size:var(--typo-pragraph-4); font-weight:400; line-height:1.5; letter-spacing:.14px}
.section-wallpaper .info .title{font-size:var(--typo-display-6); font-weight:500}
.section-wallpaper .info-inner{width:100%; display:flex; flex-direction:column; gap:4px}
.section-wallpaper .thum::after{background-color:var(--color-overlay-light)}
.section-wallpaper .owl-theme .owl-nav{display:none !important}
.section-wallpaper .bg-elohist .thum-img{background-image:url('../images/img_bg_elohist.jpg')}
.section-wallpaper .bg-happyhome .thum-img{background-image:url('../images/img_bg_happyhome.jpg')}
.section-wallpaper .bg-soul .thum-img{background-image:url('../images/img_bg_soul.jpg')}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .section-wallpaper .bg-elohist .thum-img{background-image:url('../images/img_bg_elohist@2x.jpg')}
  .section-wallpaper .bg-happyhome .thum-img{background-image:url('../images/img_bg_happyhome@2x.jpg')}
  .section-wallpaper .bg-soul .thum-img{background-image:url('../images/img_bg_soul@2x.jpg')}
}
@media (min-width:768px){
  .section-wallpaper .info{padding:var(--unit-3x)}
  .section-wallpaper .info::after{width:32px; height:32px}
  .section-wallpaper .list-link{aspect-ratio:3 / 5}
}
@media (min-width:1070px){
  .section-wallpaper .list-link{aspect-ratio:auto}
  .layout-two-cols .section-contents{row-gap:var(--unit-4x)}
  .section-wallpaper{padding-left:var(--unit-4x)}
  .section-wallpaper .info{padding:var(--unit-5x)}
}


/* 오늘, 한 문장 ================ */
.section-sentence{flex-direction:column}
.section-sentence .list-item{text-align:center; position:relative; overflow:hidden}
.section-sentence .thum{position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%}
.section-sentence .thum-img{width:100%; height:100%; padding-bottom:inherit; background-size:cover;  background-position:center; background-repeat:no-repeat}
.section-sentence .sentence-thumb{background-image:var(--sentence-thumb-1x); background-size:cover; background-position:center}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min-resolution:1.5dppx), (-webkit-min-device-pixel-ratio:1.5), (min-resolution:144dpi){
  .section-sentence .sentence-thumb{background-image:var(--sentence-thumb-2x,var(--sentence-thumb-1x))}
}
.section-sentence .thum::after{content:''; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:var(--color-overlay-strong)}
.section-sentence .info{position:relative; z-index:1; padding:var(--unit-5x); padding-top:var(--unit-9x); height:100%; display:flex; align-items:center; flex-direction:column; justify-content:space-between; gap:var(--unit-7x)}
.section-sentence .calligraphy{width:190px; height:116px}
.section-sentence .info .desc{max-width:400px; font-size:var(--typo-pragraph-2); line-height:1.7}
.section-sentence .sentence-bottom{width:100%; opacity:0.7; display:flex; text-align:left; align-items:center; justify-content:space-between; margin-top:var(--unit-4x); gap:var(--unit-5x)}
.section-sentence .sentence-bottom > *{font-size:var(--typo-pragraph-5)}
.section-sentence .sentence-bottom .btn{padding:0; gap:4px; flex-shrink:0}
@media (max-width:767px){
  .section-sentence .list-item{margin-left:calc(-1 * var(--unit-5x)); margin-right:calc(-1 * var(--unit-5x))}
}
@media (min-width:768px){
  .section-sentence .info{padding:var(--unit-10x)}  
}
@media (min-width:1070px){
  /* .section-sentence .list-item{aspect-ratio:9 / 10} */
  .section-sentence .info{padding:var(--unit-6x); padding-top:var(--unit-8x); gap:var(--unit-5x)}
  .section-sentence .calligraphy{width:161px; height:99px; flex-shrink:0}
}
/* sentence sign stroke defaults */
#sentence-sign path{fill:none; stroke:currentColor; stroke-width:1; stroke-linecap:round; stroke-linejoin:round}


/*  공지 모달창 ================ */
.notice-overlay{top:var(--header-height);}
.notice-overlay .owl-carousel .owl-nav.disabled {display:none !important}
.notice-overlay .owl-carousel{display:block}
.notice-modal{position:relative; border-radius:0; display:flex; padding:var(--unit-4x); padding-bottom:40px; flex-direction:column; align-items:flex-start; gap:var(--unit-4x); background:rgba(241, 241, 241, 0.68); box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.07); backdrop-filter:blur(12px)}
.notice-modal .category{display:flex; align-items:center; gap:12px; font-size:var(--typo-pragraph-4); font-weight:500}
.notice-modal .category::before{content:''; display:inline-block; width:var(--unit-05x); height:var(--unit-2x); background:linear-gradient(to bottom, #FF5000 0%, #FF5000 50%, #313131 50%, #313131 100%)}
.notice-modal .title{font-size:var(--typo-display-5); font-weight:500}
.notice-modal .desc{color:var(--color-text-gray); font-size:var(--typo-pragraph-3); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; line-height:1.6}
.notice-modal .notice-link .post-date{color:var(--color-text-gray); font-size:var(--typo-pragraph-4)}
.notice-modal .notice-link{display:flex; flex-direction:column; gap:var(--unit-2x); width:100%}
.notice-modal .owl-dots{position:absolute; bottom:-112px; left:50%; transform:translateX(-50%)}
@media (max-width:767px){
  .notice-overlay {padding-left:16px; padding-right:16px}
  .notice-overlay .container-xxl{width:100%}
  }
@media (min-width:1070px){ 
  .notice-overlay {padding-left:0; padding-right:0}
}

/* btn */
.notice-modal .btns{display:flex; margin-top:0; width:100%; border-top:1px solid #333; border-bottom:1px solid #333; gap:0}
.notice-modal .btns .post-date{display:none; color:inherit; padding:var(--unit-2x)}
.notice-modal .btns > *{flex:1; font-size:13px; text-align:center; border-right:1px solid #333; flex-shrink:0; transition:background .25s}
.notice-modal .btns > *:last-child{border:none}
.notice-modal .btns > *:nth-child(2){border-right:1px solid #333}
.notice-modal .btns button{background-color:transparent; color:inherit; padding:12px var(--unit-05x); border-radius:0}
.notice-modal .btns button:hover{background-color:transparent; color:inherit}
.notice-modal .btn{border:none}
@media(min-width:1070px){
  .notice-modal{max-width:520px; padding:var(--unit-6x); gap:var(--unit-6x); padding-bottom:56px; margin-right:0}
  .notice-modal .notice-link{gap:24px}
  .notice-modal .notice-link .post-date{display:none}

  /* btn */
  .notice-modal .btns .post-date{display:flex; align-items:center; justify-content:center}
  .notice-modal .btns .post-date,
  .notice-modal .btns button{padding:14px 20px}
  .notice-modal .owl-dots{bottom:-136px}
}