@charset "UTF-8";

.sect-metrics{
    padding: 210px 0 0;
    text-align: center;
}
.sect-metrics .metrics-header{}

.sect-metrics .headline{
    margin-bottom: 45px;
}
.sect-metrics .headline .highlight{
    background: linear-gradient(100deg, #B499FF 3.13%, #2D68FF 141.61%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sect-metrics .desc{
    font-size: 22px;
    line-height: 1.7;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}


.sect-metrics .tab-area{
    display: flex;
    max-width: 320px;
    margin: 0 auto 26px;
    padding: 6px;
    border-radius: 18px;
    border: 1px solid #242424;
    background: #171719;
}
.sect-metrics .btn-tab{
    flex: 1;
    height: 39px;
    font-size: 16px;
    letter-spacing: -0.02em;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
}
.sect-metrics .btn-tab.on{
    border-radius: 14px;
    background: linear-gradient(100deg, #B499FF 3.13%, #2D68FF 141.61%);
    color: #fff;
}

.sect-metrics .metrics-body{
    margin-top: -60px;
    display: flex;
    align-items: flex-end;
    background: url('/_assets/img/main/sect_metrics/graph_bg.png') no-repeat center / auto;
    background-image: image-set(
        url('/_assets/img/main/sect_metrics/graph_bg.webp') type('image/webp') 1x,
        url('/_assets/img/main/sect_metrics/graph_bg.png') type('image/png') 1x
    );
    width: 100%;
    height: 760px;
}
.sect-metrics .metrics-list{
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 1440px;
    margin: 0 auto;
}
.sect-metrics .metrics-item{
    position: relative;
    flex: 1;
    height: 624px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    background-image: none;
    cursor: pointer;

    transition: background-image 0.5s cubic-bezier(0.4, 0, 0.2, 1), color 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.sect-metrics .metrics-list .line{
    position: absolute;
    left: 0;
    bottom: 0;
    height: clamp(560px,55vw,840px);
}
.sect-metrics .metrics-list .line1{}
.sect-metrics .metrics-list .line2{
    left: 25%;
}
.sect-metrics .metrics-list .line3{
    left: 50%;
}
.sect-metrics .metrics-list .line4{
    left: 75%;
}
.sect-metrics .metrics-list .line5{
    left: auto;
    right: 0;
}


.sect-metrics .metrics-item .step-label{
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, calc(-50% - 33px));
    border-radius: 99px;
    /* border: 1px solid rgba(253, 253, 253, 0.20); */

    /* transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1); */
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sect-metrics .metrics-item .step-label::before{
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 23px;
    background: #414651;
    bottom: -23px;
}
.sect-metrics .metrics-item .step-label::after{
    content: '';
    position: absolute;
    bottom: -33px;
    left: 50%;
    transform: translateX(-50%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #414651;
}
.sect-metrics .metrics-item .step-label span{
    display: inline-block;
    padding: 8px 20px;
    font-size: 22px;
    line-height: 1.7;
    font-weight: 600;
}

.sect-metrics .metrics-item:nth-of-type(1) .step-label{

}
.sect-metrics .metrics-item:nth-of-type(2) .step-label{
    top:8px;
}
.sect-metrics .metrics-item:nth-of-type(3) .step-label{
    top:18px;
}
.sect-metrics .metrics-item:nth-of-type(4) .step-label{
    top:23px;
}

.sect-metrics .metrics-item:nth-of-type(1){
    height: 391px;
}
.sect-metrics .metrics-item:nth-of-type(2){
    height: 441px;
}
.sect-metrics .metrics-item:nth-of-type(3){
    height: 509px;
}
.sect-metrics .metrics-item:nth-of-type(4){
    height: 593px;
}

.sect-metrics .metrics-item-container{

}
.sect-metrics .metrics-item:nth-of-type(1) .metrics-item-container{
    margin-bottom: 154px;
}
.sect-metrics .metrics-item:nth-of-type(2) .metrics-item-container{
    margin-bottom: 193px;
}
.sect-metrics .metrics-item:nth-of-type(3) .metrics-item-container{
    margin-bottom: 214px;
}
.sect-metrics .metrics-item:nth-of-type(4) .metrics-item-container{
    margin-bottom: 250px;
}

.sect-metrics .metrics-item h3{
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.sect-metrics .metrics-item h3 .en,
.sect-metrics .metrics-item h3 .ko,
.sect-metrics .metrics-item .tag em {
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sect-metrics .metrics-item h3 .en{
    font-size: 16px;
    line-height: 1.4;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.2);
}
.sect-metrics .metrics-item h3 .ko{
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: rgba(255, 255, 255, 0.2);
}
.sect-metrics .metrics-item .tag{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    max-width: 250px;
    margin: 45px auto 0;
}
.sect-metrics .metrics-item .tag em{
    padding: 3px 8px;
    font-size: 15px;
    line-height: 1.6;
    letter-spacing: -0.02em;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    border: 0.5px solid rgba(255, 255, 255, 0.2);
}


/* hover */
.sect-metrics .metrics-item .metrics-item-container{
    transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.sect-metrics .metrics-item.hover .metrics-item-container{
    transform: scale(1.06);
}
.sect-metrics .metrics-item.on .step-label{
    background: linear-gradient(100deg, #B499FF 3.13%, #2D68FF 141.61%);
    /* border: 1px solid transparent; */
    border: none;
}
.sect-metrics .metrics-item.on .step-label::before{
    background: #fff;
}
.sect-metrics .metrics-item.on .step-label::after{
    background: #fff;
}
.sect-metrics .metrics-item.on:nth-of-type(1){
    /* 폴백 PNG 먼저 선언 */
    background-image: url('/_assets/img/main/sect_metrics/graph_item1_2.png');

    /* 최신 브라우저에서 WebP로 덮어씌움 */
    background-image: image-set(
        url('/_assets/img/main/sect_metrics/graph_item1_2.webp') type('image/webp') 1x,
        url('/_assets/img/main/sect_metrics/graph_item1_2.png') type('image/png') 1x
    );
}
.sect-metrics .metrics-item.on:nth-of-type(2){
    background-image: url('/_assets/img/main/sect_metrics/graph_item2_2.png');
    background-image: image-set(
        url('/_assets/img/main/sect_metrics/graph_item2_2.webp') type('image/webp') 1x,
        url('/_assets/img/main/sect_metrics/graph_item2_2.png') type('image/png') 1x
    );
}
.sect-metrics .metrics-item.on:nth-of-type(3){
    background-image: url('/_assets/img/main/sect_metrics/graph_item3_2.png');
    background-image: image-set(
        url('/_assets/img/main/sect_metrics/graph_item3_2.webp') type('image/webp') 1x,
        url('/_assets/img/main/sect_metrics/graph_item3_2.png') type('image/png') 1x
    );
}
.sect-metrics .metrics-item.on:nth-of-type(4){
    background-image: url('/_assets/img/main/sect_metrics/graph_item4_2.png');
    background-image: image-set(
        url('/_assets/img/main/sect_metrics/graph_item4_2.webp') type('image/webp') 1x,
        url('/_assets/img/main/sect_metrics/graph_item4_2.png') type('image/png') 1x
    );
}
.sect-metrics .metrics-item.on h3 .en{
    color: rgba(255, 255, 255, 0.5);
}
.sect-metrics .metrics-item.on h3 .ko{
    color: #fff;
}
.sect-metrics .metrics-item.on .tag em{
    color: #fff;
    border: 0.5px solid rgba(255, 255, 255, 0.3);
}
.sect-metrics .metrics-item.on .tag em.tag-highlight{
    border: 0.5px solid #B499FF;
    background: linear-gradient(100deg, #B499FF 3.13%, #2D68FF 141.61%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media(max-width:1479px){
    .sect-metrics .metrics-body{
        margin-top: -80px;
        background-size: cover;
        height: 633px;
    }
    .sect-metrics .metrics-list{
        width: 1200px;
    }
    .sect-metrics .metrics-item:nth-of-type(1){
        height: 326px;
    }
    .sect-metrics .metrics-item:nth-of-type(1) .metrics-item-container{
        margin-bottom: 82px;
    }
    .sect-metrics .metrics-item:nth-of-type(1) .step-label{
        top: -2px;
    }
    .sect-metrics .metrics-item:nth-of-type(2){
        height: 368px;
    }
    .sect-metrics .metrics-item:nth-of-type(2) .metrics-item-container{
        margin-bottom: 120px;
    }
    .sect-metrics .metrics-item:nth-of-type(2) .step-label{
        top: 5px;
    }
    .sect-metrics .metrics-item:nth-of-type(3){
        height: 424px;
    }
    .sect-metrics .metrics-item:nth-of-type(3) .metrics-item-container{
        margin-bottom: 128px;
    }
    .sect-metrics .metrics-item:nth-of-type(3) .step-label{
        top: 13px;
    }
    .sect-metrics .metrics-item:nth-of-type(4){
        height: 493px;
    }
    .sect-metrics .metrics-item:nth-of-type(4) .metrics-item-container{
        margin-bottom: 148px;
    }
    .sect-metrics .metrics-item:nth-of-type(4) .step-label{
        top: 14px;
    }

}


@media(max-width:1239px){
    .sect-metrics .metrics-body{
        margin-top: -100px;
    }
    .sect-metrics .metrics-list{
        width: 1000px;
    }
    .sect-metrics .metrics-item:nth-of-type(1){
        height: 333px;
    }
    .sect-metrics .metrics-item:nth-of-type(1) .step-label{
        top: -4px;
    }
    .sect-metrics .metrics-item:nth-of-type(2){
        height: 369px;
    }
    .sect-metrics .metrics-item:nth-of-type(2) .step-label{
        top: 2px;
    }
    .sect-metrics .metrics-item:nth-of-type(3){
        height: 417px;
    }
    .sect-metrics .metrics-item:nth-of-type(3) .step-label{
        top: 9px;
    }
    .sect-metrics .metrics-item:nth-of-type(4){
        height: 475px;
    }
    .sect-metrics .metrics-item:nth-of-type(4) .step-label{
        top: 13px;
    }
}


@media(max-width:1023px){
    .sect-metrics{
        padding: 105px 0 0;
    }
    .sect-metrics .desc{
        font-size: 18px;
    }

    .sect-metrics .metrics-body{
        margin-top: -120px;
    }
    .sect-metrics .metrics-list{
        width: 708px;
    }

    .sect-metrics .metrics-item .step-label span{
        padding: 4px 16px;
        font-size: 15px;
    }
    .sect-metrics .metrics-item:nth-of-type(1) .step-label{
        top: 5px;
    }
    .sect-metrics .metrics-item:nth-of-type(2) .step-label{
        top: 12px;
    }
    .sect-metrics .metrics-item:nth-of-type(3) .step-label{
        top: 14px;
    }
    .sect-metrics .metrics-item:nth-of-type(4) .step-label{
        top: 19px;
    }

    .sect-metrics .metrics-item:nth-of-type(1){
        height: 346px;
    }
    .sect-metrics .metrics-item:nth-of-type(2){
        height: 373px;
    }
    .sect-metrics .metrics-item:nth-of-type(3){
        height: 408px;
    }
    .sect-metrics .metrics-item:nth-of-type(4){
        height: 447px;
    }

    .sect-metrics .metrics-item:nth-of-type(1) .metrics-item-container{
        margin-bottom: 130px;
    }
    .sect-metrics .metrics-item:nth-of-type(2) .metrics-item-container{
        margin-bottom: 118px;
    }
    .sect-metrics .metrics-item:nth-of-type(3) .metrics-item-container{
        margin-bottom: 112px;
    }
    .sect-metrics .metrics-item:nth-of-type(4) .metrics-item-container{
        margin-bottom: 110px;
    }

    .sect-metrics .metrics-item h3 .en{
        font-size: 12px;
    }
    .sect-metrics .metrics-item h3 .ko{
        font-size: 15px;
    }
    .sect-metrics .metrics-item .tag{
        margin-top: 30px;
        max-width: 169px;
    }
    .sect-metrics .metrics-item .tag em{
        font-size: 11px;
    }

}


@media(max-width:767px){
    .sect-metrics{
        margin-bottom: 70px;
    }
    .sect-metrics .metrics-header{
        margin-bottom: 26px;
    }

    .sect-metrics .headline{
        margin-bottom: 30px;
    }
    .sect-metrics .desc{
        font-size: 14px;
    }
    .sect-metrics .metrics-body{
        /* display: none; */
        margin-top: 0;
        overflow: hidden;
        height: 374px;
        background: none;
        padding-left: 30px;
        padding-right: 30px;
    }
    .sect-metrics .metrics-list{
        width: 100%;
        justify-content: flex-start;
    }
    .sect-metrics .metrics-list .line{
        display: none;
    }
    .sect-metrics .metrics-item{
        flex: none;
        width: 210px;
    }
    

    .sect-metrics .metrics-item .step-label::before{
        bottom: -18px;
        height: 18px;
    }
    .sect-metrics .metrics-item .step-label::after{
        bottom: -21px;
        width: 4px;
        height: 4px;
    }
    .sect-metrics .metrics-item .step-label span{
        padding: 5px 13px;
        font-size: 18px;
    }
    .sect-metrics .metrics-item:nth-of-type(1) .step-label{
    }
    .sect-metrics .metrics-item:nth-of-type(2) .step-label{
        top: 5px;
    }
    .sect-metrics .metrics-item:nth-of-type(3) .step-label{
        top: 7px;
    }
    .sect-metrics .metrics-item:nth-of-type(4) .step-label{
        top: 13px;
    }

    .sect-metrics .metrics-item h3{
        gap: 10px;
    }
    .sect-metrics .metrics-item h3 .ko{
        font-size: 14px;
    }
    .sect-metrics .metrics-item .tag{
        margin-top: 15px;
        gap: 8px;
    }
    .sect-metrics .metrics-item .tag em{
        padding: 3px 12px;
        font-size: 13px;
    }

    .sect-metrics .metrics-item.panel1{
        height: 247px;
        background-image: url('/_assets/img/main/sect_metrics/graph_item1_default_mo.png');
        background-image: image-set(
            url('/_assets/img/main/sect_metrics/graph_item1_default_mo.webp') type('image/webp') 1x,
            url('/_assets/img/main/sect_metrics/graph_item1_default_mo.png') type('image/png') 1x
        );
    }
    .sect-metrics .metrics-item.panel2{
        height: 270px;
        background-image: url('/_assets/img/main/sect_metrics/graph_item2_default_mo.png');
        background-image: image-set(
            url('/_assets/img/main/sect_metrics/graph_item2_default_mo.webp') type('image/webp') 1x,
            url('/_assets/img/main/sect_metrics/graph_item2_default_mo.png') type('image/png') 1x
        );
    }
    .sect-metrics .metrics-item.panel3{
        height: 297px;
        background-image: url('/_assets/img/main/sect_metrics/graph_item3_default_mo.png');
        background-image: image-set(
            url('/_assets/img/main/sect_metrics/graph_item3_default_mo.webp') type('image/webp') 1x,
            url('/_assets/img/main/sect_metrics/graph_item3_default_mo.png') type('image/png') 1x
        );
    }
    .sect-metrics .metrics-item.panel4{
        height: 333px;
        background-image: url('/_assets/img/main/sect_metrics/graph_item4_default_mo.png');
        background-image: image-set(
            url('/_assets/img/main/sect_metrics/graph_item4_default_mo.webp') type('image/webp') 1x,
            url('/_assets/img/main/sect_metrics/graph_item4_default_mo.png') type('image/png') 1x
        );
    }

    .sect-metrics .metrics-item.swiper-slide-active .step-label{
        background: linear-gradient(100deg, #B499FF 3.13%, #2D68FF 141.61%);
    }
    .sect-metrics .metrics-item.swiper-slide-active .step-label::before{
        background: #fff;
    }
    .sect-metrics .metrics-item.swiper-slide-active .step-label::after{
        background: #fff;
    }
    .sect-metrics .metrics-item.swiper-slide-active h3 .en{
        color: rgba(255,255,255,0.5);
    }
    .sect-metrics .metrics-item.swiper-slide-active h3 .ko{
        color: #fff;
    }
    .sect-metrics .metrics-item.swiper-slide-active .tag em{
        color: #fff;
        border: 0.5px solid rgba(255,255,255,0.6);
    }
    .sect-metrics .metrics-item.swiper-slide-active .tag em.tag-highlight{
        border: 0.5px solid #B499FF;
        background: linear-gradient(100deg, #B499FF 3.13%, #2D68FF 141.61%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .sect-metrics .metrics-item.swiper-slide-active.panel1{
        background-image: url('/_assets/img/main/sect_metrics/graph_item1_hover_mo.png') !important;
        background-image: image-set(
            url('/_assets/img/main/sect_metrics/graph_item1_hover_mo.webp') type('image/webp') 1x,
            url('/_assets/img/main/sect_metrics/graph_item1_hover_mo.png') type('image/png') 1x
        );
    }
    .sect-metrics .metrics-item.swiper-slide-active.panel2{
        background-image: url('/_assets/img/main/sect_metrics/graph_item2_hover_mo.png') !important;
        background-image: image-set(
            url('/_assets/img/main/sect_metrics/graph_item2_hover_mo.webp') type('image/webp') 1x,
            url('/_assets/img/main/sect_metrics/graph_item2_hover_mo.png') type('image/png') 1x
        );
    }
    .sect-metrics .metrics-item.swiper-slide-active.panel3{
        background-image: url('/_assets/img/main/sect_metrics/graph_item3_hover_mo.png') !important;
        background-image: image-set(
            url('/_assets/img/main/sect_metrics/graph_item3_hover_mo.webp') type('image/webp') 1x,
            url('/_assets/img/main/sect_metrics/graph_item3_hover_mo.png') type('image/png') 1x
        );
    }
    .sect-metrics .metrics-item.swiper-slide-active.panel4{
        background-image: url('/_assets/img/main/sect_metrics/graph_item4_hover_mo.png') !important;
        background-image: image-set(
            url('/_assets/img/main/sect_metrics/graph_item4_hover_mo.webp') type('image/webp') 1x,
            url('/_assets/img/main/sect_metrics/graph_item4_hover_mo.png') type('image/png') 1x
        );
    }

    .sect-metrics .metrics-item.on:nth-of-type(1),
    .sect-metrics .metrics-item.on:nth-of-type(2),
    .sect-metrics .metrics-item.on:nth-of-type(3),
    .sect-metrics .metrics-item.on:nth-of-type(4){
        background-image: none;
    }

    .sect-metrics .metrics-item.panel1 .metrics-item-container{
        margin-bottom: 50px;
    }
    .sect-metrics .metrics-item.panel2 .metrics-item-container{
        margin-bottom: 37px;
    }
    .sect-metrics .metrics-item.panel3 .metrics-item-container{
        margin-bottom: 8px;
    }
    .sect-metrics .metrics-item.panel4 .metrics-item-container{
        margin-bottom: 22px;
    }


}