/* 공통 */
.scroll-wrap {
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}


.bold {
    font-weight: bold;
}


/* pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.pagination .page-btn {
    display: block;
    width: 40px;
    height: 40px;
    background: transparent;
    text-align: center;
    line-height: 40px;
}

.pagination .divi {
    width: 2px;
    height: 16px;
    opacity: 0.4;
    background-color: #fff;
    margin: 0 2%;
}


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

    .pagination {
        gap: 8px;
    }

    .pagination .page-btn {
        width: 32px;
        height: 32px;
        font-size: 11px;
        line-height: 32px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pagination .page-btn i {
        font-size: 11px;
    }
}


.fluid-img-wrap {
    position: relative;
}

.fluid-img-wrap::before {
    width: 100%;
    display: block;
    content: "";
    padding-top: 100%;
}

.fluid-img-wrap img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.cookie-banner {
    position: fixed;
    bottom: 0;
    width: 100%;
    background-color: #000;
    padding: 30px 2%;
    z-index: 9999;
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 2%;
}

.cookie-banner p {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.8px;
    color: #fff;

}

.cookie-banner .btn-wrap {
  display: flex;
  justify-content: center;
  gap: 18px;
}

.cookie-banner .btn-wrap button {
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    min-width: 169px;
    height: 41px;
    font-weight: bold;
    cursor: pointer;
    font-size: 23px;
    letter-spacing: -0.92px;
    font-weight: bold;
    opacity: 0.5;
    transition: 0.3s all;
}

.cookie-banner .btn-wrap button:hover {
  opacity: unset;
}




@media screen and (max-width: 1440px) {
    .cookie-banner {
        flex-direction: column;
        gap: 12px;
        padding: 30px 15%;
    }

}


@media screen and (max-width: 1080px) {
    .cookie-banner {
        padding: 15px 2%;
    }

    .cookie-banner .btn-wrap {
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    .cookie-banner p {
        font-size: 12px;
        line-height: 1.67;
        letter-spacing: -0.48px;
    }
    .cookie-banner .btn-wrap button {
        font-size: 15px;
        height: 30px;
        min-width: 159px;
    }
}

@media screen and (max-width: 573px) {
    .cookie-banner {
        gap: 11px;
    }

    .cookie-banner .btn-wrap {
        gap: 1%;
    }

    .cookie-banner .btn-wrap button {
       min-width: unset;
       width: 100%;
    }
}



/* 메인페이지 - 풀페이지 */

.bg-section {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}














/* 팝업 */

.popup-bg {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.popup-bg.open {
    display: flex;
}

.loginPopup-bg.open {
    display: flex;
}

.pop-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    width: 100vw;
    max-width: 960px;
    background-color: #f4f5f8;
}




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

    .popup-bg{
        padding: 40px 24px;
    }

    .popup-bg .popUp_btn_wrap * {
        width: 140px;
        height: 48px;
    }

    .popup-bg .popUp-sub {
        margin-bottom: 40px;
    }

    .popup-bg .popUp_title {
        margin-bottom: 8px;
    }
}

/* // */









.wrap_fluid {
    position: relative;
}

.wrap_fluid::before {
    width: 100%;
    display: block;
    content: "";
    padding-top: 100%;
}

.wrap_fluid img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}









/* 메인 섹션0*/
.section0 {
    position: relative;
}

.section0 .content-wrap {
    width: 100%;
    padding: 0 12px;
    position: absolute;
    bottom: 72px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.section0 .section_container {
    height: 100vh;
}

 .main-img-wrap {
    height: 100%;
    position: relative;
 }

 /* 하얀색 그라디언트 */
.main-img-wrap::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    background-image: url('../images/gradient_01.png');
    background-size: cover;
    width: 100%;
    height: 100%;
}

.main-img-wrap img {
   object-fit: cover;
   height: 100%;
}

.section0 .logo-img {

    max-width: 380px;
}

.section0 .store-btn-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 12px;
    margin-bottom: 25px;
}

.section0 .store-btn-item {
    width: 100%;
    max-width: 230px;
    min-width: 230px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* 
.section0 .store-btn-wrap img {
    max-width: 240px;
    min-width: 103px;
} */

.section0 .scroll-down-btn {
    max-width: 42px;
}

 .scroll-down-btn {
     display: inline-block;
     animation: arrowDropMove2 1.3s ease-in-out infinite;
 }

 .scroll-down-btn img {
     display: block;
     opacity: 0;
     animation: arrowDropOpacity 1.2s ease-in-out infinite;
 }

 .animate-item.main-up {
     opacity: 1 !important;
 }

 /* 위치 애니메이션 (계속 반복) */
 @keyframes arrowDropMove {
     0% {
         transform: translateY(0px);
     }

     30% {
         transform: translateY(0px);
     }

     60% {
         transform: translateY(20px);
     }

     100% {
         transform: translateY(0px);
     }

     /* 다시 제자리 */
 }

 /* ✅ 내려갈 때만 보이게, 올라갈 땐 안 보이게 */
 @keyframes arrowDropOpacity {
     0% {
         opacity: 0;
     }

     30% {
         opacity: 0.5;
     }

     60% {
         opacity: 0.8;
     }

     61% {
         opacity: 0;
     }

     100% {
         opacity: 0;
     }

 }


/* 세계관 section1 */
.section1 {
    /* background: url('./images/bg_section.png') no-repeat center center;
    background-size: cover; */
}

.cont_container {
    position: relative;
    width: 100%;
    max-width: 1523px;
    padding: 0 12px;
    /* max-width: 1499px; */
    height: 100vh;
    padding-top: 90px;
    margin: 0 auto;
    /* margin-left: 12px; */
}

.numbering-wrap {
    position: relative;
    z-index: 4;
}



.storySlideWrap {
    position: absolute;
    width: 84%;
    /* max-width: 1231px; */
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    padding: 4%;
}

.world-img-wrap {
    position: relative;
    padding-top: 78.16%;
    overflow: hidden;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
        max-width: 1231px;
            /* 기준 너비 */
    aspect-ratio: 1231 / 962;
        /* ✅ 비율 유지 */
}

/* .world-img-wrap img {
    max-width: 90%;
    max-height: 90%;
    height: auto;
    width: auto;
    object-fit: contain;
} */


/* 전체 이미지에 공통 스타일 */
.world-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 78.16%;
    overflow: hidden;
}

.world-img-wrap img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* .storySwiper .swiper-slide {
    transition: opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.storySwiper .swiper-slide.swiper-slide-active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
} */


.section1 .slide-item {
    display: flex;
    justify-content: center;
}


/* 캐릭터 소개 section1 */
.section2 {
    position: relative;
    background: url('../images/bg_section.png') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}


.section1 {
    position: relative;
}

.section1 .flybg {
    position: absolute;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 3;
    height: 100vh;
    object-fit: cover;
}

