@charset "utf-8";

/* 공통 */
.main-container{}


/* 폰트 - italic */
.italic{font-family: 'NotoSans-Italic' !important;}


/* 기본 form  */
.iq-form{
    display: flex; flex-direction: column; gap: 18px; font-size: 18px;
    @media (width <= 640px){
        gap: 10px; font-size: 16px;
    }
}


/* 기본 input  */
.iq-input{
    & input{-webkit-appearance: none; appearance: none; display: block; width: 100%; height: 61px; padding: 0 20px; border: none; background: none; border: 1px solid var(--white); border-radius: 10px; text-align: center; color: var(--white); font-size: inherit; font-weight: var(--fwsb); outline: none;}
    & input:focus{outline: 1px solid #fff; outline-offset: -1px; box-shadow: 0 0 8px 4px rgba(255,255,255,0.3);}
    & input:focus::placeholder{opacity: 0;}
    & input::placeholder{color: var(--white);}

    @media (width <= 640px){
        & input{height: 50px;}
    }
}


/* 기본 input  */
.iq-textarea{
    & textarea{-webkit-appearance: none; appearance: none; display: block; align-content: center; width: 100%; height: 229px; padding: 20px 20px; border: none; background: none; border: 1px solid var(--white); border-radius: 10px; text-align: center; color: var(--white); font-size: inherit; font-weight: var(--fwb); outline: none; resize: none; overflow-y: auto; line-height: 1.5;}
    & textarea:focus{outline: 1px solid #fff; outline-offset: -1px; box-shadow: 0 0 8px 4px rgba(255,255,255,0.3);}
    & textarea:focus::placeholder{opacity: 0;}
    & textarea::placeholder{text-align: center; font-size: 18px; font-weight: var(--fwsb); color: var(--white);}
    & textarea::-webkit-scrollbar{width: 6px;}
    & textarea::-webkit-scrollbar-thumb{border-radius: 6px; background-color: #fff;}
    & textarea::-webkit-scrollbar-track{background-color: transparent;}

    @media (width <= 640px){
        & textarea{height: 200px;}
    }
}


/* 기본 btn  */
.iq-btn{
    & button{display: block; width: 100%; line-height: 61px; border-radius: 10px; background: var(--white); color: var(--theme-navy1); text-align: center; font-size: 20px; font-weight: var(--fwb);}
    & button[disabled]{cursor: no-drop;}

    @media (width <= 640px){
        & button{font-size: 18px; line-height: 50px;}
    }
}


/* number-list */
.number-list{
    display: flex; flex-direction: column; gap: 165px; max-width: 1280px; margin: 0 auto; padding: var(--gap-x-large) 0 0;

    & .depth1{
        position: relative; display: flex; flex-wrap: wrap; width: 640px; margin: 0 auto 0 0;

        & > dt{
            flex: 0 0 auto; width: 115px;
            & .num{position: absolute; top: 0; left: 0; font-size: 64px; font-weight: var(--fweb); line-height: 1; color: var(--theme-navy2);}
        }
        & > dd{
            flex: 1; width: auto; min-width: 0;

            & .tit{font-size: 30px; font-weight: var(--fweb); line-height: 1.2;}
            & .tit .seperator{font-weight: var(--fwm);}

            & .depth2-wrap{
                display: flex; flex-direction: column; gap: 10px; border-top: 1px solid var(--gray1); padding: 20px 0 0; margin: 15px 0 0;

                & .depth2{
                    font-size: 17px;

                    & dt{display: inline; font-weight: var(--fwb);}
                    & dd{display: inline; font-weight: var(--fwm);}
                }
            }
        }

        &:nth-of-type(even){margin: 0 0 0 auto;}
    }

    @media (width <= 1400px){
        
    }
    @media (width <= 1280px){
        gap: 100px; padding: var(--sec-inner-pad) 0 0;
        & .depth1{
            font-size: 28px;
            & > dt{
                width: 3em;
                & .num{font-size: 1.8em;}
            }
            & > dd{
                & .tit{font-size: 1em;}
            }
        }
    }
    @media (width <= 1024px){
        & .depth1{
            width: 540px; font-size: 26px;
        }
    }
    @media (width <= 860px){
        & .depth1{
            width: 470px; font-size: 23px;
        }
    }
    @media (width <= 640px){
        gap: 50px;
        & .depth1{
            width: 100%; font-size: 18px;
            & > dt{
                width: 48px;
                & .num{font-size: 30px; top: 2px;}
            }
            & > dd{
                
                & .depth2-wrap{
                    margin: 10px 0 0; padding: 10px 0 0;

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


/* sec */
.sec{

    &.brand{
        background: var(--theme-navy1);
    }
    &.products{
        position: relative; background: var(--white) url("/assets/site/img/main/product-bg.svg") repeat center top; background-size: 1920px auto; overflow: hidden;
        @media (width > 1920px){
            background-size: 100% auto;
        }
        @media (width <= 1280px){
            background-size: 1600px auto;
        }
        @media (width <= 640px){
            background-size: 250% auto;
        }
    }
    &.test{
        background: #edeff1;
    }
    &.contact{
        background: var(--theme-navy1);
    }
}


/* area 공통 */
.area{

    & .area-tit{
        font-size: 54px; font-weight: var(--fwsb); line-height: 1.3;
        &:before{content: ""; display: block; margin: 0 auto 40px; width: 17px; height: auto; aspect-ratio: 1; background: var(--white);}
        
        @media (width <= 1280px){
            font-size: clamp(38px,4.3vw,54px);
            &:before{margin: 0 auto 0.65em; width: 0.3em;}
        }
        @media (width <= 640px){
            font-size: 26px; line-height: 1.2;
            &:before{margin: 0 auto 20px; width: 11px;}
        }
    }

    & .area-des{
        padding: 41px 0 0; font-size: 17px; font-weight: var(--fwr); line-height: 1.74;
        @media (width <= 1280px){
            padding: 4% 0 0;
        }
        @media (width <= 640px){
            padding: 20px 0 0; font-size: 15px; line-height: 1.5;
        }
    }

    & .area-list{
        display: flex; flex-direction: column; gap: 36px; padding: var(--gap-medium) 0 0;

        & > dl{
            
            & > dt{font-size: 35px; font-weight: var(--fwsb); line-height: 1.25;}
            & > dt span{display: inline-block;}
            & > dt span.hasChk{position: relative;}
            & > dt span.hasChk:before{content: ""; display: inline-block; vertical-align: middle; margin: -0.2em 0.35em 0 0; width: 0.7715em; height: auto; aspect-ratio: 27 / 26; background: url("/assets/site/img/main/bullet-check.svg") no-repeat center; background-size: 100% auto;}
            & > dd{font-size: 17px; font-weight: var(--fwl); line-height: 1.74; padding: 10px 0 0;}
        }
        @media (max-width: 1280px){
            & > dl{
                & > dt{font-size: clamp(20px,2.5vw,35px);}
            }
        }
        @media (max-width: 640px){
            & > dl{
                & > dt{font-size: 20px;}
                & > dd{font-size: 15px; line-height: 1.5; padding: 6px 0 0;}
            }
        }
    }

    & .area-txt{
        position: relative; z-index: 1; text-align: center; color: var(--white); max-width: 944px; margin: 0 auto;

        &.align-left{
            text-align: left;

            & .area-tit{
                &:before{margin-right: auto; margin-left: 0;}
            }
        }
        &.colored{
            color: var(--theme-navy1);

            & .area-tit{
                font-weight: var(--fweb);
                &:before{background: var(--theme-navy1);}
            }
        }
    }
}


/* visual */
.area.visual{
    position: relative; background: var(--theme-navy1); height: 100vh; overflow: hidden;
    @media (hover: hover) and (pointer: fine) {
        /* 터치디스플레이가 아닌 장치에서만 적용 */
        /* min-height: ; */
    }
    @media (hover: none) and (pointer: coarse) {
        /* 터치디스플레이인 장치에서만 적용 */
        height: 100svh;
    }

    & .bg{
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); background-blend-mode: multiply;

        & #bg-svg{
            position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; width: 1920px; height: auto;

            & path {
                opacity: 0; transition: 2.0s;

                &:nth-child(2n){transition-delay: 0.25s;}
                &:nth-child(3n){transition-delay: 0.25s;}
                &:nth-child(4n){transition-delay: 0.25s;}

                &:nth-child(5n){transition-delay: 0.50s;}
                &:nth-child(6n){transition-delay: 0.50s;}
                &:nth-child(7n){transition-delay: 0.50s;}

                &:nth-child(8n){transition-delay: 0.75s; }
                &:nth-child(9n){transition-delay: 0.75s; }
                &:nth-child(10n){transition-delay: 0.75s;}
            }

            &.on path{
                opacity: 1;
            }
        }
        & .bg1{
            position: absolute; top: 0; left: 0; bottom: 0; right: 0; /* background: transparent url("/assets/site/img/main/visual-bg-from-top.svg") repeat-x center top; */ background-size: 100% auto; transform: translateY(-100%); filter: blur(14px); opacity: 0; transition: 3.5s;
            &.bg1-step1{transform: translateY(0); filter: blur(0); opacity: 1;}
        }
    }
    & .cont{
        position: absolute; top: 0; left: 0; width: 100%; height: 100%;

        & .name{
            position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; filter: blur(10px); width: 464px;
            & img{display: block; width: 100%; height: auto;}

            &.name-step1{opacity: 1; filter: blur(0); transition: 1.5s ease-out;}
            &.name-step2{opacity: 0; filter: blur(2px); transition: 1.0s;}
        }

        & .starlight{
            position: absolute; top: 0; left: 0; width: 100%; height: 100%;

            & .center{
                position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: auto; aspect-ratio: 1;
                display: flex; justify-content: center; align-items: center;

                & .axis-center{
                    position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--white); opacity: 0; transform: scale(0); transition: 1s;
                    &.axis-center-step1{opacity: 1; transform: scale(1);}
                }

                & .axis{}
                & .axis-x{
                    position: absolute; height: 1px; left: -50vw; right: calc(50vw + 10px);
                    background: linear-gradient(90deg,rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.0) 100%);
                    & .line{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: var(--white);}

                    &.axis-x-step1{right: -50vw; transition: 0.5s 0.75s;}
                    &.axis-x-step2{left: -217px; right: -217px; transition: 0.5s 0s;}
                    &.axis-x-step2 .line{width: 30px; transition: 1.0s;}
                }
                & .axis-y{
                    position: absolute; width: 1px; top: -50vh; bottom: calc(50vh + 10px);
                    background: linear-gradient(0deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 100%);
                    & .line{position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: 100%; background: var(--white);}

                    &.axis-y-step1{bottom: -50vh; transition: 0.5s 0.1s;}
                    &.axis-y-step2{top: -217px; bottom: -217px; transition: 0.5s 0s;}
                    &.axis-y-step2 .line{height: 30px; transition: 1.0s;}
                }

                &.fx-glow{
                    
                    .axis-x{animation: fx-scaleX 2.5s infinite ease-in-out;}
                    .axis-y{animation: fx-scaleY 2.5s infinite ease-in-out;}
                    .axis-center{animation: fx-glow 2.5s infinite ease-in-out;}
                }
            }
        }
    }

    @media (width > 1920px){
        & .bg{
            & #bg-svg{
                width: 100%; aspect-ratio: 16 / 9;
            }
        }
    }
    @media (width <= 1280px){
        & .bg{
            & #bg-svg{
                width: 1600px;
            }
        }
    }
    @media (width <= 860px){
        & .cont{
            
            & .name{
                width: clamp(100px,55vw,464px);
            }
        }
    }
    @media (width <= 640px){
        & .bg{
            & #bg-svg{
                width: 250%;
            }
        }
        & .cont{
            & .starlight{
                & .center{
                    width: 12px;
                    & .axis-x{
                        &.axis-x-step2{left: -120px; right: -120px;}
                    }
                    & .axis-y{
                        &.axis-y-step2{top: -120px; bottom: -120px;}
                    }
                }
            }
        }
    }
}


/* intro */
.area.intro{
    background: var(--theme-navy1); padding: var(--sec-inner-pad) 0;

    & > .inner{
        & .bg{
            position: absolute; top: 537px; top: 40.5%; right: 0; display: block; width: 1314px; width: 68.45vw; aspect-ratio: 1314 / 1718; 
            background-blend-mode: soft-light;
            background: var(--theme-navy1) url("/assets/site/img/main/bg-starlight-right.png") no-repeat;
            background-size: 100% auto;
            @media (width <= 860px){
                width: 72vw;
            }
            @media (width <= 640px){
                width: 320px; top: 65%;
            }
        }
    }

    & .intro-video{
        padding: var(--gap-medium) 0 0;

        & .video-frame{
            position: relative; max-width: 1600px; height: auto; aspect-ratio: 1600 / 900; margin: 0 auto; overflow: hidden;
            & video{display: block; width: 100%; height: 100%; object-fit: cover;}
            & iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; aspect-ratio: 16 / 9; /* ◀ 원본 영상 비율 */ object-fit: cover;}
        }
    }
}


