/************************** TCU 사업부 **************************/
/* TCU Introduction */
.tcuColumn { display: flex; flex-direction: column; gap: 120px 0; }
.tcuTit1 { font-weight: 700; font-size: 16px; line-height: 120%; color: #17469e;}
.tcu1 h4 { margin-bottom: 37px;}
.tcu1 > img { display: none;}
.tcuCon > img { display: none; width: 100%; margin:40px 0;} 
.tcuCon h5 { font-weight: 700; font-size: 36px; line-height: 120%; color: #fff; position: absolute; top: 187px; left: 511px; text-align: center;}
.tcuCon h5 span { display: block; font-weight: 700; font-size: 15px; line-height: 120%; color: #fff; margin-top: -5px;}
.tcuCon ul { overflow: hidden;}
.tcuCon ul li { overflow: hidden; position: absolute; }
.tcuCon ul li:first-child, .tcuCon ul li:nth-child(3) { text-align: right;}
.tcuCon ul li img { margin-bottom: 11px;}
.tcuCon ul li strong { display: block;font-weight: 700; font-size: 15px; line-height: 120%; color: #1c4aa0;}
.tcuCon ul li span { display: block; font-weight: 700; font-size: 14px; line-height: 140%; color: #333;}
.tcuCon ul li p { font-size: 14px; line-height: 140%; color: #666;}
.tcuCon1 h5 { top: 187px; left: 511px; }
.tcuCon2 h5 { top: 197px; left: 525px; }
.tcuCon1 { overflow: hidden;  background: url(/kr/img/sub/img_tcuCon1-2.jpg) no-repeat 0 0; height: 432px; position: relative;}
.tcuCon2 { overflow: hidden;  background: url(/kr/img/sub/img_tcuCon2-2.jpg) no-repeat 0 0; height: 475px; position: relative;}
.tcuCon1 ul li.tcuList1 { top: 0; left: 23px;}
.tcuCon1 ul li.tcuList2 { top: 0; right: 63px;}
.tcuCon1 ul li.tcuList3 { top: 269px; left: 164px;}
.tcuCon1 ul li.tcuList4 { top: 269px; right: 17px;}
.tcuCon2 ul li.tcuList1 { top: 0; left: 23px;}
.tcuCon2 ul li.tcuList2 { top: 0; right: 17px;}
.tcuCon2 ul li.tcuList3 { top: 269px; left: 20px;}
.tcuCon2 ul li.tcuList4 { top: 269px; right: 22px;}

/************************** Scrubber **************************/
.scrubberCont { display: flex; gap: 0 95px; }
.scrubberCont .img { flex-shrink: 0; }
.scrubberCont .img img { max-width: 100%; }
.scrubberCont .txt { width: 100%; }
.scrubberCont .txt *:not(p) { line-height: 1.3; }
.scrubberCont .txt p { line-height: 1.6; }
.scrubberCont .tit,
.scrubberCont .info { padding: 0 20px; }
.scrubberCont .tit h5 { font-weight: 700; font-size: 26px; margin-bottom: 10px; color: #17469E; }
.scrubberCont .tit p { font-size: 16px; color: #333; }
.scrubberCont .txt hr { display: block; border: none; margin: 40px 0; height: 1px; width: 100%; background: #000; visibility: inherit; }
.scrubberCont .info { flex-direction: column; gap: 15px 0; display: flex; }
.scrubberCont .info dt { font-weight: 700; font-size: 16px; color: #333; }
.scrubberCont .info dd { gap: 0 5px; display: flex; }
.scrubberCont .info span { width: 3px; height: 3px; transform: translateY(0.8em); border-radius: 50%; display: block; background: #666; flex-shrink: 0; }
.scrubberCont .info p { font-size: 14px; color: #666; }


/************************** ESG overview **************************/

#cont.esg_overview { padding: 0; }
.esg_overview * { box-sizing: border-box; }
.esg_overview .text { text-align: left; margin: 0 0 20px; }
.esg_overview .step .text p { margin: 20px 0 40px; }
.esg_overview .step:not(.step1) { padding-top: 70px; }
.esg_overview .step1 .listBox { background: #f8f8f8; padding: 80px 40px; }
.esg_overview .step1 .listBox h6 { margin-bottom: 40px; font-size: 20px; font-weight: 800; color: #222; line-height: 1.3; }
.esg_overview .step1 .listBox h6 .b1200 { display: none; }
.esg_overview .step1 .listBox ul li { height: 65px; display: flex; align-items: center; gap: 0 15px; border-bottom: 1px dashed #d2d2d2; }
.esg_overview .step1 .listBox ul li span { border-radius: 100px; width: 60px; background: #17469E; height: 25px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-size: 15px; font-weight: 700; }
.esg_overview .step1 .listBox ul li p { color: #333; font-size: 16px; text-align: left; }
.esg_overview .bgGray { position: relative; padding: 0 0 150px; margin-top: 70px; z-index: 1; }
.esg_overview .bgGray::before { content: ""; display: block; z-index: -1; width: 100vw; height: 100%; background: #f8f8f8; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.esg_overview .bgGray ul { display: flex; gap: 0 30px; }
.esg_overview .bgGray ul li { width: 100%; text-align: center; display: flex; flex-direction: column; }
.esg_overview .bgGray ul li h6,
.esg_overview .bgGray ul li p { display: flex; justify-content: center; align-items: center; position: relative; }
.esg_overview .bgGray ul li h6 { width: 180px; height: 40px; margin: 0 auto; z-index: 2; background: #17469e; border-radius: 100px; color: #fff; font-size: 18px; font-weight: 700; }
.esg_overview .bgGray ul li p { padding: 0 10px; height: 86px; color: #333; line-height: 1.5; font-size: 15px; text-align: center; z-index: 1; }
.esg_overview .bgGray ul li p::before { width: 100%; height: calc(100% + 20px); position: absolute; bottom: 0; left: 0; z-index: -1; border: 1px solid #d9d9d9; background: #fff; content: ""; display: block; }

@media screen and (max-width: 1200px) {
	.tcuCon {display: none;}
	.tcu1 > img { display: block;}

	.scrubberCont { gap: 0 20px; }

	#cont.esg_overview { padding: 40px 15px 0; }
	.esg_overview .step1 .listBox h6 .b1200 { display: block; }
	.esg_overview .step1 .listBox ul li { height: auto; padding: 10px 0; }
	.esg_overview .bgGray ul { gap: 0 10px; }
	.esg_overview .bgGray ul li br { display: none; }
}

@media screen and (max-width: 960px) {
	.scrubberCont { gap: 0; flex-direction: column; }
	.scrubberCont .img { text-align: center; }
	.esg_overview .step1 .listBox { padding: 40px 20px; }
	.esg_overview .step1 .listBox h6 { font-size: 18px; margin-bottom: 30px; }
	.esg_overview .bgGray ul li p { font-size: 14px; }
}

@media screen and (max-width: 768px) {
	.esg_overview .bgGray ul { flex-wrap: wrap; gap: 20px; }
	.esg_overview .bgGray ul li { width: calc(50% - 10px); }
}

@media screen and (max-width: 640px) {
	.esg_overview .step1 .listBox h6,
	.esg_overview .bgGray ul li h6 { font-size: 16px; }
	.esg_overview .step1 .listBox h6 br,
	.esg_overview .step1 .listBox h6 .b1200 { display: none; }
	.esg_overview .step1 .listBox ul li { height: auto; padding: 10px 0; gap: 0 5px; }
	.esg_overview .step1 .listBox ul li span { width: 50px; font-size: 13px; }
	.esg_overview .step1 .listBox ul li p { font-size: 14px; }
}

@media screen and (max-width: 500px) {
	.tcuColumn { gap: 60px 0; }
	.tcu1 > img { display: none;}
	.tcuCon {display: block; background: none; height: auto;}
	.tcuCon > img { display: block;}
	.tcuCon ul li { position: static; text-align: center; margin-bottom: 30px;}
	.tcuCon ul li:first-child, .tcuCon ul li:nth-child(3) { text-align: center;}
	
	.scrubberCont br { display: none; }
	.scrubberCont .tit,
	.scrubberCont .info { padding: 0 10px; }
	.scrubberCont .tit h5 { font-size: 22px; }
	.scrubberCont .txt hr { margin: 30px 0; }

	.esg_overview .step1 .listBox ul li { flex-direction: column; gap: 5px 0; }
	.esg_overview .step1 .listBox ul li p { text-align: center; }
	.esg_overview .bgGray ul { gap: 20px 0; }
	.esg_overview .bgGray ul li { width: 100%; }
}