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

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

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

/*───────────────────────────────────────────────────────────
	layout common
───────────────────────────────────────────────────────────*/
	#wrap {position:relative;width:100%; overflow: clip;}
    .w_custom{position: relative; width: calc(100% - 60px); max-width: 1760px; margin-inline: auto; }
    #container{position: relative; padding-block:clamp(50px, 8.4vw, 84px) clamp(70px, 15vw, 150px); }
	#wrap[class*="sub"] :where(div:not(#header) .w_custom, #container){max-width: 1400px;}
    #wrap:has(.fullSec) #container{width: 100%; max-width: 100%;}
	.link{position: absolute; inset: 0; z-index: 3;}

    @media (max-width:1400px){
        br.for_pc{display: none;}
    }
    @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;width: 100%;height: var(--row-gap120); background: var(--point-white); z-index: 100; transition: all 0.4s;}
		#header.on{box-shadow: inset 0 -1px 0 var(--border-color01);}
	#header .w_custom{display: flex;align-items: center;justify-content: space-between;gap: 15px;max-width: 1840px;height: 100%;}
	#header .cont{height: 100%;display: flex;align-items: center;gap: clamp(50px, 5.3vw, 100px);}
	#header .logo{height: 100%;transition: all 0.4s;}
	#header .logo a{display: flex;align-items: center;height: 100%;padding-block: 15px;max-width: clamp(144px, 30vw, 300px);}
	#header .gnb{position: relative;display: flex;justify-content: center;text-align: center;gap: clamp(30px, 4.2vw, 80px);height: 100%;}
	#header .gnb > li{position: relative;height: 100%;font-size: var(--text-20);font-weight: 700;color: var(--black-color01);line-height: 1.3;transition: all 0.4s;}
	#header .gnb > li > a{display: flex;align-items: center;justify-content: center;height: 100%;transition: inherit;}
	#header .gnb .dep02{position: absolute;top: 85%;left: 50%;translate: -50%;width: max-content;min-width: 180px;max-width: 300px;background: var(--point-color02);border-radius: var(--radius-10);padding-block: 15px;opacity: 0;pointer-events: none;transition: inherit;}
	#header .gnb .dep02 > li{position: relative; transition: inherit;}
	#header .gnb .dep02 > li > a{display: block;filter: var(--filter-white);padding: 10px 25px;font-size: 85%;font-weight: 500;}
	#header .utility{display: flex;align-items: center;gap: clamp(15px, 3vw, 30px);flex-shrink: 0;}
	#header .allCate{display: flex;flex-direction: column;justify-content: space-between;width: clamp(24px, 3.5vw, 30px);aspect-ratio: auto 1.4;}
	#header .allCate span{width: 100%; height: 2px; background: var(--black-color01);} 

	.lang-desc{position: relative;font-size: var(--text-16);font-weight: 500;color: var(--black-color01);font-family: var(--font-type02);}
	.lang-desc dt{position: relative;padding: clamp(8px, 1.8vw, 13px) clamp(12px, 2vw, 20px);border: 1px solid rgb(0 0 0 / 20%);border-radius: var(--radius-04);display: flex;align-items: center;gap: clamp(8px, 1vw, 10px);cursor: pointer;transition: all 0.4s;}
		.lang-desc dt::before{display: inline-flex;content:'';width: clamp(14px, 2.5vw, 20px);aspect-ratio: auto 1;background: url('../images/skin/lang-desc.svg') no-repeat center / 100% auto;}
		.lang-desc dt::after{display: inline-flex;content:'';width: clamp(7px, 1.3vw, 8px);aspect-ratio: auto 1.6;background: var(--black-color01);clip-path: var(--clip-poly01);margin-left: 3px;transition: all 0.4s;}
		.lang-desc dt.on::after{scale: -1 -1;}
	.lang-desc dd{position: absolute;top: calc(100% + 10px);left: 0;width: 100%;border: 1px solid rgb(0 0 0 / 20%);padding-block: clamp(7px, 1vw, 10px);font-size: 90%;background: var(--point-white);border-radius: var(--radius-04);transition: all 0.4s;}
		.lang-desc:not(:has(dt.on)) dd{opacity:0; pointer-events:none;}
	.lang-desc dd a{display:block;text-align: center;padding: clamp(3px, 0.4vw, 4px) clamp(15px, 2vw, 20px);}
	.lang-desc dd a.on{color: var(--point-color01);}

		.main_index #header{position: fixed;}
		.main_index #header:not(.on){background: none;}
		.main_index #header:not(.on) :where(.logo, .gnb > li > a, .lang-desc dt, .allCate){filter: var(--filter-white);}

		@media (hover:hover) and (pointer:fine) {
			.main_index #header:not(.on):hover{background: var(--point-white);}
			.main_index #header:not(.on):hover :where(.logo, .gnb > li > a, .lang-desc dt, .allCate){filter: none;}
			#header .gnb > li:hover > a{color: var(--point-color01);}
			#header .gnb > li:hover .dep02{opacity: 1; pointer-events: auto;}
			#header .gnb .dep02:has(li:hover) > li:not(:hover){opacity: 0.4;}
		}

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

	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-template: auto / repeat(3, 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);}
    }
    @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

