@charset "utf-8";
/*───────────────────────────────────────────────────────────
	
	header, footer, main 관련 작성 css 파일입니다.

	** 이와 서브페이지 관련 css는 /css/sub.css 에 있습니다.

───────────────────────────────────────────────────────────*/
html{scroll-padding-top: var(--row-gap140);}
.link{position: absolute; inset: 0; z-index: 3;}
.layer-popup h4{display: none;}
/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; box-sizing: border-box; overflow: clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1500px; margin-inline: auto; box-sizing: border-box;}
    #container{position: relative; padding-bottom:150px; box-sizing: border-box;}

    @media (max-width:1500px){
        br.for_pc{display: none;}
    }
    @media (max-width:1023px){
        #container{padding-bottom:clamp(100px, 15vw, 150px);}
    }
    @media (max-width:860px){
        .w_custom{width: calc(100% - 30px);}
    }
    @media (max-width:320px){
        .w_custom{width: calc(100% - 20px);}
    }

/*───────────────────────────────────────────────────────────

    HEADER | outline/header.html, outline/nav.html

───────────────────────────────────────────────────────────*/
	#header{position: sticky;top:0;height: clamp(65px, 9vw, 90px);box-shadow: inset 0 -1px 0 rgb(255 255 255 / 20%); background: rgb(0 0 0 / 40%); backdrop-filter: blur(5px); transition: all 0.4s; z-index: 100;}
	#header .w_custom{max-width: 1800px;height: 100%;display: flex;align-items: center;justify-content: space-between;gap: 15px;}
	#header .logo{height: 100%;}
	#header .logo a{display: flex;align-items: center;max-width: clamp(150px, 23vw, 230px);height: 100%;padding-block: 15px;}
	#header .gnb{position: absolute;top:0;left:50%;translate: -50%;width: calc(100% - 420px);height: 100%;display: flex;justify-content: center;text-align: center;}
	#header .gnb > li{position: relative;height: 100%;font-size: clamp(17px, 1.1vw, 19px);font-weight: 500;transition: all 0.4s;}
	#header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;filter: var(--filter-white);padding-inline: clamp(10px, 1.1vw, 20px);transition: inherit;}
	#header .gnb .dep02{display: none;}
	#header .utility{display: flex;align-items: center;gap: clamp(15px, 3vw, 30px);flex-shrink: 0;}
	#header .allCate{display: none;flex-direction: column;justify-content: space-between;filter: var(--filter-white);width: clamp(24px, 3.5vw, 30px);aspect-ratio: auto 1.3;}
	#header .allCate span{width: 100%; height: 2px; background: var(--black-color03);}
	#header .com-btn{font-family: var(--font-type02);}
	
	.com-btn{position: relative;display: flex;align-items: center;justify-content: center;text-align: center;font-size: var(--text-15);font-weight: 500;color: var(--point-white);background: var(--point-grad02);line-height: 1.2;min-width: clamp(90px, 13vw, 120px);padding: clamp(8px, 1.5vw, 10px) clamp(15px, 2vw, 20px);border-radius: var(--radius-06);overflow: hidden;z-index: 1;}
		.com-btn::before{position: absolute;content:'';inset: 0;background: inherit;z-index: -1;transition: all 0.4s;opacity: 0;scale: -1 -1;}
	.com-btn.lg{min-width: clamp(160px, 25vw, 240px);font-size: var(--text-22);padding: clamp(15px, 2.7vw, 22px) clamp(20px, 3vw, 30px);border-radius: var(--radius-10);}
	.com-btn.arw{text-align: left;justify-content: space-between;gap: 25px;}
	.com-btn.arw::after{display: inline-flex;content:'';width: clamp(10px, 1.4vw, 12px);aspect-ratio: auto 1;border: 2px solid var(--point-white);clip-path: var(--clip-poly02);rotate: -45deg;border-radius: 2px;}

		/* over */
		@media (hover:hover) and (pointer:fine) {
			.com-btn:hover::before{opacity:1;}
			#header .gnb > li:hover > a{translate: 0 -4px;}
		}

		/* 메인 */
			.main_index #header{margin-bottom: clamp(-90px, -9vw, -65px);}
				.main_index #header:not(.on){backdrop-filter: none; background: var(--trans-color);}

	@media (max-width:1300px) {
		#header .gnb{display: none;}
		#header .allCate{display: flex;}
	}


