@charset "utf-8";

/* ==========================================================================
    MAIN VISUAL
    ========================================================================== */
.main-visual {
    --inner-gap: 40px;
    position: relative; height: 100svh; padding: var(--mvis-gap); overflow: hidden;
    .swiper{height: 100%;}
    .main-vis{position: relative; width: 100%; height: 100%; border-radius: var(--radius01); overflow: hidden;}
    .vis-img{position: relative; width: 100%; height: 100%;}
    .vis-img .zoom-in{animation: move1 15s ease-in-out forwards;}
    .vis-img .zoom-out{animation: move2 15s ease-in-out forwards;}
    .vis-text {
        position: absolute; left: var(--inner-gap); bottom: var(--inner-gap); z-index: 11;
        display: flex; align-items: center; gap: 8px;
        font-family: 'termina', sans-serif;line-height: 20px;
        strong {font-size: 15px; font-weight: 600;}
        span {font-size: 14px; color: #9E9E9E;}
    }
    .static-text{position: absolute; left: var(--main-gap); right: var(--main-gap); bottom: calc(var(--mvis-gap) + 34px); text-align: center; z-index: 10; opacity: 0; animation: static-text-in 0.7s ease-out 0.6s forwards; pointer-events: none;}
    .static-text p{font-family: 'termina', sans-serif; font-size: 36px; font-weight: 500; line-height: 52px; text-transform: uppercase;}
    .btn-gtc {
        position: absolute; bottom: calc(var(--mvis-gap) + 32px); right: calc(var(--mvis-gap) + 40px); z-index: 10;
        a{position: relative; display: block; font-size: 0; width: var(--inner-gap); aspect-ratio: 1;}
        a::after{content: ""; position: absolute; display: block; width: 24px; height: 24px; background: url('../images/common/goto-arr.svg') no-repeat center / 24px auto; animation: bounce1 .4s linear infinite alternate}
    }
    @media (width <= 1520px) {
        .static-text{bottom: calc(var(--mvis-gap) + 60px)}
        .static-text p{font-size: 33px; line-height: 48px;}
    }
    @media (width <= 1280px) {
        .static-text{top: 0; bottom: 0; display: flex; justify-content: center; align-items: center;}
    }
    @media (width <= 1024px) {
        --inner-gap: 30px;
        .main-vis{border-radius: 0;}
        .static-text p{font-size: 32px; line-height: 46px;}
    }
    @media (width <= 860px) {
        .vis-text{left: var(--main-gap);}
        .static-text p{font-size: 26px; line-height: 40px;}
        .btn-gtc{right: var(--main-gap);}
    }
    @media (width <= 640px) {
        .static-text p{font-size: 23px; line-height: 37px;}
        .static-text p br{display: none;}
        .vis-text{flex-direction: column; align-items: flex-start; gap: 4px;}
    }
}

@keyframes static-text-in {
    from { opacity: 0; translate: 0 30px; }
    to   { opacity: 1; translate: 0; }
}

@keyframes static-text-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes bounce1
{
    from {top: 0; opacity: .8;}
    to {top: 8px; opacity: 1;}
}
@keyframes move1 {
    from {transform: scale(1)}
    to {transform: scale(1.15)}
}
@keyframes move2 {
    from {transform: scale(1.15)}
    to {transform: scale(1)}
}

@media (width <= 1280px) {
    @keyframes static-text-in {
        from { opacity: 0; translate: 0 0; }
        to   { opacity: 1; translate: 0 -20px; }
    }
}
@media (width <= 640px) {
    @keyframes static-text-in {
        from { opacity: 0; translate: 0 0; }
        to   { opacity: 1; translate: 0 -24px; }
    }
}

/* ==========================================================================
   MAIN CONTENTS
   ========================================================================== */
.dex-gradient{display: inline-block; background: var(--point-gra); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
.big-text {
    --dex-img-height: 43px;
    font-family: 'termina', sans-serif; font-size: 60px; font-weight: 500; line-height: 1;
    .dex-x {display: inline-block; height: var(--dex-img-height); aspect-ratio: 52.4 / 43; background: url('../images/common/dex-x.svg') no-repeat center / auto var(--dex-img-height);}
    &.upper{text-transform: uppercase;}
    @media (width <= 1280px) {
        --dex-img-height: 32px;
        font-size: 46px;
    }
    @media (width <= 1024px) {
        --dex-img-height: 24px;
        font-size: 34px;
    }
    @media (width <= 860px) {
        --dex-img-height: 22px;
        font-size: 30px;
    }
    @media (width <= 640px) {
        --dex-img-height: 18px;
        font-size: 24px;
    }
}

/*리스트 박스*/
.dex-box {
    display: flex; flex-direction: column; align-items: center; gap: 90px;
    min-width: 0; padding: 55px 30px 59px; background: rgba(255, 255, 255, 0.05); border-radius: var(--radius01);
    box-shadow: 3px 21px 30px rgba(0, 0, 0, 0.1); backdrop-filter: blur(10px); transition: .2s ease-out;
    .box-title{font-family: 'termina', sans-serif; font-size: 38px; font-weight: 600;}
    .box-motif {
        position: relative; display: inline-block;
        width: 95px; aspect-ratio: 1;
        &::before,
        &::after{content: ""; position: absolute; inset: 0; mask: var(--motif) center / contain no-repeat;}
        &::before{background: #888;}
        &::after{background: var(--point-gra); opacity: 0; transition: .3s ease-out;}
        &.motif0101{--motif: url('../images/main/box-motif0101.png');}
        &.motif0102{--motif: url('../images/main/box-motif0102.png');}
        &.motif0103{--motif: url('../images/main/box-motif0103.png');}
        &.motif0104{--motif: url('../images/main/box-motif0104.png');}
    }
    .box-motif-f {
        display: inline-block;
        width: 170px; aspect-ratio: 1;
        background-repeat: no-repeat; background-position: center; background-size: 100% auto;
        &.motif0201{background-image: url('../images/main/box-motif0201.png');}
        &.motif0202{background-image: url('../images/main/box-motif0202.png');}
        &.motif0203{background-image: url('../images/main/box-motif0203.png');}
        &.motif0204{background-image: url('../images/main/box-motif0204.png');}
        &.motif0205{background-image: url('../images/main/box-motif0205.png');}
        &.motif0206{background-image: url('../images/main/box-motif0206.png');}
        &.motif0207{background-image: url('../images/main/box-motif0207.png');}
        &.motif0208{background-image: url('../images/main/box-motif0208.png');}
        &.motif0209{background-image: url('../images/main/box-motif0209.png');}
        &.motif0210{background-image: url('../images/main/box-motif0210.png');}
    }
    .box-desc{color: #777; text-align: center; transition: .2s ease-out;}
    .box-desc .title{font-size: 22px; line-height: 1.4;}
    .box-desc .desc{font-size: 15px; line-height: 1.5; opacity: .6; margin-top: 12px;}
    .step-title {
        display: inline-block;
        text-align: center;
        span, strong{display: inline-block; font-family: 'termina', sans-serif; font-weight: 600; line-height: 1;}
        strong{font-size: 22px;}
        span {font-size: 14px; margin-bottom: 6px;}
    }
    /*.swiper-slide-active &,*/
    &.on,
    &:hover {
        background-color: #000;
        .box-motif::after{opacity: 1;}
        .box-desc{color: #fff;}
        .step-title{background: var(--point-gra); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent;}
    }
}
.main-section {
    --vertical-gap: 290px;
    --vertical-gap01: 150px;
    scroll-margin-top: calc(var(--header-height) - 1px);
    overflow: hidden;
    .section-title {
        .title{padding-top: 24px; border-top: 1px solid var(--border-color01);}
        .title span{font-family: 'termina', sans-serif; font-size: 15px; line-height: 1;}
        .title span::before{content: ''; position: relative; top: -1px; display: inline-block; width: 6px; aspect-ratio: 1; background: #D6ADCD; vertical-align: middle; margin-right: 12px;}
    }
    .subsection-title {
        margin-bottom: 80px;
        .sub-text{font-family: 'termina', sans-serif; font-size: 17px; font-weight: 600; color: #888; line-height: 1; margin-bottom: 18px;}
        .desc{font-size: 17px; line-height: 1.7; margin-top: 40px;}
    }
    &.brand-section {margin-top: var(--vertical-gap01);}
    @media (width <= 1420px) {
        --vertical-gap: 150px;
        &.brand-section {margin-top: 100px;}
    }
    @media (width <= 1280px) {
        --vertical-gap: 120px;
        --vertical-gap01: 120px;
        .subsection-title {
            margin-bottom: 60px;
            .sub-text{font-size: 16px;}
            .desc{font-size: 16px; margin-top: 30px;}
        }
        &.brand-section {margin-top: 60px;}
    }
    @media (width <= 1024px) {
        .subsection-title {
            .sub-text{font-size: 15px; margin-bottom: 15px;}
            .desc{font-size: 15px; margin-top: 25px;}
        }
    }
    @media (width <= 860px) {
        .subsection-title {
            margin-bottom: 50px;
            .sub-text{font-size: 14px;}
            .desc{font-size: 14px; margin-top: 20px;}
        }
    }
    @media (width <= 640px) {
        --vertical-gap: 100px;
        --vertical-gap01: 100px;
        .subsection-title {
            margin-bottom: 40px;
            .sub-text{font-size: 13px;}
        }
        &.brand-section {margin-top: 50px;}
        &.product-section .section-title .title{border-top: 0; padding-top: 60px;}
    }
}
/*브랜드*/
.brand-intro {
    padding-top: 104px; padding-bottom: 250px;
    .main-slogan {
        .slogan{font-family: 'termina', sans-serif; font-size: 100px; font-weight: 500; line-height: 1.3;}
        .desc{font-size: 17px; line-height: 32px; margin-top: 13px;}
    }
    .dex-symbol {
        position: relative; padding: 100px 0; overflow: hidden;
        border-top: 1px solid var(--border-color01); border-bottom: 1px solid var(--border-color01);
        margin-top: 137px;
        .symbol-track {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: space-between; align-items: center; gap: 40px; width: max(100%, 1520px);}
        .symbol-item {
            flex: 0 0 72px; aspect-ratio: 1;
            background-repeat: no-repeat; background-position: center; background-size: contain;
            &:nth-child(1){background-image: url('../images/main/dex-x01.svg');}
            &:nth-child(2){background-image: url('../images/main/dex-x02.svg');}
            &:nth-child(3){background-image: url('../images/main/dex-x03.svg');}
            &:nth-child(4){background-image: url('../images/main/dex-x04.svg');}
            &:nth-child(5){background-image: url('../images/main/dex-x05.svg');}
            &:nth-child(6){background-image: url('../images/main/dex-x06.svg');}
            &:nth-child(7){background-image: url('../images/main/dex-x07.svg');}
            &:nth-child(8){background-image: url('../images/main/dex-x08.svg');}
            &:nth-child(9){background-image: url('../images/main/dex-x09.svg');}
            &:nth-child(10){background-image: url('../images/main/dex-x10.svg');}
            &:nth-child(11){background-image: url('../images/main/dex-x11.svg');}
            &:nth-child(12){background-image: url('../images/main/dex-x12.svg');}
            &:nth-child(13){background-image: url('../images/main/dex-x13.svg');}
            &:nth-child(14){background-image: url('../images/main/dex-x14.svg');}
        }
    }
    .our-list {
        display: grid; grid-template-columns: max-content 1fr; gap: 163px 33px;
        padding-top: 50px; margin-top: var(--vertical-gap01);
        .our-desc {position: relative; top: 10px; padding-left: 32px;}
        .our-desc::before{content: ""; position: absolute; left: 0; top: 9px; display: block; width: 1px; height: 33px; background: #fff;}
        .our-desc .title{font-size: 30px; line-height: 1.35;}
        .our-desc .desc{font-size: 17px; line-height: 1.5;}
    }
    .box-list {
        margin-top: 162px;
        .list-title{margin-bottom: 40px;}
        > ul{display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-gap);}
    }
    @media (width <= 1720px) {
        .box-list .dex-box .box-title{font-size: 32px;}
    }
    @media (width <= 1640px) {
        .dex-symbol {
            padding: 90px 0;
            margin: 120px var(--minus-gap) 0;
            .symbol-track{padding: 0 var(--main-gap);}
            .symbol-item {flex-basis: 64px;}
        }
    }
    @media (width <= 1600px) {
        .main-slogan .slogan{font-size: 90px;}
        .box-list {
            .dex-box {
                gap: 80px; padding: 50px 20px;
                .box-title{font-size: 28px;}
            }
        }
    }
    @media (width <= 1420px) {
        padding-top: 72px;
        .main-slogan .slogan{font-size: 84px;}
        .box-list {
            .dex-box {
                gap: 72px; padding: 48px 20px 45px;
                .box-title{font-size: 25px;}
                .box-desc .desc{font-size: 14px;}
            }
        }
    }
    @media (width <= 1280px) {
        padding-top: 40px; padding-bottom: 180px;
        .main-slogan {
            .slogan{font-size: 78px;}
            .desc{font-size: 16px; line-height: 30px;}
        }
        .dex-symbol {
            padding: 80px 0;
            .symbol-track{justify-content: center;}
            .symbol-item {flex-basis: 56px;}
        }
        .our-list {
            .our-desc{top: 6px;}
            .our-desc::before{top: 5px;}
            .our-desc .title{font-size: 24px;}
            .our-desc .desc{font-size: 16px;}
        }
        .box-list {
            .dex-box {
                gap: 70px; padding: 45px 20px 47px;
                .box-title{font-size: 23px;}
            }
        }
    }
    @media (width <= 1200px) {
        .main-slogan .slogan{font-size: 70px;}
        .box-list {
            > ul{grid-template-columns: repeat(2, 1fr);}
            .dex-box .box-title{font-size: 26px;}
        }
    }
    @media (width <= 1024px) {
        padding-bottom: 160px;
        .main-slogan .slogan{font-size: 57px;}
        .our-list {
            gap: 120px 24px; padding-top: 30px;
            .our-desc{top: 3px;}
            .our-desc::before{top: 5px; height: 25px;}
            .our-desc .title{font-size: 22px;}
        }
        .box-list {margin-top: 140px;}
    }
    @media (width <= 860px) {
        padding-bottom: var(--vertical-gap);
        .main-slogan {
            .slogan{font-size: 45px;}
            .desc{font-size: 15px; line-height: 28px;}
        }
        .dex-symbol {
            padding: 60px 0; margin: 100px var(--minus-gap) 0;
            .symbol-item {flex-basis: 48px;}
        }
        .our-list {
            grid-template-columns: 1fr; gap: 20px;
            padding-top: 0;
            .our-desc + .our-title{margin-top: 55px;}
            .our-desc{top: 0; padding-left: 0;}
            .our-desc::before{display: none;}
            .our-desc .title{font-size: 20px;}
            .our-desc .desc{font-size: 15px; line-height: 28px; margin-top: 14px;}
        }
        .box-list {
            margin-top: 130px;
            .dex-box {
                gap: 65px; padding: 42px 20px 45px;
                .box-title{font-size: 23px;}
            }
        }
    }
    @media (width <= 640px) {
        .main-slogan {
            .slogan{font-size: 27px;}
            .desc{font-size: 14px; line-height: 26px;}
        }
        .dex-symbol {
            padding: 50px 0;
            .symbol-track{ gap: 34px;}
            .symbol-item {flex-basis: 32px;}
        }
        .our-list {
            gap: 20px;
            .our-desc + .our-title{margin-top: 50px;}
            .our-desc .title{font-size: 19px;}
        }
        .box-list {
            margin-top: 100px;
            .list-title{margin-bottom: 32px;}
            > ul{grid-template-columns: 1fr;}
            .dex-box {
                padding: 48px 20px;
                .box-title{font-size: 24px;}
            }
        }
    }
}
.brand-difference {
    --diff-width: 44.1%;
    --diff-gap: calc(100% - calc(var(--diff-width) * 2));
    padding-top: var(--vertical-gap01); padding-bottom: var(--vertical-gap01);
    background-color: #111;
    .subsection-title {
        margin-bottom: 125px;
        .title {text-transform: uppercase;}
    }
    .difference-list{display: flex; flex-direction: column; gap: 100px;}
    .difference-item {
        display: flex; align-items: center; gap: var(--diff-gap);
        &:nth-child(even){
            flex-direction: row-reverse;
            .difference-text{padding: 0 0 0 var(--diff-gap);}
        }
    }
    .difference-image{flex: 0 0 var(--diff-width); height: 310px; border-radius: var(--radius01); overflow: hidden;}
    .difference-text {
        flex: 0 0 var(--diff-width);
        padding: 0 var(--diff-gap) 0 0;
        .title{font-family: 'termina', sans-serif; font-size: 40px; line-height: 52px;}
        .text-wrap{margin-top: 38px;}
        .sub-title{font-size: 20px; line-height: 1.5;}
        .desc{font-size: 14px; line-height: 1.65; margin-top: 17px;}
    }
    @media (width <= 1740px) {
        --diff-width: 44.5%;
    }
    @media (width <= 1600px) {
        --diff-width: 46%;
    }
    @media (width <= 1420px) {
        --diff-width: 47%;
        .subsection-title{margin-bottom: 80px;}
        .difference-image{height: 300px;}
        .difference-text .title{font-size: 36px; line-height: 47px;}
    }
    @media (width <= 1280px) {
        .subsection-title{margin-bottom: 60px;}
        .difference-list{gap: 60px;}
        .difference-item{
            &:nth-child(odd) .difference-text,
            &:nth-child(even) .difference-text{padding: 0;}
        }
        .difference-image{height: 280px;}
        .difference-text {
            .title{font-size: 28px; line-height: 40px;}
            .text-wrap{margin-top: 32px;}
            .sub-title{font-size: 18px;}
            .desc{margin-top: 14px;}
        }
    }
    @media (width <= 1024px) {
        --diff-width: calc(50% - calc( var(--diff-gap) / 2));
        --diff-gap: 40px;
        .difference-text .title{font-size: 26px; line-height: 37px;}
        html:lang(en) & {
            .difference-image{height: 310px;}
        }
    }
    @media (width <= 860px) {
        .difference-list{gap: 40px;}
        .difference-image{height: 270px;}
        .difference-text {
            .text-wrap{margin-top: 28px;}
            .title{font-size: 20px; line-height: 32px;}
            .sub-title{font-size: 16px;}
        }
    }
    @media (width <= 640px) {
        --diff-width: 100%;
        .difference-list{gap: 60px;}
        .difference-item{display: block;}
        .difference-image{height: 180px;}
        .difference-text {
            margin-top: 24px;
            .title{font-size: 22px; line-height: 34px;}
            .text-wrap{margin-top: 20px;}
            .desc{margin-top: 10px;}
        }
        html:lang(en) & {
            .difference-image{height: 180px;}
        }
    }
}
.brand-feature {
    padding-top: var(--vertical-gap); padding-bottom: var(--vertical-gap);
    .subsection-title{display: flex; justify-content: space-between; align-items: flex-end;}
    .feature-item{width: 341px;}
    .dex-box {gap: 46px; padding: 52px 14px 47px;}
    html:lang(en) & {
        .dex-box .box-desc .desc{height: 44px; line-height: 22px; margin-top: 0;}
    }
    @media (width <= 1600px) {
        .subsection-title{flex-direction: column; justify-content: flex-start; align-items: flex-start;}
    }
    @media (width <= 1280px) {
        .feature-item{width: 306px;}
        .dex-box {
            gap: 18px; padding: 40px 14px 45px;
            .step-title strong{font-size: 20px;}
            .box-motif-f{width: 158px;}
            .box-desc .title{font-size: 20px;}
        }
    }
}
.brand-dexthermal {
    .thermal-content{display: grid; grid-template-columns: 540px 1fr; gap: 80px;}
    .thermal-visual{overflow: hidden; border-radius: var(--radius01);}
    .thermal-item{border-top: 1px solid var(--border-color01);}
    .thermal-head{position: relative; display: flex; align-items: center; gap: 0; width: 100%; min-height: 92px; text-align: left; overflow: hidden;}
    .thermal-head span{display: block;}
    .head-image{flex: none; max-width: 0; overflow: hidden;}
    .head-image img{display: block; width: var(--icon-width, 120px); height: auto;}
    .ex-img{--icon-width: 154px;}
    .head-title{font-size: 22px; color: #666; white-space: nowrap;}
    .head-desc{position: absolute; right: 6px; top: 50%; font-size: 17px; line-height: 30px; white-space: nowrap;}
    .toggle{position: absolute; right: 0; top: 50%; width: 24px; aspect-ratio: 1;}
    .toggle::before,
    .toggle::after{content: ""; position: absolute; top: 50%; left: 50%; background: #656766; transform: translate(-50%, -50%);}
    .toggle::before{width: 20px; height: 1px;}
    .toggle::after{width: 1px; height: 20px;}
    /* animation */
    .thermal-item{transition: .3s ease-out;}
    .thermal-head{transition: gap .3s ease-out, min-height .3s ease-out;}
    .head-image{opacity: 0; transition: max-width .5s ease-out, opacity .3s ease-out;}
    .head-title{transition: color .3s ease-out;}
    .head-desc{opacity: 0; visibility: hidden; transform: translate(60px, -50%); transition: opacity .3s ease-out, transform .4s ease-out, visibility .3s;}
    .toggle{opacity: 1; visibility: visible; transform: translateY(-50%); transition: opacity .2s ease-out, visibility .2s;}
    .thermal-item.active {
        border-color: #fff;
        .thermal-head{min-height: 126px; gap: 24px;}
        .head-title{color: #fff;}
        .head-image{max-width: 180px; opacity: 1;}
        .head-desc{opacity: .9; visibility: visible; transform: translate(0, -50%);}
        .toggle{opacity: 0; visibility: hidden;}
    }
    @media (width <= 1600px) {
        .thermal-content{grid-template-columns: 420px 1fr; gap: 60px;}
    }
    @media (width <= 1420px) {
        .thermal-content{grid-template-columns: 380px 1fr; gap: 40px;}
        .head-image img{width: var(--icon-width, 100px);}
        .ex-img{--icon-width: 130px;}
    }
    @media (width <= 1280px) {
        .thermal-content{grid-template-columns: 1fr;}
        .thermal-visual{height: 450px;}
    }
    @media (width <= 1024px) {
        .thermal-visual{height: 380px;}
        .thermal-head{min-height: 80px;}
        .head-title{font-size: 20px;}
        .head-desc{font-size: 16px; line-height: 28px;}
        .thermal-item.active .thermal-head{min-height: 108px;}
    }
    @media (width <= 860px) {
        .thermal-visual{height: 340px;}
        .thermal-head {
            display: block; min-height: 70px; padding: 15px 0;
            .head-image{display: none;}
            .head-title{font-size: 18px;}
            .head-desc{display: none; position: relative; top: auto; right: auto; font-size: 15px; line-height: 26px; margin-top: 10px; white-space: wrap; transform: none;}
            .head-desc br{display: none;}
        }
        .thermal-item.active {
            .thermal-head{min-height: 70px;}
            .head-desc{display: block; transform: none;}
        }
    }
    @media (width <= 640px) {
        .thermal-visual{height: auto; aspect-ratio: 40 / 24;}
        .thermal-head {
            min-height: 65px;
            .head-title{font-size: 17px;}
        }
        .thermal-item.active .thermal-head{min-height: 65px;}
    }
}
.brand-dexboard {
    padding-top: var(--vertical-gap); padding-bottom: var(--vertical-gap);
    .subsection-title{display: flex; justify-content: space-between; align-items: flex-end;}
    .dexboard-content{display: grid; grid-template-columns: 43% 1fr; align-items: center; gap: 60px; padding: 75px 60px; background: #333; border-radius: var(--radius01);}
    .dexboard-info{min-width: 0;}
    .info-table{display: grid; grid-template-columns: 1.12fr 1.38fr .7fr; align-items: center; gap: 19px 30px; font-family: 'termina', sans-serif; font-size: 14px; letter-spacing: -5%;}
    .info-table > div{color: #eee; line-height: 1.5;}
    .info-table > .thick{color: #666;}
    .info-table .head{font-weight: 600; margin-bottom: 6px;}
    .structure{display: flex; align-items: center; gap: 5px;}
    .structure .num{position: relative; top: 1px; display: inline-flex; justify-content: center; align-items: center; flex: 0 0 20px; aspect-ratio: 1; font-family: 'roboto', sans-serif; font-size: 13px; color: #000; background: #fff;}
    .info-note{font-size: 12px; color: #666; line-height: 20px; letter-spacing: -5%; margin-top: 40px;}
    .dexboard-visual{max-width: 846px; user-select: none;}

    @media (width <= 1840px) {
        .dexboard-content{grid-template-columns: 45% 1fr; padding: 75px 40px;}
        .dexboard-visual{max-width: 800px;}
    }
    @media (width <= 1600px) {
        .subsection-title{flex-direction: column; justify-content: flex-start; align-items: flex-start;}
        .dexboard-content{grid-template-columns: 1fr; justify-items: center; padding: 75px 60px;}
        .dexboard-info{order: 1; max-width: 780px; width: 100%;}
        .dexboard-visual{max-width: 846px;}
    }
    @media (width <= 860px) {
        .dexboard-content{padding: 40px 40px;}
        .info-table{gap: 16px 14px; font-size: 13px;}
    }
    @media (width <= 640px) {
        padding-bottom: 0;
        .dexboard-content{padding: 40px 20px; margin: 0 var(--minus-gap); border-radius: 0;}
        .info-table{gap: 10px 14px; font-size: 12px;}
        .structure .num{flex: 0 0 16px; font-size: 10px;}
    }
}

.product-lineup {
    --vis-width: 57%;
    padding-top: 65px; padding-bottom: var(--vertical-gap);
    overflow: hidden;
    .dex-lineup{display: flex; flex-direction: column; gap: var(--vertical-gap);}
    .lineup-item{position: relative; display: grid; grid-template-columns: var(--vis-width) minmax(0, 1fr); gap: 60px;}
    .lineup-visual{position: relative; min-width: 0;}
    .lineup-swiper{overflow: visible;}
    .lineup-image{height: 845px; overflow: hidden;}
    .lineup-image img{border-radius: var(--radius01);}
    .lineup-pagination{display: none; position: absolute; right: 0; bottom: 40px; gap: 6px; z-index: 5;}
    .lineup-pagination .swiper-pagination-bullet,
    .lineup-pagination.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{width: 6px; border-radius: 0;}
    .lineup-direction {
        button{display: block; position: absolute; top: 50%; width: 30px; aspect-ratio: 30 / 58; translate: 0 -50%; font-size: 0; background: url('../images/common/arr-slider.png') no-repeat center / 100% auto; opacity: .7; z-index: 10; transition: .2s ease-out;}
        button:hover{opacity: 1;}
        .lineup-prev{left: 40px;}
        .lineup-next{right: 40px; rotate: 180deg;}
    }
    .lineup-visual .lineup-caption{display: none;}
    .lineup-caption strong,
    .lineup-caption span{display: block; font-family: 'termina', sans-serif; line-height: 1.65;}
    .lineup-caption strong{font-size: 16px; font-weight: 400; text-transform: uppercase;}
    .lineup-caption span{font-size: 14px; color: #666;}
    .lineup-info{position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 0;}
    .lineup-info .subsection-title{margin-bottom: 42px;}
    .lineup-summary{margin-bottom: 34px;}
    .summary-title{font-size: 17px;}
    .summary-desc{font-size: 14px; color: #aaa; line-height: 26px; margin-top: 16px;}
    .accordion-head{display: flex; align-items: center; gap: 11px; width: 100%; padding: 7px 0; font-family: 'termina', sans-serif; font-size: 17px; color: #BDBDBD; text-align: left;}
    .accordion-current{display: none; text-transform: uppercase;}
    .accordion-current::before{content: ""; display: inline-block; width: 6px; aspect-ratio: 6 / 5; background-color: #fff; vertical-align: middle; margin-right: 11px;}
    .accordion-body{display: none;}
    .color-list{display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; padding: 4px 0 14px;}
    .color-item{position: relative; width: 100%; aspect-ratio: 66 / 30; overflow: hidden;}
    .color-item img{display: block; width: 100%; height: 100%; object-fit: cover;}
    .color-item::after{content: ""; position: absolute; inset: 0; border: 2px solid transparent; pointer-events: none;}
    .color-item.active::after{border-color: #fff;}
    .accordion-item.active {
        .accordion-head{font-weight: 700; color: #fff;}
        .accordion-current{display: block;}
        .accordion-body{display: block;}
    }
    .dexprint {
        .accordion-current{display: block;}
        .accordion-body{display: block;}
        .accordion-item .accordion-head{font-weight: 400; color: #fff;}
        .lineup-visual .lineup-caption{display: block; position: absolute; bottom: 40px; left: 40px;}
        .lineup-visual .lineup-caption span{color: #fff;}
    }
    .lineup-item:nth-child(even) {
        grid-template-columns: minmax(0, 1fr) var(--vis-width);
        .lineup-visual{order: 2;}
        .lineup-info{order: 1;}
        .color-item{aspect-ratio: 132 / 220;}
    }
    @media (width <= 1600px) {
        --vis-width: 54%;
        .lineup-image{height: 800px;}
    }
    @media (width <= 1420px) {
        .lineup-image{height: 780px;}
        .lineup-direction {
            button{width: 26px;}
            .lineup-prev{left: 20px;}
            .lineup-next{right: 20px;}
        }
        .lineup-info {
            .subsection-title {
                .title{--dex-img-height: 32px; font-size: 46px;}
                .sub-text{font-size: 16px;}
            }
        }
    }
    @media (width > 1280px) {
        .subsection-title{margin-bottom: 150px;}
    }
    @media (width <= 1280px) {
        padding-top: 36px;
        --vis-width: 51.5%;
        .lineup-item{gap: 40px;}
        .lineup-image{height: 700px;}
        .lineup-direction {
            .lineup-prev{left: var(--main-gap);}
            .lineup-next{right: var(--main-gap);}
        }
        .lineup-info{
            padding: 20px 0;
            .subsection-title {
                margin-bottom: 36px;
                .title{--dex-img-height: 25px; font-size: 34px;}
                .sub-text{font-size: 14px; margin-bottom: 15px;}
            }
        }
        .accordion-head{font-size: 15px;}
    }
    @media (width <= 1024px) {
        .dex-lineup{gap: 60px;}
        .lineup-item{grid-template-columns: 1fr;}
        .lineup-item:nth-child(even) {
            grid-template-columns: 1fr;
            .lineup-visual{order: 1;}
            .lineup-info{order: 2;}
        }
        .lineup-image{height: auto; aspect-ratio: 40 / 28;}
        .lineup-caption{display: none;}
        .lineup-caption span{display: none; color: #fff;}
        .lineup-visual .lineup-caption{display: block; position: absolute; left: 24px; bottom: 24px;}
        .lineup-info{padding: 0;}
        .dexprint {
            .lineup-visual .lineup-caption{display: none;}
            .info-inner{display: flex; flex-direction: column-reverse; gap: var(--main-gap);}
        }
    }
    @media (width <= 860px) {
        .lineup-direction button{width: 22px;}
        .lineup-info{
            .subsection-title {
                .title{--dex-img-height: 22px; font-size: 30px;}
                .sub-text{font-size: 13px; margin-bottom: 13px;}
            }
        }
    }
    @media (width <= 640px) {
        padding-top: 60px;
        .lineup-visual .lineup-caption{left: 20px; bottom: 20px;}
        .lineup-visual .lineup-caption strong{font-size: 14px;}
        .lineup-pagination{left: auto; width: auto; right: 26px; bottom: 26px;}
        .lineup-direction button{width: 16px;}
        .lineup-info{
            .subsection-title {
                .title{--dex-img-height: 19px; font-size: 26px;}
                .sub-text{font-size: 12px; margin-bottom: 11px;}
            }
        }
        .accordion-head{font-size: 13px; padding: 9px 0;}
        .lineup-item:nth-child(1) .color-list{grid-template-columns: repeat(8, 1fr);}
        html:lang(en) & {
            .lineup-visual .lineup-caption strong{font-size: 13px;}
        }
    }
}

/*포트폴리오*/
.project-reference {
    padding-top: 65px; padding-bottom: var(--vertical-gap);
    .subsection-title {display: flex; justify-content: space-between; align-items: flex-end;}
    .project-head{display: flex; justify-content: space-between; align-items: center; font-family: 'termina', sans-serif; font-size: 20px; font-weight: 500; margin-bottom: 25px;}
    .project-title{color: #fff;}
    .project-total{font-size: 17px; color: rgba(255,255,255,.5);}
    .project-total strong{font-weight: 500; color: #fff;}
    .project-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 37px 20px;}
    .project-item{break-inside: avoid;}
    .project-item a{display: block;}
    .project-image{overflow: hidden; border-radius: var(--radius01);}
    .project-image img{display: block; width: 100%; transition: .2s ease-out;}
    .project-item:hover .project-image img{scale: 1.1;}
    .project-info{margin-top: 15px;}
    .project-info .title{font-size: 17px; line-height: 24px;}
    .project-info .cate{font-family: 'termina', sans-serif; font-size: 14px; color: #666; margin-top: 6px; }
    @media (width > 1600px) {
        .subsection-title {
            margin-bottom: 87px;
            .desc{margin-top: 0; text-align: right;}
        }
    }
    @media (width <= 1600px) {
        .subsection-title{
            flex-direction: column; justify-content: flex-start; align-items: flex-start;
            .desc{text-align: left;}
        }
    }
    @media (width <= 1280px) {
        .project-grid{grid-template-columns: repeat(3, 1fr);}
    }
    @media (width <= 860px) {
        .project-grid{grid-template-columns: repeat(2, 1fr);
        }
    }
    @media (width <= 640px) {
        padding-bottom: 80px;
        .project-head{font-size: 16px;}
        .project-image{aspect-ratio: 40 / 32; border-radius: 5px;}
        .project-info .title{font-size: 16px; line-height: 22px;}
        .project-info .cate{font-size: 12px; margin-top: 5px;}
    }
}

/*라이트박스*/
.glightbox-clean {
    .gslide-description{background-color: transparent;}
    .gdesc-inner{display: flex; align-items: center; gap: 8px; padding: 16px 0;}
    .gslide-title{font-size: 17px; color: #fff; line-height: 24px; margin-bottom: 0;}
    .gslide-desc{font-family: 'termina', sans-serif; font-size: 14px; color: #666; line-height: 24px; margin-top: 0;}
}
@media (width <= 640px) {
    .glightbox-mobile .glightbox-container .gslide-description{bottom: 20px;}
}