:root{
	--lnbHeight: 70px;
}

/* 서브 비주얼 이미지 */
#visual .bg1{ background: url("/img/sub/company_bg.jpg") no-repeat center center / cover; }
#visual .bg2{ background: url("/img/sub/business_bg.jpg") no-repeat center center / cover; }
#visual .bg3{ background: url("/img/sub/promote_bg.jpg") no-repeat center center / cover; }
#visual .bg4{ background: url("/img/sub/recruit_bg.jpg") no-repeat center center / cover; }

/* sub-visual */
#visual{ position: relative; }
#visual .overflow{ overflow: hidden; }
#visual .bg{ padding-bottom: 28.902%; transform: scale(1.2); animation: bgScale 1.5s 0.3s forwards; }
#visual .text-box{ position: absolute; bottom: -1px; left: 0; right: 0; }
#visual .text-box h2{ font-size: 8rem; font-weight: 500; color: #fff; letter-spacing: -0.02em; margin-bottom: 80px; }
#visual .text-box h2 span{ display: inline-block; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); animation: textClip 0.8s forwards; }


/* lnb */
#lnb{ max-width: 800px; width: 100%; background: #fff; border-radius: 10px 10px 0 0; position: relative; z-index: 100; }
#lnb::after{ content: ""; width: 100%; height: 1px; background: #E9E9E9; position: absolute; bottom: 1px; left: 0; }
#lnb a{ display: inline-block; }
#lnb > ul{ display: flex; }
#lnb > ul > li{ position: relative; z-index: 50; }
#lnb > ul > li:not(.home){ width: calc((100% - var(--lnbHeight)) / 2); }
#lnb > ul > li:not(:last-of-type){ border-right: 1px solid #E9E9E9; }
#lnb > ul > li.home a{ width: var(--lnbHeight); height: var(--lnbHeight); display: flex; justify-content: center; align-items: center; }
#lnb ul li button{ width: 100%; height: var(--lnbHeight); font-family: var(--baseFont); font-size: 1.8rem; font-weight: 600; color: #222; letter-spacing: -0.02em; line-height: 1; text-align: left; padding: 0 30px; padding-right: 75px; position: relative; }
#lnb ul li button::after{ content: url("/img/sub/lnb_arrow.svg"); position: absolute; top: 50%; right: 30px; transform: translateY(-50%); transition: all 0.5s; }

#lnb > ul > li ul{ width: calc(100% + 2px); position: absolute; top: calc(100% - 2px); left: -1px; background: #fff; border-radius: 0 0 10px 10px; padding: 10px 0; border: 1px solid #E9E9E9; display: none; }
#lnb > ul > li:last-of-type ul{ width: calc(100% + 1px); }
#lnb > ul > li ul li a{ font-size: 1.7rem; font-weight: 500; color: #888; letter-spacing: -0.02em; padding: 10px 30px; transition: color 0.5s; }

#lnb > ul > li.on button::after{ top: 53%; transform: translateY(-50%) rotate(-180deg); }

@media screen and (hover: hover){
	#lnb > ul > li ul li a:hover{ font-weight: 600; color: var(--mainColor); }
}

@media screen and (max-width: 1600px){
	:root{
		--lnbHeight: 65px;
	}

	/* sub-visual */
	#visual .text-box h2{ font-size: 6rem; margin-bottom: 60px; }
}

@media screen and (max-width: 1280px){
	:root{
		--lnbHeight: 60px;
	}

	/* sub-visual */
	#visual .bg{ height: 350px; }
	#visual .text-box h2{ font-size: 5rem; margin-bottom: 40px; }

	/* lnb */
	#lnb ul li button{ font-size: 1.7rem; padding: 0 20px; padding-right: 55px; }
	#lnb > ul > li button::after{ right: 20px; }
	#lnb > ul > li ul li a{ font-size: 1.6rem; padding: 7px 20px; }
}

@media screen and (max-width: 900px){
	:root{
		--lnbHeight: 55px;
	}

	/* sub-visual */
	#visual .text-box h2{ font-size: 4rem; margin-bottom: 20px; }

	/* lnb */
	#lnb ul li button{ font-size: 1.6rem; padding: 0 15px; padding-right: 45px; }
	#lnb > ul > li button::after{ right: 15px; }
	#lnb > ul > li ul li a{ font-size: 1.6rem; padding: 7px 15px; }
}


/* common */
.sub-content{ padding: 200px 0 150px; position: relative; }
.sub-content::before{ content: ""; max-width: 50%; width: 1020px; height: 360px; background: url("/img/sub/bg_symbol.svg") no-repeat top right / contain; position: absolute; top: 70px; right: 0; z-index: -1; }
.textClip{ transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 1 !important; }
.aos-animate .textClip{ animation: textClip 1s forwards; }
.textClip.aos-animate{ animation: textClip 1s forwards; }

/* 간격 */
.pt200{ padding-top: 200px; }
.pb200{ padding-bottom: 200px; }
.pt1150{ padding-top: 150px; }
.pb150{ padding-bottom: 150px; }
.pt100{ padding-top: 100px; }
.pb100{ padding-bottom: 100px; }

