@charset "utf-8";

/* ============================================
    REUSERBLE COMPONENT
============================================ */


/* btn-view */
.btn-view{
    position: relative; display: inline-flex; align-items: center; width: 250px; gap: 24px; font-size: 16px; font-weight: var(--fwsb); color: #fff; line-height: 60px; border-radius: 60px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5); text-transform: uppercase; padding: 0 20px; transition: 0.1s;

    & .arr{
        margin: 0 0 0 auto; position: relative; display: inline-block; width: 18px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #fff; transition: 0.2s;
        &:after{content: ""; position: absolute; inset: 0; background: url("/assets/site/img/common/view-arr.svg") no-repeat center;}
    }

    /* 마우스 오버 */
    &:hover{
        box-shadow: inset 0 0 0 1px #fff;
        & .arr{transform: rotate(45deg);}
    }
    /* 버튼 너비 */
    &.wa{width: auto;}
    /* 버튼 크기 */
    &.small{
        line-height: 48px; font-size: 14px; font-weight: var(--fwsb);
    }
    /* 버튼 색상 */
    &.blue{
        box-shadow: inset 0 0 0 1px var(--theme-blue); background: var(--theme-blue);
        & .arr{
            &:after{filter: var(--filter-theme-blue);}
        }
    }
    &.white{
        box-shadow: inset 0 0 0 1px #fff; color: #171717; background: #fff;
        & .arr{
            background: #171717;
            &:after{filter: var(--filter-white);}
        }
    }
}


/* 버튼 효과 */
.btn-hover-fx{
    position: relative; transition: 0.5s; overflow: hidden;
    &:hover,
    &:focus,
    &:focus-within{color: var(--theme-blue) !important;}

    & .hidden-circle{
        position: absolute; border-radius: 100%; z-index: 0;
        &.explode{animation: explode 0.5s forwards;}
        &.desplode{animation: desplode 0.5s forwards;}
    }

    @media (hover: none){
        /* 터치스크린 기기에만 적용 */
        color: var(--white) !important;
        &:hover,
        &:focus,
        &:focus-within{color: var(--white) !important;}
        
        & .hidden-circle{display: none !important;}
    }
}


