/* 서브 비주얼 배경 이미지 */
#visual .bg1{ background: url("/img/sub/company_bg.jpg") no-repeat center center / cover; }
#visual .bg2{ background: url("/img/sub/group_bg.jpg") no-repeat center center / cover; }
#visual .bg3{ background: url("/img/sub/ir_bg.jpg") no-repeat center center / cover; }
#visual .bg4{ background: url("/img/sub/manage_bg.jpg") no-repeat center center / cover; }
#visual .bg5{ background: url("/img/sub/community_bg.jpg") no-repeat center center / cover; }
#visual .bg6{ background: url("/img/sub/career_bg01.jpg") no-repeat center center / cover; }
#visual .bg10{ background: url("/img/sub/community_bg.jpg") no-repeat center center / cover; }


/* visual */
#visual{ text-align: center; position: relative; }
#visual .bg{ min-height: 350px; padding-bottom: 30.447%; position: relative; }
#visual .bg::after{ content: ""; width: 100%; height: 100%; background: linear-gradient(to bottom, #252C56, transparent); opacity: 0.5; transform: scaleX(1); transform-origin: left; position: absolute; top: 0; left: 0; animation: bgSclaeX 1s 0.3s both; }
#visual .text{ position: absolute; top: 45%; left: 0; right: 0; transform: translateY(-50%); }
#visual .text .fade{ opacity: 1; transform: translateY(var(--aosP)); animation: fadeUp 0.7s 0.7s both; }
#visual .text h2{ font-size: 9rem; font-weight: 500; color: #FFF; margin-bottom: 25px; }


/* lnb */
#lnb ul{ display: flex; justify-content: center; align-items: center; margin: -20px 0; }
#lnb ul li{ position: relative; }
#lnb ul li::before{ content: ""; width: 24px; height: 24px; background: url("/img/sub/lnb_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); }
#lnb ul li:first-child::before{ display: none; }
#lnb a{ display: flex; font-size: 18px; font-weight: 400; color: rgba(255, 255, 255, 0.6); padding: 20px; }
#lnb ul li:last-child a{ color: #FFF; }


/* tab */
#tab{ background: rgba(0, 0, 0, 0.1); position: absolute; bottom: 0; left: 0; right: 0; }
#tab ul{ display: flex; justify-content: center; }
#tab ul li{ max-width: 200px; width: 20%; }
#tab a{ width: 100%; height: 100px; display: flex; justify-content: center; align-items: center; font-size: 19px; font-weight: 500; color: #FFF; padding: 20px; }

#tab ul li.on a{ background: #FFF; font-weight: 600; color: var(--mainColor); }