.storySlideWrap .stroyPagination {
    top: unset !important;
    /* bottom: -48px !important; */
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.storySlideWrap .swiper-pagination-bullet {
    width: 21px;
    height: 21px;
    background: url('../images/story-pagination-off.png') no-repeat center/contain;
    opacity: 0.5 !important;
    /* 기본 투명도 제거 */
    margin: 0 4px;
    transition: transform 0.3s;
}

.storySlideWrap .swiper-pagination-bullet-active {
    opacity: 0.5 !important;
    background-image: url('../images/story-pagination-on.png');
}


/* 게임소개 */
.section3 {
    position: relative;
}

.absolCont {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.side-eff {
    position: absolute;
    z-index: 2;
}

.side-left {
    width: 100%;
    max-width: 209px;
    top: 0;
    left: 0;
}

.side-right {
    width: 100%;
    max-width: 205px;
    bottom: 0;
    right: 0;
}

.gradi-black {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.introdSlideWrap {
    height: 100%;
}


.introdSwiper {
    height: 100% !important;
}

.introdSwiper .slide-wrap {
    height: 100%;
}

.introdSlideWrap .introdPagination {
    top: unset !important;
    bottom: 78px !important;
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2;
}

.introdSlideWrap .swiper-pagination-bullet {
    width: 21px;
    height: 21px;
    background: url('../images/introd-pagination-off.png') no-repeat center/contain;
    opacity: 1;
    /* 기본 투명도 제거 */
    margin: 0 4px;
    transition: transform 0.3s;
}

.introdSlideWrap .swiper-pagination-bullet-active {
    background-image: url('../images/introd-pagination-on.png');
}


/* 검정색 그라디언트 */
.introdSlideWrap .slide-wrap::after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    background-image: url('../images/gradi-black.png');
    background-size: cover;
    width: 100%;
    height: 100%;
}

.introdSlideWrap .slide-wrap img {
    object-fit: cover;
    height: 100%;
}

.introdSlideWrap .intro-cont-wrap {
    position: absolute;
    bottom: 7%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: fit-content;
    z-index: 4;
    width: 80%;
    padding: 0 2%;

}


.introdSwiper .intro-title {
    font-size: 40px;
    font-weight: bold;
    letter-spacing: -1.6px;
    color: #fff;
    text-align: center;
}

.introdSwiper .intro-sub {
    font-size: 20px;
    letter-spacing: -0.8px;
    color: #737373;
    text-align: center;
    margin-top: 20px;
}



.section4,
.section5 {
    background: url('../images/bg_section.png') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

@media screen and (max-width: 1080px) {
    .section4,
    .section5 {
        background: url(../images/bg_section_m.png) no-repeat center center;
    }
}
.centerCont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width:100%;
}


.tab-wrap {
    position: relative;
}



.tab-menu li {
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    letter-spacing: -0.8px;

    /* width: 118px; */
        /* 세 개 합쳐서 배경 꼭지 너비에 맞게 */
        height: 40px;
        /* 배경색 느낌용 */
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
}



.tab-menu {
    width: 18vw;
    max-width: 354px;
    position: absolute;
    left: 0;
    display: flex;
    z-index: 2;
    height: 7.5vh;
    display: flex;
    align-items: end;
}
    

.tab-wrap li {
    position: absolute;
        top: 8%;
        /* flex: 1; */
        height: 28px;
        font-size: 20px;
        font-weight: bold;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 118px;
    
}

.tab-menu li:last-child {
    border-right: none;
}


.tab-btn-wrap {
    top: 8%;
    position: absolute;
    width: 100%;
    left: 0;
    max-width: 354px;
    z-index: 22;
    /* dd */
    /* top: 8%;
    position: absolute;
    width: 100%;
    left: -12px;
    max-width: calc(100% - 76%);
    max-width: 354px;
    z-index: 2; */

}

.tab-wrap li.active {
    color: #fff;
    font-size: 25px;
    font-weight: bold;
}

.tab-wrap  li.latest {
    left: 3.7%;
}

.tab-wrap  li.notice {
    left: 38%;
}

.tab-wrap li.active.notice {
    left: 35%;
}

.tab-wrap  li.event {
    right: 0;
}

.tab-wrap li.active.event {
    right: 2%;
}

/* latest가 acive일 때 다른 버튼 */
.tab-btn-wrap li.notice.latest-active {
    left: 38%;
}

.tab-btn-wrap li.event.latest-active {
    right: 0;
}

/* notice가 acive일 때 다른 버튼 */
.tab-btn-wrap li.event.notice-active {
    right: -2%;
}

.tab-btn-wrap li.latest.notice-active {
    left: 0%;
}

/* event가 acive일 때 다른 버튼 */
.tab-btn-wrap li.latest.event-active {
    left: 0%;
}

.tab-btn-wrap li.notice.event-active {
    left: 31%;
}

.tab-wrap li.wallpaper {
    left: 3.7%;
}

.tab-wrap li.video {
    left: 32%;
}

/* video가 acive일 때 다른 버튼 */
.tab-btn-wrap li.wallpaper.video-active {
    left: -1%;
}

/* wallpaper가 acive일 때 다른 버튼 */
.tab-btn-wrap li.video.wallpaper-active {
    left: 36%;
}








.tab-content {
   display: none;
    /* padding: 40px; */
    background-size: cover;
    background-repeat: no-repeat;
    /* padding-top: 690px; */
    /* padding-top: 46%;
    min-height: 690px; */
    padding: clamp(690px, 64vh, 692px) 0 12px;


    /* --- */
    /* position: relative;
    width: 100%;
    padding-top: 46.25%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; */
    /* --- */


/* 
        display: none;
            background-size: cover;
            background-repeat: no-repeat;
            padding-top: 46%;
            min-height: 690px;*/
} 

/* .bg-ratio-box {
    position: relative;
    width: 100%;
    padding-top: 46.25%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
} */




.tab-content.active {
    display: block;
}

.section4 .latest {
    background-image: url('../images/info-frame-new@2x.png');
}

.section4 .notice {
    background-image: url('../images/info-frame-notice@2x.png');
}

.section4 .event {
    background-image: url('../images/info-frame-event@2x.png');
}


.section5 .wallpaper {
    background-image: url('../images/frame_wallpaper.png');
}

.section5 .video {
    background-image: url('../images/frame_video.png');
}

.section4 .cont-wrap,
.section5 .cont-wrap {
    top: 60%;
}




.newsSlideWrap {
    position: absolute;
    position: absolute;
    width: calc(100% - 56px);
    max-width: 1475px;
    left: 49.5%;
    top: 53%;
    transform: translate(-50%, -50%);
}

.newsSlideWrap .slide-wrap {
    display: block;
    background-color: #000;
}

.tab-content.video .mideaSlideWrap .slide-wrap {
    cursor: pointer;
}

.newsSlideWrap .item-cont-wrap {
    padding: 20px 12px;
}

.newsSlideWrap .item-img-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    /* 16:9 비율 (9/16=0.5625) */
    overflow: hidden;
}

.newsSlideWrap .item-img-wrap img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* cover: 채우고 잘릴 수 있음 / contain: 잘리지 않고 전체 보이게 */
}

.newsSlideWrap .item-img-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit:contain;
    /* cover: 채우고 잘릴 수 있음 / contain: 잘리지 않고 전체 보이게 */
}

.newsSlideWrap .item-type-mark {
    border: 1px solid #fff;
    font-size: 17.5px;
    letter-spacing: -0.7px;
    color: #fff;
    width: 75px;
    padding: 4px 0;
    text-align: center;
    background-color: #000;
}

.newsSlideWrap .item-title {
    margin-top: 14px;
    font-size: 30px;
    font-weight: 500;
    letter-spacing: -1.2px;
    color: #fff;
    White-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 68%;
    line-height: 1.33;
    word-break: keep-all;
    font-size: clamp(21.5px, 1.6vw, 30px);
}

.newsSlideWrap .item-btm-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.newsSlideWrap .view-btn i {
    font-size: 19px;
    color: #fff;
}

