@charset "utf-8";
/* @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); */

:root{
    /*세현폰트컬러*/
    --color-text-basic: #1E2124;
    --color-text-primary: #6E4BB0;
    --color-light-primary-5: #F7F5FC;
    --color-light-primary-20: #DBD0EF;
    --color-light-primary-50: #7D55C7;
    --color-light-primary-60: #6E4BB0;
    --color-light-secondary-40: #74D2C3;
    --color-light-secondary-50: #40C1AC;
    --color-light-secondary-60: #38AA98;
    --color-text-bolder-inverse: #FFF;
    --color-divider-gray-light: #CDD1D5;
    --color-text-bolder:#131416;
    --gray-gray-30: #D8D8D8;
    --gray-gray-70: #555;
    --color-gray-90: #1D1D1D;

    /*배경컬러*/
    --gray-gray-10: #F0F0F0;
    --gray-gray-90: #1D1D1D;
    --color-divider-gray-light: #CDD1D5;
    --color-button-primary-fill: #7D55C7;
    
    /*세현폰트사이즈*/
    --font-size-heading-xlarge: 40px;
    --font-size-heading-large: 32px;
    --font-size-heading-medium: 24px;
    --font-size-heading-small: 19px;
    --font-size-heading-xsmall: 17px;
    --font-size-heading-xxsmall: 15px;
    --font-size-body-large: 19px;
    --font-size-body-medium: 17px;
    --font-size-body-small: 15px;
    --font-size-body-xsmall: 13px;
    
    /*세현 letter-spacing*/
    --typo-letter-spacing-0: 0px;
    --typo-letter-spacing-1: 1px;

    /*세현height*/
    --size-height-9: 64px;
    --size-height-10: 72px;
    --size-height-11: 80px;
    --size-height-12: 88px;
    --size-height-13: 96px;
    --size-height-14: 104px;
    --size-height-15: 112px;
    --size-height-16: 120px;

    /*세현 padding */
    --padding-8: 24px;
    --padding-9: 28px;
    --padding-10: 32px;
    --padding-11: 36px;
    --padding-12: 40px;
    --padding-13: 44px;
    --padding-14: 48px;
    --padding-15: 52px;

    /*세현 gap */
    --gap-2: 4px;
    --gap-3: 8px;
    --gap-4: 12px;
    --gap-5: 16px;
    --gap-6: 20px;
    --gap-7: 24px;
    --gap-8: 28px;
    --gap-9: 32px;

    /*세현 radius */
    --radius-medium4: 8px;
    --radius-medium5: 10px;
    --radius-medium6: 12px;
    --radius-medium7: 14px;
    --radius-medium8: 16px;
    --radius-medium9: 18px;
    --radius-medium10: 20px;

    /*세현 버튼 보더 컬러 */
    --color-button-secondary-border: #7D55C7;

    /*세현 버튼 배경 컬러 */
    --color-button-secondary-fill: #F7F5FC;
}


@font-face {
    font-family: 'Pretendard';
    font-weight: 400; /* Regular */
    font-style: normal;
    src: url('../fonts/PretendardGOV-Regular.woff2') format('woff2'), /* 1순위: 최신 브라우저 */
         url('../fonts/PretendardGOV-Regular.woff') format('woff');  /* 2순위: 구형 브라우저 */
  }
  @font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/PretendardGOV-Medium.woff2') format('woff2'), /* 1순위: 최신 브라우저 */
         url('../fonts/PretendardGOV-Medium.woff') format('woff');  /* 2순위: 구형 브라우저 */
  }
  @font-face {
    font-family: 'Pretendard';
    font-weight: 600; 
    font-style: normal;
    src: url('../fonts/PretendardGOV-SemiBold.woff2') format('woff2'), /* 1순위: 최신 브라우저 */
         url('../fonts/PretendardGOV-SemiBold.woff') format('woff');  /* 2순위: 구형 브라우저 */
  }
  
  @font-face {
    font-family: 'Pretendard';
    font-weight: 700; /* Bold */
    font-style: normal;
    src: url('../fonts/PretendardGOV-Bold.woff2') format('woff2'),
         url('../fonts/PretendardGOV-Bold.woff') format('woff');
  }
  
  
  @font-face {
    font-family: 'paybooc';
    font-weight: 800; /* extraBold */
    font-style: normal;
    src: url('../fonts/paybooc ExtraBold.ttf') format('truetype');
  }
/* 애니메이션 */
.animated{-webkit-animation-duration:0.8s;animation-duration:0.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}