/* platform */
.area.platform{
    padding:  var(--sec-inner-pad) 0; /* background: #002a3d url("/assets/site/img/main/platform-bg.svg") no-repeat center top; */ background: #002a3d; background-size: cover; overflow: hidden;

    & > .inner{
        & .bg{
            position: absolute; top: 0; left: 0; display: block; width: 788px; width: 41.05vw; aspect-ratio: 788 / 1719; 
            background-blend-mode: soft-light;
            background: var(--theme-navy1) url("/assets/site/img/main/bg-starlight-left.png") no-repeat;
            background-size: 100% auto;
            @media (width <= 860px){
                width: 100vw;
            }
            @media (width <= 640px){
                width: 360px; top: 30%;
            }
        }
    }

    & .platform-top{
        display: flex; flex-wrap: wrap; max-width: 1014px; margin: 0 auto; padding: 0 0 var(--gap-x-large);

        & .platform-video{
            width: 50%; padding: 0 87px 0 0;
    
            & .video-frame{
                position: relative; width: 100%; height: auto; aspect-ratio: 1; overflow: hidden;
                & video{display: block; width: 100%; height: 100%; object-fit: cover;}
                & iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 180%; aspect-ratio: 16 / 9; /* ◀ 원본 영상 비율 */ object-fit: cover;}
            }
            
        }
        & .area-txt{width: 50%; padding: 282px 0 0;}

        @media (width <= 1280px){
            & .platform-video{
                padding: 0 5% 0 0;
            }
            & .area-txt{padding: 24% 0 0;}
        }
        @media (width <= 768px){
            display: block;
            & .platform-video{
                width: auto; padding: 0; margin: 0 35% 0 0;
            }
            & .area-txt{width: auto; padding: 50px 0 0; margin: 0 0 0 35%;}
        }
    }

    & .platform-graphic{
        max-width: 1335px; height: auto; margin: 0 auto;

        & .graphic{
            position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1335 / 820;  /* aspect-ratio: 860 / 1218; */ /* ◀ 모바일용 */

            /* PC용 세트 = .img + .overlay-svg */
            & .img{
                position: absolute; top: 0; left: 0; bottom: 0; right: 0;
                & img{display: block; width: 100%;}
            }
            & .overlay-svg{
                position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none;
                filter: blur(2px) drop-shadow(0 0 3px #3d6aff);

                & #guide-path{stroke: none; fill: none;}
                & #moving-dot{
                    transform-origin: 0 0;
                    & .star-line{filter: blur(1px);}
                }
            }
            & .dashed-circle-wrap{
                position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10;
                & .dashed-circle{
                    position: absolute; height: auto; aspect-ratio: 1; border-radius: 50%;

                    &.no1{top: 8.9%; left: 1.1%; width: 30%; border: 2px dotted rgb(90 211 216); animation: fx-infinite-spin 50s infinite linear;}
                    &.no2{top: 8.9%; right: -0.56%; width: 30%; border: 2px dotted rgb(45 101 215); animation: fx-infinite-spin 50s infinite linear;}
                    &.no3{top: 26.8%; left: 32.8%; width: 36.5%; border: 2px dotted rgb(169 106 235); animation: fx-infinite-spin-reverse 50s infinite linear;}
                }
            }
            & .loop-svg{
                position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; -webkit-transform: translate3d(0,0,0);
                filter: drop-shadow(0 0 3px #3d6aff);
            }

            /* 모바일용 세트 = .img-m + .overlay-svg-m */
            & .img-m{
                position: absolute; top: 0; left: 0; bottom: 0; right: 0; display: none;
                & img{display: block; width: 100%;}
            }
            & .overlay-svg-m {
                position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; pointer-events: none;
                filter: blur(1px) drop-shadow(0 0 3px #3d6aff);

                & #guide-path-m{stroke: none; fill: none;}
                & #moving-dot-m{
                    transform-origin: 0 0;
                    & .star-line{filter: blur(1px);}
                }
            }
            & .dashed-circle-wrap-m{
                position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; display: none;
                & .dashed-circle{
                    position: absolute; height: auto; aspect-ratio: 1; border-radius: 50%;

                    &.no1{top: 15.48%; left: 49.87%; width: 42.5%; border: 1px dotted rgb(90,211,216); animation: fx-infinite-spin 50s infinite linear;}
                    &.no2{top: 63.045%; left: 49.65%; width: 42.5%; border: 1px dotted rgb(45,101,215); animation: fx-infinite-spin 50s infinite linear;}
                    &.no3{top: 37.28%; left: 6%; width: 47.8%; border: 1px dotted rgb(169,106,235); animation: fx-infinite-spin-reverse 50s infinite linear;}
                }
            }
            & .loop-svg-m{
                position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10; -webkit-transform: translate3d(0,0,0);
                filter: drop-shadow(0 0 3px #3d6aff);
            }
        }

        @media (width <= 860px){
            & .graphic{
                width: calc(100% + 40px); margin: 0 0 0 -20px; aspect-ratio: 860 / 1218;
                & .img{display: none;}
                & .overlay-svg{display: none;}
                & .dashed-circle-wrap{display: none;}
                & .loop-svg{display: none;}

                & .img-m{display: block;}
                & .overlay-svg-m{display: block;}
                & .dashed-circle-wrap-m{display: block;}
                & .loop-svg-m{display: block;}
            }
        }
    }
}


/* biology */
.area.biology{
    padding:  var(--sec-inner-pad) 0; background: #264e62 url("/assets/site/img/main/biology-bg.png") no-repeat center top; background-size: cover;
}


/* collaburst */
.area.collaburst{
    position: relative; padding: var(--sec-inner-pad) 0 300px;

    & > *{position: relative;}

    & > .inner{
        

        & .deco1{
            --init-width: 34.4vw;
            position: absolute; top: 810px; right: 0; display: block; width: var(--init-width); height: auto; aspect-ratio: 628 / 988; transform: translate3d(0,0,0);
            background: url("/assets/site/img/main/product-sec-bg-right.svg") no-repeat; background-size: 100% auto;
            @media (width <= 1024px){
                width: calc(var(--init-width) + 3.7vw); top: 32%;
            }
            @media (width <= 640px){
                width: calc(var(--init-width) + 8.7vw); top: 25%;
            }
        }
        & .deco2{
            --init-width: 28.3vw;
            position: absolute; bottom: 0; left: 0; display: block; width: var(--init-width); height: auto; aspect-ratio: 553 / 988; transform: translate3d(0,54%,0);
            background: url("/assets/site/img/main/product-sec-bg-left.svg") no-repeat; background-size: 100% auto;
            @media (width <= 1024px){
                width: calc(var(--init-width) + 3.7vw)
            }
            @media (width <= 640px){
                width: calc(var(--init-width) + 8.7vw); transform: translate3d(0,75%,0);
            }
        }
    }

    & .collaburst-video{
        position: relative; padding: var(--gap-medium) 0 0;
        &:before{content: ""; position: absolute; bottom: 50%; left: 50%; width: 100vw; margin-left: -50vw; background: var(--gray5); height: 150vh; pointer-events: none;}
        & .video-frame{
            position: relative; max-width: 1280px; height: auto; aspect-ratio: 1280 / 720; margin: 0 auto; object-fit: cover; overflow: hidden;
            & video{display: block; width: 100%; height: 100%; object-fit: cover;}
            & iframe{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; width: 100%; aspect-ratio: 16 / 9; /* ◀ 원본 영상 비율 */ object-fit: cover;}
        }
        @media (hover: none) and (pointer: coarse) {
            /* 터치디스플레이인 장치에서만 적용 */
            &:before{height: 100svh;}
        }
    }

    @media (width <= 1280px){
        padding: var(--sec-inner-pad) 0 200px;
    }
    @media (width <= 640px){
        padding: var(--sec-inner-pad) 0;
    }
}


/* products */
.area.products{
    position: relative; padding: 0 0 var(--sec-inner-pad);

    & .product-list{
        padding: var(--gap-medium) 0 0; max-width: 1600px; margin: 0 auto;
    }

    & .product-item{
        display: flex; flex-wrap: wrap; align-items: center; gap: 20px; border-top: 1px solid var(--gray1); margin: 0 auto; padding: 50px 0;
        &:last-child{border-bottom: 1px solid var(--gray1);}

        & .thumb{
            flex: 0 0 auto; min-width: 0; width: 640px; height: auto; aspect-ratio: 640 / 566; overflow: hidden;

            & img{width: 100%; height: 100%; object-fit: contain;}
        }
        & .desc{
            flex: 0 0 auto; width: 840px; margin: 0 0 0 auto;

            & .name{position: relative; padding: 0 0 29px 35px; font-size: 36px; font-weight: var(--fweb); line-height: 1.2;}
            & .name:before{content: ""; position: absolute; top: 14px; left: 0; width: 15px; height: auto; aspect-ratio: 1; background: var(--theme-navy2);}
            & .name span{display: inline-block;}
            & .detail{

                & > dl{
                    display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--gray1); padding: 21px 0 85px;

                    & > dt{flex: 0 0 auto; width: 172px; font-size: 20px; font-weight: var(--fweb);}
                    & > dd{
                        flex: 1; min-width: 0; font-size: 17px; font-weight: var(--fwm); line-height: 1.55; padding: 1px 0 0;

                        & p{}
                    }

                    &:last-child{padding-bottom: 0;}
                }
            }
        }
        @media (width <= 1600px){
            & .thumb{
                flex: 0 0 auto; width: calc( (100% - 20px) * 0.4 );
            }
            & .desc{
                flex: 0 0 auto; width: calc( (100% - 20px) * 0.6 );
            }
        }
        @media (width <= 1280px){
            & .desc{
                & .name{font-size: clamp(28px,2.7vw,32px); padding: 0 0 20px 1em;}
                & .name:before{top: 0.35em; width: 13px;}
                & .detail{
                    & > dl{
                        padding: 20px 0 50px;
                        & > dt{font-size: 18px; width: 138px;}
                    }
                }
            }
        }
        @media (width <= 1024px){
            flex-direction: column; padding: 10px 0;
            & .thumb{
                width: 100%; max-width: 460px; margin: 0 auto;
            }
            & .desc{
                width: 100%;
                & .name{font-size: 28px;}
                & .detail{

                    & > dl{
                        padding: 10px 0 20px;
                        
                        & > dt{font-size: 17px; font-weight: var(--fwb); padding: 0.1em 0 0;}
                        & > dd{font-size: 17px;}
                    }
                }
            }
        }
        @media (width <= 640px){
            & .thumb{
                /* max-width: 260px; */
            }
            & .desc{
                & .name{font-size: 20px; padding: 0 0 10px 21px;}
                & .name:before{width: 10px; top: 7px;}
                & .detail{

                    & > dl{
                        display: block; padding: 10px 0 20px;
                        
                        & > dt{display: inline; font-size: 15px; font-weight: var(--fwb)}
                        & > dd{
                            display: inline; font-size: 14px;
                            & p{display: inline;}
                        }
                    }
                }
            }
        }
        @media (width <= 460px){
            & .thumb{
                /* max-width: 200px; */
            }
        }
    }
}