.newsSlideWrap .item-date {
    font-size: 14px;
    color: #b0afaf;
}

.newsSwiper {
    padding-bottom: 24px !important;
}



.newsSlideWrap .swiper-scrollbar {
    background: linear-gradient(to right, #636363 0%, rgba(99, 99, 99, 0) 100%);
    height: 5px;
    margin-top: 20px;
    overflow: hidden;
    left: 0 !important;
}

.newsSlideWrap .swiper-scrollbar-drag {
    background: #ffffff;
}

.newsSlideWrap .swiper-button-next,
.newsSlideWrap .swiper-button-prev {
    color: #fff !important;
    z-index: 98 !important;
}

.newsSlideWrap .swiper-pagination-bullet {
  background-color: #fff !important;
}

.mideaSlideWrap .dwn-btn {
    position: absolute;
    bottom: 13.4px;
    right: 13.4px;
    max-width: 31px;
    cursor: pointer;
    z-index: 5 !important;
}

.mideaSlideWrap.item-img-wrap {
    padding-top: 57.25%;
}

.mideaSwiper {
    padding-bottom: 24px !important;
    max-height: 483px;
}

/* 
.mideaSwiper::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    background-image: url('../images/gradi-slide.png');
    background-size: cover;
    height: 100%;
    width: 100%;
     max-width: calc(100% / 3.5);
    z-index: 2;
} */

.mideaSwiper::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    background: linear-gradient(to left, rgb(0 0 0 / 73%), rgba(0, 0, 0, 0));
    height: 100%;
    width: 100%;
    max-width: calc(100% / 3.5);
    z-index: 1;
    pointer-events: none;
}


.mideaSlideWrap .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    max-width: 80px;
}

.mideaSlideWrap .play-arrow {
    max-width: 28px;
    position: absolute;
    top: 48%;
    left: 56%;
    transform: translate(-50%, -50%);
}

iframe {
    pointer-events: none;
}



.section4 .cont_container,
.section5 .cont_container {
    flex-direction: column;
    display: flex;
    position: relative;
    padding-top: unset;
    justify-content: center;
    gap: 3%;
    padding: 10% 12px 5%;
}

/* 
.section4 .centerCont,
.section5 .centerCont {
    position: unset;
    transform: unset;
} */


.section4 .numbering-wrap,
.section5 .numbering-wrap {
    margin-top: unset;
    position: absolute;
    top:12%;
    transform: translateY(-40%);
}



/* 캐릭터 */

.char-container {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.char-container .char-loca-wrap {
    width: 100%;
    height: 100%;
}

.char-container .cont_container {

    border-color: blue;
}

/* -----캐릭터 뒤 검은 배경 */
.char-bg {
    position: absolute;
    /* right: -10%; */
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    max-width: 1228px;
    height: 100vh;
    width: 65%;
    /* max-width: calc(100vw - 20%); */
}

.char-bg img {
    height: 100%;
    object-fit: fill;
}



/* ----- 캐릭터 */
/* .character {
    position: absolute;
    right: -24%;
    top: 124%;
    transform: translateY(-50%);
    max-width: 1109px;
    z-index: 2;
    width:55%;
} */

/* .character {
    position: absolute;
    bottom: -50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
} */

.character {
    max-width: 1280px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-50%);
    z-index: 2;
}

.char-cont-wrap {
    position: relative;
    top: 7%;
    transform: translateY(-50%);
    z-index: 2;
    /* margin-top: 7%; */
    /* padding: 7% 0; */
    /* width: 40%; */
    max-width: 596px;
    width: calc(100% /2);
    width: 38%;
    
}

.char-name-wrap {
    width: 100%;
    /* max-width: 193px */
}          

.char-info-wrap {
    max-width: 596px;
    margin-top: 4%
}

.char-story-wrap {
    max-width: 578px;
    margin-top: 52px;
}

.charSwiper {
    width: 100%;
    margin: 0 auto;
    overflow: visible;
}


.charSlideWrap {
    /* margin-top: 52px; */
    padding-top: 9.2%;
}

.charSlideWrap .swiper-slide {
    width: 300px;
    transition: filter 0.4s ease;
    /* clip-path: polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%); */
    overflow: hidden;
}

.charSlideWrap .swiper-slide img {
    width: 100%;
    display: block;
    object-fit: cover;
    height: 100%;
}


.charSlideWrap .slide-item-wrap {
    display: block;
}


.charSlideWrap .slide-item-wrap.on {
    display: none;
}

.charSlideWrap .swiper-slide-active .slide-item-wrap.on {
    display: block;
}

.charSlideWrap .swiper-slide-active .slide-item-wrap:not(.on) {
    display: none;
}

.charSlideWrap .swiper-btn-wrap {
    position: relative;
    width: 100%;
    max-width: 92px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 40px;
}

.charSlideWrap .swiper-button-prev,
.charSlideWrap .swiper-button-next {
    width: 40px;
    height: 40px;
    background: url('../images/arrow-left.png') no-repeat center / contain;
    position: relative;
    left: unset !important;
    right: unset !important;
}

.charSlideWrap .swiper-button-prev::after,
.charSlideWrap .swiper-button-next::after {
    display: none;
    /* 기본 Swiper 화살표는 숨긴다 */
}

/* 왼쪽(Prev) 버튼 화살표 회전 */
.charSlideWrap .swiper-button-next {
    transform: rotate(180deg);
}


/* hover 또는 active 시 이미지 변경 */
.charSlideWrap .swiper-button-prev:hover,
.charSlideWrap .swiper-button-prev:active,
.charSlideWrap .swiper-button-next:hover,
.charSlideWrap .swiper-button-next:active {
    background: url('../images/arrow-active.png') no-repeat center / contain;
        transform: rotate(180deg);
    /* 바뀔 이미지 */
}

.charSlideWrap .swiper-button-next:hover,
.charSlideWrap .swiper-button-next:active {
        transform: rotate(360deg);
}

.swiper-outer-mask {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    overflow: hidden;
    /* 스와이퍼 대각선 자르기 */
    position: relative;
    clip-path: polygon(9% 0%, 100% 0%, 91% 100%, 0% 100%);
    /* // */
}


.slide-item-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #313131;
    opacity: 0.6;
    z-index: 1;
    pointer-events: none;
    clip-path: polygon(23% 0%, 100% 0%, 76% 100%, 0% 100%);
}

.swiper-slide-active .slide-item-wrap::after {
    position: unset;
    background: unset;
}

/* swiper 자체는 평범하게 */
.charSwiper {
    overflow: visible;
}


/* 
 캐릭터소개 - 애니메이션 동작
*/

