@charset "utf-8";

/* ============================================
    공통
============================================ */

/* 섹션 */
.sec{
    background-color: var(--black-bg); overflow: hidden;
}

/* 섹션 타이틀 */
.sec-tit{
    --sec-tit-bottom: 85px;
    font-size: 72px; padding: 0 0 var(--sec-tit-bottom);
    & h3{
        font-weight: var(--fwb); letter-spacing: -0.03em; color: #777; line-height: 1.28;
        & span[data-text]{position: relative;}
        & 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;}
        & span[data-color="blue"]:after{color: var(--theme-blue);}
        & br{display: none;}
        &.on{
            & span[data-text]:after{width: 100%;}
        }
    }
    & .sub{padding: 19px 0 0; letter-spacing: -0.03em; font-size: 0.3334em; color: #a6b1bf;}
    & .des{
        display: flex; flex-direction: column; gap: 28px; padding: 82px 0 0; font-size: 16px; color: var(--white);
        & dl{
            & dt{margin: 0 0 3px; color: rgba(255,255,255,0.5);}
        }
    }
    & .des + .des{
        padding: 30px 0 0; margin-top: 30px; border-top: 1px solid rgba(255,255,255,0.4);
    }

    @media (width <= 1600px){
        font-size: clamp(54px,5vw,72px);
    }
    @media (width <= 1280px){
        --sec-tit-bottom: 60px;
    }
    @media (width <= 1024px){
        font-size: clamp(40px,5.5vw,56px);
        & .sub{font-size: 18px;}
        & .des{
            padding: 20px 0 0; gap: 10px; font-size: 15px;
            & dl{
                & dt{margin: 0 0 5px;}
            }
        }
    }
    @media (width <= 860px){
        --sec-tit-bottom: 50px;
        & h3{
            & br{display: block;}
        }
    }
    @media (width <= 640px){
        font-size: 30px;
        & .sub{font-size: 15px;}
    }
}


/* ============================================
    개별 섹션
============================================ */

/* visual */
.sec.visual{
    & .visual-wrap{
        position: relative; width: 100%; height: 100%;
        & .video-frame{
            width: 100%; height: 100%;
            & video{
                width: 100%; height: 100%; object-fit: cover;
            }
            & > img{width: 100%; height: 100%; object-fit: cover;}
            /* ▼▼▼ gif 또는 video 태그 사용 시 위를 덮는 그라디언트 레이어 */
            &:after{content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 18, 18, 0) 50.05%, #121212 92.26%);}

            &:has(iframe){
                position: relative;
                & iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100vw; height: auto; aspect-ratio: 16 / 9; object-fit: cover;}
            }
        }
        & .slogan{
            display: none;
            position: absolute; left: 36px; bottom: 34px;
            & .txt{
                & .line{
                    display: flex; overflow: hidden; align-items: baseline;
                    & .word{
                        display: inline-flex; font-size: 170px; font-weight: var(--fwsb); color: var(--theme-blue); line-height: 1; font-family: 'IBMPlexMono'; letter-spacing: 0.002em;
                        & .f-letter{opacity: 0; transform: translateY(80px);}
                        & .reveal{
                            overflow: hidden; display: inline-block; width: 0;
                            & .text-inner{display: inline-block;}
                        }
                    }
                    & .word + .word{margin-left: 0.315em;}
                }
            }
            & .img{
                & img{}
            }
        }
    }

    /* 고해상도 대응 */
    @media (width > 1980px){
        width: 100%; height: auto !important; aspect-ratio: 16 / 9;
    }

    @media (width <= 1600px){
        height: auto !important; aspect-ratio: 16 / 9;
        & .visual-wrap{
            & .video-frame{
                &:has(iframe){
                    & iframe{width: 100%;}
                }
            }
        }
    }
    @media (width <= 1280px){
        & .visual-wrap{
            & .slogan{
                left: calc(20px - 1vw); bottom: 60px;
                & .txt{
                    & .line{
                        & .word{
                            font-size: 12vw;
                        }
                    }
                }
            }
        }
    }
    @media (width <= 640px){
        /* height: 100svh !important; */
        /* height: 70svh !important; */
        & .visual-wrap{
            & .slogan{
                & .txt{
                    & .line{
                        & .word{
                            font-size: 12vw;
                        }
                    }
                }
            }
        }
    }
}

