@charset "UTF-8";

.header {display: flex; min-width: 280px; align-items: center; justify-content: space-between; max-width: 768px; position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); width: 100%; height: 70px; background: #fff; padding: 0 20px; box-shadow: 0 5px 5px rgba(203,203,203,0.3);}
.header .label {font-size: 12px; color: #111; text-align: right; font-weight: 600;}
.header .label strong {font-weight: 900;}

.wrapper {height: 100%; min-width: 280px; overflow: hidden;}
.wrapper * {box-sizing: border-box;}
.contents-wrap {background: #fff; max-width: 768px; margin: 0 auto; width: 100%; min-height: 100vh; padding: 70px 0; text-align: center;}

.nav-wrap {max-width: 768px; position: fixed; z-index: 100; left: 50%; transform: translateX(-50%); bottom: 0; width: 100%; height: 70px; background: #fff; box-shadow: 0 -5px 5px rgba(203,203,203,0.3); font-size: 14px;}
.nav-wrap .nav {display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 5px;}
.control-wrap {display: flex; align-items: center;}
.control-wrap .back {display: none;}
.control-wrap .back.show {position: fixed; visibility: visible !important; left: 50%; transform: translateX(-50%); width: 105px; display: block; line-height: 35px; border-radius: 45px; color: #111; text-align: center; font-weight: 500; border: 1px solid #CFCFCF;}
.control-wrap.no-control {position: relative;}
.control-wrap.no-control:before {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 100; background: rgba(255,255,255,0.7);}
.nav .swiper-button-prev, .nav .swiper-button-next {margin: 0; position: static; width: 32px; height: 32px; border-radius: 50%; background: url('/_user/img/layout/ico-prev.png') 50% no-repeat;}
.nav .swiper-button-next {margin-left: 0; background-image: url('/_user/img/layout/ico-next.png');}
.nav .swiper-button-next.swiper-button-disabled, .nav .swiper-button-prev.swiper-button-disabled {opacity: 1;}
.btn-list, .btn-last, .btn-first {border-radius: 50%; text-indent: -9999px; min-width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;}
.btn-list span {width: 17px; height: 17px; display: block; background-color: #171616; color: transparent; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath id='ico-목차' d='M3938,1836v-7h7v7Zm-10,0v-7h7v7Zm10-10v-7h7v7Zm-10,0v-7h7v7Z' transform='translate(-3928 -1819)' fill='%23171616'/%3E%3C/svg%3E"); -webkit-mask: var(--svg); mask: var(--svg);}
.btn-first:before {content: ''; position: absolute; width: 15px; height: 19px; margin-bottom: 2px; display: block; background-color: #171616; color: transparent; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.631' height='18.955' viewBox='0 0 14.631 18.955'%3E%3Cpath id='ico-webzine' d='M3847,1837.954v-15.369l11.93-3.586v15.37l-6.939,2.086h8.14v-12H3859v-1.5h2.631v15H3847Zm1.5-14.253v12.236l8.93-2.684v-12.236Z' transform='translate(-3847 -1819)' fill='%23111'/%3E%3C/svg%3E"); -webkit-mask: var(--svg); mask: var(--svg);}
.btn-last span {width: 19px; height: 15px; display: block; background-color: #171616; color: transparent; --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='15' viewBox='0 0 19 15'%3E%3Cpath id='합치기_8' data-name='합치기 8' d='M3737,1832v-3h14v3Zm-5,0v-3h3v3Zm5-6v-3h14v3Zm-5,0v-3h3v3Zm5-6v-3h14v3Zm-5,0v-3h3v3Z' transform='translate(-3732 -1817)' fill='%23111'/%3E%3C/svg%3E"); -webkit-mask: var(--svg); mask: var(--svg);}
.pager .btn-first {position: absolute; left: 0; top: -2px; transform: translateX(0) !important; z-index: 1;}
.pager .btn-first:after {content: ''; position: absolute; left: -2px; bottom: -2px; width: 37px; height: 37px; background: #fff; z-index: -1;}
.pager .btn-first.swiper-pagination-bullet-active:after {display: none;}
.btn-list.on, .btn-last.on {background-color: #111;}
.btn-list.on span, .btn-last.on span {background-color: #fff;}
.btn-first.swiper-pagination-bullet-active {background-color: #111;}
.btn-first.swiper-pagination-bullet-active:before {background-color: #fff;}
.pager {display: flex; font-weight: 500; overflow: hidden; width: 140px; padding: 5px 0; height: 40px;}
.pager .swiper-pagination {padding-left: 35px; position: relative; display: flex; align-items: center; flex-shrink: 0;}
.pager .swiper-pagination .swiper-pagination-bullet {opacity: 1; display: flex; justify-content: center; align-items: center; background-color: #fff; margin-right: 3px; border-radius: 50%; color: var(--title-color); width: 32px; height: 32px; transition: transform 0.3s;}
.pager .swiper-pagination .swiper-pagination-bullet.hide {background-color: rgba(255,0,0,0.5); color: #fff; position: relative;}
.pager .swiper-pagination .swiper-pagination-bullet.hide:before {content: ''; position: absolute; left: 17px; top: 0; width: 1px; height: 35px; background-color: rgba(255,255,255,0.5); transform: rotate(45deg);}
.pager .swiper-pagination>span:last-child {margin-right: 3px;}
.pager .swiper-pagination .swiper-pagination-bullet-active {background-color: #111; color: #fff;}
.pager .swiper-pagination .swiper-pagination-bullet-active {background-color: #111; color: #fff;}
.pager .swiper-pagination .swiper-pagination-bullet-active.last {background-color: #00A6C8; color: #fff;}
.pager.off .swiper-pagination .swiper-pagination-bullet-active {background-color: #fff; color: #111;}
.pager.off .btn-first.swiper-pagination-bullet-active:before {background-color: #171616;}

.progress.swiper-pagination {width: 100%; height: 4px; top: -4px; left: 0; background: transparent;}
.progress.swiper-pagination .swiper-pagination-progressbar-fill {background: #00A6C8;}

@media screen and (min-width: 360px){
    .header {padding: 0 20px;}
    .nav-wrap .nav {padding: 0 10px;}
    .pager {width: 160px; margin-left: 3px;}
    .pager .swiper-pagination {padding-left: 40px;}
    .btn-list, .btn-last, .btn-first, .nav .swiper-button-prev, .nav .swiper-button-next {width: 35px; height: 35px;}
    .nav .swiper-button-prev, .nav .swiper-button-next {margin: 0 3px;}
    .pager .swiper-pagination .swiper-pagination-bullet {width: 35px; height: 35px; margin-right: 5px;}
}

/* dimm s */
.dimm {display: none;}
.dimm.on {display: block; position: fixed; z-index: 101; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0,0,0,0.7); max-width: 768px; margin: 0 auto;}
.dimm-inner {width: 100%; display: flex; flex-direction: column; height: 100%; justify-content: space-between;}
.dimm-top {min-height: 70px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px;}
.dimm-top .no-see {color: #fff; cursor: pointer; font-size: 16px; line-height: 2; letter-spacing: -0.8px; display: flex; align-items: center; margin-top: -15px;}
.dimm-top .no-see:before {content: ''; position: relative; margin-top: -3px; margin-right: 10px; display: inline-block; width: 25px; height: 25px; border-radius: 20px; background: #fff; border: 1px solid #CFCFCF; box-sizing: border-box;}
.dimm-top input:checked + .no-see:before {background: #fff url("/_user/img/layout/icon-check.svg") center no-repeat; background-size: 13px;}
.dimm-mid {display: grid; justify-content: center; align-items: center; align-content: center;}
.dimm-mid .arrow {width: 60px; height: 41px; background: url("/_user/img/layout/icon-arrow.png") 50% no-repeat; background-size: 100%;}
.dimm-mid .arrow.right {transform: rotate(180deg);}
.ani-con {max-width: 134px; margin: 0 auto;}
.dimm-btm {min-height: 70px; display: flex; align-items: center;}
.dimm-btm .nav-guide {max-width: 268px; display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0 auto;}
.dimm-btm .nav-guide .btn-list, .dimm-btm .nav-guide .btn-last {background: #fff;}
.dimm-btm .left {position: fixed; left: 0; bottom: 26px; width: 190px; height: 130px; background: url(/_user/img/layout/img-pre-webzine.svg) center no-repeat;}
.dimm-btm .right {position: fixed; right: 0; bottom: 30px; width: 200px; height: 200px; background: url(/_user/img/layout/img-webzine-list.svg) center no-repeat;}
.swipe-move {display: flex; justify-content: center; align-items: flex-start; margin-top: -40px;}
.popup-close {position: relative; width: 40px; height: 40px; text-indent: -9999px;}
.popup-close:before {position: absolute; content: ''; left: 20px; top: 4px; width: 2px; height: 35px; background: #fff; transform: rotate(-45deg);}
.popup-close:after {position: absolute; content: ''; left: 20px; top: 4px; width: 2px; height: 35px; background: #fff; transform: rotate(45deg);}
.swipe-text {margin-top: 16px;}
.top-btn {display: none;}
@media screen and (min-width: 360px){
    .dimm-btm .nav-guide {max-width: 315px;}
}
/* dimm e */

@media screen and (-webkit-min-device-pixel-ratio:0){
    /* 탑버튼 s */
    .top-btn {display: none; cursor: pointer;position: fixed;right: 20px;bottom: 95px;z-index: 15;width: 44px;height: 44px;}
    .top-btn > button {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%;height: 100%;background: #2FB5D5;border-radius: 50%; color: #fff;}
    .top-btn > button .arrow {width: 7px; height: 7px; position: relative; top: 2px; border-top: 1px solid #fff; border-left: 1px solid #fff; display: block; transform: rotate(45deg);}

    /* 탑버튼 e */
}