/* 공통: 처음엔 투명하고 이동됨 */
/* 기본: 안 보이는 상태 + 방향 지정 */
.animate-item {
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* 등장 트리거: 위치 복귀 + 투명도 1 */
.animate-item.animate-in {
    opacity: 1;
    transform: translate(0, 0);
}

/* 🔁 방향별 초기 위치 🔃 */

/* 1️⃣ 대각선 왼아래 출발 */
.animate-item.diagonal-up {
    opacity: 0;
    transform: translate(60px, 60px);
    transition: transform 0.7s ease-in-out, opacity 0.7s ease-in-out;
}

/* 등장할 때: 원래 위치로 */
.animate-item.animate-in.diagonal-up {
    opacity: 1;
    transform: translate(0, 0);
}
/* 초기 상태 (숨김 + 시작 위치) */
.animate-item.diagonal-left-up {
    opacity: 0;
    transform: translate(-80px, 80px) scale(0.9);
}

/* 실행 트리거 */
.animate-item.animate-in.diagonal-left-up {
    animation: popInDiagonal 0.7s cubic-bezier(0.22, 1.2, 0.3, 1) forwards;
}

/* 탁! 붙는 느낌의 keyframes */
@keyframes popInDiagonal {
    0% {
        opacity: 0;
        transform: translate(-80px, 80px);
    }

    60% {
        transform: translate(0px, 0px) ;
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}


/* 2️⃣ 대각선 오아래 출발 */



/* 3️⃣ 왼쪽에서 오른쪽 */
.animate-item.left {
    transform: translateX(-80px);
}

/* 4️⃣ 오른쪽에서 왼쪽 */
.char-image {
    opacity: 0;
    /* width: 80%;
    max-width: 1576px;
    top: 50%; */
    transform: translate(0%, -50%);
    filter: blur(10px);
    transition: none;
    will-change: transform, filter, opacity;
}

.animate-item.right {
    opacity: 0;
    transform: translate(0, -50%);
    /* 살짝 더 멀리서 시작하면 날아오는 느낌 더 강해짐 */
    filter: blur(5px);
}

/* 등장 트리거 */
.animate-in.right {
    animation: characterSlideIn 0.4s cubic-bezier(0, 0, 0.2, 1) forwards;
}

/* 캐릭터 살짝 늦게 등장 */
.character.animate-in.right {
    animation: characterSlideIn2 0.4s cubic-bezier(0, 0, 0.2, 1) forwards;
    animation-delay: 0.15s;
}

@keyframes characterSlideIn {
    0% {
        opacity: 0.2;
        transform: translate(120%, -50%);
        filter: blur(10px);
    }

    40% {
        opacity: 0.9;
        transform: translate(80%, -50%);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translate(0%,-50%);
        filter: blur(0);
    }
}


@keyframes characterSlideIn2 {
    0% {
        opacity: 0.2;
        transform: translate(100%, 0%);
        filter: blur(10px);
    }

    40% {
        opacity: 0.9;
        transform: translate(80%, 0%);
        filter: blur(3px);
    }

    100% {
        opacity: 1;
        transform: translate(10%, 5%);
        filter: blur(0);
    }
}



/* 5️⃣ 아래에서 위로 */
/* 기본 상태: 훨씬 아래 + 작게 */
.animate-item.up {
    opacity: 0;
    transform: translateY(120px);
}

/* 등장 애니메이션 */
.animate-item.animate-in.up {
    opacity: 1;
    animation: popUpVisible 0.8s cubic-bezier(0.22, 1.2, 0.3, 1) forwards;
}

/* 아래 → 위 이동이 눈에 보이게 만드는 keyframes */
@keyframes popUpVisible {
    0% {
        opacity: 0;
        transform: translateY(120px);
        /* 훨씬 아래에서 시작 */
    }

    40% {
        opacity: 1;
        /* 올라오면서 살짝 커짐 */
    }

    100% {
        transform: translateY(0px);
    }
}

/* 6️⃣ 위에서 아래로 */
.animate-item.down {
    transform: translateY(-80px);
}



.image-audio-wrap {
    position: relative;
    display: inline-block;
    position: absolute;
    left: 0%;
    z-index: 5;
    top: 41%;
    width: 50%;
    transform: translateY(-50%);
}

.char-intro-wrap {
    position: relative;
}

.char-hotspot {
   
    width: 100%;
    height: 33px;
    cursor: pointer;
    /* background-color: rgba(255, 0, 0, 0.2); */
   
}





.newsDetail {
    background-image: url('../images/bg_section.png');
    background-size: cover;
}

.sectionDetail {
    height: 100%;
    padding-top: 85px;
}

.sectionDetail .section-container {
    max-width: 1523px;
    padding: 0 12px;
    margin: 0 auto 32px;

}

.sectionDetail .wrap_detail {
    position: relative;
    height: 100%;
    margin-top: 50px;
    margin-bottom: 40px;
}

.decoBar {
    max-width: 90%;
    margin: 0 auto;
}

.sectionDetail .wrap_heade {
    display: flex;
    align-items: center;
}
.sectionDetail .btn-back {
    top: 0;
    left: 0;
    position: absolute;
    display: flex;
    align-items: center;
    gap: 23px;
}
.sectionDetail .btn-back .btn-title {
    font-size: 25px;
    letter-spacing: -1px;
    color: #000;
}
.sectionDetail .btn-back img {
    max-width: 11px;
}

.sectionDetail .wrap_cont {
    max-height: calc(100vh - 85px - 94px - 50px);
    overflow-y: scroll;
}

.sectionDetail .cont-title {
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    max-width: 55%;
    margin: 0 auto;
}

.sectionDetail .cont-info-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    margin-top: 30px;
}

.sectionDetail .type-mark {
    border: solid 1px #868686;
    background-color: #fff;
    height: 24px;
    line-height: 1.3;
    width: fit-content;
    padding: 0 23px;
    font-size: 17.5px;
    color: #868686;
    letter-spacing: -0.7px;
}

.sectionDetail .cont-date {
    font-size: 17.5px;
    letter-spacing: -0.7px;
    color: #858585;
}

.sectionDetail .wrap_cont img {
    display: flex;
}

.sectionDetail .cont-detail-wrap {
    max-width: 862px;
    margin: 30px auto 0;
    padding-bottom: 30px;
}

.sectionDetail .wrap_cont::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

/* 트랙 */
.sectionDetail .wrap_cont::-webkit-scrollbar-track {
    background-color: transparent;
}

/* 손잡이 */
.sectionDetail .wrap_cont::-webkit-scrollbar-thumb {
    background-color: #c4c4c4;
}

.sectionDetail .wrap_cont::-webkit-scrollbar-corner {
    background: transparent;
}


@media screen and (max-width: 1080px) {
    .sectionDetail {
        height: 100%;
        padding-top: unset;
    }

    .sectionDetail .wrap_cont {
        max-height: unset;
        overflow: unset;
    }

    .sectionDetail .decoBar {
        display: none;
    }

    .sectionDetail .wrap_detail {
        margin-top: unset;
        padding-top: 56px;
    }
}


@media screen and (max-width: 768px) {
    .sectionDetail .wrap_cont {
        margin-top: 10px;
    }

    .sectionDetail .cont-title {
        max-width: calc(100% - 40px);
        font-size: 25px;
        line-height: 1.4;
        letter-spacing: -1px;
    }

    .sectionDetail .btn-back {
        position: unset;
        gap: 16px;
    }

    .sectionDetail .btn-back img {
        max-width: 7px;
    }

    .sectionDetail .btn-back .btn-title {
        font-size: 17.5px;
        letter-spacing: -0.7px;
    }

    .sectionDetail .cont-info-wrap {
        margin-top: 38px;
    }

    .sectionDetail .cont-detail-wrap {
        margin-top: 38px;
        padding-bottom: unset;
    }
}


.section {
    position: relative;
}

.section .decoBar {
   position: absolute;
   z-index: 4;
   margin: 0 auto;
   width: 100%;
   max-width: 1500px;
   padding: 0 12px;
   left: 50%;
   transform: translateX(-50%);
   opacity: 0.3;
}

.section .decoBar.top {
    top: 85px;
}

.section .decoBar.btm {
    bottom: 32px;
}





/* 

  반응형

*/

.mb-768 {
    display: none;
}

@media screen and (max-width: 768px) {
    .mb-768 {
        display: flex;
    }
    .pc-768 {
        display: none;
    }
}

@media all and (max-width:1080px) {
    /* (공통)page */
    .fp-section,
    .fp-tableCell {
        height: auto !important;
    }

    .section .decoBar {
        display: none;
    }
}


.mb-1024 {
    display: none;
}
@media all and (max-width:1024px) {
    .mb-1024 {
            display: flex;
        }

    .pc-1024 {
        display: none;
    }
}



@media screen and (min-width: 2560px) {
    .storySlideWrap {
        top: 45%;
        width: 100%;
    }
}

/* 섹션0 */
@media screen and (max-width: 1080px) {

}

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

    .section0 .section_container {
        height: unset;
    }

    .section0 .main-img-wrap {
            height: unset;
        }
    
        .section0 .content-wrap {
            width: 100%;
            max-width: calc(100% - 40px);
            margin: 0 auto;
        }
    
        .section0 .logo-img {
            max-width: 78%;
        }
    
        .section0 .store-btn-wrap {
            flex-wrap: wrap;
            gap: 10px 9px;
            justify-content: center;
            margin-bottom: 34px;
        }
    
        .section0 .store-btn-item {
            width: calc((100% - (9px * 2)) / 3);
            min-width: unset;
        }
    
        .section0 .store-btn-wrap img {
            max-width: unset;
        }
    
        .section0 .scroll-down-btn {
            max-width: 38px;
            margin-top: 10px;
        }


    .section0 .main-img-wrap::after {
        background-image: url('../images/gradient_01_m.png');
        height: 70%;
    }


 /* 위치 애니메이션 (계속 반복) */
 @keyframes arrowDropMove {
     0% {
         transform: translateY(30px);
     }

     30% {
         transform: translateY(24px);
     }

     60% {
         transform: translateY(0px);
     }

     100% {
         transform: translateY(30px);
     }

     /* 다시 제자리 */
 }
}