───────────────────────────────────────────────────────────*/
	/* 비주얼 */
		.main_visual {position: relative;}
		.main_visual .slick-slide {position: relative;height: clamp(680px, 98vw, 980px);overflow: hidden;}
		.main_visual .thumb{position: absolute; inset: 0; background: no-repeat center / cover; transition: all 4s 0.2s;}
			.main_visual .active .thumb{scale: 1.1;}
		.main_visual .txt_box{position: relative;display: flex;flex-direction: column;justify-content: flex-end;gap: clamp(15px, 2.7vw, 27px);height: 100%;padding-bottom: clamp(50px, 12vw, 120px);text-wrap: balance;}
		.main_visual .txt_box :where(h2, h3, h4){filter: var(--filter-white);}
		.main_visual .txt_box h2{font-size: clamp(40px, 8vw, 80px);font-weight: 600;line-height: 1.2;font-family:var(--font-type02);}
		.main_visual .txt_box h3{font-size: var(--text-36);font-weight: 600;line-height: 1.4;font-family: var(--font-type02);letter-spacing: 0.04em;}
		.main_visual .txt_box h4{font-size: var(--text-20);font-weight: 400;line-height: 1.6;letter-spacing: -0.03em;}
		.main_visual .btn_box{margin-top: clamp(15px, 2.4vw, 24px);}
		.main_visual .txtAni{clip-path: inset(0);}
		.main_visual .txtAni > *{display: block; opacity: 0; translate: 0 100%; transition: all 0.8s 0.2s; }
			.main_visual .txtAni:nth-child(2) > *{transition-delay: 0.4s;}
			.main_visual .txtAni:nth-child(3) > *{transition-delay: 0.6s;}
			.main_visual .txtAni:nth-child(4) > *{transition-delay: 0.8s;}
			.main_visual .txtAni:nth-child(5) > *{transition-delay: 1s;}
		.main_visual .active .txtAni > *{opacity: 1; translate: 0;}

	/* 버튼 */
		.comBtn{position: relative;width: fit-content;min-width: clamp(120px, 21vw, 200px);max-width: 100%;display: flex;align-items: center;justify-content: center;text-align: center;height: clamp(44px, 6.5vw, 60px);background: var(--point-color01);font-size: var(--text-20);font-weight: 600;color: var(--point-color02);border-radius: var(--radius-06);padding-inline: 15px;transition: all 0.4s;}
		.comBtn span{display: inline-flex;clip-path: inset(0);filter: var(--filter-white);transition: all 0.4s;}
		.comBtn em{position: relative;display: inline-flex;font-weight: inherit; transition:all 0.4s;}
		.comBtn em::before{position: absolute; content:attr(title); top:100%; left:0;}
			.comBtn.wh{background: var(--point-white);}
			.comBtn.wh span{filter: none;}

			@media (hover:hover) and (pointer:fine) {
				.comBtn:hover{background: var(--point-color02);}
				.comBtn:hover em{translate:0 -100%;}
				.comBtn.wh:hover span{filter: var(--filter-white);}
				.comBtn.wh:hover{background: var(--point-color01);}
			}

	/* 메인 타이틀 */
		.main-title{display: flex;flex-direction: column;gap: var(--row-gap20); color: var(--point-color02); text-align: center;}
			.main-title.left{text-align: left;}
		.main-title h3{font-size: var(--text-60);font-weight: 600;line-height: 1.3;letter-spacing: -0.03em;}
		.main-title h4{font-size: var(--text-20);font-weight: 400;line-height: 1.3;letter-spacing: -0.03em;}

	/* 파트너사 */
		.partnerSwiper .swiper-wrapper{transition-timing-function: linear;}
		.partnerSwiper .swiper-slide{width:clamp(150px, 30vw, 300px); height: auto; aspect-ratio: auto 3; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-right: clamp(10px, 2vw, 20px);}

	/* 사업소개 */
		.bizSwiper .swiper-slide{position: relative;height: auto;min-height: clamp(500px, 42vw, 800px);padding: 150px clamp(25px, 5vw, 50px) clamp(25px, 4.4vw, 44px);width: calc(100% / 3 - clamp(15px, 1.6vw, 28px) * 2 / 3);margin-right: clamp(15px, 1.6vw, 28px);display: flex;flex-direction: column;justify-content: flex-end;}
		.bizSwiper .thumb-desc{position: absolute; inset: 0; overflow: hidden; z-index: -1;}
		.bizSwiper .thumb-desc::before{position: absolute; content:''; inset: 0; background: var(--point-grad01); opacity: 0; transition: all 0.4s; z-index: 1; pointer-events: none;}
		.bizSwiper .thumb-desc :where(dt, dd, img){ width: 100%; height: 100%; object-fit: cover;}
		.bizSwiper .thumb-desc dd{position: absolute; inset: 0; opacity: 0; transition: all 0.4s;}
		.bizSwiper .cont{position: relative;display: grid;z-index: 3;}
		.bizSwiper .info-desc{position: relative;display: grid;gap: clamp(10px, 1.6vw, 16px);filter: var(--filter-white);}
		.bizSwiper .info-desc dt{font-size: var(--text-38);font-weight: 500;line-height: 1.3;letter-spacing: -0.03em;}
		.bizSwiper .info-desc dd{font-size: var(--text-20);font-weight: 400;font-family: var(--font-type02);}
		.bizSwiper .comBtn{overflow: hidden;margin-top: clamp(25px, 3.6vw, 36px);}

			@media (min-width:1024px) {
				.bizSwiper .cont{grid-template-rows: auto 0fr;}
				.bizSwiper .swiper-slide:not(:hover) .comBtn{height: 0; margin-top: 0; opacity: 0;}
			}

			@media (hover:hover) and (pointer:fine) {
				.bizSwiper .swiper-slide:hover .thumb-desc::before{opacity: 0.8;}
				.bizSwiper .swiper-slide:hover .thumb-desc dd{opacity: 1;}
			}

		@media (max-width:1023px) {
			.bizSwiper .swiper-slide{width: calc(100% / 2 - clamp(15px, 1.6vw, 28px) * 2 / 3);min-height: clamp(400px, 60vw, 600px);}
			.bizSwiper .swiper-slide-active .thumb-desc::before{opacity: 0.8;}
			.bizSwiper .swiper-slide-active .thumb-desc dd{opacity: 1;}
		}
		@media (max-width:860px) {
			.bizSwiper .swiper-slide{width: 55vw;}
		}
		@media (max-width:479px) {
			.bizSwiper .swiper-slide{width: 75vw;}
		}

	/* countMeta */
		.countMeta{display: grid;grid: auto / repeat(4, 1fr);border-block: 1px solid var(--point-color02);padding-block: clamp(35px, 6vw, 60px) clamp(35px, 6.6vw, 66px);text-align: center;color: var(--point-color02);gap: var(--row-gap100) 0;}
		.countMeta .item{position: relative; display: flex;flex-direction: column;gap: clamp(20px, 3.8vw, 38px);padding-inline: 15px;}
		.countMeta .item::after{position: absolute;content:'';width: 1px;height: calc(100% - 5px);background: var(--point-color02);opacity: 0.1;top: 50%;translate: 0 -50%;right: 0;}
		.countMeta .item:last-child::after{display: none;}
		.countMeta i{display: flex;max-width: clamp(60px, 9.5vw, 90px);height: clamp(40px, 6.5vw, 60px);align-items: center;justify-content: center;margin-inline: auto;}
		.countMeta .desc{display: grid;gap: clamp(12px, 1.9vw, 19px);}
		.countMeta .desc dt{font-size: var(--text-24);font-weight: 500;line-height: 1.3;font-family: var(--font-type02);display: flex;align-items: flex-end;justify-content: center;gap: 10px;}
		.countMeta .desc dd{font-size: var(--text-20);letter-spacing: -0.03em;}
		.countMeta .cont-box{position:relative;overflow: hidden;text-align: right;height: var(--text-40);}
		.countMeta .cnt-list{position:relative;translate: 0;}
		.countMeta .cnt-list > li{font-size: var(--text-40); font-weight: 700; line-height: 1;}

			.countMeta.aos-animate .cnt-list{translate: 0 calc(-100% + var(--text-40));transition: all 3s 0.2s;}

		@media (max-width:860px) {
			.countMeta{grid: auto / repeat(2, 1fr);}
			.countMeta .item:nth-child(n+3)::before{position: absolute;content:'';width: 90%;height: 1px;background: var(--point-color02);opacity: 0.1;bottom: calc(100% + var(--row-gap100) / 2 - 2px);left: 5%;}
		}

	/* 뉴스 */
		.newList{display: grid;grid-template-columns: var(--grid-array03);gap: var(--row-gap60) clamp(15px, 1.6vw, 28px);}
		.newList > li{position: relative;display: flex;flex-direction: column;gap: var(--row-gap30);color: var(--point-color02);border-bottom: 1px solid var(--point-color02);padding-bottom: var(--row-gap50);transition: all 0.4s;}
		.newList .thumb{position: relative; aspect-ratio: auto 1.42; overflow: hidden;}
		.newList .thumb img{width: 100%; height: 100%; object-fit: cover; transition: all 0.4s;}
		.newList .desc{display: grid;gap: var(--row-gap20);}
		.newList .desc :where(dt, dd){white-space:normal; overflow:hidden; text-overflow:ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
		.newList .desc dt{font-size: var(--text-28);font-weight: 500;line-height: 1.5;letter-spacing: -0.03em;word-break: break-all;}
		.newList .desc dd{font-size: var(--text-18);line-height: 1.6;letter-spacing: -0.03em;}

			@media (min-width:1024px) {
				.newList > li:hover{border-color: var(--point-color01);}
				.newList > li:hover .thumb img{scale: 1.1;}
			}

	/* ftr-bnr */
		.ftr-bnr{background:url('../images/skin/main_inquiry.jpg') no-repeat center / cover; padding-block: clamp(70px, 13.3vw, 133px);}
		.ftr-bnr .main-title{filter: var(--filter-white);}

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

    FOOTER | outline/footer.html

───────────────────────────────────────────────────────────*/
	/* 하단 */
		#footer{position: relative; background: var(--point-color02); padding-block: var(--row-gap80) clamp(30px, 5.6vw, 56px); font-size: var(--text-16); font-weight: 300; color: var(--point-white);}
		#footer .logo{display: flex;align-items: center;max-width: clamp(144px, 30vw, 300px); filter: var(--filter-white);}
		#footer .info-list{display: grid;gap: 8px;letter-spacing: -0.02em;}
		#footer .info-list > li{display: flex;gap: 8px 20px;flex-wrap: wrap;}
		#footer .info-list .desc{display: flex; align-items: baseline; gap: 4px;}
		#footer .info-list .desc dt{flex-shrink: 0;}
		#footer .info-list .desc strong{font-weight: 500;}
		#footer address{display: flex;gap: clamp(25px, 4.2vw, 50px);}
		#footer .addr-desc{display: flex;flex-direction: column;gap: var(--row-gap20);border-left: 1px solid rgb(255 255 255 / 20%);padding: 0 0 7px clamp(20px, 3vw, 30px);}
		#footer .addr-desc dt{font-size: var(--text-20); font-weight: 500; line-height: 1.3;}
		#footer .addr-desc dd{font-size: var(--text-17); font-weight: 400; line-height: 1.7;}

		@media (max-width:1500px) {
			#footer address{display: grid; grid:auto / repeat(2, 1fr); width: 60%;}
		}
		@media (max-width:1023px) {
			#footer address{width: 100%;}
		}
		@media (max-width:479px) {
			#footer address{grid:auto / repeat(1, 1fr);}
		}

	/* 퀵 */
		.quickList{position: fixed;right: clamp(30px, 2.1vw, 40px);bottom: clamp(30px, 3.7vw, 70px);z-index: 50;display: grid;gap: var(--row-gap20);justify-items: end; opacity: 0; pointer-events: none; transition: all 0.4s;}
			body:has(#header.on:not(.end)) .quickList{opacity: 1; pointer-events: auto;}
		.quickList > li{position: relative;background: var(--point-color02);border-radius: var(--radius-06);overflow: hidden; box-shadow: var(--shadow-01);}
		.quickList > li:first-child{background: var(--point-color01);}
		.quickList .desc{display: grid;grid-template-columns: minmax(0, 0fr) auto;align-items: center;overflow: clip;transition: all 0.4s;justify-items: end;justify-content: end;}
		.quickList .desc dt{overflow:hidden;width: max-content;padding-left: clamp(15px, 2vw, 20px);font-size: var(--text-20);font-weight: 600;filter: var(--filter-white);opacity: 0;transition: inherit;}
		.quickList .desc dd{display: flex;align-items: center;justify-content: center;padding: 12px;width: clamp(40px, 6.5vw, 60px);height: clamp(40px, 6.5vw, 60px);}

			@media (hover:hover) and (pointer:fine) {
				.quickList .ov:hover .desc{grid-template-columns: minmax(0, 1fr) auto;}
				.quickList .ov:hover .desc dt{opacity: 1;}
			}
		@media (max-width:860px) {
			.quickList{right:15px; bottom:15px;}
		}