@charset "utf-8";

/* ==========================================================================
    MAIN VISUAL
    ========================================================================== */
.main-visual {
    position: relative; overflow: hidden;
    .main-vis{position: relative;}
    .mvis-link{display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 100dvh;}
    .mvis-img{position: absolute; inset: 0; overflow: hidden;}
    .mvis-img img{width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); transition: 15s;}
    .mvis-img img.mo{display: none;}
    .main-vis.swiper-slide-active .mvis-img img{transform: scale(1);}
    .mvis-text{position: relative; flex: 0 0 50%; font-weight: bold; color: #fff; letter-spacing: 0; text-transform: uppercase;}
    .mvis-text .txt-en{font-family: "handel-gothic", sans-serif; font-size: 16px; font-weight: bold; line-height: 1; letter-spacing: 1%; margin-bottom: 27px;}
    .mvis-text .txt-en span{color: var(--point-color01);}
    .mvis-text .main-text{font-size: 62px; font-weight: bold; line-height: 70px; letter-spacing: -1%;}
    .mvis-text .desc{font-size: 20px; font-weight: 600; margin-top: 20px;}
    .scroll-down {
        position: absolute; bottom: 30px; left: 0; right: 0;
        text-align: center; z-index: 1;
        > a {position: relative; display: inline-flex; flex-direction: column; align-items: center; min-width: 125px; padding-bottom: 24px; color: #fff; text-decoration: none;}
        .scroll-down-text{font-family: "handel-gothic", sans-serif; font-size: 14px; line-height: 1; letter-spacing: 15%;}
        .scroll-down-icon{display: block; width: 24px; aspect-ratio: 1; margin-top: 5px; animation: scroll-down-arrow 1.5s ease-in-out infinite;}
    }
    @media (width <= 1600px) {
        .mvis-text .main-text{font-size: 54px; line-height: 62px;}
    }
    @media (width <= 1420px) {
        .mvis-text .main-text{font-size: 50px; line-height: 58px;}
    }
    @media (width <= 1280px) {
        .mvis-text .txt-en{font-size: 15px; margin-bottom: 20px;}
        .mvis-text .main-text{font-size: 42px; line-height: 50px;}
        .mvis-text .desc{font-size: 18px;  margin-top: 18px;}
        .scroll-down .scroll-down-text{font-size: 13px;}
    }
    @media (width <= 1024px) {
        .mvis-link{height: 600px;}
        .mvis-text .main-text{font-size: 36px; line-height: 46px;}
    }
    @media (width <= 860px) {
        .mvis-link{justify-content: center;}
        .mvis-text{flex: 0 0 100%; text-align: center;}
    }
    @media (width <= 640px) {
        .mvis-img img{display: none;}
        .mvis-img img.mo{display: block;}
        .mvis-link{height: 100svh;}
        .mvis-text .txt-en{font-size: 11px; margin-bottom: 13px;}
        .mvis-text .main-text{font-size: 30px; line-height: 1.2;}
        .mvis-text .desc{font-size: 16px; font-weight: 500; margin-top: 12px;}
        .scroll-down{
            bottom: 20px;
            .scroll-down-text{font-size: 12px;}
        }
    }
}
@keyframes scroll-down-arrow {
    0%, 100%{transform: translateY(0); opacity: .5;}
    50%{transform: translateY(6px); opacity: 1;}
}

@media (prefers-reduced-motion: reduce) {
    .scroll-down .scroll-down-icon{animation: none;}
}


/* ==========================================================================
    메인페이지 공통
    ========================================================================== */
:root{
    --sec-padding-vertical: 180px;
    @media (width <= 1280px){
        --sec-padding-vertical: 130px;
    }
    @media (width <= 860px){
        --sec-padding-vertical: 100px;
    }
    @media (width <= 640px){
        --sec-padding-vertical: 70px;
    }
}

.font-handel{font-family: "handel-gothic", sans-serif;}

.btn-view{
    position: relative; display: inline-flex; align-items: center; width: 193px; gap: 24px; font-size: 17px; font-weight: 600; color: #fff; line-height: 55px; border-radius: 55px; box-shadow: inset 0 0 0 2px #999; 
    padding: 0 24px; transition: 0.5s; font-family: 'Pretendard'; overflow: hidden;
    &:before{content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; right: 0; width: 0%; border-radius: 55px; background: #fff; transition: 0.5s;}
    & em{position: relative; z-index: 1;}
    & .shape{
        margin: 0 0 0 auto; position: relative; display: inline-block; width: 13px; height: auto; aspect-ratio: 1; transition: 0.5s;
        &:after{content: ""; position: absolute; inset: 0; background: url("/assets/site/img/common/view-plus.svg") no-repeat center;}
    }

    /* 마우스 오버 */
    &:hover{
        box-shadow: inset 0 0 0 2px #fff; color: #000;
        &:before{width: 100%;}
        & .shape{
            transform: rotate(-90deg);
            &:after{filter: brightness(0) saturate(100%);}
        }
    }
}

.main-sec{
    padding: var(--sec-padding-vertical) 0;
    .main-tit{
        .sup{font-size: 18px; font-weight: 700; color: var(--point-color01); line-height: 1.23; padding: 0 0 19px; font-family: "handel-gothic", sans-serif;}
        h3{
            font-size: 46px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.22;
            & span[data-text]{position: relative; color: #999;}
            & span[data-text]:after{content: attr(data-text); position: absolute; left: 0; width: 0; white-space: nowrap; overflow: hidden; transition: width 1.0s 0.2s;}
            & span[data-color="white"]:after{color: #fff;}

            &.on{
                & span[data-text]:after{width: 100%;}
            }
        }
        .sub{font-size: 17px; color: #999; line-height: 1.2; padding: 13px 0 0;}
        .m-only{display: none;}

        &.align-center{text-align: center;}

        @media (width <= 1280px){
            .sup{font-size: 15px;}
            h3{font-size: 38px; line-height: 1.3;}
            .sub{font-size: 16px;}
        }
        @media (width <= 1024px){
            .sup{font-size: 14px; padding: 0 0 12px;}
            h3{font-size: 34px;}
            .sub{font-size: 16px;}
        }
        @media (width <= 860px){
            text-align: center;
            h3{font-size: 32px;}
        }
        @media (width <= 640px){
            .sup{padding: 0 0 8px;}
            h3{font-size: 24px;}
            .sub{font-size: 14px; padding: 10px 0 0;}
            .m-only{display: block;}
        }
    }
    .btns{
        display: flex; justify-content: center; gap: 0; padding: 48px 0 0;
        &.align-center{justify-content: center;}
        &.align-left{justify-content: flex-start;}
        &.align-right{justify-content: flex-end;}
    }
}

/* ==========================================================================
    개별 섹션 - 프로덕트
    ========================================================================== */
.product-section{

    & .tab-slider{
        padding: 0 0 0 650px; overflow: hidden; margin: -56px 0 0;
        
        & > .btns{padding: 0 0 48px;}

        & .tab-list{
            position: relative; display: flex; flex-wrap: nowrap; gap: 12px;
            & > li{flex: 0 0 auto;}
            & > li button{position: relative; padding: 0 24px; line-height: 44px; border-radius: 44px; font-weight: 700; letter-spacing: 0; color: #999; background-color: transparent; transition: 0.1s;}
            & > li button.on{color: #fff;}
            & > li .bar{position: absolute; width: 0; height: 44px; border-radius: 44px; background-color: var(--point-color01); transition: 0.3s;}
        }
        & .tab-con{
            & .con{
                display: none; color: #fff;
                & .product-slider-wrap{}
            }
            & .con.show{
                display: block;
            }
        }
        
        @media (width <= 1280px){
            padding: 0 0 0 570px; 
        }
        @media (width <= 1023px){
            padding: 0; text-align: center;
            & .tab-list{
                display: inline-flex;
            }
            & .tab-con{
                & .con{
                    & .product-slider-wrap{max-width: 700px; margin: 0 auto;}
                }
            }
        }
        @media (width <= 860px){
            margin: 48px 0 0;
            & > .btns{justify-content: center;}
        }
        @media (width <= 800px){
            & .tab-list{
                display: flex; width: 100%; flex-wrap: wrap; gap: 0;
                & > li{width: 50%;}
                & > li .bar{display: none;}
                & > li:has(button.on){background-color: var(--point-color01); border-radius: 44px;}
            }
        }
    }

    & .product-main-slider{
        & .list{
            & .item{
                display: flex; gap: 30px; flex-wrap: wrap; color: #fff; padding: 58px 0 0;
                & .img{
                    position: absolute; top: -44px; left: -650px;
                    width: 610px; height: auto; aspect-ratio: 610 / 500;
                    & img{width: 100%; height: 100%; object-fit: cover; object-fit: contain; opacity: 0;}
                }
                & .txt{
                    & .name{font-size: 36px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;}
                    & .info{
                        display: flex; flex-direction: column; font-weight: 400; color: #999; padding: 13px 0 0; font-size: 17px;
                        li{
                            position: relative; padding: 0 0 0 24px;
                            &:before{content: ""; position: absolute; top: 11px; left: 10px; width: 3px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #999;}
                        }
                    }
                }
            }
            & .item.swiper-slide-active{
                & .img{
                    & img{opacity: 1;}
                }
            }
        }

        @media (width <= 1500px){
            & .list{
                & .item{
                    & .img{
                        width: 550px; left: -590px;
                    }
                }
            }
        }
        @media (width <= 1280px){
            & .list{
                & .item{
                    .txt{
                        .name{font-size: 28px;}
                    }
                }
            }
        }
        @media (width <= 1023px){
            & .list{
                & .item{
                    flex-direction: column;
                    & .img{position: static; top: auto; left: auto; width: 100%; max-width: 400px; margin: 0 auto; padding: 0 50px; height: auto; aspect-ratio: initial;}
                    & .txt{
                        & .info{
                            justify-content: center;
                            li{
                                &:before{display: none;}
                            }
                        }
                    }
                }
            }
        }
        @media (width <= 640px){
            & .list{
                & .item{
                    gap: 20px;
                    & .img{width: 100%; padding: 0 50px; height: auto; aspect-ratio: initial;}
                    & .txt{
                        & .name{font-size: 22px;}
                        & .info{
                            font-size: 14px; padding: 10px 0 0;
                        }
                    }
                }
            }
        }
    }

    & .product-sub-slider{
        overflow: hidden; padding: 59px 0 0;
        & .list{
            & .item{
                cursor: pointer; height: auto;
                & .img{
                    display: inline-flex; align-items: center; justify-content: center; width: 100%; height: auto; aspect-ratio: 202 / 193; background: rgba(255,255,255,0.05); border-radius: 12px;
                    transition: 0.1s;
                    & img{width: 80%; height: auto; object-fit: cover;}
                }
                &:hover{
                    & .img{
                        background: #0c1534;
                    }
                }
            }
        }
        & .sub-dots{
            margin-top: 30px; display: flex; justify-content: center; gap: 10px;
            > span{width: 6px; height: 6px; border-radius: 6px; border-color: transparent; background: #999; opacity: 1; transition: 0.3s;}
            > span.swiper-pagination-bullet-active{background: #fff; width: 25px;}
        }

        @media (width <= 1280px){
            & .list{
                & .item{
                    & .img{
                        & img{width: calc(100% - 40px)}
                    }
                }
            }
        }
        @media (width <= 640px){
            padding: 30px 0 0;
            & .list{
                & .item{
                    & .img{
                        & img{width: calc(100% - 20px)}
                    }
                }
            }
        }
    }
}


/* ==========================================================================
    개별 섹션 - 파트너
    ========================================================================== */
.partners-section{
    padding: calc(var(--sec-padding-vertical) + 20px) 0; background: url("/assets/site/img/main/partners-section-bg.png") no-repeat center / cover;
    .partners-marquee-group{
        padding: 48px 0 0; overflow: hidden;
        .partners-marquee{
            .list{-webkit-transition-timing-function: linear !important; transition-timing-function: linear !important;}
            .item{
                width: auto; padding: 0 40px 0 0;
                & img{display: block; width: 200px; height: auto; aspect-ratio: 200 / 109;}
            }
        }
        .partners-marquee + .partners-marquee{margin-top: 20px;}
    }

    @media (width <= 1280px){
        .partners-marquee-group{
            
            .partners-marquee{
                .list{}
                .item{
                    padding: 0 20px 0 0;
                    & img{width: 180px;}
                }
            }
            .partners-marquee + .partners-marquee{margin-top: 0;}
        }
    }
    @media (width <= 860px){
        padding: var(--sec-padding-vertical) 0;
    }
    @media (width <= 640px){
        .partners-marquee-group{
            padding: 5% 0 0;
            .partners-marquee{
                .item{
                    padding: 0;
                    & img{width: 100px;}
                }
            }
            .partners-marquee + .partners-marquee{margin-top: 0;}
        }
    }
}


/* ==========================================================================
    개별 섹션 - 솔루션
    ========================================================================== */
.solution-section{
    .solution-cards{
        overflow: hidden; margin: -56px 0 0;
        .btns{padding: 0 0 48px;}
        .list{}
        .item{
            background: rgba(255,255,255,0.05); padding: 56px 48px; aspect-ratio: 365 / 412; min-height: 412px;
            display: flex; flex-direction: column; cursor: pointer; border-radius: 12px;
            dt{flex: 0 0 auto; font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2;}
            dd{
                flex: 1; min-height: 0; color: #999; font-size: 17px; line-height: 1.3; display: flex; flex-direction: column;
                .txt{padding: 12px 0 0;}
                .img{
                    margin-top: auto; text-align: right;
                    img{vertical-align: top;}
                }
            }

            &:hover{
                background: rgba(25,42,104,0.5);
            }
        }
        .dots{
            margin-top: 30px; display: flex; justify-content: center; gap: 10px;
            > span{width: 6px; height: 6px; border-radius: 6px; border-color: transparent; background: #999; opacity: 1; transition: 0.3s;}
            > span.swiper-pagination-bullet-active{background: #fff; width: 25px;}
        }
    }

    @media (width <= 1720px){
        .solution-cards{
            .item{
                padding: 56px 3%;
            }
        }
    }
    @media (width <= 1600px){
        .solution-cards{
            .item{
                dt{font-size: clamp(20px,2vw,28px);}
            }
        }
    }
    @media (width <= 1280px){
        .solution-cards{
            .item{
                padding: 40px 2.5%; aspect-ratio: initial; min-height: 370px;
                dt{font-size: clamp(20px,2vw,28px);}
                dd{
                    font-size: 15px;
                    .img{
                        img{width: 45%; height: auto;}
                    }
                }
            }
        }
    }
    @media (width <= 1024px){
        .solution-cards{
            .item{
                min-height: 350px;
                dt{font-size: clamp(20px,2vw,28px);}
                dd{
                    .img{
                        img{width: 45%; height: auto;}
                    }
                }
            }
        }
    }
    @media (width <= 860px){
        .solution-cards{
            margin: 48px calc(var(--out-gap) * -1) 0 0;
            .btns{justify-content: center;}
        }
    }
    @media (width <= 640px){
        .solution-cards{
            .item{
                padding: 40px 20px; min-height: 280px;
                dt{font-size: 20px;}
                dd{
                    font-size: 15px;
                    .img{
                        img{width: 35%;}
                    }
                }
            }
        }
    }
}


/* ==========================================================================
    개별 섹션 - 컨택트
    ========================================================================== */
.contact-section{
    padding: calc(var(--sec-padding-vertical) + 20px) 0; background: url("/assets/site/img/main/contact-section-bg.png") no-repeat center / cover;

    @media (width <= 860px){
        padding: var(--sec-padding-vertical) 0;
    }
}