/* keyword */
.sec.keyword{
    padding: 187px 0 180px;

    @media (width <= 1600px){
        padding: var(--between-sec-gap) 0;
    }
}

/* product */
.sec.product{
    position: relative; background: var(--black-bg) url("/assets/site/img/main/product-bg.png") no-repeat center; padding: 70px 0;
    &:before{content: ""; position: absolute; inset: 0; background: radial-gradient(45.23% 45.23% at 50% 50%, rgba(18, 18, 18, 0) 0%, #121212 100%);}

    & .tab-slider{
        padding: 0 0 0 530px; overflow: hidden;
        & .tab-list{
            position: relative; display: flex; flex-wrap: nowrap; gap: 10px;
            & > li{flex: 0 0 auto;}
            & > li button{position: relative; padding: 0 30px; line-height: 48px; border-radius: 48px; font-weight: var(--fwb); letter-spacing: -0.01em; color: #888; background-color: transparent; transition: 0.1s;}
            & > li button.on{color: #fff;}
            & > li .bar{position: absolute; width: 0; height: 48px; border-radius: 48px; background-color: var(--theme-blue); transition: 0.3s;}
        }
        & .tab-con{
            & .con{
                display: none; color: #fff;
                & .product-slider-wrap{}
            }
            & .con.show{
                display: block;
            }
        }

        @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 <= 640px){
            & .tab-list{
                gap: 0;
                & > li button{line-height: 36px; padding: 0 15px; font-size: 14px;}
                & > li .bar{height: 36px;}
            }
        }
    }

    & .product-main-slider{
        & .list{
            & .item{
                display: flex; gap: 30px; flex-wrap: wrap; color: #fff; padding: 37px 0 0;
                & .img{
                    position: absolute; top: 0; left: -530px;
                    width: 500px; height: auto; aspect-ratio: 1;
                    & img{width: 100%; height: 100%; object-fit: cover; object-fit: contain; opacity: 0;}
                }
                & .txt{
                    & .name{font-size: 36px; font-weight: var(--fwb); letter-spacing: -0.01em; line-height: 1.2;}
                    & .info{
                        display: flex; flex-wrap: wrap; font-weight: var(--fwm); color: #888; padding: 17px 0 0; text-transform: uppercase;
                        & > li + li:before{content: ""; display: inline-block; margin: 0 12px 0; width: 1px; height: 12px; background: #e4e4e4;}
                    }
                    & .btn-list{
                        padding: 76px 0 0;
                    }
                }
            }
            & .item.swiper-slide-active{
                & .img{
                    & img{opacity: 1;}
                }
            }
        }

        @media (width <= 1400px){
            & .list{
                & .item{
                    & .img{
                        top: -16%;
                    }
                }
            }
        }
        @media (width <= 1280px){
            & .list{
                & .item{
                    & .img{
                        top: -16%;
                    }
                }
            }
        }
        @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;
                        }
                    }
                }
            }
        }
        @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;
                            & > li + li:before{margin: 0 6px 0; height: 10px;}
                        }
                        & .btn-list{
                            padding: 30px 0 0;
                        }
                    }
                }
            }
        }
    }

    & .product-sub-slider{
        overflow: hidden; padding: 75px 0 0;
        & .list{
            & .item{
                cursor: pointer; height: auto;
                & .img{
                    display: inline-flex; align-items: center; justify-content: center; width: 100%; height: auto; aspect-ratio: 1 / 1; background: rgba(255,255,255,0.1); border-radius: 12px;
                    transition: 0.1s;
                    & img{width: 52.4%; height: auto; object-fit: cover;}
                }
                &:hover{
                    & .img{
                        box-shadow: inset 0 0 0 1px #555;
                    }
                }
            }
        }

        @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% - 40px)}
                    }
                }
            }
        }
    }

    @media (width <= 1600px){
        padding: var(--between-sec-gap) 0;
    }
}

/* contact */
.sec.contact{
    padding: 130px 0 160px;

    @media (width <= 1600px){
        padding: var(--between-sec-gap) 0 calc(var(--between-sec-gap) * 1.5);
    }
}