/* header */
#header .logo img{ opacity: 0; }
#header .logo::after{ opacity: 1; }
#header::after{ background: var(--mainColor2); }
#header .bg{ background: var(--mainColor1); backdrop-filter: unset; }
#header .depth01 > li::after{ background: var(--mainColor2); }
#header .depth01 > li > a{ color: var(--mainColor2); }
#header .lang button{ color: var(--mainColor2); }
#header .lang button::before{ opacity: 0; }
#header .lang button::after{ opacity: 1; }
#header button.menu span{ background: var(--mainColor2); }
#header button.menu span::before, #header button.menu span::after{ background: var(--mainColor2); }

/* common */
body{ background: var(--mainColor1); }
body.hidden{ overflow: hidden; }
body.bg-color{ background: var(--darkBg); color: var(--mainColor1); }
#sub{ letter-spacing: -0.02em; }
.sub-content{ padding-top: 78px; padding-bottom: 180px; }
.sub-content section:first-of-type{ padding-top: 120px; }
.green-bg{ background: var(--mainColor2); color: var(--mainColor1); }

.radius-btn{ display: flex; justify-content: center; align-items: center; width: 250px; height: 50px; background: none; border: 1px solid var(--mainColor2); border-radius: 990px; font-family: var(--engFont); font-size: 2rem; font-weight: 400; color: var(--mainColor2); line-hegiht: 1; margin: 0 auto; position: relative; z-index: 5; overflow: hidden; transition: all 0.5s; }
.radius-btn::before{ content: ""; width: calc(100% + 2px); height: calc(100% + 2px); background: var(--mainColor2); border-radius: inherit; position: absolute; top: -1px; left: -1px; z-index: -1; transform: translateY(100%); transition: all 0.5s; }
.radius-btn:link, .radius-btn:visited{ color: var(--mainColor2); }

.radius-btn.reverse{ color: var(--mainColor1); border: 1px solid var(--mainColor1); }
.radius-btn.reverse::before{ background: var(--mainColor1); }
.radius-btn.reverse:link, body.bg-color .radius-btn.reverse:visited{ color: var(--mainColor1); }