/* studies */
.area.studies{
    padding:  var(--sec-inner-pad) 0; background: url("/assets/site/img/main/studies-bg.png") no-repeat center top; background-size: cover;

    & .studies-list{
        display: flex; flex-direction: column; gap: 60px; max-width: 1280px; margin: 0 auto; padding: var(--gap-medium) 0 0;

        @media (width <= 640px){
            gap: 50px;
        }
    }

    & .studies-item{
        display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 45px 80px; box-shadow: 5px 5px 10px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden; background: var(--white);

        & > .left{
            flex: 1; min-width: 0;

            & .txt{

                & .tit{font-size: 30px; font-weight: var(--fwb);}
                & .des{font-size: 17px; padding: 4px 0 0; line-height: 1.45;}
            }

            & .thumb-list{
                display: flex; gap: 18px; padding: 17px 0 0;

                & dl{

                    & dt{font-size: 20px; font-weight: var(--fwb); padding: 0 0 7px;}
                    & dd{
                        width: 195px; height: auto; aspect-ratio: 1; border-radius: 3px; overflow: hidden;

                        & img{width: 100%; height: 100%; object-fit: cover;}
                    }
                }
            }

            & .tag-list{
                display: flex; flex-wrap: wrap; gap: 7px; padding: 18px 0 0;

                & li{}
                & li span{display: inline-block; line-height: 41px; padding: 0 13px; font-size: 20px; font-weight: var(--fwb); background: var(--gray3); border-radius: 3px;}
            }
        }

        & > .right{
            flex: 0 0 auto; width: 364px; margin: 0 0 0 auto;
            
            & .badge-list{
                padding: 0 0 40px;

                & li{flex: 0 0 auto;}
                & li span{display: inline-block; line-height: 41px; padding: 0 10px; border-radius: 3px; background: var(--theme-navy1); color: var(--white); font-size: 18px; font-weight: var(--fwb);}
            }

            & .graph{

                & img{}
            }

            & .exp{
                padding: 15px 0 0;

                & > dl{
                    font-size: 15px;

                    & dt{display: inline; font-weight: var(--fwsb);}
                    & dd{display: inline; font-weight: var(--fwr);}
                }
            }
        }

        @media (width <= 1280px){
            padding: 40px 50px;
        }
        @media (width <= 1280px){
            padding: 30px 35px;

            & > .left{
                & .txt{
                    & .tit{font-size: 26px;}
                    & .des{font-size: 15px; padding: 10px 0 0;}
                }
                & .thumb-list{
                    gap: 15px;
                    & dl{
                        & dt{font-size: 17px; padding: 0 0 5px;}
                    }
                }
                & .tag-list{
                    padding: 15px 0 0;
                    & li{flex: 0 0 auto;}
                    & li span{font-size: 15px; padding: 0 10px; line-height: 34px; letter-spacing: -0.02em;}
                }
            }
        }
        @media (width <= 960px){
            flex-direction: column; gap: 20px;

            & > .left{
                flex: 0 0 auto; width: 100%;
                & .txt{
                    & .tit{font-size: 26px;}
                }
                & .thumb-list{

                    & dl{
                        flex: 1; min-width: 0; display: flex; flex-direction: column;
                        & dd{width: 100%; margin-top: auto;}
                    }
                }
            }
            & > .right{
                margin: 0; width: 100%; padding: 20px; border-radius: 3px; background: #f5f5f5;
                & .badge-list{
                    display: flex; flex-wrap: wrap; padding: 0 0 5%;
                    & li span{font-size: 16px; line-height: 32px;}
                }
                & .graph{
                    
                }
            }
        }
        @media (width <= 640px){
            padding: 20px 15px; gap: 20px;

            & > .left{
                & .txt{
                    & .tit{font-size: 20px;}
                    & .des{font-size: 14px;}
                }
                & .thumb-list{
                    gap: 10px; padding-right: 40%;
                    & dl{
                        & dt{font-size: 13px; padding: 0 0 5px; letter-spacing: -0.02em; white-space: nowrap;}
                    }
                }
                & .tag-list{
                    padding: 10px 0 0; gap: 3px;
                    & li{flex: 0 0 auto;}
                    & li span{font-size: 12px; padding: 0 6px; line-height: 27px; letter-spacing: -0.03em; word-spacing: -0.03em;}
                }
            }

            & > .right{
                padding: 15px 15px;
                & .badge-list{
                    padding: 0 0 10px;
                    & li span{font-size: 14px; line-height: 28px;}
                }
                & .graph{
                    & img{max-width: 200px;}
                }
                & .exp{
                    & > dl{font-size: 14px;}
                }
            }
        }
        @media (width <= 460px){
            & > .left{
                & .tag-list{
                    & li span{font-size: 11px;}
                }
            }
            & > .right{
                & .graph{
                    & img{max-width: 180px;}
                }
            }
        }
    }
}