/* 섹션1 */

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


 .cont_container {
    padding-top: 9%;
    overflow: hidden;
}

.storySlideWrap {
    width: 100%;
    top: 50%;
    /* top: 0;
    transform: translateX(-50%); */

}
.world-img-wrap {
    /* height: 100vh; */
}

.world-img-wrap img {
    width: 100%;
    max-height: unset;
    max-width: unset;
    /* scale: 1.9; */
}

.storySlideWrap .swiper-pagination-bullet {
    width: 14px;
    height: 14px;
}




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

    .introdSlideWrap .intro-cont-img {
        min-width: 573px;
    }


}

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

    .introdSlideWrap .intro-cont-img {
        bottom: 0%;
        min-width: 372px;
        padding: 0 20%;
     }

    .storySlideWrap {
        padding: unset;
        padding-bottom: 8%;
    }

    .storySlideWrap .stroyPagination {
        bottom: 0% !important;
    }

    .storySlideWrap  .slide-item {
        display: flex;
        justify-content: center;
    }

    .world-img-wrap {
        padding-top: 100%;
        min-width: 768px;
    }
}




/* 섹션2 */
@media screen and (max-width: 1080px) {
    .side-eff {
        display: none;
    }

    .introdSwiper .slide-wrap {
        height: 100vh;
    }

    .introdSlideWrap .introdPagination {
        bottom: 27px !important;
    }

    .introdSwiper .intro-title {
        font-size: 35px;
        line-height: 1.43;
    }

    .introdSwiper .intro-sub {
        font-size: 15px;
        line-height: 1.67;
        letter-spacing: -0.6px;
        min-height: 74px;
    }

    .introdSlideWrap .intro-cont-wrap { 
        bottom: -4%;
        width: 90%;
    }

}

@media screen and (max-width: 768px) {
    .introdSlideWrap .slide-wrap::after {
        height: 90%;
        background-image: url('../images/gradi-black_m.png');
    }
}






/* 섹션4-5 */
@media screen and (max-width: 1080px) {
.section4 .cont_container,
.section5 .cont_container {
    padding: 3% 12px;
    gap: 3%;
    justify-content: space-evenly;
}

.mideaSwiper {
    max-height: unset;
}



}


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

    .section5 .cont_container {
        padding-bottom: 96px;
    }
    
    .section4 .tab-content {
        padding-top: 640px;
        min-height: unset;
    }

    .section5 .tab-content {
        padding-top: 500px;
        min-height: unset;
    }

    .newsSlideWrap .item-title {
        font-size: 24px;
        max-width: 100%;
    }

    .tab-wrap li.latest {
        left: 1.7%;
    }

    .tab-btn-wrap li.notice.latest-active {
        left: 33%;
    }

    .tab-btn-wrap li.event.latest-active {
        right: 4%;
    }

    .tab-btn-wrap li.latest.notice-active {
        left: -2%;
    }

    .tab-wrap li.active.notice {
        left: 31%;
    }

    .tab-btn-wrap li.event.notice-active {
        right: 3%;
    }

    .tab-btn-wrap li.latest.event-active {
        left: -3%;
    }

    .tab-btn-wrap li.notice.event-active {
        left: 27%;
    }

    .tab-wrap li.active.event {
        right: 8%;
    }

    .section5  .tab-btn-wrap {
        top: 7.3%;
    }

    .tab-wrap li.wallpaper {
        left: -2.3%;
    }

    .tab-btn-wrap li.video.wallpaper-active {
        left: 22%;
    }

    .tab-btn-wrap li.wallpaper.video-active {
        left: -8%;
    }

    .tab-wrap li.video {
        left: 20%;
    }

    .section4 .cont_container,
    .section5 .cont_container {
        padding: 3% 0;
    }

    .newsSlideWrap {
        max-width: calc(100% - 44px);
        left: 50.5%;
        /* top: 60%; */
    }


    .section5 .tab-content {
        
    }

}

@media screen and (max-width: 573px) {
    .section5 .tab-content {
        padding-top: 620px;
    }

}

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

    .newsSlideWrap .slide-wrap {
        height: 100%;
    }

 .newsSlideWrap .item-img-wrap {
     padding-top: 57.25%;
     height: 100%;
 }

 .section5 .tab-wrap li {
    min-width: 153px;
 }

.tab-btn-wrap li.video.wallpaper-active {
    left: 27%;
}

.tab-wrap li.video.active {
    left: 35%;
}

.newsSlideWrap .swiper-button-prev,
.newsSlideWrap .swiper-button-next {
    display: none !important;
}

}

