@charset "utf-8";

/***************************************************/
/* REUSERBLE ▼ */
/***************************************************/

/* 슬라이드 프로그레스 (재활용) */
.sub-container .swiper .dots,
.sub-container .sec > .dots{
    position: absolute; z-index: 1; top: auto; bottom: 50px; left: 0; width: 100%; display: flex; justify-content: center; gap: 16px;

    & li{
        width: auto; height: auto; background: none; opacity: initial; margin: 0;

        & button{
            position: relative; display: flex; align-items: center; gap: 8px; background: none; border: none; cursor: pointer; color: #333;
            &:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: auto; aspect-ratio: 1 / 1; border-radius: 50%; background-color: #222;}

            & .title{display: none;}
            & svg.ring{
                width: 18px; height: 18px; transform: rotate(-90deg); border-radius: 50%; box-shadow: inset 0 0 0 2px transparent;

                & circle{fill: none; stroke-width: 4; opacity: 0;}
                & circle.ring-bg{stroke: transparent;}
                & circle.ring-progress{stroke: #000; stroke-dasharray: 100.5; stroke-dashoffset: 100.5;}
            }
        }

        &.swiper-pagination-bullet-active{

            & button{
                &:before{opacity: 0;}
                & svg.ring{
                    box-shadow: inset 0 0 0 2px #bbb;
                    & circle{opacity: 1;}
                    & circle.ring-progress{animation: ring 4.0s linear forwards;}
                    & circle.ring-progress.pause{animation-play-state: paused !important;}
                }
            }
        }
    }

    &.white{
        & li{
            & button{
                &:before{background-color: #fff;}
                & svg.ring{
                    & circle.ring-progress{stroke: #fff;}
                }
            }
            &.swiper-pagination-bullet-active{
                & button{
                    & svg.ring{
                        box-shadow: inset 0 0 0 2px #bbb;
                    }
                }
            }
        }
    }

    @media (width <= 860px){
        bottom: 30px;
    }
}

/* 모델 알아보기 - (재활용) */
.more-arr{
    position: relative; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 14px; font-size: 14px; font-weight: 400; color: #111; padding: 0 0 6px;
    &:before{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: rgba(0,0,0,0.5);}
    &:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: rgba(0,0,0,0.5);}
    
    & span{}
    & .arr{
        position: relative; display: inline-block; width: 7px; height: auto; aspect-ratio: 1 / 1; border-radius: 0; transition: all 0.3s ease; 
        border: none; border-top: 2px solid #111; border-right: 2px solid #111; transform: rotate(45deg) !important;
        &:before{display: none;}
    }

    &:hover {
        /* &:before{opacity: 0; transition: 0.1s;}
        &:after{width: 100%; transition: 0.2s ease; transition-delay: 0.15s;} */
        &:before{opacity: 0; transition: 0.3s;}
        &:after{width: 100%; transition: 0.4s ease; transition-delay: 0.35s;}
    }

    &.white{
        color: #fff;
        &:before{background-color: rgba(255,255,255,0.5);}
        &:after{background-color: rgba(255,255,255,0.5);}

        & .arr{
            border-color: #fff;
            &:before{border-color: #fff;}
        }
    }
}

/* 지그재그 리스트 - (재활용) */
.zz-list{
    display: flex; flex-direction: column; gap: 120px;

    & li{
        display: flex; flex-wrap: wrap; gap: 50px;

        & .img{
            flex: 1; min-width: 0;

            & img{}
        }

        & .txt{
            flex: 1; min-width: 0;

            & > dl{
                height: 100%; display: flex; flex-direction: column;

                & dt{line-height: 1; padding: 5px 0 0; font-weight: 600;}
                & dd{
                    margin-top: auto; padding: 0 0 5px;

                    & .name{font-size: 14px; font-weight: 800; color: #a5a5a5; padding: 0 0 17px;}
                    & .desc{
                        font-size: 14px; color: #282828;

                        & p{}
                    }
                }
            }
        }
    }
    & li:nth-child(even){
        flex-direction: row-reverse;
    }

    @media (width < 1280px){
        & li{
            gap: 30px;
        }
    }
    @media (width < 800px){
        gap: 80px; 

        & li{
            flex-direction: column !important; gap: 20px;

            & .txt{
                & > dl{
                    & dt{padding: 0;}
                    & dd{
                        
                        & .name{padding: 10px 0 10px;}
                        & .desc{

                            & p{
                                .lc{display: none;}
                            }
                        }
                    }
                }
            }
        }
    }
}

/* fixed-scroll (fixed-scroll-top 클래스가 있는 버전, 없는 버전 2가지 타입이 있음) */
.fixed-scroll{
    position: relative; width: 100%; height: 100vh;
    &.fixed-scroll-top{height: var(--fullHeight-minus-header-minus-subpagetit); /* (헤더 높이 + 서프페이지 높이) 를 뺀 높이값 */}

    & .img{
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;

        & img{width: 100%; height: 100%; object-fit: cover;}
    }
    & .txt{
        position: relative; display: flex; flex-direction: column; justify-content: flex-end; /* justify-content: center; */ width: 100%; height: 100%; padding: 80px 30px; color: #fff;

        & dt{
            font-size: 36px; font-weight: 500; line-height: 1; padding: 0 0 30px; text-transform: uppercase;
            & .subtit{padding: 24px 0 0; font-size: 16px; font-weight: 800; color: #fff;}
        }
        & dd{
            font-size: 14px; height: 39px; overflow: hidden; max-width: 660px; /* word-break: break-all; */
            & p{
                & .m-hide{}
            }
        }

        &.center{
            text-align: center;
            & dd{margin: 0 auto;}
            @media (width <= 640px){
                text-align: left;
            }
        }
    }

    @media (width <= 1280px){
        & .txt{
            & dt{padding: 0 0 30px;}
        }
    }
    @media (width <= 1024px){
        & .txt{
            & dt{padding: 0 0 20px;}
        }
    }
    @media (width <= 860px){
        height: auto; aspect-ratio: 1;
        & .txt{
            padding: 35px 20px;
            & dt{padding: 0 0 5%;}
            & dd{
                height: auto;
                & p{
                    & .m-hide{display: none;}
                }
            }
        }
    }
    @media (width <= 767px){
        & .txt{
            text-align: left;
            & dt{font-size: 24px;}
        }
    }
    @media (width <= 640px){
        & .txt{
            text-align: left;
        }
    }
}


.sec-tit-sub{
    padding: 111px 0 31px; font-size: 26px; font-weight: 400; text-align: center;

    &.white{color: #fff;}
    &.type2{
        padding: 113px 0 30px; font-size: 24px;
    }

    @media (width <= 640px){
        padding: 60px 0 12px; font-size: 20px;
        &.type2{
            padding: 60px 0 12px; font-size: 20px;
        }
    }
}


.sec-des-sub{
    text-align: center;
    .m-show{display: none;}
    &.small{font-size: 14px; line-height: 1.5;} 

    @media (width <= 640px){
        font-size: 14px;
        .m-show{display: block;}
    }
}



/***************************************************/
/* EACH SUB-PAGE ▼ */
/***************************************************/

/* ABOUT - BRAND STORY */
.brand-wrap {
    & .brand {
        & .brand-item{position: relative;}

        & .brand-identity {
            position: relative; background: #000 url(../img/contents/brand-identity-bg.jpg) no-repeat center; background-size: cover; color: #fff; height: var(--view-height); align-content: center;
            > .txt{
                margin: 0 140px; padding: 0 0 232px; color: #ccc; font-size: 14px;
                .title{font-size: 26px;}
                .desc{
                    padding: 28px 0 0; line-height: 1.5;
                    strong{font-weight: 700; display: block; margin: 0 0 15px;}
                }
            }
            .identity-wrap{
                position: absolute; left: 70px; right: 70px; bottom: 80px; top: 80px;

                .identity-list{width: 100%; height: 100%; align-content: end; background-color: transparent;}
                .identity-item{
                    position: relative; z-index: 1; width: calc((100% - 40px) / 3); height: 350px; background: #ddd; border-radius: 30px;  align-content: center; transition: 1s 0.5s; cursor: none; overflow: hidden;
                    text-align: center; background-size: cover; background-repeat: no-repeat; background-position: center;
                    .name{text-align: center; transition: 0.3s 0s; font-size: 18px;}
                    .name.off{opacity: 0; visibility: hidden; pointer-events: none; /* transition: 1s 1.5s; */ transition: 0.3s;}
                    .detail{
                        opacity: 0; visibility: hidden; pointer-events: none; 
                        position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: 0.3s 0s; padding: 70px; align-content: end;
                        .img{
                            height: 146px; align-content: center;

                            &.color{
                                display: inline-flex; gap: 40px; align-items: center;
                                span{position: relative; display: inline-block; width: 300px; height: 60px; font-size: 16px; text-align: center; align-content: center; border-radius: 10px; overflow: hidden;}
                                span:nth-child(1){color: #fff;}
                                span:nth-child(2){color: #a6a6a4;}
                                span img{position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover;}
                                span em{position: relative; z-index: 2; font-style: normal;}
                            }
                        }
                        .txt{
                            padding: 53px 0 0; font-size: 14px;
                            dt{font-size: 26px; font-weight: 400; padding: 10px 0 0;}
                            dd{
                                padding: 15px 0 0; line-height: 1.55;
                                p{margin-top: 1.1em;}
                            }
                        }
                        .btns{
                            padding: 90px 0 0;
                            button{
                                position: relative; font-size: 0; display: inline-block; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(255,255,255,0.5);
                                .shape{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 35%; height: auto; aspect-ratio: 1; transition: 0.2s;}
                                .shape:before,
                                .shape:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 1px; background: rgba(255,255,255,0.5); transition: 0.2s;}
                                .shape:after{width: 1px; height: 100%;}
                                &:hover{ 
                                    background-color: rgba(255,255,255,0.2); border-color: transparent;
                                    .shape:before,
                                    .shape:after{background-color: #fff;}
                                }
                            }
                        }

                        &.on{opacity: 1; visibility: visible; pointer-events: initial; transition: 1s 1.5s;}
                    }

                    &:nth-child(1){
                        position: absolute; bottom: 0; left: 0; background-image: url("../img/contents/brand-identity-naming-bg.jpg"); color: #fff;
                        .img{
                            img{filter: brightness(0) invert(1); width: auto; height: 30px;}
                        }
                    }
                    &:nth-child(2){
                        position: absolute;bottom: 0; left: 50%; transform: translateX(-50%); background-image: url("../img/contents/brand-identity-symbol-bg.jpg");
                        .img{
                            img{filter: brightness(0) invert(1); width: auto; height: 146px;}
                        }
                    }
                    &:nth-child(3){
                        position: absolute; bottom: 0; right: 0; background-image: url("../img/contents/brand-identity-color-bg.jpg");
                        color: #323232;
                        .btns{
                            button{
                                border-color: rgba(17,17,17,0.5);
                                .shape:before,
                                .shape:after{background-color: rgba(17,17,17,0.5);}
                                &:hover{ 
                                    background-color: rgba(17,17,17,0.2); border-color: transparent;
                                    .shape:before,
                                    .shape:after{background-color: rgba(17,17,17,0.2);}
                                }
                            }
                        }
                    }

                    &.naming{
                        .name{color: #7a7a7a;}
                    }
                    &.symbol{
                        .name{color: #a4a4a4;}
                    }
                    &.color{
                        .name{color: #7a7a7a;}
                    }

                    &.expand{
                        z-index: 2; width: 100%; height: 100%; transition: 1s 0.5s; cursor: initial;
                    }
                }
            }

            @media (width <= 1560px){
                > .txt{

                }
                .identity-wrap{
                    .identity-item{height: 320px;}
                }
            }
            @media (width <= 1280px){
                width: 100%; height: auto; aspect-ratio: 16 / 13;
                > .txt{
                    margin: 0 20px;
                }
                .identity-wrap{
                    left: 20px; right: 20px; top: 50px; bottom: 50px;
                    .identity-item{height: 280px;}
                }
            }
            @media (width <= 1024px){
                
            }
            @media (width <= 860px){
                height: 90svh;
                .identity-wrap{
                    left: 20px; right: 20px; top: 50px; bottom: 50px;
                    .identity-item{
                        height: 220px; width: calc((100% - 30px) / 3);
                        .name{font-size: 16px;}
                        .detail{
                            padding: 50px;
                            .img{
                                &.color{
                                    gap: 15px; width: 100%; display: flex; justify-content: center;
                                    span{font-size: 15px; height: 50px; width: auto; flex: 1; min-width: 0;}
                                }
                            }
                        }
                    }
                }
            }
            @media (width <= 640px){
                height: 80svh;
                > .txt{
                    padding: 0 0 60px;
                    .title{font-size: 22px;}
                }
                .identity-wrap{
                    left: 20px; right: 20px; top: 50px; bottom: 50px;
                    .identity-item{
                        height: 110px; width: calc((100% - 20px) / 3); border-radius: 20px;
                        .name{font-size: 14px;}
                        .detail{
                            padding: 40px 30px 20px; align-content: start; display: flex; flex-direction: column;
                            .img{
                                height: 60px; flex: 0 0 auto;
                                &.color{
                                    gap: 10px;
                                    span{font-size: 14px; height: 42px;}
                                }
                            }
                            .txt{
                                padding: 20px 0 0; flex: 1; min-height: 0; overflow-y: auto;
                                dt{font-size: 18px;}
                                dd{font-size: 13px;}
                            }
                            .btns{
                                padding: 10px 0 0; margin-top: auto; flex: 0 0 auto;
                                button{width: 50px;}
                            }
                        }

                        &:nth-child(1){
                            .img{
                                img{height: 14px;}
                            }
                        }
                        &:nth-child(2){
                            .img{
                                img{height: 50px;}
                            }
                        }
                        &:nth-child(3){
                            position: absolute; bottom: 0; right: 0; background-image: url("../img/contents/brand-identity-color-bg.jpg");
                            color: #323232;
                            .btns{
                                button{
                                    border-color: rgba(17,17,17,0.5);
                                    .shape:before,
                                    .shape:after{background-color: rgba(17,17,17,0.5);}
                                    &:hover{ 
                                        background-color: rgba(17,17,17,0.2); border-color: transparent;
                                        .shape:before,
                                        .shape:after{background-color: rgba(17,17,17,0.2);}
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

        & .brand-intro {
            display: flex; align-items: center;
            height: var(--fullHeight-minus-header-minus-subpagetit); 
            background: url("../img/contents/brand-intro1.jpg.html") no-repeat center; background-size: cover;

            & .txt {
                width: 100%;
                & .tit{
                    font-size: 36px; font-weight: 500; padding: 0 0 30px; transform: scale(0.94); animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
                    & em{font-style: normal; opacity: 0;}
                }
                & .des{
                    font-size: 14px;
                    & em {font-style: normal; opacity: 0;}
                }
            }
            &.active {
                & .txt {
                    & .tit{
                        transform: scale(0.94); animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
                        & em {
                            opacity: 0;
                            &:nth-child(1) {animation: fade-in 0.8s 0.15s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(2) {animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(3) {animation: fade-in 0.8s 0.45s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(4) {animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(5) {animation: fade-in 0.8s 0.75s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(6) {animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(7) {animation: fade-in 0.8s 1.05s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(8) {animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                        }
                    }
                    & .des{
                        transform: scale(0.94); animation: scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1);
                        & em{
                            opacity: 0;
                            &:nth-child(1) {animation: fade-in 0.8s 1.35s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(2) {animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(3) {animation: fade-in 0.8s 1.65s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                            &:nth-child(4) {animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);}
                        }
                    }
                }
            }
            @media (width <= 1280px){
                width: 100%; height: auto; aspect-ratio: 2 / 1;
            }
            @media (width <= 1024px){
                & .txt {
                    & .tit{font-size: 28px;}
                }
            }
            @media (width <= 860px){
                align-items: flex-end;
                height: var(--fullHeight-minus-header-minus-subpagetit); aspect-ratio: initial;
                background: url("../img/contents/brand-intro-bg-m.png.html") no-repeat; background-size: cover; background-position: top 25% center;
                & .txt {
                    padding: 0 0 60px;
                }
            }
            @media (width <= 640px){
                & .txt {
                    padding: 0 0 40px;
                    & .tit{font-size: clamp(18px,4.2vw,28px); padding: 0 0 5%;}
                }
            }
            @media (width <= 460px){
                & .txt {
                    & .tit{font-size: 16px; font-weight: 600;}
                }
            }
        }

        & .brand-logo {
            display: flex; flex-wrap: wrap; height: var(--view-height);

            & .left {
                display: flex; justify-content: center; align-items: center; flex-direction: column; width: 50%; padding: 0 0 0 260px;
                /* border-right: 1px solid #efefef; */

                & img {width: 100%; max-width: 382px; opacity: 0;}
            }
            & .right {
                display: flex; justify-content: center; align-items: center; flex-direction: column; width: 50%;
                gap: 40px; padding: 0 115px;

                & > div {width: 100%;}
                & .tit {
                    & p {font-size: 36px; font-weight: 500; opacity: 0;}
                }
                & .txt {
                    opacity: 0; padding: 0 12% 0 0;

                    & p {font-size: 18px; font-weight: 600; margin: 0 0 8px; color: #ccc;}
                    & span {font-size: 14px;}
                }
            }
            &.active {
                & .left {
                    & img {animation: fadeUpScale 0.5s both;}
                }
                & .right {
                    & .txt {animation: fadeLeft 0.5s both 0.5s;
                        &:last-child {animation: fadeLeft 0.5s both 1.0s;}
                    }
                }
            }

            @media (width <= 1600px){
                & .right .txt{padding: 0;}
            }
            @media (width <= 1024px) {
                & .left img {max-width: 280px;}
                & .right {padding: 0 50px; gap: 40px;}
                & .right .txt span br {display: none;}
            }
            @media (width <= 860px) {
                height: auto;
                & .left {width: 100%; border-left: none; border-right: none; border-bottom: 1px solid #efefef; padding: 60px 0;}
                & .right {width: 100%; padding: 60px 20px; gap: 0;}
                & .right .txt{}
                & .right .txt + .txt{margin-top: 20px;}
                & .right .txt p{margin: 0 0 10px;}
            }
            @media (width <= 640px) {
                & .left img {max-width: 200px;}
                & .right .txt p{font-size: 15px;}
            }
        }

        & .brand-value{

        }

        & .brand-quality{
            
        }

        & .brand-process{
            height: var(--view-height); background: #000; overflow: hidden;
            & > .inner-sm{height: 100%; align-content: center;}

            @media (width <= 1280px){
                width: 100%; height: auto; aspect-ratio: 16 / 13;
            }
            @media (width <= 860px){
                height: auto; aspect-ratio: 1 / 1.2; padding: 60px 0;
            }
            @media (width <= 640px){
                height: auto; aspect-ratio: initial; padding: 60px 0;
            }
        }

        & .brand-custom{
            height: var(--view-height); align-content: center;

            & .txt{
                text-align: center; padding: 0 0 100px;

                & .tit{font-size: 36px; font-weight: 500; line-height: 1; padding: 0 0 50px;}
                & .des{
                    font-size: 14px; font-weight: 400;
                }
            }

            & .custom-step{
                display: flex; flex-wrap: wrap; justify-content: center;

                & > li{
                    position: relative; width: 250px; width: 17.124%; height: auto; aspect-ratio: 1; border: 1px solid #e0e0e0; border-radius: 50%; overflow: hidden; cursor: pointer;

                    & .img{
                        position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: 0.2s;
                        & img{width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .des{
                        width: 100%; height: 100%; align-content: center; text-align: center;

                        & .num{font-size: 13px; font-weight: 700; color: #999; padding: 0 0 5px;}
                        & .name{font-size: 22px; font-weight: 700; color: #222;}
                    }

                    &:hover{
                        z-index: 1; border-color: transparent;
                        & .img{opacity: 1;}
                    }
                }
                & > li + li{
                    margin-left: -3.319%;
                }

                @media (width <= 1280px){
                    & > li{
                        & .des{
                            & .name{font-size: 1.8vw;}
                        }
                    }
                    & > li + li{
                        
                    }
                }
                @media (width <= 767px){
                    gap: 60px 30px;
                    & > li{
                        width: calc( (100% - 30px) / 2 ); border-radius: 0; aspect-ratio: initial; border: none;
                        & .img{
                            position: static; top: auto; left: auto; height: auto; opacity: 1; aspect-ratio: 1; width: 100%; margin: 0 auto;
                        }
                        & .des{
                            margin: 13px 0 0; height: auto; display: flex; align-items: center; flex-wrap: wrap; text-align: center; text-align: center; justify-content: center; gap: 5px; align-items: center;
                            & .num{padding: 0; font-size: 16px;}
                            & .name{font-size: 16px;}
                        }
                    }
                    & > li + li{
                        margin-left: 0;
                    }
                    & > li:last-child{
                        width: 70%;
                        
                    }
                }
                @media (width <= 640px){
                    gap: 30px 20px;
                }
            }
            @media (width <= 1600px){
                height: auto; padding: 140px 0;
            }
            @media (width <= 860px){
                padding: 80px 0;
                & .txt{
                    padding: 0 0 60px;
                }
            }
            @media (width <= 767px){
                & .txt{
                    & .tit{
                        font-size: 24px; padding: 0 0 30px;
                    }
                }
            }
        }

        & .brand-collection{
            & .tit{font-size: 36px; font-weight: 500; line-height: 1; padding: 0 0 50px;}
            
            & .collection-slide{
                width: calc(100% + 70px); overflow: hidden;
            }

            @media (width <= 767px){
                & .tit{font-size: 24px; padding: 0 0 30px;}
            }
        }
    }
}

/* ABOUT - DESIGN */
.design-wrap{

    & .design{

        & .design-item{}

        & .design-designer{
            padding: 120px 0 80px;
            & > .inner-sm{
                display: flex; flex-wrap: wrap;

                & .designer-txt{
                    flex: 0 0 auto; width: 280px; align-content: center;
                    & .tit{font-size: 26px; font-weight: 400; color: #000;}
                }
                & .designer-slide{
                    flex: 1; min-width: 0;
                }
                & .control{
                    padding: 37px 0 0 280px; flex: 0 0 auto; width: 100%; display: flex; flex-wrap: wrap; gap: 15px;
                    & .btn_designer_slide{
                        position: relative; width: 50px; height: auto; aspect-ratio: 1; border-radius: 50%; font-size: 0; background: rgba(166,166,167,0.1); transition: 0.2s;
                        &:before{content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #111;}
                        &.btn_designer_slide_prev:before{border-left: 2px solid #111; transform: translate(-50%, -50%) rotate(-45deg);}
                        &.btn_designer_slide_next:before{border-right: 2px solid #111; transform: translate(-50%, -50%) rotate(45deg);}
                        &:hover{
                            background: rgba(166,166,167,0.4);
                        }
                    }
                    & .page{display: none;}
                }
            }

            @media (width <= 1280px){
                & > .inner-sm{
                    & .designer-txt{width: 20vw;}
                    & .control{padding: 37px 0 0 20vw;}
                }
            }
            @media (width <= 860px){
                padding: 120px 0 80px;
                & > .inner-sm{
                    & .designer-txt{
                        flex: 0 0 auto; width: 100%; margin: 0 0 12px;
                        & .tit br{display: none;}
                    }
                    & .designer-slide{flex: 0 0 auto; width: calc(100% + 20px); margin: 0;}
                    & .control{padding: 35px 0 0 0; justify-content: center;}
                }
            }
            @media (width <= 768px){
                padding: 50px 0 50px;
            }
        }

        & .design-personal-consult{
            position: relative; height: var(--view-height); width: 100%;
            & .fixed-txt{
                position: absolute; z-index: 2; top: 115px; left: 0; width: 100%; text-align: center;
                & > .inner-sm{
                    & .title{font-size: 24px;}
                    & .desc{font-size: 14px; line-height: 1.6; padding: 29px 0 35px;}
                    & .tab-personal{
                        display: flex; flex-wrap: wrap; gap: 35px; justify-content: center;
                        & .tab-personal-btn{background: rgba(17,17,17,0.2); font-size: 16px; font-weight: 400; display: block; white-space: initial; line-height: 33px; border: 1px solid transparent; color: #fff; width: 100px; text-align: center;}
                        & .tab-personal-btn.on{background: rgba(17,17,17,0.6);}
                        & .tab-personal-btn span{}
                        & .tab-personal-btn span:after{content: ""; display: inline-block; vertical-align: middle; margin: -1px 0 0 8px; width: 6px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
                    }
                }
            }
            & .tab-cont{
                height: 100%;
            }

            @media (width <= 1280px){
                height: auto; aspect-ratio: 16 / 13;
            }
            @media (width <= 640px){
                height: auto; aspect-ratio: 1 / 1.2;
                & .fixed-txt{
                    top: 0; padding: 50px 0 0;
                    & > .inner-sm{
                        & .title{font-size: 22px;}
                        & .desc{
                            text-wrap: balance; padding: 15px 0 25px;
                            & br{display: none;}
                        }
                        & .tab-personal{gap: 10px;}
                    }
                }
            }
        }

        & .design-process{
            position: relative;
            & > .tit{
                position: absolute; z-index: 2; top: 0; left: 0; width: 100%; color: #fff; text-align: center; font-size: 26px; padding: 112px 0 0;
                & .inner-sm{
                    & p{font-size: 26px;}
                }
            }

            @media (width <= 640px){
                & > .tit{
                    padding: 50px 0 0;
                    & .inner-sm{
                        & p{font-size: 22px;}
                    }
                }
            }
        }
    }
}

/* ABOUT - SHOW ROOM */
.room-wrap {
    & .room {
        & .room-item {position: relative;}
        & .room-cp{padding: 0 0 0;}
        & .room-mosaic{
            background: #111; height: var(--view-height); overflow: hidden;
            display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
            @media (width <= 640px){
                
            }
        }
        & .room-visual-swiper{
            position: relative; width: 100%; height: 100%; overflow: hidden;
            @media (hover: hover) and (pointer: fine) {
                /* 터치가 아닌 장치에서만 적용 */
                min-height: 800px;
            }

            & .list{}
            & .item{
                position: relative; overflow: hidden; height: 100%;
                
                & .room-visual-bg{
                    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; min-width: 1920px; height: auto; aspect-ratio: 16 / 9;
                    
                    & img{display: block; width: 100%; height: 100%; object-fit: cover;}
                    & iframe{width: 100%; height: 100%; object-fit: cover;}
                }
                & .room-visual-txt{
                    position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; padding: 0 0 100px;

                    & h2{
                        margin: 0 0 20px;

                        & span{font-size: 36px; line-height: 1; font-weight: 500; opacity: 0; transition: all 1s; filter: blur(10px);}
                        & span:nth-child(1) {animation-delay: 0ms !important;     transition-delay: 0ms;}
                        & span:nth-child(2) {animation-delay: 100ms !important;   transition-delay: 100ms;}
                        & span:nth-child(3) {animation-delay: 200ms !important;   transition-delay: 200ms;}
                        & span:nth-child(4) {animation-delay: 300ms !important;   transition-delay: 300ms;}
                        & span:nth-child(5) {animation-delay: 400ms !important;   transition-delay: 400ms;}
                        & span:nth-child(6) {animation-delay: 500ms !important;   transition-delay: 500ms;}
                        & span:nth-child(7) {animation-delay: 600ms !important;   transition-delay: 600ms;}
                        & span:nth-child(8) {animation-delay: 700ms !important;   transition-delay: 700ms;}
                        & span:nth-child(9) {animation-delay: 800ms !important;   transition-delay: 800ms;}
                        & span:nth-child(10){animation-delay: 900ms !important;   transition-delay: 9000ms;}
                        & span:nth-child(11){animation-delay: 1000ms !important;  transition-delay: 1000ms;}
                        & span:nth-child(12){animation-delay: 1100ms !important;  transition-delay: 1100ms;}
                    }
                    & .more-arr{
                        transform: translateY(30%); opacity: 0;
                        &.no-animation{
                            transform: translateY(0); opacity: 1; animation: none !important;
                        }
                    }
                }
                &.swiper-slide-active {
                    & .room-visual-txt {
                        & h2 {
                            & span {/* animation: textBlur 1s both; */ opacity: 1; filter: blur(0);}
                        }
                        & .more-arr {
                            animation: textClip 1s both; animation: textFadeup 1s both; animation-delay: 850ms !important;
                        }
                    }
                }
            }

            @media (width <= 1280px){
                & .item {
                    & .visual-bg {width: 1650px; min-width: auto;}
                }
            }
            @media (width <= 860px){
                height: 80svh;
                & .item {
                    & .visual-bg {width: 1580px; min-width: auto;}
                    & .visual-txt {
                        padding: 0 0 70px;
                        & h2{
                            & span {font-size: 30px;}
                        }
                    }
                }
            }
            @media (width <= 640px){
                & .item {
                    & .visual-txt {
                        & h2{
                            & span {font-size: 24px;}
                        }
                    }
                }
            }
        }
    }
}

/* ABOUT - SERVICE */
.service-wrap{

    & .service{

        & .service-item{}

        & .service-as{
            align-content: center; padding: 120px 0 80px;
            & > .inner-sm{
                display: flex; flex-wrap: wrap;

                & .as-txt{
                    flex: 0 0 auto; width: 280px; align-content: center;
                    & .tit{font-size: 26px; font-weight: 400;}
                    & .control{
                        /* 위치 이동으로 미사용 */
                        /* display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 30px 0 0;

                        & .btn_as_slide{
                            position: relative; width: 16px; height: auto; aspect-ratio: 1; font-size: 0;
                            &:before{content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #111;}
                            &.btn_as_slide_prev:before{border-left: 2px solid #111; transform: translate(-50%, -50%) rotate(-45deg);}
                            &.btn_as_slide_next:before{border-right: 2px solid #111; transform: translate(-50%, -50%) rotate(45deg);}
                        }
                        & .page{
                            display: inline-flex; gap: 0.2em; font-size: 14px; font-weight: 600; font-family: 'NanumSquare'; line-height: 1; color: #ccc;
                            & span.current{color: #111;}
                        } */
                    }
                }
                & .as-slide{
                    flex: 1; min-width: 0;
                }
                & .control{
                    padding: 37px 0 0 280px; flex: 0 0 auto; width: 100%;
                    display: flex; flex-wrap: wrap; align-items: center; gap: 4px;

                    & .btn_as_slide{
                        position: relative; width: 16px; height: auto; aspect-ratio: 1; font-size: 0;
                        &:before{content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #111;}
                        &.btn_as_slide_prev:before{border-left: 2px solid #111; transform: translate(-50%, -50%) rotate(-45deg);}
                        &.btn_as_slide_next:before{border-right: 2px solid #111; transform: translate(-50%, -50%) rotate(45deg);}
                    }
                    & .page{
                        display: inline-flex; gap: 0.2em; font-size: 14px; font-weight: 600; font-family: 'NanumSquare'; line-height: 1; color: #ccc;
                        & span.current{color: #111;}
                    }
                }
            }

            @media (width <= 1280px){
                & > .inner-sm{
                    & .as-txt{width: 20vw;}
                    & .control{padding: 37px 0 0 20vw;}
                }
            }
            @media (width <= 860px){
                padding: 120px 0 80px;
                & > .inner-sm{
                    & .as-txt{
                        flex: 0 0 auto; width: 100%; margin: 0 0 12px;
                        & .tit br{display: none;}
                    }
                    & .as-slide{flex: 0 0 auto; width: calc(100% + 20px); margin: 0;}
                    & .control{padding: 35px 0 0 0; justify-content: center;}
                }
            }
            @media (width <= 768px){
                padding: 50px 0 50px;
            }
        }

        & .service-faq{
            background: #f1f1f1; padding: 0 0 50px;
        }

        & .service-rental{
            position: relative; height: var(--view-height); /* background: url("/assets/site/img/contents/bg-service-rental.jpg") no-repeat center; background-size: cover; */ background-color: #ddd;

            & .bg-group{
                & .bg{
                    opacity: 0; position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; pointer-events: none; transition: 1s ease-in-out;
                    &.bg1{background-image: url("../img/contents/bg-service-rental-tiara.jpg");}
                    &.bg2{background-image: url("../img/contents/bg-service-rental-ring.jpg");}

                    &.on{opacity: 1;}
                }
            }

            & > .inner-sm{
                height: 100%; display: flex; flex-direction: column;
                & .sec-tit-sub{flex: 0 0 auto;}
            }

            @media (width <= 1280px){
                height: auto;
            }
            @media (width <= 640px){
                height: auto;
            }
        }

        & .service-visual{}

        & .service-grid{}
    }

    & .service-grid-list{
        display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto-fill, minmax(50px, auto)); grid-row-gap: 0; grid-column-gap: 0;
        
        & > li{
            position: relative; aspect-ratio: 960 / 980;
            & .img{
                position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden;
                & img{object-fit: cover; width: 100%; height: 100%;}
            }
            & .txt{
                position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 8.334% 7.3%; align-content: baseline; color: #fff;

                & dt{font-size: 22px; font-weight: 800; line-height: 1; padding: 0 0 30px;}
                & dd{font-size: 14px;}
            }
        }

        @media (width <= 1024px){
            & > li{
                & .txt{
                    & dt{padding: 0 0 20px;}
                }
            }
        }
        @media (width <= 640px){
            grid-template-columns: repeat(1, 1fr);
            & > li{
                aspect-ratio: 2 / 1.25;
                & .txt{
                    padding: 35px 20px;
                    & dt{font-size: 20px;}
                }
            }
        }
    }
}

/* ABOUT - LOCATION */
.location-wrap {
    & .location {
        & .location-item {position: relative;}

        & .location-map {
            
            & .mapbox {
                position: relative; height: 683px; margin: 37px 0 0;
                &:after{content: "forCover"; position: absolute; z-index: 1; width: 100%; height: 100%; top: 0; left: 0; font-size: 0;}

                & .root_daum_roughmap {width: 100%; height: 100%;}
                & .root_daum_roughmap .wrap_map {height: 100%;}
                & .root_daum_roughmap .wrap_map .map {height: 100%;}
                & .root_daum_roughmap .wrap_controllers,
                & .root_daum_roughmap .cont,
                & .root_daum_roughmap .wrap_map .map > div:nth-child(2),
                & .root_daum_roughmap .map_border {display: none;}
                & .roughmap_maker_label:after{content: ""; position: absolute; top: 100%; left: 50%; margin: -1px 0 0; transform: translateX(-50%); display: block; width: 0; height: 0; border-style: solid; border-width: 7px 7px 0px 7px; border-color: #222 transparent transparent transparent;}
                & .roughmap_maker_label .roughmap_lebel_text{background-color: #222; color: #fff; font-size: 16px; font-weight: 700; line-height: 36px; padding: 0 18px; border-radius: 5px;}
                & .roughmap_maker_label .roughmap_lebel_text:before{content: ""; display: inline-block; vertical-align: middle; margin: -4px 4px 0 0; width: 23px; height: auto; aspect-ratio: 36 / 33.25; 
                    background: url("../img/contents/location-mappin-logo.svg") no-repeat center; background-position: center; background-size: 100% auto;}
                & .root_daum_roughmap .wrap_btn_zoom{display: none;}

                @media (width <= 860px){
                    
                }
                @media (width <= 640px){
                    height: auto; width: 100%; aspect-ratio: 1.7 / 1;
                }
            }
            
            & .info{
                padding: 120px 0 0;
                & .infobox{
                    display: flex; flex-direction: column;
                    & > dl{
                        display: flex; flex-wrap: wrap; align-items: flex-start;
                        & > dt{
                            flex: 0 0 auto; width: 300px; border-bottom: 1px solid #e2e2e2; font-size: 16px; font-weight: 400; line-height: 36px; color: #000;
                            & span{display: inline-block; line-height: 1; vertical-align: top;}
                            & span em{font-style: normal;}
                        }
                        & > dd{
                            flex: 1; min-width: 0; display: flex; flex-wrap: wrap;
                            & .infobox-d2{
                                width: 33.333%;
                                &:nth-child(1){width: 37.07%;}
                                &:nth-child(2){width: 37.07%;}
                                &:nth-child(3){width: 25.86%;}


                                & > dt{
                                    border-bottom: 1px solid #e2e2e2; font-size: 16px; font-weight: 400; line-height: 36px;
                                    & span{display: inline-block; line-height: 1; vertical-align: top;}
                                }
                                & > dd{
                                    padding: 15px 0 72px;
                                    & .list{font-size: 14px; line-height: 1.7;}
                                }

                                &.fill{
                                    width: auto !important; flex: 1; min-width: 0;
                                }
                                &.w100{
                                    flex: 0 0 auto; width: 100% !important; /* margin: -30px 0 0; */
                                }
                            }
                        }
                    }
                }

                @media (width <= 1280px){
                    & .infobox{
                        & > dl{
                            & > dt{width: 220px;}
                            & > dd{
                                & .infobox-d2{
                                    & > dd{padding: 15px 0 50px;}
                                    /* &:nth-child(1){width: 33.333%;} */
                                    /* &:nth-child(2){width: 33.333%;} */
                                    /* &:nth-child(3){width: 33.333%;} */
                                }
                            }
                        }
                    }
                }
                @media (width <= 1023px){
                    padding: 60px 0 0;
                    & .infobox{
                        & > dl{
                            & > dt{width: 220px;}
                            & > dd{
                                & .infobox-d2{
                                    &:nth-child(1){width: 100%; flex: 0 0 auto;}
                                    &:nth-child(2){width: 100%; flex: 0 0 auto;}
                                    &:nth-child(3){width: 100%; flex: 0 0 auto;}

                                    &.fill{width: 100% !important;}
                                    &.w100{margin: 0;}
                                }
                            }
                        }
                    }
                }
                @media (width <= 640px){
                    & .infobox{
                        & > dl{
                            & > dt{
                                font-size: 16px; width: 80px; line-height: 28px;
                                span{}
                                span .m-hide{display: none;}
                            }
                            & > dd{
                                & .infobox-d2{
                                    & > dt{font-size: 15px; line-height: 28px;}
                                    & > dd{
                                        padding: 15px 0 50px;
                                        & .list{}
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* ABOUT - RESERVATION */
.reservation-wrap {
    & .reservation{
        /* 페이지 내 사용되는 컴포넌트들 */
        & .reserve-checker{
            display: inline-flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; font-size: 14px; color: #999;
            & > input{position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden; opacity: 0;}
            & > input + .shape{flex: 0 0 auto; position: relative; display: inline-block; vertical-align: middle; margin: 2px 0 0 0; width: 15px; height: auto; aspect-ratio: 1; border-radius: 50%; border: 1px solid #ccc;}
            & > input + .shape:before{content: ""; position: absolute; top: 3px; left: 3px; width: 7px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #111; opacity: 0;}
            & > input:checked + .shape{}
            & > input:checked + .shape:before{opacity: 1;}
            & em{font-style: normal;}
        }
        & .reserve-type-list{
            display: flex; flex-direction: column; gap: 12.5px; padding: 6px 0 0;
            & > li{
                & .related-ip{display: none; height: 53px; border: 1px solid #ccc; border-radius: 10px; padding: 0 34px; color: #999; font-size: 14px; margin: 13px 0 7px 27px; width: calc(100% - 27px);}
                & .reserve-checker:has(input:checked) ~ .related-ip{display: block;}

                &.error{
                    & .reserve-checker em{color: #ff2727;}
                }
            }
        }
        & .promo-group{
            & .promo-list{
                display: flex; flex-direction: column; gap: 20px;
            }
            & .promo-item{
                position: relative; border: 1px solid #dfdfdf; border-radius: 13px; padding: 16px 60px 16px 35px;
                & .name{font-size: 14px;}
                & .desc{
                    p{
                        font-size: 16px; line-height: 1.2; padding: 12px 0 0;
                        span{display: inline-block; vertical-align: middle; margin: -2px 0 0 0; font-size: 22px; font-weight: 400;}
                    }

                    input{position: absolute; left: -9999px;}
                    input + .shape{
                        position: absolute; top: 50%; transform: translateY(-50%); right: 35px; display: inline-block; width: 18px; height: auto; aspect-ratio: 1; border: 1px solid #ccc; border-radius: 50%;
                        &:before{content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #111; opacity: 0;}
                    }
                    input:checked + .shape{
                        &:before{opacity: 1;}
                    }
                    input[disabled] + .shape{
                        
                    }
                }
                & .disable-guide{
                    /* display: none; */ font-size: 12px; color: #ff2727; padding: 3px 0 0;
                }

                &:has(input:checked){
                    border-color: #111;
                }
                &:has(input[disabled]){
                    border-color: #f5f5f5; cursor: not-allowed;
                    & .name{opacity: 0.3;}
                    & .desc{opacity: 0.3;}
                }
            }
            & .note-list{
                padding: 17px 0 0 19px;
                li{
                    position: relative; padding: 0 0 0 0.7em; font-size: 14px; color: #a6a6a7;
                    &:before{content: "*"; position: absolute; top: 0; left: 0;}
                }
            }

            @media (width <= 1280px){
                & .promo-item{
                    & .desc{
                        input + .shape{
                            width: 15px; right: 30px;
                            &:before{width: 7px;}
                        }
                    }
                }
            }
            @media (width <= 640px){
                & .promo-list{
                    gap: 14px;
                }
                & .promo-item{
                    padding: 16px 40px 16px 20px;
                    & .name{font-size: 12px;}
                    & .desc{
                        p{font-size: 14px; padding: 10px 0 0;}
                        input + .shape{
                            width: 15px; right: 20px;
                            &:before{width: 7px;}
                        }
                    }
                }
                & .note-list{
                    padding: 10px 0 0 10px;
                    li{font-size: 12px;}
                }
            }
        }
        & .reserve-btn-wrap{
            display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 80px 0 0;
            & .reserve-form-btn{
                font-size: 16px; line-height: 55px; border-radius: 10px; text-align: center; padding: 0 35px; color: #fff; background-color: #111;
                &.disabled{background-color: #ccc;}
            }

            @media (width <= 1280px){
                margin: 60px 0 0;
            }
            @media (width <= 640px){
                margin: 40px 0 0;
            }
        }
    }

    & .reservation-steps{
        --gap-large: 70px;
        padding: 114px 0 120px;

        & > .inner-sm{}

        & .reserve-page-tit{
            text-align: center; color: #000;
            & .tit{font-size: 22px;}
            & .sub{font-size: 16px; padding: 31px 0 0;}
            & .sub .m-only{display: none;}
        }
        & .reserve-contents{
            margin: 37px 0 0; display: flex; flex-wrap: wrap; gap: 40px var(--gap-large);
        }

        & .reserve-border{
            flex: 1; min-width: 0; width: auto; border: 1px solid #ccc; border-radius: 27px; padding: 36px 69px;
            &.w100{flex: 0 0 auto; width: 100%;}

            /* 제목 */
            & .reserve-tit{
                font-size: 20px; font-weight: 400; color: #000; margin: 0 0 30px; line-height: 1.2;
                & .name{
                    position: relative; display: inline-block;
                    &.must{
                        &:before{content: ""; position: absolute; top: 2px; right: -7px; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background-color: #ff3333;}
                    }
                }
                & .result{display: block; font-size: 16px; color: #999; padding: 15px 0 0;}
                & .result em{font-style: normal; color: #000;}
            }
            & .reserve-tit ~ .reserve-tit{padding: 32px 0 0;}

            /* 날짜 + 시간 선택 */
            & .reserve-ymd{
                display: flex; flex-wrap: wrap; gap: 0 var(--gap-large);

                & .reserve-cal{
                    flex: 0 0 auto; width: calc((100% - var(--gap-large)) / 2); border: 1px solid #ccc; border-radius: 27px; padding: 36px 0 19px;
                    & .reserve-cal-top{
                        position: relative; display: flex; flex-wrap: wrap; justify-content: center; font-weight: 400; color: #000; font-size: 16px; padding: 0 0 35px; border-bottom: 1px solid #ccc; margin: 0 71px;
                        & button{
                            flex: 0 0 auto; position: relative; width: 20px; height: auto; aspect-ratio: 1; background: transparent; font-size: 0; margin: -1px 0 0;
                            &:before{content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #000;}

                            &.reserve-cal-prev{}
                            &.reserve-cal-next{}
                            &.reserve-cal-prev:before{border-left: 2px solid #000; transform: translate(-50%, -50%) rotate(-45deg);}
                            &.reserve-cal-next:before{border-right: 2px solid #000; transform: translate(-50%, -50%) rotate(45deg);}
                        }
                        & .ym{text-align: center; width: 115px;}
                    }
                    & .reserve-cal-mid {
                        display: flex; flex-direction: column; gap: 20px; padding: 35px 50px 0;

                        & .week {
                            display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; text-align: center;
                            & p {font-size: 12px; color: #000; padding: 4px 0;}
                            & p:nth-child(1) {color: #cc0000;}
                        }
                        & .day {
                            display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 20px; text-align: center;
                            
                            & button {position: relative; display: flex; justify-content: center; align-items: center; font-size: 16px; text-align: center; /* aspect-ratio: 1.15 / 1; */ aspect-ratio: initial; height: 52.3px; border-radius: 50%; color: #000;}
                            & button:before{content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: auto; aspect-ratio: 1; border-radius: 8px; background: #f5f5f5; opacity: 0;}
                            & button:nth-child(7n+1){color: #cc0000;}
                            & button:disabled {opacity: 0.25;}
                            & button.on {/* background: #222; */ color: #fff;}
                            & button.on:before{background: #111; opacity: 1;}
                            & button:hover {/* background: #f5f5f5; */}
                            & button:hover:before{opacity: 1;}
                            & button:disabled:hover {background: none; cursor: not-allowed;}
                        }
                    }
                }

                & .reserve-time{
                    flex: 0 0 auto; width: calc((100% - var(--gap-large)) / 2); display: flex; flex-direction: column; gap: 20px;
                    & > dl{
                        display: flex; flex-wrap: wrap;
                        & dt{flex: 0 0 auto; width: 69px; text-align: left; line-height: 52px; font-size: 16px; font-weight: 500;}
                        & dd{
                            flex: 1; min-width: 0;
                            & .reserve-time-list{
                                display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, minmax(10px, auto)); gap: 20px;
                                & button{
                                    display: block; width: 100%; height: 52px; line-height: 50px; border-radius: 8px; border: 1px solid #ccc; text-align: center; font-size: 16px; background: #fff;
                                    &.on{color: #fff; background: #111; border-color: transparent;}
                                    &[disabled]{color: #ccc; cursor: not-allowed;}
                                }
                            }
                        }
                    }
                    & .guide-box{
                        background: #f7f7f7; border-radius: 8px; padding: 17px 35px; margin: auto 0 0 69px;
                        & .title{font-size: 15px; padding: 0 0 12px;}
                        & .dot-list{
                            font-size: 14px; display: flex; flex-direction: column; gap: 3px;
                            > li{position: relative; padding: 0 0 0 10px;}
                            > li:before{content: "·"; position: absolute; top: 0; left: 0;}
                        }
                        & .txt{
                            font-size: 14px;
                        }
                    }
                }

                & > .reserve-box{
                    flex: 1; min-width: 0; border: 1px solid #ccc; padding: 0 40px;
                    & .reserve-top{
                        border-bottom: 1px solid #ccc; padding: 34px 30px 26px; text-align: center; font-size: 0; /* 인라인 엑스트라 마진 제거용 */
                        
                        & .reserve-seleted{
                            font-size: 15px; font-weight: 600; color: #000; font-family: 'NanumSquare'; text-align: left;
                            & span{color: #999;}
                        }
                    }
                    
                }
            }

            /* 예약자 정보 입력 */
            & .reserve-personal{
                display: flex; flex-wrap: wrap; gap: var(--gap-large);
                & .form{
                    flex: 0 0 auto; width: calc((100% - var(--gap-large)) / 2);

                    > ul {
                        > li {
                            margin: 0 0 23px;
                            &:last-child {margin: 0;}
                            & .form-cate {
                                display: none; margin: 0 0 8px;
                                & p {position: relative; font-size: 14px; font-weight: 600; padding: 0 0 0 14px;
                                    &.est::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 6px; background: #A5A6A6; border-radius: 50%;}
                                }
                            }
                            & .form-input {
                                position: relative; display: flex; align-items: center; border-bottom: 1px solid #e4e4e4;
                                & input {border: 0; font-size: 14px; height: 53px; padding: 0 7px 0 7px; color: #111;}
                                & select {border: 0; font-size: 14px; height: 53px; background: url("../img/common/form_sel_arrow_new.png") no-repeat center right 10px; padding: 0 25px 0 19px; cursor: pointer;}
                                & textarea {border: 0; font-size: 14px; /* padding: 12px 0; */ padding: 0px 7px 0; color: #111; box-sizing: border-box !important;}
                                & textarea:focus{padding-top: 17px;}
                                & textarea.auto-resize{min-height: 53px; height: 53px; overflow-y: auto; resize: none; line-height: 1.4; padding-top: 17px; max-height: 200px;}
                                & textarea.auto-resize.grown{margin-bottom: 15px;}

                                & input + label{position: absolute; top: 50%; left: 7px; transform: translateY(-50%); transition: 0.1s; pointer-events: none; font-size: 14px; font-weight: 400; color: #111; line-height: 1;}
                                & input + label span.red{color: #ff3333;}
                                & input:focus + label{top: 4px; transform: translateY(-50%); font-size: 12px; color: #a6a6a7;}
                                & input:focus + label span{display: none;}
                                & input:not(:placeholder-shown):not(:focus) + label { top: 4px; transform: translateY(-50%); font-size: 12px; color: #a6a6a7;}
                                & input:not(:placeholder-shown):not(:focus) + label span {display: none;}

                                & textarea + label{position: absolute; top: 50%; left: 7px; right: 16px; transform: translateY(-50%); transition: 0.1s; pointer-events: none; font-size: 14px; font-weight: 400; color: #111; line-height: 1;}
                                & textarea + label span.red{color: #ff3333;}
                                & textarea:focus + label{top: 4px; transform: translateY(-50%); font-size: 12px; color: #a6a6a7; background-color: #fff;}
                                & textarea:focus + label:before{content: ""; position: absolute; z-index: -1; bottom: -5px; left: 0; right: 0; top: 0; background-color: #fff;}
                                & textarea:focus + label span{display: none;}
                                & textarea:not(:placeholder-shown):not(:focus) + label {top: 4px; transform: translateY(-50%); font-size: 12px; color: #a6a6a7; background-color: #fff;}
                                & textarea:not(:placeholder-shown):not(:focus) + label:before{content: ""; position: absolute; z-index: -1; bottom: -5px; left: 0; right: 0; top: 0; background-color: #fff;}
                                & textarea:not(:placeholder-shown):not(:focus) + label span {display: none;}

                                &.email{
                                    font-size: 14px;
                                }
                            }

                            &.error{
                                & .form-input{
                                    & input + label{color: #ff2727;}
                                    & textarea + label{color: #ff2727;}
                                }
                            }
                        }
                    }
                }
                & .guide-box{
                    flex: 0 0 auto; width: calc((100% - var(--gap-large)) / 2); margin: -52px 0 0 0;
                    background: #f7f7f7; border-radius: 8px; padding: 35px 40px 35px 70px;
                    & .title{font-size: 15px; padding: 0 0 12px;}
                    & .title ~ .title{margin-top: 33px;}
                    & .title.must span{position: relative;}
                    & .title.must span:before{content: ""; position: absolute; top: 0; left: 100%; margin: 2px 0 0 3px; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background-color: #ff3333;}
                    & .dot-list{
                        font-size: 14px; display: flex; flex-direction: column; gap: 3px;
                        > li{position: relative; padding: 0 0 0 10px;}
                        > li:before{content: "·"; position: absolute; top: 0; left: 0;}
                    }
                    & .txt{
                        font-size: 14px; line-height: 1.55;
                    }
                    & .chklist{
                        padding: 14px 0 0; display: flex; flex-direction: column; gap: 3px;
                        & li{
                            & .reserve-checker{color: #111;}

                            &.error{
                                & em{color: #ff2727;}
                            }
                        }
                    }
                }
            }

            /* 더 보기 */
            & > .more-arr{
                margin: 35px 0 0 19px;
            }
        }

        @media (width <= 1560px){
            & .reserve-border{
                padding: 40px 40px;
                & .reserve-personal{
                    & .guide-box{padding: 35px 50px;}
                }
            }
        }
        @media (width <= 1280px){
            --gap-large: 40px;
            padding: 80px 0 60px;

            & .reserve-border{
                & .reserve-personal{
                    & .guide-box{padding: 35px 35px;}
                }
                & .reserve-ymd{
                    & .reserve-cal{
                        & .reserve-cal-top{margin: 0 40px;}
                        & .reserve-cal-mid{padding: 35px 30px 0;}
                    }
                    & .reserve-time{
                        & > dl{
                            & dt{width: 50px;}
                            & dd{
                                & .reserve-time-list{gap: 10px;}
                            }
                        }
                        & .guide-box{margin: auto 0 0 50px;}
                    }
                }
            }
        }
        @media (width <= 1024px){
            & .reserve-border{
                flex: 0 0 auto; width: 100%;

                & .reserve-ymd{
                    flex-direction: column; gap: var(--gap-large);
                    & .reserve-cal{
                        width: 100%;
                    }
                    & .reserve-time{
                        width: 100%;
                        & .guide-box{
                            margin: 0;
                        }
                    }
                }
            }
        }
        @media (width <= 860px){
            --gap-large: 40px;

            & .reserve-border{
                & .reserve-personal{
                    flex-direction: column;
                    & .form{
                        width: 100%;
                    }
                    & .guide-box{
                        width: 100%; margin: 0;
                    }
                }
            }
        }
        @media (width <= 640px){
            padding: 50px 0 40px;

            & .reserve-page-tit{
                & .sub{padding: 20px 0 0; font-size: 14px;}
                & .sub .m-only{display: block;}
            }

            & .reserve-border{
                flex: 0 0 auto; width: 100%; padding: 30px 20px 20px;

                & .reserve-tit{
                    font-size: 18px; margin: 0 0 22px;
                    & .result{font-size: 15px;}
                }

                & .reserve-ymd{
                    flex-direction: column; gap: var(--gap-large);
                    & .reserve-cal{
                        width: 100%; padding: 20px 0px;
                        & .reserve-cal-top{
                            margin: 0 25px; padding: 0 0 20px;
                        }
                        & .reserve-cal-mid{
                            padding: 20px 20px 0; gap: 12px;
                            & .week{font-size: 15px;}
                            & .day{
                                gap: 0 20px;
                                & button{height: 36px; font-size: 14px;}
                                & button:before{width: 30px; border-radius: 5px;}
                            }
                        }
                    }
                    & .reserve-time{
                        width: 100%;
                        & .guide-box{padding: 25px 20px;}
                        & > dl{
                            & dt{font-size: 15px; width: 45px; line-height: 1; padding: 14px 0 0;}
                            & dd{
                                & .reserve-time-list{
                                    gap: 7px;
                                    & button{font-size: 13px; height: 46px; line-height: 44px;}
                                }
                            }
                        }
                    }
                }
                & .reserve-personal{
                    flex-direction: column;
                    & .form{
                        width: 100%;
                        & > ul{
                            > li{margin: 0 0 10px;}
                        }
                    }
                    & .guide-box{
                        width: 100%; margin: 0; padding: 25px 20px;
                        & .title{}
                        & .txt{}
                        & .chklist{}
                    }
                }
            }
        }
    }

    & .reservation-visual{
        height: var(--view-height); align-content: center; background: url("../img/contents/reservation-visual.jpg") no-repeat center; background-size: cover;
        & .txt{
            color: #fff; text-align: center;
            & .title{font-size: 22px;}
            & .desc{font-size: 14px; line-height: 1.55; padding: 31px 0 0;}
            & .links{
                padding: 36px 0 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
                & a{display: inline-block; font-size: 15px; border: 1px solid rgba(255,255,255,0.5); border-radius: 10px; line-height: 52px; padding: 0 35px;}
                & a span{}
                & a span:after{content: ""; display: inline-block; vertical-align: middle; margin: -1px 0 0 7px; width: 6px; height: auto; aspect-ratio: 1; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
            }
        }

        @media (width <= 1024px){
            height: auto; padding: 15% 0;
        }
        @media (width <= 640px){
            height: auto; padding: 40px 0;
            & .txt{
                & .title{font-size: 20px;}
                & .desc{text-wrap: balance;}
            }
        }
    }

    & .reservation-complete{
        & .txt {
            display: flex; flex-direction: column; gap: 18px; align-items: center; padding: 60px 0 58px;

            & .chk-mark{
                position: relative; width: 45px; height: auto; aspect-ratio: 1; border: 1px solid #111; border-radius: 50%;
                &:before{content: ""; position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 20px; height: 11px; border-left: 3px solid #000; border-bottom: 3px solid #000;}
            }
            & p {font-weight: 400; font-size: 15px;}
        }
        & .reserve-sum{
            border: 1px solid #f0f0f0; border-radius: 30px; padding: 35px 39px 39px; max-width: 480px; margin: 0 auto;
            > dl{
                > dt{
                    display: flex; flex-wrap: wrap; margin: 0 0 34px;
                    .title{font-size: 14px;}
                    .back-to-modify-reserve{
                        margin: 0 0 0 auto; display: inline-block; font-size: 12px; color: #111;
                        &:after{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0 8px; width: 7px; height: 8px; background: url("../img/contents/back-to-modify-arr.png") no-repeat center / 100% auto; filter: brightness(0) saturate(100%);}
                    }
                }
                > dd{
                    .sub{
                        > li{
                            border-bottom: 1px solid #dfdfdf; padding: 0 0 16px;
                            .name{font-size: 12px; color: #a6a6a7; margin: 0 0 3px;}
                            .cont{font-size: 14px;}
                        }
                        > li + li{margin-top: 18px;}
                    }
                }
            }
            > dl + dl{padding: 39px 0 0;}
        }

        & .reserve-acc{
            max-width: 480px; margin: 20px auto 0; 
            & > .item{
                display: block; width: 100%; border: 1px solid #f0f0f0; border-radius: 30px; padding: 36px 39px;
                & .top{
                    display: flex; flex-wrap: wrap;
                    & .title{font-size: 14px;}
                    & .arr{margin: 0 0 0 auto; display: inline-block; width: 9px; height: auto; aspect-ratio: 9 / 7; background: url("../img/common/form_sel_arrow_new.png") no-repeat center;}
                }
                & .mid{
                    display: none;
                    & .item-list{
                        & > li{border-bottom: 1px solid #dfdfdf; padding: 35px 0 17px;}
                        & > li .name{font-size: 12px; color: #a6a6a7;}
                        & > li .cont{font-size: 14px; padding: 4px 0 0;}
                    }
                }

                &.on{
                    & .top{
                        & .arr{transform: rotate(180deg);}
                    }
                }
            }
            & > .item + .item{margin-top: 20px;}
        }
        & .reserve-btn-group{
            display: flex; flex-wrap: wrap; gap: 10px; border-radius: 10px; max-width: 480px; margin: 20px auto 44px;
            & .btn{
                flex: 1; min-width: 0; line-height: 48px; border: 1px solid transparent; background-color: #a6a6a7; border-radius: 10px; font-size: 14px; color: #fff;
                display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px;
                &.w100{flex: 0 0 auto; width: 100%;}
                &.dark{background-color: #333; color: #fff;}

                & .icon-angle-right{
                    &:before{content: ""; width: 8px; height: 9px; background: url("../img/common/icon-angle-right.png") no-repeat center / 100% auto;}
                }
            }
        }

        @media (width <= 640px){
            & .txt{
                padding: 50px 0 40px;
            }
            & .reserve-sum{
                padding: 35px 30px;
            }
            & .reserve-acc{
                & > .item{
                    padding: 25px 30px;
                }
            }
        }
    }
}

/* DIARY - FOLLOW US */
.followus-wrap{
    & .followus{
        & .followus-item{}

        & .followus-sns{
            padding: 120px 0 80px;
            & > .inner-sm{
                display: flex; flex-wrap: wrap;

                & .sns-txt{
                    flex: 0 0 auto; width: 300px; align-content: center;
                    & .tit{font-size: 26px; font-weight: 400; color: #000;}
                    & .control{
                        /* 위치 이동으로 미사용 */
                        /* display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 30px 0 0;

                        & .btn_sns_slide{
                            position: relative; width: 16px; height: auto; aspect-ratio: 1; font-size: 0;
                            &:before{content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #111;}
                            &.btn_sns_slide_prev:before{border-left: 2px solid #111; transform: translate(-50%, -50%) rotate(-45deg);}
                            &.btn_sns_slide_next:before{border-right: 2px solid #111; transform: translate(-50%, -50%) rotate(45deg);}
                        }
                        & .page{
                            display: inline-flex; gap: 0.2em; font-size: 14px; font-weight: 600; font-family: 'NanumSquare'; line-height: 1; color: #ccc;
                            & span.current{color: #111;}
                        } */
                    }
                }
                & .sns-slide{
                    flex: 1; min-width: 0;
                }
                & .control{
                    padding: 37px 0 0 300px; flex: 0 0 auto; width: 100%; display: flex; flex-wrap: wrap; gap: 15px;
                    & .btn_sns_slide{
                        position: relative; width: 50px; height: auto; aspect-ratio: 1; border-radius: 50%; font-size: 0; background: #f6f6f6;
                        &:before{content: ""; position: absolute; top: 50%; left: 50%; display: inline-block; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #111;}
                        &.btn_sns_slide_prev:before{border-left: 2px solid #111; transform: translate(-50%, -50%) rotate(-45deg);}
                        &.btn_sns_slide_next:before{border-right: 2px solid #111; transform: translate(-50%, -50%) rotate(45deg);}
                    }
                    & .page{display: none;}
                }
            }

            @media (width <= 1280px){
                & > .inner-sm{
                    & .sns-txt{width: 20vw;}
                    & .control{padding: 37px 0 0 20vw;}
                }
            }
            @media (width <= 860px){
                padding: 120px 0 80px;
                & > .inner-sm{
                    & .sns-txt{flex: 0 0 auto; width: 100%; margin: 0 0 12px;}
                    & .sns-slide{flex: 0 0 auto; width: calc(100% + 20px); margin: 0;}
                    & .control{padding: 35px 0 0 0; justify-content: center;}
                }
            }
            @media (width <= 768px){
                padding: 50px 0 50px;
            }
        }

        & .followus-visual{
            height: 420px; align-content: center; text-align: center; color: #fff;
            background: url("../img/contents/f-visual.jpg") no-repeat center; background-size: cover;
            font-size: 18px; line-height: 1.95;
            
            @media (width <= 1280px){
                height: 300px; font-size: 16px;
            }
            @media (width <= 640px){
                height: auto; padding: 15% 0; font-size: 15px; line-height: 1.6; background-position: center right 60%;
            }
        }
    }
}





/* collection - products (상품) */
.product-wrap {
    & .product-head {
        padding: 0 0 34px;
        & .cate {
            display: flex; justify-content: center; gap: 35px; padding: 24px 0 116px;
            & button {
                position: relative; font-size: 14px; font-weight: 400; color: #a6a6a7; padding: 0 0 7px;
                &:before{content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #999;}
                &:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0%; height: 1px; background: #000;}
                &:hover{
                    &:before{width: 100%; transition: 0.4s ease;}
                }

                &.on {
                    color: #000;
                    &:before{width: 100%; background-color: #000;}
                    &:hover{
                        &:before{opacity: 0; transition: 0.3s;}
                        &:after{width: 100%; transition: 0.4s ease; transition-delay: 0.35s;}
                    }
                }
            }
            @media (width <= 1280px){
                padding: 24px 0 80px;
            }
            @media (width <= 1024px){
                padding: 24px 0 60px;
            }
            @media (width <= 768px){
                padding: 24px 0 0;
            }
        }
        & .util {
            display: flex; flex-wrap: wrap; align-items: center;

            & .depth {
                flex: 0 0 auto; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px;
                & .cont{
                    position: relative; color: #a6a6a7;
                }
                & .cont + .cont{
                    padding: 0 0 0 27px;
                    &:before{content: ""; position: absolute; top: 6px; left: 8px; width: 7px; aspect-ratio: 1; border-top: 2px solid #a6a6a7; border-right: 2px solid #a6a6a7; transform: rotate(45deg);}
                }
                & .cont:last-child{color: #111;}
                @media (width <= 767px){
                    display: none;
                }
            }

            & .total {
                margin: 0 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em;
                & p {font-size: 14px; font-weight: 400;}
                & span {
                    font-size: 14px; font-weight: 400; color: #111;
                    & em{font-style: normal; margin: 0 0 0 0.6em;}
                }
            }
            & .filter {position: relative;
                & .filter-bt {display: flex; align-items: center; gap: 10px; cursor: pointer;
                    & img {}
                    & p {line-height: 1;}
                }
            }
        }
    }
    & .product-body {
        & .list {
            > ul {display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 79px 20px;}
        }
    }
    & .product-detail {
        & .detail-img {
            & .product-swiper {
                height: var(--view-height);
                & .swiper-slide {
                    position: relative;
                    & .bg {
                        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                        & img {width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .txt {
                        position: absolute; bottom: 79px; left: 0; width: 100%; text-align: center; padding: 0 20px;
                        & p {font-size: 12px; line-height: 1; font-weight: 400; color: #999; display: none; /* 미사용 */}
                        & h2 {font-size: 26px; line-height: 1; font-weight: 400; margin: 0 0 32px; color: #000;}
                        & .des {font-size: 14px; color: #111; line-height: 1.5; max-width: 860px; margin: 0 auto;}
                        & .more-arr{
                            position: relative; padding-top: 33px; display: inline-block; gap: 0; font-weight: 400;
                            &:before{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #818283;}
                            & span{}
                            & .arr{
                                display: inline-block; vertical-align: middle; margin: 0 0 0 2px; width: 7px; height: auto; aspect-ratio: 1; border: none; border-radius: 0; transition: 0s;
                                transform: rotate(45deg); border-top: 2px solid #000; border-right: 2px solid #000;
                                &:before{display: none;}
                            }
                        }
                    }
                }
                & .swiper-btn {
                    position: absolute; top: 50%; left: 0; width: 100%; z-index: 2;
                    & .inner-sm {display: flex; justify-content: space-between; align-items: center;}
                    & button {}
                }
            }
            @media (width <= 860px){
                & .product-swiper{
                    height: 760px;
                    & .swiper-slide{
                        & .txt{
                            bottom: 55px;
                            & p{}
                            & h2{margin: 0 0 20px;}
                            & .more-arr{padding-top: 24px;}
                        }
                    }
                }
            }
            @media (width <= 640px){
                & .product-swiper{
                    height: 580px;
                    & .swiper-slide{
                        & .txt{
                            & p{}
                            & h2{font-size: 22px; margin: 0 0 10px;}
                            & .des{text-wrap: balance;}
                            & .more-arr{padding-top: 20px;}
                        }
                    }
                }
            }
        }
        & .detail-desc{
            position: relative; background: #a6a6a7; color: #fff; padding: 0 0 195px; height: var(--view-height);
            display: flex; flex-direction: column; width: 100%;

            .duplicate-bg{
                position: absolute; inset: 0;
                & .list{}
                & .list .item{}
                img{width: 100%; height: 100%; object-fit: cover;}
                &:after{content: ""; position: absolute; z-index: 1; inset: 0; background: rgba(0,0,0,0.2);}
            }

            .duplicate-slide{
                margin: auto auto 0; position: relative; z-index: 2; text-align: center; width: 1500px; overflow: hidden; padding: 0 0 27px;
                &:before{
                    content: ""; position: absolute; bottom: 10px; left: 0; right: 0; height: 1px; 
                    background: #fff;
                    background: linear-gradient(90deg,rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.0) 100%);
                }

                .swiper-wrapper{
                    --swiper-wrapper-transition-timing-function: ease-in-out;
                }

                .btn-duplicate{
                    position: absolute; z-index: 2; top: 30px; font-size: 0; width: 10px; height: auto; aspect-ratio: 1;
                    &:before{content: ""; position: absolute; top: 50%; left: 50%; width: 66%; height: auto; aspect-ratio: 1; border-top: 2px solid #fff;}
                    &:after{content: "클릭 영역 확보"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: auto; aspect-ratio: 1;}

                    &.btn-duplicate-prev{
                        left: 0; 
                        &:before{border-left: 2px solid #fff; transform: translate(-30%, -50%) rotate(-45deg);}
                    }
                    &.btn-duplicate-next{
                        right: 0;
                        &:before{border-right: 2px solid #fff; transform: translate(-70%, -50%) rotate(45deg);}
                    }
                }

                .list{}
                .item{
                    opacity: 0.33; cursor: pointer;
                    &:before{content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -20px; width: 7px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #fff;}
                    .name {
                        position: relative; font-size: 14px;
                    }

                    &.swiper-slide-active{
                        opacity: 1;
                        .desc{display: block;}
                    }
                    &.swiper-slide-prev{
                        opacity: 0.66; transform: translateX(-100px);
                    }
                    &.swiper-slide-next{
                        opacity: 0.66; transform: translateX(100px);
                    }
                }
            }
            .duplicate-desc{
                position: relative; z-index: 2; max-width: 740px; margin: 27px auto 0; width: 100%;
                .item{
                    position: absolute; inset: 0; opacity: 0; /* visibility: hidden; */ transition: opacity 0.6s ease-in-out; pointer-events: none;
                    .top{
                        > ul{
                            display: flex; flex-wrap: wrap; justify-content: center; font-size: 16px;
                            > li{}
                            > li + li{}
                            > li + li:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 10px 0 14px; width: 1px; height: 13px; background: #fff;}
                            > li span{}
                            > li span + span{}
                            > li span + span:before{content: "·"; display: inline-block; vertical-align: middle; margin: 0 14px 0 10px;}
                        }
                    }
                    .mid{
                        .txt{
                            font-size: 14px; line-height: 1.5; padding: 32px 20px 0; text-align: center;
                            text-overflow: ellipsis; overflow: hidden; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; height: 95px;
                        }
                    }

                    &.is-active {
                        opacity: 1;
                        /* visibility: visible; */
                        pointer-events: auto;
                    }
                }
            }

            @media (width <= 1560px){
                .duplicate-slide{
                    width: calc(100% - 240px);
                    .item{
                        &.swiper-slide-prev{transform: translateX(-4vw);}
                        &.swiper-slide-next{transform: translateX(4vw);}
                    }
                }
            }
            @media (width <= 1280px){
                .duplicate-slide{
                    width: calc(100% - 140px);
                    .item{
                        &.swiper-slide-prev{transform: translateX(-4vw);}
                        &.swiper-slide-next{transform: translateX(4vw);}
                    }
                }
            }
            @media (width <= 860px){
                height: 760px; padding: 0 0 160px;
                .duplicate-slide{
                    width: calc(100% - 50px);
                    .item{
                        &.swiper-slide-prev{transform: translateX(-4vw);}
                        &.swiper-slide-next{transform: translateX(4vw);}
                    }
                }
                .duplicate-desc{
                    .item{
                        .mid{
                            .txt{padding: 20px 20px 0; height: 82px;}
                        }
                    }
                }
            }
            @media (width <= 640px){
                height: 580px; padding: 0 0 153px;
                .duplicate-slide{
                    .item{
                        &.swiper-slide-prev{transform: translateX(0);}
                        &.swiper-slide-next{transform: translateX(0);}
                    }
                }
                .duplicate-desc{
                    .item{
                        .mid{
                            .txt{padding: 15px 20px 0; height: 78px;}
                        }
                    }
                }
            }
        }
        & .detail-new{
            overflow: hidden; height: auto; padding: 120px 0 75px;

            & .detail-new-slide{
                /* padding: 0 20.16vw; */ padding: 0 19.5vw;
                & .list{/* transition-timing-function: cubic-bezier(.05,.7,.1,1); */}
                & .item{
                    /* width: 568px; */ width: 49.13%;
                    & .img{width: 100%; height: auto; aspect-ratio: 568 / 540; overflow: hidden;}
                    & .img img{width: 100%; height: 100%; object-fit: cover; clip-path: inset(40% 40% 40% 40%); transition: clip-path 0.5s;}
                    & .txt{padding: 18px 0 0;}
                    & .txt .tit{display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: #a6a6a7;}
                    & .txt .tit .type{}
                    & .txt .tit .name{font-size: 12px; font-weight: 800; color: #010101;}
                    & .txt .tit .name:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 15px 0 14px; width: 1px; height: 12px; background: #a6a6a7;}
                    & .txt .des{color: #111; font-size: 14px; line-height: 1.5; padding: 12px 0 0;}
                }
                & .etc{
                    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 74px 0 0;
                    & .progbar{
                        position: relative; width: 180px; height: 1px; left: auto; top: auto; right: auto; bottom: auto; background: #ccc;
                        & .swiper-pagination-progressbar-fill{background: #000;}
                    }
                    & .control{
                        display: flex; flex-wrap: wrap; align-items: center; gap: 0;
                        & .btn-new-slide{
                            position: relative; font-size: 0; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #000;
                            &:before{content: "클릭 영역 확보"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: auto; aspect-ratio: 1;}
                            &.btn-new-slide-prev{border-left: 2px solid #000; transform: rotate(-45deg);}
                            &.btn-new-slide-next{border-right: 2px solid #000; transform: rotate(45deg);}
                            &.swiper-button-disabled{
                                cursor: not-allowed; border-color: #ccc;
                            }
                        }
                        & .page-new-slide{
                            font-size: 14px; color: #ccc; display: inline-flex; align-items: center; gap: 0.285em; text-align: center; justify-content: center;
                            width: 62px; /* 숫자가 바뀌어도 너비 변경되지 않게 고정너비 사용 */
                            & .current{color: #000;}
                            & .total{}
                        }
                    }
                }

                &.active{
                    & .item{
                        & .img img{clip-path: inset(0% 0% 0% 0%); transition: clip-path 1.5s ease;}
                    }
                }
            }

            @media (width <= 1400px){
                & .detail-new-slide{
                    padding: 0 120px;
                }
            }
            @media (width <= 860px){
                & .detail-new-slide{
                    padding: 0 40px;
                    & .item{
                        width: 45%;
                    }
                }
            }
            @media (width <= 640px){
                padding: 60px 0 60px;
                & .detail-new-slide{
                    & .item{
                        width: 100%;
                    }
                }
            }
        }
        & .detail-shiny{
            --handle-position: 110px;
            --handle-time: 1.5s;
            position: relative; height: var(--view-height); overflow: hidden; display: flex; flex-direction: column; padding: 117px 0 63px;
            & .bg-cont{
                height: 100%; position: absolute; inset: 0;
                & .bg-list{
                    position: relative; height: 100%;
                    & .item{
                        position: absolute; inset: 0;
                        opacity: 0; visibility: hidden;
                        transition: opacity 0.6s ease, visibility 0s 0.6s; /* 사라질 때만 fade-out 후 visibility 해제 */

                        & .pair{position: relative; height: 100%;}
                        & .pair .each{height: 100%;}
                        & .pair .each img{width: 100%; height: 100%; object-fit: cover;}
                        & .pair .each.shiny{position: absolute; z-index: 1; inset: 0;}
                        & .pair .each.matte{position: absolute; z-index: 2; inset: 0; clip-path: inset(0% 0% 0% 100%); transition: var(--handle-time);}
                        & .pair .each.matte.on{clip-path: inset(0% 0% 0% 0%);}

                        &.on{
                            opacity: 1; visibility: visible;
                            transition: opacity 0.6s ease, visibility 0s 0s;
                        }
                    }
                }
                & .handle{
                    position: absolute; z-index: 3; top: 0; left: calc( 100% - var(--handle-position) ); bottom: 0; width: 2px; background: #fff; transition: var(--handle-time);

                    & .btn-toggle-texture{position: absolute; top: 50%; left: 0; transform: translate(-70%, -50%); font-size: 16px; border-radius: 8px; display: block; width: 132px; height: 100px; background: rgba(255,255,255,0.7); display: flex; flex-wrap: wrap; align-items: center; transition: var(--handle-time);}
                    & .btn-toggle-texture span{display: block; text-align: center; transition: var(--handle-time);}
                    & .btn-toggle-texture span.s{width: 70%;}
                    & .btn-toggle-texture span.m{width: 30%; color: #a6a6a7;}
                    & .btn-toggle-texture span small{visibility: hidden; font-size: 0; transition: var(--handle-time);}
                    & .btn-toggle-texture span.s small{visibility: visible; font-size: inherit;}
                    & .btn-toggle-texture span.m small{}

                    &.on{
                        left: var(--handle-position);

                        & .btn-toggle-texture{transform: translate(-30%, -50%);}
                        & .btn-toggle-texture span.s{width: 30%; color: #a6a6a7;}
                        & .btn-toggle-texture span.m{width: 70%; color: inherit;}
                        & .btn-toggle-texture span.s small{visibility: hidden; font-size: 0;}
                        & .btn-toggle-texture span.m small{visibility: visible; font-size: inherit;}
                    }

                    &.no-matte{
                        display: none;
                    }
                }
            }

            & .txt{
                position: relative; z-index: 2; text-align: center;
                .tit{font-size: 16px; color: #a6a6a7; line-height: 1.2; padding: 0 0 9px;}
                .des{font-size: 26px;}
            }

            & .slide-cont{
                position: relative; z-index: 2; width: 940px; margin: auto auto 0; padding: 0 20px;
                & .shiny-slide{
                    --lh: 52px;
                    position: relative; overflow: hidden;
                    & .list{
                        & .item{
                            position: relative; color: #111; text-align: center; cursor: pointer; height: auto; align-content: center;
                            & .name{height: calc( var(--lh) * 2 ); align-content: center;}
                            & .name .eng{line-height: var(--lh);}
                            & .name .kor{position: relative; line-height: var(--lh); opacity: 0; margin: calc( var(--lh) * -1 ) 0 0; clip-path: inset(0% 0% 100% 0%); transition: 0.3s 0.15s, clip-path 0.5s 0.15s;}
                            & .name .kor:before{content: ""; position: absolute; top: 0; left: 0; width: 0; height: 1px; background: rgba(166,166,167,0.5);}

                            &.swiper-slide-active{
                                & .name .eng{}
                                & .name .kor{opacity: 1; margin: 0 0 0; clip-path: inset(0% 0% 0% 0%);}
                                & .name .kor:before{width: 100%; transition: 0.4s 0.3s ease;}
                            }
                        }
                    }
                }
                & .control{
                    position: absolute; z-index: 2; top: 50%; transform: translateY(-50%); left: 0; width: 100%; pointer-events: none;
                    display: flex; flex-wrap: wrap; justify-content: space-between;
                    & .btn-shiny-slide{
                        position: relative; font-size: 0; border-top: 2px solid #000; width: 7px; height: auto; aspect-ratio: 1; pointer-events: initial;
                        &:before{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: auto; aspect-ratio: 1;}
                        &.btn-shiny-slide-prev{border-left: 2px solid #000; transform: rotate(-45deg);}
                        &.btn-shiny-slide-next{border-right: 2px solid #000; transform: rotate(45deg);}
                    }
                }
            }

            @media (width <= 1560px){
                --handle-position: 70px;
            }
            @media (width <= 1280px){
                & .slide-cont{
                    width: auto; max-width: 860px; margin: auto auto 0;
                }
            }
            @media (width <= 1024px){
                padding: 80px 0 80px;
                & .slide-cont{
                    max-width: 680px; margin: auto auto 0;
                    & .shiny-slide{
                        --lh: 38px;
                        font-size: 14px;
                    }
                }
            }
            @media (width <= 860px){
                height: 760px; 
                & .slide-cont{
                    max-width: 500px;
                }
                & .txt{
                    .tit{font-size: 15px;}
                }
            }
            @media (width <= 640px){
                --handle-position: 20px;
                height: 580px; padding: 60px 0 50px;
                & .bg-cont{
                    & .handle{
                        width: 1px;
                        & .btn-toggle-texture{flex-direction: column; font-size: 12px; width: 50px; height: 60px; justify-content: center; gap: 5px; transform: translate(-80%, 0%); top: 40px;}

                        &.on{
                            & .btn-toggle-texture{transform: translate(-20%, 0%);}
                        }
                    }
                }
                & .txt{
                    .tit{font-size: 14px; padding: 0 0 6px;}
                    .des{font-size: 20px;}
                }
                & .slide-cont{
                    width: 200px; margin: auto auto 0;
                    & .shiny-slide{
                        --lh: 34px;
                        font-size: 14px;
                        & .list{
                            & .item{
                                & .name .kor{opacity: 1; margin: 0 0 0; clip-path: inset(0% 0% 0% 0%);}
                                & .name .kor:before{width: 100px; left: 50%; transform: translateX(-50%);}

                                &.swiper-slide-active{
                                    & .name .kor:before{width: 100px;}
                                }
                            }
                        }
                    }
                }
            }
        }
        & .detail-custom{
            display: flex; align-items: center; justify-content: center;
            height: var(--view-height); background: url("../img/contents/detail-custom-section.jpg") no-repeat center / cover;
            & .txt{
                text-align: center; color: #fff;
                & .tit{font-size: 22px;}
                & .des{font-size: 14px; line-height: 1.5; padding: 30px 0 34px;}
                & .more-arr{}
            }

            &:has(a[href="/company/reservation"]){
                background-image: url("../img/contents/jewerly-detail-reservation.jpg");
            }

            @media (width <= 1280px){
                height: 800px;
            }
            @media (width <= 860px){
                height: 600px;
            }
            @media (width <= 640px){
                height: auto; padding: 60px 0;
                & .txt{
                    & .tit{font-size: 20px;}
                }
            }
        }
        & .detail-recommend{
            & .recommend-cont{
                position: relative; display: flex; flex-wrap: nowrap; height: var(--view-height);
                & .cont{
                    flex: 1; width: auto; min-width: 0; overflow: hidden; height: 100%; position: relative; cursor: pointer; transition: 0.4s ease; text-align: center;

                    & .list{
                        height: 100%;
                        & .item{
                            height: 100%; display: flex; flex-direction: column; padding: 117px 0 80px;

                            & .img{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
                            & .img img{width: 100%; height: 100%; display: block; object-fit: cover;}
                            & .img img.sub-pair{display: none;}

                            & .txt{position: relative; z-index: 2; text-align: center;}
                            & .txt .sup{font-size: 16px; color: #a6a6a7; line-height: 1.2; padding: 0 0 9px;}
                            & .txt .tit{font-size: 26px;}
                            & .txt .des{max-width: 500px; margin: 0 auto; font-size: 14px; line-height: 1.65; padding: 25px 0 0; opacity: 0;}

                            & .links{margin-top: auto; opacity: 0;/*  pointer-events: none; */}
                            & .links .more-arr{}
                        }
                    }
                    & .dots{
                        opacity: 0; pointer-events: none;
                        position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); bottom: auto; left: calc( (100% - 1500px) / 2 ); right: auto; width: auto; display: flex; flex-direction: column; justify-content: initial; gap: 12px;
                        > li{
                            margin: 0; border-radius: 0; display: block;
                            button{position: relative; display: block; align-items: initial; gap: initial; color: inherit; font-size: 16px; color: #999; padding: 0 0 0 19px;}
                            button:before{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0 0; width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #000; border-right: 2px solid #000; transform: rotate(45deg); position: absolute; top: 8px; left: 0; border-radius: 0; background: none; opacity: 0;}

                            &.swiper-pagination-bullet-active{
                                button{color: #000;}
                                button:before{opacity: 1;}
                            }
                        }
                    }

                    & .arrow{
                        position: absolute; top: 50%; transform: translateY(-50%) translateX(0); right: 70px; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px; opacity: 0; transition: 0.2s;
                        & span{width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #111; border-right: 2px solid #111; transform: rotate(45deg);}
                    }

                    & .close{
                        position: absolute; z-index: 1; top: 50%; transform: translateY(-50%) rotate(45deg); right: calc( (100% - 1500px) / 2 ); display: block; width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,0.5); font-size: 0; opacity: 0; pointer-events: none;
                        &:before,
                        &:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0); width: 13px; height: 1px; background: #000; transition: 0.4s ease;}
                        &:after{width: 1px; height: 13px;}

                        &:hover{
                            background: rgba(255,255,255,1.0);
                        }
                    }

                    &.hover{
                        flex: 2;
                        & .arrow{opacity: 1; animation: arrow-move 1.5s ease-in-out infinite;}
                    }

                    &.selected{
                        flex: 1 0 100%; cursor: default;
                        &:before{opacity: 0;}

                        & .arrow{opacity: 0;}
                        & .close{opacity: 1; pointer-events: auto;}
                        & .list .item .txt .des{opacity: 1;}
                        & .list .item .links{opacity: 1; /* pointer-events: auto; */}
                        & .dots{opacity: 1; pointer-events: auto;}
                    }

                    &.cont-b{
                        & .arrow{
                            right: auto; left: 70px;
                            & span{border-right: none; border-left: 2px solid #111; transform: rotate(-45deg);}
                        }
                    }
                }
                & .cont + .cont{
                    &:before{content: ""; position: absolute; z-index: 2; top: 0; bottom: 0; left: 0; width: 2px; background: #fff;}
                }
                /* 선택된 게 있을 때, 선택 안 된 컨테이너 */
                &.has-selected .cont:not(.selected){
                    flex: 0 0 0%; opacity: 0; pointer-events: none;
                }
            }

            @media (width <= 1560px){
                & .recommend-cont{
                    height: auto; width: 100%; aspect-ratio: 16 / 9;
                    & .cont{
                        & .list{
                            & .item{
                                padding: 6vw 0 80px;
                                & .txt .des{padding: 1vw 0 0;}
                            }
                        }
                        & .dots{left: 20px;}
                        & .close{right: 20px;}
                    }
                }
            }
            @media (width <= 1280px){
                & .recommend-cont{
                    & .cont{
                        & .list{
                            & .item{
                                & .txt .sup{font-size: 14px;}
                                & .txt .tit{font-size: 22px;}
                                & .txt .des{display: none;}
                            }
                        }
                    }
                }
            }
            @media (width <= 1024px){
                & .recommend-cont{
                    aspect-ratio: 16 / 11;
                    & .cont{
                        & .list{
                            & .item{
                                padding: 6vw 0 6vw;
                                & .links{opacity: 1;}
                            }
                        }
                        & .dots{
                            gap: 10px;
                            & > li{
                                button{font-size: 14px;}
                                button:before{margin: -2px 0 0 0;}
                            }
                        }

                        &.hover{
                            flex: 1;
                            & .arrow{opacity: 0; animation: none;}
                        }
                    }
                }
            }
            @media (width <= 860px){
                & .recommend-cont{
                    flex-direction: column; aspect-ratio: initial;
                    & .cont{
                        height: auto; aspect-ratio: 16 / 9;
                        & .list{
                            & .item{padding: 30px 0;}
                        }
                    }
                }
            }
            @media (width <= 640px){
                & .recommend-cont{
                    & .cont{
                        & .list{
                            & .item{
                                & .txt{}
                                & .txt .sup{font-size: 13px; padding: 0 0 5px;}
                                & .txt .tit{font-size: 18px; line-height: 1.2;}
                            }
                        }
                    }
                }
            }
        }
        & .detail-info {
            padding: 140px 0;
            & .inner-sm {display: flex; justify-content: space-between; gap: 60px;}
            & .left {
                flex: 1; min-width: 0;
                & .desc {
                    display: flex; flex-direction: column; justify-content: space-between; gap: 35px; height: 100%;
                    & strong {font-size: 12px; font-weight: 700;}
                    & p {flex: 1; font-size: 14px; font-weight: 400;}
                    & span {font-size: 12px; color: #999;}
                }
            }
            & .right {
                flex: 0 0 auto; width: 490px;
                & .spec {
                    display: flex; flex-direction: column; justify-content: space-between; gap: 35px;
                    & strong {font-size: 12px; font-weight: 700;}
                    > ul {
                        > li {
                            display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 20px 0; border-bottom: 1px solid #e8e8e8;
                            &:first-child {border-top: 1px solid #222;}

                            & p {flex: 0 0 auto; font-size: 14px; line-height: 1; font-weight: 500; width: 130px;}
                            & span {
                                flex: 1; min-width: 0; font-size: 14px; line-height: 1; text-align: right; font-family: 'NanumSquare' !important; font-weight: 700;

                                &:has(> em){
                                    display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px 0;
                                    
                                    & em{font-style: normal;}
                                    & em + em{}
                                    & em + em:before{content: "·"; margin: 0 0.2em;}
                                }
                            }
                        }
                    }
                }
            }
            @media (width <= 1280px){
                padding: 100px 0;
                & .right{width: 420px;}
            }
            @media (width <= 1024px){
                padding: 60px 0;
                & .inner-sm {flex-direction: column; gap: 60px}
                & .left{
                    flex: 0 0 auto; width: 100%;
                    & .desc{
                        gap: 0;
                        & strong{padding: 0 0 20px;}
                        & span{padding: 20px 0 0;}
                    }
                }
                & .right {
                    width: 100%;
                    & .spec{
                        gap: 20px;
                        & > ul{
                            & > li{
                                & p{width: 110px;}
                            }
                        }
                    }
                }
            }
            @media (width <= 860px){
                
            }
            @media (width <= 640px){
                padding: 40px 0;
                & .inner-sm{gap: 50px;}
                & .left {
                    & .desc {}
                }
                & .right {
                    & .spec {
                        > ul {
                            > li {
                                padding: 12px 0;
                                & p {font-size: 12px;}
                                & span {font-size: 12px;}
                            }
                        }
                    }
                }
            }
        }
        & .detail-slide {
            border-top: 1px solid #eee; border-bottom: 1px solid #eee;
            & .inner-sm:has(.swiper){
                position: relative; padding-top: 140px; padding-bottom: 140px;
            }

            @media (width <= 1280px){
                & .inner-sm:has(.swiper){
                    padding-top: 100px; padding-bottom: 120px;
                }
            }
            @media (width <= 1024px){
                & .inner-sm:has(.swiper){
                    padding-top: 80px; padding-bottom: 120px;
                }
            }
            @media (width <= 860px){
                & .inner-sm:has(.swiper){
                    padding-top: 80px; padding-bottom: 80px;
                }
            }
            @media (width <= 640px){
                & .inner-sm:has(.swiper){
                    padding-top: 60px; padding-bottom: 60px;
                }
            }
        }
        & .detail-view {
            overflow: hidden; padding: 140px 0;

            @media (width <= 1280px) {
                padding: 100px 0;
            }
            @media (width <= 1024px) {
                padding: 80px 0;
            }
            @media (width <= 640px) {
                padding: 60px 0 0;
            }
        }
        & .detail-tab {
            position: relative;

            & .detail-tab-swiper{
                position: relative;

                & .list{}
                & .item{
                    position: relative; width: 100%; height: var(--view-height);
                    & .img{
                        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                        & img{width: 100%; height: 100%; object-fit: cover;}
                    }
                    & .txt{
                        position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 0 0 70px;
                        text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: flex-end;

                        & .name{font-size: 24px; font-weight: 500; line-height: 1;}
                        & .desc{font-size: 14px; font-weight: 400; max-width: 630px; margin: 0 auto; line-height: 1.55; padding: 15px 0 0;}
                    }
                }

                & .tab-dots{
                    position: absolute; z-index: 1; top: 0; bottom: auto; display: flex; flex-wrap: wrap; gap: 26px; justify-content: center;
                    padding: 100px 0 0;
                    & > li{margin: 0; width: auto; height: auto; display: block; border-radius: 0; opacity: 1; background: none;}
                    & > li button{position: relative; display: block; padding: 0 10px 10px; font-size: 14px; color: #777; font-weight: 400;}
                    & > li button:before{content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: #bbb;}
                    & > li button:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 5px;}
                    & > li:nth-child(1) button:after{background: #fffae6;}
                    & > li:nth-child(2) button:after{background: #fffae6;}
                    & > li:nth-child(3) button:after{background: #fffae6;}
                    & > li:nth-child(4) button:after{background: #fffae6;}
                    
                    & > li.swiper-pagination-bullet-active{

                        & button{color: #111; font-weight: 700;}
                        & button:after{width: 100%; transition: width 3s linear;}
                    }
                }
            }

            & .cate {position: absolute; top: 100px; left: 0; display: flex; justify-content: center; gap: 24px; width: 100%; z-index: 2;
                & button {position: relative; font-size: 14px; color: #777; padding: 0 10px 10px;
                    &::after {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #222; opacity: 0.2; transition: all 0.3s ease;}
                    &.on {font-weight: 700; color: #222;}
                    &.on::after {height: 5px; opacity: 1;}
                    &.wg.on::after {background: #fffae6;}
                    &.lg.on::after {background: #fffae6;}
                    &.cb.on::after {background: #fffae6;}
                    &.pg.on::after {background: #fffae6;}
                    &.yg.on::after {background: #fffae6;}
                }
            }
            & .con {position: absolute; top: 0; left: 0; width: 100%; height: 100%;
                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: all 0.3s ease;
                    &.on {opacity: 1;}
                }
            }
            & .txt {position: absolute; bottom: 100px; left: 0; width: 100%;
                & ul {
                    > li {display: none; text-align: center;
                        & p {font-size: 24px; font-weight: 600; margin: 0 0 20px;}
                        & span {font-size: 14px; font-weight: 500; display: block; text-wrap: balance;}
                        &.on {display: block;}
                    }
                }
            }

            @media (width <= 1280px){
                & .detail-tab-swiper{
                    & .item{
                        height: 700px;
                    }
                    & .tab-dots{
                        padding: 80px 0 0;
                    }
                }
            }
            @media (width <= 860px){
                & .detail-tab-swiper{
                    & .item{
                        height: 500px;
                    }
                    & .tab-dots{
                        padding: 60px 0 0;
                    }
                }
            }
            @media (width <= 640px){
                & .detail-tab-swiper{
                    & .item{
                        height: 400px;
                        & .txt{
                            padding: 0 0 50px;
                            & .desc{display: none;}
                        }
                    }
                    & .tab-dots{
                        gap: 14px; padding: 40px 0 0;
                        & > li button{font-size: 12px; padding: 0 0 10px;}
                        & > li button:after{height: 3px;}
                    }
                }
            }
        }
        & .detail-list {
            padding: 140px 0;

            & .tit {
                padding: 0 0 60px;
                & p {font-size: 16px; font-weight: 500;}
            }
            & .list {
                > ul {
                    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 60px 16px;
                    > li {
                        /* & .link {
                            & .thumb {
                                position: relative; aspect-ratio: 1 / 1; overflow: hidden;
                                & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover; transition: all 0.2s;}
                                &:hover img {transform: translate(-50%, -50%) scale(1.1);}
                            }
                            & .info {
                                padding: 18px 18px 0;
                                & .name {
                                    padding: 0 0 24px;
                                    & span {font-size: 12px; line-height: 1; color: #999;}
                                    & p {font-size: 12px; line-height: 1; margin: 14px 0 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}
                                }
                            }
                        }
                        & .link2 {
                            display: block; padding: 0 18px;
                            & .more {
                                display: flex; align-items: center; gap: 5px;
                                & p {font-size: 14px; line-height: 1;}
                                & img {}
                            }
                        } */
                    }
                }
            }

            @media (width <= 1280px){
                padding: 100px 00;
                & .tit{
                    padding: 0 0 40px;
                }
            }
            @media (width <= 1024px){
                padding: 80px 0;
                & .list{
                    > ul{
                        grid-template-columns: repeat(3, minmax(0, 1fr));
                    }
                }
            }
            @media (width <= 860px){
                & .tit{
                    padding: 0 0 30px;
                }
            }
            @media (width <= 768px){
                & .list{
                    > ul{
                        grid-template-columns: repeat(2, minmax(0, 1fr));
                        /* & > li{
                            & > .link{
                                & .info{
                                    padding: 18px 0 0;
                                    & .name{
                                        padding: 0 0 20px;
                                        & p{margin: 10px 0 0;}
                                    }
                                }
                            }
                            & > .link2{padding: 0;}
                        } */
                    }
                }
            }
            @media (width <= 640px){
                padding: 60px 0;
                & .tit{
                    padding: 0 0 20px;
                }
                & .list{
                    > ul{grid-template-columns: repeat(1, minmax(0, 1fr));}
                    /* > ul li a .info .name {}
                    > ul li a .info .name p {margin: 8px 0 0;}
                    > ul li a .info .more p {font-size: 12px;}
                    > ul li a .info .more img {width: 20px;} */
                }
            }
        }
    }
    @media (width <= 1280px) {
        & .product-body {
            & .list {
                > ul {grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 70px 15px;}
            }
        }
    }
    @media (width <= 960px){
        & .product-body {
            & .list {
                > ul {grid-template-columns: repeat(2, minmax(0, 1fr));}
            }
        }
    }
    @media (width <= 768px) {
        & .product-head {padding: 0 0 20px;
            & .cate {overflow-x: scroll; justify-content: flex-start; /* padding: 15px 30px 15px 0; */ padding: 15px 30px 0 0; margin: 0 0 20px;}
        }
    }
    @media (width <= 640px) {
        & .product-head {
            & .cate {margin: 0 0 12px; gap: 25px; mask: linear-gradient(100deg,rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);}
            & .cate button {font-size: 13px;}
            & .util {
                & .total {
                    & p {font-size: 14px;}
                    & span {font-size: 14px;}
                }
                & .filter {
                    & .filter-bt {
                        & p {font-size: 14px;}
                    }
                }
            }
        }
        & .product-body {
            & .list {
                > ul {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }
        }
    }
}

/* filter - products (필터) */
.filter-wrap {display: none; position: fixed; top: 0; right: 0; width: 320px; height: var(--view-height); padding: 0 20px 40px; background: #fff; box-shadow: 0px 4px 20px 0px #00000026; overflow-y: auto; z-index: 3001;
    & .filter-head {display: flex; justify-content: space-between; align-items: center; padding: 28px 12px;
        & p {font-size: 15px;}
        & button {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px;
            & img {width: 12px;}
        }
    }
    & .filter-body {border-bottom: 1px solid #A6A6A6;
        & .filter-section {border-top: 1px solid #A6A6A6;
            & .title {display: flex; justify-content: space-between; align-items: center; padding: 13px 12px; cursor: pointer;
                & p {font-size: 12px;}
                & button {display: flex; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 18px;}
            }
            & .group {border-top: 1px solid #EBEBEB;
                > ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding: 20px 12px;
                    > li {
                        & label {
                            & input {display: none;}
                            & span {font-size: 12px; line-height: 1; color: #B1B1B1; padding: 0 16px 0 0;}
                        }
                        & label {display: flex; user-select: none;
                            & input[type="checkbox"]:checked + span {color: #111; background: url("../img/contents/ico-check.png") no-repeat center; background-size: 12px; background-position: right top 2px;}
                        }
                    }
                }
            }
        }
    }
}

/* custom studio - custom (커스텀 스튜디오) */
.custom-wrap {
    --custom-inner-box-side: 34px;
    display: flex; height: calc(var(--view-height) - var(--header-height));
    
    & .custom-img {position: relative; height: 100%; flex: 1; min-width: 0;
        & .custom-init{
            position: absolute; z-index: 1; inset: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background: #f4f4f4;

            & .bg{
                position: relative; width: 100%; height: 100%;
                > img{width: 100%; height: 100%; object-fit: cover;}
                & .to-list{
                    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0deg); width: 60px; height: auto; aspect-ratio: 1; border-radius: 50%; background: rgba(17,17,17,0.2); font-size: 0;
                    transition: 0.3s ease;
                    &:before,
                    &:after{content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(0); width: 13px; height: 1px; background: #fff; transition: 0.4s ease;}
                    &:after{width: 1px; height: 13px;}

                    &:hover{
                        background: rgba(17,17,17,0.6);
                        transform: translate(-50%, -50%) rotate(180deg);
                    }
                }
            }
        }
        & .custom-view {
            position: relative; width: 100%; height: 100%;
            & > img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;  -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; user-select: none;}
            &:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

            & .custom-view-slider{
                overflow: hidden; width: 100%; height: 100%;
                & .list{
                    width: 100%; height: 100%;
                    & .item{
                        width: 100%; height: 100%;
                        & .img{width: 100%; height: 100%;}
                        & .img img{width: 100%; height: 100%; object-fit: cover; display: block;}
                    }
                }
                & .control{
                    position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 1; display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; padding: 0 71px;
                    & .btn-custom-view-slider{
                        width: 7px; height: auto; aspect-ratio: 1; border-top: 2px solid #000; font-size: 0; position: relative;
                        &:before{content: "클릭영역확보용"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: auto; aspect-ratio: 1;}

                        &.prev{transform: rotate(-45deg); border-left: 2px solid #000;}
                        &.next{transform: rotate(45deg); border-right: 2px solid #000;}
                    }
                }
            }
        }
        & .custom-thumb {
            display: none; position: absolute; bottom: 30px; left: 0; width: 100%;
            > ul {display: flex; justify-content: center; gap: 14px;
                > li {position: relative; width: 91px; aspect-ratio: 91 / 53; cursor: pointer;
                    &.on {border: 1px solid #222;}
                    &.up {margin: 0 0 0 14px;
                        &::before {content: ''; position: absolute; top: 50%; left: -14px; transform: translateY(-50%); width: 1px; height: 10px; background: #A5A6A6;}
                    }
                    & img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}
                }
            }
        }
        & .custom-ring {
            &.target {position: absolute; top: calc(50% - 75px); left: calc(50% - 75px); display: flex; justify-content: center; align-items: center; width: 150px; height: 150px; height: auto; cursor: grab; user-select: none; transform-origin: center center; box-sizing: border-box;}
            & img {width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; filter: drop-shadow(1px 2px 3px rgba(0,0,0,0.2));}
        }
        & .custom-select-model{
            position: absolute; z-index: 2; left: 70px; top: 44px;
            & .btn-back-to-select{
                position: relative; padding: 0 0 5px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: #000;
                &:before{content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: #000;}
                &:after{content: ""; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: #000;}

                &:hover{
                    &:before{opacity: 0; transition: 0.3s;}
                    &:after{width: 100%; transition: 0.4s ease; transition-delay: 0.35s;}
                }
            }
            & .btn-back-to-select span{display: inline-block;}

            @media (width <= 1800px){
                left: 20px;
            }
            @media (width <= 1280px){
                top: 30px;
            }
            @media (width <= 860px){
                top: 20px;
                & .btn-back-to-select{font-size: 14px; padding: 0 0 4px;}
            }
        }
        & .custom-movealbe-reset{
            position: absolute; z-index: 2; left: 70px; top: 43px; display: none;
            & .btn-reset-moveable{display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 400; color: #111;}
            & .btn-reset-moveable:before{content: ""; display: inline-block; vertical-align: middle; margin: 1px 0 0; width: 8px; height: auto; aspect-ratio: 8 / 9; background: url("../img/contents/btn-back-to-select-new.png") no-repeat center; background-size: 100% auto;}
            & .btn-reset-moveable span{display: inline-block;}

            @media (width <= 1800px){
                left: 20px;
            }
            @media (width <= 1280px){
                top: 30px;
            }
            @media (width <= 860px){
                top: 20px;
            }
        }
    }
    & .custom-layer {
        position: relative; z-index: 3000; width: 550px; border-top: 1px solid #B4C1CA33; 
        display: flex; flex-direction: column;
        & .custom-con {
            display: flex; flex-direction: column;
            /* height: calc(100% - 60px); */ /* padding: 22px 30px 20px; */ padding: 10px 0 0; overflow-y: auto; transition: all 0.3s ease;
            height: auto; flex: 1; min-height: 0;
            & .custom-more {position: absolute; top: 0; left: 0; display: none; justify-content: center; align-items: center; width: 100%; height: 30px; background: #fff; touch-action: none;
                & span {display: block; width: 80px; height: 5px; border-radius: 5px; background: #ebebeb;}
            }
            & .custom-top {
                flex: 0 0 auto;
                display: flex; justify-content: space-between; align-items: flex-end; padding: 0 0 17px; border-bottom: 1px solid #999; margin: 0 35px 20px;
                & .name {
                    & span {font-size: 12px; line-height: 1; font-weight: 400; color: #a6a6a7; margin: 0 0 15px; display: inline-block;}
                    & p {font-size: 26px; line-height: 1; font-weight: 400;}
                }
                & .reset {
                    & button {font-size: 12px;}
                }
            }
            & .custom-mid {
                flex: 1; min-height: 0; overflow-y: auto; padding: 0 35px;
            }
            & .custom-step-box{
                & .chklist{
                    display: flex; flex-direction: column; gap: 12.5px;

                    & > li{
                        & .libre-chk{
                            display: inline-flex; align-items: center; gap: 8px;

                            & > input{position: absolute; width: 0; height: 0; opacity: 0; font-size: 0; left: -9999px;}
                            & > input + .shape{
                                position: relative; display: inline-block; width: 15px; height: auto; aspect-ratio: 1; border: 1px solid #ccc; border-radius: 50%;
                                &:before{content: ""; position: absolute; top: 3px; left: 3px; width: 7px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #111; opacity: 0;}
                            }
                            & > input:checked + .shape{
                                &:before{opacity: 1;}
                            }
                            & .name{display: inline-block; font-size: 12px; font-weight: 400; color: #111; line-height: 1.2;}
                        }
                        & .related-ip{
                            display: none; height: 45px; border: 1px solid #ccc; border-radius: 10px; padding: 0 20px; font-size: 12px; color: #111; margin: 5px 0 5px;
                            &::placeholder{color: #999;}
                        }
                        & .libre-chk:has(input:checked) ~ .related-ip{display: block;}


                        &.error{
                            & .libre-chk{
                                & .name{color: #ff2727;}
                            }
                        }
                    }

                    
                }

                & .survey-list{
                    border: 1px solid #f0f0f0; border-radius: 30px; padding: 28px var(--custom-inner-box-side);

                    & .survey-chk{
                        & > dt{
                            & .tit{font-size: 16px; font-weight: 400; padding: 0 0 32px 0;}
                            & .tit.must{}
                            & .tit.must span{position: relative;}
                            & .tit.must span:before{content: ""; position: absolute; left: calc(100% + 2px); top: 0; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #ff2727;} 
                        }
                        & > dd{
                            padding: 0 0 0 10px;

                            /* & .chklist{
                                display: flex; flex-direction: column; gap: 10px;

                                & > li{

                                    & .libre-chk{
                                        display: inline-flex; align-items: center; gap: 6px;

                                        & > input{position: absolute; width: 0; height: 0; opacity: 0; font-size: 0; left: -9999px;}
                                        & > input + .shape{
                                            position: relative; display: inline-block; width: 12px; height: auto; aspect-ratio: 1; border: 1px solid #bdbdbd;
                                            &:before{content: ""; position: absolute; top: 2px; left: 2px; width: 6px; height: 4px; border-left: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(-45deg); opacity: 0;}
                                        }
                                        & > input:checked + .shape{
                                            border-color: #111;
                                            &:before{opacity: 1;}
                                        }
                                        & .name{display: inline-block; font-size: 14px; font-weight: 400; color: #111; font-size: 14px; line-height: 1.2;}
                                    }
                                }
                            } */
                        }
                    }
                    & .survey-chk + .survey-chk{margin-top: 24px;}
                }

                & .promotion{
                    border: 1px solid #f0f0f0; border-radius: 30px; padding: 30px 34px; display: flex; flex-direction: column; gap: 30px;

                    & .promo-group{
                        & .tit{font-size: 16px; font-weight: 400; padding: 0 0 15px 0;}
                        & .tit.must{}
                        & .tit.must span{position: relative;}
                        & .tit.must span:before{content: ""; position: absolute; left: calc(100% + 2px); top: 0; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #ff2727;} 
                    }

                    & .promo-list{
                        display: flex; flex-direction: column; gap: 20px;
                    }
                    & .promo-item{
                        position: relative; border: 1px solid #dfdfdf; border-radius: 13px; padding: 16px 50px 16px 30px;
                        & .name{font-size: 12px;}
                        & .desc{
                            p{
                                font-size: 14px; line-height: 1.2; padding: 12px 0 0;
                                span{display: inline-block; vertical-align: middle; margin: -2px 0 0 0; font-size: 18px; font-weight: 400;}
                            }

                            input{position: absolute; left: -9999px;}
                            input + .shape{
                                position: absolute; top: 50%; transform: translateY(-50%); right: 30px; display: inline-block; width: 15px; height: auto; aspect-ratio: 1; border: 1px solid #ccc; border-radius: 50%;
                                &:before{content: ""; position: absolute; top: 3px; left: 3px; width: 7px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #111; opacity: 0;}
                            }
                            input:checked + .shape{
                                &:before{opacity: 1;}
                            }
                            input[disabled] + .shape{
                                
                            }
                        }
                        & .disable-guide{
                            /* display: none; */ font-size: 12px; color: #ff2727; padding: 15px 0 0;
                        }

                        &:has(input:checked){
                            border-color: #111;
                        }
                        &:has(input[disabled]){
                            border-color: #f5f5f5; cursor: not-allowed;
                            & .name{opacity: 0.3;}
                            & .desc{opacity: 0.3;}
                        }
                    }

                    & .note-list{
                        padding: 15px 0 0 5px;
                        li{
                            position: relative; padding: 0 0 0 0.7em; font-size: 12px; color: #a6a6a7;
                            &:before{content: "*"; position: absolute; top: 0; left: 0;}
                        }
                    }
                }

                & .custom-calendar {
                    /* padding: 16px 0 0; */ border: 1px solid #f0f0f0; border-radius: 30px; 
                    padding: 30px var(--custom-inner-box-side);
                    & .desc {
                        & p {font-size: 16px; margin: 0 0 11px;}
                        & span {font-size: 14px; color: #B1B1B1;
                            & strong {font-weight: 400; color: #111;}
                        }
                    }
                    & .date {
                        & .con {
                            padding: 13px 0 32px;
                            & .calendar {
                                padding: 13px 19px 15px; border: 1px solid #dfdfdf; border-radius: 12px;
                                & .calendar-top {
                                    position: relative; display: flex; justify-content: space-between; align-items: center; padding: 15px 0 14px; border-bottom: 1px solid #E4E5E7;
                                    & .dt {
                                        position: absolute; top: 17px; left: 50%; transform: translate(-50%); display: flex; flex-wrap: wrap; gap: 0.2em;
                                        & p {font-size: 13px; font-weight: 400; color: #111;}
                                        & span {font-size: 13px; font-weight: 400; color: #111;}
                                    }
                                    & .bt {
                                        display: flex; flex-wrap: wrap; justify-content: center; gap: 85px; width: 100%;
                                        & button {}
                                        & button i {color: #848A95;}
                                    }
                                }
                                & .calendar-bot {display: flex; flex-direction: column; gap: 11px; padding: 12px 0 0;
                                    & .week {display: grid; grid-template-columns: repeat(7, 1fr); gap: 20px; text-align: center;
                                        & p {font-size: 12px; color: #000; padding: 4px 0;}
                                        & p:nth-child(1) {color: #cc0000;}
                                    }
                                    & .day {display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px 20px; text-align: center;
                                        & button {position: relative; display: flex; justify-content: center; align-items: center; font-size: 12px; text-align: center; aspect-ratio: 1 / 1; border-radius: 50%; color: #000;}
                                        & button:before{content: ""; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 116%; height: 23px; border-radius: 10px; background: #f5f5f5; opacity: 0;}
                                        & button:nth-child(7n+1){color: #cc0000;}
                                        & button:disabled {opacity: 0.25;}
                                        & button.on {/* background: #222; */ color: #fff;}
                                        & button.on:before{background: #111; opacity: 1;}
                                        & button:hover {/* background: #f5f5f5; */}
                                        & button:hover:before{opacity: 1;}
                                        & button:disabled:hover {background: none; cursor: not-allowed;}
                                    }
                                }
                            }
                        }
                        & .group {
                            
                            & .group-txt {
                                margin: 0 0 17px;
                                & p {font-size: 14px; line-height: 1;}
                            }
                            & .group-list {
                                display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 7px;

                                & button {height: 39px; font-size: 12px; border: 1px solid #dfdfdf; border-radius: 7px; text-align: center;}
                                & button.on {border-color: transparent; background-color: #111; color: #fff;}
                                & button[disabled] {position: relative; cursor: no-drop; opacity: 0.3;}
                            }
                        }
                        & .group + .group{margin-top: 34px;}

                        & .warning {
                            padding: 16px 0 0; margin: 16px 0 0;

                            & p {font-size: 12px; font-weight: 400; margin: 0 0 9px;}
                            & span {
                                position: relative; padding: 0 0 0 0.6em; display: block; font-size: 12px; line-height: 1.6;
                                &:before{content: "·"; position: absolute; top: 0; left: 0;}
                            }
                        }
                    }
                }

                & .summary-box {
                    border: 1px solid #f0f0f0; border-radius: 30px; padding: 30px var(--custom-inner-box-side) 34px;
                    > li {
                        position: relative; padding: 17px 10px 16px; border-bottom: 1px solid #dfdfdf;

                        & p {font-size: 12px;}
                        & span {font-size: 14px; display: block; color: #666; padding: 11px 0 0;}
                        & .back-to-modify{
                            position: absolute; bottom: 18px; right: 10px; font-size: 12px; color: #666;
                            &:after{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0 8px; width: 7px; height: 8px; background: url("../img/contents/back-to-modify-arr.png") no-repeat center / 100% auto;}
                        }

                        &:nth-child(1){padding-top: 0;}
                    }
                }

                & .reserve-sum{
                    border: 1px solid #f0f0f0; border-radius: 30px; padding: 30px var(--custom-inner-box-side) 33px;
                    > dl{
                        > dt{
                            display: flex; flex-wrap: wrap; margin: 0 0 30px;
                            .title{font-size: 16px;}
                            .back-to-modify-reserve{
                                margin: 0 0 0 auto; display: inline-block; font-size: 12px; color: #111;
                                &:after{content: ""; display: inline-block; vertical-align: middle; margin: 0 0 0 8px; width: 7px; height: 8px; background: url("../img/contents/back-to-modify-arr.png") no-repeat center / 100% auto; filter: brightness(0) saturate(100%);}
                            }
                            .btn-fold-group{
                                margin: 9px 0 0 auto; display: inline-block; font-size: 0; color: #111; width: 8px; height: 7px; background: url("../img/contents/btn-fold-group.png") no-repeat center / 100% auto; filter: brightness(0) saturate(100%); position: relative; transform: rotate(180deg);
                                &:before{content: "클릭 영역 확보"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 24px; height: auto; aspect-ratio: 1;}
                            }
                        }
                        > dd{
                            .sub{
                                > li{
                                    border-bottom: 1px solid #dfdfdf; padding: 0 0 14px;
                                    .name{font-size: 12px; color: #a6a6a7; margin: 0 0 1px;}
                                    .cont{font-size: 14px;}
                                }
                                > li + li{margin-top: 22px;}
                            }
                        }
                    }
                    > dl + dl{padding: 33px 0 0;}

                    &.foldable{
                        > dl{
                            > dt{
                                margin: 0;
                                .btn-fold-group{}
                            }
                            > dd{display: none;}
                        }
                        &.on{
                            > dl{
                                > dt{
                                    margin: 0 0 30px;
                                    .btn-fold-group{transform: rotate(0deg);}
                                }
                            }
                        }
                    }
                }
                & .reserve-sum + .reserve-sum{margin-top: 20px;}
            }
            & .custom-select {
                display: flex; flex-direction: column; gap: 20px;
                & .custom-section {
                    padding: 16px 0; /* border-top: 1px solid #E4E4E4; */ border: 1px solid #f0f0f0; border-radius: 30px; padding: 31px var(--custom-inner-box-side) 29px;
                    &:firts-child {border-top: 0;}

                    /* 모델 선택 전 */
                    .custom-select.step0 & {opacity: 0.5;}

                    & .desc {
                        cursor: pointer; user-select: none;
                        .custom-select.step0 & {cursor: not-allowed;}

                        & p {
                            position: relative; display: flex; flex-wrap: wrap; /* justify-content: space-between; */ align-items: center; font-size: 14px; line-height: 1; font-weight: 400; margin: 0 0 17px;

                            & em{position: relative; font-style: normal; font-weight: 400; font-size: 16px;}
                            & em.must{}
                            & em.must:before{content: ""; position: absolute; left: calc(100% + 2px); top: 0; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #ff2727;}
                            & i {font-size: 20px; margin: 0 0 0 auto;}
                            & .toggler{position: absolute; right: 0; top: 14px; display: inline-block; width: 20px; height: auto; aspect-ratio: 1;}
                            & .toggler:before,
                            & .toggler:after{content: ""; position: absolute; top: 10px; left: 5px; width: 65%; height: 1px; background: #000;}
                            & .toggler:after{width: 1px; height: 65%; opacity: 0; top: 4px; left: 11px;}
                            & .toggler.on:after{opacity: 1;}
                        }
                        & span {display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1; color: #a6a6a6;
                            & strong {font-weight: 400; color: #111;}
                        }
                        & .disable-guide{display: none; /* display: block; */ font-size: 12px; color: #ff2727; font-style: normal; line-height: 1; padding: 2px 0 5px;}
                    }
                    & .group {
                        padding: 15px 0 0;
                        > ul {
                            display: flex; flex-direction: column; gap: 9px;
                            > li {
                                & label {
                                    position: relative; display: flex; align-items: center; gap: 10px; width: 100%; height: 53px; padding: 0 20px; border: 1px solid transparent; border-radius: 10px; color: #666;
                                    &:before{content: ""; position: absolute; bottom: 0; left: 10px; right: 10px; border-bottom: 1px solid #dfdfdf;}

                                    & input {display: none;}
                                    & .color-box {display: inline-block; width: 20px; height: 20px;}
                                    & p {font-size: 14px; line-height: 1; padding: 0 18px 0 0;}
                                    & .radio-shape{position: relative; margin: 0 0 0 auto; display: inline-block; width: 15px; height: auto; aspect-ratio: 1; border: 1px solid #ccc; border-radius: 50%;}
                                    & .radio-shape:before{content: ""; position: absolute; top: 3px; left: 3px; width: 7px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #111; opacity: 0;}

                                    &:has(input[type="radio"]:checked) {border-color: #111;}
                                    &:has(input[type="radio"]:checked):before {opacity: 0;}
                                    &:has(input[type="radio"]:checked) .radio-shape:before{opacity: 1;}
                                }
                            }
                        }
                    }
                    & .option {padding: 16px 0 0;
                        & select {height: 53px; font-size: 14px; border: none; background: #f7f7f7 url("../img/common/form_sel_arrow_new.png") no-repeat calc(100% - 20px) center; cursor: pointer; border-radius: 10px; color: #666; padding: 0 45px 0 30px;}
                    }
                    & .check {display: flex; align-items: center; gap: 24px; padding: 16px 0 0;
                        & label {
                            & input {display: none;}
                            & span {display: block; line-height: 1; padding: 0 0 0 22px; background: url("../img/contents/ico-check.png") no-repeat center; background-size: 12px; background-position: left top 4px; opacity: 0.3;}
                            & input[type="radio"]:checked + span {opacity: 1;}
                        }
                    }
                    & .txt {padding: 10px 0 0;
                        & input[type="text"] {height: 53px; font-size: 14px; border: none; padding: 0 30px; border-radius: 10px; background: #f7f7f7; color: #666;}
                        & input::placeholder{color: #666;}
                        & .length-chk{text-align: right; font-size: 12px; color: #a6a6a7; padding: 8px 0 16px; border-bottom: 1px solid #dfdfdf;}
                        & .length-chk span{color: #111;}
                    }

                    &.disabled{
                        & .desc{
                            & span{
                                display: none;
                                .custom-select.step0 & {display: flex;}
                            }
                            & .disable-guide{
                                display: block;
                                .custom-select.step0 & {display: none;}
                            }
                        }
                    }
                }
            }
            & .custom-info {
                
            }
            & .custom-upload {
                & .custom-upload-wrap{
                    border: 1px solid #f0f0f0; border-radius: 30px; padding: 31px var(--custom-inner-box-side) 28px;
                }
                & .sm-tit{
                    font-size: 14px; font-weight: 500; color: #111; margin: 0 0 16px;

                    &:not(:nth-of-type(1)){margin-top: 30px;}
                }
                & .custom-desc {
                    position: relative; padding: 1px 0 21px; z-index: 1;

                    & .txt {
                        display: flex; align-items: center; gap: 7px;
                        & p {font-size: 12px; line-height: 1; font-weight: 300; color: #a6a6a7;}
                        & img {cursor: pointer; width: 12px; height: auto;}
                        & span {
                            position: absolute; top: 100%; left: 0; display: block; font-size: 12px; padding: 8px 12px; background: #fff; box-shadow: 0px 4px 20px 0px #00000026; opacity: 0; pointer-events: none; transition: all 0.2s;
                            &:before{content: "영역확보"; font-size: 0; position: absolute; bottom: 100%; left: 0; width: 100%; height: 12px; background-color: transparent; opacity: 0;}
                        }

                        & img:hover + span,
                        & span:hover{opacity: 1; pointer-events: auto;}
                    }
                }
                & .custom-preview {
                    & img {width: 100%; display: none;}
                    & img.show {display: block;}

                    & .preview-check{}
                    & img.show + .preview-check{margin: 20px 0 0;}
                }
                & .custom-file {
                    padding: 0 0 16px;

                    & label {
                        display: flex; align-items: center; gap: 8px; height: 53px; padding: 0 16px; border: 1px solid #ccc; border-radius: 10px;
                        & input {display: none;}
                        & img {}
                        & p {font-size: 12px; color: #a6a6a7;}
                    }
                }
                & .custom-background{
                    & .bg-list{
                        display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(auto-fill, minmax(10px, auto)); gap: 10px;

                        & > li{}
                        & > li button{position: relative; display: block; width: 100%; height: auto; aspect-ratio: 95 / 60; overflow: hidden;}
                        & > li button.on{}
                        & > li button.on:after{content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; border: 2px solid #000;}
                        & > li button img{width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }
            & .custom-form {
                > * + *{margin-top: 20px;}

                & .form {
                    /* padding: 16px 0 0; */ border: 1px solid #f0f0f0; border-radius: 30px; padding: 35px 34px 28px;

                    > ul {
                        > li {
                            margin: 0 0 22px;
                            &:last-child {margin: 0;}
                            & .form-cate {
                                display: none; margin: 0 0 8px;
                                & p {position: relative; font-size: 14px; font-weight: 600; padding: 0 0 0 14px;
                                    &.est::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 6px; background: #A5A6A6; border-radius: 50%;}
                                }
                            }
                            & .form-input {
                                position: relative; display: flex; align-items: center; border-bottom: 1px solid #e4e4e4;
                                & input {border: 0; font-size: 14px; height: 53px; padding: 0 7px 0 7px; color: #111;}
                                & select {border: 0; font-size: 14px; height: 53px; background: url("../img/common/form_sel_arrow_new.png") no-repeat center right 10px; padding: 0 25px 0 19px; cursor: pointer;}
                                & textarea {border: 0; font-size: 14px; /* padding: 12px 0; */ padding: 0px 7px 0; color: #111; box-sizing: border-box !important;}
                                & textarea:focus{padding-top: 17px;}
                                & textarea.auto-resize{min-height: 53px; height: 53px; overflow-y: auto; resize: none; line-height: 1.4; padding-top: 17px; max-height: 200px;}
                                & textarea.auto-resize.grown{margin-bottom: 15px;}

                                & input + label{position: absolute; top: 50%; left: 7px; transform: translateY(-50%); transition: 0.1s; pointer-events: none; font-size: 14px; font-weight: 400; color: #111; line-height: 1;}
                                & input:focus + label{top: 4px; transform: translateY(-50%); font-size: 12px; color: #a6a6a7;}
                                & input:focus + label span{display: none;}
                                & input:not(:placeholder-shown):not(:focus) + label { top: 4px; transform: translateY(-50%); font-size: 12px; color: #a6a6a7;}
                                & input:not(:placeholder-shown):not(:focus) + label span {display: none;}

                                & textarea + label{position: absolute; top: 50%; left: 7px; right: 16px; transform: translateY(-50%); transition: 0.1s; pointer-events: none; font-size: 14px; font-weight: 400; color: #111; line-height: 1;}
                                & textarea:focus + label{top: 4px; transform: translateY(-50%); font-size: 12px; color: #a6a6a7; background-color: #fff;}
                                & textarea:focus + label:before{content: ""; position: absolute; z-index: -1; bottom: -5px; left: 0; right: 0; top: 0; background-color: #fff;}
                                & textarea:focus + label span{display: none;}
                                & textarea:not(:placeholder-shown):not(:focus) + label {top: 4px; transform: translateY(-50%); font-size: 12px; color: #a6a6a7; background-color: #fff;}
                                & textarea:not(:placeholder-shown):not(:focus) + label:before{content: ""; position: absolute; z-index: -1; bottom: -5px; left: 0; right: 0; top: 0; background-color: #fff;}
                                & textarea:not(:placeholder-shown):not(:focus) + label span {display: none;}

                                &.email{
                                    font-size: 14px;
                                }
                            }

                            &.error{
                                & .form-input{
                                    & input + label{color: #ff2727;}
                                }
                            }
                        }
                    }

                    .form-info-guide{
                        display: flex; flex-direction: column; gap: 31px; padding: 33px 0 0;
                        > dl{
                            font-size: 12px; color: #111;
                            > dt{font-weight: 700; margin: 0 0 12px;}
                            > dd{
                                line-height: 1.5;
                                .chklist{padding: 16px 0 0; gap: 6px;}
                            }
                        }
                    }
                }
            }
            & .custom-reservation {
                & .custom-offer {text-align: center; padding: 16px 0; margin: 0 0 16px; border-bottom: 1px solid #e4e4e4;
                    & p {font-size: 14px; font-weight: 500;
                        & strong {font-weight: 500;}
                    }
                }
                
            }
            & .custom-guide {
                & .custom-guide-wrap{
                    border: 1px solid #f0f0f0; border-radius: 30px; padding: 28px var(--custom-inner-box-side);
                }

                & .desc {
                    padding: 3px 0 16px; border-bottom: 1px solid #dfdfdf;
                    & p {font-size: 16px; font-weight: 400; padding: 0 0 11px;}
                    & span {
                        font-size: 14px; color: #a6a6a7;
                        & strong {font-weight: 400; color: #000;}
                    }
                }
                & .info-wrap {
                    font-size: 12px; padding-left: 10px;
                    p{font-weight: 600; margin: 0 0 13px;}
                    span{display: block; margin: 0 0 13px; line-height: 1.6;}
                    ul{
                        display: flex; flex-direction: column; gap: 2px;
                        li{
                            position: relative; padding: 0 0 0 0.6em;
                            &:before{content: "·"; position: absolute; top: 0; left: 0;}
                        }
                    }

                    &.hasBdt{border-top: 1px solid #dfdfdf; padding-top: 33px;}
                }
                & .info-wrap + .info-wrap{margin-top: 32px;}
                & .toss_area{
                    margin: 0 -24px 0 -24px;
                }
            }
            & .custom-complete {
                & .txt {
                    display: flex; flex-direction: column; gap: 18px; align-items: center; padding: 40px 0 58px;

                    & .chk-mark{
                        position: relative; width: 45px; height: auto; aspect-ratio: 1; border: 1px solid #111; border-radius: 50%;
                        &:before{content: ""; position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); width: 20px; height: 11px; border-left: 3px solid #000; border-bottom: 3px solid #000;}
                    }
                    & p {font-weight: 400; font-size: 15px;}
                }
                & .info {padding: 16px 0; border-bottom: 1px solid #E4E4E4;
                    & p {font-size: 14px; margin: 0 0 8px;}
                    & span {display: block; font-size: 14px; margin: 0 0 8px; line-height: 1.55;
                        &:last-child {margin: 0;}
                        & strong {font-weight: 400; color: #B1B1B1;}
                    }
                }
            }
            & .custom-survey{

                
            }
        }
        & .custom-btn {
            flex: 0 0 auto; display: flex; flex-wrap: wrap; height: 62px; align-items: center; padding: 0 5px;

            & button {
                position: relative; display: flex; justify-content: center; align-items: center; gap: 8px; width: auto; height: 52px; flex: 1; min-width: 0; background: #a5a6a7; color: #fff;
                border-radius: 10px;

                & i {}
                & p {font-weight: 400; font-size: 15px;}
                & .icon-angle-right{
                    &:before{content: ""; width: 8px; height: 9px; background: url("../img/common/icon-angle-right.png") no-repeat center / 100% auto;}
                }
                & .icon-angle-left{
                    &:before{content: ""; width: 8px; height: 9px; background: url("../img/common/icon-angle-left.png") no-repeat center / 100% auto;}
                }

                &.disabled{background: #ccc; cursor: not-allowed;}
                &.disabled:hover{background: #d1d1d1;}

                &.prev{background: #ccc; border-radius: 10px 0 0 10px; flex: 0 0 auto; width: 43%;}
                &.prev:hover{background: #d1d1d1;}
                &.prev:not([style*="display:none"]) + .next,
                &.prev:not([style*="display: none"]) + .next{border-radius: 0 10px 10px 0; flex: 0 0 auto; width: 57%;}
                &.prev[style*="display:none"] + .next,
                &.prev[style*="display: none"] + .next{border-radius: 10px; width: auto; flex: 1;}
                &.next:not([style*="display:none"]) + .etc,
                &.next:not([style*="display: none"]) + .etc{border-radius: 0 10px 10px 0; flex: 0 0 auto; width: 57%;}
                &.w100{flex: 0 0 auto; width: 100%;}
                &.dark{background-color: #333; color: #fff;}

                &.copyUrl{
                    overflow: hidden;
                    .messeage{
                        position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; user-select: none; transition: 0.3s; display: flex; align-items: center; justify-content: center; text-align: center; background: #a5a6a7; font-size: 12px; color: #fff;
                        &.on{opacity: 1;}
                    }
                }

                &:hover{background: #afafb0;}
            }

            &:has(.inner-btn){
                flex: 0 0 auto; height: auto; padding-bottom: 5px;
                & .inner-btn{
                    flex: 0 0 auto; width: 100%; padding: 24px 25px 24px; display: flex; flex-wrap: wrap; gap: 10px;
                }
                > button{flex: 0 0 auto; width: 100%;}
            }
        }
    }
    @media (width <= 1280px) {
        --custom-inner-box-side: 30px;
        & .custom-layer{
            width: 460px;
        }
    }
    @media (width <= 960px) {
        & .custom-img {
            height: calc(100% - calc(var(--vh, 1vh) * 50) - 60px);
        }
        & .custom-layer {position: fixed; bottom: 0; left: 0; width: 100%; height: auto; background: #fff;
            & .custom-con {
                flex: 0 0 auto; 
                height: calc(var(--vh, 1vh) * 50);
                max-height: calc(var(--vh, 1vh) * 90 - var(--header-height)); 
                padding: 30px 20px;
                & .custom-more {display: flex;}
                &.expand {height: calc(var(--vh, 1vh) * 90 - var(--header-height));}
            }
        }
    }
    @media (width <= 640px){
        --custom-inner-box-side: 20px;
        & .custom-layer{
            & .custom-con{
                & .custom-top{
                    margin: 0 0 20px;
                    & .name{
                        & p{font-size: 24px;}
                    }
                }
                & .custom-mid{
                    padding: 0;
                }
            }
        }
    }
}

/* support - contact (문의하기) */
.contact-wrap {
    & .contact-map {position: relative; width: 100%; height: 360px; margin: 0 0 70px; filter: grayscale(1);
        & .root_daum_roughmap {width: 100%; height: 100%;}
        & .root_daum_roughmap .wrap_map {height: 100%;}
        & .root_daum_roughmap .wrap_map .map {height: 100%;}
        & .root_daum_roughmap .wrap_controllers,
        & .root_daum_roughmap .cont,
        & .root_daum_roughmap .wrap_map .map > div:nth-child(2),
        & .root_daum_roughmap .map_border {display: none;}
    }
    & .contact-body {display: flex;
        > div {
            & .tit {margin: 0 0 50px;
                & p {font-size: 36px; font-weight: 500;}
            }
        }
        & .info {flex: 1;
            & .con {
                > ul {
                    > li {margin: 0 0 30px;
                        &:last-child {margin: 0;}
                        & p {font-size: 14px; font-weight: 600; margin: 0 0 10px;}
                        & span {font-size: 14px;}
                        & a {display: inline-block; filter: brightness(0) saturate(100%); margin: 0 16px 0 0;
                            &:last-child {margin: 0;}
                            & img {width: 26px;}
                        }
                    }
                }
            }
        }
        & .inquiry {flex: 1;
            & .form {
                > ul {
                    > li {margin: 0 0 25px;
                        &:last-child {margin: 0;}
                        & .form-cate {margin: 0 0 8px;
                            & p {position: relative; font-size: 14px; font-weight: 600; padding: 0 0 0 14px;
                                &.est::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 6px; height: 6px; background: #CE0C49; border-radius: 50%;}
                            }
                        }
                        & .form-input {display: flex; align-items: center; border-bottom: 1px solid #e4e4e4;
                            & input {border: 0; font-size: 14px; height: 56px;}
                            & select {border: 0; font-size: 14px; height: 56px;}
                            & textarea {border: 0; font-size: 14px;}
                        }
                    }
                }
            }
            & .agree {display: flex; align-items: center; gap: 10px; margin: 25px 0;
                & .agree-check {
                    & input[type="checkbox"] {display: none;}
                    & label {display: flex; align-items: center; gap: 10px;
                        & span {position: relative; display: block; width: 20px; height: 20px; border: 1px solid #000;
                            &::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; background: #000; opacity: 0;}
                        }
                        & p {font-size: 15px; font-weight: 500;}
                    }
                    & input[type="checkbox"]:checked + label {
                        & span::after {opacity: 1;}
                    }
                }
                & .agree-more {
                    & button {font-size: 15px; color: #999; text-decoration: underline;}
                }
            }
            & .bt {
                & button {display: flex; justify-content: center; align-items: center; gap: 10px; width: 100%; height: 56px; font-size: 14px; font-weight: 500; color: #fff; background: #000;}
            }
        }
    }
    @media (width <= 860px) {
        & .contact-body {flex-direction: column; gap: 40px;
            > div {
                & .tit {margin: 0 0 30px;}
            }
            & .info {
                & .con {
                    > ul {display: flex; flex-wrap: wrap;}
                    > ul > li {width: calc(100% / 2); margin: 0 0 20px;}
                }
            }
        }
    }
    @media (width <= 768px) {
        & .contact-body {flex-direction: column; gap: 60px;
            > div {
                & .tit p {font-size: 24px;}
            }
        }
    }
    @media (width <= 460px) {
        & .contact-map {margin: 0 0 50px;}
        & .contact-body {
            & .info {
                & .con {
                    > ul {display: flex; flex-wrap: wrap;}
                    > ul > li {width: 100%;}
                }
            }
            & .inquiry {
                & .form {
                    > ul {
                        > li .form-input input {height: 40px;}
                        > li .form-input select {height: 40px;}
                    }
                }
                & .agree {margin: 16px 0;}
                & .bt button {height: 40px;}
            }
        }
    }
}

/* etc - guide (개인정보처리방침) */
.guide-wrap {
    padding: 35px 0 0;
    & .guide-body {
        & .con {
            & .con-text {
                
                & .top {padding: 0 0 20px;
                    & p {}
                }
                & .depth {
                    > ul {
                        > li {padding: 0 0 50px;
                            &:last-child {padding: 0;}
                            & p {margin: 0 0 20px;
                                &.bold {font-weight: 700;}
                            }
                            & span {display: block; margin: 0 0 6px;
                                &:last-child {margin: 0;}
                                &.dp1 {padding: 0 0 0 20px;}
                                &.dp2 {padding: 0 0 0 40px;}
                                &.dp3 {padding: 0 0 0 60px;}
                            }
                        }
                    }
                }
            }
        }
    }
    @media (width <= 1024px) {
        & .guide-body {
            & .con {
                & .con-text {padding: 0;}
            }
        }
    }
    @media (width <= 640px) {
        & .guide-body {
            & .con {
                & .con-text {
                    & .top p {font-size: 14px;}
                    & .depth > ul > li p {font-size: 14px;}
                    & .depth > ul > li span {font-size: 14px;}
                }
            }
        }
    }
    @media (width <= 460px) {
        & .guide-body {
            & .con {
                & .con-text {
                    & .depth > ul > li {padding: 0 0 40px;}
                    & .depth > ul > li p {font-size: 14px; margin: 0 0 15px;}
                }
            }
        }
    }
}



/***************************************************/
/* 게시판 하단 ▼ */
/***************************************************/
.bbs-wrap + .content-wrap{
    padding-top: 100px;
    @media (width <= 860px){
        padding-top: 70px;
    }
}

.content-board{
    background: #f5f5f5; padding: 0 0 80px;
    & .sec-tit-sub{padding: 0;}
    & .sec-tit-sub + .sec-des-sub{padding: 17px 0 38px;}

    @media (width <= 860px){
        padding: 0 0 65px;
    }
    @media (width <= 640px){
        padding: 0 0 50px;
    }

    .sec-tit-center{
        text-align: center; padding: 74px 0 56px;
        & .title{font-size: 32px; font-weight: 400; line-height: 1.2;}
        & .title.small{font-size: 26px;}
        & .des{font-size: 16px; font-weight: 400; padding: 29px 20px 0; text-wrap: balance;}

        @media (width <= 860px){
            padding: 65px 0 30px;
            & .title{font-size: 30px;}
            & .title.small{font-size: 22px;}
            & .des{font-size: 14px; padding: 20px 20px 0;}
        }
        @media (width <= 640px){
            padding: 50px 0 30px;
            & .title{font-size: 24px;}
            & .title.small{font-size: 20px;}
        }
    }
}



@keyframes arrow-move {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(8px); }
}
@keyframes arrow-move-reverse {
    0%, 100% { transform: translateY(-50%) translateX(0); }
    50%      { transform: translateY(-50%) translateX(-8px); }
}