/* common */
#sub{
	--subPt: 120px;
	--subPb: 200px;

	--arrowURL: url("/img/sub/view_arrow.svg") no-repeat center center / contain;
	--arrowW: 43px;
	--arrowH: 15px;

	--skyRGB: 85, 198, 255;
	--blueRGB: 85, 109, 255;
}
#sub{ padding-top: var(--headerH); }
.sub-content{ padding: var(--subPt) 0 var(--subPb); }
.bBg{ background: url("/img/sub/bottom_bg.jpg") no-repeat bottom center / contain; }
.borderBox{ background: #FFF; border: 1px solid #DDD; }
.point{ color: var(--mainColor) !important; }


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


/* page-title */
.page-title{ text-align: center; margin-bottom: 120px; }
.page-title span{ display: block; font-family: var(--engFont); font-size: 20px; font-weight: 600; color: var(--mainColor); margin-bottom: 40px; }
.page-title h3{ font-size: 5rem; font-weight: 600; color: #111; line-height: 1.5; }
.page-title p{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.6; margin-top: 30px; }

/* clipL, clipR */
.clipL, 
.clipR{ opacity: 1 !important; transition-duration: var(--aosT) !important; transition-property: clip-path !important; }
.clipL{ clip-path: inset(0 100% 0 0); -webkit-clip-path: inset(0 100% 0 0); }
.clipR{ clip-path: inset(0 0 0 100%); -webkit-clip-path: inset(0 0 0 100%); }

.clipL.aos-animate,
.clipR.aos-animate{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }


/* grid-layout */
.grid-layout{ display: grid; grid-template-columns: 360px calc(100% - 360px); }
.grid-layout .left{ padding-right: 20px; }
.grid-layout .left h4{ font-size: 4rem; font-weight: 600; color: #111; }


/* .blueBtn */
.blueBtn{ width: max-content; display: flex; justify-content: center; align-items: center; background: var(--mainColor); font-size: 20px; font-weight: 400; color: #FFF !important; padding: 27px 55px; }
.blueBtn i{ display: inline-block; width: var(--arrowW); height: var(--arrowH); background: var(--arrowURL); margin-left: 10px; }

@media screen and (max-width: 1920px){
	.bBg{ background-size: auto; }
}

@media screen and (max-width: 1700px){
	/* tab */
	#tab a{ height: 80px; font-size: 18px; }

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

	/* 간격 */
	.pt160{ padding-top: 120px; }
	.pb160{ padding-bottom: 120px; }
	.pt120{ padding-top: 100px; }
	.pb120{ padding-bottom: 100px; }
	.pt100{ padding-top: 80px; }
	.pb100{ padding-bottom: 80px; }

	/* page-title */
	.page-title{ margin-bottom: 80px; }
	.page-title span{ font-size: 18px; margin-bottom: 30px; }
	.page-title p{ font-size: 19px; margin-top: 20px; }

	/* grid-layout */
	.grid-layout{ grid-template-columns: 300px calc(100% - 300px); }

	/* .blueBtn */
	.blueBtn{ font-size: 18px; padding: 22px 40px; }
}

@media screen and (max-width: 1280px){
	/* visual */
	#visual .text h2{ font-size: 8rem; margin-bottom: 15px; }

	/* tab */
	#tab a{ height: 60px; font-size: 17px; }

	/* common */
	#sub{
		--subPt: 60px;
		--subPb: 100px;

		--arrowW: 30px;
		--arrowH: 12px;
	}

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

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

	/* grid-layout */
	.grid-layout{ grid-template-columns: 250px calc(100% - 250px); }

	/* .blueBtn */
	.blueBtn{ font-size: 17px; padding: 17px 20px; }
}

@media screen and (max-width: 1200px){
	/* grid-layout */
	.grid-layout{ grid-template-columns: repeat(1, 100%); }
	.grid-layout .left{ padding-right: 0; padding-bottom: 20px; }
}

@media screen and (max-width: 900px){
	/* visual */
	#visual .bg{ min-height: 300px; }
	#visual .text h2{ font-size: 7rem; }

	/* lnb */
	#lnb a{ font-size: 17px; }

	/* page-title */
	.page-title span{ margin-bottom: 10px; }
	.page-title h3.long{ font-size: 4.5rem; }
}

@media screen and (max-width: 700px){
	/* visual */
	#visual .bg{ min-height: 250px; }
	#visual .text{ top: 50%; }

	/* tab */
	#tab{ display: none; }
}


/* 회사소개 - 회사개요 */
#overview .page-title{ margin-bottom: 60px; }
#overview .intro .page-title{ margin-bottom: 80px; }

#overview .borderBox{ min-height: 540px; display: flex; align-items: center; text-align: center; padding: 100px; }
#overview .borderBox .flex-box{ display: flex; align-items: center; }
#overview .borderBox .inner{ max-width: 1280px; width: 100%; margin: 0 auto; }
#overview .borderBox p{ font-size: 36px; font-weight: 500; color: #FFF; line-height: 1.4; padding: 0 40px; position: absolute; top: 50%; left: 0; right: 0; z-index: 10; transform: translateY(-50%); }
#overview .borderBox .arrow{ flex: 1 0 auto; display: block; position: relative; }
#overview .borderBox .arrow::before{ content: ""; display: block; height: 1px; border-bottom: 2px dashed #3B50D0; }
#overview .borderBox .arrow::after{ content: ""; width: 16px; height: 28px; background: url("/img/sub/blue_arrow.svg") no-repeat center center / contain; position: absolute; top: calc(50% + 1px); right: -2px; transform: translateY(-50%); }


#overview .diagram01 .flex-box{ justify-content: space-between; }
#overview .diagram01 .arrow{ margin: 0 60px; }
#overview .diagram01 .circle{ display: flex; }
#overview .diagram01 .circle > *{ width: 300px; position: relative; }
#overview .diagram01 .circle > *:not(:last-child){ margin-right: -40px; }
#overview .diagram01 .circle > *::before{ content: ""; display: block; background: var(--bg); border-radius: 50%; padding-bottom: 100%; }

#overview .diagram01 .square{ width: 450px; }
#overview .diagram01 .square ul li{ width: 100%; min-height: 90px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background: linear-gradient(to right, #F2F4FA, #E2E7F8); font-size: 24px; font-weight: 600; color: #3B50D0; padding: 10px; }
#overview .diagram01 .square ul li:not(:last-of-type){ margin-bottom: 10px; }


#overview .diagram02 .arrow{ margin: 0 30px; }
#overview .diagram02 .arrow01::before{ border-color: #55A1D5 !Important; }
#overview .diagram02 .arrow01::after{ background-image: url("/img/sub/sky_arrow.svg"); }
#overview .diagram02  .item{ width: 300px; position: relative; }
#overview .diagram02  .item::before{ content: ""; display: block; border-radius: 50%; padding-bottom: 100%; }
#overview .diagram02 .span{ width: 120%; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: 50px 0 20px; position: absolute; top: 50%; left: 50%; z-index: 20; transform: translate(-50%, -50%); }
#overview .diagram02 .span span{ max-width: max-content; display: block; background: #FFF; border-radius: 5px; box-shadow: 0 0 10px rgba(82, 83, 94, 0.15); font-size: 20px; font-weight: 600; color: #3B50D0; padding: 10px 25px; }
#overview .diagram02 .span span:last-of-type{ margin-left: auto; }

#overview .diagram02  .item01::before{ background: rgba(var(--skyRGB), 0.8); }
#overview .diagram02  .item03::before{ background: linear-gradient(to bottom, #556DFF, #334199); opacity: 0.8; }

#overview .diagram02  .item02{ width: 340px; border: 1px dashed #3B50D0; border-radius: 50%; }
#overview .diagram02  .item02::after{ content: ""; width: 130%; height: 130%; background: radial-gradient(43% 43% at 50% 50%,  #5590FF 0%, transparent 100%); border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }


#overview .motion{
	--ptb: 150px;
	--plr: calc((100% - 1680px) / 2);
}
#overview .motion{ position: relative; }
#overview .motion .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#overview .motion .bg > div{ height: 100vh; display: flex; flex-direction: column; justify-content: center; position: sticky; position: -webkit-sticky; top: 0; left: 0; background: url("/img/sub/company/overview_img02.jpg") no-repeat center center / cover; clip-path: inset(var(--ptb) var(--plr) var(--ptb) var(--plr)); -webkit-clip-path: inset(var(--ptb) var(--plr) var(--ptb) var(--plr)); transition: clip-path var(--aosT); opacity: 1 !important; }

#overview .motion .item-box{ padding-bottom: 100vh; position: relative; z-index: 100; }
#overview .motion .item{ width: 100%; height: 100vh; }
#overview .motion .item .box{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
#overview .motion .item .box .sticky{ height: 100vh; display: flex; flex-direction: column; justify-content: center; position: sticky; position: -webkit-sticky; top: 0; left: 0; }
#overview .motion .item h4{ font-size: 5.4rem; font-weight: 500; color: #FFF; line-height: 1.5; text-align: center; transform: translateY(var(--aosP)); opacity: 0; transition: transform var(--aosT), opacity var(--aosT); }

#overview .motion .item.active h4{ transform: translateY(0); opacity: 1; }

#overview .motion .scrollDown{ padding-bottom: 130px; position: absolute; bottom: 0; left: 0; right: 0; opacity: 0; transition: opacity var(--aosT) var(--aosT); }
#overview .motion .scrollDown div{ width: 24px; height: 40px; display: flex; justify-content: center; border: 2px solid #FFF; border-radius: 999px; padding: 9px 0; text-align: center; overflow: hidden; margin: 0 auto; }
#overview .motion .scrollDown i{ display: block; width: 6px; height: 6px; background: #FFF; border-radius: 50%; margin: 0 auto; position: relative; animation: scrollDown2 1.2s infinite; }

#overview .motion .bg > div.aos-animate{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#overview .motion .bg > div.aos-animate .scrollDown{ opacity: 1; }


#overview .gc .grid-box{ display: grid; grid-template-columns: repeat(5, 20%); margin: -10px; }
#overview .gc .item{ display: flex; flex-direction: column; margin: 10px; position: relative; }
#overview .gc .item > div{ flex: 1 0 auto; min-height: 355px; display: flex; flex-direction: column; background: #F9F9F9; padding: 50px; }
#overview .gc .item > div > *{ position: relative; z-index: 10; }
#overview .gc .icon{ flex: 1 0 auto; margin-bottom: 70px; }
#overview .gc .icon img{ filter: unset; -webkit-filter: unset; transition: filter 0.2s 0.2s; }
#overview .gc dl *{ transition: color 0.4s; }
#overview .gc dl dt{ font-size: 20px; font-weight: 500; color: var(--mainColor); margin-bottom: 10px; }
#overview .gc dl dd{ font-size: 22px; font-weight: 600; color: #333; }

@media screen and (hover: hover){
	#overview .gc .item::before{ content: ""; width: 100%; height: 100%; background: var(--mainColor); position: absolute; top: 0; left: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.4s; }

	#overview .gc .item:hover::before{ transform: scaleX(1); }
	#overview .gc .item:hover .icon img{ filter: grayscale(1) brightness(5); -webkit-filter: grayscale(1) brightness(5); transition-delay: unset; }
	#overview .gc .item:hover dl dt{ color: rgba(255, 255, 255, 0.6); }
	#overview .gc .item:hover dl dd{ color: #FFF; }
}

@media screen and (max-width: 1700px){
	#overview .page-title{ margin-bottom: 40px; }
	#overview .intro .page-title{ margin-bottom: 60px; }

	#overview .borderBox{ min-height: 500px; padding: 70px; } 
	#overview .borderBox p{ font-size: 30px; }

	#overview .diagram01 .arrow{ margin: 0 40px; }
	#overview .diagram01 .circle > *{ width: 270px; }
	#overview .diagram01 .square{ width: 400px; }
	#overview .diagram01 .square ul li{ min-height: 80px; font-size: 22px; }

	#overview .diagram02 .item{ width: 270px; }
	#overview .diagram02 .item02{ width: 300px; }
	#overview .diagram02 .span{ padding: 30px 0 15px; }
	#overview .diagram02 .span span{ font-size: 18px; padding: 8px 20px; }

	#overview .motion{
		--ptb: 110px;
		--plr: 20px;
	}

	#overview .gc .item > div{ min-height: 330px; padding: 35px; }
	#overview .gc dl dt{ font-size: 18px; }
	#overview .gc dl dd{ font-size: 20px; }
}

@media screen and (max-width: 1280px){
	#overview .page-title{ margin-bottom: 30px; }
	#overview .intro .page-title{ margin-bottom: 20px; }

	#overview .borderBox{ min-height: 450px; padding: 40px; } 
	#overview .borderBox .arrow::after{ width: 10px; }
	#overview .borderBox p{ font-size: 24px; }

	#overview .diagram01 .arrow{ margin: 0 30px; }
	#overview .diagram01 .circle > *{ width: 250px; }
	#overview .diagram01 .square{ width: 350px; }
	#overview .diagram01 .square ul li{ min-height: 70px; font-size: 20px; }

	#overview .diagram02 .item{ width: 220px; }
	#overview .diagram02 .item02{ width: 250px; }
	#overview .diagram02 .span{ padding: 30px 10px 15px; }
	#overview .diagram02 .span span{ font-size: 17px; padding: 8px 15px; }

	#overview .motion{
		--ptb: 80px;
	}

	#overview .gc .grid-box{ grid-template-columns: repeat(3, calc(100% / 3)); }
	#overview .gc .item{ transition-delay: unset !important; }
	#overview .gc .item > div{ min-height: auto; padding: 25px; }
	#overview .gc .icon img{ width: 50px; }
	#overview .gc dl dt{ font-size: 17px; }
	#overview .gc dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1100px){
	#overview .borderBox{ padding: 25px; }

	#overview .diagram01 .arrow{ margin: 0 25px; }
	#overview .diagram01 .circle > *{ width: 220px; }
	#overview .diagram01 .circle > *:not(:last-child){ margin-right: -25px; }
	#overview .diagram01 .square{ width: 300px; }
	#overview .diagram01 .square ul li{ min-height: 60px; }

	#overview .diagram02 .item{ width: 180px; }
	#overview .diagram02 .item02{ width: 220px; }
	#overview .diagram02 .arrow{ margin: 0 25px; }
	#overview .diagram02 .span{ padding: 15px 10px; }
}

@media screen and (max-width: 1000px){
	#overview .flex-box{ flex-direction: column; }
	#overview .borderBox .arrow{ width: 1px; height: 80px; border-bottom: none; border-right: 2px dashed #3B50D0; }
	#overview .borderBox .arrow::after{ top: calc(100% - 2px); right: calc(50% - 1px); transform: translate(50%, -50%) rotate(90deg); }

	#overview .diagram01 .circle > *{ width: 200px; }
	#overview .diagram01 .arrow{ margin: -20px 0 20px; }

	#overview .diagram02 .arrow{ margin: 20px 0; }
}