@media screen and (max-width: 414px) {
    .section4 .tab-content {
        /* padding-top: 734px; */
        padding-top: 543px;
    }


    .section5 .tab-content {
        padding-top: 934px;
    }


    .mideaSwiper::after {
        display: none;
    }

    .mideaSlideWrap .play-btn {
        max-width: 58px;
    }

    .mideaSlideWrap .play-arrow {
        max-width: 16px;
    }

    .mideaSlideWrap .dwn-btn {
        max-width: 19px;
        bottom: 14px;
        right: 14px;
    }

    .section5 .tab-btn-wrap {
        top: 11%;
    }

    .tab-wrap li.wallpaper {
        left: 1.7%;
    }

    .tab-btn-wrap li.wallpaper.video-active {
        left: -3%;
    }

    .tab-wrap li.video {
        left: 40%;
    }

    .newsSwiper {
        /* max-width: calc(100% - 36px);
        padding-bottom: 18px !important; */
    }

    .mideaSlideWrap {
        max-width: 90%;
    }


    .newsSlideWrap .swiper-scrollbar {
        background: #636363;
        border-radius: unset !important;
    }

    .tab-btn-wrap li.video.wallpaper-active {
        left: 40%;
    }


    .tab-wrap li.latest {
        left: 4.7%;
    }

    .tab-btn-wrap li.notice {
        left: 53%;
    }

    .tab-btn-wrap li.notice.latest-active {
        left: 40%;
    }

    .tab-btn-wrap li.event.latest-active {
        right: -7%;
    }

    .tab-btn-wrap li.latest.notice-active {
        left: 0%;
    }

    .tab-wrap li.active.notice {
        left: 42%;
    }

    .tab-btn-wrap li.event.notice-active {
        right: -8%;
    }

    .tab-btn-wrap li.notice.event-active {
        left: 33%;
    }

    .tab-wrap li.active.event {
        right: -3%;
    }

    .newsSlideWrap {
        top: 60%;
    }
}

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

    .section4,
    .section5 {
        background: url('../images/bg_section_m.png') no-repeat center center;
        background-size: cover;
    }

    .section4 .cont-wrap,
    .section5 .cont-wrap {
        top: 53%;
    }

    .tab-content {
        padding-top: 545px;
    }

    .section4 .latest {
        background-image: url('../images/info-frame-new_m.png');
    }

    .section4 .notice {
        background-image: url('../images/info-frame-notice_m.png');
    }

    .section4 .event {
        background-image: url('../images/info-frame-event_m.png');
    }

    .newsSlideWrap {
        /* top: 60%;
        left: 0%; */
    }


    .newsSlideWrap .slide-wrap {
        /* max-width: calc(100% - 36px);
        margin: 0 auto; */
    }

    .newsSlideWrap .item-cont-wrap {
        padding: 15px 8px;
    }

    .newsSlideWrap .item-type-mark {
        font-size: 12.5px;
        letter-spacing: -0.5px;
    }
    
    .newsSlideWrap .item-title {
        font-size: 21.5px;
        letter-spacing: -0.86px;
        line-height: 1.33;
        margin-bottom: 34px;
    }

    .newsSlideWrap .item-date {
        font-size: 10px;
    }

    .newsSlideWrap .view-btn i {
        font-size: 14px; 
    }

    .section4 .tab-btn-wrap {
        top: 11%;
    }

    .tab-btn-wrap li.notice.latest-active {
        left: 43%;
    }

    .tab-btn-wrap li.event.latest-active {
        right: -13%;
    }

    .tab-btn-wrap li.latest.notice-active {
        left: 2%;
    }

    .tab-wrap li.active.notice {
         left: 42%;
    }

    .tab-btn-wrap li.event.notice-active {
        right: -15%;
    }

    .tab-wrap li.active.event {
     right: -12%;
    }

    .tab-btn-wrap li.notice.event-active {
       left: 36%;
    }

    .tab-btn-wrap li.latest.event-active {
        left: 0%;
    }

    .section5 .wallpaper {
        background-image: url('../images/frame_wallpaper_m.png');
    }

    .section5  .video {
        background-image: url('../images/frame_video_m.png');
    }

    /* .mideaSwiper {
        max-width: calc(100% - 36px);
    } */

    .section5 .tab-content {
        padding-top: 543px;
    }
}

@media screen and (max-width: 390px) {
    .tab-btn-wrap li.video.wallpaper-active {
        left: 41%;
    }

    .tab-wrap li.video.active {
        left: 37%;
    }

    .section5 .tab-wrap li {
        min-width: 126px;
    }
}


@media screen and (max-width: 375px) {
    .section4 .tab-content {
         padding-top: 498px;
    }

    .tab-wrap li.latest {
        left: 2.7%;
    }

    .tab-btn-wrap li.notice.latest-active {
        left: 39%;
    }

    .tab-btn-wrap li.event.latest-active {
        right: -6%;
    }

    .tab-btn-wrap li.latest.notice-active {
        left: 0%;
    }

    .tab-wrap li.active.notice {
        left: 38%;
    }

    .tab-btn-wrap li.event.notice-active {
        right: -6%;
    }

    .tab-btn-wrap li.notice.event-active {
        left: 34%;
    }

    .tab-wrap li.active.event {
        right: -4%;
    }


    .section5 .tab-btn-wrap {
        top: 10%;
    }

    .tab-wrap li.wallpaper {
        left: 2.7%;
    }

    .tab-btn-wrap li.video.wallpaper-active {
        left: 37%;
    }

    .tab-btn-wrap li.wallpaper.video-active {
        left: 0%;
    }

    .tab-wrap li.video.active {
        left: 34%;
    }
    
}





/* 섹션2 캐릭터 소개 반응형 */

@media screen and (max-width: 1540px) {
.character {
    /* right: -10%;
    top: 60%; */
}


}


/* .pc-1280 {
    display: flex;
}

.mb-1280 {
    display: none;
} */
@media screen and (max-width: 1280px){
    .pc-1280 {
        display: none;
    }
    .mb-1280 {
        display: flex;
    }

    
}

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

    .character {
        width: 90%;
    }

    .char-cont-wrap {
        width: 38%
    }

}

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

 .char-cont-wrap {
     max-width: unset;
     width: 100%;
     margin-top: unset;
     justify-content: center;
     flex-direction: column;
     opacity: 1 !important;
     max-width: 423px;
     transform: unset !important;
     top: unset;
 }

  .char-container .char-loca-wrap {
      height: unset;
  }

  .char-container .cont_container {
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 3;
      padding-bottom: 5%;
  }


  .character {
    width: 100%;
    max-width: unset;
    top: 100%;
    right: -20%;
  }
}

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

    .numbering-wrap {
        opacity: 1 !important;
        left: 10px;
        transform: unset !important;
    }

    .character {
        /* right: -43%;
        top: 115%; */
            top: 80%;
                right: -20%;
    }

    .char-cont-wrap {
        max-width: unset;
        width: 100%;
        margin-top: unset;
        justify-content: center;
        flex-direction: column;
        opacity: 1 !important;
        max-width: 423px;
        transform: unset !important;
    }

    .char-container {
        height: 100vh;
        position: relative;
    }

   

    .char-info-wrap {
        max-width: 573px;
        margin-top: unset;
    }

    .char-image {
        opacity: 1 !important;
        filter: unset !important;
        transform: unset !important;
    }

    .char-bg img {
        object-fit: cover;
    }

    .char-bg {
        top: unset;
        width: unset;
    }

    .char-container::after {
        position: absolute;
        left: 0;
        bottom: 0;
        content: "";
        background-image: url('../images/char-mb-gradi.png');
        background-size: cover;
        width: 100%;
        height: 70%;
        z-index: 2;
    }

    .character {
        width: 100%;
        top: unset;
        right: unset;
        left: 55%;
        transform: translateX(-50%) !important;
        /* width: 200%; */
        margin: 0 auto;
        bottom: 0;
        max-width: unset;
        top: 5%;
            right: unset;
            min-width: 1080px;
    }

    .charSlideWrap {
        max-width: 768px;
        margin-top: unset;
        padding-top: 2.2%;
    }

    .charSlideWrap .swiper-btn-wrap {
        display: none;
    }


    .slide-item-wrap::after {
        clip-path: polygon(9% 0%, 100% 0%, 91% 100%, 0% 100%);
    }




}

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

    .character {
        min-width: unset;
        left: 50%;
        top: 0%;
    }

}