/*───────────────────────────────────────────────────────────

	Aside | outline/nav.html

───────────────────────────────────────────────────────────*/
    #aside{position: fixed;top: 0;left:0;width: 100%;height: 100%;z-index: 999;background: rgba(255,255,255,0.8);backdrop-filter:blur(10px);display: flex;flex-direction: column;overflow: hidden;overflow-y: auto;padding-block: 10vh;box-sizing: border-box;opacity: 0;transition: all 0.6s;clip-path: inset(0 0 100% 0);}
        #aside.on{opacity: 1;clip-path: inset(0);}
        body:has(#aside.on){overflow: clip; touch-action: none;}
    #aside .w_custom{flex-shrink: 0;max-width: 1800px;min-height: 100%;display: flex;align-items: center;}
    #aside .gnb{width: 100%;display: grid;align-items: start;justify-content: center;grid: auto / repeat(5, 1fr);gap: clamp(15px, 2.2vw, 40px);}
    #aside .gnb > li{color: var(--black-color01);font-size: var(--text-20);text-align: center;}
        
        @media (min-width:861px) {
            #aside .gnb > li{opacity:0;translate:0 100px;transition:all 0.8s 0.3s;}
            #aside.on .gnb > li{opacity:1;translate:0;}
            #aside.on .gnb > li:nth-child(2){transition-delay:0.4s;}
            #aside.on .gnb > li:nth-child(3){transition-delay:0.5s;}
            #aside.on .gnb > li:nth-child(4){transition-delay:0.6s;}
            #aside.on .gnb > li:nth-child(5){transition-delay:0.7s;}
            #aside.on .gnb > li:nth-child(6){transition-delay:0.8s;}
        }
    #aside .gnb > li > a{position: relative;display: block;font-size: var(--text-40);font-weight: 700;line-height: 1.4;padding-block: 30px;transition: all 0.4s;letter-spacing: 0;}
        #aside .gnb > li > a:before{position: absolute;content: '';top: 0;left: 50%;translate: -50%;width:12px;height: 0;opacity:0;border-radius:100%;background: var(--point-color01);transition:all 0.3s;}
    #aside .gnb .dep02{position: relative;}
    #aside .gnb .dep02 > li > a{display: block;font-weight: 400;padding-block: clamp(7px, 1.7vw, 13px);color: var(--black-color06);line-height: 1.6;transition: all 0.4s;}
    #aside .utility{position: absolute;top: clamp(30px, 2.8vw, 50px);right: clamp(30px, 2.8vw, 50px);display: flex;align-items: center;gap: clamp(20px, 1.6vw, 30px);z-index:2;}
    #aside .close_btn{position: relative;width: clamp(30px, 4vw, 40px);height: clamp(30px, 4vw, 40px);z-index: 9;}
    #aside .close_btn span{position: absolute;top:50%;left:50%;transform: translate(-50%, -50%) rotate(45deg);width: 100%;height: 2px;background: var(--black-color01);}
    #aside .close_btn span + span{transform: translate(-50%, -50%) rotate(-45deg);}
    
        /* over */
            @media (hover:hover) and (pointer:fine){
				#aside .gnb > li:hover > a{color: var(--point-color01);}
                #aside .gnb > li:hover > a:before{height:12px;opacity:1;}
                #aside .gnb .dep02 > li:hover a{color: var(--point-color02);}
            }

    @media (max-width:1023px){
        #aside{padding-block: clamp(80px, 12vw, 120px);}
		#aside .gnb{grid:auto / repeat(3, 1fr)}
    }
    @media (max-width:860px){
		#aside{display: block;}
		#aside .w_custom{align-items:flex-start;}
		#aside .gnb{grid-template: auto / repeat(1, 1fr);gap:0;}
        #aside .gnb > li{padding-block: clamp(20px, 3vw, 25px);text-align:left;border-bottom: 1px solid rgba(0,0,0,0.15);}
        #aside .gnb > li > a{padding-block: 0;}
		#aside .gnb > li > a:before{display: none;}
        #aside .gnb .dep02{display: grid;gap: 0 20px;grid-template: auto / repeat(2, 1fr);margin-top: clamp(10px, 1.8vw, 15px);justify-content: flex-start;}
		#aside .utility{top:15px; right: 15px;}
    }
    @media (max-width:479px){
        #aside .gnb .dep02{grid-template: auto / repeat(1, 1fr);}
    }
    

/*───────────────────────────────────────────────────────────

    MAIN | index.html

───────────────────────────────────────────────────────────*/
	.bg-sec{padding-block: var(--row-gap140) var(--row-gap160); background: var(--border-color03);}
	
	/* 비주얼 */
		.main-visual{position: relative;min-height: clamp(600px, 98vw, 980px);overflow: hidden;padding-block: clamp(150px, 23vw, 230px);}
		.main-visual::before{position: absolute;content:'';inset: 0;background: rgb(0 0 0 / 30%);z-index: 1;pointer-events: none;}
		.main-visual video{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
		.main-visual .txt-box{position: relative;z-index: 2;text-align: center;display: flex;flex-direction: column;align-items: center;gap: clamp(12px, 2.2vw, 22px);color: var(--point-white);}
		.main-visual .txt-box h2{font-size: var(--text-24);font-weight: 700;line-height: 1.2;letter-spacing: -0.03em;width: fit-content;background: var(--point-white);border-radius: 50px;border: clamp(3px, 0.6vw, 4px) solid var(--trans-color);background-image: linear-gradient(#fff, #fff), var(--point-grad03);background-origin: border-box;background-clip: content-box, border-box;box-shadow: var(--shadow-01);}
		.main-visual .txt-box h2 em{font-weight: 700;color: var(--trans-color);background: var(--point-grad03);background-clip: text;padding: clamp(7px, 1.4vw, 9px) clamp(20px, 2.6vw, 26px) clamp(6px, 1.2vw, 7px);display: inline-block;}
		.main-visual .txt-box h3{font-size: clamp(40px, 9vw, 160px);font-weight: 700;font-family: var(--font-type02);line-height: 1.1;}
		.main-visual .tag-list{display: flex;justify-content: center;flex-wrap: wrap;margin-top: clamp(15px, 3vw, 30px);}
		.main-visual .tag-list > li{font-size: var(--text-28);font-weight: 600;line-height: 1.4;font-family: var(--font-type02);display: flex;align-items: center;flex-wrap: wrap;gap: 10px 0;letter-spacing: 0;}
			.main-visual .tag-list > li::after{display: inline-flex;content:'';width: clamp(4px, 0.8vw, 6px);aspect-ratio: auto 1;border-radius: 100%;background: rgb(255 255 255 / 40%);margin-inline: clamp(15px, 3vw, 30px);}
			.main-visual .tag-list > li:last-child::after{display: none;}
		.main-visual .tag-list > li em{color: var(--point-color06);display: contents;}
		.main-visual .btn-box{margin-top: clamp(20px, 3.8vw, 38px);}

		.main-visual .controller{position: absolute;left: 50%;bottom: clamp(20px, 7.4vw, 74px);translate: -50%;z-index: 5;display: flex;justify-content: center;pointer-events: none;}
		.main-visual .scr-dwn{display: flex;flex-direction: column;align-items: center;gap: clamp(7px, 1vw, 10px);text-align: center;pointer-events: auto;cursor: pointer;}
		.main-visual .scr-dwn dt{position: relative; overflow: hidden;}
			.main-visual .scr-dwn dt::before{position: absolute;content:'';width: 10px;aspect-ratio: auto 0.71;background: url('../images/skin/scr-dwn.svg') no-repeat center / 100% auto;top: 0;left: 50%;translate: -50%;}
			.main-visual .scr-dwn dt::before{animation: scrDwn 2s linear infinite;}
		.main-visual .scr-dwn dd{font-size: var(--text-16);font-weight: 300;color: rgb(255 255 255 / 60%);font-family: var(--font-type02);}
		.main-visual .prog-svg{position: relative;transform:rotate(-90deg);z-index: 1;}
		.main-visual .back {fill: var(--trans-color); stroke: rgb(255 255 255 / 20%); stroke-width: 2; stroke-linecap: butt;}
		.main-visual .front {fill: var(--trans-color); stroke: var(--point-white); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 360px;stroke-dashoffset: 320;}
		.main-visual .front{animation: progSvg 4s linear infinite;}
		@keyframes progSvg { from {rotate: 0deg;} to {rotate: 360deg;}}
		@keyframes scrDwn { from {top: -20px;} to {top:calc(100% + 20px);}}

		@media (max-width:640px) {
			.main-visual .scr-dwn{gap:3px;}
			.main-visual .scr-dwn dt{scale: 0.8;}
		}
		
	/* 타이틀 */
		.main-title{position: relative;text-align: center;display: flex;flex-direction: column;gap: var(--row-gap20);margin-bottom: var(--row-gap60);font-family: var(--font-type02);text-wrap: balance;}
			.main-title.left{text-align: left;}
		.main-title h3{font-size: var(--text-24);font-weight: 600;line-height: 1.6;}
		.main-title h3 em{color: var(--trans-color);background: var(--point-grad01);background-clip: text;display: inline-block;letter-spacing: 0;}
		.main-title h4{font-size: var(--text-64);font-weight: 700;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;}
			.main-title h4 + p{margin-top: clamp(10px, 1.5vw, 15px);}
		.main-title h4 strong{font-weight: inherit; font-size: var(--text-80);}
		.main-title p{font-size: var(--text-20);line-height: 1.6;letter-spacing: -0.03em;}

	/* service-list */
		.service-list{display: flex;gap: var(--col-gap20);}
		.service-list > li{position: relative;min-height: clamp(300px, 54vw, 540px);padding: clamp(25px, 4vw, 40px);padding-top: 120px;border-radius: var(--radius-20);overflow: hidden;display: flex;flex-direction: column;justify-content: flex-end;transition: all 0.6s;flex-grow: 1;color: var(--point-white); cursor: pointer;}
			.service-list > li.on{width: max-content;max-width: clamp(600px, 40vw, 720px);flex-shrink: 0;}
		.service-list .title{position: absolute;content:attr(data-title);font-size: clamp(23px, 1.8vw, 32px);font-weight: 600;line-height: 1.4;text-align: center;inset: 0;z-index: 2;display: flex;align-items: center;justify-content: center;padding: 15px;transition: all 0.4s;}
		.service-list .thumb{position: absolute;inset: 0;overflow: hidden;}
			.service-list .thumb{&::before, &::after{position: absolute; content:''; inset: 0; background: rgb(0 0 0 / 35%); transition: all 0.4s;}}
			.service-list .thumb::after{background: var(--point-grad04); opacity: 0;}
		.service-list .thumb img{width: 100%;height: 100%;object-fit: cover;}
		.service-list .desc{position: relative;width: max-content;min-width: clamp(300px, 31.2vw, 600px);opacity: 0;transition: all 0.4s;z-index: 2;display: grid;gap: clamp(10px, 1.4vw, 14px);}
		.service-list .desc dt{font-size: var(--text-40);font-weight: 600;line-height: 1.4;letter-spacing: -0.03em;}
		.service-list .desc dd{font-size: var(--text-20);font-weight: 300;line-height: 1.6;letter-spacing: -0.03em;}


			.service-list > li.on .title{opacity: 0;}
			.service-list > li.on .thumb::after{opacity: 0.7;}
			.service-list > li.on .desc{opacity: 1;}

		@media (max-width:1023px) {
			.service-list{flex-wrap: wrap;}
			.service-list > li{width: 100% !important;max-width: 100% !important;}
			.service-list .title{opacity:0;}
			.service-list .desc{width:100%;min-width: auto;opacity: 1;}
		}

	/* num-list */
		.num-list{position: relative;counter-reset: numList;display: grid;gap: clamp(15px, 2vw, 20px);}
		.num-list > li{background: var(--point-white);border-radius: var(--radius-20);padding: clamp(25px, 4vw, 40px);display: flex;align-items: baseline;gap: clamp(15px, 2.4vw, 24px);font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;letter-spacing: -0.03em;}
		.num-list > li::before{content: counter(numList, decimal-leading-zero);counter-increment: numList;display: flex;align-items: center;justify-content: center;text-align: center;min-width: clamp(32px, 4.9vw, 44px);min-height: clamp(32px, 4.9vw, 44px);padding: 6px 5px 5px;border-radius: 100%;background: var(--point-grad02);font-size: var(--text-16);font-weight: 500;color: var(--point-white);font-family: var(--font-type02);letter-spacing: 0;flex-shrink: 0;}
		.num-list .desc{display: flex;flex-direction: column;gap: var(--row-gap10);translate: 0 clamp(3px, 1vw, 5px);}
		.num-list .desc dt{font-size: var(--text-28);font-weight: 600;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;}
		.num-list .desc dt em{color: var(--point-color05);font-weight: 700;}

	/* inno-vation */
		.inno-vation{display: flex;gap: var(--col-gap40);}
		.inno-vation .thumb{width: min(730px, 49%);flex-shrink: 0;border-radius: var(--radius-30);overflow: hidden;}
		.inno-vation .thumb img{width:100%; height:100%; object-fit:cover;}
		.inno-vation .num-list{width: 100%;}

		@media (max-width:1023px) {
			.inno-vation{flex-wrap: wrap;}
			.inno-vation .thumb{width: auto;flex-shrink: unset;margin-inline: auto;}
		}

	/* about_pre */
		.about_pre{position: relative;padding-top: var(--row-gap140);}
		.about_pre .bg{position: absolute;inset: 0;width: 100%;height: clamp(520px, 72vw, 720px);z-index: -1;}
		.about_pre .bg::after{position: absolute;content:'';inset: 0;background: rgb(0 0 0 / 60%);}
		.about_pre .bg video{position: absolute;inset: 0;width: 100%;height: 100%;object-fit: cover;}
		.about_pre .w_custom{display: grid; gap: var(--row-gap80);}
		.about_pre .main-title{filter: var(--filter-white);margin-bottom: 0;}

	/* pre-list */
		.pre-list{display: grid;grid: auto / repeat(5, 1fr);gap: var(--col-gap20);}
		.pre-list > li{position: relative;overflow: hidden;}
		.pre-list .desc{display: flex;flex-direction: column;height: 100%;}
		.pre-list .desc dt{padding: clamp(15px, 2vw, 20px);flex-shrink: 0;background: var(--point-white);border-radius: var(--radius-20) var(--radius-20) 0 0;box-shadow: inset 0 0 0 1px var(--border-color01);}
		.pre-list .desc dt img{border-radius: var(--radius-10);}
		.pre-list .desc dd{background: var(--point-color01);font-size: var(--text-24);font-weight: 600;color: var(--point-white);line-height: 1.4;display: flex;align-items: center;justify-content: center;text-align: center;padding: clamp(12px, 2.3vw, 18px) 15px;height: 100%;border-radius: 0 0 var(--radius-15) var(--radius-15);}

		@media (max-width:1023px) {
			.pre-list{grid: auto / repeat(3, 1fr);}
		}
		@media (max-width:479px) {
			.pre-list{grid: auto / repeat(2, 1fr);}
		}
		@media (max-width:360px) {
			.pre-list{grid: auto / repeat(1, 1fr);}
		}
	
	/* merit-bnr */
		.merit-bnr{position: relative;border-radius: var(--radius-20);overflow: hidden;padding: 100px 20px;min-height: clamp(380px, 38vw, 380px);display: flex;flex-direction: column;justify-content: center;}
		.merit-bnr .thumb{position: absolute; inset: 0; overflow: hidden;}
		.merit-bnr .thumb img{width: 100%; height: 100%; object-fit: cover;}
		.merit-bnr .title{position: relative;display: flex;flex-direction: column;gap: clamp(10px, 1.4vw, 14px);color: var(--point-white);text-align: center;}
		.merit-bnr .title h4{font-size: var(--text-20);line-height: 1.4;letter-spacing: -0.03em;font-family: var(--font-type02);}
		.merit-bnr .title h5{font-size: var(--text-54);font-weight: 600;line-height: 1.4;letter-spacing: -0.03em;}
			.merit-bnr .title h5 + h6{margin-top: 6px;}
		.merit-bnr .title h6{font-size: var(--text-24);font-weight: 300;line-height: 1.6;letter-spacing: -0.03em;}
		.merit-bnr .moisture{position: absolute;top: clamp(20px, 4vw, 40px);right: clamp(20px, 4vw, 40px);background: var(--point-grad05);padding: clamp(10px, 2.1vw, 16px) clamp(18px, 2.2vw, 22px);border-radius: var(--radius-20);text-align: center;color: var(--point-white);font-family: var(--font-type02);display: flex;flex-direction: column;gap: 4px;}
		.merit-bnr .moisture dt{font-size: var(--text-16);font-weight: 300;line-height: 1.4;opacity: 0.6;letter-spacing: 0;}
		.merit-bnr .moisture dd{font-size: var(--text-40);font-weight: 500;line-height: 1.2;display: flex;align-items: center;gap: 4px;flex-wrap: wrap;letter-spacing: 0;}
		.merit-bnr .moisture dd::after{display: inline-flex;content:'';width: clamp(16px, 3vw, 25px);aspect-ratio: auto 0.925;background: url('../images/skin/moisture.svg') no-repeat center / 100% auto;}


	/* merit-list */
		.merit-list{display: grid; grid: auto / repeat(3, 1fr); gap: clamp(15px, 1.9vw, 36px);}
		.merit-list > li{position: relative;background: var(--point-color02);padding: clamp(25px, 4vw, 40px);border-radius: var(--radius-20);display: flex;flex-direction: column;gap: clamp(20px, 4vw, 40px);color: var(--point-white);}
			.merit-list > li:nth-child(2){background: var(--point-color03);}
			.merit-list > li:nth-child(3){background: var(--point-color04);}
		.merit-list .icon{display: flex;align-items: center;justify-content: center;width: clamp(50px, 7.5vw, 70px);height: clamp(50px, 7.5vw, 70px);padding: 10px;background: var(--point-white);border-radius: var(--radius-10);}
		.merit-list .desc{display: grid;gap: var(--row-gap20);}
		.merit-list .desc dt{font-size: var(--text-32);font-weight: 500;line-height: 1.4;letter-spacing: -0.03em;}
		.merit-list .desc dd{font-size: var(--text-20);font-weight: 200;line-height: 1.6;letter-spacing: -0.03em;}
		.merit-list .desc dd strong{font-weight:500;}

		@media (max-width:640px) {
			.merit-list{grid: auto / repeat(2, 1fr);}
		}
		@media (max-width:479px) {
			.merit-list{grid: auto / repeat(1, 1fr);}
		}

	/* work-flow */
		.work-flow{background: url('../images/skin/work_flow.jpg') no-repeat center / cover;}
		.work-flow .main-title{filter: var(--filter-white);}
		.work-flow .main-title h4{font-family: var(--font-type01);}

	/* one-step */
		.one-step{display: grid; grid: auto / repeat(5, 1fr); gap: var(--col-gap20); counter-reset: oneStep;}
		.one-step > li{position: relative;background: var(--point-white);border-radius: var(--radius-15);padding: clamp(25px, 3vw, 30px) clamp(15px, 2vw, 20px);text-align: center;display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);}
		.one-step .desc::before{content:'STEP ' counter(oneStep, decimal-leading-zero);counter-increment: oneStep;font-size: var(--text-18);font-weight: 600;color: var(--black-color10);line-height: 1.8;font-family: var(--font-type02);letter-spacing: 0;}
		.one-step .desc{display: grid;gap: 4px;}
		.one-step .desc dt{font-size: var(--text-28);font-weight: 600;color: var(--point-color05);line-height: 1.5;letter-spacing: -0.03em;}
		.one-step .desc dd{display: flex;align-items: center;justify-content: center;height: clamp(50px, 6.5vw, 60px);margin-top: 6px;}
		.one-step .cont{padding-top: clamp(15px, 2vw, 20px);border-top: 1px solid var(--border-color03);font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;letter-spacing: -0.03em;}
		.one-step .cont strong{font-weight:600;color: var(--black-color01);}

		@media (max-width:1023px) {
			.one-step{grid: auto / repeat(3, 1fr);}
		}
		@media (max-width:640px) {
			.one-step{grid: auto / repeat(2, 1fr);}
		}
		@media (max-width:479px) {
			.one-step{grid: auto / repeat(1, 1fr);}
		}

	/* chk-list */
		.chk-list{display: grid;grid: auto / repeat(2, 1fr);gap: var(--col-gap20);}
		.chk-list > li{background: rgb(70 169 230 / 5%);border-radius: var(--radius-10);padding: clamp(20px, 3vw, 30px);display: flex;flex-direction: column;justify-content: center;align-items: center;gap: clamp(10px, 1.4vw, 14px);font-size: var(--text-22);line-height: 1.4;color: var(--black-color03);}
		.chk-list > li::before{display: inline-flex;content:'';width: clamp(14px, 2.4vw, 19px);aspect-ratio: auto 1.26;background: url('../images/skin/chk_icon.svg') no-repeat center / 100% auto;}
		.chk-list > li > strong{font-weight: 600; display: contents;}

	/* comp-list */
		.comp-list{display: grid;grid: auto / repeat(2, 1fr);gap: var(--col-gap40);}
		.comp-list > li{position: relative;border-radius: var(--radius-20);overflow: hidden;text-align: center;display: flex;flex-direction: column;}
			.comp-list > li::before{position: absolute;content:'';inset: 0;border: clamp(3px, 0.6vw, 4px) solid var(--point-color04);border-radius: inherit;pointer-events: none;}
		.comp-list .bg-title{background: var(--point-color04);color: var(--point-white);padding: clamp(15px, 2.5vw, 20px) 15px;flex-shrink: 0;}
		.comp-list .bg-title h5{font-size: var(--text-28);font-weight: 600;line-height: 1.4;letter-spacing: -0.03em;}
		.comp-list .cont{padding: clamp(25px, 4vw, 40px);display: grid;gap: clamp(20px, 4vw, 40px);height: 100%;}
		.comp-list .desc{display: grid;gap: clamp(15px, 3vw, 30px);}
		.comp-list .desc dt{border-radius: var(--radius-10);overflow: hidden; width: fit-content;margin-inline: auto;}
		.comp-list .desc dd{font-size: var(--text-24);font-weight: 500;color: var(--black-color01);line-height: 1.6;letter-spacing: -0.03em;text-wrap: balance;}

			.comp-list > li:nth-child(2)::before{border-color: var(--point-color03);}
			.comp-list > li:nth-child(2) .bg-title{background: var(--point-color03);}
			.comp-list > li:nth-child(2) .chk-list > li::before{background-image: url('../images/skin/chk_icon02.svg');}

		@media (max-width:1023px) {
			.comp-list{grid: auto / repeat(1, 1fr);}
		}

	/* bullet-list */
		.bullet-list{display: flex;flex-direction: column;gap: clamp(18px, 2.4vw, 24px);}
		.bullet-list > li{font-size: var(--text-20);line-height: 1.4;letter-spacing: -0.03em;display: flex;align-items: baseline;gap: clamp(10px, 1.4vw, 14px);}
		.bullet-list > li::before{display:inline-flex;content:'';width: clamp(4px, 0.8vw, 6px);aspect-ratio: auto 1;background: var(--point-color05);border-radius: 100%;flex-shrink: 0;translate: 0 clamp(-5px, -0.5vw, -3px);}
		.bullet-list .desc{display: flex;align-items: baseline;gap: 12px clamp(15px, 2vw, 20px);}
		.bullet-list .desc dt{font-size: var(--text-24);font-weight: 600;line-height: 1.4;flex-shrink: 0;min-width: clamp(75px, 15vw, 140px);}
		.bullet-list .desc dd{width: 100%;translate: 0 clamp(-2px, -0.2vw, 0px);}
		.bullet-list .desc dd strong{font-weight: 600;}
		.bullet-list .desc dd small{font-size:var(--text-18);opacity: 0.8;display: flex;align-items: baseline;gap: 10px;letter-spacing: -0.02em;}
		.bullet-list .desc dd small::before{content: '·';font-weight: 600;}

			.bullet-list.type02{gap: var(--row-gap10);}
			.bullet-list.type02 > li{font-size: var(--text-18);color: var(--black-color05);gap: clamp(4px, 0.6vw, 6px);}
			.bullet-list.type02 > li::before{width: 3px;background: var(--black-color05);}

		@media (max-width:360px) {
			.bullet-list .desc{flex-wrap: wrap;}
			.bullet-list .desc dt{width: 100%; min-width: auto; flex-shrink: unset;}
		}

	/* prod-center */
		.prod-center{display: grid;grid: auto / repeat(2, 1fr);gap: var(--col-gap40);}
		.prod-center .map{width: 100%; border-radius: var(--radius-30); overflow: hidden;}
		.prod-center .map iframe{width: 100%; height: 100%;}
		.prod-center .cont{width: 100%;padding: clamp(40px, 3.2vw, 60px);background: var(--point-color01);border-radius: var(--radius-30);display: flex;justify-content: center;flex-direction: column;}
		.prod-center .bullet-list{d:0;}
		.prod-center .bullet-list > li{color: var(--point-white);font-weight: 300;}
			.prod-center .bullet-list > li + li{padding-top:clamp(18px, 2.4vw, 24px);border-top: 1px solid rgb(255 255 255 / 20%);}
		.prod-center .bullet-list .desc dt{font-weight: 500;color: var(--point-white);}
		.prod-center .bullet-list .desc dd strong{font-weight: 500;}

		@media (max-width:1023px) {
			.prod-center{grid: auto / repeat(1, 1fr);}
			.prod-center .map{height: clamp(300px, 68.6vw, 686px);}
			.prod-center .cont{padding: clamp(30px, 4vw, 40px);}
		}

	/* equip-list */
		.equip-list{display: grid; grid: auto / repeat(3, 1fr); gap: clamp(15px, 1.9vw, 36px);}
		.equip-list > li{position: relative;border-radius: var(--radius-15);box-shadow: inset 0 0 0 1px var(--border-color01);}
		.equip-list .thumb{display: block;border-radius: inherit;overflow: hidden;aspect-ratio: auto 1.58;}
		.equip-list .thumb img{width: 100%;height: 100%;object-fit: cover;}
		.equip-list .desc{padding: clamp(25px, 4vw, 40px);display: grid;gap: var(--row-gap10);}
		.equip-list .desc dt{font-size: var(--text-28);font-weight: 600;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;}
		.equip-list .desc dd{font-size: var(--text-20);color: var(--black-color03);line-height: 1.6;letter-spacing: -0.03em;}

		@media (max-width:860px) {
			.equip-list{grid: auto / repeat(2, 1fr);}
		}
		@media (max-width:479px) {
			.equip-list{grid: auto / repeat(1, 1fr);}
		}


	/* info-title */
		.info-title{position: relative; margin-bottom: clamp(15px, 3vw, 30px);}
		.info-title h4{font-size: var(--text-40); font-weight: 600; color: var(--black-color01); line-height: 1.4; letter-spacing: -0.03em;}
		.info-title h4.bullet{display: flex; align-items: baseline; gap: clamp(10px, 1.4vw, 14px);}
		.info-title h4.bullet::before{display: inline-flex;content: '';width: clamp(6px, 1.2vw, 10px);aspect-ratio: auto 1;background: var(--point-color05);border-radius: 100%;flex-shrink: 0;translate: 0 clamp(-9px, -1.1vw, -6px);}

	/* mater-list */
		.mater-list{display: grid;grid: auto / repeat(4, 1fr);gap: clamp(15px, 1.5vw, 28px);}
		.mater-list > li{box-shadow: inset 0 0 0 1px var(--border-color01);border-radius: var(--radius-15);padding: clamp(25px, 1.6vw, 30px);display: flex;flex-direction: column;gap: clamp(15px, 2vw, 20px);}
		.mater-list .desc{display: grid;gap: clamp(15px, 2.4vw, 24px);flex-shrink: 0;}
		.mater-list .desc dt{position:relative;}
		.mater-list .desc dt span{display: block; border-radius: var(--radius-10); aspect-ratio: auto 1.52; overflow: hidden;}
		.mater-list .desc dt span img{width: 100%; height: 100%; object-fit: cover;}
		.mater-list .desc dt em{position: absolute;right: 0;bottom: clamp(-47px, -2.45vw, -30px);height: clamp(75px, 5.21vw, 100px);}
		.mater-list .desc dd{position: relative;font-size: var(--text-28);font-weight: 600;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;}
		.mater-list .cont{display: grid;gap: clamp(20px, 2.4vw, 24px);border-top: 1px solid var(--border-color03);padding-top: clamp(15px, 2vw, 20px);flex-grow: 1;align-content: space-between;}
		.mater-list .tool-list{display: flex;flex-wrap: wrap;gap: 8px;}
		.mater-list .tool-list > li{font-size: var(--text-18);font-weight: 500;color: var(--point-color05);padding: 4px clamp(12px, 1.4vw, 14px);background: rgb(65 105 225 / 5%);border-radius: var(--radius-06);}

		@media (max-width:1023px) {
			.mater-list{grid: auto / repeat(2, 1fr);}
		}
		@media (max-width:479px) {
			.mater-list{grid: auto / repeat(1, 1fr);}
		}

	/* get_touch */
		.get_touch{background: var(--gray-bg04);}
		.get_touch .w_custom{display: flex;gap: 0 clamp(50px, 5.25vw, 100px);}
		.get_touch .thumb{position: relative;flex-shrink: 0;width: min(470px, 32%);}
		.get_touch .thumb span{display: block;width: calc(100% + 220px);margin-left: -220px;height: 100%; overflow: hidden;}
		.get_touch .thumb img{width: 100%; height: 100%; object-fit: cover;}
		.get_touch .cont{width: 100%;padding-block: var(--row-gap140) var(--row-gap160);}

	/* 인풋 */
		#wrap :where([type="text"], [type="password"], textarea){border: 1px solid var(--border-color01);font-size: var(--text-18);font-weight: 400;color: var(--black-color03);line-height: normal;padding: 0 clamp(15px, 2vw, 20px);min-width: auto;height: clamp(40px, 6.5vw, 65px);vertical-align: middle; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
		#wrap :where([type="text"], [type="password"], textarea)::placeholder{font-weight: inherit; color: var(--black-color08);}
		#wrap textarea{padding: clamp(15px, 2vw, 20px);overflow: visible;text-overflow: unset;white-space: unset;height: clamp(100px, 16vw, 150px);resize: none;}

		#wrap [type="checkbox"]{display: inline-flex;align-items: center;justify-content: center;width: clamp(20px, 2.9vw, 24px);height: clamp(20px, 2.9vw, 24px);border: 1px solid var(--border-color01);border-radius: var(--radius-04);background: var(--point-white);cursor: pointer;flex-shrink: 0;transition: all 0.4s;}
			#wrap [type="checkbox"]::before{display: inline-flex;content:'';width: clamp(10px, 1.7vw, 12px);aspect-ratio: auto 1.33;background: url('../images/skin/chk_box.svg') no-repeat center / 100% auto;transition: inherit;}
			#wrap [type="checkbox"]:checked{background: var(--point-color07);border-color: var(--point-color07);}
			#wrap [type="checkbox"]:checked::before{filter: var(--filter-white);}
		#wrap label:has([type="checkbox"]){display: inline-flex;align-items: flex-start;gap: 10px;font-size: var(--text-14);font-weight: 600;color: var(--black-color01);line-height: clamp(20px, 2.9vw, 24px);cursor: pointer;}
		#wrap label:has([type="checkbox"]) em{display: contents; color: var(--point-color05);}

	/* 작성하기 */
		#wrap .bbs_write{position: relative; display: block; width: 100%;}
		#wrap .bbs_write :where(tbody, tr, th, td){display: block;width: 100%;padding:0;border:0;font-size: var(--text-20);font-weight: 500;color: var(--black-color01);line-height: 1.4;letter-spacing: -0.03em;background: none;}
		#wrap .bbs_write tbody{display: flex;flex-wrap: wrap;gap: clamp(15px, 2vw, 20px) var(--col-gap20);}
		#wrap .bbs_write tr{display: flex;align-items: center;gap: clamp(10px, 2vw, 20px);width: calc(100% / 2 - var(--col-gap20) / 2);background: var(--point-white);border-radius: var(--radius-06);padding: 15px clamp(15px, 2.4vw, 24px);}
		#wrap .bbs_write tr:has(textarea, #captcha){width: 100%;}
		#wrap .bbs_write tr:has(textarea){align-items: baseline;}
		#wrap .bbs_write tr:has(textarea) th{translate: 0 10px;}
		#wrap .bbs_write th{width: auto;min-width: clamp(140px, 10vw, 180px);flex-shrink: 0;max-width: 200px;}
		#wrap .bbs_write th label{font-size: inherit;font-weight: inherit;color: inherit;}
		#wrap .bbs_write th label em{color: var(--point-color05);}
		#wrap .bbs_write :where([type="text"], [type="password"]){width: 100%;border:0;height: clamp(30px, 5vw, 40px);padding: 0;margin: 0;}
		#wrap .bbs_write textarea{width: 100%;border:0;vertical-align: top;padding: 0;}
		#wrap .bbs_write td:has(.controller){display: flex;gap: 5px clamp(20px, 2.1vw, 40px);}
		#wrap .bbs_write .controller{display: flex;align-items: center;gap: clamp(8px, 1vw, 10px);flex-shrink: 0;}
		#wrap .bbs_write #captcha_box{height: clamp(34px, 4.5vw, 40px);margin: 0;aspect-ratio: 4.5 auto;border: 1px solid var(--border-color01);border-radius: var(--radius-06);overflow: hidden;}
		#wrap .bbs_write #captcha_box img{width: calc(100% + 2px) !important;height: calc(100% + 2px) !important;max-width: none;max-height: none;margin: -1px 0 0 -1px;}
		#wrap .bbs_write #refreshCode{font-size: 0;background: url('../images/skin/refreshCode.svg') no-repeat center / clamp(12px, 1.9vw, 14px) auto;width: clamp(34px, 4.5vw, 40px);aspect-ratio: auto 1;border: 1px solid var(--border-color01);border-radius: var(--radius-06);cursor: pointer;}
		#wrap .policy_wrap{margin-top: var(--col-gap20);display: flex;align-items: center;justify-content: space-between;flex-wrap: wrap;gap:var(--col-gap20) 30px;}
		#wrap .policy_wrap label:has([type="checkbox"]){font-size: var(--text-20);}

		@media (max-width:1200px) {
			#wrap .bbs_write tr{width: 100%;}
		}
		@media (max-width:1100px) {
			.get_touch .w_custom{flex-direction: column-reverse;}
			.get_touch .thumb{width: 100%;flex-shrink: unset;}
			.get_touch .thumb span{width: calc(100% + 60px);margin-left: -30px;height: clamp(250px, 50vw, 500px);}
			#wrap .bbs_write th{min-width: clamp(100px, 15vw, 140px);}
		}
		@media (max-width:640px) {
			#wrap .bbs_write tr{flex-wrap: wrap;}
			#wrap .bbs_write th{width:100%;max-width: none;}
			#wrap .bbs_write tr:has(textarea) th{translate:0;}
			#wrap .bbs_write td:has(.controller){flex-wrap: wrap;}
		}

/*───────────────────────────────────────────────────────────

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	#footer{position: relative;background: var(--black-color00);padding-block: clamp(35px, 6vw, 60px) clamp(35px, 6.4vw, 64px);font-size: var(--text-18);color: var(--point-white);font-weight: 300;}
	#footer .w_custom{display:grid;gap: clamp(20px, 4vw, 40px);}
	#footer .top-sec{display: flex;align-items: center;justify-content: space-between;gap: 20px 30px;flex-wrap: wrap;}
	#footer .logo{max-width: clamp(150px, 23vw, 230px);}
	#footer .link-list{display: flex;}
	#footer .link-list > li{display: flex;align-items: center;flex-wrap: wrap;gap: 10px 0;}
	#footer .link-list > li:not(:last-child)::after{display: inline-flex;content:'';width: clamp(3px, 0.6vw, 4px);aspect-ratio: auto 1;background: rgb(255 255 255 / 40%);margin-inline: clamp(15px, 2vw, 20px);}
	#footer .link-list strong{font-weight: 500;}
	#footer .cont{border-top: 1px solid rgb(255 255 255 / 20%);padding-top: clamp(20px, 4vw, 40px);display: grid;gap: clamp(15px, 2vw, 20px);}
	#footer address{font-style: normal;display: flex;flex-wrap: wrap;gap: clamp(8px, 1vw, 10px) clamp(25px, 3vw, 30px);}
	#footer .desc{display: flex;align-items: baseline;gap: clamp(15px, 2vw, 20px);}
	#footer .desc dt{font-weight: 400;flex-shrink: 0;max-width: 100px;}
	#footer .desc dd{color: rgb(255 255 255 / 80%);}
	#footer .copy{display: flex;flex-wrap: wrap;gap: 5px 10px;font-size: var(--text-16);color: rgb(255 255 255 / 40%);font-family: var(--font-type02);letter-spacing: -0.025em;}

	.quick-list{position: fixed;left: 50%;bottom: clamp(15px, 3vw, 30px);z-index: 50;translate: -50%;display: grid;justify-items: end;gap: clamp(5px, 1.5vw, 10px);max-width: 1800px; pointer-events: none;}
	.quick-list > li{position: relative; pointer-events: auto;}
	.quick-list .desc{display: grid;grid-template-columns: auto minmax(0, 0fr);background: var(--black-color01);border-radius: 60px;transition: all 0.4s;box-shadow: var(--shadow-02);overflow: hidden;}
	.quick-list .desc dt{width: clamp(40px, 6.5vw, 60px);height: clamp(40px, 6.5vw, 60px);display: flex;align-items: center;justify-content: center;padding: 10px;}
	.quick-list .desc dd{overflow: hidden;width: max-content;font-size: var(--text-19);font-weight: 500;color: var(--point-white);line-height: 1.4;letter-spacing: -0.03em;display: flex;align-items: center;opacity: 0;pointer-events: none;transition: all 0.4s;}

		.quick-list .contact .desc{background:var(--point-grad01);}
		.quick-list .kakao .desc{background:#FFE812;}
		.quick-list .kakao .desc dd{color: var(--black-color00);}
		.quick-list .naver .desc{background:#2E9E41;}

		@media (hover:hover) and (pointer:fine) {
			.quick-list > li:hover .desc{grid-template-columns: auto minmax(0, 1fr);}
			.quick-list > li:hover .desc dd{opacity: 1; padding-right: 18px;}
		}

	@media (max-width:479px) {
		#footer .link-list{width: 100%;}
	}