@media screen and (max-width: 900px){
	#overview .intro .page-title br{ display: block; }
	#overview .intro .page-title em{ display: block; }

	#overview .borderBox p{ font-size: 20px; }

	#overview .diagram01 .square ul li{ font-size: 18px; }

	#overview .motion h4{ font-size: 5rem; }

	#overview .gc .item > div{ padding: 20px; }
}

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

	#overview .motion br{ display: none; }

	#overview .gc .grid-box{ grid-template-columns: repeat(2, 50%); }
}


/* 회사소개 - 비전 */
#vision .diagram{ overflow: hidden; margin: -20px 0; }
#vision .diagram dl{ display: grid; grid-template-columns: 420px calc(100% - 420px); margin: 0 -30px; }
#vision .diagram dl > *{ margin: 20px 30px; }
#vision .diagram dl dt{ border-top: 1px solid #BBB; font-size: 22px; font-weight: 600; color: var(--mainColor); padding: 15px 10px; }
#vision .diagram dl dd{ text-align: center; position: relative; z-index: 10; }
#vision .diagram h6{ font-family: var(--engFont); font-size: 30px; font-weight: 600; color: var(--mainColor); }
#vision .diagram p{ font-size: 20px; font-weight: 500; color: #454545; margin-top: 20px; }
#vision .diagram ul{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -10px; }
#vision .diagram ul li{ display: flex; flex-direction: column; justify-content: center; background: #F1F2F9; font-size: 24px; font-weight: 600; color: var(--mainColor); padding: 50px 20px; margin: 10px; }
#vision .diagram ul li span{ font-size: 17px; font-weight: 500; color: #454545; margin-top: 12px; }

#vision .diagram .dl02 dd,
#vision .diagram .dl04 dd{ padding: 50px; }

#vision .diagram .dl01 dd{ padding: 77px 0; }
#vision .diagram .dl01 dd::before{ content: ""; width: 100%; height: 100%; background: #D9D9D9; opacity: 0.3; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%); position: absolute; top: 0; left: 0; z-index: -1; }

#vision .diagram .dl02 dd{ background: var(--mainColor); }
#vision .diagram .dl02 h6{ color: #FFF; }
#vision .diagram .dl02 p{ font-weight: 400; color: rgba(255, 255, 255, 0.6); }

#vision .diagram .dl04 dd{ background: url("/img/sub/company/vision_bg.jpg") no-repeat center center / cover; border: 1px solid #EEE; }

@media screen and (max-width: 1700px){
	#vision .diagram dl{ grid-template-columns: 320px calc(100% - 320px); }
	#vision .diagram dl dt{ font-size: 20px; }
	#vision .diagram h6{ font-size: 26px; }
	#vision .diagram p{ font-size: 19px; }
	#vision .diagram ul li{ font-size: 21px; padding: 40px 20px; }

	#vision .diagram .dl02 dd,
	#vision .diagram .dl04 dd{ padding: 40px; }

	#vision .diagram .dl01 dd{ padding: 60px 0; }
}

@media screen and (max-width: 1280px){
	#vision .diagram dl{ grid-template-columns: 280px calc(100% - 280px); }
	#vision .diagram dl dt{ font-size: 19px; }
	#vision .diagram h6{ font-size: 22px; }
	#vision .diagram p{ font-size: 18px; margin-top: 10px; }
	#vision .diagram ul li{ font-size: 19px; padding: 30px 15px; }
	#vision .diagram ul li span{ font-size: 16px; margin-top: 5px; }

	#vision .diagram .dl02 dd,
	#vision .diagram .dl04 dd{ padding: 25px; }

	#vision .diagram .dl01 dd{ padding: 40px 0; }
}

@media screen and (max-width: 1000px){
	#vision .diagram{ margin: -40px 0; }
	#vision .diagram dl{ grid-template-columns: repeat(1, 100%); margin: 40px 0; }
	#vision .diagram dl > *{ margin: 0; }
	#vision .diagram dl dt{ padding: 10px; }
}

@media screen and (max-width: 900px){
	#vision .diagram h6{ font-size: 20px; }
	#vision .diagram p{ font-size: 17px; }
	#vision .diagram ul li{ font-size: 18px; }
}

@media screen and (max-width: 700px){
	#vision .diagram ul{ grid-template-columns: repeat(1, 100%); margin: -5px; }
	#vision .diagram ul li{ padding: 15px; margin: 5px; }
}


/* 회사소개 - 조직도 */
#organization picture{ display: block; text-align: center; }


/* 회사소개 - 연혁 */
#history .grid-box{ display: grid; grid-template-columns: 54% 46%; }
#history .left{ padding-right: 115px; }
#history .right{ padding-left: 115px; position: relative; }
#history .sticky{ position: sticky; position: -webkit-sticky; top: calc(50% - (var(--stickyH) / 2)); left: 0; }

#history .bar{ width: 1px; height: calc(100% - 22px); background: #DDD; position: absolute; top: 22px; left: 0; }
#history .bar span{ width: 11px; height: 11px; background: var(--mainColor); box-shadow: 0 0 0 10px rgba(var(--mainRGB), 0.1); border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); }
#history .bar div{ width: 2px; height: 0; background: var(--mainColor); transform: translateX(-50%); position: relative; will-change: height; }
#history .bar div::after{ content: ""; width: 6px; height: 6px; background: var(--mainColor); border-radius: 50%; position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); }

#history .txt{ display: flex; justify-content: space-between; align-items: flex-end; }
#history .txt h5{ font-size: 6rem; font-weight: 600; color: #151515; }
#history .txt p{ font-size: 20px; font-weight: 600; color: var(--blue); }

#history .img-wrap{ margin: 25px 0 15px; }
#history .img{ opacity: 1 !important; z-index: 998 !important; }
#history .img figure{ display: block; padding-bottom: 45.5%; overflow: hidden; position: relative; transition: clip-path var(--speed); }
#history .img figure img{ width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

#history .img.prev{ z-index: 999 !important; }
#history .img.slick-active{ z-index: 1000 !important; }
#history .img.slick-active figure{ animation: bgClip var(--duration) both; }

#history .shadow{ box-shadow: 2px 2px 20px rgba(123, 159, 184, 0.1); padding: 15px; }
#history .grid{ display: grid; grid-template-columns: repeat(23, 1fr); grid-template-rows: repeat(10, 1fr); }
#history .grid > *{ margin: -5px; }
#history .grid > *{ background: #F6FBFF; border-radius: 10px; text-align: center; margin: 5px; position: relative; }
#history .grid dl{ display: flex; flex-direction: column; justify-content: center; padding: 20px 10px; position: relative; }
#history .grid dl dt{ font-size: 14px; font-weight: 600; color: #85B1D3; }
#history .grid dl dd{ font-size: 19px; font-weight: 500; color: #151515; margin-top: 5px; }
#history .grid > div dl{ height: 50%; }
#history .grid > div dl::after{ content: ""; width: calc(100% - 40px); height: 1px; background: #E9F2F9; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
#history .grid > div dl:last-child::after{ display: none; }
#history .grid .dl04::after{ content: ""; width: 50%; height: 100%; background: url("/img/sub/company/history_arrow.svg") no-repeat center left / contain; position: absolute; top: 0; right: 2px; transform: translateX(100%); pointer-events: none; }

#history .grid .dl01{ grid-column: auto / span 6; grid-row: auto / span 4; }
#history .grid .dl02{ grid-column: auto / span 11; grid-row: auto / span 3; }
#history .grid .dl03{ grid-column: auto / span 6; grid-row: auto / span 11; }
#history .grid .dl04{ grid-column: auto / span 5; grid-row: auto / span 7; margin-right: 13px; z-index: 10; }
#history .grid .dl05{ grid-column: auto / span 6; grid-row: auto / span 7; margin-left: 13px; }
#history .grid .dl06{ grid-column: auto / span 6; grid-row: auto / span 6; }


#history section dl{ padding-top: 120px; }
#history section:first-of-type dl:first-of-type{ padding-top: 0 !important; }
#history section dl dt{ font-family: var(--engFont); font-size: 32px; font-weight: 700; color: var(--mainColor); line-height: 1.1; margin-bottom: 20px; }
#history section dl dd{ font-size: 20px; font-weight: 500; color: #333; padding-left: 20px; position: relative; }
#history section dl dd:not(:last-child){ margin-bottom: 15px; }
#history section dl dd::before{ content: ""; width: 4px; height: 4px; background: #333; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }

@media screen and (max-width: 1700px){
	#history .bar{ height: calc(100% - 15px); top: 15px; }

	#history .txt p{ font-size: 18px; }

	#history .grid dl dd{ font-size: 18px; }
	#history .grid .dl04::after{ width: 30%; }

	#history section dl{ padding-top: 80px; }
	#history section dl dt{ font-size: 26px; }
	#history section dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1500px){
	#history .left{ padding-right: 80px; }
	#history .right{ padding-left: 80px; }
}

@media screen and (max-width: 1400px){
	#history .txt{ flex-direction: column; align-items: flex-start; }
	#history .txt p{ margin-top: 5px; }
}