.popup-wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: none;
    z-index: 999;
}

.popup {
    background-color: #000;
    position:relative;
    text-align: center;
    overflow-y: scroll;
    scrollbar-width: none;
    max-height: unset;
    transform: unset;
    margin: 3% auto;
    height: unset;
    padding: 24px 8px 24px;
    max-width: 1320px;
    width: calc(100% - 40px);
}

.mideaPopup {
    padding: unset;
    width: calc(100% - 130px);
}


.popup-image,
.popup-video {
    max-width: 100%;
    height: auto;
}

 .popup-image-box {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    overflow: hidden;
}

.popup-image-box img,
.popup-image-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events:visible;
}

.btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    max-width: 50px;
    max-height: 50px;
}

.popup .dwn-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 48px;
    width: 100%;
    max-width: 320px;
    height: 58px;
    margin: 24px auto 0;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url('../images/popup-dwn-btn.png');
    font-size: 24px;
    color: #fff;
}



@media screen and (max-width: 768px) {
.popup {
    padding: 60px 20px 60px;
}

.mideaPopup {
    width: 90%;
    padding: 24px 0;
    background-color: unset;
}

.popup .dwn-btn {
    max-width:  80%;
    min-width: fit-content;
    height: 32px;
    margin-top: 24px;
    font-size: 14px;
}

.btn-close {
    max-width: 24px;
    max-height: 24px;
}


}



/* 초기 상태 */
.animate-item.main-up {
    opacity: 0;
    transform: translate(0%,40px);
}

/* 등장 애니메이션 */
.animate-item.animate-in.main-up {
    animation: riseFadeIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes riseFadeIn {
    0% {
        opacity: 0;
        transform: translate(0,40px);
    }

    50% {
        opacity: 0.9;
    }

    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

.scroll-down-btn.animate-in.main-up {
    animation: arrowDropMove 1.2s ease-in-out infinite;
}




/* 섹션 넘버링 */

.numbering-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
    /* margin-top: 38px; */
    margin-top: 100px;
}

.num-box {
    position: relative;
    background-image: url('../images/num-box.png');
    background-size: cover;
    background-repeat: no-repeat;
    width: 73px;
    height: 73px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 55px;
    font-weight: bold;
    letter-spacing: -2.2px;
    color: #fff;
}

.num-box .crack_btm {
    position: absolute;
    max-width: fit-content;
}

.num-box .crack_btm {
    bottom: -11px;
    right: -3px;
}

.num-title {
    font-size: 44px;
    font-weight: bold;
    letter-spacing: -1.76px;
    color: #000;
}


.crack-wrap.top-left {
    position: absolute;
    top: 0px;
    left: -20px;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 5;
}

.crack-wrap {
    opacity: 1;
    transform: scale(0) translate(0, 0);
    transition: transform 0.6s ease-out, opacity 0.6s;
}

.crack-wrap .crack {
    min-width: fit-content;
}

.crack-wrap.top-left {
    width: fit-content;
    min-width: fit-content;
}

.crack-wrap.active {
    opacity: 1;
    transform: scale(1) translate(0, 0);
}

.crack-wrap.active .crack {
    opacity: 1;
}

.crack-1.active {
    max-width: 9px;
    transform: translate(23px, -38px) scale(1);
}

.crack-2.active {
    max-width: 6px;
    transform: translate(2px, -52px) scale(1);
}

.crack-3.active {
    max-width: 4px;
    transform: translate(-5px, -52px) scale(1);
}

.crack-4.active {
    max-width: 3px;
    transform: translate(-14px, -59px) scale(1);
}

.crack-5.active {
    max-width: 9px;
    transform: translate(-31px, -65px) scale(1);
}

.white .num-box {
    color: #000;
        background-image: url('../images/num-box_w.png');
}

.white .num-title {
    color: #fff;
}

.white img {
    filter: brightness(0) invert(1);
}

 .mb-1080 {
     display: none;
 }
@media screen and (max-width: 1080px) {

    .pc-1080 {
        display: none;
    }

    .mb-1080 {
        display: block;
    }

    .num-box .crack_top {
        position: absolute;
        top: -13px;
        left: 2px;
        max-width: 12px;
    }

    .image-audio-wrap {
        top: 42%;
        width: 50%;
    }

    .char-hotspot {
        width: 100%;
        height: 25px;
    }



.section0 .content-wrap {
    bottom: 10%;
}

.numbering-wrap {
    gap: 6px;
    margin-top: unset;
}

.num-box {
    width: 35px;
    height: 35px;
    /* height: unset; */
    font-size: 26px;
    /* background-image: url('./images/num-box_m.png'); */
}


.num-title {
    font-size: 21.5px;
}


.num-box .crack_btm {
    bottom: -7px;
    right: -1px;
    max-width: 10px;
}
}

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

   /* 있던곳 */


    .animate-in.right {
        animation: fadeInOnly 0.5s ease-out forwards;
    }

    .character.animate-in.right {
        animation: fadeInOnly 1s ease-in;
    }

    .char-bg.animate-in.right {
        animation: unset;
    }

    /* .character.animate-in.right {
        animation-delay: 0.1s;
    } */

    @keyframes fadeInOnly {
        0% {
            opacity: 0;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            opacity: 1;
        }
    }


.charSlideWrap {
    opacity: 0;
    transition: opacity 0.6s ease, transform 0.6s ease;
    transform: translateY(40px);
}

.charSlideWrap.active-up {
    opacity: 1;
    transform: translateY(0);
}
}





/* 정책 */
.dark {
    background-color: #202020;
}

.policy  * {
    color: #fff;
}

:root {
    --mainColor: #C4C4C4;
    /* 사이트 메인색상 */
    --linkColor: #2680eb;
    /* 링크텍스트 색상 */
    --poRed: red;
}

/* // 포인트 칼라 */
.policy .red-txt {
    color: var(--poRed);
}

/* // 포인트 굵기 */
.policy .bold-txt {
    font-weight: bold;
}

.policy .policy-top {
    margin: 3% 0;
    border-top: 2px solid #fff;
    border-bottom: 1px solid #e4e4e4;
}

.policy .policy-top h2 {
    font-weight: 500;
    line-height: 1.2;
    font-size: 32px;
    text-align: center;
    padding: 5% 0;
}

.policy .policy-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 15px;
    margin-bottom: 52px;
    word-break: keep-all;
}

.policy .policy-list .scroll-wrap {
    width: 100%;
    overflow: scroll;
}

/* .policy .policy-list h3 { position: relative; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #303030; text-decoration: underline; text-underline-position : under;  text-decoration-thickness: 1.5px; text-decoration-color: #ffc800; word-break: keep-all; } */
.policy .policy-list h3 {
    position: relative;
    margin-bottom: 8px;
    font-size: 20px;
    font-weight: 500;
    color: #fff;
    word-break: keep-all;
    margin-left: 10px;
}

.policy .policy-list h3::after {
    position: absolute;
    content: "";
    display: block;
    width: 3px;
    height: 100%;
    background-color: var(--mainColor);
    left: -10px;
    top: 0;
}

.policy .policy-list p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: #fff;
    word-break: keep-all;
}

.policy .policy-list table {
    width: 100%;
    font-size: 15px;
    margin-top: 20px;
    border: 1px solid #202020;
    background-color: #fff;
    color: #202020;
}

.policy .policy-list thead {
    text-align: center;
    background-color: #dadada;
    color: #202020;
}