/* inquiries */
.area.inquiries{
    position: relative; padding: var(--sec-inner-pad) 0 160px;
    background: var(--theme-navy1);

    & .bg{
        position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.7) 100%); background-blend-mode: multiply; /* mix-blend-mode: multiply; */ 
        & .bg1{
            position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: transparent url("/assets/site/img/main/inquiries-bg-from-bottom.svg") repeat-x bottom center; 
            background-size: 1920px auto;
            /* 배경 사이즈는 최상단 비주얼 영역의 svg 크기와 동일하게 */
        }
    }

    & .inquiries-form{
        position: relative; max-width: 840px; margin: 0 auto; padding: var(--gap-medium) 0 0;
    }

    @media (width > 1920px){
        & .bg{
            & .bg1{background-size: 100% auto;}
        }
    }
    @media (width <= 1280px){
        & .bg{
            & .bg1{background-size: 1600px auto;}
        }
    }
    @media (width <= 640px){
        padding: var(--sec-inner-pad) 0;
        & .bg{
            & .bg1{background-size: 250% auto;}
        }
    }
}






/* CSS Animaions & FX class */
.fx-hover-filter{}
.fx-hover-filter:hover{filter: drop-shadow(0 0 10px rgba(255,255,255,0.6));}

@keyframes fx-glow {
    0%   {filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));}
    50%  {filter: drop-shadow(0 0 8px rgba(255,255,255,1));}
    100% {filter: drop-shadow(0 0 2px rgba(255,255,255,0.5));}
}
@keyframes fx-scaleX{
    0%   {transform: scaleX(1.00);}
    50%  {transform: scaleX(1.25);}
    100% {transform: scaleX(1.00);}
}
@keyframes fx-scaleY{
    0%   {transform: scaleY(1.00);}
    50%  {transform: scaleY(1.25);}
    100% {transform: scaleY(1.00);}
}
@keyframes fx-visual-dot{
    0%   {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes fx-infinite-spin{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@keyframes fx-infinite-spin-reverse{
    from {transform: rotate(0deg);}
    to {transform: rotate(-360deg);}
}