@media screen and (max-width: 1280px){
	#history .left{ padding-right: 50px; }
	#history .right{ padding-left: 50px; }

	#history .bar span{ width: 8px; height: 8px; box-shadow: 0 0 0 7px rgba(var(--mainRGB), 0.1); }

	#history .txt p{ font-size: 17px; }

	#history .grid dl{ padding: 10px; }
	#history .grid dl dd{ font-size: 16px; }
	#history .grid .dl04{ margin-right: 5px; }
	#history .grid .dl04::after{ width: 25%; }
	#history .grid .dl05{ margin-left: 5px; }

	#history section dl{ padding-top: 60px; }
	#history section dl dt{ font-size: 22px; margin-bottom: 10px; }
	#history section dl dd{ font-size: 17px; padding-left: 15px; }
	#history section dl dd:not(:last-child){ margin-bottom: 10px; }
}

@media screen and (max-width: 1200px){
	#history .grid-box{ grid-template-columns: repeat(1, 100%); }
	#history .left{ padding-right: 0; margin-bottom: 30px; }
	#history .right{ padding-left: 40px; }

	#history .bar{ left: 7px; }

	#history .txt-wrap, 
	#history .img-wrap{ display: none; }
}

@media screen and (max-width: 900px){
	#history section dl dt{ font-size: 21px; }
}

@media screen and (max-width: 650px){
	#history .shadow{ padding: 5px; }
	#history .grid .dl01{ grid-column: auto / span 7; }
	#history .grid .dl02{ grid-column: auto / span 10; }
	#history .grid .dl03{ grid-column: auto / span 6; }
	#history .grid .dl04{ grid-column: auto / span 5; }
	#history .grid .dl05{ grid-column: auto / span 5; }
	#history .grid .dl06{ grid-column: auto / span 7; }

	#history .grid dl dd{ font-size: 15px; }
}


/* 회사소개 - 오시는 길 */
#location .iframe{ border: 1px solid #DDD; }
#location .root_daum_roughmap{ width: 100% !important; }
#location .root_daum_roughmap .wrap_map{ height: 680px !important; }
#location .root_daum_roughmap .map_border{ display: none; }
#location .root_daum_roughmap .cont .section{ display: none; }

#location address{ display: block; margin-top: 40px; }
#location address .grid{ display: grid; grid-template-columns: repeat(4, 25%); margin: -10px; }
#location address dl{ margin: 10px; }
#location address dl:not(:last-of-type){ border-right: 1px solid #DDD; padding-right: 20px; }
#location address dl dt{ font-family: var(--engFont); font-size: 22px; font-weight: 500; color: var(--mainColor); padding-left: 40px; position: relative; }
#location address dl dt::before{ content: ""; width: 24px; height: 25px; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#location address dl dd{ font-size: 20px; font-weight: 300; color: #333; margin-top: 15px; }

#location address dl.address dt::before{ background: url("/img/sub/company/address_icon.svg") no-repeat center center / contain; }
#location address dl.tel dt::before{ background: url("/img/sub/company/tel_icon.svg") no-repeat center center / contain; }
#location address dl.fax dt::before{ background: url("/img/sub/company/fax_icon.svg") no-repeat center center / contain; }
#location address dl.parking dt::before{ background: url("/img/sub/company/parking_icon.svg") no-repeat center center / contain; }

@media screen and (max-width: 1700px){
	#location .root_daum_roughmap .wrap_map{ height: 550px !important; }
	#location address dl dt{ font-size: 20px; }
	#location address dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#location .root_daum_roughmap .wrap_map{ height: 500px !important; }

	#location address{ margin-top: 30px; }
	#location address dl dt{ font-size: 19px; padding-left: 35px; }
	#location address dl dd{ font-size: 17px; margin-top: 10px; }
}

@media screen and (max-width: 1100px){
	#location address .grid{ grid-template-columns: repeat(2, 50%); margin: 0; }
	#location address dl{ padding: 20px; border-top: 1px solid #DDD; margin: 0; }
	#location address dl:nth-of-type(odd){ padding-left: 0; }
	#location address dl:nth-of-type(even){ border-right: none; padding-right: 0; }
	#location address dl:nth-of-type(1),
	#location address dl:nth-of-type(2){ border-top: none; }
}

@media screen and (max-width: 900px){
	#location .root_daum_roughmap .wrap_map{ height: 450px !important; }

	#location address dl dt{ padding-left: 30px; }
	#location address dl dt::before{ width: 22px; height: 22px; }
}

@media screen and (max-width: 600px){
	#location address .grid{ grid-template-columns: repeat(1, 100%); }
	#location address dl{ border-top: 1px solid #DDD !important; border-right: none !important; border-bottom: 1px solid #DDD; margin-bottom: -1px; padding: 20px 10px !important; }
}


/* 그룹소개 - 그룹사 소개 */
#group .grid-box{ display: grid; grid-template-columns: repeat(4, 25%); margin: -40px -10px; }
#group .grid-box > *{ display: flex; flex-direction: column; margin: 40px 10px; }
#group dl *{ width: 100%; }
#group dl dt{ border-bottom: 3px solid var(--mainColor); font-size: 24px; font-weight: 600; color: var(--mainColor); text-align: center; padding-bottom: 33px; margin-bottom: 20px; }
#group dl dd{ flex: 1 0 auto; display: flex; justify-content: space-between; cursor: pointer; }
#group dl dd > div{ width: calc((100% - 20px) / 2); display: flex; flex-direction: column; }
#group dl dd > div:only-child{ width: 100%; }

#group .box{ flex: 1 0 auto; display: flex; flex-direction: column; background: #F1F2F9; position: relative; z-index: 10; padding: 40px 50px; }
#group .box .bg{ opacity: 1 !important; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; overflow: hidden; }
#group .box .bg::after{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0; }
#group .box .bg img{ width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 0.5s; }
#group .box ul{ flex: 1 0 auto; }
#group .box ul li{ font-size: 20px; font-weight: 400; color: #333; line-height: 1.5; position: relative; padding-left: 17px; }
#group .box ul li:not(:last-of-type){ margin-bottom: 25px; }
#group .box ul li::before{ content: ""; width: 5px; height: 5px; background: #333; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%): }
#group .box a{ display: flex; align-items: center; font-family: var(--engFont); font-size: 24px; font-weight: 400; color: #333; line-height: 1.5; margin-top: 30px; }
#group .box a i{ width: var(--arrowW); height: var(--arrowH); display: inline-block; background: var(--arrowURL); margin-left: 6px; filter: invert(1); -webkit-filter: invert(1); transition: transform 0.4s; }

#group figure{ display: block; margin-top: 20px; }
#group figure img{ width: auto; }

#group .dl01{ grid-column: auto / span 2; }

@media (hover: hover) and (pointer: fine) {
	/* #group .box .bg::after{ transform: scaleY(0); transform-origin: bottom; transition: transform 0.4s; }
	#group .box > *{ opacity: 0; transition: opacity 0.4s; } */

	/* #group dl dd > div:hover .box > *{ opacity: 1; transition-delay: 0.2s; }
	#group dl dd > div:hover .box .bg::after{ transform: scaleY(1); } */
	#group dl dd > div:hover .box .bg img{ transform: scale(1.07); }
	#group .box a:hover i{ transform: translateX(10px); }
}

@media screen and (max-width: 1700px){
	#group dl dt{ font-size: 22px; padding-bottom: 23px; }

	#group .box{ padding: 30px 35px; }
	#group .box ul li{ font-size: 18px; }
	#group .box a{ font-size: 22px; /* margin-top: 100px; */ }
}

@media screen and (max-width: 1280px){
	#group dl dt{ font-size: 20px; padding-bottom: 18px; }

	#group .box{ padding: 25px; }
	#group .box ul li{ font-size: 17px; padding-left: 15px; }
	#group .box ul li:not(:last-of-type){ margin-bottom: 15px; }
	#group .box ul li::before{ width: 4px; height: 4px; }
	#group .box a{ font-size: 20px; /* margin-top: 70px; */ }

	#group figure{ margin-top: 10px; }
}

@media screen and (max-width: 1200px){
	#group .grid-box{ grid-template-columns: repeat(2, 50%); }
	#group .grid-box > *{ transition-delay: unset !important; }
}

@media screen and (max-width: 900px){
	#group dl dt{ padding-bottom: 13px; }

	#group .box a{ font-size: 18px; }
}

@media screen and (max-width: 650px){
	#group .grid-box{ grid-template-columns: repeat(1, 100%); }
	#group dl dd{ flex-direction: column; }
	#group dl dd > div{ width: 100%; }
	#group dl dd > div:not(:last-of-type){ margin-bottom: 40px; }

	#group .dl01{ grid-column: auto / span 1; }
}