/* sec-title */
.sec-title{ position: relative; padding-top: 15px; margin-bottom: 70px; opacity: 1; }
.sec-title::before{ content: ""; width: 45px; height: 5px; background: var(--mainColor); position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.5s; }
.sec-title h3{ font-size: 6rem; font-weight: 700; color: #000; letter-spacing: -0.02em; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); }

.sec-title.aos-animate::before{ transform: scaleX(1); }
.sec-title.aos-animate h3{ animation: textClip 1s 0.2s forwards; }

/* .h4 */
.h4{ font-size: 4rem; font-weight: 600; color: #222; letter-spacing: -0.02em; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 1 !important; }
.h4.aos-animate{ animation: textClip 1s forwards; }

/* .h5 */
.h5{ font-size: 3.6rem; font-weight: 600; color: #222; letter-spacing: -0.02em; transform: translateY(100%); clip-path: polygon(0 0, 100% 0, 100% 0, 0 0); opacity: 1 !important; }
.h5.aos-animate{ animation: textClip 1s forwards; }


/* tab-menu */
.tab-menu{ margin-bottom: 60px; }
.tab-menu ul{ display: flex; flex-wrap: wrap; background: #fff; box-shadow: 0px 0px 5px 0px rgba(102, 102, 102, 0.25); padding: 10px; border-radius: 990px; }
.tab-menu ul li{ height: 80px; display: flex; justify-content: center; align-items: center; font-size: 2.4rem; font-weight: 600; color: #222; text-align: center; border-radius: inherit; position: relative; }
.tab-menu ul li.on{ color: #fff; background: var(--mainColor); }
.tab-menu ul li.on::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 15; cursor: pointer; }
.tab-menu ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (max-width: 1600px){
	/* common */
	.sub-content{ padding: 150px 0 120px; }
	.sub-content::before{ top: 50px; }

	/* 간격 */
	.pt200{ padding-top: 150px; }
	.pb200{ padding-bottom: 150px; }
	.pt1150{ padding-top: 100px; }
	.pb150{ padding-bottom: 100px; }
	.pt100{ padding-top: 80px; }
	.pb100{ padding-bottom: 80px; }

	/* sec-title */
	.sec-title{ padding-top: 10px; margin-bottom: 50px; }
	.sec-title::before{ width: 35px; height: 4px; }
	.sec-title h3{ font-size: 5rem; }

	/* .h4 */
	.h4{ font-size: 3.5rem; }

	/* .h5 */
	.h5{ font-size: 3rem; }

	/* tab-menu */
	.tab-menu ul li{ height: 70px; font-size: 2.2rem; }
}

@media screen and (max-width: 1280px){
	/* common */
	.sub-content{ padding: 80px 0 100px; }
	.sub-content::before{ max-width: 80%; width: 500px; top: 35px; }

	/* sec-title */
	.sec-title{ margin-bottom: 30px; }
	.sec-title::before{ width: 25px; height: 3px; }
	.sec-title h3{ font-size: 4rem; }

	/* .h4 */
	.h4{ font-size: 3rem; }

	/* .h5 */
	.h5{ font-size: 2.6rem; }

	/* tab-menu */
	.tab-menu{ margin-bottom: 40px; }
	.tab-menu ul li{ height: 60px; font-size: 2rem; }

	/* 간격 */
	.pt200{ padding-top: 100px; }
	.pb200{ padding-bottom: 100px; }
	.pt1150{ padding-top: 80px; }
	.pb150{ padding-bottom: 80px; }
	.pt100{ padding-top: 60px; }
	.pb100{ padding-bottom: 60px; }
}

@media screen and (max-width: 900px){
	
	.sub-content::before{ top: 30px; }

	/* sec-title */
	.sec-title h3{ font-size: 3.5rem; }

	/* .h4 */
	.h4{ font-size: 2.6rem; }

	/* .h5 */
	.h5{ font-size: 2.2rem; }

	/* tab-menu */
	.tab-menu ul li{ height: 50px; font-size: 1.8rem; }
}


/* 기업정보 - 기업현황 */
#company{ overflow: hidden; }
#company .info-wrap{ width: calc(100% + ((100vw - 100% - 17px) / 2)); }
#company .info-wrap .slick-list{ margin-right: -38px; }
#company .info{ width: calc((1600px - 38px) / 2); margin-right: 38px; position: relative; }
#company .info figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 95.5%; border-radius: 20px; }
#company .info figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#company .info .text{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; padding: 60px; }
#company .info .text dl{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
#company .info .text dl dt{ font-size: 3rem; font-weight: 400; color: #fff; }
#company .info .text dl dd{ width: 100%; font-size: 5.6rem; font-weight: 700; color: #fff; text-align: right; }

#company .company .flex-box{ display: flex; }
#company .company .left{ width: calc(100% - 450px); }
#company .company .right{ width: 450px; display: flex; flex-direction: column; justify-content: space-between; padding-left: 20px; }

#company .company .big figure{ width: 100%; overflow: hidden; padding-bottom: 59.131%; border-radius: 10px; position: relative; }
#company .company .big figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#company .company .small-wrap{ height: calc(100% - 130px); overflow: hidden; }
#company .company .small-wrap div{ height: 100%; }
#company .company .small-wrap.slick-list{ margin-right: -20px; }
#company .company .small{ margin-right: 20px; cursor: pointer; }
#company .company .small figure{ width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 10px; }
#company .company .small figure::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0; z-index: 10; }
#company .company .small figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#company .company .slide-box{ width: 100%; display: flex; justify-content: flex-end; align-items: flex-end; }
#company .company .slide-box .count{ position: relative; }
#company .company .slide-box .count::before{ content: ""; width: 55px; height: 1px; background: #999; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#company .company .slide-box .count span{ display: inline-block; font-family: var(--engFont); font-size: 3.4rem; font-weight: 700; color: #999; letter-spacing: -0.02em; }
#company .company .slide-box .count span.index{ color: var(--mainColor); }
#company .company .slide-box .count span.total{ padding-left: 85px; position: relative; }
#company .company .slide-box .btn{ position: relative; margin-right: -25px; }
#company .company .slide-box .btn::before{ content: ""; width: 1px; height: 8px; background: #999; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#company .company .slide-box .btn button{ padding: 10px 25px; }
#company .company .slide-box .btn button svg{ height: auto; }
#company .company .slide-box .btn button svg path{ transition: stroke 0.5s; }

@media screen and (hover: hover){
	#company .company .slide-box .btn button:hover svg path{ stroke: var(--mainColor); }
}

@media screen and (max-width: 1640px){
	#company .info-wrap{ width: calc(100vw + 20px); }
	#company .info-wrap .slick-list{ margin-right: -20px; }
	#company .info{ width: calc((100vw - 60px - 17px - 100px) / 2); margin-right: 20px; }
}

@media screen and (max-width: 1600px){
	#company .info .text{ padding: 40px; }
	#company .info .text dl dt{ font-size: 2.8rem;}
	#company .info .text dl dd{ font-size: 4.5rem; }

	#company .company .slide-box .count span{ font-size: 3rem; }
}

@media screen and (max-width: 1400px){
	#company .company .small-wrap{ height: calc(100% - 80px); }
}

@media screen and (max-width: 1280px){
	#company .info .text{ padding: 30px; }
	#company .info .text dl dt{ font-size: 2.6rem;}
	#company .info .text dl dd{ font-size: 3.5rem; }

	#company .company .left{ width: calc(100% - 300px); }
	#company .company .right{ width: 300px; }

	#company .company .small-wrap.slick-list{ margin-right: -15px; }
	#company .company .small{ margin-right: 15px; }

	#company .company .slide-box .count::before{ width: 40px; }
	#company .company .slide-box .count span{ font-size: 2.4rem; }
	#company .company .slide-box .count span.total{ padding-left: 60px; }

	#company .company .slide-box .btn{ margin-right: -20px; }
	#company .company .slide-box .btn button{ padding: 7px 20px; }
}

@media screen and (max-width: 900px){
	#company .info{ width: calc(100vw - 60px - 17px - 100px); }
	#company .info .text{ padding: 20px; }
	#company .info .text dl dt{ font-size: 2.2rem;}
	#company .info .text dl dd{ font-size: 2.6rem; }

	#company .company .flex-box{ flex-direction: column; }
	#company .company .left{ width: 100%; }
	#company .company .right{ width: 100%; margin-top: 10px; }
	#company .company .small-wrap{ display: none; }

	#company .company .slide-box .count span{ font-size: 2.3rem; }
}

@media screen and (max-width: 600px){
	#company .company .slide-box .btn button svg{ width: 9px; }
}



/* 기업정보 - 대표이사 인사말 */
#ceo{ overflow: hidden; }
#ceo section{ width: 100%; min-height: 540px; padding-top: 50px; }
#ceo .ceo{ background: linear-gradient(to top, rgba(249, 249, 249, 0), #F4F4F4); padding: 65px 0 35px; box-shadow: 0px 2px 20px 0px rgba(102, 102, 102, 0.15); }
#ceo .flex-box{ display: flex; }
#ceo .figure{ width: 520px; position: relative; }
#ceo .figure figure{ width: 100%; position: absolute; bottom: -35px; left: 0; }

#ceo .text{ width: calc(100% - 520px); }
#ceo .text h4{ font-size: 3.8rem; font-weight: 200; color: #222; line-height: 1.5; letter-spacing: -0.02em; }
#ceo .text h4 strong{ font-weight: 600; }
#ceo .text .p-box{ margin: 30px 0 15px; }
#ceo .text p{ font-size: 1.7rem; font-weight: 300; color: #333; line-height: 1.8; letter-spacing: -0.02em; }
#ceo .text .p-box p:not(:last-of-type){ margin-bottom: 17px; }
#ceo .text p strong{ font-weight: 500; }

#ceo .text p.name{ font-size: 1.6rem; color: #222; text-align: right; }
#ceo .text p.name strong{ font-weight: 600; }

@media screen and (max-width: 1600px){
	#ceo .text h4{ font-size: 3.3rem; }
}

@media screen and (max-width: 1500px){
	#ceo .text br{ display: none; }
}

@media screen and (max-width: 1280px){
	#ceo .text h4{ font-size: 2.8rem; }
	#ceo .text .p-box{ margin-top: 20px; }
}

@media screen and (max-width: 1200px){
	#ceo section{ padding-top: 10px; }
	#ceo .ceo{ padding-top: 0; margin-top: 70px; }  
	#ceo .flex-box{ flex-direction: column; }
	#ceo .figure{ width: 100%; margin-top: -70px; }
	#ceo .figure figure{ max-width: 350px; position: static; }

	#ceo .text{ width: 100%; margin-top: 20px; }
}

@media screen and (max-width: 900px){
	#ceo .text h4{ font-size: 2.4rem; }
}



/* 기업정보 - 면허 및 등록현황 */
#board.license .board_box colgroup col:nth-of-type(1){ width: 125px; }
#board.license .board_box colgroup col:nth-of-type(2){ width: 100%; }
#board.license .board_box colgroup col:nth-of-type(3){ width: 85%; }
#board.license .board_box colgroup col:nth-of-type(4){ width: 240px; }
#board.license .board_box colgroup col:nth-of-type(5){ width: 190px; }

@media screen and (max-width: 1280px){
	#board.license .board_box colgroup col:nth-of-type(1){ width: 100px; }
	#board.license .board_box colgroup col:nth-of-type(4){ width: 200px; }
	#board.license .board_box colgroup col:nth-of-type(5){ width: 150px; }
}


/* 기업정보 - 조직구조 */
#group .organ figure{ margin-top: 40px; }

#group .percent{ overflow: hidden; }
#group .percent *{ color: #fff !important; }
#group .percent .inner{ background: url("/img/sub/company/group_bg.jpg") no-repeat center center / cover; padding: 100px 0; border-radius: 30px; }
#group .percent .flex-box{ display: flex; margin-top: 45px; }

#group .percent .circle{ width: 600px; padding-right: 100px; }
#group .percent .circle .inline{ max-width: max-content; display: flex; flex-direction: column; align-items: center; }
#group .percent .circle .svg{ display: inline-block; position: relative; }
#group .percent .circle .svg::after{ content: attr(data-percent); font-family: var(--engFont); font-size: 3.9rem; font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#group .percent .circle svg{ width: auto; height: auto; transform: rotate(-95deg); }
#group .percent .circle svg circle{ stroke-linecap: round; stroke-dasharray: 1080px; stroke-dashoffset: 1073px; }
#group .percent .circle dl{ display: inline-block; text-align: center; margin-top: 30px; }
#group .percent .circle dl dt{ font-size: 2rem; font-weight: 700; margin-bottom: 10px; }
#group .percent .circle dl dd{ font-size: 1.8rem; font-weight: 400; }

#group .percent .bar{ width: calc(100% - 600px); }
#group .percent .bar *{ font-size: 1.8rem; }
#group .percent .bar > span{ display: block; font-weight: 500; text-align: right; }
#group .percent .bar ul li:not(:last-of-type){ margin-bottom: 30px; }
#group .percent .bar ul li p{ font-weight: 600; margin-bottom: 10px; }
#group .percent .bar ul li .box{ height: 45px; border-radius: 990px; overflow: hidden; position: relative; z-index: 10; transition-delay: inherit; }
#group .percent .bar ul li .box::before{ content: ""; width: 100%; height: 100%; background: linear-gradient(to top, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 1)); opacity: 0.2; border-radius: inherit; overflow: hidden; position: absolute; top: 0; left: 0; z-index: -1; }
#group .percent .bar ul li .box::after{ content: attr(data-percent); font-family: var(--engFont); font-weight: 600; line-height: 1; position: absolute; top: 50%; right: 20px; z-index: 10; transform: translateY(-50%); }
#group .percent .bar ul li .box div{ width: 0; height: 100%; background: var(--bg); border-radius: inherit; position: relative; transition: width 2s; transition-delay: inherit; }
#group .percent .bar ul li .box div::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); border-radius: inherit; opacity: 0.3; position: absolute; top: 0; left: 0; }

@media screen and (max-width: 1640px){
	#group .percent .inner{ padding: 100px 20px; }

	#group .percent .circle .svg::after{ font-size: 3rem; }
}

@media screen and (max-width: 1600px){
	#group .percent .inner{ padding: 70px 20px; }
	#group .percent .circle dl dt{ font-size: 1.9rem; }
	#group .percent .circle dl dd{ font-size: 1.7rem; }
}

@media screen and (max-width: 1400px){
	#group .percent .circle{ width: 500px; }
	#group .percent .circle .inline{ max-width: 400px; }
	#group .percent .circle svg{ width: 100%; }

	#group .percent .bar{ width: calc(100% - 500px); }
}

@media screen and (max-width: 1280px){
	#group .percent .inner{ padding: 40px 0; }

	#group .percent .circle .svg::after{ font-size: 2.6rem; }
	#group .percent .circle dl dt{ font-size: 1.8rem; }
	#group .percent .circle dl dd{ font-size: 1.6rem; }

	#group .percent .bar *{ font-size: 1.7rem; }
	#group .percent .bar ul li .box{ height: 40px; }
}

@media screen and (max-width: 1200px){
	#group .percent .flex-box{ flex-direction: column; align-items: center; }
	#group .percent .circle{ max-width: 300px; width: 100%; padding-right: 0; }

	#group .percent .bar *{ font-size: 1.6rem; }
	#group .percent .bar{ width: 100%; margin-top: 30px; }
	#group .percent .bar ul li .box{ height: 35px; }
}

@media screen and (max-width: 900px){
	#group .percent .circle .svg::after{ font-size: 2.2rem; }
}


/* 사업영역 (공통) */
#business{ overflow: hidden; }
#business .intro figure{ border-radius: 20px; overflow: hidden; }
#business .intro figure img{ width: 100%; }
#business .intro .flex-box, #business .intro .flex{ display: flex; }
#business .intro .flex-box{ margin-top: 50px; }
#business .intro .flex{ margin-top: 50px; padding-top: 30px; border-top: 1px solid #E9E9E9; }
#business .intro .title{ width: 265px; }
#business .intro .content{ width: calc(100% - 265px); }
#business .intro p{ font-size: 1.8rem; font-weight: 500; color: #666; line-height: 1.6; letter-spacing: -0.02em; }
#business .intro h6{ font-size: 2.6rem; font-weight: 600; color: #222; letter-spacing: -0.02em; }
#business .intro .content dl:not(:last-of-type){ margin-bottom: 30px; }
#business .intro dl dt{ font-size: 1.8rem; font-weight: 600; color: #333; letter-spacing: -0.02em; padding-left: 10px; position: relative; }
#business .intro dl dt::before{ content: ""; width: 2px; height: 8px; background: var(--mainColor); position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#business .intro dl dd{ font-size: 1.6rem; font-weight: 500; color: #666; letter-spacing: -0.02em; margin-top: 10px; }

#business .project .gray-bg{ background: #F9F9F9; border-radius: 30px; padding: 100px 0; }
#business .project .title-box{ display: flex; flex-wrap: wrap; align-items: center; gap: 10px 45px; }
#business .project .title-box span{ font-size: 2rem; font-weight: 600; color: #222; letter-spacing: -0.02em; }
#business .project ul{ display: flex; flex-wrap: wrap; gap: 50px 13px; margin-top: 60px; }
#business .project ul li{ width: calc((100% - 39px) / 4); display: flex; flex-direction: column; justify-content: space-between; }
#business .project ul li p{ font-size: 2rem; font-weight: 500; color: #222; margin-bottom: 15px; }
#business .project ul li figure{ width: 100%; position: relative; overflow: hidden; background: #fff; padding-bottom: 83.5%; border-radius: 5px; }
#business .project ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (max-width: 1640px){
	#business br{ display: none; }
}

@media screen and (max-width: 1600px){
	#business .intro h6{ font-size: 2.4rem; }

	#business .project .gray-bg{ padding: 70px 0; }
	#business .project .title-box span{ font-size: 1.9rem; }
	#business .project ul li p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1400px){
	#business .intro .title{ width: 230px; }
	#business .intro .content{ width: calc(100% - 230px); }
}

@media screen and (max-width: 1280px){
	#business .intro .flex-box{ margin-top: 30px; }
	#business .intro .flex{ margin-top: 30px; }
	#business .intro .title{ width: 200px; }
	#business .intro .content{ width: calc(100% - 200px); }
	#business .intro p{ font-size: 1.7rem; }
	#business .intro h6{ font-size: 2.2rem; }
	#business .intro dl dt{ font-size: 1.7rem; }

	#business .project .gray-bg{ padding: 40px 0; }
	#business .project .title-box span{ font-size: 1.8rem; }
	#business .project ul{ gap: 40px 13px; margin-top: 30px; }
	#business .project ul li{ width: calc((100% - 26px) / 3); }
	#business .project ul li p{ font-size: 1.7rem; margin-bottom: 10px; }
}

@media screen and (max-width: 1200px){
	#business .intro .flex-box, #business .intro .flex{ flex-direction: column; }
	#business .intro .title{ width: 100%; margin-bottom: 20px; }
	#business .intro .content{ width: 100%; }
}

@media screen and (max-width: 900px){
	#business .intro h6{ font-size: 2rem; }
	#business .intro dl dd{ font-size: 1.5rem; } 
	
	#business .project .title-box span{ font-size: 1.7rem; }
	#business .project ul li{ width: calc((100% - 13px) / 2); }
	#business .project ul li p{ font-size: 1.6rem; }
}

@media screen and (max-width: 500px){
	#business .project ul li{ width: 100%; }
}


/* 사업영역 - 연구소 */
#business.lab .project ul li figure{ padding-bottom: 113%; }


/* 홍보센터 - 수주정보 (리스트) */
#board.obtain .board_box colgroup col:nth-of-type(1){ width: 125px; }
#board.obtain .board_box colgroup col:nth-of-type(2){ width: 100%; }
#board.obtain .board_box colgroup col:nth-of-type(3){ width: 89%; }
#board.obtain .board_box colgroup col:nth-of-type(4){ width: 190px; }

@media screen and (max-width: 1280px){
	#board.obtain .board_box colgroup col:nth-of-type(1){ width: 100px; }
	#board.obtain .board_box colgroup col:nth-of-type(4){ width: 150px; }
}


/* 홍보센터 - 찾아오시는 길 */
#location.sub-content{ padding-bottom: 0; overflow: hidden; }
#location .info .flex-box{ display: flex; }
#location .info .flex-box > div{ width: 50%; }

#location .info .map-box{ height: 540px; }
#location .info .map-box .root_daum_roughmap_landing{ width: 100%; height: 100%; }
#location .info .map-box .root_daum_roughmap .wrap_map{ height: 100%; }
#location .info .map-box .root_daum_roughmap .map_border{ display: none; }

#location .info .list-box{ padding: 0 100px; display: flex; justify-content: center; align-items: center; }
#location .info .list-box ul li{ display: flex; align-items: center; }
#location .info .list-box ul li:not(:last-of-type){ margin-bottom: 35px; }
#location .info .list-box ul li .icon{ width: 100px; text-align: center; margin-right: 50px; }
#location .info .list-box dl dt{ font-size: 1.8rem; font-weight: 600; color: var(--mainColor); letter-spacing: -0.02em; margin-bottom: 10px; }
#location .info .list-box dl dd{ font-size: 2.6rem; font-weight: 600; color: #222; letter-spacing: -0.02em; }

#location .traffic{ background: #F9F9F9; border-radius: 30px 30px 0 0; }
#location .traffic .flex-box{ display: flex; flex-wrap: wrap; justify-content: space-between; }
#location .traffic .half{ width: calc((100% - 100px) / 2); }

#location .traffic .title{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px 30px; padding-bottom: 25px; }
#location .traffic .title h6{ font-size: 2.8rem; font-weight: 600; color: #000; }
#location .traffic .title span{ font-size: 1.8rem; font-weight: 500; color: #333; }

#location .traffic .content{ padding: 35px 0; border-top: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9; gap: 5px 20px; }
#location .traffic .content ul li{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px 30px; padding-left: 15px; position: relative; }
#location .traffic .content ul li:not(:last-of-type){ margin-bottom: 20px; }
#location .traffic .content ul li p{ font-size: 1.6rem; font-weight: 400; color: #333; position: relative; }
#location .traffic .content ul li p::before{ content: ""; width: 1px; height: 5px; background: var(--mainColor); opacity: 0.3; border-radius: 990px; position: absolute; top: calc(1.3em / 2); left: -10px; transform: translateY(-50%); }
#location .traffic .content ul li p strong{ font-weight: 600; }
#location .traffic .content ul li span{ font-size: 1.8rem; font-weight: 500; color: #333; }

@media screen and (max-width: 1600px){
	#location .info .list-box{ padding: 0 50px; }
	#location .info .list-box dl dt{ font-size: 1.7rem; }
	#location .info .list-box dl dd{ font-size: 2.4rem; }

	#location .traffic .title h6{ font-size: 2.6rem; }
	#location .traffic .title span{ font-size: 1.7rem; }

	#location .traffic .content ul li span{ font-size: 1.7rem; }
}

@media screen and (max-width: 1400px){
	#location .traffic .title{ padding-bottom: 15px; }
	/* #location .traffic .title{ padding-bottom: 5px; }
	#location .traffic .title span{ display: inline-block; width: 100%; text-align: right; } */

	#location .traffic .content ul li span{ display: inline-block; width: 100%; }
	#location .traffic .content ul li span::before{ content: ": "; }
}

@media screen and (max-width: 1280px){
	#location .info .map-box{ height: 450px; }

	#location .info .list-box ul li .icon{ margin-right: 10px; }
	#location .info .list-box dl dt{ font-size: 1.6rem; margin-bottom: 5px; }
	#location .info .list-box dl dd{ font-size: 2.2rem; }

	#location .traffic .half{ width: calc((100% - 50px) / 2); }
	#location .traffic .title h6{ font-size: 2.4rem; }
	#location .traffic .title span{ font-size: 1.6rem; }

	#location .traffic .content{ padding: 20px 0; }
	#location .traffic .content ul li p{ font-size: 1.5rem; }
	#location .traffic .content ul li span{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#location .info .flex-box{ flex-direction: column; }
	#location .info .flex-box > div{ width: 100%; }
	#location .info .list-box{ margin-top: 30px; display: block; padding: 0; }
	#location .info .list-box ul{ display: flex; flex-wrap: wrap; gap: 0 50px; }
	#location .info .list-box ul li{ width: calc((100% - 50px) / 2); }

	#location .traffic .half{ width: 100%; }
	#location .traffic .half:not(:last-of-type){ margin-bottom: 60px; }
}

@media screen and (max-width: 1000px){
	#location .info .map-box{ height: 400px; }
	#location .info .list-box ul li{ width: 100%; }
}

@media screen and (max-width: 900px){
	#location .info .list-box dl dd{ font-size: 2rem; }

	#location .traffic .title h6{ font-size: 2.2rem; }
	#location .traffic .title span{ font-size: 1.5rem; }
}


/* 인재채용 - 인재상 */
#recruit .sec-title{ margin-bottom: 40px; }

#recruit .motion .sticky-wrap{ height: 200vh; }
#recruit .motion .sticky{ position: sticky; top: calc(6.5vh + var(--headerH)); left: 0; }
#recruit .motion .bg-box{ height: 77vh; background: url("/img/sub/recruit/recruit_img.jpg") no-repeat center center / cover; position: relative; clip-path: polygon(50% 0%, 100% 0, 100% 100%, 0 100%, 0 0); transition: clip-path 1s; }
#recruit .motion .text{ position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); text-align: center; padding: 0 20px; }
#recruit .motion .text *{ color: #fff; letter-spacing: -0.02em; transition: opacity 0.8s, transform 0.8s; }
#recruit .motion .text h4{ font-family: var(--engFont); font-size: 8rem; font-weight: 800; margin-bottom: 65px; }
#recruit .motion .text p{ font-size: 2.6rem; font-weight: 400; }
#recruit .motion .text p br.mo{ display: none; }

#recruit .motion .text1 *{ opacity: 1; transform: translateY(0); transition-delay: 0.5s; }
#recruit .motion .text2 *{ opacity: 0; transform: translateY(100px); }

#recruit .motion.animate .bg-box{ clip-path: polygon(50% 0%, 100% 28%, 100% 100%, 0 100%, 0% 28%) }
#recruit .motion.animate .text1 *{ opacity: 0; transform: translateY(-100px); transition-delay: unset; }
#recruit .motion.animate .text2 *{ opacity: 1; transform: translateY(0); transition-delay: 0.3s; }

#recruit .value ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
#recruit .value ul li{ width: calc((100% - 48px) / 5); padding: 50px; box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.25); border-radius: 5px; }
#recruit .value ul li .icon{ width: 120px; height: 120px; display: flex; justify-content: center; align-items: center; margin: 0 auto; border-radius: 50%; box-shadow: 0px 0px 10px rgba(102, 102, 102, 0.25); }
#recruit .value ul li dl{ text-align: center; margin-top: 80px; }
#recruit .value ul li dl dt{ font-family: var(--engFont); font-size: 2.6rem; font-weight: 700; color: var(--mainColor); text-transform: uppercase; margin-bottom: 20px; }
#recruit .value ul li dl dd{ font-size: 1.8rem; font-weight: 500; color: #333; }

@media screen and (max-width: 1600px){
	#recruit .motion .text h4{ font-size: 6rem; margin-bottom: 45px; }
	#recruit .motion .text p{ font-size: 2.4rem; }

	#recruit .value ul li dl{ margin-top: 60px; }
	#recruit .value ul li dl dt{ font-size: 2.4rem; }
	#recruit .value ul li dl dd{ font-size: 1.7rem; }
}

@media screen and (max-width: 1400px){
	#recruit .value ul li{ padding: 40px; }
	#recruit .value ul li dl{ margin-top: 40px; }
	#recruit .value ul li{ width: calc((100% - 24px) / 3); }
} 

@media screen and (max-width: 1280px){
	#recruit .motion .text h4{ font-size: 4rem; margin-bottom: 25px; }
	#recruit .motion .text p{ font-size: 2.1rem; }

	#recruit .value ul li .icon{ width: 100px; height: 100px; } 
	#recruit .value ul li dl{ margin-top: 30px; }
	#recruit .value ul li dl dt{ font-size: 2.1rem; margin-bottom: 10px; }
	#recruit .value ul li dl dd{ font-size: 1.6rem; }
}

@media screen and (max-width: 900px){
	#recruit .motion .text h4{ font-size: 3rem; }
	#recruit .motion .text p{ font-size: 1.9rem; }
	#recruit .motion .text p br.mo{ display: block; }

	#recruit .value ul li dl dt{ font-size: 1.9rem; }
}

@media screen and (max-width: 800px){
	#recruit .value ul li{ width: calc((100% - 12px) / 2); padding: 40px 30px; }
}

@media screen and (max-width: 600px){
	#recruit .value ul li{ width: 100%; display: flex; justify-content: space-between; align-items: center; }
	#recruit .value ul li dl{ width: calc(100% - 150px); margin-top: 0; }
}


/* 인재채용 - 채용안내 / 근무환경 및 복리후생 */
#guide .tab-menu ul li{ width: calc(100% / 2); }

/* 인재채용 - 채용안내 */
#guide .guide ul{ display: flex; flex-wrap: wrap; gap: 110px 0; }
#guide .guide ul li{ width: 50%; display: flex; align-items: center; padding: 0 20px; gap: 0 130px; position: relative; border-right: 1px solid #D9D9D9; }
#guide .guide ul li:nth-of-type(even){ border-right: none; }
#guide .guide ul li::after{ content: ""; width: calc(100% - 40px); height: 1px; background: #D9D9D9; position: absolute; top: -55px; left: 20px; } 
#guide .guide ul li:nth-of-type(1)::after, #guide .guide ul li:nth-of-type(2)::after{ display: none; }
#guide .guide ul li .icon{ width: 170px; height: 170px; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.15); padding: 20px; }
#guide .guide .dl{ width: calc(100% - 300px); }
#guide .guide .dl dl{ display: flex; }
#guide .guide .dl dl:not(:last-of-type){ margin-bottom: 20px; }
#guide .guide .dl dl *{ font-size: 1.8rem; }
#guide .guide .dl dl dt{ width: 110px; font-weight: 700; color: var(--mainColor); }
#guide .guide .dl dl dd{ width: calc(100% - 110px); font-weight: 500; color: #222; }
#guide .guide .dl dl dd p:not(:last-of-type){ margin-bottom: 10px; }
#guide .guide .dl dl dd p.after span{ display: inline-block; padding-right: 15px; margin-right: 20px; position: relative; }
#guide .guide .dl dl dd p.after span::after{ content: ""; width: 2px; height: 10px; background: #666; opacity: 0.4; border-radius: 990px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#guide .guide .dl dl dd p.small span{ display: block; font-size: 1.6rem; font-weight: 400; }

@media screen and (max-width: 1640px){
	#guide .guide ul li{ gap: 0 80px; }
	#guide .guide .dl{ width: calc(100% - 250px); }
}

@media screen and (max-width: 1600px){
	#guide .guide ul li .icon{ width: 140px; height: 140px; }

	#guide .guide .dl{ width: calc(100% - 220px); }
	#guide .guide .dl dl *{ font-size: 1.7rem; }
	#guide .guide .dl dl dt{ width: 90px; }
	#guide .guide .dl dl dd{ width: calc(100% - 90px); }
}

@media screen and (max-width: 1400px){
	#guide .guide ul li{ gap: 0 40px; }
	#guide .guide .dl{ width: calc(100% - 180px); }
}

@media screen and (max-width: 1280px){
	#guide .guide ul{ gap: 70px 0; }
	#guide .guide ul li::after{ top: -35px; }

	#guide .guide .dl dl:not(:last-of-type){ margin-bottom: 15px; }
	#guide .guide .dl dl *{ font-size: 1.6rem; }
	#guide .guide .dl dl dd p:not(:last-of-type){ margin-bottom: 5px; }
	#guide .guide .dl dl dd p.small span{ font-size: 1.5rem; }
}

@media screen and (max-width: 1200px){
	#guide .guide ul li{ width: 100%; border-right: none; padding: 0; }
	#guide .guide ul li::after{ width: 100%; left: 0; }
	#guide .guide ul li:nth-of-type(2)::after{ display: block; }
}

@media screen and (max-width: 700px){
	#guide .guide ul li .icon{ width: 100px; height: 100px; }
	#guide .guide .dl{ width: calc(100% - 140px); }
	#guide .guide .dl dl{ flex-direction: column; }
	#guide .guide .dl dl:not(:last-of-type){ margin-bottom: 20px; }
	#guide .guide .dl dl dt, #guide .guide .dl dl dd{ width: 100%; }
	#guide .guide .dl dl dt{ margin-bottom: 5px; }
}


/* 인재채용 - 근무환경 및 복리후생 */
#guide .welfare ul{ display: flex; flex-wrap: wrap; gap: 50px; }
#guide .welfare ul li{ width: calc((100% - 50px) / 2); min-height: 430px; padding: 50px; padding-bottom: 130px; position: relative; z-index: 5; overflow: hidden; border-radius: 10px; box-shadow: 0px 0px 5px 0px rgba(102, 102, 102, 0.15); }
#guide .welfare ul li .bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; }
#guide .welfare ul li .bg::after{ content: attr(data-num); font-family: var(--engFont); font-size: 11.8rem; font-weight: 900; color: rgba(255, 255, 255, 0.2); letter-spacing: -0.04em; position: absolute; bottom: 10px; right: 30px; mix-blend-mode: overlay; }
#guide .welfare ul li .bg img{ width: 100%; height: 100%; object-fit: cover; }
#guide .welfare ul li .icon{ width: 140px; height: 140px; display: flex; justify-content: center; align-items: center; background: #fff; border-radius: 50%; box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.20); padding: 20px; }
#guide .welfare ul li .dl{ margin-top: 30px; }
#guide .welfare ul li .dl dl{ display: flex; gap: 40px; }
#guide .welfare ul li .dl dl *{ color: #222; }
#guide .welfare ul li .dl dl dt{ width: 140px; font-size: 2.6rem; font-weight: 700; text-align: center; }
#guide .welfare ul li .dl dl dd{ width: calc(100% - 180px); font-size: 1.8rem; font-weight: 500; }
#guide .welfare ul li .dl dl dd p:not(:last-of-type){ margin-bottom: 5px; }
#guide .welfare ul li .dl dl dd p span{ font-weight: 400; }

@media screen and (max-width: 1600px){
	#guide .welfare br{ display: none; }
	#guide .welfare ul li{ min-height: 380px; }
	#guide .welfare ul li .bg::after{ font-size: 9rem; }
	#guide .welfare ul li .icon{ width: 120px; height: 120px; }

	#guide .welfare ul li .dl dl dt{ width: 120px; font-size: 2.4rem; }
	#guide .welfare ul li .dl dl dd{ font-size: 1.7rem; }
}

@media screen and (max-width: 1400px){
	#guide .welfare ul li{ min-height: 350px; padding: 30px; padding-bottom: 100px; }
}

@media screen and (max-width: 1280px){
	#guide .welfare ul{ gap: 20px; }
	#guide .welfare ul li{ width: calc((100% - 20px) / 2); }
	#guide .welfare ul li .bg::after{ font-size: 7rem; }
	#guide .welfare ul li .dl{ margin-top: 20px; }
	#guide .welfare ul li .dl dl dt{ font-size: 2.2rem; }
	#guide .welfare ul li .dl dl dd{ font-size: 1.6rem; }
}

@media screen and (max-width: 1200px){
	#guide .welfare ul li{ min-height: auto; padding: 30px !important; }
	#guide .welfare ul li .dl{  padding-right: 140px; }
	#guide .welfare ul li .dl dl{ flex-direction: column; gap: 10px; }
	#guide .welfare ul li .dl dl dt{ width: 100%; text-align: left; }
	#guide .welfare ul li .dl dl dd{ width: 100%; }
}

@media screen and (max-width: 1000px){
	#guide .welfare ul li{ width: 100%; }
}

@media screen and (max-width: 900px){
	#guide .welfare ul li .bg::after{ font-size: 6rem; bottom: 0; right: 20px; }
	#guide .welfare ul li .icon{ width: 100px; height: 100px; }

	#guide .welfare ul li .dl{  padding-right: 115px; }
	#guide .welfare ul li .dl dl dt{ font-size: 2.2rem; }
}