/* 스크롤바 커스텀 */
.scroll-y{ overflow-y: scroll; }
.scroll-y::-webkit-scrollbar{ width: 25px; }
.scroll-y::-webkit-scrollbar-thumb{ background: #DDD; background-clip: padding-box; border: 10px solid transparent; border-radius: 100px; }
.scroll-y::-webkit-scrollbar-track{ background: #EEE; background-clip: padding-box; border: 10px; border: 10px solid transparent; border-radius: 100px; }

/* 간격 */
.pt180{ padding-top: 180px; }
.pb180{ padding-bottom: 180px; }
.pt120{ padding-top: 120px; }
.pb120{ padding-bottom: 120px; }
.pt80{ padding-top: 80px; }
.pb80{ padding-bottom: 80px; }
.mt80{ margin-top: 80px; }
.mb80{ margin-bottom: 80px; }
.mt40{ margin-top: 40px; }
.mb40{ margin-bottom: 40px; }

@media (hover: hover){
	.radius-btn:hover, .radius-btn:link:hover, .radius-btn:visited:hover{ color: var(--mainColor1); }
	.radius-btn:hover::before{ transform: translateY(0); }

	.radius-btn.reverse:hover, .radius-btn.reverse:link:hover, body.bg-color .radius-btn.reverse:visited:hover{ color: var(--mainColor2); }
}

/* title */
h2{ font-family: var(--engFont); font-size: 7.4rem; font-weight: 700; }
h3{ font-family: var(--engFont); font-size: 6.4rem; font-weight: 700; }
h4{ font-family: var(--engFont); font-size: 5.4rem; font-weight: 600; }

.sec-title span{ font-family: var(--engFont); font-size: 1.8rem; font-weight: 500; color: var(--mainColor2); }
.sec-title h3{ margin-top: 10px; }

.sec-wrap{ display: flex; align-items: flex-end; }
.sec-wrap .sec-title{ width: 540px; }
.sec-wrap .sec-title *{ letter-spacing: -0.04em; line-height: 1.2; }
.sec-wrap .sec-box{ width: calc(100% - 540px); }
.sec-wrap .sec-box h3{ margin-bottom: 15px; }
.sec-wrap .sec-box.indent h3{ margin-left: -10px; }
.sec-wrap .sec-box p{ font-size: 2.4rem; font-weight: 500; line-height: 1.45; }

.green-bg .sec-title span{ color: var(--mainColor1); }

/* hashtag */
.sec-wrap .sec-box ul{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; margin-bottom: 10px; }
.sec-wrap .sec-box ul li{ font-size: 1.7rem; font-weight: 400; color: var(--mainColor2); line-height: 1; padding: 10px 23px; border: 1px solid var(--mainColor2); border-radius: 990px; }

@media screen and (max-width: 1850px){
	.floating .w1560:not(.common){ padding-left: calc(150px - ((100vw - 1560px) / 2)); }
}

@media screen and (max-width: 1600px){
	/* common */
	.sub-content{ padding-bottom: 120px; }
	.sub-content section:first-of-type{ padding-top: 80px; }
	.floating .w1560:not(.common){ padding-left: 80px; }

	.radius-btn{ width: 220px; height: 45px; font-size: 1.8rem; }

	
	/* title */
	h2{ font-size: 6rem; }
	h3{ font-size: 5rem; }
	h4{ font-size: 4.5rem; }

	.sec-title span{ font-size: 1.7rem; }
	.sec-title h3{ margin-top: 5px; }
	.sec-wrap .sec-box h3{ margin-bottom: 20px; }
	.sec-wrap .sec-box p{ font-size: 2.2rem; }

	/* 간격 */
	.pt180{ padding-top: 120px; }
	.pb180{ padding-bottom: 120px; }
	.pt120{ padding-top: 80px; }
	.pb120{ padding-bottom: 80px; }
	.pt80{ padding-top: 50px; }
	.pb80{ padding-bottom: 50px; }
	.mt80{ margin-top: 50px; }
	.mb80{ margin-bottom: 50px; }
}

@media screen and (max-width: 1280px){
	/* common */
	.sub-content section:first-of-type{ padding-top: 50px; }

	.radius-btn{ width: 200px; height: 42px; font-size: 1.7rem; }

	/* title */
	h2{ font-size: 5rem; }
	h3{ font-size: 4rem; }
	h4{ font-size: 3.5rem; }

	.sec-title span{ font-size: 1.6rem; }
	.sec-wrap .sec-box h3{ margin-bottom: 10px; }
	.sec-wrap .sec-box.indent h3{ margin-left: -7px; }
	.sec-wrap .sec-box p{ font-size: 2rem; }

	/* hashtag */
	.sec-wrap .sec-box ul li{ font-size: 1.5rem; padding: 8px 15px; }

	/* 간격 */
	.pt180{ padding-top: 100px; }
	.pb180{ padding-bottom: 100px; }
	.pt80{ padding-top: 30px; }
	.pb80{ padding-bottom: 30px; }
	.mt80{ margin-top: 30px; }
	.mb80{ margin-bottom: 30px; }
	.mt40{ margin-top: 20px; }
	.mb40{ margin-bottom: 20px; }
}

@media screen and (max-width: 1200px){
	/* title */
	.sec-wrap{ flex-wrap: wrap; }
	.sec-wrap .sec-title, .sec-wrap .sec-box{ width: 100%; }
	.sec-wrap .sec-box{ margin-top: 20px; }

	/* hashtag */
	.sec-wrap .sec-box ul{ margin-bottom: 0; }
}

@media screen and (max-width: 1000px){
	.floating .w1560:not(.common){ padding-left: 20px; }
}

@media screen and (max-width: 900px){
	/* common */
	.radius-btn{ width: 180px; height: 40px; font-size: 1.6rem; }

	/* title */
	h2{ font-size: 4rem; }
	h3{ font-size: 3.5rem; }
	h4{ font-size: 3.2rem; }

	.sec-title span{ font-size: 1.5rem; }
	.sec-wrap .sec-box{ margin-top: 10px; }
	.sec-wrap .sec-box h3{ margin-bottom: 5px; }
	.sec-wrap .sec-box p{ font-size: 1.8rem; }
}


/* 
	WHAT WE DO
*/
#greeting{ overflow: hidden; }
#greeting .process{ padding-bottom: 300px; }
#greeting .process .center-box{ text-align: center; }
#greeting .process .center-box h4{ font-size: unset; height: max-content; } 
#greeting .process .center-box h4 img{ max-height: 100%; height: 4.5rem; margin-bottom: 10px; }
#greeting .process .center-box p{ font-size: 1.9rem; font-weight: 400; line-height: 1.6; color: var(--mainColor2); margin-top: 20px; }
#greeting .process .center-box p strong{ font-size: 2.4rem; font-weight: 600; line-height: 1.3; }

#greeting .sec-title h4{ font-weight: 700; }
#greeting .sec-title .text { margin-top: 20px; color:#040000; font-size: 1.9rem; font-weight:400; line-height:1.6; }
#greeting .sec-wrap .sec-box p{ font-size: 2.8rem; }

/* WHAT WE DO - step */
#greeting .process .step-box{ position: relative; }
#greeting .process .step-box .box{ position: relative; opacity: 1 !important; }
#greeting .process .step-box .box::before{ content: ""; width: 95px; height: 2px; background: var(--mainColor2); position: absolute; top: 11px; transform: scaleX(0); transition: all 0.5s; }
#greeting .process .step-box .box::after{ content: ""; width: 10px; height: 10px; background: var(--mainColor2); border-radius: 50%; position: absolute; top: 7px;  opacity: 0; transition: inherit; transition-delay: 0.5s; }
#greeting .process .step-box dl dt, #greeting .process .step-box .p-box, #greeting .process .step-box figure, #greeting .process .step-box .marker span{ transform: translateY(80px); opacity: 0; transition: all 1s; }
#greeting .process .step-box dl dt{ font-family: var(--engFont); font-size: 1.8rem; font-weight: 500; color: var(--mainColor2); transition-delay: 0.2s; }
#greeting .process .step-box dl dt strong{ display: block; font-size: 2.2rem; font-weight: 700; }
#greeting .process .step-box .p-box{ margin: 15px 0 25px; transition-delay: 0.4s; }
#greeting .process .step-box .p-box p{ font-size: 1.7rem; font-weight: 400; }
#greeting .process .step-box figure{ width: 300px; position: relative; overflow: hidden; padding-bottom: 200px; margin-bottom: 15px; transition-delay: 0.6s; }
#greeting .process .step-box figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#greeting .process .step-box .marker span{ display: inline-block; font-size: 1.7rem; font-weight: 600; color: var(--mainColor2); padding: 7px 15px; border: 2px solid var(--mainColor2); border-radius: 100px; transition-delay: 0.8s; }
#greeting .process .step-box .dot{ display: inline-block; width: 15px; height: 15px; background: var(--mainColor2); border-radius: 50%; position: relative; }

#greeting .process .step-box .side{ position: absolute; left: 50%; transform: translateX(-50%); text-align: center; }
#greeting .process .step-box .side.first{ top: 0; }
#greeting .process .step-box .side.scroll .dot::before{ content: ""; width: 100%; height: 100%; background: rgba(67, 86, 74, 0.4); animation: pulse 2s infinite; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transform-origin: center center; border-radius: 50%; opacity: 1; will-change: opacity; }
#greeting .process .step-box .side.last{ bottom: 8px; transform: translate(-50%, 100%); }
#greeting .process .step-box .side.last dl{ margin-top: 5px; }

@keyframes pulse{
	0%{ opacity: 0; }
	5% { width: 100%; height: 100%; opacity: 1; }
	95% { width: 500%; height: 500%; opacity: 0; }
	100%{ opacity: 0; }
}

#greeting .process .step-box ul{ position: relative; padding: 130px 0 40px; }
#greeting .process .step-box ul::after{ content: ""; width: 2px; height: 100%; background: var(--mainColor2); position: absolute; top: calc(50% + 1px); left: 50%; transform: translate(-50%, -50%); }
#greeting .process .step-box ul li{ position: relative; }
#greeting .process .step-box ul li:not(:last-of-type){ margin-bottom: -165px; }
#greeting .process .step-box ul li .dot{ position: absolute; top: 4px; opacity: 0; transition: inherit; }
/* #greeting .process .step-box ul li dl{ opacity: 0;  transition: all 1s; transition-delay: 0.5s; } */

#greeting .process .step-box ul li:nth-of-type(odd){ padding-left: 50%; }
#greeting .process .step-box ul li:nth-of-type(odd) .box{ padding-left: 130px; }
#greeting .process .step-box ul li:nth-of-type(odd) .box::before{ left: 0; transform-origin: left; }
#greeting .process .step-box ul li:nth-of-type(odd) .box::after{ left: 90px; }
#greeting .process .step-box ul li:nth-of-type(odd) .dot{ left: -7px; }
/* #greeting .process .step-box ul li:nth-of-type(odd) dl{ transform: translateX(-50px); } */

#greeting .process .step-box ul li:nth-of-type(even){ padding-right: 50%; text-align: right; }
#greeting .process .step-box ul li:nth-of-type(even) .box{ padding-right: 130px; }
#greeting .process .step-box ul li:nth-of-type(even) .box::before{ right: 0; transform-origin: right; }
#greeting .process .step-box ul li:nth-of-type(even) .box::after{ right: 90px; }
#greeting .process .step-box ul li:nth-of-type(even) .dot{ right: -7px; }
/* #greeting .process .step-box ul li:nth-of-type(even) dl{ transform: translateX(50px); } */

#greeting .process .step-box .box.aos-animate .dot{ opacity: 1; }
#greeting .process .step-box .box.aos-animate::before{ transform: scaleX(1); }
#greeting .process .step-box .box.aos-animate::after{ opacity: 1; }
#greeting .process .step-box .box.aos-animate dl dt, #greeting .process .step-box .box.aos-animate .p-box, #greeting .process .step-box .box.aos-animate figure, #greeting .process .step-box .box.aos-animate .marker span{ transform: translateY(0); opacity: 1; }
/* #greeting .process .step-box .box.aos-animate dl{ transform: translateX(0); opacity: 1; } */

#greeting .imgbox { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 100px; }
#greeting .imgbox > div { width: calc((100% - 20px) / 2); }
#greeting .imgbox figure img { max-width: 100%; }


/* WHAT WE DO - value */
#greeting .value .circle-wrap ul{ /* max-width: 1460px; */ max-width: 1560px; display: flex; flex-wrap: wrap; gap: 80px; }
#greeting .value .circle-wrap ul li{ width: calc((100% - 320px) / 5); padding-bottom: calc((100% - 320px) / 5); position: relative; }
#greeting .value .circle-wrap ul li::before{ content: ""; width: 100%; height: 100%; border: 1px solid var(--mainColor2); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#greeting .value .circle-wrap ul li span{ font-family: var(--engFont); font-size: 2.1rem; font-weight: 500; color: var(--mainColor2); position: absolute; top: 0; left: 0; }
#greeting .value .circle-wrap ul li dl{ width: 100%; height: 100%; text-align: center; padding: 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#greeting .value .circle-wrap ul li dl dt{ display: flex; justify-content: center; align-items: flex-end; height: 38%; font-family: var(--engFont); font-size: 2.1rem; font-weight: 600; color: var(--mainColor2); padding-bottom: 10px; border-bottom: 2px solid var(--mainColor2); }
#greeting .value .circle-wrap ul li dl dd{ display: flex; justify-content: center; align-items: center; height: 62%; font-size: 1.7rem; font-weight: 400; line-height: 1.55; }

/* WHAT WE DO - area */
#greeting .area{ opacity: 1 !important; }
#greeting .area .line:not(:last-of-type){ margin-bottom: 40px; }
#greeting .area .flex-box{ display: flex; flex-wrap: wrap; gap: 60px; }
#greeting .area .flex-box > div{ width: calc((100% - 120px) / 3); }
#greeting .area .flex-box > div.wide{ width: calc(((100% - 120px) / 3) * 2 + 60px); }
#greeting .area h6{ font-family: var(--engFont); font-size: 2.6rem; font-weight: 500; margin-bottom: 20px; }
#greeting .area ul{ min-height: 100%; padding: 15px 0; border-top: 1px solid rgba(225, 216, 207, 0.3); border-bottom: 1px solid rgba(225, 216, 207, 0.3); position: relative; }
#greeting .area ul::before, #greeting .area ul::after{ content: ""; width: 100%; height: 1px; background: var(--mainColor1); position: absolute; left: 0; transform: scaleX(0); transform-origin: left; transition: all 0.8s; }
#greeting .area ul::before{ top: 0; }
#greeting .area ul::after{ bottom: 0; }
#greeting .area ul li{ display: flex; justify-content: space-between; font-family: var(--engFont); font-size: 1.8rem; }
#greeting .area ul li *{ opacity: 0.5; transition: all 0.8s; }
#greeting .area ul li:not(:last-of-type){ margin-bottom: 5px; }
#greeting .area ul li p{ font-weight: 300; margin-right: 10px; }
#greeting .area ul li span{ display: inline-block; font-weight: 200; text-align: right; }

#greeting .area ul.third li *{ width: calc((100% - 20px) / 3); }
#greeting .area ul.third li *:nth-child(2){ text-align: center; }

#greeting .area.aos-animate ul::before, #greeting .area.aos-animate ul::after{ transform: scaleX(1); }
#greeting .area.aos-animate ul li *{ opacity: 1; }

/* WHAT WE DO - strategy */
#greeting #strategy .circle-box{ text-align: center; }
#greeting #strategy .circle{ max-width: 520px; width: 100%; height: 520px; margin: 0 auto; display: flex; justify-content: center; align-items: center; position: relative; }
#greeting #strategy .circle::before{ content: ""; width: 100%; height: 100%; border: 1px solid var(--mainColor2); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#greeting #strategy .circle .grid{ border-radius: 50%; display: flex; justify-content: center; align-items: center; }
#greeting #strategy .circle .grid .text span, #greeting #strategy .circle .grid .text strong{ display: block; line-height: 1; }
#greeting #strategy .circle .grid .text strong{ font-family: var(--engFont); font-size: 2rem; font-weight: 600; }
#greeting #strategy .circle .grid .text span{ font-size: 1.7rem; font-weight: 500; margin-top: 15px; }

#greeting #strategy .circle .grid-box{ width: 100%; height: 100%; display: grid; grid-template-columns: 150px 220px 150px; grid-template-rows: 150px 220px 150px; }
#greeting #strategy .circle .grid-box .grid{ width: 150px; height: 150px; border: 1px solid var(--mainColor2); margin: auto; color: var(--mainColor2); }
#greeting #strategy .circle .grid-box .grid1{ grid-area: 3/2; }
#greeting #strategy .circle .grid-box .grid2{ grid-area: 2/3; }
#greeting #strategy .circle .grid-box .grid3{ grid-area: 1/2; }
#greeting #strategy .circle .grid-box .grid4{ grid-area: 2; }

#greeting #strategy .circle .center{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; }
#greeting #strategy .circle .center .grid{ width: 220px; height: 220px; background: var(--mainColor2); }
#greeting #strategy .circle .center p{ font-size: 1.6rem; font-weight: 400; line-height: 1.55; color: var(--mainColor1); margin-top: 25px; }

#greeting #strategy .txt-wrap{ margin: 40px 0; color: var(--mainColor2); }
#greeting #strategy .txt{ outline: none; }
#greeting #strategy .txt ul{ max-width: max-content; width: 100%; margin: 0 auto; }
#greeting #strategy .txt ul li{ font-size: 1.7rem; font-weight: 500; }
#greeting #strategy .txt ul li:not(:last-of-type){ margin-bottom: 5px; }
#greeting #strategy .txt h6{ font-size: 2rem; font-weight: 700; text-align: center; margin-top: 10px; }
#greeting #strategy .txt h6 span{ display: inline-block; font-size: 1rem; vertical-align: middle; position: relative; top: -1px; padding-right: 3px; }

#greeting #network figure{ border: 1px solid #CAC2BF; }

/* WHAT WE DO - client */
#greeting #client h4{ margin-bottom: 10px; }
#greeting #client p{ font-size: 1.8rem; font-weight: 300; line-height: 1.7; }
#greeting #client ul{ display: flex; flex-wrap: wrap; margin-top: 40px; }
#greeting #client ul li{ width: calc(100% / 5); height: 60px; padding: 10px; }
#greeting #client ul li figure{ width: 100%; height: 100%; display: flex; /* justify-content: center; */ align-items: center; margin: 0 auto; }
#greeting #client ul li img{ max-height: 100%; }

/* WHAT WE DO - awards */
#greeting #awards h2{ font-weight: 600; color: var(--mainColor2); margin-bottom: 20px; }
#greeting #awards ul{ display: flex; flex-wrap: wrap; gap: 0 20px; }
#greeting #awards ul li{ width: calc((100% - 80px) / 5); }
#greeting #awards dl{ text-align: center; }
#greeting #awards dl dt{ font-size: 1.7rem; font-weight: 700; color: var(--mainColor2); padding: 10px 0; border-top: 1px solid var(--mainColor2); border-bottom: 1px solid var(--mainColor2); }
#greeting #awards dl dd{ height: 155px; display: flex; justify-content: center; align-items: center; /* border-bottom: 1px solid var(--mainColor2); */ }
#greeting #awards dl dd figure img{ max-height: 100%; mix-blend-mode: luminosity; }

@media screen and (max-width: 1600px){
	#greeting .process{ padding-bottom: 200px; }
	#greeting .process .center-box h4 img{ height: 4rem; }
	#greeting .process .center-box p strong{ font-size: 2.2rem; }

	#greeting .sec-wrap .sec-box p{ font-size: 2.4rem; }

	/* WHAT WE DO - step */
	#greeting .process .step-box dl dt strong{ font-size: 2rem; }
	#greeting .process .step-box .marker span{ font-size: 1.6rem; padding: 6px 12px 4px; }

	/* WHAT WE DO - value */
	#greeting .value .circle-wrap ul li span{ font-size: 1.8rem; }
	#greeting .value .circle-wrap ul li dl dt{ font-size: 1.8rem; }
	#greeting .value .circle-wrap ul li dl dd{ font-size: 1.6rem; }

	/* WHAT WE DO - area */
	#greeting .area h6{ font-size: 2.3rem; margin-bottom: 10px; }
	#greeting .area ul li{ font-size: 1.7rem; }

	/* WHAT WE DO - awards */
	#greeting #awards dl dt{ font-size: 1.6rem; }
}

@media screen and (max-width: 1440px){
	/* WHAT WE DO - value */
	#greeting .value .circle-wrap ul{ gap: 40px; }
	#greeting .value .circle-wrap ul li{ width: calc((100% - 160px) / 5); padding-bottom: calc((100% - 160px) / 5); }
	#greeting .value .circle-wrap ul li dl{ padding: 20px; }

	/* WHAT WE DO - client */
	#greeting #client ul li{ width: calc(100% / 4); }
}

@media screen and (max-width: 1280px){
	#greeting .process{ padding-bottom: 150px; }
	#greeting .process .center-box h4 img{ height: 3.5rem; margin-bottom: 5px; }
	#greeting .process .center-box p{ font-size: 1.8rem; }
	#greeting .process .center-box p strong{ font-size: 2rem; }

	#greeting .sec-wrap .sec-box p{ font-size: 2rem; }

	#greeting .sec-title .text { font-size: 1.7rem; }

	/* WHAT WE DO - step */
	#greeting .process .step-box ul li:not(:last-of-type){ margin-bottom: -130px; }
	#greeting .process .step-box dl dt{ font-size: 1.6rem; }
	#greeting .process .step-box dl dt strong{ font-size: 1.9rem; }
	#greeting .process .step-box .p-box{ margin: 10px 0 15px; }
	#greeting .process .step-box .p-box p{ font-size: 1.6rem; }
	#greeting .process .step-box figure{ margin-bottom: 10px; }
	#greeting .process .step-box .marker span{ font-size: 1.5rem; }

	/* WHAT WE DO - value */
	#greeting .value .circle-wrap ul{ gap: 80px; }
	#greeting .value .circle-wrap ul li{ width: calc((100% - 160px) / 3); padding-bottom: calc((100% - 160px) / 3); }
	#greeting .value .circle-wrap ul li span{ font-size: 1.7rem; }
	#greeting .value .circle-wrap ul li dl dt{ height: 35%; font-size: 1.7rem; }
	#greeting .value .circle-wrap ul li dl dd{ height: 65%; font-size: 1.6rem; }

	/* WHAT WE DO - area */
	#greeting .area .flex-box{ gap: 15px 30px; }
	#greeting .area .flex-box > div{ width: calc((100% - 60px) / 3); }
	#greeting .area .flex-box > div.wide{ width: calc(((100% - 60px) / 3) * 2 + 30px); }

	#greeting .area h6{ font-size: 2.1rem; }
	#greeting .area ul li{ font-size: 1.6rem; }

	/* WHAT WE DO - client */
	#greeting #client p{ font-size: 1.7rem; }

	/* WHAT WE DO - awards */
	#greeting #awards ul li{ width: calc((100% - 60px) / 4); }
	#greeting #awards ul li dl dd{ height: 135px; }
	/* #greeting #awards dl dd figure img{ transform: scale(0.9); } */
}

@media screen and (max-width: 1240px){
	/* WHAT WE DO - area */
	#greeting .area .flex-box > div{ width: calc((100% - 30px) / 2); }
	#greeting .area .flex-box > div.wide{ width: 100%; }
	#greeting .area .flex-box > div.wide{ width: calc((100% - 30px) / 2); }
	#greeting .area .flex-box .tit{ margin-bottom: -5px; }
	#greeting .area .flex-box h6{ margin-bottom: 0; }
}

@media screen and (max-width: 1200px){
	/* WHAT WE DO - client */
	#greeting #client ul li{ width: calc(100% / 3); }
	#greeting #client ul li figure{ transform: scale(0.9); }
}

@media screen and (max-width: 1000px){
	/* WHAT WE DO - awards */
	#greeting #awards ul li{ width: calc((100% - 40px) / 3); }
	#greeting #awards dl dt{ font-size: 1.5rem; padding: 7px 0; }
	#greeting #awards ul li dl dd{ height: 125px; }
}

@media screen and (max-width: 950px){
	/* WHAT WE DO - area */
	#greeting .sec-title .text { font-size: 1.6rem; }
	#greeting .area .flex-box > div{ width: 100%; }
	#greeting .area .flex-box > div.wide{ width: 100%; }
	#greeting .imgbox > div { width: 100%; }
}

@media screen and (max-width: 920px){
	/* WHAT WE DO - step */
	#greeting .process .step-box figure{ max-width: 300px; width: 100%; padding-bottom: 66%; }
	#greeting .process .step-box .box::before{ width: 50px; }
	#greeting .process .step-box .box::after{ width: 7px; height: 7px; top: 9px; }
	#greeting .process .step-box .dot{ width: 10px; height: 10px; }
	#greeting .process .step-box .side.last{ bottom: 5px; }

	#greeting .process .step-box ul{ padding: 80px 0 40px; }
	#greeting .process .step-box ul li .dot{ top: 7px; }

	#greeting .process .step-box ul li:nth-of-type(odd) .box{ padding-left: 70px; }
	#greeting .process .step-box ul li:nth-of-type(odd) .box::after{ left: 45px; }
	#greeting .process .step-box ul li:nth-of-type(odd) .dot{ left: -5px; }

	#greeting .process .step-box ul li:nth-of-type(even) .box{ padding-right: 70px; }
	#greeting .process .step-box ul li:nth-of-type(even) .box::after{ right: 45px; }
	#greeting .process .step-box ul li:nth-of-type(even) .dot{ right: -5px; }
}

@media screen and (max-width: 900px){
	#greeting .process{ padding-bottom: 120px; }
	#greeting .process .center-box h4 img{ height: 3rem; }
	#greeting .process .center-box p{ font-size: 1.6rem; margin-top: 10px; }
	#greeting .process .center-box p strong{ font-size: 1.8rem; }

	#greeting .sec-wrap .sec-box p{ font-size: 1.8rem; }

	/* WHAT WE DO - step */
	#greeting .process .step-box dl dt{ font-size: 1.5rem; }
	#greeting .process .step-box dl dt strong{ font-size: 1.8rem; }

	/* WHAT WE DO - value */
	#greeting .value .circle-wrap ul{ gap: 40px; }
	#greeting .value .circle-wrap ul li{ width: calc((100% - 80px) / 3); padding-bottom: calc((100% - 80px) / 3); }
	#greeting .value .circle-wrap ul li span{ font-size: 1.6rem; }
	#greeting .value .circle-wrap ul li dl dt{ font-size: 1.6rem; }
	#greeting .value .circle-wrap ul li dl dd{ font-size: 1.5rem; }

	/* WHAT WE DO - area */
	#greeting .area h6{ font-size: 2rem; }
	#greeting .area ul li{ font-size: 1.5rem; }

	/* WHAT WE DO - strategy */
	#greeting #strategy .circle{ max-width: 100%; width: 85vw; height: 85vw; }
	#greeting #strategy .circle .grid .text strong{ font-size: 1.6rem; }
	#greeting #strategy .circle .grid .text span{ font-size: 1.6rem; margin-top: 10px; }

	#greeting #strategy .circle .grid-box{ grid-template-columns: 25vw 35vw 25vw; grid-template-rows: 25vw 35vw 25vw; }
	#greeting #strategy .circle .grid-box .grid{ width: 25vw; height: 25vw; }
	#greeting #strategy .circle .center .grid{ width: 35vw; height: 35vw; }
	#greeting #strategy .circle .center p{ font-size: 1.5rem; margin-top: 15px; }

	#greeting #strategy .txt ul li{ font-size: 1.6rem; }
	#greeting #strategy .txt h6{ font-size: 1.8rem; }

	/* WHAT WE DO - clean */
	#greeting .clean .pb120{ padding-bottom: 30px; }

	/* WHAT WE DO - client */
	#greeting #client p{ font-size: 1.6rem; }
}

@media screen and (max-width: 800px){
	/* WHAT WE DO - client */
	#greeting #client ul li{ width: calc(100% / 2); height: 55px; }
	#greeting #client ul li figure{ transform: scale(0.8); }
}

@media screen and (max-width: 750px){
	/* WHAT WE DO - value */
	#greeting .value .circle-wrap ul{ gap: 80px; }
	#greeting .value .circle-wrap ul li{ width: calc((100% - 80px) / 2); padding-bottom: calc((100% - 80px) / 2); }

	/* WHAT WE DO - awards */
	#greeting #awards ul li{ width: calc((100% - 20px) / 2); }
	#greeting #awards ul li dl dd{ height: 110px; }
	/* #greeting #awards dl dd figure img{ transform: scale(0.8); } */
}

@media screen and (max-width: 700px){
	/* WHAT WE DO - step */
	#greeting .process .step-box{ max-width: max-content; margin: 0 auto; }
	#greeting .process .step-box figure{ width: 300px; padding-bottom: 200px; }

	#greeting .process .step-box .side.first, #greeting .process .step-box .side.last{ left: -5px; transform: translateX(0); }
	#greeting .process .step-box .side.last{ text-align: left; display: flex; align-items: center; bottom: -12px; }
	#greeting .process .step-box .side.last dl{ margin-top: 0;margin-left: 20px; }

	#greeting .process .step-box ul{ max-width: max-content; padding: 80px 0; }
	#greeting .process .step-box ul::after{ top: 1px; left: -1px; transform: translate(0, 0); }
	#greeting .process .step-box ul li:not(:last-of-type){ margin-bottom: 80px; }
	#greeting .process .step-box ul li:nth-of-type(odd), #greeting .process .step-box ul li:nth-of-type(even){ padding: 0; }

	#greeting .process .step-box ul li:nth-of-type(even){ text-align: left; }
	#greeting .process .step-box ul li:nth-of-type(even) .box{ padding-left: 70px; padding-right: 0; }
	#greeting .process .step-box ul li:nth-of-type(even) .box::before{ right: 100%; transform: translateX(100%) scaleX(0); transform-origin: left; }
	#greeting .process .step-box ul li:nth-of-type(even) .box::after{ right: calc(100% - 45px); transform: translateX(100%); }
	#greeting .process .step-box ul li:nth-of-type(even) .dot{ right: calc(100% + 5px); transform: translateX(100%); }

	#greeting .process .step-box ul li:nth-of-type(even) .box.aos-animate::before{ transform: translateX(100%) scaleX(1); }
}

@media screen and (max-width: 560px){
	#greeting .process .center-box br{ display: none; }

	/* WHAT WE DO - value */
	#greeting .value .circle-wrap ul{ gap: 40px; }
	#greeting .value .circle-wrap ul li{ width: calc((100% - 40px) / 2); padding-bottom: calc((100% - 40px) / 2); }
}


/* 
	ESG
*/
#esg .dl-box{ border-top: 1px solid var(--mainColor2); }
#esg .dl-box dl{ display: flex; align-items: center; color: var(--mainColor2); padding: 30px 0; border-bottom: 1px solid var(--mainColor2); }
#esg .dl-box dl dt{ width: 540px; font-family: var(--engFont); font-size: 5.4rem; font-weight: 700; }
#esg .dl-box dl dd{ width: calc(100% - 540px); font-size: 1.9rem; font-weight: 400; line-height: 1.55; }

#esg .esg .figure-box{ display: flex; align-items: center; }
#esg .esg .figure{ position: relative; text-align: center; }
#esg .esg .figure:not(:last-of-type){ margin-right: 250px; }
#esg .esg .figure::after{ content: url("/img/sub/company/esg_arrow01.svg"); position: absolute; top: 50%; right: -80px; transform: translate(100%, -50%); }
#esg .esg .figure:last-of-type::after{ display: none; }

#esg .vision .confirm{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px; }
#esg .vision .confirm p{ font-size: 1.9rem; font-weight: 500; color: var(--mainColor2); }
#esg .vision .confirm button{ font-family: var(--engFont); font-size: 1.9rem; font-weight: 600; color: var(--mainColor2); background: none; border: none; border-bottom: 1px solid var(--mainColor2); padding: 0 0 5px; }

@media screen and (max-width: 1600px){
	#esg .dl-box dl dt{ font-size: 4.5rem; }
	#esg .dl-box dl dd{ font-size: 1.8rem; }

	#esg .vision .confirm p{ font-size: 1.8rem; }
	#esg .vision .confirm button{ font-size: 1.8rem; }
}

@media screen and (max-width: 1500px){
	#esg br{ display: none; }
}

@media screen and (max-width: 1280px){
	#esg .dl-box dl{ padding: 20px 0; }
	#esg .dl-box dl dt{ font-size: 3.5rem; }
	#esg .dl-box dl dd{ font-size: 1.7rem; }

	#esg .vision .confirm p{ font-size: 1.7rem; }
	#esg .vision .confirm button{ font-size: 1.7rem; }
}

@media screen and (max-width: 1200px){
	#esg .dl-box dl{ flex-direction: column; }
	#esg .dl-box dl dt{ width: 100%; }
	#esg .dl-box dl dd{ width: 100%; margin-top: 5px; }
}

@media screen and (max-width: 1200px){
	#esg .esg .figure{ width: calc((100% - 200px) / 2); }
	#esg .esg .figure:not(:last-of-type){ margin-right: 200px; }
	#esg .esg .figure::after{ right: -150px; transform: translateY(-50%) scale(0.8); }
}

@media screen and (max-width: 900px){
	#esg .esg .figure-box{ flex-direction: column; }
	#esg .esg .figure{ max-width: 400px; width: 100%; }
	#esg .esg .figure:not(:last-of-type){ margin-right: 0; margin-bottom: 120px; }
	#esg .esg .figure::after{ top: calc(100% + 25px); right: 50%; transform: translateX(50%) rotate(90deg) scale(0.6); }

	#esg .dl-box dl{ padding: 15px 0; }
	#esg .dl-box dl dt{ font-size: 2.7rem; }
	#esg .dl-box dl dd{ font-size: 1.6rem; }

	#esg .vision .confirm p{ font-size: 1.6rem; }
	#esg .vision .confirm button{ font-size: 1.6rem; }
}


/* 상세 페이지 - 공통 */
#detail .top .title-box > span{ font-family: var(--engFont); font-size: 2rem; font-weight: 500; }
#detail .top .title-box p{ font-size: 2.1rem; font-weight: 500; line-height: 1.55; }
#detail .top .border{ margin-top: 10px; padding: 40px 0 15px; }
#detail .top .main{ max-width: 1920px; width: 100%; margin: 0 auto; }

#detail .detail{ font-size: 1.7rem; font-weight: 300; }
#detail .detail .content-box{ line-height: 1.7; }

@media screen and (max-width: 1600px){
	#detail .top .title-box > span{ font-size: 1.8rem; }
	#detail .top .title-box p{ font-size: 1.9rem; }	
}

@media screen and (max-width: 1280px){
	#detail .top.pb120{ padding-bottom: 50px; }
	#detail .top .title-box > span{ font-size: 1.6rem; }
	#detail .top .title-box p{ font-size: 1.8rem; }	
	#detail .top .border{ padding: 20px 0 15px; }
}

@media screen and (max-width: 900px){
	#detail .top .title-box > span{ font-size: 1.5rem; }
	#detail .top .title-box p{ font-size: 1.7rem; }	
	#detail .top .border{ padding: 15px 0; margin-top: 5px; }
}


/* 상세 페이지 - PRODUCTS */
#detail.product .top .title-box > span{ color: var(--mainColor2); }
#detail.product .top .title-box h2{ font-weight: 500; color: var(--mainColor2); margin-bottom: 10px; }
#detail.product .top .title-box p{ color: var(--mainColor2); }
#detail.product .top .border{ border-top: 1px solid var(--mainColor2); }

#detail.product .detail .dl-box dl{ margin-bottom: 40px; }
#detail.product .detail .dl-box dl dt{ font-size: 3.8rem; font-weight: 700; margin-bottom: 15px; }
#detail.product .detail .dl-box dl dd{ font-size: 2rem; font-weight: 500; }

#detail.product .icon{ display: flex; flex-wrap: wrap; gap: 30px 60px; margin-top: 60px; }
#detail.product .icon p{ margin-bottom: 15px; }
#detail.product .icon ul{ display: flex; flex-wrap: wrap; gap: 20px; }
#detail.product .icon ul li{ max-width: 100px; }

#detail.product .image ul{ display: flex; flex-wrap: wrap; gap: 30px; }
#detail.product .image ul li{ width: calc((100% - 60px) / 3); }
#detail.product .image ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 61%; margin-bottom: -6px; }
#detail.product .image ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

@media screen and (max-width: 1600px){
	#detail.product .detail .dl-box dl dt{ font-size: 3rem; margin-bottom: 10px; }
	#detail.product .detail .dl-box dl dd{ font-size: 1.8rem; }
}

@media screen and (max-width: 1280px){
	#detail.product .detail .dl-box dl dt{ font-size: 2.4rem; }
	#detail.product .detail .dl-box dl dd{ font-size: 1.7rem; }

	#detail.product .icon{ margin-top: 50px; }
	#detail.product .icon p{ margin-bottom: 10px; }

	#detail.product .image.pt120{ padding-top: 60px; }
	#detail.product .image ul{ gap: 20px; }
	#detail.product .image ul li{ width: calc((100% - 40px) / 3); }
}

@media screen and (max-width: 900px){
	#detail.product .top .title-box h2{ margin-bottom: 5px; }
	#detail.product .image ul li{ width: calc((100% - 20px) / 2); }
}

@media screen and (max-width: 700px){
	#detail.product .icon{ flex-direction: column; }
}

@media screen and (max-width: 600px){
	#detail.product .image ul{ gap: 10px; }
	#detail.product .image ul li{ width: calc((100% - 10px) / 2); }
}


/* 상세 페이지 - PORTFOLIO */
#detail.portfolio .top .title-box h4{ font-size: 4.2; font-weight: 500; }
#detail.portfolio .top .border{ border-top: 1px solid var(--mainColor1); }
#detail.portfolio .top .main{ max-width: 3000px; position: relative; }
#detail.portfolio .top .main::before, #detail.portfolio .top .main::after{ content: ""; width: calc((100% - 1560px) / 2); height: calc(100% + 10px); background: var(--darkBg); position: absolute; top: -5px; z-index: 30; transform: scaleX(1); transition: transform 1s;  }
#detail.portfolio .top .main::before{ left: 0; transform-origin: left; }
#detail.portfolio .top .main::after{ right: 0; transform-origin: right; }

/* 메인 이미지 사이즈 조정 */
#detail.portfolio .top .main figure{ width: 100%; /* position: relative; overflow: hidden; padding-bottom: 35%; */ }
#detail.portfolio .top .main figure img{ width: 100%;/*  height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); */ }

#detail.portfolio .top .main.scroll::before, #detail.portfolio .top .main.scroll::after{ transform: scaleX(0); }

#detail.portfolio .detail .flex-box{ display: flex; align-items: flex-start; gap: 40px 50px; padding-bottom: 100px; }
#detail.portfolio .detail .content-box{ width: 400px; font-weight: 200; line-height: 1.4; letter-spacing: -0.03em; }
#detail.portfolio .detail .text-box{ display: flex; flex-direction: column; gap: 30px; margin-bottom: 30px; }
#detail.portfolio .detail .text-box h6{ font-size: 2.8rem; font-weight: 500; line-height: 1.35; }
#detail.portfolio .detail .text-box dl dt{ font-family: var(--engFont); font-size: 2rem; font-weight: 700; /* margin-bottom: 10px; */ }
#detail.portfolio .detail .text-box dl dd{ font-weight: 200; line-height: 1.55; }

#detail.portfolio .detail .content-box + img{ width: calc(100% - 450px); }

#detail.portfolio .detail .gallery:not(:last-of-type){ margin-bottom: 30px; }

@media screen and (max-width: 1600px){
	#detail.portfolio .top .title-box h4{ font-size: 3.5rem; }
	#detail.portfolio .top .main::before, #detail.portfolio .top .main::after{ width: 20px; }

	#detail.portfolio .detail .text-box h6{ font-size: 2.4rem; }
	#detail.portfolio .detail .text-box dl dt{ font-size: 1.8rem; margin-bottom: 5px; }
}

@media screen and (max-width: 1280px){
	#detail.portfolio .top .title-box h4{ font-size: 3rem; }

	#detail.portfolio .detail .text-box h6{ font-size: 2.2rem; }
	#detail.portfolio .detail .text-box{ gap: 20px; margin-bottom: 20px; }
}

@media screen and (max-width: 1200px){
	#detail.portfolio .detail .pb120{ padding-bottom: 40px; }
	#detail.portfolio .detail .flex-box{ flex-direction: column; align-items: flex-start; padding-bottom: 30px; }  
	#detail.portfolio .detail .content-box{ width: 100%; }
	#detail.portfolio .detail .content-box + img{ width: 100%; }
}

@media screen and (max-width: 900px){
	#detail.portfolio .top .title-box h4{ font-size: 2.8rem; }
}


/* 
	PRODUCTS
*/
/* 리스트 */
#product .strategy .flex-box{ display: flex; }
#product .strategy .title-box{ width: 400px; }
#product .strategy .list-box{ width: calc(100% - 400px); }
#product .strategy .list-box *{ font-family: var(--engFont); }
#product .strategy .list-box > ul{ border-top: 1px solid var(--mainColor1); }
#product .strategy .list-box .depth{ display: flex; justify-content: space-between; gap: 0 30px; border-bottom: 1px solid var(--mainColor1); position: relative; }
#product .strategy .list-box .depth > *:not(a){ width: calc((100% - 30px) / 2); }
#product .strategy .list-box .depth h5{ font-size: 3.2rem; font-weight: 400; }
#product .strategy .list-box .depth h6{ font-size: 2.1rem; font-weight: 400; padding-left: 20px; }
#product .strategy .list-box .depth h6::before{ content: "+"; display: inline-block; padding-right: 5px; }
#product .strategy .list-box .depth .category{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
#product .strategy .list-box .depth .category span{ font-size: 2rem; font-weight: 300; }
#product .strategy .list-box .depth .category span::before{ content: "/ "; }
#product .strategy .list-box .depth .category span:first-of-type::before{ display: none; }
#product .strategy .list-box .depth a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

#product .strategy .list-box .depth1{ padding: 20px 0; z-index: 10; }
#product .strategy .list-box .depth1 .category{ padding-top: 8px; }
#product .strategy .list-box .depth1::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor1); position: absolute; bottom: 0; left: 0; z-index: -5; transform: scaleY(0); transform-origin: bottom; transition: transform 0.5s; }

#product .strategy .list-box .depth1.block::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 30; cursor: pointer; }

#product .strategy .list-box .depth1 > *{ transition: color 0.5s; }
#product .strategy .list-box .depth1.on::before{ transform: scaleY(1); }
#product .strategy .list-box .depth1.on > *{ color: var(--mainColor2); }

#product .strategy .list-box .depth2{ width: 100%; border-bottom: 1px solid var(--mainColor1); padding: 10px 0; display: none; } 
#product .strategy .list-box .depth2 .depth{ padding: 10px 0; border-bottom: none; }

#product .filter-box ul{ display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
#product .filter-box ul li input{ display: none; }
#product .filter-box ul li label{ width: 150px; height: 40px; display: flex; justify-content: center; align-items: center; border: 1px solid var(--mainColor2); border-radius: 990px; font-size: 1.7rem; font-weight: 700; color: var(--mainColor2); text-align: center; padding-top: 1px; cursor: pointer; }

#product .filter-box ul li input:checked + label{ color: var(--mainColor1); background: var(--mainColor2); }

#product .list .box{ max-width: 1500px; position: relative; }
#product .list .box:not(:last-of-type){ margin-bottom: 180px; }
#product .list .title{ margin-bottom: 20px; }
#product .list .title > span{ font-family: var(--engFont); font-size: 2rem; font-weight: 500; color: var(--mainColor2); }
#product .list .title h2{ font-family: var(--engFont); font-size: 6.2rem; font-weight: 700; margin: 10px 0; }
#product .list .title h2 span{ display: inline-block; font-size: 3.8rem; margin-left: 20px; }
#product .list .title p{ font-size: 2.2rem; font-weight: 400; line-height: 1.55; }

#product .list .content .flex-box{ display: flex; align-items: flex-end; margin-bottom: 10px; }
#product .list .content .figure{ width: calc(100% - 160px); }
#product .list .content .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 61%; }
#product .list .content .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#product .list .content .flex-box figure{ margin-bottom: -4px; }
#product .list .content .figure ul{ display: flex; flex-wrap: wrap; gap: 10px; }
#product .list .content .figure ul li{ width: calc((100% - 30px) / 4); }
#product .list .content .mark{ width: 160px; padding-left: 30px; }
#product .list .content .mark .icon li{ margin-bottom: 20px; }
#product .list .content .mark .hashtag li{ font-size: 1.7rem; font-weight: 500; color: var(--mainColor2); padding: 10px 0; padding-left: 10px; }
#product .list .content .mark .hashtag li::before{ content: "#"; }

#product .list .box a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 30; }

@media (hover: hover){
	#product .strategy .list-box .depth1:hover::before{ transform: scaleY(1); }
	#product .strategy .list-box .depth1:hover > *{ color: var(--mainColor2); }
}

@media screen and (max-width: 1600px){
	#product .strategy .list-box .depth h5{ font-size: 2.8rem; }
	#product .strategy .list-box .depth h6{ font-size: 1.9rem; }
	#product .strategy .list-box .depth .category span{ font-size: 1.8rem; }

	#product .strategy .list-box .depth1{ padding: 15px 0; }
	#product .strategy .list-box .depth1 .category{ padding-top: 6px; }

	#product .list .box:not(:last-of-type){ margin-bottom: 120px; }
	#product .list .title > span{ font-size: 1.8rem; }
	#product .list .title h2{ font-size: 5rem; }
	#product .list .title h2 span{ font-size: 2.8rem; margin-left: 15px; }
	#product .list .title p{ font-size: 2rem; }
}

@media screen and (max-width: 1280px){
	#product .strategy .list-box .depth h5{ font-size: 2.4rem; }
	#product .strategy .list-box .depth h6{ font-size: 1.8rem; padding-left: 15px; }
	#product .strategy .list-box .depth .category span{ font-size: 1.7rem; }

	#product .strategy .list-box .depth1{ padding: 10px 0; }
	#product .strategy .list-box .depth1 .category{ padding-top: 4px; }

	#product .filter-box.pt120{ padding-top: 60px; }
	#product .filter-box.pb120{ padding-bottom: 60px; }
	#product .filter-box ul li label{ width: 140px; height: 40px; font-size: 1.6rem; }

	#product .list .box:not(:last-of-type){ margin-bottom: 80px; }
	#product .list .title > span{ font-size: 1.6rem; }
	#product .list .title h2{ font-size: 4rem; }
	#product .list .title h2 span{ font-size: 2.2rem; margin-left: 10px; }
	#product .list .title p{ font-size: 1.8rem; }

	#product .list .content .figure{ width: calc(100% - 120px); }
	#product .list .content .mark{ width: 120px; padding-left: 20px; }
	#product .list .content .mark .icon li{ margin-bottom: 15px; }
	#product .list .content .mark .hashtag li{ font-size: 1.6rem; padding: 10px 0; padding-left: 5px; }
}

@media screen and (max-width: 1200px){
	#product .strategy .flex-box{ flex-direction: column; }
	#product .strategy .title-box{ width: 100%; margin-bottom: 20px; }
	#product .strategy .list-box{ width: 100%; }

	#product .list .title{ margin-bottom: 0; }
	#product .list .content .flex-box{ flex-direction: column-reverse; }
	#product .list .content .figure{ width: 100%; }
	#product .list .content .mark{ display: flex; flex-direction: column-reverse; width: 100%; padding-left: 0; margin-bottom: 20px; }
	#product .list .content .mark ul{ display: flex; flex-wrap:  }
	#product .list .content .mark .icon{ margin-top: 10px; gap: 10px; }
	#product .list .content .mark .icon li{ max-width: calc((100% - 150px) / 4); margin-bottom: 0; }
	#product .list .content .mark .hashtag{ wrap; gap: 15px; }
	#product .list .content .mark .hashtag li{ padding: 10px 0 0; }
}

@media screen and (max-width: 900px){
	#product .strategy .list-box .depth{ flex-wrap: wrap; }
	#product .strategy .list-box .depth > *:not(a){ width: 100%; }
	#product .strategy .list-box .depth h5{ font-size: 2.2rem; }
	#product .strategy .list-box .depth h6{ font-size: 1.7rem; padding: 0; }
	#product .strategy .list-box .depth .category{ justify-content: flex-start; text-align: left; }
	#product .strategy .list-box .depth .category span{ font-size: 1.6rem; }

	#product .strategy .list-box .depth1{ padding: 10px 0; }
	#product .strategy .list-box .depth1 .category{ padding-top: 4px; }

	#product .strategy .list-box .depth2 .depth{ padding: 5px 10px; }
	#product .strategy .list-box .depth2 .depth .category{ padding-left: 16px; margin-top: 5px; }

	#product .filter-box ul li label{ width: 130px; height: 35px; font-size: 1.5rem; }

	#product .list .title > span{ font-size: 1.5rem; }
	#product .list .title h2{ font-size: 3.5rem; margin: 5px 0 10px; }
	#product .list .title h2 span{ font-size: 2rem; margin-left: 7px; }
	#product .list .title p{ font-size: 1.7rem; }

	#product .list .content .figure ul li{ width: calc((100% - 10px) / 2); }
	#product .list .content .figure ul li figure{ margin-bottom: -4px; }
}


/* 
	PORTFOLIO
*/
/* main (인덱스) */
#main.sub-content{ padding-top: 0; }
#main.sub-content section:first-of-type{ padding-top: 0; }

#main .main{ position: relative; }
#main .main .visual{ position: relative; padding-bottom: 100vh; overflow: hidden; }
#main .main .visual img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: all 0.8s; }
#main .main .visual.slick-active img{ transform: translate(-50%, -50%); }

#main .main .text-box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50; padding-top: 78px; }
#main .main .text-box > div{ height: 100%; }
#main .main .flex-box{ height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 120px 0 60px; }

#main .main .top .flex{ display: flex; justify-content: space-between; }
#main .main .top h3{ font-weight: 500; }
#main .main .radius-btn{ margin: 0; }
#main .main .slick-dots{ width: 10px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 60px; }
#main .main .slick-dots li{ display: inline-block; width: 10px; height: 10px; background: transparent; border: 1px solid var(--mainColor1); border-radius: 50%; transition: background 0.5s; cursor: pointer; }
#main .main .slick-dots li.slick-active{ background: var(--mainColor1); }
#main .main .slick-dots li button{ display: none; }

#main .main .bottom *{ font-family: var(--engFont); }
#main .main .bottom ul li:not(.animate){ display: none; }
#main .main .bottom ul li .overflow{ overflow: hidden; animation: none !important; }
#main .main .bottom ul li .overflow:nth-of-type(2){ margin-top: 15px; }
#main .main .bottom ul li .overflow:nth-of-type(3){ margin: 5px 0; }
#main .main .bottom .new{ display: inline-block; font-size: 1.5rem; font-weight: 400; padding: 2px 12px; background: #DF1500; border-radius: 100px; }
#main .main .bottom h5{ font-size: 3.8rem; font-weight: 600; }
#main .main .bottom .p1{ font-size: 2.4rem; font-weight: 300; }
#main .main .bottom .p2{ font-size: 1.6rem; font-weight: 100; }

#main .main .bottom ul li.animate *{ animation: textShow 0.8s 0.3s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

#main .main .bottom ul li.hidden *{ animation: textHide 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; }

@keyframes textShow{
	0%{ transform: translateY(100%); }
	100%{ transform: translateY(0); }
}

@keyframes textHide{
	0%{ transform: translateY(0); opacity: 1; }
	100%{ transform: translateY(-100%); opacity: 0; }
}

#main .animation .border{ display: flex; border-top: 1px solid var(--mainColor1); border-bottom: 1px solid var(--mainColor1); padding: 30px 0; overflow: hidden; }
#main .animation .border h2{ white-space: nowrap; padding-right: 20px; }
#main .animation .border h2.origin{ animation: 30s linear 0s infinite normal forwards running origin_left; }
#main .animation .border h2.clone{ animation: 30s linear 0s infinite normal none running clone_left; }

@keyframes origin_left{
	0%{ transform: translateX(0); }
	50%{ transform: translateX(-100%); }
	50.01%{ transform: translateX(100%) }
	100%{ transform: translateX(0); }
}

@keyframes clone_left{
	0%{ transform: translateX(0); }
	100%{ transform: translateX(-200%) }
}

#main .title-box{ margin-bottom: 40px; }
#main .title-box p{ font-size: 1.9rem; font-weight: 400; margin-top: 10px; }

#main .portfolio .flex-box{ display: flex; justify-content: space-between; }
#main .portfolio .flex-box > div{ width: calc((100% - 80px) / 2); }
#main .portfolio .list ul{ border-top: 1px solid #D9D9D9; }  
#main .portfolio .list ul li{ border-bottom: 1px solid #D9D9D9; padding: 15px 0; position: relative; z-index: 5; transition: all 0.5s; }
#main .portfolio .list ul li::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor1); position: absolute; top: 0; left: 0; z-index: -1; transform: scaleY(0); transform-origin: bottom; transition: all 0.5s; }
#main .portfolio .list ul li p{ font-family: var(--engFont); font-size: 2.1rem; font-weight: 400; }
#main .portfolio .image{ position: relative; padding-bottom: 32%; }
#main .portfolio .image figure{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
#main .portfolio .image figure:not(:first-of-type){ display: none; }  
#main .portfolio .image figure img{ width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#main .portfolio .list ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }
#main .portfolio .left .radius-btn{ margin: 0; }

#main .portfolio .list ul li:hover{ color: var(--darkBg); }
#main .portfolio .list ul li:hover::before{ transform: scaleY(1); }

#main .eco ul{ display: flex; flex-wrap: wrap; gap: 60px; }
#main .eco ul li{ display: flex; flex-direction: column; justify-content: space-between; width: calc((100% - 120px) / 3); }
#main .eco dl dt{ font-family: var(--engFont); font-size: 2.6rem; font-weight: 400; margin-bottom: 10px; }
#main .eco dl dt .num{ display: inline-block; width: 100%; font-size: 3rem; font-weight: 700; }
#main .eco dl dd{ font-size: 1.7rem; font-weight: 400; }
#main .eco .icon{ margin-top: 60px; text-align: right; /* padding-left: 44%; */ }


#main .insta ul{ display: flex; flex-wrap: wrap; gap: 20px; }
#main .insta ul li{ width: calc((100% - 60px) / 4); position: relative; }
#main .insta ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 100%; margin-bottom: -4px; }
#main .insta ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#main .insta ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (max-width: 1600px){
	#main .main .flex-box{ padding: 80px 0 40px; }
	#main .main .bottom h5{ font-size: 3rem; }
	#main .main .bottom .p1{ font-size: 2.2rem; }
	#main .main .slick-dots{ margin-top: 40px; }

	#main .animation .border{ padding: 20px 0; }

	#main .title-box p{ font-size: 1.8rem; }

	#main .portfolio .list ul li{ padding: 10px 0; }
	#main .portfolio .list ul li p{ font-size: 1.9rem; }

	#main .eco dl dt{ font-size: 2.2rem; }
	#main .eco dl dt .num{ font-size: 2.5rem; }
}

@media screen and (max-width: 1300px){
	#main .eco br{ display: none; }
}

@media screen and (max-width: 1280px){
	#main .main .text-box{ padding-top: 70px; }
	#main .main .flex-box{ padding: 60px 0 40px; }
	#main .main .bottom h5{ font-size: 2.5rem; }
	#main .main .bottom .p1{ font-size: 2rem; }
	#main .main .bottom .p2{ font-size: 1.5rem; }

	#main .animation .border{ padding: 10px 0; }

	#main .title-box{ margin-bottom: 20px; }
	#main .title-box p{ font-size: 1.7rem; }

	#main .portfolio .flex-box > div{ width: calc((100% - 40px) / 2); }
	#main .portfolio .list ul li p{ font-size: 1.8rem; }
	
	#main .eco dl dt{ font-size: 2rem; }
	#main .eco dl dt .num{ font-size: 2.2rem; }
	#main .eco dl dd{ font-size: 1.6rem; }
	#main .eco .icon{ margin-top: 40px; padding-left: 44%; }  
}

@media screen and (max-width: 1100px){
	#main .animation.pt180{ padding-top: 60px; }
	#main .animation.pb180{ padding-bottom: 60px; }

	#main .portfolio .flex-box{ flex-direction: column-reverse; }
	#main .portfolio .flex-box > div{ width: 100%; }
	#main .portfolio .image{ padding-bottom: 63%; margin-bottom: 30px; }

	#main .eco ul li{ width: calc((100% - 60px) / 2); }

	#main .insta ul li{ width: calc((100% - 40px) / 3); }
}

@media screen and (max-width: 900px){
	#main .main .flex-box{ padding: 60px 0 40px; }
	#main .main .bottom h5{ font-size: 2.2rem; }
	#main .main .bottom .p1{ font-size: 1.8rem; }

	#main .animation .border{ padding: 5px 0; }

	#main .title-box p{ font-size: 1.6rem; }

	#main .portfolio .list ul li{ padding: 6px 0; }
	#main .portfolio .list ul li p{ font-size: 1.7rem; }
	#main .portfolio .image{ margin-bottom: 20px; }
}

@media screen and (max-width: 750px){
	#main .main .visual{ padding-bottom: 100%; min-height: 700px; }
	#main .main .flex-box{ padding: 30px 0 40px; }
	#main .main .top .flex{ flex-direction: column; }
	#main .main .top .flex .right{ margin-top: 20px; }

	#main .insta ul li{ width: calc((100% - 20px) / 2); }
}

@media screen and (max-width: 650px){
	#main .eco ul li{ width: 100%; }
	#main .eco .icon{ /* padding-left: 55%; */ }
}


/* list */
/* #portfolio h2::after{ content: url("/img/sub/portfolio/portfolio_arrow.svg"); display: inline-block; margin-left: 25px; transform-origin: bottom left; position: relative; } */

#portfolio .top-title { display: flex; flex-wrap: wrap; align-items: center; gap: 40px; }
#portfolio .top-title .btn { display: flex; gap: 10px; margin-bottom: 10px; }
#portfolio .top-title .btn a { width: auto; padding: 0 30px;  height: 40px; font-size: 1.7rem; display:flex !important; }
#portfolio .top-title .btn a.on { color: var(--mainColor2); }
#portfolio .top-title .btn a.on::before{ transform: translateY(0); }
#portfolio h3{ font-weight: 500; }
#portfolio .inner{ margin: 0 auto; padding: 0 60px; }
#portfolio .scroll-box{ /* height: calc(100vh - 78px); */ overflow: hidden; }
#portfolio ul{ display: flex; flex-wrap: wrap; gap: 30px; }
#portfolio ul li{ width: calc((100% - 30px) / 2); max-height: calc(100vh - 150px); position: relative; overflow: hidden; transition: transform 0.5s; }
#portfolio ul li::before{ content: ""; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 5; opacity: 0; transition: opacity 0.5s; }
#portfolio ul li figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 67.8%; margin-bottom: -5px; }
#portfolio ul li figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); transition: transform 0.8s; }

#portfolio ul li .on, #portfolio ul li .off{ transition: all 0.8s; }
#portfolio ul li .off{ opacity: 1; }
#portfolio ul li .on{ width: 100%; position: absolute; top: 0; left: 0; opacity: 0; }
#portfolio ul li .text, #portfolio ul li .text .absolute{ padding: 30px; }
#portfolio ul li .text{ width: 100%; position: absolute; bottom: 0; left: 0; z-index: 10; }
#portfolio ul li .text > h5{ opacity: 0; pointer-events: none; }
#portfolio ul li .text .absolute{ width: 100%; position: absolute; top: 0; left: 0; z-index: 30; transition: all 0.8s; }
#portfolio ul li .text .overflow{ overflow: hidden; }
#portfolio ul li .text h5{ font-size: 3rem; font-weight: 500; color: #fff; }
#portfolio ul li .text p, #portfolio ul li .text a{ transform: translateY(100%); opacity: 0; transition: all 0.8s; }
#portfolio ul li .text p{ font-size: 1.7rem; font-weight: 400; color: #fff; padding: 5px 0 15px; }
#portfolio ul li .text a{ display: inline-block; background: #fff; border-radius: 990px; font-size: 1.7rem; font-weight: 400; color: var(--fontColor); line-height: 1; padding: 10px 20px; }

/* #portfolio ul li:hover{ transform: scale(1.01); } */
#portfolio ul li:hover::before{ opacity: 1; }
#portfolio ul li:hover .absolute{ top: 100%; transform: translateY(-100%); }
#portfolio ul li:hover .text p, #portfolio ul li:hover .text a{ opacity: 1; transform: translateY(0); }
#portfolio ul li:hover .off{ opacity: 0; }
#portfolio ul li:hover .on{ opacity: 1; }
#portfolio ul li:hover figure img{ transform: translate(-50%, -50%) scale(1.02); }

#portfolio .right{ display: flex; justify-content: flex-end; }
#portfolio .right .radius-btn{ margin: 0; }

@media screen and (max-width: 1680px){
	#portfolio .inner{ max-width: 1560px; padding: 0; }
}

@media screen and (max-width: 1600px){
	#portfolio .inner{ padding: 0 20px; }
	#portfolio h2::after{ transform: scale(0.8); margin-left: 15px; top: -3px; }

	#portfolio ul li .text h5{ font-size: 2.6rem; }
}

@media screen and (max-width: 1280px){
	#portfolio h2::after{ transform: scale(0.7); top: -6px; }

	#portfolio ul li .text, #portfolio ul li .text .absolute{ padding: 15px; }
	#portfolio ul li .text h5{ font-size: 2.4rem; }
}

@media screen and (max-width: 900px){
	#portfolio h2::after{ transform: scale(0.5); margin-left: 10px; }

	#portfolio .top-title { gap: 20px; margin-bottom: 20px; }
	#portfolio .top-title h3 { width: 100%; }
	#portfolio .top-title .btn { width: 100%; margin: -30px 0 0; }
	#portfolio .top-title .btn a { padding: 0 25px; font-size: 1.6rem; margin:0; }
	#portfolio ul li{ width: 100%; }
	#portfolio ul li .text h5{ font-size: 2.2rem; }
	#portfolio ul li .text p{ font-size: 1.6rem; }
	#portfolio ul li .text a{ font-size: 1.6rem; padding: 9px 17px; }
}

/* 
	NEWS
*/
/* 게시판 */
#board .board .box{ display: flex; gap: 60px; position: relative; }
#board .board .box:not(:last-of-type){ margin-bottom: 60px; }
#board .board .box .figure{ width: 480px; }  
#board .board .box .figure figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 66.66%; }
#board .board .box .figure figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#board .board .box .text{ font-size: 1.7rem; display: flex; flex-direction: column; justify-content: space-between; width: calc(100% - 540px); border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 30px 0; }
#board .board .box .text h6{ font-size: 3rem; font-weight: 600; margin-bottom: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#board .board .box .text p:not(.time){ font-weight: 400; color: #666; height: 6.2em; font-weight: 400; line-height: 1.55; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }

#board .board .box .text .flex{ display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px; }
#board .board .box .text ul{ width: calc(100% - 100px); display: flex; flex-wrap: wrap; gap: 5px; }
#board .board .box .text ul li{ font-weight: 500; color: var(--mainColor2); }
#board .board .box ul li::before{ content: "#"; }
#board .board .box .text .time{ font-family: var(--engFont); font-weight: 500; color: #888; }
#board .board .box .text .time::before{ content: url("/img/sub/news/time_icon.svg"); display: inline-block; position: relative; top: 1px; margin-right: 5px; }

#board .board .box a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

@media screen and (max-width: 1600px){
	#board .board .box .text h6{ font-size: 2.6rem; }  
}

@media screen and (max-width: 1280px){
	#board .board .box .text{ font-size: 1.6rem; padding: 25px 0; }
	#board .board .box .text h6{ font-size: 2.2rem; } 
}

@media screen and (max-width: 1200px){
	#board .board .box{ gap: 20px 40px; }
	#board .board .box .figure{ width: calc((100% - 40px) / 2); } 
	#board .board .box .text{ width: calc((100% - 40px) / 2); }

	#board .board .box .text .flex{ flex-direction: column-reverse; align-items: flex-start; }
	#board .board .box .text ul{ width: 100%; }
	#board .board .box .text .time{ text-align: left; margin-bottom: 15px; }
}

@media screen and (max-width: 1000px){
	#board .board .box{ flex-direction: column; }
	#board .board .box .figure{ width: 100%; } 
	#board .board .box .text{ width: 100%; padding: 20px 0; } 
}

@media screen and (max-width: 900px){
	#board .board .box .text h6{ font-size: 2rem; }
}


/* 상세 페이지 */
#view .title-box{ padding-bottom: 30px; border-bottom: 1px solid #000; }
#view .title-box h5{ font-size: 4.8rem; font-weight: 600; margin-bottom: 30px; }
#view .title-box ul{ display: flex; gap: 10px 30px; font-family: var(--engFont); font-size: 1.7rem; font-weight: 500; }
#view .title-box ul li{ position: relative; }
#view .title-box ul li::after{ content: ""; width: 1px; height: 15px; background: #000; position: absolute; top: 50%; right: -16px; transform: translateY(-50%); }
#view .title-box ul li:last-of-type::after{ display: none; }

#view .title-box ul li.date{ color: #888; }
#view .title-box ul li.date::before{ content: url("/img/sub/news/time_icon.svg"); display: inline-block; position: relative; top: 1px; margin-right: 5px; }

#view .content-box{ /* max-width: 1200px; margin: 0 auto; */ font-size: 1.7rem; }
#view .content-box img{ max-width: 100% !important; height: auto !important; }
#view .content-box *{ max-width: 100%; word-break: break-word; }

#view .link-box table{ border-top: 1px solid #000; border-bottom: 1px solid #000; }
#view .link-box table tr:not(:last-of-type){ border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
#view .link-box table th, #view .link-box table td{ padding: 20px 40px; font-size: 1.5rem; font-weight: 300; position: relative; }
#view .link-box table th{ width: 147px; }
#view .link-box table th::after{ content: ""; width: 1px; height: 15px; background: #000; opacity: 0.1; position: absolute; top: 50%; right: 0; transform: translateY(-50%); }
#view .link-box table td p{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#view .link-box table td a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

@media screen and (max-width: 1600px){
	#view .title-box h5{ font-size: 4rem; }
}

@media screen and (max-width: 1280px){
	#view .title-box{ padding-bottom: 20px; } 
	#view .title-box h5{ font-size: 3.5rem; margin-bottom: 20px; }
	#view .title-box ul{ font-size: 1.6rem; }

	#view .link-box table th, #view .link-box table td{ padding: 15px 30px; }
	#view .link-box table th{ width: 130px; }
}

@media screen and (max-width: 900px){
	#view .title-box h5{ font-size: 2.8rem; margin-bottom: 10px; }
}


/* CONTACT US */
#contactUs .form .tab{ border-bottom: 1px solid #000; }
#contactUs .form .tab:first-of-type{ border-top: 1px solid #000; }
#contactUs .form .tab .tab-title{ padding: 20px 65px; position: relative; overflow: hidden; z-index: 10; cursor: pointer; }
#contactUs .form .tab .tab-title::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor2); position: absolute; top: 0; left: 0; z-index: -1; transform: translateY(100%); transition: all 0.5s; }
#contactUs .form .tab .tab-title span{ display: inline-block; width: 17px; height: 3px; background: #000; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); transition: all 0.5s; }
#contactUs .form .tab .tab-title span::after{ content: ""; display: inline-block; width: 100%; height: 100%; background: #000; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); transition: all 0.5s; }
#contactUs .form .tab .tab-title p{ font-size: 2.4rem; font-weight: 600; transition: all 0.5s; }

#contactUs .form .tab-content{ display: none; }

#contactUs .form .tab.on .tab-title::before{ transform: translateY(0); }
#contactUs .form .tab.on .tab-title span{ background: var(--mainColor1); }
#contactUs .form .tab.on .tab-title span::after{ background: var(--mainColor1); transform: translate(-50%, -50%) rotate(0deg); }
#contactUs .form .tab.on .tab-title p{ color: var(--mainColor1); }
#contactUs .form .tab:last-of-type.on{ border-bottom: none; }

@media (hover: hover){
	#contactUs .form .tab .tab-title:hover::before{ transform: translateY(0); }
	#contactUs .form .tab .tab-title:hover span{ background: var(--mainColor1); }
	#contactUs .form .tab .tab-title:hover span::after{ background: var(--mainColor1); transform: translate(-50%, -50%) rotate(0deg); }
	#contactUs .form .tab .tab-title:hover p{ color: var(--mainColor1); }
}

/* form-box */
#contactUs .form-box{ padding-top: 20px; }
#contactUs .form-box .input-box > div:not(:last-of-type){ margin-bottom: 10px; }
#contactUs .form-box .flex{ display: flex; justify-content: space-between; }
#contactUs .form-box .flex > div{ width: calc((100% - 40px) / 2); }
#contactUs .form-box .input{ display: flex; align-items: center; }
#contactUs .form-box .input.textarea{ align-items: flex-start; }
#contactUs .form-box .input .tit{ width: 125px; font-size: 1.7rem; font-weight: 600; }
#contactUs .form-box .input .tit span{ font-size: 1.4rem; font-weight: 400; }
#contactUs .form-box .input.textarea .tit{ padding-top: 15px; }
#contactUs .form-box .input > div:not(.tit){ width: calc(100% - 125px); }
#contactUs .form-box .input input[type="text"], #contactUs .form-box .input input[type="email"], #contactUs .form-box .input input[type="tel"], #contactUs .form-box .input textarea, #contactUs .form-box .input input[type="number"]{ width: 100%; background: none; border: 1px solid #888; outline: none; font-size: 1.7rem; padding: 10px; appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; } 
#contactUs .form-box .input input[type="text"], #contactUs .form-box .input input[type="email"], #contactUs .form-box .input input[type="tel"], #contactUs .form-box .input input[type="number"]{ height: 40px; }
#contactUs .form-box .input textarea{ height: 180px; resize: none; }

#contactUs .form-box .input .file{ display: flex; justify-content: space-between; }
#contactUs .form-box .input .file input[type="text"]{ width: calc(100% - 210px); }
#contactUs .form-box .input .file input[type="file"]{ display: none;  }
#contactUs .form-box .input .file label{ display: flex; justify-content: center; align-items: center; width: 200px; height: 40px; background: var(--mainColor2); font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1; cursor: pointer; }

#contactUs .form-box .captcha{ display: flex; justify-content: center; align-items: center; gap: 0; }
#contactUs .form-box .captcha img { height:42px; width:135px; border:1px solid #888; border-right:none }
#contactUs .form-box .captcha button{ justify-content: center; margin:0 -3px; vertical-align:middle; align-items: center; width: 42px; height: 42px; border: none; text-indent: -9999em; outline: none; background: var(--mainColor2) url("/img/sub/btn_refresh.svg") center center no-repeat; font-size: 14px; font-weight: 600; color: #fff; line-height: 1; cursor: pointer; }
#contactUs .form-box .captcha input[type="text"] { width:150px; background: none; border: 1px solid #888; border-left: none; outline: none; font-size: 1.6rem; padding: 10px; appearance: none; -webkit-appearance: none; border-radius: 0;} 


#contactUs .form-box .term{ display: flex; justify-content: center; align-items: center; gap: 20px; }
#contactUs .form-box .term button{ background: none; border: none; padding: 0; font-family: var(--engFont); font-size: 1.7rem; font-weight: 500; color: var(--FontColor); padding-bottom: 10px; border-bottom: 1px solid #000; }
#contactUs .form-box .agree input{ display: none; }
#contactUs .form-box .agree label{ display: inline-block; font-size: 1.7rem; font-weight: 300; padding-left: 30px; position: relative; cursor: pointer; }
#contactUs .form-box .agree label::before{ content: ""; width: 20px; height: 20px; border: 1px solid #000; position: absolute; top: 0; left: 0; }
#contactUs .form-box .agree input:checked + label::before{ background: #000; }
#contactUs .form-box .agree input:checked + label::after{ content: url("/img/sub/check_icon.svg"); position: absolute; top: -2px; left: 5px; }

#contactUs .form-box .center{ margin-top: 40px; }

/* recruit-box */
#contactUs .recruit-box .title-box{ padding-bottom: 160px; }
#contactUs .recruit-box .title-box h4{ font-weight: 700; margin: 60px 0 10px; }
#contactUs .recruit-box .title-box p{ font-size: 2rem; font-weight: 500; line-height: 1.55; }

#contactUs .recruit-box .box{ display: flex; }
#contactUs .recruit-box .box .num{ width: 440px; }
#contactUs .recruit-box .box .num span{ display: inline-block; font-family: var(--engFont); font-size: 12rem; font-weight: 200; margin-top: 12px; }

#contactUs .recruit-box .box .text{ display: flex; width: calc(100% - 440px); border-top: 2px solid #000; padding-top: 40px; }
#contactUs .recruit-box .box .text .title{ width: 44%; }
#contactUs .recruit-box .box .text .content{ width: 56%; }
#contactUs .recruit-box .box .text h5{ font-size: 4.8rem; font-weight: 500; margin-top: -4px; line-height: 1.2; }
#contactUs .recruit-box .box .text p{ font-size: 1.9rem; font-weight: 500; }
#contactUs .recruit-box .box .text .content ul{ display: flex; flex-direction: column; margin-top: 40px; }
#contactUs .recruit-box .box .text .content ul li{ display: inline-block; max-width: max-content; padding: 10px 25px; background: rgba(255, 255, 255, 0.15); border-radius: 100px; }
#contactUs .recruit-box .box .text .content ul li:not(:last-of-type){ margin-bottom: 10px; }


/* location */
#contactUs .location .title-box h2{ padding-bottom: 20px; border-bottom: 1px solid #000; }
#contactUs .location .title-box p{ font-size: 2rem; font-weight: 500; padding-top: 20px; }
#contactUs .location .box{ display: flex; }
#contactUs .location .text{ width: 45.5%; padding-right: 130px; }
#contactUs .location .text .title h5{ font-family: var(--engFont); font-size: 4.8rem; font-weight: 600; margin-bottom: 10px; }
#contactUs .location .text .title p{ font-size: 1.7rem; font-weight: 600; }
#contactUs .location .text .dl-box dl:not(:last-of-type){ margin-bottom: 20px; }
#contactUs .location .text dl dt{ font-size: 2.4rem; font-weight: 700; padding-bottom: 10px; border-bottom: 1px solid #000; position: relative; cursor: pointer; }
#contactUs .location .text dl dt::after{ content: url("/img/sub/contact/contact_arrow.svg"); position: absolute; top: calc(50% - 10px); right: 0; transform: translateY(-50%); transition: all 0.5s; }
#contactUs .location .text dl dd{ padding: 30px 20px; font-size: 1.9rem; font-weight: 300; line-height: 1.75; display: none; }
#contactUs .location .text dl dd p{ display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 20px; }
#contactUs .location .image{ width: 54.5%; }
#contactUs .location .image figure{ width: 100%; position: relative; overflow: hidden; padding-bottom: 63.5%; }
#contactUs .location .image figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#contactUs .location .text dl.on dt::after{ top: calc(50% - 3px); transform: translateY(-50%) rotate(-180deg); }

@media screen and (max-width: 1600px){
	/* form-box */
	#contactUs .form .tab .tab-title p{ font-size: 2.2rem; }

	/* location */
	#contactUs .location .title-box p{ font-size: 1.8rem; }

	#contactUs .location .text .title h5{ font-size: 4rem; }
	#contactUs .location .text dl dt{ font-size: 2.2rem; }
	#contactUs .location .text dl dd{ font-size: 1.9rem; }

	/* recruit-box */
	#contactUs .recruit-box .title-box{ padding-bottom: 120px; }
	#contactUs .recruit-box .title-box h4{ margin: 40px 0 20px; }
	#contactUs .recruit-box .title-box p{ font-size: 1.8rem; }

	#contactUs .recruit-box .box .num{ width: 300px; }
	#contactUs .recruit-box .box .num span{ font-size: 9rem; margin-top: 19px; }

	#contactUs .recruit-box .box .text{ width: calc(100% - 300px); }
	#contactUs .recruit-box .box .text h5{ font-size: 4rem; margin-top: -4px; }
	#contactUs .recruit-box .box .text p{ font-size: 1.8rem; }
	#contactUs .recruit-box .box .text .title{ width: 40%; }
	#contactUs .recruit-box .box .text .content{ width: 60%; }
}

@media screen and (max-width: 1400px){
	/* form-box */
	#contactUs .form-box .input .file label{ width: 150px; } 
	#contactUs .form-box .input .file input[type="text"]{ width: calc(100% - 160px); }

	/* location */
	#contactUs .location .text{ padding-right: 100px; }
}

@media screen and (max-width: 1280px){
	#contactUs .form .tab .tab-title{ padding: 15px 60px; }
	#contactUs .form .tab .tab-title p{ font-size: 2rem; }
	#contactUs .form .tab .tab-title span{ width: 15px; height: 2px; }

	/* form-box */
	#contactUs .form-box .input .tit{ width: 100px; font-size: 1.6rem; }
	#contactUs .form-box .input > div:not(.tit){ width: calc(100% - 100px); }
	#contactUs .form-box .agree label{ font-size: 1.6rem; padding-left: 25px; }
	#contactUs .form-box .agree label::before{ width: 15px; height: 15px; top: 1px; }
	#contactUs .form-box .agree input:checked + label::after{ left: 3px; }
	#contactUs .form-box .term button{ font-size: 1.6rem; }

	/* location */
	#contactUs .location .title-box p{ font-size: 1.7rem; }

	#contactUs .location .text, #contactUs .location .image{ width: 50%; }
	#contactUs .location .text{ padding-right: 70px; }
	#contactUs .location .text .title h5{ font-size: 3.5rem; margin-bottom: 5px; }
	#contactUs .location .text .title p{ font-size: 1.6rem; }
	#contactUs .location .text dl dt{ font-size: 2rem; }
	#contactUs .location .text dl dd{ font-size: 1.7rem; padding: 20px 10px; }

	/* recruit-box */
	#contactUs .recruit-box .title-box{ padding-bottom: 80px; }
	#contactUs .recruit-box .title-box h4{ margin: 30px 0 10px; }
	#contactUs .recruit-box .title-box p{ font-size: 1.7rem; }

	#contactUs .recruit-box .box .num{ width: 250px; }
	#contactUs .recruit-box .box .num span{ font-size: 6rem; margin-top: 7px; }

	#contactUs .recruit-box .box .text{ width: calc(100% - 250px); padding-top: 20px; }
	#contactUs .recruit-box .box .text h5{ font-size: 3.5rem; margin-top: -3px; }
	#contactUs .recruit-box .box .text p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1200px){
	/* form-box */
	#contactUs .form-box .input .file label{ width: 110px; } 
	#contactUs .form-box .input .file input[type="text"]{ width: calc(100% - 120px); }
}

@media screen and (max-width: 1000px){
	/* form-box */
	#contactUs .form-box .flex{ flex-direction: column; }
	#contactUs .form-box .flex > div{ width: 100%; }
	#contactUs .form-box .flex > div:not(:last-of-type){ margin-bottom: 10px; }

	/* recruit-box */
	#contactUs .recruit-box .box .num{ width: 200px; }
	#contactUs .recruit-box .box .text{ flex-direction: column; width: calc(100% - 200px); }
	#contactUs .recruit-box .box .text .title, #contactUs .recruit-box .box .text .content{ width: 100%; }
	#contactUs .recruit-box .box .text .content{ margin-top: 30px; }
}

@media screen and (max-width: 900px){
	/* form-box */
	#contactUs .form .tab .tab-title p{ font-size: 1.8rem; }

	/* location */
	#contactUs .location .box{ flex-direction: column-reverse; }
	#contactUs .location .text, #contactUs .location .image{ width: 100%; }
	#contactUs .location .text{ margin-top: 30px; padding-right: 0; }
	#contactUs .location .text .title h5{ font-size: 2.8rem; }
	#contactUs .location .text dl dt{ font-size: 1.8rem; }
	#contactUs .location .text dl dd{ font-size: 1.6rem; padding: 15px 10px; }
	#contactUs .location .text dl dd p{ gap: 0 5px; }

	/* recruit-box */
	#contactUs .recruit-box .box{ flex-direction: column; }
	#contactUs .recruit-box .box .num{ width: 100%; margin-bottom: 10px; margin-top: 0; }
	#contactUs .recruit-box .box .num span{ font-size: 5rem; }
	#contactUs .recruit-box .box .text{ width: 100%; }
	#contactUs .recruit-box .box .text h5{ font-size: 2.8rem; margin-top: 0; }
	#contactUs .recruit-box .box .text .content ul{ margin-top: 20px; }
}




/* 팝업 */
#popup{ width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); position: fixed; top: 0; left: 0; z-index: 999; display: none; }
#popup .blank{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 5; }
#popup .popup-box{ width: 920px; height: 79vh; max-height: 735px; background: #fff; padding: 80px 0; position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); }
#popup .close{ width: 45px; height: 45px; background: none; border: 1px solid var(--mainColor2); border-radius: 50%; position: absolute; top: 20px; right: 20px; }
#popup .title{ margin-bottom: 10px; padding: 0 40px; }
#popup h5{ font-size: 3.2rem; font-weight: 700; letter-spacing: -0.02em; padding: 0 10px; padding-bottom: 15px; border-bottom: 1px solid #000; }
#popup .content{ height: calc(100% - 68px); padding-left: 40px; padding-right: 30px; }
#popup .scroll-box{ height: 100%; padding-top: 30px; padding-right: 20px; }

/* 팝업 - 사업선언문 */
#popup .mission .scroll-box p{ font-size: 1.7rem; font-weight: 300; letter-spacing: -0.02em; color: #555; line-height: 1.75; }
#popup .mission .scroll-box p:not(:last-of-type){ margin-bottom: 40px; }

@media screen and (max-width: 1600px){
	/* 팝업 */
	#popup .close{ width: 40px; height: 40px; top: 15px; right: 15px; }
	#popup{ padding: 70px 0; }
	#popup h5{ font-size: 2.8rem; }
	#popup .content{ height: calc(100% - 63px); }
}

@media screen and (max-width: 1280px){
	/* 팝업 */
	#popup h5{ font-size: 2.4rem; }
	#popup .content{ height: calc(100% - 50px); }

	/* 팝업 - 사업선언문 */
	#popup .mission .scroll-box p{ font-size: 1.6rem; }
	#popup .mission .scroll-box p:not(:last-of-type){ margin-bottom: 20px; }
}

@media screen and (max-width: 1200px){
	/* 팝업 */
	#popup .popup-box{ width: 90%; }

	/* 팝업 - 사업선언문 */
	#popup .mission br{ display: none; }
}

@media screen and (max-width: 900px){
	/* 팝업 */
	#popup .close{ width: 35px; height: 35px; }
	#popup .popup-box{ padding: 55px 0; }
	#popup .title{ padding: 0 30px; } 
	#popup h5{ font-size: 2.2rem; padding-bottom: 10px; }
	#popup .content{ padding-left: 30px; padding-right: 20px; }
	#popup .scroll-box{ padding-top: 15px; }
}