/* 그룹소개 - 글로벌 네트워크 */
#network .page-title{ margin-bottom: 100px; }
#network svg{ width: 100%; height: auto; }
#network .svg .circle circle:not(.dot){ transform: scale(0); opacity: 1; transform-box: content-box; transform-origin: center; }

#network .svg .domestic .circle circle:not(.dot){ animation: mapCircle01 2.5s linear infinite; }
#network .svg .domestic .circle circle:nth-of-type(2){ animation-duration: 2.6s; }

#network .svg .overseas circle:not(.dot){ animation: mapCircle02 2.5s linear infinite; }
#network .svg .overseas circle:nth-of-type(2){ animation-duration: 2.7s; }

#network .country{
	--stickyT: 60px;
	--stickyH: 80px;
}
#network .country .grid-box{ display: grid; grid-template-columns: repeat(5, 20%); margin: -5px; }
#network .country .grid-box > *{ margin: 5px; position: relative; }
#network .country .top{ width: calc(100% + 10px); height: 100%; position: absolute; top: 0; left: -5px; z-index: 100; pointer-events: none; }
#network .country .sticky{ position: sticky; position: -webkit-sticky; top: 0; left: 0; }
#network .country .sticky > div{ background: #FFF; padding: var(--stickyT) 5px 0; }
#network .country .sticky > div *{ pointer-events: auto; }
#network .country h4{ height: var(--stickyH); display: flex; justify-content: center; align-items: center; border: 1px solid var(--mainColor); font-size: 22px; font-weight: 600; color: var(--mainColor); padding: 0 20px; margin-bottom: 10px; }
#network .country h4 i{ display: inline-block; width: 36px; height: 36px; background-repeat: no-repeat; background-position: center center; background-size: contain; border-radius: 50%; margin-right: 15px; }

#network .country .top + address{ margin-top: calc(var(--stickyT) + var(--stickyH) + 10px); }
#network .country address{ background: #FAFAFA; padding: 30px; margin-top: 10px; transition: background 0.4s; }
#network .country address h5,
#network .country address ul li{ transition: color 0.4s; }
#network .country address h5{ font-size: 20px; font-weight: 600; color: #333; margin-bottom: 20px; }
#network .country address ul{ display: flex; flex-wrap: wrap; margin: -5px -10px; }
#network .country address ul li{ font-size: 17px; font-weight: 500; color: #777; padding-left: 30px; margin: 5px 10px; position: relative; }
#network .country address ul li::before{ content: ""; width: 22px; height: 22px; background-repeat: no-repeat; background-position: center center; background-size: contain; filter: unset; -webkit-filter: unset; transition: filter 0.4s; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }
#network .country address ul li.local::before{ background-image: url("/img/sub/group/local_icon.svg"); }
#network .country address ul li.build::before{ background-image: url("/img/sub/group/build_icon.svg"); }

@media screen and (hover: hover){
	#network .country address:hover{ background: var(--mainColor); }
	#network .country address:hover h5{ color: #FFF; }
	#network .country address:hover ul li{ color: rgba(255, 255, 255, 0.8); }
	#network .country address:hover ul li::before{ filter: brightness(5) opacity(0.8); -webkit-filter: brightness(5) opacity(0.8); }
}

@media screen and (max-width: 1700px){
	#network .country{
		--stickyH: 70px;
	}
	#network .page-title{ margin-bottom: 70px; }

	#network .country h4{ font-size: 20px; }
	#network .country h4 i{ width: 30px; height: 30px; }

	#network .country address{ padding: 20px; }
	#network .country address h5{ font-size: 18px; }
	#network .country address ul li{ padding-left: 27px; }
	#network .country address ul li::before{ width: 20px; height: 20px; }
}

@media screen and (max-width: 1400px){
	#network .country{
		--stickyT: 40px;
		--stickyH: 60px;
	}
	#network .country h4{ font-size: 18px; padding: 15px; }
	#network .country h4 i{ width: 25px; height: 25px; }

	#network .country address h5{ font-size: 17px; margin-bottom: 12px; }
	#network .country address ul li{ font-size: 16px; padding-left: 25px; }
	#network .country address ul li::before{ width: 18px; height: 18px; }
}

@media screen and (max-width: 1280px){
	#network .page-title{ margin-bottom: 30px; }
}

@media screen and (max-width: 1200px){
	#network .country .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); }
	#network .country .grid-box > *:not(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)) .top{ position: static; }
	#network .country .grid-box > *:not(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)) .sticky{ height: auto !important; }
}

@media screen and (max-width: 900px){
	#network .country{
		--stickyH: 55px;
	}

	#network .country h4{ font-size: 17px; }
	#network .country h4 i{ width: 22px; height: 22px; margin-right: 10px; }

	#network .country address h5{ font-size: 16px; }
	#network .country address ul li{ font-size: 15px; padding-left: 22px; }
	#network .country address ul li::before{ width: 17px; height: 17px; top: calc(1.2em / 2); }
}

@media screen and (max-width: 800px){
	#network .country .grid-box{ display: grid; grid-template-columns: repeat(2, 50%); }
	#network .country .grid-box > *:nth-of-type(3) .top{ position: static; }
	#network .country .grid-box > *:nth-of-type(3) .sticky{ height: auto !important; }
}


/* IR - 공시 */
#announce .scroll-bar{ max-width: 100%; width: max-content; margin: 0 auto; }


/* IR - 그룹 재무정보 */
#finance section{ margin-bottom: -20px; }
#finance .tit{ display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 25px; }
#finance .tit h4{ font-size: 36px; font-weight: 600; color: #111; }
#finance .tit p{ font-size: 16px; font-weight: 300; color: #999; }

#finance .scroll-bar{ overflow-x: auto; overflow-y: clip; padding-bottom: 20px; }
#finance .scroll-bar.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle, 
#finance .scroll-bar.os-theme-light > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle, 
#finance .scroll-bar.os-theme-dark > .os-scrollbar > .os-scrollbar-track, 
#finance .scroll-bar.os-theme-light > .os-scrollbar > .os-scrollbar-track{ height: 1px; background: #DDD; }
#finance .scroll-bar.os-theme-dark > .os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle{ height: 8px; background: #353535; top: -4px; }

#finance .table table{ min-width: 1600px; border-top: 2px solid #000; }
#finance .table colgroup col.th{ width: 240px; }
#finance .table th,
#finance .table td{ border: 1px solid #DDD; border-left: none; }
#finance .table tr > *:last-child{ border-right: none; }
#finance .table th{ background: #F3F3F3; }
#finance .table thead th{ font-size: 18px; font-weight: 600; color: #111; padding: 19px 5px; }
#finance .table thead .small th{ font-size: 16px; font-weight: 500; }

#finance .table tbody th{ font-size: 17px; font-weight: 500; color: #333; text-align: left; padding: 19px 30px; }
#finance .table tbody td{ font-size: 16px; font-weight: 300; color: #333; white-space: nowrap; text-align: right; padding: 19px 10px; }

#finance .table .center{ text-align: center !important; }

@media screen and (max-width: 1700px){
	#finance .tit h4{ font-size: 30px; }

	#finance .table colgroup col.th{ width: 200px; }
	#finance .table thead th{ padding: 15px 5px; }
	#finance .table tbody th{ padding: 15px 15px; }
	#finance .table tbody td{ padding: 15px 10px; }
}

@media screen and (max-width: 1280px){
	#finance .tit{ margin-bottom: 15px; }
	#finance .tit h4{ font-size: 26px; }

	#finance .table colgroup col.th{ width: 170px; }
	#finance .table thead th{ font-size: 17px; padding: 12px 5px; }
	#finance .table tbody th{ font-size: 16px; padding: 12px 10px; }
	#finance .table tbody td{ padding: 12px 10px; }
}

@media screen and (max-width: 900px){
	#finance .tit h4{ font-size: 21px; }
}


/* 투명경영 - 윤리경영 */
#ethical{ padding-bottom: 0; }
#ethical .grid-layout dl{ border: 1px solid #DDD; padding: 40px 50px; }
#ethical .grid-layout dl:not(:last-child){ margin-bottom: 30px; }
#ethical .grid-layout dl dt{ display: flex; align-items: baseline; font-size: 24px; font-weight: 600; color: #333; margin-bottom: 40px; }
#ethical .grid-layout dl dt span{ display: inline-block; color: var(--mainColor); padding-right: 10px; white-space: nowrap; }
#ethical .grid-layout ul li{ font-size: 20px; font-weight: 300; color: #555; padding-left: 20px; position: relative; }
#ethical .grid-layout ul li:not(:last-child){ margin-bottom: 10px; }
#ethical .grid-layout ul li::before{ content: ""; width: 4px; height: 4px; background: #555; border-radius: 50%; position: absolute; top: calc(1.3em / 2); left: 0; transform: translateY(-50%); }