.policy .policy-list tbody {
    text-align: center;
}

.policy .policy-list th {
    padding: 8px;
    border: 1px solid #202020;
    color: #202020;
}

.policy .policy-list td {
    padding: 8px;
    border: 1px solid #202020;
    line-height: 1.5;
    color: #202020;
}

.policy .policy-num-wrap {
    display: flex;
    gap: 5px;
}

.policy a {
    color: var(--linkColor);
}

.policy .circle-num {
        min-width: fit-content;
}

.policy .bold {
    font-weight: bold;
}

.policy .line:first-child {
    border-top: 1px solid #858585;
    padding: 3% 0;
}

.policy .line {
    border-bottom: 1px solid #858585;
    padding-bottom: 3%;
}

.policy .t-center {
    text-align: center;
}

.policy h4 {
    font-size: 18px;
    font-weight: bold;
}


.policy .bt {
    border-top: 1px solid #C4C4C4;
    padding-top: 3%;
}



  ol {
    list-style: decimal !important;
    list-style-position: inside;
    margin-bottom: 12px;
    margin-top: 24px;
  }

   ol li {
    list-style:decimal;
    list-style-position: inside;
    padding-bottom: 8px;
    font-size: 15px;
    line-height: 1.3;
    padding-left: 1.6em;
    text-indent: -1.6em;
   }


  .circled-list {
      list-style: none !important;
      counter-reset: my-counter;
      padding-left: 0.8em;
  }

  .circled-list li {
      list-style: none;
      counter-increment: my-counter;
      position: relative;
      text-indent: unset;
      padding-left: 0.3em;
  }

  .circled-list li::before {
      content: counter(my-counter, decimal);
      font-size: 16px;
      position: absolute;
      left: -1em;
      width: 1em;
      display: inline-block;
      text-align: center;
  }

  .circled-list li:nth-child(1)::before {
      content: '①';
  }

  .circled-list li:nth-child(2)::before {
      content: '②';
  }

  .circled-list li:nth-child(3)::before {
      content: '③';
  }

  .circled-list li:nth-child(4)::before {
      content: '④';
  }

  .circled-list li:nth-child(5)::before {
      content: '⑤';
  }

  .circled-list li:nth-child(6)::before {
      content: '⑥';
  }


  .circled-list  ol {
      list-style:decimal !important;
  }

.circled-list  ol  li{
    list-style: decimal !important;
}

.circled-list ol li::before {
    content:unset;
    position: unset;
    display: none;
}

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

    .policy .container {
        width: 100%;
        padding: 0 20px;
    }

}

@media screen and (max-width:414px) {
.policy .scroll-wrap {
    max-width: 374px;
    overflow-x: scroll;
}

.policy .scroll-table {
    min-width: 373px;
}

}
/* // */


/* 팝업 ============================================================================ */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    backdrop-filter: blur(2px);
}
 .popup-wrap {
     position: fixed;
     left: 50%;
     top: 50%;
     transform: translate( -50%,-50%);
     background: #000;
     z-index: 9999;
     display: none;
     flex-direction: column;
     box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
     overflow: hidden;
     width: min(90vw, 1600px);
 }

 /* #mainPopup.popup-wrap {
    aspect-ratio: 16 / 9;
    width: calc(100% - 24px);
    max-height: 90vh;
    max-width: 1600px;
 } */

 #mainPopup.popup-wrap {
  max-height: 900px;
  aspect-ratio: 16 / 9;
  height: auto; /* 고정 기준을 height로 설정 */
  width: calc(100% - 24px);
  max-width: 1600px;
  margin: 0 auto;
}

#mainPopup .swiper {
     width: 100%;
     height: 100%;
     border-bottom: 1px solid #333;
 }

#mainPopup .swiper-slide {
     background: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     font-size: 2vw;
     font-weight: bold;
     width: 100%;
     height: 100%;
 }

#mainPopup .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;

}
  
 .popup-footer {
     display: flex;
     justify-content: space-between;
     padding: 10px 20px;
     background: #222;
     color: #fff;
     font-size: 1rem;
 }

  .popup-footer label {
    color: #fff;
  }

.popup-footer button {
     background: none;
     border: none;
     color: #fff;
     cursor: pointer;
     font-weight: bold;
 }

   #mainPopup .swiper-slide a {
    width: 100%;
    height: 100%;
   }



  @media (max-width: 1024px) {
    .popup-wrap {
        height: fit-content;
    }
  }

 @media (max-width: 768px) {
     .popup-footer {
         align-items: center;
         gap: 10px;
         padding: 8px 12px;
     }

     #mainPopup .swiper-slide {
         font-size: 16px;
     }

    .popup-footer button {
        font-size: 14px;
    }
     .popup-footer label {
        font-size: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
 }



.mideaPopupWrap {
    height: unset;
    overflow: hidden;
}

.mideaPopupWrap .btn-close {
    right: 24px;
    top: 24px;
    z-index: 3;
}

.mideaPopupWrap .btn-close i {
    font-size: 32px;
    color: #fff;
}


 /* 영어 */

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

    .main_en .section5 .tab-wrap li {
        font-size: 14px;
    }

    .main_en .tab-btn-wrap li.wallpaper.active {
        font-size: 18px;
     }

    .tab-wrap li.video.active {
       font-size: 25px;
    }
     .main_en .tab-btn-wrap li.wallpaper.video-active {
        font-size: 14px;
     }

    .main_en .tab-btn-wrap li.video.wallpaper-active {
        font-size: 24px;
    }

    .mideaPopupWrap .btn-close i {
        font-size: 18px;
    }

    .mideaPopupWrap .btn-close {
        right: 12px;
        top: 12px;
    }
}



 @media screen and (max-hight: 865px) {

.section4 .cont_container,
.section5 .cont_container {

}


.section4 .num-box,
.section5 .num-box {
    width: 64px;
    height: 64px;
    font-size: 43px;
}

 }

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

.section4 .numbering-wrap,
.section5 .numbering-wrap {
    top: 3%;
}
}



@media screen and (max-height: 812px) {
.section4 .tab-content,
.section5 .tab-content {
    padding: clamp(83vh, 64vh, 692px) 0 12px;
}

/* .section4 .tab-btn-wrap,
.section5 .tab-btn-wrap {
    max-width: 296px;
} */

.section4 .tab-wrap li,
.section5 .tab-wrap li{
        min-width: 100px;
}

.newsSlideWrap {
    top: 58%;
}
}


@media screen and (max-height: 812px) {
    .section4 .tab-wrap li,
    .section5 .tab-wrap li {
        min-width: 128px;
    }
}

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

    .section4 .tab-content,
    .section5 .tab-content {
        margin: unset;
    }
}



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

    .section4 .tab-content,
    .section5 .tab-content {
        padding: clamp(75vh, 64vh, 692px) 0 12px;
    }
}


.progress_bar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: none;
    background: conic-gradient(#333 0%, #fff 0% 100%);
}



.mideaSlideWrap .midea-title {
    display: none;
    /* 스와이퍼에서는 노출 X */
}

.mideaPopupWrap .popup-title {
    font-size: 32px;
    color: #fff;
    font-weight: bold;
    margin-bottom: 12px;
}

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

    .newsSlideWrap .swiper-button-next:after, 
    .newsSlideWrap .swiper-button-prev:after{
        font-size: 24px !important;
    }

    .mideaPopupWrap .popup-title {
        font-size: 20px;
        line-height: 1.1;
    }

}