@charset "utf-8";

/* ==========================================================================
    LAYOUT
   ========================================================================== */
.main-container {position:relative;}
header {
    &:not(.fixed) {
        .header-inner{border-color: transparent; background-color: transparent;}
        .logo{filter: var(--filter-white); transition: .2s ease-out;}
        .lnb {
            > ul > li > a{color: rgba(255,255,255,.5);}
            > ul > li > a:hover,
            > ul > li > a.on,
            > ul > li > a:hover > span,
            > ul > li > a.on > span{color: rgba(255,255,255,1); text-decoration-color: rgba(255,255,255,1); }
        }
        .menu_all_btn {
            span{background-color: #fff;}
            &.open span{background-color: var(--point-color0101);}
        }
        .ytube{filter: var(--filter-white);}
    }
    &:not(.fixed):has(#sitemapNAV:not(.open)) {
        .select-lang {
            > a{ border-color: rgba(217,217,217,.7);}
            > a::after{filter: brightness(0) saturate(100%) invert(87%) sepia(100%) saturate(0%) hue-rotate(147deg) brightness(96%) contrast(78%); opacity: .4;}
            .lang-code{color: rgba(255,255,255,.9);}
        }
    }
    html[data-region="global"] & {
        &:not(.fixed):has(#sitemapNAV:not(.open)) {
            .select-lang .flag img{filter: var(--filter-white);}
        }
    }
}
/* ==========================================================================
   MAIN VISUAL
========================================================================== */
@keyframes width {
    0%{width: 0;}
    100%{width: 100%;}
}

.main-visual {
    --visual-bottom: 156px;
    --visual-side: 60px;
    --visual-dot-left: 61px;
    --visual-title-size: 152px;
    --visual-progress-side: 230px;
    --visual-dots-bottom: -83px;
    --visual-progress-bottom: -73px;
    --visual-control-bottom: -80px;
    --visual-delay: 15000ms;

    position: relative; height: 100svh; background: #555; overflow: hidden;
    .dash{position: absolute; z-index: 5; inset: 0; background: url("/assets/site/img/main/main-vis-dash.png") no-repeat center / auto 100%; pointer-events: none;}
    .visual-bg {
        position: relative; z-index: 4; width: 100%; height: 100%; overflow: hidden;
        .list{transition-timing-function: initial;}
        .item{position: relative; width: 100%; height: 100%;}
        .img{position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden;}
        .img video{position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.7);}
    }
    .visual-txt {
        position: absolute; z-index: 6; right: 0; bottom: var(--visual-bottom); left: 0;
        pointer-events: none; user-select: none;
        .list{transition-timing-function: initial;}
        .item{width: auto;}
        .txt{display: inline-block; font-size: 50px; color: #fff;}
        .txt .sup{position: relative; display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 17px; line-height: 1;}
        .txt .sup span{display: inline-block; font-family: 'Pretendard', sans-serif; font-size: 18px; font-weight: 700; clip-path: inset(0 100% 0 0); transition: 0.5s 0.5s;}
        .txt .sup em{position: absolute; left: 0; display: inline-block; font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 14px; transition: 0.5s 0.2s;}
        .txt .tit{position: relative; font-family: "helvetica-neue-lt-pro", sans-serif; font-size: var(--visual-title-size); font-weight: 700; line-height: 1; letter-spacing: 0.01em; word-spacing: 0.04em; text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px #fff; text-stroke: 1px #fff;}
        .txt .tit::before{content: attr(data-text); position: absolute; top: 0; left: 0; line-height: inherit; letter-spacing: inherit; word-spacing: inherit; color: #fff; clip-path: inset(0 100% 0 0); transition: clip-path 1s ease 0.3s;}

        .item.swiper-slide-active{padding-left: var(--visual-side);}
        .item.swiper-slide-active .txt .sup span{clip-path: inset(0 0 0 0);}
        .item.swiper-slide-active .txt .sup em{left: 100%; transform: translateX(-100%);}
        .item.swiper-slide-active .txt .tit::before{clip-path: inset(0 0 0 0);}
        .control,
        .dots{pointer-events: auto;}
        .dots {
            position: absolute; z-index: 1; bottom: var(--visual-dots-bottom); left: var(--visual-dot-left); display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 7px; width: auto;
            li{width: auto; height: auto; margin: 0; border: none; border-radius: 0; background: none; opacity: 1;}
            button{position: relative; display: block; width: 20px; height: auto; padding: 0; aspect-ratio: 1; border: none; border-radius: 50%; background: transparent; font-size: 0; cursor: pointer;}
            button::before{content: ""; position: absolute; top: 50%; left: 50%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: #fff; transform: translate(-50%, -50%);}
            button::after{content: ""; position: absolute; inset: 0; border: 1px solid #fff; border-radius: 50%; opacity: 0; transform: scale(0); transition: 0.5s;}
            li.swiper-pagination-bullet-active button::after{opacity: 1; transform: scale(1);}
        }
        .progress {
            position: absolute; z-index: 1; right: var(--visual-progress-side); bottom: var(--visual-progress-bottom); left: var(--visual-progress-side); height: 4px; background-color: #fff; overflow: visible;

            .bar{position: absolute; inset: 0 auto 0 0; width: 0; background-color: var(--point-color01);}
            .bar.play{animation: width var(--visual-delay) linear;}
            .bar.pause{animation-play-state: paused;}
            .ruler{position: absolute; bottom: calc(100% + 18px); display: flex; justify-content: space-between; align-items: flex-end; width: 100%;}
            .scaler{flex: 0 0 auto; width: 1px; height: 6px; background: #fff; opacity: 0.3;}
            .scaler:first-child,
            .scaler:nth-child(17),
            .scaler:last-child{height: 11px; opacity: 1;}
        }
        .control {
            position: absolute; z-index: 2; right: var(--visual-side); bottom: var(--visual-control-bottom);
            display: flex; align-items: center; gap: 22px;
                        .page{display: inline-flex; gap: 0.25em; font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 14px; font-weight: 400; color: #fff;}
            .btn_s{width: 15px; height: 10px; border: none; outline: none; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 100% auto; font-size: 0; cursor: pointer;}
            .btn_s_prev{background-image: url('/assets/site/img/main/main-vis-arr-prev.png');}
            .btn_s_next{background-image: url('/assets/site/img/main/main-vis-arr-next.png');}
        }
    }
    @media (width <= 1720px) {
        .visual-txt {
            .txt{transform: none !important;}
        }
    }
    @media (1420px < width <= 1600px) {
        --visual-bottom: 148px;
        --visual-side: 50px;
        --visual-dot-left: 50px;
        --visual-title-size: 132px;
        --visual-progress-side: 210px;
    }
    @media (1280px < width <= 1420px) {
        --visual-bottom: 140px;
        --visual-side: 40px;
        --visual-dot-left: 40px;
        --visual-title-size: 120px;
        --visual-progress-side: 190px;
    }
    @media (width <= 1280px) {
        --visual-bottom: 140px;
        --visual-side: 40px;
        --visual-dot-left: 40px;
        --visual-title-size: 120px;
        --visual-progress-side: 190px;

        .visual-txt {
            .item{width: 100%;}
            .txt{display: block;}
            .txt .sup{gap: 10px;}
            .txt .sup span{font-size: 16px;}
            .txt .sup em{position: static; order: -1; flex: 0 0 auto; left: auto; transform: none; transition: none;}
            .item.swiper-slide-active .txt .sup em{left: auto; transform: none; margin-top: -2px;}
        }
    }
    @media (width <= 1200px) {
        --visual-title-size: 100px;

        html:lang(vi) & {
            .visual-txt .txt .sup span{font-size: 15px;}
        }
    }
    @media (width <= 1024px) {
        --visual-bottom: 130px;
        --visual-side: 30px;
        --visual-dot-left: 30px;
        --visual-title-size: 85px;
        --visual-progress-side: 150px;
        .visual-txt {
            .txt .sup{gap: 8px; padding-bottom: 14px;}

            .dots{gap: 5px;}
            .dots button{width: 18px;}
            .progress{height: 3px;}
            .progress .ruler{bottom: calc(100% + 14px);}
            .control{gap: 16px;}
        }
        html:lang(de) &,
        html:lang(vi) & {
            .visual-txt .txt .sup span{display: none;}
        }
    }
    @media (width <= 860px) {
        --visual-bottom: 100px;
        --visual-progress-bottom: -55px;
        --visual-side: 24px;
        --visual-title-size: 63px;
        --visual-progress-side: 24px;
        height: clamp(560px, 76svh, 760px);
        .visual-txt {
            .txt .sup{gap: 7px; padding-bottom: 12px;}
            .txt .sup span{font-size: 15px;}
            .txt .sup em{font-size: 13px;}
            .dots,
            .control{display: none;}
            .progress{right: var(--visual-progress-side); left: var(--visual-progress-side);}
            .progress .ruler{bottom: calc(100% + 12px);}
        }
        html:lang(en) &{
            .visual-txt .txt .sup span{display: none;}
        }
    }
    @media (width <= 640px) {
        --visual-bottom: 24px;
        --visual-side: 20px;
        --visual-title-size: 43px;
        --visual-progress-side: 20px;
        --visual-dots-bottom: 8px;
        height: clamp(520px, 85svh, 680px);

        .visual-txt {
            .txt .sup{gap: 0; padding-bottom: 6px;}
            .txt .sup span{display: none; flex: 1 1 0; min-width: 0; font-size: 14px; line-height: 1.25;}
            .txt .sup em{font-weight: bold;}
            .txt .tit{width: min-content; line-height: 1.1;}
            .txt .tit::before{width: 100%;}

            .progress{display: none;}
            .dots{display: flex; left: auto; right: var(--out-gap);}
        }
    }
}

/* ==========================================================================
    MAIN CONTENTS
   ========================================================================== */
.main-sec {
    --big-text: 76px;
    padding: 114px 0;
    .tit-en{font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 14px; font-weight: 700; color: var(--point-color03); line-height: 1; text-transform: uppercase; margin-bottom: 17px; }
    .tit-sec01 {
        position: relative;
        display: flex; justify-content: space-between; align-items: flex-end;
        line-height: 1; margin-bottom: 50px;
        .sub-text{font-size: 18px; font-weight: bold; color: var(--point-color03); margin-bottom: 18px;}
        .section-title{font-family: "helvetica-neue-lt-pro", sans-serif; font-size: var(--big-text); font-weight: bold; color: var(--point-color0102); text-transform: uppercase;}
        .right-util{padding-bottom: 11px;}
        &:has(.sub-nav){justify-content: flex-start; gap: 42px;}
        .sub-nav {
            > ul{display: flex; gap: 5px;}
            .sub-item > a{display: block; padding: 6px 10px; font-size: 20px; font-weight: bold; color: #aaa; text-transform: uppercase; transition: .15s ease-out;}
            .sub-item > a:hover{color: var(--point-color0101);}
        }
    }
    .tit-sec02 {
        text-align: center;
        .title{font-size: 42px; font-weight: 700; color: var(--point-color0102); line-height: 1.23;}
    }
    .btn-more {
        position: relative;
        display: flex; justify-content: space-between; align-items: center;
        width: 164px; height: 44px; padding: 0 17px 0 20px; border: 1px solid rgba(255,255,255,.5);
        font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 12px; font-weight: 700; color: #fff; text-transform: uppercase;
        transition: .2s ease-out;
        &::after{content: ""; display: block; width: 6px; aspect-ratio: 6 / 11; background: url('/assets/site/img/common/arr-topnav.png') no-repeat center / 100% auto; }
        &:hover{color: var(--point-color0102); border: 1px solid rgba(255,255,255,1); background-color: #fff;}
        &:hover::after{background-image: url('/assets/site/img/common/arr-topnav-blue.png');}
        &.fill {
            color: var(--point-color0102); border: 1px solid rgba(255,255,255,1); background-color: #fff;
            &::after{background-image: url('/assets/site/img/common/arr-topnav-blue.png');}
            &:hover{color: #fff; border-color: var(--point-color0102); background-color: var(--point-color0102);}
            &:hover::after{filter: var(--filter-white);}
        }
    }

    html:lang(en) & {
        .tit-sec01 .sub-text{font-size: 17px;}
    }

    @media (width <= 1280px) {
        --big-text: 52px;
        padding: 100px 0;
        .tit-sec01 {
            margin-bottom: 40px;
            .sub-text{font-size: 17px;}
            .right-util{padding-bottom: 8px;}
            &:has(.sub-nav){gap: 30px;}
            .sub-nav {
                > ul{gap: 5px;}
                .sub-item > a{padding: 3px 10px;}
            }
        }
        .tit-sec02 .title{font-size: 38px;}

        html:lang(en) & {
            .tit-sec01 .sub-text{font-size: 16px;}
        }
    }
    @media (width <= 1024px) {
        --big-text: 45px;
        padding: 80px 0;
        .tit-en{font-size: 13px; margin-bottom: 14px;}
        .tit-sec01 {
            margin-bottom: 30px;
            .sub-text{font-size: 16px;}
            .right-util{padding-bottom: 6px;}
            &:has(.sub-nav){gap: 24px;}
            .sub-nav {
                position: relative; top: 2px;
                .sub-item > a{font-size: 18px; padding: 3px 8px;}
            }
        }
        .tit-sec02 {
            .title{font-size: 32px;}
        }

        html:lang(en) & {
            .tit-sec01 .sub-text{font-size: 15px;}
        }
    }
    @media (width <= 860px) {
        --big-text: 42px;
        .tit-sec01 {
            .sub-text{font-size: 15px; margin-bottom: 12px;}
            .right-util{padding-bottom: 0;}
            &:has(.sub-nav){flex-direction: column; align-items: flex-start; gap: 10px;}
            .sub-nav {
                top: auto;
                .sub-item > a{font-size: 16px; padding: 6px;}
                .sub-item:first-child > a{padding-left: 0;}
            }
        }
        .tit-sec02 .title{font-size: 28px;}

        html:lang(en) & {
            .tit-sec01 .sub-text{font-size: 14px;}
        }
    }
    @media (width <= 640px) {
        --big-text: 28px;
        padding: 70px 0;
        .tit-en{margin-bottom: 10px;}
        .tit-sec01 {
            margin-bottom: 24px;
            .sub-text{font-size: 14px;}
        }
        .tit-sec02 {

            .title{font-size: 25px; line-height: 1.35}
        }
        .btn-more{width: 140px; padding: 0 14px;}

        html:lang(en) & {
            .tit-sec01 .sub-text{font-size: 13px;}
        }
    }
}

/*Intro*/
.intro-section {
    padding: 0;
    .intro-inner{display: grid; grid-template-columns: minmax(0, 1060fr) minmax(0, 860fr); min-height: 710px;}
    .intro-copy{position: relative; display: flex; align-items: center; padding: 80px 250px 80px max(var(--out-gap), calc((100vw - var(--main-width)) / 2)); background-color: #e9edf1; overflow: hidden;}
    .copy-inner{position: relative; width: 100%; max-width: 480px;}
    .txt-en{font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 14px; font-weight: 700; color: var(--point-color0101); line-height: 1; text-transform: uppercase; margin-bottom: 33px;}
    .brand-title img{width: 297px;}
    .intro-desc{font-size: 15px; line-height: 24px; letter-spacing: -.025em; margin-top: 29px;}
    .btn-wrap{ margin-top: 50px;}
    .intro-num{position: absolute; top: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; width: max-content; pointer-events: none;}
    .intro-one{flex: 0 0 271px; height: 100%; background: url('/assets/site/img/main/intro-num.svg') no-repeat right center / auto 100%;}
    .precision{position: relative; font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 148px; font-weight: 700; color: #fff; line-height: 1; white-space: nowrap; margin-right: -55px; margin-bottom: -4px;}
    .intro-note{position: absolute; right: 46px; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 8px; font-weight: 400; color: #c4cbd2; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase;}
    .intro-img{position: relative; overflow: hidden; background-color: #222;}
    .intro-img video{width: 100%; height: 100%; object-fit: cover;}

    .copy-inner{opacity: 0; translate: 0 20px; transition: opacity .7s ease-out, translate .7s ease-out;}
    .intro-num{opacity: 0; translate: 15%; transition: opacity .8s .25s ease-out, translate .8s .25s ease-out;}
    &.is-visible {
        .copy-inner{opacity: 1; translate: 0;}
        .intro-num{opacity: 1; translate: 0;}
    }

    html:lang(ko) & {
        .copy-inner {text-align: justify;}
    }

    @media (width <= 1420px) {
        .intro-inner{min-height: 650px;}
        .copy-inner{max-width: 400px;}
        .precision{font-size: 130px; margin-right: -75px;}
        .intro-note{right: 37px;}
    }
    @media (width > 1024px) and (width <= 1280px) {
        .intro-inner{grid-template-columns: minmax(0, 51fr) minmax(0, 49fr); min-height: 430px;}
        .intro-copy{padding: 70px 180px 70px var(--out-gap);}
        .copy-inner{max-width: 100%; text-align: left;}
        .txt-en{font-size: 13px; margin-bottom: 25px;}
        .brand-title img{width: 220px;}
        .intro-desc{margin-top: 28px; line-height: 1.65;}
        .btn-wrap{margin-top: 30px;}
        .intro-num {
            right: -18px;
            .intro-one{flex-basis: 200px;}
            .precision{font-size: 94px; margin-right: -52px;}
        }
        .intro-note{display: none;}
    }

    @media (width <= 1024px) {
        .intro-inner{grid-template-columns: 1fr; min-height: 0;}
        .precision{font-size: 120px; margin-right: -115px;}
        .intro-note{display: none;}
    }

    @media (width <= 860px) {
        .intro-copy{padding: 70px 220px 70px var(--out-gap);}
        .copy-inner{max-width: 100%; text-align: left;}
        .txt-en{font-size: 13px; margin-bottom: 25px;}
        .brand-title img{width: 220px;}
        .intro-desc{margin-top: 28px; line-height: 1.65;}
        .btn-wrap{margin-top: 35px;}
        .intro-num {
            .intro-one{flex-basis: 200px;}
            .precision{font-size: 100px; margin-right: -52px;}
        }
    }
    @media (width <= 640px) {
        .intro-copy{padding: 70px var(--out-gap);}
        .copy-inner{z-index: 2;}
        .txt-en{margin-bottom: 20px;}
        .brand-title img{width: 152px;}
        .btn-wrap{margin-top: 30px;}
        .intro-num {
            width: 340px; right: -65px; opacity: .55; mix-blend-mode: soft-light;
            .precision{font-size: 80px; margin-right: -62px;}
        }
        .intro-desc{padding-right: 35px;}
        .intro-img{height: 260px;}
    }
}

/*Machine Lineup*/
.lineup-section {
    --lineup-gap: 20px;
    --lineup-height: 780px;
    --lineup-close: 438px;
    --lineup-bg: linear-gradient(180deg, #e9ecef 0%, #e9ecef 38%, #f8f9fa 100%);
    --lineup-img: 760px;
    --fold-img: 400px;
    --lineup-time: .5s;

    .lineup-list{display: flex; gap: var(--lineup-gap); height: var(--lineup-height);}
    /* 패널 */
    .lineup-item {
        position: relative; display: flex; flex-direction: column; flex: 0 0 var(--lineup-close); min-width: 0; overflow: hidden;
        border-radius: var(--radius01); background: var(--lineup-bg); box-shadow: 0 8px 20px rgba(15,35,70,.05);
        transition: flex-grow var(--lineup-time) cubic-bezier(.22,.61,.36,1), flex-basis var(--lineup-time) cubic-bezier(.22,.61,.36,1), border-color .3s, box-shadow .3s;
        /* 활성 패널 */
        &.is-active {
            flex: 1 1 0;
            border: 1px solid var(--point-color0101); background: var(--bg-color); box-shadow: 0 24px 45px rgba(15,35,70,.36);
            .lineup-toggle{position: absolute; top: 0; left: 0; width: auto; padding: 48px 50px;}
            .lineup-num{font-size: 16px; color: var(--point-color0101);}
            .lineup-name{display: none;}
            .lineup-fold{opacity: 0; visibility: hidden; transition: opacity .12s, visibility 0s .12s;}
            .lineup-detail{opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .2s ease-out, visibility 0s;}
        }
    }
    /* 패널 버튼 */
    .lineup-toggle{position: relative; z-index: 5; display: block; flex: 0 0 auto; width: 100%; padding: 46px 14px 5px; border: 0; font-family: "helvetica-neue-lt-pro", sans-serif; text-align: center; background: transparent; cursor: pointer;}
    .lineup-num{display: block; font-size: 56px; font-weight: 700; line-height: 1; color: #fff;}
    .lineup-num .m-name{display: none;}
    .lineup-name{display: block; min-height: 42px; font-size: 16px; font-weight: 700; line-height: 21px; color: var(--basic-color); white-space: normal; text-transform: uppercase; margin-top: 16px;}

    /* 닫힌 패널 */
    .lineup-fold {
        position: relative; flex: 1; min-height: 0; padding: 0 50px;
        opacity: 1; visibility: visible; pointer-events: none;
        transition: opacity .16s, visibility 0s;
        .lineup-sub{position: relative; padding: 24px 0 0; border-top: 1px solid #d0d3d5; font-size: 15px; line-height: 22px; color: #999; text-align: center;}
        .lineup-sub span{display: block;}
        .lineup-sub span:not(:last-child){margin-bottom: 12px;}
        .lineup-thumb{position: absolute; inset: 0; overflow: hidden;}
        .lineup-thumb img{position: absolute; left: 50%; bottom: 0; translate: -50%; width: var(--fold-img); max-width: none; aspect-ratio: 988 / 656; object-fit: contain;}
    }
    /* 열린 패널 */
    .lineup-detail {
        position: absolute; inset: 0;
        display: flex; flex-direction: column;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .18s, visibility 0s .18s;
        .vis-wrap{position: relative; overflow: hidden;}
        .vis-wrap::before{content: ""; position: absolute; top: -200px; left: 50%; translate: -50%; width: 841px; height: 1100px; background: url('/assets/site/img/main/gray-line.png') no-repeat 0 0 / 100% auto;}
        .lineup-visual{position: relative; width: var(--lineup-img); max-width: none; aspect-ratio: 988 / 656; margin: 0 auto;}
        .lineup-visual img{display: block; width: 100%; height: 100%; object-fit: contain;}
        .info-wrap{flex: 1; display: flex; flex-direction: column; padding: 0 50px 43px;}
        .lineup-title{position: relative; text-align: center; border-top: 1px solid var(--border-color); padding-top: 35px;}
        .lineup-title span{display: block; font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 12px; font-weight: 500; line-height: 1.4; color: #ddd; text-transform: uppercase; margin-bottom: 2px;}
        .lineup-title strong{display: block; font-size: 36px; font-weight: 700; line-height: 1.3; color: var(--basic-color);}
        .prod-subcate{position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 22px;}
        .subcate-link{display: flex; align-items: center; min-height: 52px; padding: 5px 29px; border: 1px solid var(--basic-color); border-radius: 26px; font-size: 16px; font-weight: bold; line-height: 20px; background-color: #fff; transition: .2s ease-out;}
        .subcate-link:hover{border-color: var(--point-color0101); color: #fff; background-color: var(--point-color0101);}
        .lineup-desc{position: relative; font-size: 14px; font-weight: 500; line-height: 22px; color: #888; text-align: center; margin-top: auto;}
    }
    /* 기존 열린 본문 숨김 */
    &.is-hiding {
        .lineup-item.is-active .lineup-detail{opacity: 0; pointer-events: none; transition: opacity .08s;}
    }
    /* 패널 전환 중 */
    &.is-moving {
        .lineup-item.is-active .lineup-detail{opacity: 0; visibility: hidden; pointer-events: none; transition: none;}
    }

    .tit-sec01{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .lineup-list{opacity: 0; translate: 0 20px; transition: opacity .6s .2s ease-out, translate .6s .2s ease-out;}

    &.is-visible {
        .tit-sec01{opacity: 1; translate: 0;}
        .lineup-list{opacity: 1; translate: 0;}
    }

    html:lang(en) & {
        .lineup-detail .lineup-title span {display: none;}
    }
    @media (width > 1720px) {
        html:lang(en) &,
        html:lang(de) & {
            --lineup-height: 840px;
        }
    }
    @media (width <= 1720px) {
        --lineup-height: 760px;
        --lineup-close: 380px;
        --lineup-img: 670px;
        --fold-img: 374px;

        .lineup-item {
            &.is-active {
                .lineup-toggle{padding: 38px 40px}
            }
        }
        .lineup-fold{
            padding: 0 40px;
            .lineup-sub{line-height: 20px;}
            .lineup-sub span:not(:last-child){margin-bottom: 10px;}
        }
        .lineup-detail {
            .info-wrap{padding: 0 40px 36px;}
            .lineup-title strong{font-size: 32px;}
            .prod-subcate{margin-top: 20px;}
            .subcate-link{min-height: 46px; padding: 5px 24px; font-size: 15px;}
        }
    }
    @media (width <= 1420px) {
        --lineup-height: 704px;
        --lineup-close: 350px;
        --lineup-img: 580px;
        --fold-img: 328px;
        .lineup-detail {
            .lineup-title strong{font-size: 30px;}
            .prod-subcate{gap: 8px;}
        }
    }
    @media (width <= 1280px) {
        --lineup-height: 670px;
        --lineup-close: 330px;
        --lineup-img: 520px;
        --fold-img: 316px;

        .lineup-num{font-size: 50px;}
        .lineup-name{font-size: 15px;}
        .lineup-detail {
            .lineup-title span{font-size: 11px;}
            .lineup-title strong{font-size: 28px;}
            .subcate-link{min-height: 42px; padding: 4px 20px; font-size: 15px;}
        }
    }

    @media (width <= 1200px) {
        --lineup-gap: 0;
        --lineup-height: auto;
        --fold-img: 250px;
        --row-height: 150px;
        --thumb-width: 180px;
        --mobile-time: .52s;
        .tit-sec01 {
            margin-bottom: 60px;
            .right-util{width: 280px;}
            .searchbar01{width: 100%;}
        }
        .lineup-list{display: block; height: auto; border-top: 1px solid var(--border-color);}
        .lineup-item {
            display: block; width: 100%; min-height: var(--row-height); overflow: hidden; border: 0; border-bottom: 1px solid var(--border-color); border-radius: 0; background: var(--bg-color); box-shadow: none; transition: none;
            .lineup-toggle{position: relative; z-index: 5; display: block; width: 100%; height: var(--row-height); padding: 18px calc(var(--thumb-width) + 20px) 18px 20px; text-align: left;}
            .lineup-num{display: flex; gap: 12px;}
            .lineup-num i{position: relative; top: 1px; font-size: 19px; font-weight: 500; line-height: 1; color: #d5d8dc;}
            .lineup-num .m-name{display: block; font-size: 28px; font-weight: bold; color: var(--basic-color);}
            .lineup-name{position: relative; left: 34px; display: block; width: 100%; min-height: 0; margin: 12px 0 0; font-size: 18px; font-weight: 600; color: #ccc; line-height: 1.35;}
            .lineup-fold{position: absolute; z-index: 2; inset: 0 0 auto; display: block; height: var(--row-height); padding: 0; opacity: 1; visibility: visible; pointer-events: none; transition: none;}
            &.is-active {
                border: 0; background: var(--lineup-bg); box-shadow: none;
                .lineup-toggle{position: relative; top: auto; left: auto; width: 100%; height: var(--row-height); padding: 18px calc(var(--thumb-width) + 20px) 18px 20px;}
                .lineup-num i{color: var(--basic-color);}
                .lineup-name{display: block; color: #aaa;}
                .lineup-fold{opacity: 1; visibility: visible; transition: none;}
                .lineup-detail{max-height: 1000px; padding: 10px 20px 32px; opacity: 1; visibility: visible; pointer-events: auto; transition: max-height var(--mobile-time) ease, padding .42s ease, opacity .3s ease, visibility 0s;}
            }
        }
        /* 닫힌 패널 */
        .lineup-fold {
            .lineup-sub{display: none;}
            .lineup-thumb{position: absolute; inset: 0 20px auto auto; width: var(--thumb-width); height: var(--row-height);}
            .lineup-thumb img{bottom: 50%; translate: -50% 50%; width: var(--fold-img);}
        }
        /* 열린 패널 */
        .lineup-detail {
            position: relative; inset: auto;
            display: block; max-height: 0; padding: 0 20px; overflow: hidden;
            opacity: 0; visibility: hidden; pointer-events: none;
            transition: max-height var(--mobile-time) ease, padding .42s ease, opacity .3s ease, visibility 0s var(--mobile-time);
            .vis-wrap{display: none;}
            .info-wrap{display: block; padding: 0;}
            .lineup-title{display: none;}
            .prod-subcate{justify-content: flex-start; gap: 6px; margin-top: 0;}
            .subcate-link{min-height: 38px; padding: 4px 18px; font-size: 14px;}
            .lineup-desc{margin-top: 22px; text-align: left;}
        }

        html:lang(en) & {
            .lineup-item .lineup-name {display: none;}
        }
    }
    @media (width <= 1024px) {
        --fold-img: 220px;
        --thumb-width: 170px;
    }
    @media (width <= 860px) {
        --fold-img: 200px;
        --row-height: 140px;
        --thumb-width: 160px;
        .tit-sec01 {
            flex-direction: column; justify-content: center; align-items: center; gap: 14px;
            .right-util{width: 370px;}
            .searchbar01 .search-input{font-size: 17px;}
        }
        .lineup-item {
            .lineup-toggle{padding: 18px calc(var(--thumb-width) + 20px) 18px 20px;}
            .lineup-num i{font-size: 17px; font-weight: bold;}
            .lineup-num .m-name{font-size: 24px;}
            .lineup-name{font-size: 16px; margin: 10px 0 0;}
            &.is-active {
                .lineup-toggle{padding: 18px calc(var(--thumb-width) + 20px) 18px 20px;}
            }
        }
    }
    @media (width <= 640px) {
        --fold-img: 120px;
        --row-height: 120px;
        --thumb-width: var(--fold-img);
        .tit-sec01 {
            form{width: 100%;}
            .right-util{width: 100%;}
            .searchbar01 .search-input{font-size: 16px;}
        }
        .lineup-item {
            .lineup-toggle{padding: 10px 20px;}
            .lineup-num{gap: 8px;}
            .lineup-num .m-name{font-size: 22px;}
            .lineup-name{left: 28px; font-size: 15px; margin: 8px 0 0;}
            &.is-active {
                .lineup-toggle{padding: 10px 20px;}
                .lineup-detail{ padding: 0;}
                .info-wrap{padding: 0 20px 26px;}
            }
        }
        .lineup-fold {
            .lineup-thumb{display: none;}
        }
        .lineup-detail{
            .vis-wrap{display: block; margin-top: -10px;}
            .lineup-visual{width: 100%;}
            .subcate-link{min-height: 36px; padding: 7px 10px; font-size: 14px;}
        }
        html:lang(en) & {
            .lineup-fold {
                .lineup-thumb{display: block; inset: 0 0 auto auto;}
            }
        }
    }
}

/*Solution*/
.solution-section {
    --global-thumb-height: 265px;
    background-color: #f8f9fa;
    .solution-list{display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;}
    .solution-item {
        .solution-inner{position: relative; display: block; aspect-ratio: 584 / 750; border-radius: var(--radius01); overflow: hidden; color: #fff; background-color: #222;}
        .thumb{position: absolute; inset: 0;}
        .thumb::after{content: ""; position: absolute; inset: 0; display: block; background-color: rgba(0,50,160,0); pointer-events: none; transition: .2s ease-out;}
        .thumb img{display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .25s ease-out;}
        .side-num{position: absolute; top: 45px; left: 40px; writing-mode: vertical-rl; text-orientation: mixed;}
        .num{font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: .08em; text-transform: uppercase; opacity: .5;}
        .info{position: absolute; bottom: 0; width: 100%; padding: 40px; z-index: 2;}
        .info .num{display: none; margin-bottom: 8px;}
        .title{font-size: 22px; font-weight: bold; line-height: 1.35; padding-top: 27px; border-top: 1px solid transparent;}
        .desc{font-size: 15px; color: rgba(255,255,255,.7); line-height: 22px; letter-spacing: -0.025em; margin-top: 8px; }
        .subcate{position: absolute; top: 0; right: 30px; translate: 0 -100%; display: none; flex-direction: column; gap: 10px;}
        .subcate-link {display:flex; justify-content: center; align-items:center; height: 52px; padding: 0 26px; border: 1px solid rgba(255,255,255,.5); border-radius: 26px; font-size: 15px; font-weight: bold; color: #fff; text-align: center; white-space: nowrap;}
        .subcate-link:hover{color: var(--point-color0101); border-color: #fff; background-color:#fff;}
        .solution-inner:hover {
            .thumb::after{background-color: rgba(0,50,160,.8);}
            .thumb img{transform: scale(1.05);}
            .title{border-color: rgba(255,255,255,.2);}
            .subcate{display: flex;}
        }
    }
    /*글로벌*/
    .global-solution-list{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--main-gap); display: none;}
    .global-solution-item {
        min-width: 0;
        .solution-inner{display: flex; flex-direction: column; height: 100%; border: 1px solid transparent; border-radius: var(--radius01); background-color: #eef1f4; box-shadow: 0 0 0 rgba(15,35,70,0); overflow: hidden; transition: border-color .25s ease-out, background-color .25s ease-out, box-shadow .25s ease-out;}
        .thumb{display: flex; justify-content: center; align-items: center; height: var(--global-thumb-height);}
        .thumb img{display: block; width: 100%; height: 100%; object-fit: contain;}
        .info{flex: 1; padding: 0 34px 70px;}
        .info::before{content: ""; display: block; width: 100%; height: 1px; margin-bottom: 31px; background-color: #dae0e6;}
        .num{font-size: 12px; font-weight: 700; line-height: 1; color: #bbb; text-transform: uppercase; margin-bottom: 8px;}
        .title{font-size: 28px; font-weight: bold; line-height: 1.1; color: var(--basic-color);}
        .desc{font-size: 14px; line-height: 20px; color: #777; margin-top: 17px;}

        @media (hover: hover) and (pointer: fine) {
            .solution-inner:hover{border-color: var(--point-color01); background-color: #fff; box-shadow: 0 20px 35px rgba(15,35,70,.18);}
        }
    }

    .tit-sec01{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .solution-item,
    .global-solution-item{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .solution-item:nth-child(1),
    .global-solution-item:nth-child(1){transition-delay: .2s;}
    .solution-item:nth-child(2),
    .global-solution-item:nth-child(2){transition-delay: .4s;}
    .solution-item:nth-child(3),
    .global-solution-item:nth-child(3){transition-delay: .6s;}
    .global-solution-item:nth-child(4){transition-delay: .8s;}

    &.is-visible {
        .tit-sec01{opacity: 1; translate: 0;}
        .solution-item,
        .global-solution-item{opacity: 1; translate: 0;}
    }

    html[data-region="us-eu"] &,
    html:lang(cn) &,
    html:lang(de) &,
    html:lang(vi) & {
        .solution-list{display: none;}
        .global-solution-list{display: grid;}
    }
    html:lang(de) & {
        .global-solution-item .title{font-size: 26px;}
    }

    @media (width <= 1640px) {
        --global-thumb-height: 240px;
        .global-solution-item {
            .info{flex: 1; padding: 0 20px 55px;}
            .title{font-size: 23px;}
        }
        html:lang(de) & {
            .global-solution-item .title{font-size: 22px;}
        }
    }
    @media (width <= 1420px) {
        .solution-item {
            .side-num{top: 33px; left: 30px;}
            .info{padding: 30px;}
            .subcate{gap: 8px;}
            .subcate-link{height: 48px; font-size: 14px;}
        }
    }
    @media (width <= 1280px) {
        --global-thumb-height: 188px;
        .solution-list{gap: 20px;}
        .solution-item {
            .solution-inner{aspect-ratio: auto; height: 430px;}
            .side-num{top: 26px; left: 24px;}
            .info{padding: 24px;}
            .title{font-size: 20px; padding-top: 24px;}
            .desc{margin-top: 6px;}
            .subcate-link{height: 42px; padding: 0 16px;}
        }
        .global-solution-item {
            .info{padding: 0 20px 50px;}
            .num{font-size: 11px;}
            .title{font-size: 21px;}
        }
        html:lang(de) & {
            .global-solution-item .title{font-size: 20px;}
        }
    }
    @media (width <= 1200px) {
        --global-thumb-height: 260px;
        .global-solution-list{ grid-template-columns: repeat(2, minmax(0, 1fr));}
    }
    @media (width <= 1024px) {
        --global-thumb-height: 230px;
        .solution-list{grid-template-columns: 1fr;}
        .solution-item {
            .solution-inner{aspect-ratio: 100 / 35; height: auto}
            .solution-inner::after{content: ""; position: absolute; z-index: 1; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.05) 20%, rgba(0,0,0,.65) 100%); transition: .3s ease-out;}
            .side-num{display: none;}
            .title{font-size: 22px; padding-top: 18px;}
            .subcate{flex-direction: row; justify-content: flex-end; top: 5px;}
            .subcate-link{min-width: 80px; padding: 0 24px;}
        }
    }
    @media (width <= 860px) {
        --global-thumb-height: 190px;
        .solution-item {
            .solution-inner{aspect-ratio: 100 / 48; }
            .title{font-size: 20px;}
            .info{padding: 20px;}
            .subcate{flex-wrap: wrap; gap: 8px;}
            .subcate-link{min-width: 72px; height: 42px; padding: 0 20px;}
        }
        .global-solution-item {
            .info{padding: 0 20px 40px;}
            .title{font-size: 19px;}
        }
    }
    @media (width <= 640px) {
        --global-thumb-height: 190px;
        .solution-item {
            .solution-inner{aspect-ratio: auto; height: 290px;}
            .info .num{opacity: .7}
            .desc{font-size: 14px;;}
            .subcate{right: 20px; justify-content: flex-end; align-items: flex-end;}
            .subcate-link{height: 40px;}
        }
        .global-solution-list{ grid-template-columns: 1fr;}
        .global-solution-item {
            .desc{margin-top: 12px;}
        }

        html:lang(en) & {
            .solution-item {
                .solution-inner{height: 310px;}
            }
        }
    }
}

/*캐로셀 공통*/
.carousel-sec {
    .carousel-nav{position: relative; top: -11px; display: flex; gap: 10px; margin-left: auto;}
    .carousel-nav button{position: relative; display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border: 1px solid var(--border-color); border-radius: 50%; font-size: 0; background-color: #fff; transition: .2s ease-out;}
    .carousel-nav button::before{content: "";display: block; width: 12px; aspect-ratio: 12 / 8; background: url('/assets/site/img/common/arr02.png') no-repeat center / 100% auto;}
    .carousel-next::before{rotate: 180deg;}
    .carousel-nav button:hover{border-color: var(--point-color0101); background-color: var(--point-color0101);}
    .carousel-nav button:hover::before{filter: var(--filter-white);}
    .carousel-nav .swiper-button-disabled{border-color: #dadada; background-color: #dadada; opacity: .3; pointer-events: none;}
    .carousel{overflow: visible;}
    .gallery-link{display: block; height: 100%;}
    @media (width <= 1280px) {
        .carousel-nav{top: -8px;}
        .carousel-nav button{width: 48px; height: 48px;}
    }
    @media (width <= 1024px) {
        .carousel-nav{top: -6px;}
    }
    @media (width <= 860px) {
        .carousel-nav{position: absolute; top: auto; bottom: 10px; right: 0;}
    }
    @media (width <= 640px) {
        .carousel-nav{display: none;}
    }
}
/*Global Pulse*/
.pulse-section {
    --pulse-offset: 50px;
    --pulse-range: 0px;
    --pulse-left-y: 0px;
    --pulse-right-y: 0px;
    --pulse-bg-y: 0px;
    --pulse-top: 90px;
    position: relative; overflow: hidden;
    background: url('/assets/site/img/main/m-pulse-bg.webp') no-repeat center / cover;
    .pulse-sticky{position: relative;}
    .tit-sec01 {
        .section-title{color: #fff;}
        .sub-text{display: none; color: rgba(255,255,255,.8); line-height: 1.43; margin: 7px 0 0;}
        .btn-wrap{display: none; margin-top: 34px;}
    }
    .board-gallery {
        display: flex; grid-gap: initial;
        .gallery-item{width: 320px; height: 400px;}
        .gallery-thumb{position: relative; z-index: 1; height: 200px;}
        .gallery-cate{color: rgba(255,255,255,.5);}
        .gallery-info{position: relative; top: -1px; background-color: rgba(255, 255, 255, .1); border: 0; border-top: 0; backdrop-filter: blur(10px); transition: .2s ease-out;}
        .gallery-title .title-wrap{-webkit-line-clamp: 3;}
        .gallery-title .title{font-size: 20px; font-weight: 600; color: #fff; line-height: 28px;}
        .gallery-source,
        .gallery-date{color: rgba(255,255,255,.55);}
        .is-press .gallery-info{background-image: url('/assets/site/img/board/arr-rightup.png')}
        .gallery-item > a:hover {
            .gallery-thumb::before,
            .gallery-thumb::before{display: none;}
            .gallery-thumb img,
            .gallery-thumb img{transform: none;}
        }
        @media (hover: hover) and (pointer: fine) {
            .gallery-item > a:hover {
                .gallery-info{background-color: #fff; backdrop-filter: none;}
                .gallery-title .title{color: var(--basic-color);}
                .gallery-cate{color: var(--point-color0101);}
                .gallery-desc{color: var(--gray-color);}
                .gallery-source,
                .gallery-date{color: rgba(0,0,0,.55);}
            }
            .is-press > a:hover .gallery-info{background-image: url('/assets/site/img/board/arr-rightup-black.png')}
        }
    }
    .tit-sec01{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}

    &.is-visible {
        .tit-sec01{opacity: 1; translate: 0;}
    }

    @media (width > 640px) {
        .board-gallery {
            .gallery-item{width: 360px; height: 420px;}
        }
    }
    html:lang(ko) & {
        /*PC*/
        @media (width > 1024px) {
            height: calc(100svh + var(--pulse-range)); padding: 0; overflow: clip;
            background: none;
            .tit-sec01 {
                .sub-text,
                .btn-wrap{display: block;}
            }
            .pulse-sticky{position: sticky; top: 0; height: 100svh; overflow: hidden;}
            .pulse-sticky::before{content: ""; position: absolute; inset: -60px 0; background: url('/assets/site/img/main/m-pulse-bg.webp') no-repeat center / cover; transform: translate3d(0, var(--pulse-bg-y), 0); pointer-events: none; will-change: transform; backface-visibility: hidden;}
            .pulse-inner{position: relative; display: grid; grid-template-columns: 320px 740px; justify-content: space-between; align-items: start; height: 100%; padding-block: 140px; box-sizing: border-box; gap: clamp(50px, 7vw, 120px);}
            .carousel-nav{display: none;}
            .board-gallery {
                display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;
                padding: var(--pulse-top) 0 var(--pulse-offset); transform: none !important; transition: none !important;
                .gallery-item{width: auto !important; height: 420px; margin-right: 0 !important; will-change: transform; backface-visibility: hidden;}
                .gallery-item:nth-child(odd){transform: translate3d(0, var(--pulse-left-y), 0);}
                .gallery-item:nth-child(even){transform: translate3d(0, calc(var(--pulse-right-y) - var(--pulse-offset)), 0);}
                .gallery-thumb{height: 210px;}

            }
        }

        @media (width > 1024px) and (width <= 1280px) {
            --pulse-offset: 50px;
            --pulse-top: 70px;
            .pulse-inner{grid-template-columns: 260px 620px; gap: 40px; padding-block: 110px;}
            .board-gallery {
                .gallery-item{height: 390px;}
                .gallery-thumb{height: 190px;}
            }
        }
        @media (width > 1280px) {
            .board-gallery {
                .gallery-info{padding: 40px;}
                .gallery-title .title{font-size: 22px;}
            }
        }
    }
}

/*Company*/
.company-section {
    --company-height: 320px;
    --company-height-ko: 510px;
    padding: 138px 0 140px;
    .tit-sec02{margin-bottom: 68px;}
    .company-list{display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px;}
    .company-item {
        > a{position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: var(--company-height); padding: 31px 39px 32px; border: 1px solid var(--point-color0103); border-radius: var(--radius01); color: var(--point-color0103); transition: .2s ease-out;}
        > a::after{content: ""; display: block; position:absolute; top: 39px; right: 39px; width: 23px; aspect-ratio: 23 / 22; background: url('/assets/site/img/common/arr-rightup.png') no-repeat 0 0 / 100% auto; transition: .2s ease-out;}
        .company-title .title{font-family: "helvetica-neue-lt-pro", sans-serif; font-size: 72px; font-weight: bold; line-height: .96;}
        .company-title .stit{font-size: 24px; font-weight: bold; line-height: 1; margin-top: 10px; }
        .company-desc{font-size: 16px; font-weight: bold; line-height: 24px; letter-spacing: -0.025em}
        > a:hover{color: #fff; background-color: var(--point-color0103);}
        > a:hover::after{filter: var(--filter-white); rotate: 180deg;}
    }
    .tit-sec02{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .company-item{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .company-item:nth-child(1){transition-delay: .2s;}
    .company-item:nth-child(2){transition-delay: .3s;}
    .company-item:nth-child(3){transition-delay: .4s;}

    &.is-visible {
        .tit-sec02{opacity: 1; translate: 0;}
        .company-item{opacity: 1; translate: 0;}
    }
    html:lang(ko) & {
        .company-list{grid-template-columns: repeat(3, minmax(0, 1fr));}
        .company-item {
            > a{min-height: var(--company-height-ko);}
        }
    }
    html:lang(en) &,
    html:lang(de) & {
        .company-item .company-title .stit{display: none;}
    }
    html:lang(cn) & {
        --company-height: 280px;
    }

    @media (width <= 1720px) {
        --company-height-ko: 470px;
        .company-item {
            .company-title .title{font-size: 64px;}
            .company-title .stit{font-size: 23px;}
        }
    }
    @media (width <= 1540px) {
        --company-height: 300px;
        --company-height-ko: 438px;
        .company-item {
            > a{padding: 25px 30px 26px;}
            > a::after{top: 30px; right: 30px;}
            .company-title .title{font-size: 57px;}
            .company-title .stit{font-size: 22px;}
        }
    }
    @media (width <= 1420px) {
        --company-height: 310px;
        --company-height-ko: 428px;
        .company-item {
            > a::after{width: 20px;}
            .company-title .title{font-size: 50px;}
            .company-title .stit{font-size: 20px;}
        }
        html:lang(cn) & {
            --company-height: 250px;
        }
    }
    @media (width <= 1200px) {
        --company-height-ko: 350px;
        padding: 110px 0;
        .company-list{gap: 20px;}
        .company-item {
            > a{padding: 20px 24px;}
            > a::after{display: none;}
            .company-title .title{font-size: 40px;}
            .company-title .stit{font-size: 19px;}
            .company-desc{font-size: 15px; line-height: 23px;}
        }
        html:lang(cn) & {
            --company-height: 220px;
        }
    }
    @media (width <= 1024px) {
        --company-height: 360px;
        --company-height-ko: 288px;
        padding: 100px 0;
        .tit-sec02{margin-bottom: 60px;}
        .company-item {
            > a::after{display: block;}
            .company-title .title{font-size: 38px; padding-right: 20px;}
            .company-desc{font-size: 16px; line-height: 24px;}
        }
        html:lang(ko) & {
            .company-list{grid-template-columns: repeat(2, minmax(0, 1fr));}
            .company-item:last-child{grid-column: 1 / -1;}
        }
        html:lang(cn) & {
            --company-height: 246px;
        }
    }
    @media (width <= 860px) {
        --company-height: 0;
        --company-height-ko: var(--company-height);
        padding: 90px 0;
        .company-list{grid-template-columns: 1fr;}
        .company-item {
            > a{height: auto;}
            > a::after{width: 18px;}
            .company-title{margin-bottom: 40px;}
            .company-title .title{font-size: 32px;}
            .company-title .title br{display: none;}
            .company-title .stit{font-size: 18px;}
        }
        html:lang(ko) & {
            .company-list{grid-template-columns: 1fr;}
            .company-item {
                &:last-child{grid-column: auto;}
            }
        }
        html:lang(cn) & {
            --company-height: 0;
        }
    }

    @media (width <= 640px) {
        padding: 80px 0;
        .tit-sec02{margin-bottom: 40px;}
        .company-item {
            > a{padding: 24px 20px;}
            > a::after{top: 24px; right: 24px;}
            .company-title{margin-bottom: 40px;}
            .company-title .title{font-size: 27px;}
            .company-title .stit{font-size: 16px;}
            .company-desc{font-size: 15px; line-height: 23px;}
        }
    }
}

/*Support*/
.support-section {
    position: relative; height: 100dvh; padding: 128px 0; color: #fff;
    .bg-img{position:absolute; inset: 0; pointer-events: none;}
    .section-inner{position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 100%;}
    .tit-sec02 .title{color: #fff;}
    .box-list{display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;}
    .box-item {
        > a {position: relative; display: block; height: 203px; padding: 27px 30px; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius01); color: #fff; background-color: rgba(0,25,100,.12); backdrop-filter: blur(7px); transition: .2s ease-out;}
        > a::after{content: ""; position: absolute; right: 26px; bottom: 27px; display: block; width: 62px; aspect-ratio: 1; background-repeat: no-repeat; background-position: center; background-size: contain;}
        .box-title{display: block; font-size: 24px; font-weight: 700; line-height: 1.3;}
        .txt-en{display: block; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.3); line-height: 1; text-transform: uppercase; margin-top: 7px; }
        &.box01 > a::after{background-image: url('/assets/site/img/main/m-support-ico-01.png'); background-size: 44px auto;}
        &.box02 > a::after{background-image: url('/assets/site/img/main/m-support-ico-02.png'); background-size: 58px auto;}
        &.box03 > a::after{background-image: url('/assets/site/img/main/m-support-ico-03.png'); background-size: 56px auto;}
        &.box04 > a::after{background-image: url('/assets/site/img/main/m-support-ico-04.png'); background-size: 56px auto;}
        > a:hover{border-color: #fff; color: var(--point-color0101); background-color: #fff; backdrop-filter: none;}
        > a:hover .txt-en{color: var(--point-color0101);}
        > a:hover::after{filter: brightness(0) saturate(100%) invert(21%) sepia(87%) saturate(2850%) hue-rotate(223deg) brightness(71%) contrast(125%);}
    }

    .tit-sec02{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .box-item{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .box-item:nth-child(1){transition-delay: .2s;}
    .box-item:nth-child(2){transition-delay: .28s;}
    .box-item:nth-child(3){transition-delay: .36s;}
    .box-item:nth-child(4){transition-delay: .44s;}

    &.is-visible {
        .tit-sec02{opacity: 1; translate: 0;}
        .box-item{opacity: 1; translate: 0;}
    }
    html:lang(en) &,
    html:lang(de) & {
        .box-item .txt-en{display: none;}
    }
    @media (width <= 1280px) {
        height: calc(100dvh - var(--header-height)); padding: 110px 0;
        .box-item {
            > a {height: 180px; padding: 22px 24px;}
            > a::after{right: 20px; bottom: 20px; width: 58px;}
            .box-title{font-size: 20px;}
            .txt-en{font-size: 11px;}
            &.box01 > a::after{background-size: 36px auto;}
            &.box02 > a::after{background-size: 48px auto;}
            &.box03 > a::after{background-size: 45px auto;}
            &.box04 > a::after{background-size: 45px auto;}
        }
    }
    @media (width <= 1024px) {
        height: auto; padding: 90px 0;
        .section-inner{gap: 60px;}
        .box-list{grid-template-columns: repeat(2, minmax(0, 1fr));}
        .box-item {
            > a {height: 160px;}
            > a::after{right: 20px; bottom: 20px; width: 58px;}
            .box-title{font-size: 22px;}
            .txt-en{font-size: 12px;}
        }
    }

    @media (width <= 860px) {
        padding: 80px 0;
        .box-list{gap: 20px;}
        .box-item {
            > a {height: 150px;}
            > a::after{right: 20px; bottom: 20px; width: 50px;}
            .box-title{font-size: 20px;}
            &.box01 > a::after{background-size: 33px auto;}
            &.box02 > a::after{background-size: 44px auto;}
            &.box03 > a::after{background-size: 41px auto;}
            &.box04 > a::after{background-size: 41px auto;}
        }
    }

    @media (width <= 640px) {
        padding: 70px 0;
        .section-inner{gap: 40px;}
        .box-list{grid-template-columns: 1fr;}
        .box-item {
            > a {height: 140px; padding: 18px 20px;}
            > a::after{right: 20px; bottom: 20px; width: 42px;}
            .box-title{font-size: 21px;}
            &.box01 > a::after{background-size: 30px auto;}
            &.box02 > a::after{background-size: 40px auto;}
            &.box03 > a::after{background-size: 37px auto;}
            &.box04 > a::after{background-size: 37px auto;}
        }
    }
}

/*Youtube*/
.gallery-section {
    overflow: hidden;
    .tit-sec01{margin-bottom: 40px;}
    .gallery-item{width: 320px;}
    .gallery-thumb{position: relative; display: block; aspect-ratio: 490 / 271; border-radius: var(--radius01); overflow: hidden; background-color: #eee;}
    .gallery-thumb img{display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s ease-out;}
    .gallery-title{display: -webkit-box; min-height: 56px; font-size: 19px; font-weight: 700; color: #002222; line-height: 28px; margin-top: 13px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2;}
    .gallery-date{display: block; font-size: 14px; color: #999; line-height: 1; margin-top: 10px;}
    .gallery-link:hover .gallery-thumb img{transform: scale(1.08);}

    .tit-sec01{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .gallery-slider{opacity: 0; translate: 0 20px; transition: opacity .6s .2s ease-out, translate .6s .2s ease-out;}

    &.is-visible {
        .tit-sec01{opacity: 1; translate: 0;}
        .gallery-slider{opacity: 1; translate: 0;}
    }
    @media (width <= 860px) {
        .tit-sec01{margin-bottom: 30px;}
    }
    /*스와이퍼*/
    @media (width > 640px) {
        .gallery-item{width: 380px;}
    }
    @media (width > 860px) {
        .gallery-item{width: 420px;}
        .gallery-title{min-height: 60px; font-size: 20px; line-height: 30px;}
    }
    @media (width > 1024px) {
        .gallery-item{width: 450px;}
        .gallery-title{min-height: 64px; font-size: 22px; line-height: 32px; margin-top: 15px;}
    }
    @media (width > 1420px) {
        .gallery-item{width: 490px;}
    }
}

/*Global Presence*/
.global-section {
    position: relative; overflow: hidden;
    padding: 140px 0;
    color: #fff; background: url('/assets/site/img/main/m-presence-bg.webp') no-repeat center / cover;
    .tit-sec01 {
         margin-bottom: 0;
        .section-title{color: #fff;}
    }
    .global-body{position: relative; margin-top: 96px;}
    .global-info {
        position: relative;
        max-width: 550px; padding-top: 60px;
        .info-group + .info-group{margin-top: 48px;}
        .info-title{font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 22px;}
        .address-list{display: flex; flex-direction: column; gap: 8px;}
        .address-item{display: grid; grid-template-columns: 125px minmax(0, 1fr); gap: 15px; font-size: 14px; line-height: 1.55;}
        .label{font-weight: 700; color: var(--point-color03);}
        .address{color: rgba(255,255,255,.82);}
        .btn-wrap{margin-top: 46px;}
    }
    .global-visual {
        position: absolute; top: 0; right: -50px; width: 998px; pointer-events: none;
        .map-wrap{position: relative; width: 100%; max-width: 100%;}
        .map-img{display: block; width: 100%; height: auto; opacity: .72;}
        .pin-list{position: absolute; inset: 0;}
        .pin{position: absolute; width: 0; height: 0; text-align: center;}
        .pin-mark{position: absolute; right: -11px; bottom: 0; display: block; width: 22px; aspect-ratio: 22 / 25; background: url('/assets/site/img/main/map-pin.png') no-repeat center / 100% auto;}
        .pin-text{position: absolute; top: 6px; left: -62.5px; display: flex; flex-direction: column; align-items: center; width: 125px; font-weight: bold; color: #fff; line-height: 18px; text-transform: uppercase;}
        .pin-text span{font-size: 12px; white-space: nowrap;}
        .pin-text strong{font-size: 14px;}

        .north{top: 40%; left: 20%;}
        .south{top: 73.5%; left: 31.5%;}
        .europe{top: 39%; left: 50.5%;}
        .korea{top: 42%; left: 83%;}
        .asia{top: 68.5%; left: 81%;}
    }
    .tit-sec01{opacity: 0; translate: 0 20px; transition: opacity .6s ease-out, translate .6s ease-out;}
    .global-visual{opacity: 0; translate: 0 20px; transition: opacity .6s .2s ease-out, translate .6s .2s ease-out;}
    .global-info{opacity: 0; translate: 0 20px; transition: opacity .6s .3s ease-out, translate .6s .3s ease-out;}

    .global-visual .pin{opacity: 0; translate: 0 10px; transition: .6s ease-out;}

    &.is-visible {
        .tit-sec01{opacity: 1; translate: 0;}
        .global-visual{opacity: 1; translate: 0;}
        .global-info{opacity: 1; translate: 0;}
        .global-visual {
            .pin{opacity: 1; translate: 0 0;}
            .north{transition-delay: .2s}
            .south{transition-delay: .4s}
            .europe{transition-delay: .6s}
            .korea{transition-delay: .8s}
            .asia{transition-delay: 1s}
        }

    }
    @media (width <= 1620px) {
        .global-visual {right: -80px; width: 960px;}
    }
    @media (width <= 1420px) {
        .global-visual {right: -60px; width: 900px;}
    }
    @media (width <= 1280px) {
        padding: 100px 0;
        .tit-sec01 {text-align: center; justify-content: center;}
        .global-body{max-width: 998px; margin: 96px auto 0;}
        .global-visual{position: relative; right: auto; width: 100%;}
        .global-info {
            display: flex; flex-wrap: wrap;
            width: 100%; max-width: 100%; padding-top: 0; margin-top: 80px;
            .info-group{flex: 0 0 50%;}
            .info-group + .info-group{margin-top: 0;}
            .btn-wrap{flex: 0 0 100%; display: flex; justify-content: center;}
        }
    }
    @media (width <= 1200px) {
        html:lang(en) &,
        html:lang(de) &,
        html:lang(vi) & {
            .tit-sec01 .sub-text{line-height: 1.5;}
        }
    }
    @media (width <= 1024px) {
        padding: 80px 0;
        .global-body{margin: 60px auto 0;}
        .global-info {
            margin-top: 80px;
            .info-group{flex: 0 0 100%;}
            .info-group + .info-group{margin-top: 40px;}
        }
    }
    @media (width <= 860px) {
        .global-visual .pin-mark{width: 18px; right: -9px;}
        .global-info {margin-top: 60px;}
    }
    @media (width <= 640px) {
        padding: 70px 0;
        .global-visual{
            width: calc(100vw - 10px); max-width: none; margin-left: calc(50% - 50vw + 5px);
            .pin-mark{width: 16px; right: -8px;}
            .pin-text{line-height: 15px; top: 4px;}
            .pin-text span{font-size: 10px;}
            .pin-text strong{font-size: 12px;}
            .korea{top: 41%;}
            .asia{top: 70%;}
        }
        .global-info {
            margin-top: 50px;
            .info-title{margin-bottom: 15px;}
            .address-list{gap: 12px}
            .address-item{grid-template-columns: minmax(0, 1fr); gap: 2px;}
        }
    }
}