#ethical .motion{
	--tb: 150px;
	--lr: calc((100% - 1680px) / 2);
}
#ethical .motion{ position: relative; padding-bottom: var(--subPb); opacity: 1 !important; }
#ethical .motion .bg{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin-bottom: -1px; }
#ethical .motion .bg .sticky{ width: 100%; height: 100vh; position: sticky; position: -webkit-sticky; top: 0; left: 0; clip-path: inset(var(--tb) var(--lr) var(--tb) var(--lr)); -webkit-clip-path: inset(var(--tb) var(--lr) var(--tb) var(--lr)); transition: clip-path 1s; }
#ethical .motion .bg img{ width: 100%; height: 100%; object-fit: cover; }

#ethical .motion .content{ position: relative; z-index: 100; padding-top: 100vh; }
#ethical .motion .content *{ color: #FFF; }
#ethical .motion .grid-layout .left .sticky{ position: sticky; position: -webkit-sticky; top: 100px; left: 0; }
#ethical .motion .grid-layout .right{ padding-left: 300px; opacity: 0; transition: opacity var(--aosT); }
#ethical .motion .grid-layout dl{ border: none; padding: 0; }
#ethical .motion .grid-layout dl:not(:last-child){ margin-bottom: 160px; }
#ethical .motion .grid-layout dl dt{ font-weight: 500; }
#ethical .motion .grid-layout ul li{ display: grid; grid-template-columns: 260px calc(100% - 260px); font-weight: 200; color: rgba(255, 255, 255, 0.8); }
#ethical .motion .grid-layout ul li:not(:last-child){ margin-bottom: 15px; }
#ethical .motion .grid-layout ul li::before{ background: #FFF; }
#ethical .motion .grid-layout ul li strong{ font-weight: 500; }


#ethical .motion.aos-animate .bg .sticky{ clip-path: inset(0 0 0 0); -webkit-clip-path: inset(0 0 0 0); }
#ethical .motion.aos-animate .grid-layout .right{ opacity: 1; }

@media screen and (max-width: 1720px){
	#ethical .motion{
		--lr: 20px;
	}
}

@media screen and (max-width: 1700px){
	#ethical .motion{
		--tb: 100px;
	}
	#ethical .grid-layout dl{ padding: 30px 40px; }
	#ethical .grid-layout dl dt{ font-size: 22px; margin-bottom: 30px; }
	#ethical .grid-layout ul li{ font-size: 18px; }

	#ethical .motion .grid-layout .right{ padding-left: 200px; }
	#ethical .motion .grid-layout dl:not(:last-child){ margin-bottom: 120px; }
}

@media screen and (max-width: 1280px){
	#ethical .motion{
		--tb: 60px;
	}
	#ethical .grid-layout dl{ padding: 20px; }
	#ethical .grid-layout dl dt{ font-size: 20px; margin-bottom: 20px; }
	#ethical .grid-layout ul li{ font-size: 17px; padding-left: 15px; }

	#ethical .motion .content{ padding-top: 50vh; }
	#ethical .motion .grid-layout .right{ padding-left: 100px; }
	#ethical .motion .grid-layout dl:not(:last-child){ margin-bottom: 80px; }
	#ethical .motion .grid-layout ul li{ grid-template-columns: 200px calc(100% - 200px);  }
}

@media screen and (max-width: 1200px){
	#ethical .motion .grid-layout .right{ padding-left: 0; }
}

@media screen and (max-width: 900px){
	#ethical .grid-layout dl dt{ font-size: 19px; margin-bottom: 15px; } 
}

@media screen and (max-width: 700px){
	#ethical .motion .grid-layout ul li{ grid-template-columns: repeat(1, 1fr); }
	#ethical .motion .grid-layout ul li strong{ margin-bottom: 3px; }
}


/* Community - 온라인 문의 */
@media screen and (max-width: 500px){
	#inquiry .page-title br{ display: none; }
}


/* 인재채용 - 인재상 */
#talent .page-title h3 em{ line-height: inherit; }
#talent .page-title h3 em.blue{ color: #55A1D5; }
#talent .grid-box{ display: grid; grid-template-columns: repeat(3, calc(100% / 3)); margin: -30px -10px; text-align: center; }
#talent .grid-box > *{ margin: 30px 10px; }

#talent .item .txt,
#talent .item dl{ padding: 30px 10px; }

#talent .item figure{ display: block; }
#talent .item figure img{ width: 100%; }
#talent .item .txt{ background: var(--mainColor); }
#talent .item .txt span{ display: block; font-family: var(--engFont); font-size: 20px; font-weight: 400; color: rgba(255, 255, 255, 0.8); margin-bottom: 20px; }
#talent .item .txt h5{ font-size: 36px; font-weight: 500; color: #FFF; }

#talent .item dl{ border: 1px solid #DDD; margin-top: 10px; }
#talent .item dl dt{ font-size: 18px; font-weight: 600; color: var(--mainColor); margin-bottom: 20px; } 
#talent .item dl dt span{ display: inline-block; border-bottom: 1px solid var(--mainColor); padding: 2px 0; }
#talent .item dl dd{ font-size: 20px; font-weight: 500; color: #333; }
#talent .item dl dd em{ display: block; margin-top: 5px; font-size: 17px; color: #BBB; }

@media screen and (max-width: 1700px){
	#talent .item .txt,
	#talent .item dl{ padding: 20px 10px; }

	#talent .item .txt span{ font-size: 18px; margin-bottom: 15px; }
	#talent .item .txt h5{ font-size: 28px; }

	#talent .item dl dt{ font-size: 17px; margin-bottom: 15px; }
	#talent .item dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#talent .item .txt,
	#talent .item dl{ padding: 15px 10px; }

	#talent .item .txt span{ font-size: 17px; margin-bottom: 10px; }
	#talent .item .txt h5{ font-size: 24px; }

	#talent .item dl dt{ font-size: 16px; margin-bottom: 10px; }
	#talent .item dl dt span{ padding: 0; }
	#talent .item dl dd{ font-size: 17px; }
	#talent .item dl dd em{ font-size: 15px; }
}

@media screen and (max-width: 1100px){
	#talent .grid-box{ grid-template-columns: repeat(1, 100%); }
	#talent .item{ display: flex; transition-delay: unset !important; }
	#talent .item > *{ width: 50%; }

	#talent .item figure img{ height: 100%; object-fit: cover; }
	#talent .item > div{ padding-left: 10px; }
}

@media screen and (max-width: 900px){
	#talent .item .txt span{ margin-bottom: 5px; }
	#talent .item .txt h5{ font-size: 21px; }
}

@media screen and (max-width: 800px){
	#talent .item{ display: block; }
	#talent .item > *{ width: 100%; }
	#talent .item > div{ padding-left: 0; }
}

@media screen and (max-width: 600px){
	#talent .page-title br{ display: none; }
	#talent .page-title h3 em{ display: block; }
}


/* 인재채용 - 인사제도 */
#system .page-title{ margin-bottom: 80px; }
#system .borderBox{ padding: 80px; }
#system .inner{ max-width: 1100px; margin: 0 auto; }

#system .sec01 .diagram{ max-width: 920px; display: flex; flex-wrap: wrap; justify-content: center; text-align: center; margin: 0 auto; }
#system .sec01 .item{ width: calc((100% + 40px) / 3); }
#system .sec01 .item:not(:last-of-type){ margin-right: -20px; }
#system .sec01 .item .circle{ position: relative; }
#system .sec01 .item .circle::before{ content: ""; display: block; background: var(--bg); padding-bottom: 100%; border-radius: 50%; opacity: 0.8; }
#system .sec01 .item .circle p{ font-size: 30px; font-weight: 500; color: #FFF; line-height: 1.4; padding: 0 30px; position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); }
#system .sec01 .item dl{ margin-top: 60px; padding: 0 20px; }
#system .sec01 .item dl dt{ font-size: 24px; font-weight: 600; color: var(--bg); margin-bottom: 20px; }
#system .sec01 .item dl dd{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.5; }


#system .sec02 ul li{ display: flex; }
#system .sec02 ul li:not(:last-of-type){ margin-bottom: 20px; }
#system .sec02 ul li span{ flex: 1 0 auto; width: 320px; display: flex; justify-content: center; align-items: center; background: var(--bg); border: 1px solid var(--bg); font-size: 22px; font-weight: 400; color: #FFF; padding: 20px; }
#system .sec02 ul li > div{ width: calc(100% - 320px); border: 1px solid #DDD; border-left: none; overflow: hidden; padding: 22px 0; }
#system .sec02 .dl{ display: flex; flex-wrap: wrap; margin: -5px 0; }
#system .sec02 dl{ display: flex; align-items: baseline; font-size: 20px; color: #333; padding: 5px 40px; }
#system .sec02 dl dt{ font-weight: 500; padding-right: 15px; }
#system .sec02 dl dd{ font-weight: 300; }


