/* banner */
#banner{ padding: 165px 0; opacity: 1; position: relative; overflow: hidden; }
#banner .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; }
#banner .bg::before{ content: ""; height: 100%; display: block; background: url("/img/sub/bg_banner.jpg") no-repeat center left 55% / cover; transform: scale(1.07); transition: transform var(--aosT); transition-timing-function: var(--aosTF); }
#banner .txt{ transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); transition-timing-function: var(--aosTF); }
#banner h3{ font-family: var(--engFont); font-size: 7rem; font-weight: 500; color: #FFF; line-height: 1.1; margin-bottom: 60px; }

#banner.aos-animate .bg::before{ transform: scale(1); }
#banner.aos-animate .txt{ transform: translateY(0); opacity: 1; }


/* common */
#sub{
	--subPt: calc(var(--headerH) + var(--headerT));
	--subPb: 120px;
}
.sub-content{ padding: var(--subPt) 0 var(--subPb); }


/* slick-dots */
.slick-dots{ display: flex; justify-content: center; margin-top: 20px; }
.slick-dots li{ width: 10px; height: 10px; border: 2px solid var(--mainColor); cursor: pointer; transition: width 0.4s, background 0.4s; will-change: width, background; }
.slick-dots li.slick-active{ width: 30px; background: var(--mainColor); }
.slick-dots li:not(:last-of-type){ margin-right: 5px; }
.slick-dots li button{ display: none; }


/* 간격 */
.pt160{ padding-top: 160px; }
.pb160{ padding-bottom: 160px; }
.pt120{ padding-top: 120px; }
.pb120{ padding-bottom: 120px; }


