@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

.berex_system {
    font-family: 'Noto Sans KR', sans-serif;
    max-width: 100%;
    margin: auto;
    letter-spacing: -0.04em;

    .hidden-caption {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    
    #container {
        padding-bottom:0;
    }
    
    .tfixed {
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        margin: 0 auto;
        z-index: 100;
        background: #fff;
        will-change: height;
        backface-visibility: hidden;
        -webkit-font-smoothing: antialiased;
        
        .main-swiper {
            background: #000A2C;
            width: 100%;
            height:59px;
            overflow:hidden;
            padding:0 20px;
            border-bottom:1px solid #9792A8;
            font-size:18px;
            
            .swiper-wrapper {
                justify-content:center;
            }
            
            .swiper-slide {
                width: auto;
                cursor: pointer;
                color: #9792A8;
                line-height: 59px;
                font-weight:700;
                
                &.active {
                    color: #fff;
                    position: relative;
                    
                    &::after {
                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        height: 2px;
                        background: #fff;
                    }
                }
            }
        }
    }

    .sub-tab-wrapper {
        position: sticky;
        top: 59px;
        left: 0;
        right: 0;
        max-width: 100%;
        margin: 0 auto;
        height:59px;
        overflow:hidden;
        z-index: 90;
        background: #080611;
        display: none;
        
        &.active {
            display: block;
        }
        
        .sub-swiper {
            width: 100%;
            font-size:18px;
            
            .swiper-wrapper {
                justify-content:center;
                gap:40px;
                
                .swiper-slide {
                    width: auto;
                    height:100%;
                    cursor: pointer;
                    color: #9792A8;
                    line-height: 59px;
                    transition: all 0.3s;
                    font-weight:700;
                    
                    &.active {
                        color: #fff;
                    }
                }
            }
        }
    }
    
    .tab-content {
        display: none;
        
        &.active {
            display: block;
        }
    }
    
    .mt160 {
        margin-top:160px;
    }

    .panel-group:last-child {
        .panel:last-child {
            padding-bottom:100px;
        }
    }
    
    .intro {height:900px;background:url('../images/berex/intro.jpg') no-repeat center;}
    
    .rounded {
        margin-top:-100px;
        border-radius: 80px 80px 0 0;
    }
    
    .bg-blue {
        background: url("../images/berex/star_bg3.png") no-repeat top center, linear-gradient(180deg, #000A2C 27.89%, #461EFE 100%);
    }

    .bg-orange {
        background: linear-gradient(180deg, #FE8510 0%, #FFB45F 100%);
    }

    .panel {
        position:relative;
        padding:160px 0 260px;
        text-align:center;

        &.pb100 {
            padding-bottom:100px;
        }
        .con {
            position:relative;
        }

        .wbox {
            width:1240px;
            margin:60px auto 0;
            padding:80px 0;
            background:#fff;
            overflow:hidden;
            border-radius:60px;
            border:6px solid #000;
        }
        
        & .btn {
            position: absolute;
            bottom: 80px;
            left: 50%;
            transform: translateX(-50%);
            display: block;
            width: 370px;
            padding-top: 67px;
            font-size: 0;
            z-index:5;
        }
        
        .swiper-pagination {
            .swiper-pagination-bullet {
                width: 12px;
                height: 12px;
                margin: 0 5px;
                opacity: 1;
                transition: all 0.3s;
                background:rgba(0,0,0,0.4);

                &.swiper-pagination-bullet-active {
                    width: 20px;
                    height: 20px;
                    background: #1B0C86;
                }
            }
            
            &.orange {
                .swiper-pagination-bullet {
                    background: #FFDBB8;
                    &.swiper-pagination-bullet-active {
                        background: #FE8612;
                    }
                }
            }
        }
        
        
        .panel-swiper {
            position: relative;
            
            .swiper-pagination {
                bottom: 0;
                display: flex;
                align-items: center;
                justify-content: center;
                height: 20px;
                width:100%;
            }
            
            .swiper-button-prev,
            .swiper-button-next {
                width: 28px;
                height: 27px;
                left:50%;
                right:auto;
                margin-left:226px;
                margin-top:-35px;
                background: url("../images/berex/arrow.png") no-repeat center / 100%;
                &::after { display: none; }
            }
            
            .swiper-button-prev {
                margin-left: -255px;
                transform: scaleX(-1);
            }
            
            &.exp-swiper {
                margin:48px 0;
                padding-bottom:42px;
                overflow: hidden;
                
                .swiper-slide {
                    width: 100%;
                    opacity:0.4;
                    transition:all 0.3s;
                    
                    &.swiper-slide-active {
                        opacity:1;
                    }
                }
            }
            
            &.best-swiper {
                position: absolute;
                top:397px;
                width:1280px;
                overflow:hidden;
                left:50%;
                transform:translateX(-50%);

                .swiper-pagination {
                    position:absolute;
                    justify-content:flex-start;
                    top:614px;
                    left:0;
                    height:auto;
                    bottom:auto;
                    padding:0 275px;
                    gap:12px;

                    span {
                        &:nth-of-type(2) {
                            flex:0 1 235px;
                        }
                        &:nth-of-type(3) {
                            flex:1;
                        }
                    }
                    
                    .swiper-pagination-bullet {
                        width:279px;
                        height:0;
                        margin:0;
                        padding-top:66px;
                        border-radius:0;
                        background:none;
                    }
                }
            }
            
            &.goods-swiper {
                max-width:1520px;
                height:760px;
                margin:0 auto;
                overflow:hidden;
                background:url('../images/berex/goods-swiper.png') no-repeat center / 100%;

                .swiper {
                    margin-top:116px;
                }

                .swiper-slide {
                    opacity:0.4;
                    margin-right:80px;

                    .df {
                        display:flex;
                        align-items:center;
                        justify-content:center;
                    }

                    img {
                        transform:scale(0.71);
                        transition: all 0.3s;
                    }
                    
                    .btn {
                        bottom: 70px;
                        width: 175px;
                        padding-top: 53px;
                        visibility: hidden;
                        cursor:pointer;
                        background:url('../images/berex/btn1.png');
                        &.coming {
                            width:167px;
                            background:url('../images/berex/btn2.png');
                            cursor:default;
                            pointer-events:none;
                        }
                    }

                    &.swiper-slide-next {
                        .df {
                            justify-content:flex-start;
                        }
                        img {
                            transform-origin: left center;
                        }
                    }
                    &.swiper-slide-prev {
                        .df {
                            justify-content:flex-end;
                        }
                        img {
                            transform-origin: right center;
                        }
                    }

                    &.swiper-slide-active {
                        opacity:1;
                        
                        img {
                            transform:scale(1);
                        }

                        .btn {
                            visibility: visible;
                        }
                    }
                }
            }
        }
        
        .noti_wrap {
            .desc {
                text-align:center;
                margin-top:40px;
                line-height:1.5;
                font-weight:700;
                color:#fff;
            }
            
            details {
                width:1080px;
                margin: 40px auto 0;
                overflow:hidden;
                
                summary {
                    display: inline-flex;
                    align-items: center;
                    gap: 10px;
                    color:#fff;
                    font-size:24px;
                    font-weight: 700;
                    cursor:pointer;
                    
                    &::-webkit-details-marker {
                        display: none;
                    }
                    
                    &::after {
                        content: "";
                        display: block;
                        width: 0;
                        height: 0;
                        border-left: 7px solid transparent;
                        border-right: 7px solid transparent;
                        border-bottom: 12px solid #FFFFFF;
                        transform: rotate(180deg);
                    }
                }
                
                &[open] summary::after {
                    transform: rotate(0deg);
                }

                ul {
                    display: flex;
                    flex-wrap: wrap;
                    padding-left:20px;
                    gap:20px;
                    margin-top:30px;
                    color:#fff;
                    text-align:left;
                    font-size:18px;
                    font-weight:700;

                    li {
                        width:calc(50% - 10px);
                        list-style: disc;
                        padding-right:20px;

                        &::marker { 
                            font-size:15px;
                        }
                    }
                }
            }
            
            &.black {
                .desc,
                summary,
                ul {
                    color: #000;
                    
                    &::after {
                        border-bottom-color: #000;
                    }
                }
            }
        }
        
        &.t1c1 { padding-top:97px;}
        
        &.t1c2 {
            background:url('../images/berex/t1c2.jpg') no-repeat top center;
            
            .video_box {
                position:absolute;
                top:740px;;
                left:50%;
                width: 642px;
                height: 366px;
                display:flex;
                align-items:center;
                justify-content:center;
                transform: translateX(-50%);
                border-radius: 40px;
                background: url('../images/berex/video_bg.jpg') no-repeat center / 100%;
                
                .play-button {
                    width:120px;
                    height:120px;
                    background:url('../images/berex/video_play.png') no-repeat center / 100%;
                    z-index:5;
                    cursor:pointer;
                    border-radius:100%;
                }
                
                iframe {
                    position:absolute;
                    top:0;
                    left:0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover; 
                    border-radius: 40px;
                    border: 6px solid #FEAB04;
                }
                
                &::before{
                    content: "";
                    position: absolute;
                    top: -35px;
                    left: 50%;
                    transform: translateX(-50%);
                    width: 562px;
                    height: 77px;
                    background: url("../images/berex/hand.png") no-repeat center/100%;
                    z-index: 2;
                }
            }
        }

        &.t1c3 {
            padding-bottom:590px;

            .video_box {
                position:relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width:1240px;
                height:700px;
                margin:60px auto 0;
                border:6px solid #FFE1C4;
                background:url("../images/berex/t1c3_vid.png") no-repeat center/100%;;
                overflow:hidden;
                border-radius:60px;

                iframe {
                    position:absolute;
                    top:0;
                    left:0;
                    width: 100%;
                    height: 100%;
                    object-fit: cover; 
                }
            }

            .lineup {
                position:relative;
                margin:60px auto 0;

                ul {
                    position:absolute;
                    top:414px;
                    width:1144px;
                    left: 50%;
                    transform: translateX(-50%);
                    display:flex;
                    flex-wrap:wrap;
                    gap:20px;

                    li {
                        position:relative;
                        flex:0 1 562px;
                        height:288px;
                        
                        a {
                            position:absolute;
                            display:block;
                            bottom:29px;
                            left:30px;
                            width:130px;
                            height:53px;
                        }
                    }
                }
                
            }
        }
        
        &.t1c4 {
            padding-top:117px;
            text-align:center;
            background: #461EFE url('../images/berex/t1c4.jpg') no-repeat top center;
            
            &::before {
                content:'';
                position:absolute;
                top:-500px;
                left:50%;
                width:860px;
                height:500px;
                transform: translateX(-50%);
                background:url('../images/berex/cap1.png') no-repeat bottom center;
            }
        }
        
        &.t2c1 {
            background: url('../images/berex/evt2_icon1.png') no-repeat 105px 2950px, linear-gradient(180deg, #FE8510 0%, #FFB45F 100%);

            .test_wrap {
                position:relative;
                width:1240px;
                height:600px;
                margin:40px auto 0;
                border-radius:40px;
                overflow:hidden;
                box-sizing: border-box;
                background:url('../images/berex/test_bg.png') no-repeat top center / 100%;
                
                button {
                    position:absolute;
                    display:block;
                    top: 0;
                    font-size:0;
                    
                    &.start {
                        top: auto;
                        bottom: 9.5%;
                        left: 50%;
                        width: 31%;
                        padding-top: 6%;
                        transform: translateX(-50%);
                    }
                    &.back {
                        left:20px;
                        top:20px;
                        width:44px;
                        padding-top:44px;
                    }
                }
                
                .result {
                    height:100%;
                    background:url('../images/berex/test_result.png') no-repeat top center / 100%;
                    
                    &.type0 {background-image:url('../images/berex/test_result0.png');}
                    &.type1 {background-image:url('../images/berex/test_result1.png');}
                    &.type2 {background-image:url('../images/berex/test_result2.png');}
                    &.type3 {background-image:url('../images/berex/test_result3.png');}
                    &.type4 {background-image:url('../images/berex/test_result4.png');}
                    &.type5 {background-image:url('../images/berex/test_result5.png');}
                    &.type6 {background-image:url('../images/berex/test_result6.png');}
                    
                    
                    .type {
                        position:absolute;
                        top:75px;
                        left:208px;
                        width:350px;
                    }
                    
                    .btn_wrap {
                        position:absolute;
                        top:469px;
                        width:322px;
                        right:200px;
                        margin:0;
                        display:flex;
                        justify-content:center; 
                        gap:12px;
                        
                        a {
                            flex: 1;
                            height:61px;
                        }
                    }
                }
                
                .test_item {
                    opacity: 0;
                    transition: opacity 0.25s ease;
                    
                    &.is-active {
                        opacity: 1;
                    }
                    
                    .chk_btn {
                        position:absolute;
                        top:268px;
                        left:50%;
                        display:flex;
                        flex-direction: column;
                        gap:16px;
                        width:680px;
                        transform: translateX(-50%);
                        
                        button {
                            position:static;
                            width:100%;
                            height:80px;
                            border:4px solid #FFE1C4;
                            border-radius:24px;

                            &:hover {
                                border-color:#FE8612;
                            }
                        }
                    }
                }
                
                .loading {
                    position:relative;
                    
                    .ani_wrap {
                        position: absolute;
                        top: 103px;
                        left: 50%;
                        width: 370px;
                        transform: translateX(-50%);

                        .star {
                            -webkit-backface-visibility: hidden;
                            backface-visibility: hidden;
                            transform: translateZ(0);
                            image-rendering: -webkit-optimize-contrast;
                        }
                        
                        .star.on {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 100%;
                            height: 100%;
                            clip-path: inset(0 100% 0 0);
                            transition: clip-path 0.1s linear;
                            overflow: hidden;
                        }
                        
                    }
                    
                    &.act  {
                        .star.on {
                            animation: star-fill 0.7s steps(14) 8 forwards;
                        }
                    }
                }
            }
        }

        &.t2c2 {
            padding:0;

            .con {
                width:100%;
                height:1080px;
                background-position: top center;
                background-repeat:no-repeat;
                
                &.con1 {
                    height:1890px;
                    background-image:url('../images/berex/t2c2_1.jpg');
                }

                &.con2 {
                    background-image:url('../images/berex/t2c2_2.jpg');
                }

                &.con3 {
                    background-image:url('../images/berex/t2c2_3.jpg');
                }

                &.con4 {
                    background-image:url('../images/berex/t2c2_4.jpg');
                }

                &.con5 {
                    height:1890px;
                    background-image:url('../images/berex/t2c2_5.jpg');
                }

            }
        }

        &.t2c3 {
            height:1172px;
            background: url('../images/berex/t2c3.jpg') no-repeat top center;
            
            &::before {
                content:'';
                position:absolute;
                top:-549px;
                left:50%;
                width:878px;
                height:605px;
                transform: translateX(-50%);
                background:url('../images/berex/cap3.png') no-repeat bottom center;
            }
        }
        
        &.t2c4 {
            background:linear-gradient(180deg, #000A2C 27.89%, #461EFE 100%);
        }

        &.t2c5 {
            height:1132px;
            background: url('../images/berex/t2c5.jpg') no-repeat top center;
        }
        
        &.t3c1 {
            padding:120px 0 750px;
            .theater {margin-bottom:80px;padding-bottom:0;}
            .evt3 {margin-top:163px;}
        }

        &.t3c2 {
            background: url('../images/berex/evt4_icon1.png') no-repeat left 190px, linear-gradient(180deg, #FE8510 0%, #FFB45F 100%);
            
            &::before {
                content:'';
                position:absolute;
                top:-520px;
                left:50%;
                width:1137px;
                height:520px;
                transform: translateX(-50%);
                background:url('../images/berex/cap2.png') no-repeat bottom center;
            }
        }
        
        &.t4c1 {
            & .evt_list {
                display:flex;
                flex-wrap:wrap;
                gap:20px;
                width: 1240px;
                margin: 0 auto;
                
                & li {
                    flex: 0 1 calc(50% - 10px);
                    cursor:pointer;
                    
                    & a {
                        display: block;
                        width: 100%;
                        font-size: 0;
                    }
                }
            }
        }

        &.evt1bg {
            background: url("../images/berex/evt1_icon1.png") no-repeat 112px center, url("../images/berex/star_bg3.png") no-repeat center, linear-gradient(180deg, #000A2C 27.89%, #461EFE 100%);
        }

        &.evt4bg {
            background: url('../images/berex/evt4_icon1.png') no-repeat left 190px, linear-gradient(180deg, #FE8510 0%, #FFB45F 100%);
        }
    }
    
    .p-icon {
        display:none;
        
        &.pi2 {
            .icon1 {
                top:112px;
                width: 195px;
                margin-left:-870px;
            }
            
            .icon2 {
                top:1346px;
                width: 238px;
                margin-left:630px;
            }
        }

        img {
            position: absolute;
            left:50%;
            z-index: 10;
            will-change: transform;
        }
    }
    
    & .char_box {
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        width:1104px;
        margin:50px auto 0;
        gap:12px 20px;
        
        li {
            position: relative;
            width:261px;
            height:380px;
            border-radius:40px;
            overflow:hidden;
            border: 6px solid #000;
            background-repeat: no-repeat;
            background-position: top center;
            
            &:nth-of-type(1) {background-image:url('../images/berex/1_4_s1bg.png');}
            &:nth-of-type(2) {background-image:url('../images/berex/1_4_s2bg.png');}
            &:nth-of-type(3) {background-image:url('../images/berex/1_4_s3bg.png');}
            &:nth-of-type(4) {background-image:url('../images/berex/1_4_s4bg.png');}
            &:nth-of-type(5) {background-image:url('../images/berex/1_4_s5bg.png');}
            &:nth-of-type(6) {background-image:url('../images/berex/1_4_s6bg.png');}
            &:nth-of-type(7) {background-image:url('../images/berex/1_4_s7bg.png');}
            
            .char {
                position:absolute;
                bottom:0%;
                left:0;
                width:100%;
                transform: scale(1.45) translateY(35%);
                transition: all 0.2s;
            }
            .btn {
                bottom: 35px;
                width: 157px;
                height: 53px;
                background:url('../images/berex/1_4_sbtn.png') no-repeat center / 100%;
                visibility: hidden;
            }
            
            &:hover  {
                .char {
                    bottom:-7.2%;
                    transform: scale(0.72) translateY(7.2%);
                }
                
                .btn {
                    visibility: visible;
                }
            }
            
            &.p2 {
                & .char {
                    transform: scale(2) translateY(26%);
                }
                
                &:hover  {
                    & .char {
                        bottom:0;
                        transform: scale(1) translateY(0.2%);
                    }
                }
            }
        }
    }

    .evt_wrap {
        .quick-swiper {
            position:fixed;
            bottom:0;
            left:50%;
            width:752px;
            transform: translate(-50%, 100%);
            z-index:50;
            border-radius: 20px;
            background:rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(20px);
            overflow:hidden;
            transition: all 0.3s;
            
            &.show {
                transform:translate(-50%, -50px);
            }
            
            .swiper-slide {
                display:flex;
                align-items:center;
                justify-content:center;
                cursor:pointer;
                width:auto;
                height:66px;
                font-weight:700;
                color:#fff;
                text-align:center;
                border-radius:20px;
                transition: all 0.3s ease;
                span {
                    padding:0 20px;
                    letter-spacing: -0.02em;
                }
                
                &.active {
                    background:#000;
                }
                
            }
        }
    }
}

@keyframes star-fill {
    0% {clip-path: inset(0 100% 0 0);}
    100% {clip-path: inset(0 -15% 0 0);}
}