#system .sec03 .right{ text-align: center; }
#system .sec03 h6{ border-bottom: 2px solid #111; font-size: 24px; font-weight: 600; color: #111; padding: 20px 0; }
#system .sec03 dl{ font-size: 20px; color: #111; margin-top: 50px; }
#system .sec03 dl dt{ font-weight: 600; margin-bottom: 20px; }
#system .sec03 .box{ border: 1px solid #DDD; padding: 20px; }
#system .sec03 .box .grid{ display: grid; margin: -16px -32px; }
#system .sec03 .box span{ display: flex; justify-content: center; align-items: center; font-weight: 500; padding: 22px 10px; margin: 16px 32px; position: relative; }
#system .sec03 .box span::after{ content: ""; width: 24px; height: 24px; position: absolute; top: 50%; right: -32px; transform: translate(50%, -50%); }
#system .sec03 .box span:last-of-type::after{ display: none; }
#system .sec03 p{ font-size: 17px; font-weight: 400; color: #999; margin-top: 10px; }

#system .sec03 .box01 .grid{ grid-template-columns: repeat(2, 50%); }
#system .sec03 .box01 span{ background: #F5F5F5; }
#system .sec03 .box01 span::after{ background: url("/img/sub/career/system_plus.svg") no-repeat center center / contain; }

#system .sec03 .box02 .grid{ grid-template-columns: repeat(4, 25%); }
#system .sec03 .box02 span{ background: rgba(72, 175, 255, 0.1); }
#system .sec03 .box02 span::after{ background: url("/img/sub/career/system_arrow.svg") no-repeat center center / contain; }


#system .sec04 .dl{ max-width: 1040px; margin: 0 auto; }
#system .sec04 .dl dl{ display: grid; grid-template-columns: 155px calc(100% - 155px); }
#system .sec04 .dl dl:not(:last-of-type){ margin-bottom: 20px; }
#system .sec04 .dl dl dt{ font-size: 22px; font-weight: 600; color: #111; }
#system .sec04 .dl dl dd{ font-size: 20px; font-weight: 300; color: #333; }

@media screen and (max-width: 1700px){
	#system .page-title{ margin-bottom: 50px; }
	#system .borderBox{ padding: 50px; }

	#system .sec01 .item .circle p{ font-size: 26px; }
	#system .sec01 .item dl{ margin-top: 40px; }
	#system .sec01 .item dl dt{ font-size: 22px; }

	#system .sec02 ul li span{ width: 250px; font-size: 20px; padding: 18px; }
	#system .sec02 ul li > div{ width: calc(100% - 250px); padding: 20px 0; }
	#system .sec02 dl{ font-size: 18px; padding: 5px 30px; }

	#system .sec03 h6{ font-size: 22px; padding: 15px 0; }
	#system .sec03 dl{ font-size: 18px; }
	#system .sec03 .box{ padding: 15px; }
	#system .sec03 .box .grid{ margin: -12px -25px; }
	#system .sec03 .box span{ padding: 18px 10px; margin: 12px 25px; }
	#system .sec03 .box span::after{ width: 24px; height: 24px; right: -25px; }
	#system .sec03 p{ font-size: 17px; }

	#system .sec04 .dl dl{ display: grid; grid-template-columns: 120px calc(100% - 120px); }
	#system .sec04 .dl dl dt{ font-size: 20px; }
	#system .sec04 .dl dl dd{ font-size: 18px; }
}

@media screen and (max-width: 1280px){
	#system .page-title{ margin-bottom: 30px; }
	#system .borderBox{ padding: 30px; }

	#system .sec01 .diagram{ max-width: 800px; }
	#system .sec01 .item .circle p{ font-size: 22px; }
	#system .sec01 .item dl{ margin-top: 30px; }
	#system .sec01 .item dl br{ display: none; }
	#system .sec01 .item dl dt{ font-size: 20px; margin-bottom: 10px; }
	#system .sec01 .item dl dd{ font-size: 17px; }

	#system .sec02 ul li span{ width: 200px; font-size: 18px; padding: 15px; }
	#system .sec02 ul li > div{ width: calc(100% - 200px); padding: 17px 0; }
	#system .sec02 dl{ font-size: 17px; padding: 5px 20px; }
	#system .sec02 dl dt{ padding-right: 10px; }

	#system .sec03 h6{ font-size: 20px; padding: 12px 0; }
	#system .sec03 dl{ font-size: 17px; margin-top: 35px; }
	#system .sec03 dl dt{ margin-bottom: 10px; }
	#system .sec03 .box{ padding: 10px; }
	#system .sec03 .box .grid{ margin: -5px -15px; }
	#system .sec03 .box span{ padding: 12px 5px; margin: 5px 15px; }
	#system .sec03 .box span::after{ width: 20px; height: 20px; right: -15px; }
	#system .sec03 p{ font-size: 16px; }

	#system .sec04 .dl dl{ display: grid; grid-template-columns: 90px calc(100% - 90px); }
	#system .sec04 .dl dl dt{ font-size: 18px; }
	#system .sec04 .dl dl dd{ font-size: 17px; }
}

@media screen and (max-width: 900px){
	#system .borderBox{ padding: 25px; }

	#system .sec01 .item .circle p{ font-size: 20px; }
	#system .sec01 .item dl{ margin-top: 20px; }
	#system .sec01 .item dl dt{ font-size: 18px; }

	#system .sec02 ul li span{ width: 100px; font-size: 17px; padding: 12px; }
	#system .sec02 ul li > div{ width: calc(100% - 100px); padding: 12px 0; }
	#system .sec02 dl{ font-size: 16px; }

	#system .sec03 h6{ font-size: 18px; }
}

@media screen and (max-width: 750px){
	#system .sec01 .item{ width: calc((100% + 8%) / 2); }
	#system .sec01 .item:not(:last-of-type){ margin-right: -8%; }
	#system .sec01 .item dl{ padding: 0 10%; }

	#system .sec01 .item:nth-of-type(1){ display: flex; flex-direction: column-reverse; margin: 0 20px; margin-bottom: -13%; }
	#system .sec01 .item:nth-of-type(1) dl{ padding: 0; margin: 0 0 20px; }

	#system .sec01 .item:nth-of-type(2) dl{ padding-left: 0; }
	#system .sec01 .item:nth-of-type(3) dl{ padding-right: 0; }

	#system .sec03 .box02 .grid{ grid-template-columns: repeat(2, 50%); }
	#system .sec03 .box02 span:nth-of-type(2n)::after{ display: none; }

	#system .sec04 .dl dl{ grid-template-columns: repeat(1, 100%); }
	#system .sec04 .dl dl dt{ margin-bottom: 5px; }
}


/* 인재채용 - 인재채용 */
#recruit .borderBox{ padding: 40px 50px; }

#recruit .sec01{
	--dot: 8px;
	--border: 2px solid #ABDCFE;
}
#recruit .sec01 .borderBox{ padding-block: 80px; text-align: center; }
#recruit .sec01 .diagram{ display: grid; grid-template-columns: repeat(5, 20%); margin: -15px; }
#recruit .sec01 .item{ margin: 15px; }
#recruit .sec01 .item p{ font-size: 20px; font-weight: 500; color: #000; margin-top: 40px; }

#recruit .sec01 .circle{ padding: 30px; border: var(--border); border-radius: 50%; position: relative; }
#recruit .sec01 .circle::before{ content: ""; display: block; background: #D9EEFF; border-radius: 50%; position: relative; z-index: 10; padding-bottom: 100%; }
#recruit .sec01 .circle::after{ content: ""; width: var(--dot); height: var(--dot); background: #FFF; border: var(--border); border-radius: 50%; position: absolute; top: 50%; left: -31px; transform: translate(-50%, -50%); box-sizing: border-box; }

#recruit .sec01 .item .dashed{ width: calc(100% + 6px); height: calc(100% + 6px); background: #FFF; border: 6px dotted #E8E8E8; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); clip-path: inset(0 0 calc(50% + 4px) calc(50% + 6px)); -webkit-clip-path: inset(0 0 calc(50% + 4px) calc(50% + 6px)); }
#recruit .sec01 .item .dot{ width: calc(100% + 12px); height: 25%; background: #FFF; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#recruit .sec01 .item .dot::before,
#recruit .sec01 .item .dot::after{ content: ""; width: var(--dot); height: var(--dot); background: #FFF; border: var(--border); border-radius: 50%; position: absolute; right: 1px; box-sizing: border-box; }
#recruit .sec01 .item .dot::before{ top: 0; transform: translate(-50%, -50%); }
#recruit .sec01 .item .dot::after{ bottom: 0; transform: translate(-50%, 50%); }
#recruit .sec01 .item .dot i{ width: 68px; height: 68px; border: var(--border); border-top: none; border-left: none; border-radius: 0 0 50% 0; position: absolute; top: -5px; left: 9px; transform: translate(-100%, -50%) rotate(-1deg); clip-path: inset(57% 0 0 50%); -webkit-clip-path: inset(57% 0 0 50%); box-sizing: border-box; }
 #recruit .sec01 .icon{ position: absolute; top: 50%; left: 0; right: 0; z-index: 100; transform: translateY(-50%); }