/* page-title */
.page-title{ text-align: center; padding: 100px 0; }
.page-title h2{ font-family: var(--engFont); font-size: 8rem; font-weight: 600; color: #000; letter-spacing: -0.02em; }
.page-title p{ font-size: 18px; font-weight: 300; color: #555; line-height: 1.6; letter-spacing: -0.02em; margin-top: 20px; }


/* sec-title */
.sec-title{ letter-spacing: -0.02em; text-align: center; margin-bottom: 60px; }
.sec-title > span{ display: block; font-family: var(--engFont); font-size: 18px; font-weight: 500; color: #111; margin-bottom: 20px; } 
.sec-title h3{ font-family: var(--engFont); font-size: 5.4rem; font-weight: 500; color: #111; }
.sec-title h3.bold{ font-weight: 600; }
.sec-title p{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.6; margin-top: 30px; }

.sec-title.white span{ color: rgba(255, 255, 255, 0.8); text-stroke: 1px rgba(255, 255, 255, 0.3); -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3); }
.sec-title.white h3{ color: #FFF; }
.sec-title.white p{ font-weight: 200; color: #FFF; }


/* whiteBox */
.whiteBox{ /* background: #FFF; */ text-align: center; padding: 60px; }
.whiteBox p{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; }
.whiteBox p:not(:last-of-type){ margin-bottom: 40px; }
.whiteBox p strong{ font-weight: 600; }


@media screen and (max-width: 1700px){
	/* 간격 */
	.pt160{ padding-top: 120px; }
	.pb160{ padding-bottom: 120px; }
	.pt120{ padding-top: 90px; }
	.pb120{ padding-bottom: 90px; }

	/* page-title */
	.page-title{ padding: 80px 0; }
	.page-title h2{ font-size: 7.5rem; }

	/* sec-title */
	.sec-title{ margin-bottom: 40px; }
	.sec-title > span{ font-size: 17px; } 
	.sec-title p{ font-size: 19px; }
	
	/* whiteBox */
	.whiteBox p{ font-size: 19px; }
}

@media screen and (max-width: 1280px){
	/* banner */
	#banner{ padding: 120px 0; }
	#banner h3{ margin-bottom: 35px; }

	/* common */
	#sub{
		--subPb: 80px;
	}

	/* 간격 */
	.pt160{ padding-top: 90px; }
	.pb160{ padding-bottom: 90px; }
	.pt120{ padding-top: 70px; }
	.pb120{ padding-bottom: 70px; }

	/* page-title */
	.page-title{ padding: 50px 0; }
	.page-title h2{ font-size: 7rem; }
	.page-title p{ font-size: 17px; margin-top: 15px; }

	/* sec-title */
	.sec-title{ margin-bottom: 30px; }
	.sec-title > span{ font-size: 16px; margin-bottom: 10px; } 
	.sec-title p{ font-size: 18px; margin-top: 20px; }

	/* sec-title */
	.sec-title h3{ font-size: 6rem; } 
	
	/* whiteBox */
	.whiteBox{ padding: 40px; }
	.whiteBox p{ font-size: 17px; }
	.whiteBox p:not(:last-of-type){ margin-bottom: 30px; }
}

@media screen and (max-width: 900px){
	/* whiteBox */
	.whiteBox{ padding: 30px 25px; }
	.whiteBox p:not(:last-of-type){ margin-bottom: 20px; }
}

@media screen and (max-width: 600px){
	/* banner */
	#banner{ padding: 50px 0 230px; }
}



/* PRODUCTS (공통) */
#product{ padding-top: 0; overflow: hidden; }
#product .visual{ background: #F5F5F5 url("/img/sub/dotted_bg.png") no-repeat center center / cover; padding-top: var(--subPt); position: relative; }
#product .visual::before{ content: ""; background: linear-gradient(to bottom, transparent 80%, #FFF); position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#product .visual .grid-box{ min-height: calc(100vh - var(--headerH) - var(--headerT)); display: grid; grid-template-columns: calc(100% - 53.75%) 53.75%; align-items: center; padding: 50px 0px; }
#product .visual .text{ padding-right: 100px; }
#product .visual .text h2{ font-family: var(--engFont); font-size: 8rem; font-weight: 600; color: #111; letter-spacing: -0.02em; line-height: 1.1; }
#product .visual .text .p-box{ margin: 20px 0 60px; }
#product .visual .text .p-box p{ font-size: 18px; font-weight: 300; color: #555; letter-spacing: -0.02em; line-height: 1.6; }
#product .visual .text .p-box p:not(:last-of-type){ margin-bottom: 15px; }
#product .visual .img{ transform: scale(0.7); }
#product .visual .img.aos-animate{ transform: scale(1); } 

#product .spec{ 
	--text: 49.437%;
}
#product .spec section{ opacity: 1; }
#product .spec section:last-of-type{ padding-bottom: 0 !important; }
#product .spec .tit{ font-family: var(--engFont); font-size: 6rem; font-weight: 600; color: #111; letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 60px; transform: translateX(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); transition-timing-function: var(--aosTF); }
#product .spec .flex-box{ display: flex; border: 1px solid #DDD; transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); transition-timing-function: var(--aosTF); }
#product .spec .flex-box > div{ display: flex; flex-direction: column; justify-content: center; }
#product .spec .img{ width: calc(100% - var(--text)); text-align: center; border: 0px solid #DDD; border-right-width: 1px; padding: 110px 70px; }
#product .spec .img .image-wrap .slick-list{ margin-right: -20px; }
#product .spec .img .image{ display: flex; justify-content: center; align-items: center; margin-right: 20px; }
#product .spec .img .dots{ margin-top: 40px; }
#product .spec .text{ width: var(--text); padding: 120px; font-size: 18px; font-weight: 300; color: #333; line-height: 1.5; }
#product .spec .text *{ line-height: inherit; color: inherit; }
#product .spec .text > *:not(:last-child){ margin-bottom: 40px; }
#product .spec .text p{ font-size: 20px; }  
#product .spec .text dl dt{ font-family: var(--engFont); font-size: 22px; font-weight: 600; margin-bottom: 10px; }
#product .spec .text ul li{ display: flex; padding-left: 24px; position: relative; }
#product .spec .text ul li:not(:last-of-type){ margin-bottom: 10px; }
#product .spec .text ul li::before{ content: ""; width: 4px; height: 4px; background: #333; position: absolute; top: calc(1.5em / 2); left: 0; transform: translateY(-50%); }
#product .spec .text ul li strong{ flex-shrink: 0; width: 160px; display: inline-block; font-weight: 500; }

#product .spec section:nth-of-type(even) .flex-box{ flex-direction: row-reverse; }
#product .spec section:nth-of-type(even) .img{ border-right-width: 0; border-left-width: 1px; }

#product .spec section.aos-animate .tit,
#product .spec section.aos-animate .flex-box{ transform: translate(0, 0); opacity: 1; }

@media screen and (max-width: 1700px){
	#product .visual .text h2{ font-size: 7rem; }

	#product .spec .tit{ margin-bottom: 40px; }
	#product .spec .img{ padding: 80px 50px; }
	#product .spec .text{ padding: 90px; }
	#product .spec .text p{ font-size: 19px; }
	#product .spec .text dl dt{ font-size: 21px; }
	#product .spec .text ul li{ padding-left: 15px; }
}

@media screen and (max-width: 1400px){
	#product .visual .text{ padding-right: 70px; }
}

@media screen and (max-width: 1280px){
	#product .visual .text h2{ font-size: 6.5rem; }
	#product .visual .text .p-box{ margin-bottom: 40px; }

	#product .spec .tit{ margin-bottom: 20px; }
	#product .spec .tit{ font-size: 5.3rem; }
	#product .spec .img{ padding: 50px; }
	#product .spec .img .dots{ margin-top: 20px; }
	#product .spec .text{ padding: 50px; font-size: 17px; }
	#product .spec .text p{ font-size: 18px; }
	#product .spec .text dl dt{ font-size: 19px; }
	#product .spec .text ul li{ padding-left: 13px; }
	#product .spec .text ul li::before{ width: 3px; height: 3px; }
}

@media screen and (max-width: 1024px){
	#product .visual .grid-box{ display: flex; flex-direction: column; justify-content: center; padding-top: 25px; }
	#product .visual .text{ order: 5; padding-right: 0; padding-top: 10px; transform: translateY(var(--aosP)); }
	#product .visual .text.aos-animate{ transform: translateY(0); } 
	#product .visual .text br{ display: none; }

	#product .spec br{ display: none; }
	#product .spec .flex-box{ flex-direction: column !important; }
	#product .spec .img,
	#product .spec .text{ width: 100%; }
	#product .spec .img{ border-left-width: 0px !important; border-right-width: 0 !important; border-bottom-width: 1px; }
	#product .spec .text{ padding: 25px 30px; }
	#product .spec .text ul li{ flex-direction: column; }
	#product .spec .text ul li strong{ width: 100%; margin-bottom: 3px; }
}

@media screen and (max-width: 900px){
	#product .spec .img{ padding: 35px; }
}

@media screen and (max-width: 600px){
	#product .visual .grid-box{ min-height: unset; }
}


/* PRODUCTS - Substation Transformer */
@media screen and (max-width: 1350px){
	#product.substation .visual .p-box br{ display: none; } 
} 


/* PRODUCTS - Pad-mount Transformer */
@media screen and (max-width: 1400px){
	#product.pad-mount .spec br{ display: none; }
}

@media screen and (max-width: 1300px){
	#product.pad-mount .visual .p-box br{ display: none; }
}


/* SOLUTIONS */
#solution{ padding-bottom: 0; }
#solution section{ background: linear-gradient(to bottom, transparent 5%, #F8F8F8); }
#solution .fade{ position: relative; }
#solution .fade::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; right: 0; z-index: 100; }
#solution .fade.aos-animate::after{ animation: displayNone 0.1s var(--aosT) both; }

#solution .item-wrap{
	--gap: 20px;
	--min: 100px;
}
#solution .item-wrap{ display: flex; }
#solution .item-wrap .item{ width: var(--min); min-height: 650px; margin-right: var(--gap); position: relative; overflow: hidden; transition: width var(--aosT); transition-timing-function: var(--aosTF); cursor: pointer; }
#solution .item-wrap .item:last-of-type{ margin-right: 0; }
#solution .item-wrap .item:not(.on){ flex-shrink: 0; }
#solution .item-wrap .box{ width: calc(1600px - (var(--gap) * (var(--length) - 1)) - (var(--min) * (var(--length) - 1))); height: 100%; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
#solution .item-wrap .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#solution .item-wrap .bg::before,
#solution .item-wrap .bg::after{ content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; transition: opacity var(--aosT); transition-timing-function: var(--aosTF); }
#solution .item-wrap .bg::before{ background: linear-gradient(to bottom, transparent, #000); opacity: 0.5; }
#solution .item-wrap .bg::after{ background: linear-gradient(to bottom, transparent, var(--mainColor)); opacity: 0; }
#solution .item-wrap .bg img{ width: 100%; height: 100%; object-fit: cover; }
#solution .item-wrap .text{  padding: 50px; position: relative; z-index: 10; transform: translateY(var(--aosP)); opacity: 0; transition: transform 0.5s, opacity 0.5s; }
#solution .item-wrap .text *{ color: #FFF; letter-spacing: -0.02em; }
#solution .item-wrap .text h3{ font-family: var(--engFont); font-size: 4.6rem; font-weight: 500; }
#solution .item-wrap .text p{ font-size: 20px; font-weight: 200; margin-top: 20px; }

#solution .item-wrap .item.on{ flex: 1 1 auto; min-width: 0; width: calc(100% - (var(--gap) * (var(--length) - 1)) - (var(--min) * (var(--length) - 1))); }
#solution .item-wrap .item.on .bg::before{ opacity: 0; }
#solution .item-wrap .item.on .bg::after{ opacity: 1; }
#solution .item-wrap .item.on .text{ transform: translateY(0); opacity: 1; transition-delay: 0.5s; }

@media screen and (max-width: 1700px){
	#solution .item-wrap{
		--gap: 15px;
		--min: 85px;
	}
	#solution .item-wrap .item{ min-height: 550px; }
	#solution .item-wrap .text{ padding: 40px; }
	#solution .item-wrap .text p{ font-size: 19px; }
}

@media screen and (max-width: 1640px){
	#solution .item-wrap .box{ width: calc((var(--vw) - 40px) - (var(--gap) * (var(--length) - 1)) - (var(--min) * (var(--length) - 1))); }
}

@media screen and (max-width: 1280px){
	#solution .item-wrap{
		--gap: 10px;
		--min: 75px;
	}
	#solution .item-wrap .item{ min-height: 450px; }
	#solution .item-wrap .text{ padding: 25px; }
	#solution .item-wrap .text p{ font-size: 18px; margin-top: 10px; }
}