/* contact-box (메인페이지, 견적문의 페이지 사용) */
.contact-box{
    & > .wrap{
        width: 1460px; margin: 0 auto;

        & > .bg{
            position: absolute; top: 26%; left: -23%; pointer-events: none;
        }

        & .sticky-wrap{
            display: flex; flex-wrap: wrap; gap: 60px;

            & .txt{
                flex: 0 0 auto;
                & .sec-tit{
                    & h3{
                        & br{display: block;}
                    }
                }
                @media (width <= 1024px){
                    width: 100%;
                }
            }
            & .con{
                flex: 1; min-width: 0; width: auto; max-width: 705px;
                margin: 0 0 0 auto; color: var(--white);
                & .hote-form{

                }
                & .hf-row{
                    display: block; border-bottom: 1px solid rgba(255,255,255,0.4); padding: 52px 0 14px;
                    &:has(input:focus, textarea:focus){border-color: #fff;}
                    &:first-child{padding-top: 15px;}
                }
                & .hf-name{
                    display: inline-block; font-weight: var(--fwm); color: var(--white); margin: 0 0 16px;
                    &.must{position: relative;}
                    &.must:before{content: ""; position: absolute; top: -5px; right: -6px; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--theme-blue);}
                }
                & .hf-input{
                    & input{-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 35px; background: none; border: none; color: var(--white); outline: none; font-size: 16px; font-weight: var(--fwr); font-family: inherit;}
                    & input::placeholder{color: #999;}
                    & input::-webkit-outer-spin-button,
                    & input::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}
                    & input[type="number"]{-moz-appearance: textfield;}
                    & input:focus::placeholder{opacity: 0;}
                }
                & .hf-textarea{
                    & textarea{display: block; width: 100%; height: 160px; background: none; border: none; color: var(--white); outline: none; font-size: 16px; font-weight: var(--fwr); font-family: inherit; resize: none; line-height: inherit;}
                    & textarea::placeholder{color: #999;}
                    & textarea:focus::placeholder{opacity: 0;}
                    & textarea::-webkit-scrollbar{width: 6px;}
                    & textarea::-webkit-scrollbar-thumb{border-radius: 6px; background-color: #9f9f9f;}
                    & textarea::-webkit-scrollbar-track{background-color: transparent;}
                }
                & .hote-agree{
                    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 36px 0 0;
                    & .layer-opener{color: #999; text-decoration: underline; text-underline-offset: 3px;}
                }
                & .hf-chk{
                    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px;
                    & input{position: absolute; left: -9999px; width: 0; height: 0; overflow: hidden;}
                    & input + .shape{position: relative; display: inline-block; width: 24px; height: auto; aspect-ratio: 1; border-radius: 2px; background-color: rgba(255,255,255,0.2);}
                    & input + .shape:after{content: ""; position: absolute; top: 7px; left: 6px; width: 12px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; opacity: 0; transform: rotate(-45deg);}
                    & input:checked + .shape{background-color: var(--theme-blue);}
                    & input:checked + .shape:after{opacity: 1;}
                }
                & .hote-button{
                    padding: 30px 0 0;
                    & button{
                        position: relative; display: inline-flex; align-items: center; justify-content: center; width: 260px; height: auto; aspect-ratio: 1; border-radius: 50%; font-size: 24px; font-weight: var(--fwb); color: var(--white); background: var(--theme-blue);
                        & .txt{position: relative;}
                    }
                }
                @media (width <= 1024px){
                    flex: 0 0 auto; width: 100%; max-width: none; margin: 0;
                    & .hf-row{
                        padding: 15px 0 5px;
                        &:first-child{padding-top: 0;}
                    }
                    & .hf-name{
                        &.must:before{top: 0;}
                    }
                    & .hf-textarea{
                        & textarea{
                            height: 100px;
                        }
                    }
                    & .hote-button{
                        text-align: center; padding: 50px 0 0;
                        & button{
                            aspect-ratio: initial; border-radius: 0; line-height: 48px; border-radius: 4px; font-size: 18px;
                        }
                    }
                }
                @media (width <= 640px){
                    & .hf-input{
                        & input{height: 32px;}
                    }
                    & .hote-button{
                        
                        & button{
                            width: 100%;
                        }
                    }
                }
            }
            
            @media (width <= 1024px){
                flex-direction: column; gap: 40px;
            }
        }

        @media (width <= 1600px){
            width: auto; padding: 0 30px;
        }
        @media (width <= 1280px){
            padding: 0 20px;
        }
    }
}


/* works-combo */
.works-combo{

    & .progress{
        display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
        & .name{
            flex: 0 0 auto; font-size: 24px; font-weight: var(--fwsb); color: #fff; padding: 0 8px;
            & span{}
            & span:after{content: ""; display: inline-block; vertical-align: middle; margin: -4px 0 0 38px; width: 15px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #d9d9d9;}
        }
        & .bar{
            flex: 1; height: 3px; background: #313131; position: relative;
            & .fill{position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(270deg, #388fff 0%, #0c448c 100%); transition: 1.2s ease-out;}
        }

        &.on{
            & .bar{
                & .fill{width: 100%;}
            }
        }
        @media (width <= 1600px){
            & .name{
                &.left{padding-left: 0;}
                &.right{padding-right: 0;}
            }
        }
        @media (width <= 1280px){
            & .name{
                & span:after{margin: -4px 0 0 16px;}
            }
        }
        @media (width <= 1024px){
            & .name{
                font-size: 18px;
                & span:after{width: 10px; margin: -3px 0 0 12px;}
            }
        }
        @media (width <= 640px){
            gap: 0;
            & .name{
                font-size: 12px;
                & span:after{width: 6px; margin: -3px 0 0 8px;}
            }
        }
    }
    & .works-sub-tit{
        position: relative; line-height: 1.2; font-size: 20px; font-weight: var(--fwb); letter-spacing: -0.03em; color: #fff; text-align: center; padding: 44px 0 35px;
        &:before{content: ""; display: inline-block; vertical-align: middle; margin: -5px 7px 0 0; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--theme-blue);}
        & span{vertical-align: middle; margin: 0 0 0 12px; font-size: 14px; color: #616161;}

        @media (width <= 640px){
            font-size: 16px;
            & span{margin: 0 0 0 4px;}
        }
    }
    & .works-list{
        display: flex; flex-wrap: wrap; gap: 30px; max-width: 1260px; margin: 0 auto;
        
        & > dl{
            flex: 1; min-width: 0; position: relative; text-align: center; border-radius: 16px; border: 3px solid transparent;
            background-image: linear-gradient(#252525, #252525), linear-gradient(to bottom, #252525, #252525);
            background-origin: border-box;
            background-clip: content-box, border-box;
            /* transition: 0.2s; */

            & > dt{
                font-size: 26px; font-weight: var(--fwb); color: #fff; padding: 33px 0 46px;
                & span{}
            }
            & > dd{
                padding: 0 0 48px;
                
                & .img{}
                & .img img{filter: brightness(0) saturate(100%) invert(57%) sepia(6%) saturate(208%) hue-rotate(201deg) brightness(99%) contrast(83%);}

                & .txt{color: #999; padding: 63px 10px 0;}
                & .txt .title{color: #a6b1bf; font-size: 1.125em; transition: 0.2s;}
                & .txt .desc{padding: 15px 0 0;}
            }

            &.on{
                background-image: linear-gradient(180deg, #121212 0%, #09101F 100%), linear-gradient(to bottom, #388fff, #6fa3e6);
                box-shadow: 2px 2px 20px 10px rgba(56,143,255,0.3);
                & > dd{
                    & .img img{filter: none;}
                    & .txt .title{color: #fff;}
                }
            }
        }

        @media (width <= 1280px){
            gap: 20px;
            & > dl{
                & > dt{
                    padding: 30px 0 12%; font-size: clamp(20px,2.2vw,26px);
                }
                & > dd{
                    padding: 0 0 35px;
                    & .txt{padding: 12% 10px 0;}
                    & .txt .desc{font-size: clamp(13px,1.3vw,15px);}
                }
                &.on{
                    box-shadow: 2px 2px 10px 5px rgba(56,143,255,0.3);
                }
            }
        }
        @media (width <= 1024px){
            gap: 20px;
        }
        @media (width <= 860px){
            flex-direction: column;
            & > dl{
                position: relative; text-align: left; position: relative; padding: 40px 10px 40px 150px; background: #252525;
                outline: 2px solid transparent; outline-offset: -2px;
                & > dt{
                    padding: 0;
                }
                & > dd{
                    position: static; padding: 0; display: block;
                    & .img{position: absolute; top: 50%; transform: translateY(-50%); left: 30px;}
                    & .img img{width: 90px;}
                    & .txt{padding: 10px 0 0;}
                    & .txt .desc{padding: 3px 0 0; font-size: 1rem;}
                    & .txt .desc br{display: none;}
                }

                &.on{
                    outline: 2px solid var(--theme-blue);
                }
            }
        }
        @media (width <= 640px){
            & > dl{
                padding: 20px 0 20px 90px;
                & > dt{font-size: 18px;}
                & > dd{
                    
                    & .img{left: 20px;}
                    & .img img{width: 50px;}
                    & .txt{padding: 10px 0 0;}
                    & .txt .title{font-size: 15px;}
                    & .txt .desc{font-size: 13px;}
                }
            }
        }
    }
}


/* keyword-cards */
.keyword-cards{
    display: flex; flex-wrap: wrap; gap: 30px; padding: clamp(20px,2.8%,40px) 0 0;

    & .keycard{
        flex: 1; min-width: 0; padding: 0 20px; transition: 0.5s; transition-delay: 0.3s; text-align: center; background: #1e1e1e;

        & .top{
            padding: 70px 0 0;
            & h4{font-size: 26px; font-weight: var(--fwb); line-height: 1.2;}
        }
        & .mid{
            padding: 49px 0 63px;
            & .img{}
            & .img img{}
        }
        & .bot{
            padding: 0 0 81px;
            & dt{font-size: 18px; font-weight: var(--fwm);}
            & dd{padding: 15px 0 0; color: #999;}
        }
    }

    &.on{

        & .keycard{transform: translateY(-40px);}
        & .keycard:nth-child(even){transform: translateY(40px);}
    }

    @media (width <= 1280px){
        gap: 20px;
        & .keycard{
            & .top{
                padding: 50px 0 0;
                & h4{font-size: 2.3vw;}
            }
            & .mid{
                padding: 30px 0 30px;
            }
            & .bot{
                padding: 0 0 50px;
            }
        }
        &.on{
            & .keycard{transform: translateY(-20px);}
            & .keycard:nth-child(even){transform: translateY(20px);}
        }
    }
    @media (width <= 1024px){
        padding: 0;
        & .keycard{
            flex: 0 0 auto; width: calc( (100% - 20px) / 2 ); border-radius: 16px; padding: 0 10px;
            & .top{
                padding: 10% 0 0;
                & h4{font-size: 3vw;}
            }
            & .mid{
                padding: 2.5% 0;
            }
            & .bot{
                padding: 0 0 10%;
            }
        }

        &.on{
            & .keycard{transform: none;}
            & .keycard:nth-child(even){transform: none;}
        }
    }
    @media (width <= 640px){
        gap: 10px;
        & .keycard{
            width: calc( (100% - 10px) / 2 );
            & .top{
                padding: 20% 0 0;
                & h4{font-size: 16px;}
            }
            & .mid{
                padding: 10% 0;
                & .img img{width: 40%;}
            }
            & .bot{
                padding: 0 0 15%;
                & dt{font-size: 15px;}
                & dd{
                    font-size: 12px; text-wrap: balance; padding: 5px 0 0;
                    & br{display: none;}
                }
            }
        }
    }
}


/* desc-tab-wrap */
.desc-tab-wrap{
    & .desc-con{
        & .con{
            height: 0; opacity: 0; transform: translateY(20px); overflow: hidden; transition: 0.5s; text-align: center;
            & .tit{
                position: relative; display: inline-block; text-align: center;
                & p{
                    position: relative; display: inline-block; line-height: 1.2; font-size: 28px; font-weight: var(--fwsb); letter-spacing: 0; color: #fff;
                    & em{
                        position: relative; padding: 0 0 0 16px;
                        &:before{content: ""; position: absolute; top: 13px; left: 0; display: inline-block; vertical-align: middle; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background: var(--theme-blue);}
                    }
                }
                & span{vertical-align: middle; margin: 0 0 0 12px; font-size: 14px; color: #757575;}
            }
            & .des{text-align: center; padding: 34px 0 50px; color: #bdbdbd; line-height: 1.75;}
            &.on{
                height: auto; opacity: 1; transform: translateY(0);
            }
        }
        @media (width <= 1024px){
            & .con{
                & .tit{
                    & span{margin: 5px 0 0; display: block;}
                }
            }
        }
        @media (width <= 640px){
            & .con{
                & .tit{
                    & p{
                        font-size: 22px;
                        & em{
                            padding: 0 0 0 14px;
                            &:before{top: 11px;}
                        }
                    }
                }
                & .des{padding: 10px 0 40px;}
                & .des br{display: none;}
            }
        }
    }
    & .desc-tab{
        display: flex; flex-wrap: wrap; gap: 30px;
        & .item{
            flex: 1; min-width: 0; display: block; border-radius: 16px; text-align: center; padding: 70px 0 61px;
            & .img{
                & img{}
            }
            & dl{
                padding: 50px 10px 0;
                & dt{font-size: 26px; font-weight: var(--fwb); line-height: 1.2;}
                & dd{font-size: 18px; font-weight: var(--fwm); line-height: 1.35; color: #a6b1bf; padding: 16px 0 0;}
            }
            &.on{
                background: linear-gradient(180deg, #064ba4 0%, #6fa3e6 100%);
                & .img{
                    & img{filter: var(--filter-white);}
                }
                & dl{
                    & dd{color: #fff;}
                }
            }
            &:not(.on):hover{
                box-shadow: 0 0 12px 5px #252525;
            }
        }
        @media (width <= 1280px){
            gap: 15px;
            & .item{
                padding: 6% 0;
                & .img{
                    & img{width: 30%;}
                }
                & dl{
                    padding: 15% 10px 0;
                    & dt{font-size: 2vw;}
                    & dd{font-size: 16px;}
                }
            }
        }
        @media (width <= 860px){
            & .item{
                flex: 0 0 auto; width: calc( ( 100% - 15px ) / 2 );
                & .img{
                    & img{width: 20%;}
                }
                & dl{
                    padding: 8% 10px 0;
                    & dt{font-size: 20px;}
                    & dd{font-size: 15px; padding: 10px 0 0;}
                }
            }
        }
        @media (width <= 640px){
            gap: 10px;
            & .item{
                flex: 0 0 auto; width: calc( ( 100% - 10px ) / 2 );
                & .img{
                    & img{width: 30%;}
                }
                & dl{
                    padding: 15% 10px 0;
                    & dt{font-size: 16px;}
                    & dd{font-size: 12px; padding: 7px 0 0;}
                }
            }
        }
    }
}


/* history */
.history{
    --gap-in-history: 16px;
    position: relative;
    & > .wrap{}
    & > .progress{
        position: absolute; left: 50%; top: 38px; top: -120px; bottom: 93px; width: 1px; background: rgba(255,255,255,0.2);
        & .line{position: absolute; left: -2px; top: 0; height: 0%; width: 5px; background: linear-gradient(0deg,rgba(111,163,230,1) 0%, rgba(6,75,164,1) 100%); border-radius: 0 0 5px 5px;}
    }
    & .year{
        display: flex; flex-wrap: wrap; padding-bottom: 162px;
        & .slogan{
            width: 50%; padding: 0 30px 0 0;
            font-size: 48px; font-weight: var(--fwm); line-height: 1.45; color: rgba(255,255,255,0.5);
            & strong{font-weight: var(--fwb); color: #fff;}
        }
        & .con{
            width: 50%; padding-left: 9.453%; position: relative;
            & > .title{
                position: relative; z-index: 1; font-size: 72px; font-weight: var(--fwb); line-height: 1.1;
                &:before{content: ""; position: absolute; top: 29px; left: -24.86%; width: 19px; height: auto; aspect-ratio: 1; border: 5px solid #1053aa; background: #fff;}
                & span[data-text]{position: relative;}
                & span[data-text]:after{content: attr(data-text); position: absolute; left: 0; width: 0; white-space: nowrap; overflow: hidden; transition: width 1.0s 0.2s;}
                & span[data-color="white"]:after{color: #fff;}
                & span[data-color="blue"]:after{color: var(--theme-blue);}
                &.on{
                    & span[data-text]:after{width: 100%;}
                }
            }
            & > .text{
                display: flex; flex-direction: column; gap: calc( var(--gap-in-history) * 2 ); padding: 30px 0 0;
                & .month{
                    display: flex; flex-wrap: wrap; font-weight: var(--fwb);
                    & > dt{flex: 0 0 auto; width: 60px;}
                    & > dd{
                        flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--gap-in-history);
                        & .item{
                            display: flex; flex-direction: column; gap: var(--gap-in-history);
                            & p{}
                            & .sublist{
                                display: flex; flex-direction: column; gap: var(--gap-in-history); word-break: break-all; overflow-wrap: break-word;

                                & > li{position: relative; padding: 0 0 0 14px; font-weight: var(--fwr); color: rgba(255,255,255,0.6);}
                                & > li:before{content: ""; position: absolute; top: 9px; left: 0; width: 4px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #a6b1bf;}
                            }
                        }
                    }
                }
            }
        }
    }
    & .year:last-child{padding-bottom: 0;}

    @media (width <= 1280px){
        & > .progress{
            top: -81px; bottom: 84px;
            & .line{
                
            }
        }
        & .year{
            & .slogan{
                font-size: 3.75vw; line-height: 1.3; padding: 10px 30px 0 0;
            }
            & .con{
                padding-left: 40px;
                & > .title{
                    font-size: clamp(40px,7.3vw,72px); line-height: 1;
                    &:before{left: -49px; top: 2.2vw;}
                }
                & > .text{
                    & .month{
                        & > dt{
                            width: 40px;
                        }
                    }
                }
            }
        }
    }
    @media (width <= 860px){
        
    }
    @media (width <= 640px){
        --gap-in-history: 8px;
        & > .progress{
            left: 40px; top: 20px; top: -65px; bottom: 63px;
            & .line{
                width: 3px; left: -1px;
            }
        }
        & .year{
            padding-bottom: 80px;
            & .slogan{display: none;}
            & .con{
                width: 100%; padding-left: 50px;
                & > .title{
                    &:before{width: 12px; border-width: 3px; top: 14px; left: -35px;}
                }
                & > .text{
                    padding: 20px 0 0;
                    & .month{
                        font-size: 14px;
                        & > dt{
                            width: 30px;
                        }
                    }
                }
            }
        }
    }
}


/* workplace */
.workplace{

    & .wp{
        display: flex; flex-wrap: wrap; 
        padding: 50px 50px; border-radius: 16px; background: #e2e5ea;

        & .info{
            flex: 0 0 auto; width: 50%; display: flex; flex-direction: column; padding: 0 20px 0 0;

            & .name{
                font-size: 36px; font-weight: var(--fwb);
                &:before{content: ""; display: inline-block; vertical-align: middle; margin: -5px 18px 0 0; width: 36px; height: auto; aspect-ratio: 36 / 22; background: url("/assets/site/img/common/bullet-corp.png") no-repeat center; background-size: 100% auto;}
            }
            & .wp-list{
                display: flex; flex-direction: column; gap: 17px; padding: 31px 0 0;
                & > li{position: relative; padding: 0 0 0 14px;}
                & > li:before{content: ""; position: absolute; top: 10px; left: 0; width: 3px; height: auto; aspect-ratio: 1; border-radius: 50%; background: #424242;}
            }
            & .wp-btns{
                margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px;
                & .btn-view{}
            }
        }

        & .map{
            flex: 0 0 auto; width: 50%; margin: 0 0 0 auto; aspect-ratio: 680 / 450; background: #ddd; position: relative;

            & iframe{border: none; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;}
        }
    }
    & .wp + .wp{margin-top: 50px;}

    @media (width <= 1280px){
        & .wp{
            padding: 30px;
            & .info{
                width: 45%;
            }
            & .map{
                width: 55%;
            }
        }
    }
    @media (width <= 1024px){
        & .wp{
            & .info{
                & .name{
                    font-size: 26px;
                }
            }
            & .map{
                aspect-ratio: 2 / 1.6;
            }
        }
    }
    @media (width <= 860px){
        & .wp{
            flex-direction: column-reverse; padding: 20px;
            & .info{
                width: 100%; padding: 20px 0 0;
                & .wp-btns{
                    margin: 30px 0 0;
                    & .btn-view{width: auto; flex: 1;}
                }
            }
            & .map{
                width: 100%; aspect-ratio: 2 / 1.3;
            }
        }
    }
    @media (width <= 640px){
        & .wp{
            & .info{
                & .name{
                    font-size: 20px;
                    &:before{width: 26px; margin: -4px 8px 0 0;}
                }
                & .wp-list{
                    gap: 10px; padding: 15px 0 0;
                }
                & .wp-btns{
                    & .btn-view{
                        line-height: 40px;
                    }
                }
            }
        }
    }
}


/* product-home-slide */
.product-home-slide{
    position: relative; overflow: hidden; overflow: visible; border-radius: 16px;
    & .list{
        & .item{
            transition: 0.3s;
            & .img{
                position: relative; aspect-ratio: 1460 / 690; border-radius: 16px; overflow: hidden;
                &:after{content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.3);}
                & img{width: 100%; height: 100%; object-fit: cover;}
            }
            & .txt{
                display: flex; flex-direction: column; justify-content: flex-end; position: absolute; inset: 0; padding: 0 40% 6.17% 6.85%; /* padding: 20.67% 40% 6.17% 6.85%; */
                & .sup{font-size: 14px; font-weight: var(--fwm); color: rgba(255,255,255,0.5); line-height: 1.2; padding: 0 0 14px;}
                & .tit{font-size: 36px; font-weight: var(--fwb); line-height: 1.2; color: #fff;}
                & .sub{color: #eee; line-height: 1.75; padding: 4.52% 0 0;}
                & .btn-list{
                    padding: 29px 0 0;
                }
            }
            &:not(.swiper-slide-active){
                transform: translateY(80px);
            }
        }
    }
    & .control{
        position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); left: 0; width: 100%; height: 50px;
        & .btn-pdt-main{
            position: absolute; top: 0; width: 50px; height: auto; aspect-ratio: 1; border-radius: 50%; background: rgba(18,18,18,0.5); background-repeat: no-repeat; background-position: center; font-size: 0;
            &.btn-pdt-main-prev{right: calc(100% + 30px); background-image: url("/assets/site/img/contents/btn-pdt-main-arr.svg");}
            &.btn-pdt-main-next{left: calc(100% + 30px); background-image: url("/assets/site/img/contents/btn-pdt-main-arr.svg"); transform: rotate(180deg);}
        }
    }

    @media (width <= 1680px){
        & .list{
            & .item{
                &:not(.swiper-slide-active){transform: translateY(0);}
            }
        }
        & .control{
            & .btn-pdt-main{
                &.btn-pdt-main-prev{right: auto; left: 0; transform: translateX(-50%);}
                &.btn-pdt-main-next{left: auto; right: 0; transform: rotate(180deg) translateX(-50%);}
            }
        }
    }
    @media (width <= 1280px){
        overflow: hidden;
        & .list{
            & .item{
                & .img{aspect-ratio: 2 / 1;}
                & .txt{
                    padding: 0 20% 50px 50px;
                    & .sub{padding: 3% 0 0;}
                }
            }
        }
        & .control{display: none;}
    }
    @media (width <= 1024px){
        & .list{
            & .item{
                & .img{aspect-ratio: 2 / 1.2;}
                & .txt{
                    padding: 0 20% 30px 30px;
                    & .tit{font-size: clamp(25px,3.3vw,34px);}
                }
            }
        }
    }
    @media (width <= 860px){
        & .list{
            & .item{
                & .img{aspect-ratio: 2 / 1.55;}
                & .txt{padding: 0 20% 30px 30px;}
            }
        }
    }
    @media (width <= 640px){
        display: none;
        & .list{
            & .item{
                & .img{aspect-ratio: 2 / 1.5;}
                & .txt{
                    padding: 0 20px 20px;
                    & .sup{font-size: 12px; padding: 0 0 10px;}
                    & .tit{font-size: 21px;}
                }
            }
        }
    }
}


/* product-home-quick */
.product-home-quick{
    padding: var(--subpage-sec-gap) 0 0;
    display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(auto-fill, minmax(50px, auto)); grid-row-gap: 30px; grid-column-gap: 30px;
    & > li{
        & a{
            position: relative; display: flex; align-items: center; justify-content: center; border-radius: 16px; overflow: hidden; background: #f5f5f5; width: 100%; height: auto; aspect-ratio: 715 / 400; padding: 0 20px;
            &:before{content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.6);}

            & .txt{
                position: relative; color: #fff; text-align: center; display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
                transition: 0.2s;
                & .sup{color: var(--theme-blue); padding: 0 0 14px;}
                & .title{font-size: 36px; font-weight: var(--fwb); line-height: 1.2;}
                & .btn-view{
                    position: absolute; top: 100%; left: 50%; transform: translateX(-50%); opacity: 0; width: 164px; color: var(--theme-blue);
                    & .arr{background: var(--theme-blue);}
                }
            }

            &:hover{
                &:before{background: rgba(56,142,255,0.8);}
                & .txt{
                    padding: 0 0 30px; transform: translateY(-30px);
                    & .sup{color: inherit;}
                    & .btn-view{opacity: 1; transition: 0.3s 0.1s;}
                }
            }
        }
        &:nth-child(1) a{background: url("/assets/site/img/contents/product-home-quick-1.png") no-repeat center; background-size: 100% auto;}
        &:nth-child(2) a{background: url("/assets/site/img/contents/product-home-quick-2.png") no-repeat center; background-size: 100% auto;}
        &:nth-child(3) a{background: url("/assets/site/img/contents/product-home-quick-3.png") no-repeat center; background-size: 100% auto;}

        & .deco{
            position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
            &:before{content: ""; position: absolute; width: 53.71%; height: auto; aspect-ratio: 205 / 35; background: url("/assets/site/img/common/logo.svg") no-repeat center; background-size: 100% auto; filter: var(--filter-black);}
        }
    }

    @media (width <= 1280px){
        grid-row-gap: 20px; grid-column-gap: 20px;
        & > li{
            & a{
                & .txt{
                    & .sup{padding: 0 0 2%;}
                    & .title{font-size: clamp(20px,2.9vw,36px);}
                }

                &:hover{
                    & .txt{
                        padding: 0 0 20px; transform: translateY(-20px);
                    }
                }
            }
        }
    }
    @media (width <= 860px){
        grid-template-columns: repeat(1, 1fr);
        & > li{
            & a{
                aspect-ratio: initial; height: 190px; padding: 20px 20px;
                & .txt{
                    padding: 0 0 20px; transform: translateY(-20px);
                    & .btn-view{
                        opacity: 1; background: transparent; color: #fff;
                    }
                }

                &:hover{
                    & .txt{
                        & .btn-view{
                            background: #fff; color: var(--theme-blue); transition: 0s;
                        }
                    }
                }
            }
            &:has(.deco){display: none;}
        }
    }
    @media (width <= 640px){
        padding: 0;
        & > li{
            & a{
                & .txt{
                    & .sup{font-size: 13px;}
                    & .title{font-size: 18px;}
                }
            }
        }
    }
}


/* badge */
.badge{
    display: inline-block; padding: 0 24px; border-radius: 40px; line-height: 40px; font-size: 16px; font-weight: var(--fwb); color: #fff; background: var(--theme-blue);
    
    @media (width <= 1280px){
        line-height: 34px; padding: 0 20px; font-size: 15px;
    }
    @media (width <= 640px){
        font-size: 14px; line-height: 26px; padding: 0 15px;
    }
}


/* namecard-list */
.namecard-list{
    display: flex; flex-wrap: wrap; gap: 50px;
    &::-webkit-scrollbar{height: 6px;}
    &::-webkit-scrollbar-thumb{border-radius: 6px; background-color: #9f9f9f;}
    &::-webkit-scrollbar-track{background-color: transparent;}

    & .namecard{
        flex: 1; min-width: 0; border-radius: 16px; border: 3px solid transparent; 
        background-image: linear-gradient(#252525, #252525), linear-gradient(to bottom, #252525, #252525);
        background-origin: border-box;
        background-clip: content-box, border-box;
        transition: 0.2s;
        & > dt{
            padding: 40px 30px 0;
            & .title{font-size: 30px; font-weight: var(--fwb); padding: 10px 0 0; line-height: 1.3; padding: 19px 0 37.5%;}
        }
        & > dd{
            padding: 0 30px 40px;
            & .name{
                font-size: 24px; font-weight: var(--fwb); border-top: 1px solid #444; padding: 36px 0 0;
                & .position{display: inline-block; vertical-align: middle; margin: 0.35em 0 0; font-size: 0.67em; font-weight: var(--fwm); color: #a6b1bf;}
            }
            & .sublist{
                padding: 7px 0 0;
                & > li{
                    display: flex; align-items: center; font-size: 14px;
                    & img{flex: 0 0 auto; margin: 0 6px 0 0;}
                }
            }
        }

        &.on{
            background-image: linear-gradient(180deg, #121212 0%, #09101F 100%), linear-gradient(to bottom, #388fff, #0c448c);
            box-shadow: 4px 6px 10px rgba(56,143,255,0.25);
        }
    }

    @media (width <= 1600px){
        gap: 30px;
    }
    @media (width <= 1280px){
        gap: 20px;
        & .namecard{
            & > dt{
                padding: 30px 20px 0;
                & .title{font-size: 2.2vw;}
            }
            & > dd{
                padding: 0 20px 30px;
                & .name{font-size: 1.9vw;}
            }
        }
    }
    @media (width <= 1024px){
        & .namecard{
            flex: 0 0 auto; width: calc( (100% - 20px) / 2 );
            & > dt{
                & .title{padding: 10px 0 20px; font-size: 20px;}
            }
            & > dd{
                & .name{font-size: 18px;}
            }
        }
    }
    @media (width <= 640px){
        flex-direction: column;
        
        & .namecard{
            width: 100%;
            & > dt{
                padding: 20px 20px 0;
                & .title{font-size: 17px; padding: 10px 0 20px;}
            }
            & > dd{
                padding: 0 20px 20px;
                & .name{font-size: 20px; padding: 30px 0 0;}
            }
        }

        /* 스크롤로 할 경우 ▼ */
        flex-direction: row; flex-wrap: nowrap; overflow: hidden; overflow-x: auto;
        & .namecard{
            width: 80%;
        }
    }
}


/* contact-direct */
.contact-direct{
    margin-top: 50px; background: #252525; text-align: center; padding: 38px 15px 35px; border-radius: 16px;

    & .guide{font-size: 24px; font-weight: var(--fwm); color: #a6b1bf; line-height: 1.2;}
    & .direct-list{
        display: inline-flex; flex-direction: column; padding: 15px 0 0;
        & li{
            display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: 24px; font-weight: var(--fwb); line-height: 1.2; color: var(--theme-blue);
            & img{flex: 0 0 auto;}
            & > p{flex: 1; min-width: 0;}
        }
    }

    @media (width <= 1600px){
        margin-top: 30px;
    }
    @media (width <= 1280px){
        margin-top: 20px;
    }
    @media (width <= 640px){
        padding: 25px 15px;
        & .guide{font-size: 16px;}
        & .direct-list{
            & li{
                font-size: 20px;
                & img{width: 16px;}
                & > p{}
            }
        }
    }
}


/* layer */
.layer{visibility: hidden; opacity: 0; position: fixed; z-index: 1001 !important; top: 40% !important; left: 50% !important; transform: translate(-50%, -50%); width: 75vw; height: calc(100vh - 120px);
    overflow-y: auto; overscroll-behavior: contain; background-color: var(--white); box-sizing: border-box;}
.layer::-webkit-scrollbar{width: 6px; /*display: none;*/}
.layer::-webkit-scrollbar-thumb{border-radius: 6px; background-color: #ddd;}
.layer::-webkit-scrollbar-track{border-radius: 6px; background-color: rgba(193,193,193,0.2);}
.layer.on{visibility: visible; opacity: 1; top: 50% !important; transition: all 0.25s ease;}

.layer .l_wrap{width: 100%; height: 100%; padding: 52px 52px;}

.layer .l_head{}
.layer .l_head .title{font-size: 30px; font-weight: var(--fwb); line-height: 1.2; padding-bottom: 50px;}
.layer .l_body{overflow: hidden; overflow-y: auto; overscroll-behavior: contain; height: calc(100% - 86px); /* 100% - l_head 높이 */ padding-right: 5px;}
.layer .l_body::-webkit-scrollbar{width: 6px;}
.layer .l_body::-webkit-scrollbar-thumb{border-radius: 0px; background-color: #ddd;}
.layer .l_body::-webkit-scrollbar-track{border-radius: 0px; background-color: rgba(193,193,193,0.2);}
.layer .l_foot{}

.layer-closer{visibility: hidden; opacity: 0; position: fixed; z-index: 12; top: 56px; right: 56px; width: 32px; height: 32px; background: url("../img/common/layer_closer.svg") no-repeat center; background-size: contain; font-size: 0;}
.layer-closer.on{visibility: visible; opacity: 1;}


/* layer.type2 */
.layer.type2{display: flex; width: 1440px;}
.layer.type2 .l_side{flex: 0 0 auto; width: 451px; height: 100%; overflow: hidden;}
.layer.type2 .l_side .l_visual{height: 100%; background: #fff;}
.layer.type2 .l_side .l_visual .ytb_frame{position: relative; padding-bottom: calc(177.383% + 200px); margin-top: -100px; width: 100%; height: auto; overflow: hidden;}
.layer.type2 .l_side .l_visual .ytb_frame:after{content: "클릭 터치 방지"; position: absolute; z-index: 3; top: 0; bottom: 0; left: 0; right: 0; background-color: transparent;}
.layer.type2 .l_side .l_visual .ytb_frame iframe{position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%;}
.layer.type2 .l_side .l_visual .ytb_frame iframe:before{content: "";}
.layer.type2 .l_wrap{flex: 1;}

.layer.type2 .l_head{}
.layer.type2 .l_head .tit{display: block; font-size: 24px;}
.layer.type2 .l_head .tit .sup{font-weight: var(--fwm);}
.layer.type2 .l_head .tit .title{display: flex; align-items: center; gap: 11px; font-size: 1.667em; font-weight: var(--fwb); line-height: 1.2; padding: 7px 0 0;}
.layer.type2 .l_head .tit .title span{}
.layer.type2 .l_head .tit .title img{width: 52px; vertical-align: top;}
.layer.type2 .l_body{height: calc(100% - 102px);}
.layer.type2 .l_body .con_wrap{padding: 34px 0 0;}
.layer.type2 .l_body .des{font-size: 17px;}
.layer.type2 .l_body .des p{}
.layer.type2 .l_body .des p + p{padding: 10px 0 0;}
.layer.type2 .l_body .des p br{}
.layer.type2 .l_body .value_list{gap: 20px; padding: 3% 0 0;}
.layer.type2 .l_body .value_list .txt{padding: 50% 0 0;}
.layer.type2 .l_body .value_list .txt .des{font-size: inherit;}
@media (max-width: 1700px), (min-width: 1080px) and (orientation: portrait) {
    .layer-closer{top: 20px; right: 20px;}
}
@media (max-width: 1600px), (min-width: 1080px) and (orientation: portrait) {
    .layer.type2{width: calc(100vw - 170px);}
    .layer.type2 .l_body .value_list{gap: 0;}
    .layer.type2 .l_body .value_list .txt{padding: 25% 0 0;}
    .layer.type2 .l_body .des{font-size: 1rem;}
}
@media (max-width: 1420px), (min-width: 1080px) and (orientation: portrait) {
    .layer.type2 .l_body .value_list > li{flex: initial; width: 50%;}
    .layer.type2 .l_body .value_list > li img{width: 35%;}
    .layer.type2 .l_body .value_list .txt{padding: 30px 0 0;}
}
@media (max-width: 1280px), (min-width: 1080px) and (orientation: portrait) {
    .layer{width: calc(100vw - 140px); }
    .layer .l_wrap{padding: 40px;}
    .layer .l_head .title{font-size: 26px; padding-bottom: 25px;}
    .layer .l_body{height: calc(100% - 57px);}
    .layer-closer{width: 26px; height: 26px;}

    .layer.type2 .l_head .tit{font-size: 20px;}
    .layer.type2 .l_head .tit .title{display: flex; align-items: center; gap: 15px;}
    .layer.type2 .l_body .des p + p{display: none;}
}
@media (max-width: 1200px), (min-width: 1080px) and (orientation: portrait) {
    .layer.type2 .l_body .value_list > li{width: 100%;}
    .layer.type2 .l_body .value_list > li img{width: 60px; display: block; margin-left: auto;}
    .layer.type2 .l_body .value_list .txt{padding: 10px 0 0;}
}
@media (max-width: 1024px), (min-width: 1080px) and (orientation: portrait) {
    .layer.type2 .l_body,
    .layer.type2 .l_foot{display: none;}

    .layer.type2{flex-direction: column; aspect-ratio: 451 / 800; width: auto; height: calc(100% - 120px);}
    .layer.type2 .l_side{flex: initial; width: 100%; height: 100%;}
    .layer.type2 .l_wrap{flex: initial; position: absolute; bottom: 0; left: 0; z-index: 2; width: 100%; height: auto; background-color: #fff; border-top: 1px solid #ddd; padding: 20px 20px;}
    .layer.type2 .l_head .tit{font-size: 16px; text-align: center;}
    .layer.type2 .l_head .tit .title{display: flex; justify-content: center; align-items: center; gap: 10px; font-size: 1.15em; padding: 10px 0 0;}
    .layer.type2 .l_head .tit .title img{width: 40px;}
}
@media (max-width: 860px), (min-width: 1080px) and (orientation: portrait) {
    .layer{width: calc(100vw - 30px); height: calc(100vh - 240px); }
    .layer .l_wrap{padding: 30px 25px;}
    .layer .l_head .title{font-size: 21px;}
    .layer .l_body{height: calc(100% - 51px);}
    .layer-closer{width: 20px; height: 20px;}

    .layer.type2 .l_head .tit{font-size: 14px;}
}



/* ============================================
    CSS Animations
============================================ */

@keyframes explode{
    0%  {width: 0; height: 0; margin-top: 0; margin-left: 0; background-color: #fff;}
    100%{width: 600px; height: 600px; margin-top: -300px; margin-left: -300px; background-color: #fff;}
}
@keyframes desplode{
    0%  {width: 600px; height: 600px; margin-top: -300px; margin-left: -300px; background-color: #fff;}
    100%{width: 0; height: 0; margin-top: 0; margin-left: 0;}
}
@keyframes zoomOut{
    0%   {transform:scale(1.05)}
    100% {transform:scale(1.0)}
}