@keyframes fadeIn{
  from{opacity:0}
  100%{opacity:1}
}
@keyframes fadeInUp{
  from{opacity:0;-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}
  100%{opacity:1;-webkit-transform:none;transform:none}
}
@keyframes fadeInDown{
  from{opacity:0;transform:translate3d(0,-100px,0);-webkit-transform:translate3d(0,-100px,0);}
  100%{opacity:1;transform:none;-webkit-transform:none;}
}
@keyframes fadeInLeft{
  from{opacity:0;transform:translate3d(100px,0,0);-webkit-transform:translate3d(100px,0,0);}
  100%{opacity:1;transform:none;-webkit-transform:none;}
}
@keyframes fadeInRight{
  from{opacity:0;transform:translate3d(-100px,0,0);-webkit-transform:translate3d(-100px,0,0);}
  100%{opacity:1;transform:none;-webkit-transform:none;}
}

.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}
.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}
main.subContents .fadeIn{visibility: visible;}
main.subContents .fadeInUp{visibility: visible;}
main.subContents .fadeInDown{visibility: visible;}
main.subContents .fadeInLeft{visibility: visible;}
main.subContents .fadeInRight{visibility: visible;}


@media (max-width: 992px) {
    /* 애니메이션 관련 클래스들을 전부 선택 */
    .animated, 
    .fadeIn, .fadeInUp, .fadeInDown, .fadeInLeft, .fadeInRight {
        /* 1. 애니메이션 동작 강제 중지 */
        animation: none !important;
        -webkit-animation: none !important;
        
        /* 2. 투명도 0에서 시작하는 것을 1(보임)로 고정 */
        opacity: 1 !important;
        
        /* 3. 위치 이동(위/아래/좌/우에서 날아오는 것) 제거하고 정위치 고정 */
        transform: none !important;
        -webkit-transform: none !important;
        
        /* 4. 혹시 모를 숨김 처리 해제 */
        visibility: visible !important;
        
        /* 5. 부드러운 전환 효과(transition)도 제거하여 즉시 뜨게 함 */
        transition: none !important;
    }
}
.ani {
    visibility: hidden;
    animation-duration: 1s;
    animation-fill-mode: both;
    -webkit-animation-duration: 1s;
    -webkit-animation-fill-mode: both;
}

.ani.delay-1s {
    -webkit-animation-delay: .1s;
    animation-delay: .1s;
}

.ani.delay-2s {
    -webkit-animation-delay: .2s;
    animation-delay: .2s;
}

.ani.delay-3s {
    -webkit-animation-delay: .3s;
    animation-delay: .3s;
}

.ani.delay-4s {
    -webkit-animation-delay: .4s;
    animation-delay: .4s;
}

.ani.delay-5s {
    -webkit-animation-delay: .5s;
    animation-delay: .5s;
}

.ani.delay-6s {
    -webkit-animation-delay: .6s;
    animation-delay: .6s;
}

.ani.delay-7s {
    -webkit-animation-delay: .7s;
    animation-delay: .7s;
}

.ani.delay-8s {
    -webkit-animation-delay: .8s;
    animation-delay: .8s;
}

.ani.delay-10s {
    -webkit-animation-delay: .10s;
    animation-delay: .10s;
}

.ani.delay-12s {
    -webkit-animation-delay: .12s;
    animation-delay: .12s;
}