@media screen and (max-width: 900px){
	#solution .page-title br{ display: none; }

	#solution .item-wrap{ width: calc(100% + 40px); display: block; margin-left: -20px; }
	#solution .item-wrap .slick-track{ display: flex; }
	#solution .item-wrap .item{ flex: unset !important; flex-shrink: 0 !important; width: calc(var(--vw) - 100px) !important; min-height: 400px; float: unset !important; display: flex; flex-direction: column; margin-right: 20px !important; }
	#solution .item-wrap .box{ flex: 1 0 auto; width: 100%; }

	#solution .item-wrap .item.on .bg::before{ opacity: 0.5; }
	#solution .item-wrap .item.on .bg::after{ opacity: 0; }
	#solution .item-wrap .item.on .text{ transform: translateY(var(--aosP)); opacity: 0; transition-delay: unset; }

	#solution .item-wrap .item.slick-active .bg::before{ opacity: 0; }
	#solution .item-wrap .item.slick-active .bg::after{ opacity: 1; }
	#solution .item-wrap .item.slick-active .text{ transform: translateY(0); opacity: 1; }

	#solution .item-wrap .item.slick-now .bg::before{ opacity: 0; }
	#solution .item-wrap .item.slick-now .bg::after{ opacity: 1; }
	#solution .item-wrap .item.slick-now .text{ transform: translateY(0); opacity: 1; }
}