#recruit .sec01 .item:first-of-type .circle::after{ left: -1px; }
#recruit .sec01 .item:first-of-type .dot{ width: 50%; left: unset; right: -6px; transform: translateY(-50%); }

#recruit .sec01 .item:nth-of-type(3) .dot i{ left: 10px; }

#recruit .sec01 .item:last-of-type .dot{ width: 50%; left: -6px; transform: translateY(-50%); }
#recruit .sec01 .item:last-of-type .dot::before{ top: 50%; right: calc(-100% + 1px); transform: translate(150%, -50%); }


#recruit .sec02{
	--icon: 24px;
	--gap: 20px;
}
#recruit .sec02 .right ul{ display: flex; flex-wrap: wrap; margin-block: -5px; margin-right: calc(var(--gap) * -1); }
#recruit .sec02 .right ul li{ margin-block: 5px; padding-inline: calc(var(--gap) + var(--icon)) var(--gap); position: relative; }
#recruit .sec02 .right ul li::before{ content: ""; width: var(--icon); height: var(--icon); background: url("/img/sub/career/recruit_arrow.svg") no-repeat center center / contain; position: absolute; top: 50%; left: 0; transform: translateY(-50%); }
#recruit .sec02 .right ul li:first-of-type{ padding-left: 0; }
#recruit .sec02 .right ul li:first-of-type::before{ display: none; }
#recruit .sec02 .right dl{ display: flex; align-items: baseline; }
#recruit .sec02 .right dl dt{ font-size: 22px; font-weight: 600; color: #111; padding-right: 20px; }
#recruit .sec02 .right dl dd{ font-size: 20px; font-weight: 300; color: #333; }


#recruit .sec04 dl dt{ font-size: 24px; font-weight: 600; color: #111; margin-bottom: 40px; }
#recruit .sec04 dl dd{ font-size: 20px; font-weight: 300; color: #333; line-height: 1.5; }
#recruit .sec04 .blueBtn{ padding-inline: 75px; margin-top: 40px; }

@media screen and (max-width: 1700px){
	#recruit .borderBox{ padding: 30px 40px; }

	#recruit .sec01 .borderBox{ padding-block: 60px; }
	#recruit .sec01 .item p{ font-size: 19px; margin-top: 30px; }
	#recruit .sec01 .item .dot i{ top: -10px; left: 10px; }
	#recruit .sec01 .circle{ padding: 20px; }

	#recruit .sec02 .right dl dt{ font-size: 20px; padding-right: 15px; }
	#recruit .sec02 .right dl dd{ font-size: 18px; }

	#recruit .sec04 dl dt{ font-size: 22px; margin-bottom: 30px; }
	#recruit .sec04 dl dd{ font-size: 18px; }
	#recruit .sec04 .blueBtn{ padding-inline: 50px; margin-top: 30px; }
}

@media screen and (max-width: 1400px){
	#recruit .sec01 .diagram{ margin: -20px -10px; }
	#recruit .sec01 .item{ margin: 20px 10px; }
	#recruit .sec01 .item .dot i{ width: 52px; height: 52px; top: -4px; left: 9px; }
	#recruit .sec01 .circle::after{ left: -21px; }

	#recruit .sec01 .item:nth-of-type(3) .dot i{ left: 9px; }
}

@media screen and (max-width: 1280px){
	#recruit .borderBox{ padding: 20px 25px; }

	#recruit .sec01 .borderBox{ padding-block: 30px; }
	#recruit .sec01 .item p{ font-size: 18px; margin-top: 20px; }

	#recruit .sec02{
		--icon: 20px;
		--gap: 10px;
	}
	#recruit .sec02 .right dl dt{ font-size: 18px; padding-right: 10px; }
	#recruit .sec02 .right dl dd{ font-size: 17px; }

	#recruit .sec04 dl dt{ font-size: 19px; margin-bottom: 15px; }
	#recruit .sec04 dl dd{ font-size: 17px; }
	#recruit .sec04 .blueBtn{ padding-inline: 30px; margin-top: 20px; }
}

@media screen and (max-width: 1200px){
	#recruit .sec01 .item .dot i{ width: 57px; height: 57px; }
}

@media screen and (max-width: 1110px){
	#recruit .sec01 .item .dot i{ width: 48px; height: 48px; left: 8px; }
	#recruit .sec01 .circle{ padding: 15px; }
}

@media screen and (max-width: 900px){
	#recruit .sec01 .borderBox{ display: flex; flex-direction: column; align-items: center; }
	#recruit .sec01 .diagram{ max-width: 600px; width: 100%; grid-template-columns: repeat(3, calc(100% / 3)); }
	#recruit .sec01 .item p{ margin-top: 10px; }
	#recruit .sec01 .item .dot i{ width: 53px; height: 53px; top: -4px; left: 9px; }

	#recruit .sec01 .item:nth-of-type(3) .dot{ width: 50%; left: -6px; transform: translateY(-50%); }

	#recruit .sec01 .item:nth-of-type(3) + .item .dot{ width: 50%; left: unset; right: -6px; transform: translateY(-50%); }
	#recruit .sec01 .item:nth-of-type(3) + .item .circle::after{ left: -1px; }
}

@media screen and (max-width: 750px){
	#recruit .sec02{
		--gap: 5px;
	}
	#recruit .sec02 .right ul{ display: block; }
}

@media screen and (max-width: 630px){
	#recruit .sec01 .diagram{ grid-template-columns: repeat(2, 50%); }

	#recruit .sec01 .item:nth-of-type(odd) .dot{ width: 50% !important; left: unset !important; right: -6px !important; transform: translateY(-50%) !important; }
	#recruit .sec01 .item:nth-of-type(odd) .circle::after{ left: -1px !important; }

	#recruit .sec01 .item:nth-of-type(even) .dot{ width: 50% !important; left: -6px !important; transform: translateY(-50%) !important; }
	#recruit .sec01 .item:nth-of-type(even) .dot::before{ top: 50%; right: calc(-100% + 1px) !important; transform: translate(150%, -50%) !important; }
	#recruit .sec01 .item:nth-of-type(even) .circle::after{ left: -21px !important; }

	#recruit .sec01 .item:last-of-type .dot{ background: none; }
	#recruit .sec01 .item:last-of-type .dot::before{ right: 13px; }
	#recruit .sec01 .item:last-of-type .dot::after{ display: none; }

	#recruit .sec04 br{ display: none; }
}


/* 인재채용 - 인재DB 등록 */
#register .borderBox{ text-align: center; padding: 80px; }
#register .blueBtn{ padding-inline: 50px; margin: 0 auto; }

#register .grayBox{ background: #F8F8F8; border: 1px solid #DDD; text-align: center; padding: 60px; margin-top: 30px; }
#register .grayBox dl dt{ font-size: 30px; font-weight: 700; color: var(--mainColor); margin-bottom: 30px; }
#register .grayBox dl dd{ font-size: 18px; font-weight: 300; color: #333; line-height: 1.5; }

@media screen and (max-width: 1700px){
	#register .borderBox{ padding: 50px; }
	#register .blueBtn{ padding-inline: 35px; }

	#register .grayBox{ padding: 40px; margin-top: 20px; }
	#register .grayBox dl dt{ font-size: 26px; margin-bottom: 20px; }
}

@media screen and (max-width: 1280px){
	#register .borderBox{ padding: 25px; }
	#register .blueBtn{ padding-inline: 20px; }

	#register .grayBox{ padding: 25px; margin-top: 15px; }
	#register .grayBox dl dt{ font-size: 22px; margin-bottom: 10px; }
	#register .grayBox dl dd{ font-size: 17px; }
}

@media screen and (max-width: 950px){
	#register .grayBox br{ display: none; }
}

@media screen and (max-width: 900px){
	#register .grayBox dl dt{ font-size: 19px; }
}


/* 인재채용 - 인재DB 등록 - 지원서 작성 */
#agree .poilcy h4{ font-size: 36px; font-weight: 600; color: #111; text-align: center; margin-bottom: 40px; }
#agree .poilcy .scroll-bar{ height: 415px; border: 1px solid #DDD; }

#agree .table-form .submit button{ font-weight: 400; }

@media screen and (max-width: 1700px){
	#agree .poilcy h4{ font-size: 30px; margin-bottom: 30px; }
}

@media screen and (max-width: 1280px){
	#agree .poilcy h4{ font-size: 26px; margin-bottom: 20px; }
}

@media screen and (max-width: 900px){
	#agree .poilcy h4{ font-size: 22px; margin-bottom: 15px; }
}


/* 인재채용 - 인재DB 등록 - 지원서 작성2 */
#apply .submit > *{ width: 260px; }

@media screen and (max-width: 1700px){
	#apply .submit > *{ width: 230px; }
}

@media screen and (max-width: 1280px){
	#apply .submit > *{ width: 190px; }
}