a {text-decoration: none;}
a:link {color:#000;}
a:visited {color:#000;}
a:hover {color:#000;}
a:active {color:#000;}


/* 여백 */
.h5 {height:5px; padding:0; margin:0; clear:both;}
.h10 {height:10px; padding:0; margin:0; clear:both;}
.h20 {height:20px; padding:0; margin:0; clear:both;}
.h30 {height:30px; padding:0; margin:0; clear:both;}
.h40 {height:40px; padding:0; margin:0; clear:both;}
.h50 {height:50px; padding:0; margin:0; clear:both;}
.h60 {height:60px; padding:0; margin:0; clear:both;}
.h70 {height:70px; padding:0; margin:0; clear:both;}
.h80 {height:80px; padding:0; margin:0; clear:both;}
.h90 {height:90px; padding:0; margin:0; clear:both;}
.h100 {height:100px; padding:0; margin:0; clear:both;}


html, body {
    width: 100vw;
    overflow-x: hidden;
}

* {
    font-family: "Pretendard", sans-serif;
}
body {
    font-weight: 400;
    /* font-size: 14px; */
    font-size: var(--font-size-body-medium);
    line-height: 1.5;
}

.sr-only, .sound-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
.ellipsis {white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.d-none {display: none;}

input, textarea, label, button, select {
    font-size: var(--font-size-body-medium);
}

#skip_navigation {position: absolute; top: 0; left: 0; z-index: 10001;}
#skip_navigation a {
    width: 1px;
    height: 1px;
    position: absolute;
    overflow: hidden;
    margin-bottom: -1px;
    text-indent: -10000px;
    transition: none;
}
#skip_navigation a:focus, #skip_navigation a:active {
    width: auto;
    height: auto;
    overflow: auto;
    margin: 0px 0px 0px 0px;
    position: absolute;
    top: 0;
    padding: 5px 10px;
    border: 2px solid #232323;
    background: #1287e0;
    color: #ffffff;
    font-weight: bold;
    text-indent: 0px;
    white-space: nowrap;
}

.popup-overlay, .popup-ani {background: #fff; padding: 10px;}
.popup-ani, .popup-ani-style {transform: scale(0.8);}
.popup_visible .popup-ani, .popup-ani-style {transform: scale(1);}

#post_layer {
    width:90%;
    max-width:800px;
    height:500px;
    height:444px;
    margin:auto;
    position:relative;
    /* display:none; */
    /* transform: scale(0.8); */
}
/* .popup_visible #post_layer {transform: scale(1);} */
#post_layer .btn-close-layer {
    cursor: pointer;
    position: absolute;
    right: 0px;
    top: -50px;
    z-index: 1;
    width: 50px;
    background: var(--red);
    border: 3px;
    padding: 5px;
}
#post_layer .btn-close-layer img {
    display: block;
    width: 100%;
}

.swiper-button-prev::after, .swiper-rtl .swiper-button-next::after,
.swiper-button-next::after, .swiper-rtl .swiper-button-prev::after {
    /* content: '' !important; */
    text-indent: -9999999em;
}

.tab-wrap.responsive table, .tab-wrap.responsive table,
.table-wrap.responsive table, .table-wrap.responsive table {
    min-width: 800px;
}
.tab-wrap.responsive .min-width-600, .tab-wrap.responsive .mw-600,
.table-wrap.responsive .min-width-600, .table-wrap.responsive .mw-600 {
    min-width: 600px !important;
}

.min-width-400, .mw-400 {
    min-width: 400px !important;
}

.inner {
    width: 100%;
    margin: 0 auto;
}

.mob-br {
    display: none;
}

.pl-1em {padding-left: 1em;}

.mt100 {margin-top: 100px}
.mt100-i {margin-top: 100px !important;}
.mb200 {
    margin-bottom: 200px !important;
}

.red {
    color: var(--red) !important;
}

.gray1 {
    
    color: var(--gray1) !important;
}

.green {
    color: #289F07 !important;
}

.yellow {
    color: #CFA600 !important;
}

.blue {
    color: #0052A4 !important;
}

.bold {
    font-weight: 600 !important;
}

.tab-wrap {
    max-width: 1240px;
    padding: 0 20px;
    width: 100%;
    margin: 40px auto 0;
    position: relative;
}

.page-tab {
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
}

.page-tab li{
    flex: 1 0 0;
}

.page-tab li:last-of-type a{
    border-right: 1px solid var(--lightGray1);
}

.page-tab li a {
    line-height: 1;
    display: block;
    padding: 21.5px 0;
    color: var(--darkGray2);
    font-weight: 600;
    border: 1px solid var(--lightGray1);
    border-right: none;
    font-size: var(--font-size-body-medium);
    transition: none;
}

.page-tab li.on a,
.page-tab li a:hover, 
.page-tab li a:focus, 
.page-tab li a:active {
    background-color: var(--darkGray3);
    color: white;
    border: 1px solid var(--darkGray3);
}

.section-title {
    font-size: var(--font-size-heading-medium);
    font-weight: 600;
}

.cont-title {
    font-size: var(--font-size-heading-medium);
    font-weight: 600;
}

.content-title {
    font-size: var(--font-size-heading-medium);
    font-weight: 600;
}

.small-title {
    font-size: var(--font-size-heading-medium);
    font-weight: 500;
}

.txt {
    font-size: var(--font-size-body-medium);
    word-break: keep-all;
}

.content-title + .txt{
    margin: 1.4em 0;
}

/* swiper */

.swiper-slide {
    width: 100%;
}

.swiper-horizontal>.swiper-scrollbar, 
.swiper-scrollbar.swiper-scrollbar-horizontal {
    position: static;
    display: block;
    width: calc(100% - 230px);
    height: 5px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.2);
}