/* ABOUT US - ABOUT */
#about .gradiBg{ background: #F8F8F8 url("/img/sub/dotted_bg.png") no-repeat center center / cover; position: relative; }
#about .gradiBg::before{ content: ""; height: 70%; background: linear-gradient(to bottom, #FFF 5%, transparent); position: absolute; top: 0; right: 0; left: 0; }

#about .introduction .whiteBox{ padding: 0; }

#about .vision{ background: url("/img/sub/about/vision_bg.jpg") no-repeat center center / cover; opacity: 1; clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition: clip-path 1s; transition-timing-function: var(--aosTF); }
#about .vision .sec-title{ transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); transition-delay: 0.7s; transition-timing-function: var(--aosTF); }
#about .vision .sec-title p{ margin-top: 60px; }
#about .vision.aos-animate{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#about .vision.aos-animate .sec-title{ transform: translateY(0); opacity: 1; }

#about .core .fade{ opacity: 1; }
#about .core .item-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -15px; }
#about .core .item-box > *{ margin: 15px; }
#about .core .item{ min-height: 300px; display: flex; flex-direction: column; justify-content: center; background: #F5F5F5; letter-spacing: -0.02em; text-align: center; padding: 30px; }
#about .core .item dl dt{ font-family: var(--engFont); font-size: 22px; font-weight: 500; color: #000; margin: 20px 0; }
#about .core .item dl dd{ font-size: 16px; font-weight: 300; color: #333; line-height: 1.5; }

#about .history{ padding-bottom: 175px; position: relative; z-index: 10; }
#about .history .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; }
#about .history .bg div{ max-height: 100vh; height: 100%; background: url("/img/sub/about/history_bg.jpg") no-repeat center center / cover; position: sticky; top: 0; left: 0; }
#about .history .content dl{ display: grid; grid-template-columns: 110px calc(100% - 110px); border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 25px 0; }
#about .history .content dl:first-of-type{ border-top: 1px solid rgba(255, 255, 255, 0.2); }
#about .history .content dl dt{ font-family: var(--engFont); font-size: 30px; font-weight: 500; color: #FFF; }
#about .history .content dl dd{ padding-top: 6px; }
#about .history .content ul li{ display: grid; grid-template-columns: 100px calc(100% - 100px); font-size: 20px; font-weight: 200; color: #FFF; }
#about .history .content ul li:not(:last-of-type){ margin-bottom: 20px; }
#about .history .content ul li span{ display: block; font-family: var(--engFont); font-weight: 500; text-align: center; }

#about .experience{ background: #06183C url("/img/sub/about/experience_bg.png") no-repeat center left / cover; margin-top: -1px; overflow: hidden; }
#about .experience .grid-box{ display: grid; grid-template-columns: 42.5% 57.5%; align-items: center; }
#about .experience .img figure,
#about .experience .img figure img{ width: 100%; }
#about .experience .text{ padding-left: 100px; }
#about .experience .text > *:not(:last-child){ margin-bottom: 40px; }
#about .experience .text h5{ font-family: var(--engFont); font-size: 36px; font-weight: 500; color: #FFF; letter-spacing: -0.02em; }
#about .experience .text p{ font-size: 20px; font-weight: 200; color: #FFF; line-height: 1.6; letter-spacing: -0.02em; }

#about .location .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); }
#about .location .map{ height: 480px; }
#about .location .map iframe{ width: 100%; height: 100%; }
#about .location .address{ /* display: flex; flex-direction: column; justify-content: flex-end; */ background: #F8F8F8; padding: 60px 80px; }
#about .location .address dl dt{ font-family: var(--engFont); font-size: 32px; font-weight: 500; color: #111; letter-spacing: -0.02em; padding-left: 50px; margin-bottom: 30px; position: relative; }
#about .location .address dl dt::before{ content: ""; width: 30px; height: 30px; background: url("/img/sub/about/icon_marker.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#about .location .address dl dd{ font-size: 21px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; }

@media screen and (max-width: 1700px){
	#about .vision .sec-title p{ margin-top: 40px; }

	#about .core .item dl dt{ font-size: 21px; } 

	#about .history{ padding-bottom: 120px; }
	#about .history .content dl{ grid-template-columns: 90px calc(100% - 90px); }
	#about .history .content dl dt{ font-size: 26px; }
	#about .history .content dl dd{ padding-top: 4px; }
	#about .history .content ul li{ grid-template-columns: 80px calc(100% - 80px); font-size: 19px; }

	#about .experience .text > *:not(:last-child){ margin-bottom: 30px; }
	#about .experience .text br{ display: none; }
	#about .experience .text h5{ font-size: 32px; }
	#about .experience .text p{ font-size: 19px; }

	#about .location .address{ padding: 40px 60px; }
	#about .location .address dl dt{ font-size: 28px; margin-bottom: 20px; }
	#about .location .address dl dd{ font-size: 20px; }
}

@media screen and (max-width: 1600px){
	#about .core br{ display: none; }
}

@media screen and (max-width: 1400px){
	#about .experience .grid-box{ grid-template-columns: 46% 54%; }
	#about .experience .text{ padding-left: 70px; }
}

@media screen and (max-width: 1280px){
	#about .vision .sec-title p{ margin-top: 30px; }

	#about .core .item-box{ margin: -10px; }
	#about .core .item-box > *{ margin: 10px; }
	#about .core .item dl dt{ font-size: 20px; margin: 15px 0; } 

	#about .history{ padding-bottom: 90px; }
	#about .history .content dl{ grid-template-columns: 80px calc(100% - 80px); padding: 20px 0; }
	#about .history .content dl dt{ font-size: 23px; }
	#about .history .content dl dd{ padding-top: 2px; }
	#about .history .content ul li{ grid-template-columns: 70px calc(100% - 70px); font-size: 18px; }
	#about .history .content ul li:not(:last-of-type){ margin-bottom: 15px; }

	#about .experience .grid-box{ grid-template-columns: 45% 55%; }
	#about .experience .text{ padding-left: 70px; }
	#about .experience .text > *:not(:last-child){ margin-bottom: 20px; }
	#about .experience .text h5{ font-size: 28px; }
	#about .experience .text p{ font-size: 18px; }

	#about .location .address{ padding: 40px; }
	#about .location .address dl dt{ font-size: 24px; padding-left: 40px; margin-bottom: 10px; }
	#about .location .address dl dt::before{ width: 25px; height: 25px; }
	#about .location .address dl dd{ font-size: 19px; }
}

@media screen and (max-width: 1200px){
	#about .location .grid-box{ grid-template-columns: repeat(1, 100%); }
}

@media screen and (max-width: 1024px){
	#about .introduction br{ display: none; }

	#about .core .item-box{ grid-template-columns: repeat(2, 50%); }

	#about .experience .grid-box{ grid-template-columns: repeat(1, 100%); }
	#about .experience .img{ transform: scale(0.8); }
	#about .experience .img.aos-animate{ transform: scale(1); }
	#about .experience .text{ padding-left: 0; padding-top: 30px; transform: translateY(var(--aosP)); }
	#about .experience .text.aos-animate{ transform: translateY(0); }
}

@media screen and (max-width: 900px){
	#about .vision .sec-title p br{ display: none; }

	#about .history .content dl{ display: block; padding: 15px 0; }
	#about .history .content dl dt{ margin-bottom: 10px; }
	#about .history .content ul li{ grid-template-columns: 50px calc(100% - 50px); }
	#about .history .content ul li:not(:last-of-type){ margin-bottom: 12px; }
	#about .history .content ul li span{ text-align: left; }

	#about .experience .text h5{ font-size: 26px; }

	#about .location .map{ height: 400px; }
	#about .location .address{ padding: 25px; }
	#about .location .address dl dt{ font-size: 22px; padding-left: 30px; }
	#about .location .address dl dt::before{ width: 22px; height: 22px; }
	#about .location .address dl dd{ font-size: 18px; }
}

@media screen and (max-width: 700px){
	#about .core .item{ padding: 25px; }
}

@media screen and (max-width: 600px){
	#about .vision .sec-title h3 br{ display: none; }

	#about .core .sec-title > * span{ display: block; }
	#about .core .fade{ transform: translateY(var(--aosP)); opacity: 0; }
	#about .core .fade.aos-animate{ transform: translateY(0); opacity: 1; }
	#about .core .item-box{ width: calc(100% + 40px); display: block; margin: 0; margin-left: -20px; }
	#about .core .item-box > *{ margin: unset; }
	#about .core .item-box .slick-track{ display: flex; }
	#about .core .item{ float: unset; width: 350px; height: 100%; margin-right: 20px; transform: translateY(0) !important; opacity: 1 !important; }
	#about .core .item .icon{ display: flex; justify-content: center; }
}