.swiper-scrollbar-drag {
    background: var(--red);
}

.control {
    display: flex;
    gap: 15px;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    margin-top: 60px;
}

.control .swiper-button{
    display: flex;
    gap: 10px;
    z-index: 10;    
    margin-top: 0;
}

.control .paging{
    display: block;
    background: url(../img/ico-stop.svg) no-repeat center center;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    transition: none;
}

.control .paging.on{
    background-image: url(../img/ico-play.svg);
}

.control .swiper-button .swiper-button-next,
.control .swiper-button .swiper-button-prev {
    width: 32px;
    height: 32px;
    position: static;
    display: block;
    margin: 0;
}

.control .swiper-button .swiper-button-next::after,
.control .swiper-button .swiper-button-prev::after{
    display: none;
}

.control .swiper-button .swiper-button-prev {
    background: transparent url(../img/ico-left-arrow.svg) no-repeat center;
}

.control .swiper-button .swiper-button-next {
    background: transparent url(../img/ico-right-arrow.svg) no-repeat center;
}

.control .swiper-pagination {
    justify-content: end;
    right: 0;
}

.control .swiper-pagination-fraction {
    position: static;
    width: fit-content;
    color:var(--lightGray1);
    font-weight: 100;
    font-size: var(--font-size-body-medium);
    z-index: 1;
    display: flex;
    gap: 10px;
}

.control .swiper-pagination-current {
    opacity: 1;
    color: var(--darkGray3);
    font-weight: 600;
}

.control .swiper-pagination-total {
    color: var(--gray2);
    font-weight: 400;
}

.swiper-pagination-fraction .grey,
.swiper-pagination-total {
    color: var(--color-gray);
}

@media screen and (max-width:1140px) {

    .tablet-br {
        display: none;
    }
    
}


@media screen and (max-width:1024px) {
    .mob-image {
        position: relative;
        cursor: pointer;
        min-height: auto;
    }
    .mob-image::after {
        content: ''; background: url('../img/ico_mob_image.svg') no-repeat; background-size: contain;
        position: absolute; top: 1em; right: 1em;
        width: 60px; height: 60px;
        /* 30 x 37 */
    }
    /* .sub .slide-list .slide-cont .merch-list > li > a .img-sect.mob-image::after {
        display: none;
    } */

    .small-title {
        font-size: var(--font-size-heading-small);
    }

    .cont-title {
        font-size: var(--font-size-heading-small);
    }

    .content-title {
        font-size: var(--font-size-heading-small);
    }

    .tab-wrap {
        max-width: none;
        border-bottom: 1px solid #ddd;
        padding: 0 0 20px 0;
        overflow: hidden;
        overflow-x: auto;
        width: 100%;
    }

    .page-tab {
        gap: 40px;
        min-width: 100%;
        width: max-content;
        padding: 0 20px;
    }

    .page-tab li a {
        font-size: var(--font-size-body-small);
        color: var(--darkGray2);
        opacity: .4;
        border: none;
        /* padding: 25; */
    }

    .page-tab li:last-of-type a{
        border-right: none;
    }

    .page-tab li.on a, 
    .page-tab li a:hover, 
    .page-tab li a:focus, 
    .page-tab li a:active {
        color: var(--darkGray2);
        opacity: 1;
        position: relative;
        background-color: transparent;
        border: none;
    }

    .page-tab li.on a::after {
        width: 6px;
        height: 6px;
        border-radius: 100%;
        background-color: var(--red);
        position: absolute;
        bottom: 0px;
        left: 50%;
        transform: translateX(-50%);
        content: '';
    }

    /* .swiper-container {
        overflow-x: hidden;
    } */

    .control .swiper-pagination-fraction {
                font-size: var(--font-size-heading-small);
    }
}

@media screen and (max-width:991px){
    .mb200 {
        margin-bottom: 100px !important;
    }
}

@media screen and (max-width:768px){

    .cont-title {
        font-size: var(--font-size-body-medium);
    }
    
    .small-title {
        font-size: var(--font-size-body-xsmall);
    }
    
    .pc-br {
        display: none;
    }

    .mob-br {
        display: block;
    }

    .mb200{
        margin-bottom: 50px !important;
    }

    .page-tab li a {
        font-size: var(--font-size-body-xsmall);
    }

    .content-title {
        font-size: var(--font-size-heading-small);
    }

    .control {
        margin-top: 30px;
    }

    .control .swiper-pagination-fraction {
        font-size: var(--font-size-body-small);
    }
}