@media screen and (max-width: 550px){
	#about .page-title br{ display: none; }
}


/* ABOUT US - CSR */
#csr{ overflow: hidden; }
#csr .gradiBg{ background: #F8F8F8 url("/img/sub/dotted_bg.png") no-repeat center center / cover; position: relative; }
#csr .gradiBg::before{ content: ""; height: 70%; background: linear-gradient(to bottom, #FFF, transparent); position: absolute; top: 0; right: 0; left: 0; }

#csr .policy .whiteBox{ padding: 0; }

#csr .compliance .sec-box .sec:not(:last-of-type){ margin-bottom: 30px; }
#csr .compliance .sec{ display: flex; }
#csr .compliance .sec > *{ opacity: 0; transition: transform var(--aosT), opacity var(--aosT); transition-timing-function: var(--aosTF); }
#csr .compliance .sec .img{ flex-shrink: 0; width: 46.25%; transform: translateY(var(--aosP)); }
#csr .compliance .sec .img img{ width: 100%; }
#csr .compliance .sec .text{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 134px; }
#csr .compliance .sec .text dl *{ color: #111; letter-spacing: -0.02em; }
#csr .compliance .sec .text dl dt{ font-size: 32px; font-weight: 600; line-height: 1.5; }
#csr .compliance .sec .text dl dd{ font-size: 22px; font-weight: 400; line-height: 1.5; }
#csr .compliance .sec .text dl dd p{ line-height: inherit; margin-top: 20px; }
#csr .compliance .sec .text ul{ margin-top: 40px; }
#csr .compliance .sec .text ul li{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.02em; padding-left: 16px; position: relative; }
#csr .compliance .sec .text ul li:not(:last-of-type){ margin-bottom: 15px; }
#csr .compliance .sec .text ul li::before{ content: ""; width: 4px; height: 4px; background: var(--mainColor); position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#csr .compliance .sec-box .sec:nth-of-type(odd) .text{ padding-right: 0; transform: translateX(var(--aosP)); }
#csr .compliance .sec-box .sec:nth-of-type(even){ flex-direction: row-reverse; }
#csr .compliance .sec-box .sec:nth-of-type(even) .text{ padding-left: 0; transform: translateX(var(--aosM)); }

#csr .compliance .sec-box .sec.aos-animate > *{ opacity: 1; transform: translate(0, 0) !important; }

#csr .example{
	--icon: 80px;
}
#csr .example{ background: url("/img/sub/about/csr_example_bg.jpg") no-repeat center center / cover; }
#csr .example dl{ background: rgba(255, 255, 255, 0.95); padding: 60px; }
#csr .example dl:not(:last-of-type){ margin-bottom: 30px; }
#csr .example dl dt{ min-height: var(--icon); display: flex; flex-direction: column; justify-content: center; font-family: var(--engFont); font-size: 28px; font-weight: 500; color: #000; letter-spacing: -0.02em; padding-left: calc(var(--icon) + 40px); position: relative; }
#csr .example dl dt p{ font-size: 22px; font-weight: 500; color: #AAA; letter-spacing: -0.02em; margin-top: 10px; }
#csr .example dl dt .icon{ width: var(--icon); height: var(--icon); background: var(--mainColor); position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#csr .example dl dd{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.6; margin-top: 30px; }
#csr .example ul li{ padding-left: 16px; position: relative; }
#csr .example ul li:not(:last-of-type){ margin-bottom: 15px; }
#csr .example ul li::before{ content: ""; width: 4px; height: 4px; background: var(--mainColor); position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

#csr .proactiveness .item-wrap{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -15px; }
#csr .proactiveness .item-wrap > *{ margin: 15px; }
#csr .proactiveness .item{ min-height: 460px; background: #F5F5F5; padding: 40px; }
#csr .proactiveness .item dl > *{ margin-top: 30px; }
#csr .proactiveness .item dl dt{ font-family: var(--engFont); font-size: 22px; font-weight: 500; color: #000; letter-spacing: -0.02em; }
#csr .proactiveness .item dl dd{ font-size: 18px; font-weight: 300; color: #333; letter-spacing: -0.02em; line-height: 1.5; }
#csr .proactiveness .item ul li{ padding-left: 16px; position: relative; }
#csr .proactiveness .item ul li:not(:last-of-type){ margin-bottom: 10px; }
#csr .proactiveness .item ul li::before{ content: ""; width: 4px; height: 4px; background: var(--mainColor); position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

@media screen and (max-width: 1700px){
	#csr .compliance .sec .text{ padding: 0 100px; }
	#csr .compliance .sec .text dl dt{ font-size: 28px; }
	#csr .compliance .sec .text dl dd{ font-size: 20px; }
	#csr .compliance .sec .text ul{ margin-top: 30px; }
	#csr .compliance .sec .text ul li{ font-size: 19px; }
	
	#csr .example dl{ padding: 40px; }
	#csr .example dl dt{ font-size: 24px; padding-left: calc(var(--icon) + 30px); }
	#csr .example dl dt p{ font-size: 21px; }
	#csr .example dl dd{ font-size: 19px; }
	
	#csr .proactiveness .item{ min-height: 430px; padding: 30px; }
	#csr .proactiveness .item dl > *{ margin-top: 25px; }
	#csr .proactiveness .item dl dt{ font-size: 21px; }
}

@media screen and (max-width: 1500px){
	#csr .compliance br{ display: none; }
	#csr .compliance .sec .text{ padding: 0 70px; }
}

@media screen and (max-width: 1280px){
	#csr .compliance .sec .text{ padding: 0 40px; }
	#csr .compliance .sec .text dl dt{ font-size: 24px; }
	#csr .compliance .sec .text dl dd{ font-size: 18px; }
	#csr .compliance .sec .text dl dd p{ margin-top: 10px; }
	#csr .compliance .sec .text ul{ margin-top: 20px; }
	#csr .compliance .sec .text ul li{ font-size: 17px; padding-left: 12px; }
	#csr .compliance .sec .text ul li:not(:last-of-type){ margin-bottom: 10px; }
	
	#csr .example{
		--icon: 70px;
	}
	#csr .example dl{ padding: 30px; }
	#csr .example dl dt{ font-size: 22px; padding-left: calc(var(--icon) + 20px); }
	#csr .example dl dt p{ font-size: 20px; margin-top: 7px; }
	#csr .example dl dd{ font-size: 18px; margin-top: 20px; }
	#csr .example .item ul li{ padding-left: 12px; }
	#csr .example ul li:not(:last-of-type){ margin-bottom: 10px; }
	
	#csr .proactiveness .item-wrap{ margin: -10px; }
	#csr .proactiveness .item-wrap > *{ margin: 10px; }
	#csr .proactiveness .item{ min-height: 400px; }
	#csr .proactiveness .item dl > *{ margin-top: 20px; }
	#csr .proactiveness .item dl dt{ font-size: 20px; }
	#csr .proactiveness .item dl dd{ font-size: 17px; }
	#csr .proactiveness .item ul li{ padding-left: 12px; }
}

@media screen and (max-width: 1200px){
	#csr .proactiveness .item-wrap{ grid-template-columns: repeat(2, 50%); }
}

@media screen and (max-width: 1024px){
	#csr .compliance .sec-box .sec:not(:last-of-type){ margin-bottom: 60px; }
	#csr .compliance .sec{ flex-direction: column !important; }
	#csr .compliance .sec > *{ width: 100% !important; }
	#csr .compliance .sec .text{ padding: 20px 0 0; }
	
	#csr .compliance .sec-box .sec:nth-of-type(odd) .text, 
	#csr .compliance .sec-box .sec:nth-of-type(even) .text{ transform: translateY(var(--aosP)); }
}

@media screen and (max-width: 900px){
	#csr .compliance .sec .text dl dt{ font-size: 22px; }
	
	#csr .example{
		--icon: 60px;
	}
	#csr .example dl{ padding: 25px; }
	#csr .example dl dt{ font-size: 21px; }
	#csr .example dl dt p{ font-size: 19px; }
	#csr .example dl dd{ font-size: 17px; }
	
	#csr .proactiveness .item-wrap{ width: calc(100% + 40px); display: block; margin: 0; margin-left: -20px; }
	#csr .proactiveness .item-wrap > *{ margin: 0; }
	#csr .proactiveness .item-wrap .slick-track{ display: flex; }
	#csr .proactiveness .item{ float: unset; width: 400px; min-height: unset; height: auto; margin-right: 20px; }
}

@media screen and (max-width: 850px){
	#csr .whiteBox br{ display: none; }
}

@media screen and (max-width: 600px){
	#csr .example dl dt{ padding-left: 0; }
	#csr .example dl dt .icon{ margin-bottom: 20px; position: static; transform: unset; }
}


/* ABOUT US - Ethical Code */
#code .grid-layout{ display: grid; grid-template-columns: 520px calc(100% - 520px); }
#code .grid-layout .sec-title{ text-align: left; }
#code .grid-layout .left{ padding-right: 30px; opacity: 0; transform: translateX(var(--aosM)); transition: opacity var(--aosT), transform var(--aosT); transition-timing-function: var(--aosTF); }

#code .grid-layout .right,
#code .grid-layout .right *{ font-size: 20px; font-weight: 300; color: #333; letter-spacing: -0.02em; }
#code .grid-layout .right figure{ width: calc(100% + ((var(--vw) - 1600px) / 2)); clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); transition: clip-path var(--aosT); transition-timing-function: var(--aosTF); }
#code .grid-layout .right figure img{ width: 100%; }
#code .grid-layout .right .text{ padding: 60px 0 120px; }
#code .grid-layout .right .text p{ line-height: 1.6; }
#code .grid-layout .right ul{ border-top: 2px solid #000; }
#code .grid-layout .right ul li{ display: flex; align-items: center; border-bottom: 1px solid #E5E5E5; padding: 30px 0; }
#code .grid-layout .right ul li span{ flex-shrink: 0; width: 60px; height: 60px; display: inline-flex; justify-content: center; align-items: center; background: var(--mainColor); font-family: var(--engFont); font-size: 20px; font-weight: 500; color: #FFF; text-align: center; margin-right: 40px; }

#code .grid-layout.aos-animate .left{ opacity: 1; transform: translate(0, 0); }
#code .grid-layout.aos-animate .right figure{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }

@media screen and (max-width: 1700px){
	#code .grid-layout{ grid-template-columns: 400px calc(100% - 400px); }
	
	#code .grid-layout .right,
	#code .grid-layout .right *{ font-size: 19px; }
	#code .grid-layout .right .text{ padding: 40px 0 90px; }
	#code .grid-layout .right ul li{ padding: 25px 0; }
	#code .grid-layout .right ul li span{ width: 55px; height: 55px; font-size: 19px; margin-right: 30px; }
}

@media screen and (max-width: 1640px){
	#code .grid-layout .right figure{ width: calc(100% + 20px); }
}

@media screen and (max-width: 1400px){
	#code .grid-layout{ grid-template-columns: 350px calc(100% - 350px); }
}

@media screen and (max-width: 1280px){
	#code .grid-layout .right,
	#code .grid-layout .right *{ font-size: 18px; }
	#code .grid-layout .right .text{ padding: 30px 0 40px; }
	#code .grid-layout .right ul li{ padding: 20px 0; }
	#code .grid-layout .right ul li span{ width: 50px; height: 50px; font-size: 17px; margin-right: 25px; }
}

@media screen and (max-width: 1200px){
	#code .grid-layout{ grid-template-columns: repeat(1, 100%); }
	#code .grid-layout .left{ padding-right: 0; }
	#code .grid-layout .left br{ display: none; }
	#code .grid-layout .sec-title{ margin-bottom: 20px; }
	
	#code .grid-layout .right figure{ width: calc(100% + 40px); margin-left: -20px; }
}

@media screen and (max-width: 900px){
	#code .grid-layout .right ul li{ padding: 15px 0; }
	#code .grid-layout .right ul li span{ width: 45px; height: 45px; font-size: 16px; }
}



/* 개인정보처리방침 */
#policy .privacy{ letter-spacing: -0.02em; line-height: 1.4; }
#policy .privacy *{ font-size: 17px; font-weight: 300; color: #555; line-height: inherit; }
#policy .pBox{ background: #F8F8F8; text-align: center; padding: 60px; }
#policy .pBox p{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.7;  }
#policy .pBox p:not(:last-of-type){ margin-bottom: 15px; }

#policy .sec-box{ border-top: 1px solid #111; margin-top: 100px; }
#policy .sec-box > *{ padding-top: 100px; }
#policy .sec-box .column > *:not(:last-child){ margin-bottom: 25px; }
#policy .sec-box .column.gap15 > *:not(:last-child){ margin-bottom: 15px; }
#policy .sec-box .lineH170{ line-height: 1.7; }
#policy .sec-box h6{ font-size: 28px; font-weight: 500; color: #111; margin-bottom: 30px; }
#policy .sec-box dl dt{ font-weight: 400; }
#policy .sec-box dl dd{ margin-top: 10px; }
#policy .sec-box ul li:not(:last-of-type){ margin-bottom: 15px; }
#policy .sec-box ul li strong{ font-weight: 400; }

@media screen and (max-width: 1700px){
	#policy .pBox{ padding: 40px; }
	#policy .pBox p{ font-size: 19px; }

	#policy .sec-box{ margin-top: 70px; }
	#policy .sec-box > *{ padding-top: 70px; }
	#policy .sec-box h6{ font-size: 24px; margin-bottom: 20px; }
}

@media screen and (max-width: 1280px){
	#policy .pBox{ padding: 25px; }
	#policy .pBox p{ font-size: 18px; }

	#policy .sec-box{ margin-top: 50px; }
	#policy .sec-box > *{ padding-top: 50px; }
	#policy .sec-box .column > *:not(:last-child){ margin-bottom: 15px; }
	#policy .sec-box .column.gap15 > *:not(:last-child){ margin-bottom: 12px; }
	#policy .sec-box h6{ font-size: 22px; margin-bottom: 15px; }
	#policy .sec-box dl dd{ margin-top: 5px; }
	#policy .sec-box ul li:not(:last-of-type){ margin-bottom: 12px; }
}

@media screen and (max-width: 900px){
	#policy .sec-box h6{ font-size: 20px; }
}