@charset "utf-8"; 
/**************** common */

.agent-mark{
	border-width: 6px;
	background-size: 70% 70%;
}
.m_show{
	display: none;
}
.tb tr>*{
	padding: 1.125rem 1rem;
	color: #585858;
}
.tb .t{border-bottom: 2px solid;}
.tb th{background: #fff; font-weight: 700; color: #000;}
.tb.bg-n th{background: transparent;}
.tb td{
	vertical-align: middle;
}
.ta-l td:last-child{
	text-align: left;
}
.tb .num_list {
	padding-left: 1rem;
}
.tb .num_list li{
	list-style: decimal;
}
.ta-right{text-align: right;}
.mb-small{
	margin-bottom: 1rem;
}
.mt-small{
	margin-top: 1rem;
}
.sect-pb1{padding-bottom: 7.5rem;} /* 120px */
.sect-pb3{padding-bottom: 12.5rem;} /* 200px */
.mx-auto{
	display: block;
	margin: 0 auto;
	width: max-content;
}
.w-max{
	width: max-content;
}
.container2{max-width: 900px; width: 100%;}
.pt-30{padding-top: 7.5rem !important;}
.pt-20{padding-top: 5rem !important;}
.pb-20{padding-bottom: 5rem !important;}
.pb-10{padding-bottom: 2.5rem !important;}
.p-0{padding: 0;}
.f-normal{font-size: 1.25rem;}
.m-normal{margin-top: 1.25rem;}
.m-small{margin-top: 0.625rem;}
.pl-normal{padding-left: 1.25rem;}

sup.tit-sup{
	top: -1.5em;
	right: -0.25em;
	font-size: 0.5em;
}

/* ESG 경영 , 이사회 및 위원회 */
.social-list1{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 714px;
	width: 100%;
	margin: 0 auto;
}
.social-list1::before{
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 0;
	width: 100%;
	height: 6px;
	background-color: #C7C7C7;
}
.social-list1 li{
	position: relative;
	width: 198px;
	height: 198px;
}
.social-list1 li > img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.social-list1 li > div{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.4rem;
}
.social-list1 li > div p{
	font-size: 1rem;
	color: #fff;
	font-weight: 600;
}
.social-list2 li{
	margin-bottom: 32px;
}
.social-list2 li .content{
	display: flex;
	align-items: center;
	gap: 20px;
	height: 100%;
	padding: 40px 20px 40px 30px;
	border: 1px solid #E6E6E6;
}
.social-list2 li .content .agent-mark p{font-weight: 600;}
.social-list2 li .content > p{
	font-size: 1rem;
	line-height: 1.5;
}
.social-list2 .agent-mark{
	min-width: 6.5em;
	max-width: 6.5em;
	height: 6.5em;
}
.vision-box{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 126px;
	background-color: #F5F5F5;
}
.social-list3{
	display: flex;
	justify-content: space-between;
}
.social-list3 li{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	width: calc(100% / 4 - 2rem);
	/* height: 280px; */
	padding-top: calc(100% / 4 - 2rem);
	border-radius: 50%;
	border: 1px solid #E6E6E6;
}
.social-list3 li .cont{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% - 1rem);
	text-align: center;
	gap: 0.6em;
	min-height: 6.25rem;
}
[class*="social-list"] li .num{
	padding: 3px 13px;
	border-radius: 12px;
	color: #fff;
	background-color: #000;
	font-size: 12px;
	font-weight: 600;
}
[class*="social-list"] li .txt{
	font-size: 1.25rem;
	font-weight: 500;
}
.zero-box{
	display: flex;
	justify-content: center;
	align-items: center;
	height: 320px;
	color: #fff;
	background: url("/img/esg/zero.png") no-repeat center / cover;
}
.col-box .txt{
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: 5.75rem;
}
.col-box .txt.reverse{
	padding-left: 3rem;
	padding-right: 5.75rem;
}
.col-box .txt p{
	display: flex;
	font-size: 1rem;
	color: #585858;
}
.col-box .txt p.dot::before{
	content: "·";
	display: block;
	font-size: 1rem;
	color: #585858;
	margin-left: -0.6rem;
	margin-right: 0.4rem;
}
.col-box .txt p.strong{
	margin-bottom: 3px;
}
.social-list4{
	padding: 0 104px;
	display: flex;
	gap: 84px;
	position: relative;
}
.social-list4 li{
	width: 280px;
	height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background-color: #fff;
	position: relative;
	z-index: 1;
}
.social-list4 h5{
	margin-bottom: 1.125rem;
	display: block;
}
.social-list4 li > div{
	margin: 0 auto;
	width: max-content;
}
.social-list4 p{
	font-size: 1rem;
	line-height: 1.5rem;
	color: #585858;
	text-align: left; 
}
.social-list4 p.strong{
	padding-left: 0.5rem;
}
.social-list4 *:not(p){
	text-align: center;
}
.social-list4 p:not(.strong)::before{
	content: "·";
	font-size: 1rem;
	line-height: 1.5rem;
	color: #585858;
	margin-right: 0.2rem;
}
.social-list4 .strong{
	color: #585858;
}
.social-list4::before{
	content: "";
	width: 100%;
	height: 6px;
	position: absolute;
	left: 0;
	top: 50%;
	z-index: 0;
	transform: translateY(-50%);
	background-color: #C7C7C7;
}
.social-list4::after{
	content: "";
	width: 24px;
	height: 40px;
	position: absolute;
	right: -0.5%;
	top: 50%;
	z-index: 0;
	transform: translateY(-50%);
	background: url("/img/esg/arrow.svg") no-repeat center / cover;
}

.social-list5{
	display: flex;
	gap: 2rem;
}
.social-list5 li{
	background-color: #fff;
	padding: 30px;
	flex: 1;
	position: relative;
}
.social-list5 li:not(:last-child):after{
	content: "";
	display: block;
	position: absolute;
	right: -26px;
	top: 50%;
	transform: translateY(-50%);
	width: 16px;
	height: 38px;
	background: url("/img/esg/arrow-grey.svg") no-repeat center / cover;
}
.social-list5 p{
	font-size: 1rem;
	color: #585858;
	display: flex;
}
.social-list5 p.dot::before{
	content: "·";
	font-size: 1rem;
	color: #585858;
	font-weight: 500;
	margin-right: 0.4rem;
}
.social-list5 p.strong,
.social-list5 p.normal,
.social-list5 p.arrow{
	padding-left: 0.65rem;
}
.social-list5 p.arrow::before{
	content: "→";
	font-size: 1rem;
	color: #585858;
	font-weight: 500;
	margin-right: 0.4rem;
}
.social-list6{
	display: flex;
	flex-wrap: wrap;
	position: relative;
	justify-content: space-between;
}
.social-list6::before{
	content: "";
	width: 100%;
	height: 1px;
	background-color: #000;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	z-index: 0;
}
.social-list6 li,
.social-list7 li{
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: calc(100% / 6 - 32px);
	padding-top: calc(100% / 6 - 32px);
	border-radius: 50%;
	background-color: #fff;
	gap: 0.6rem;
}
.social-list6 li .cont,
.social-list7 li .cont{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% - 1rem);
}

.social-list6 li p.txt,
.social-list7 li p.txt{
	font-size: 1rem;
	text-align: center;
	height: 42px;
}
.social-list7{
	display: flex;
	justify-content: center;
	gap: 1.25rem;
	position: relative;
}
.social-list7 li p.txt{
	height: auto;
}
.social-list7::before{
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	top: -56px;
	width: 24px;
	height: 56px;
	transform: translateX(-50%) rotate(90deg);
	background: url("/img/esg/arrow-grey.svg") no-repeat center / cover;
}
.social-list7 li{
	background-color: #231F20;
	color: #fff;
}
.social-list7 li .cont{
	top: 50%;
	transform: translate(-50%,-50%);
}
.pro-list{
	display: flex;
	gap: 2rem;
}
.pro-list li{
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 40px 30px;
	border: 1px solid #E6E6E6;
}
.pro-list li > p{font-size: 1rem;}
.pro-list li .agent-mark{
	max-width: 6.5em;
	min-width: 6.5em;
	height: 6.5em;
}
.tech-list li{
	position: relative;
}
.tech-list li .cont{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
.tech-list li .btn{
	border-color: #fff;
	color: #Fff !important;
}
.tech-list li .btn:hover,
.tech-list li .btn:focus{
	border-color: #fff;
	background-color: #fff !important;
	color: #000 !important;
}
.tech-list .btn-outline:hover:before, 
.tech-list .btn-outline:focus:before{
	border-color: #fff;
}

.env-ta tr > td:first-child{
	padding-left: 5.8%;
	text-align: left;
}
.env-ta tr > td.center:first-child span{
	padding-left: 1.25rem;
}



@media screen and (max-width:1024px){
	.tb tr .border-b{border-bottom: 1px solid #000;}
	.tb .t{border-width: 1px;}
	.tb .t > td{border-bottom: 1px solid #000;}

	
	.sect-mt1{
		margin-top: 7.5rem !important;
	}
	.fs-small{font-size: 10px;}

	.social-list4{
		gap: 40px;
		padding: 0 60px;
	}
	.social-list6 li, .social-list7 li{
		width: calc(100% / 6 - 1rem);
		padding-top: calc(100% / 6 - 1rem);
	}
}


@media screen and (max-width: 767px){
	.tb-list-full{
		overflow-x: auto;
	}
	.tb-list-full .tb{
		width: 185vw;
	}
	
	.mo-ta-l{
		text-align: left !important;
	}
	.mo-reverse{
		flex-direction: column-reverse;
	}
	.mo-mt-10{margin-top: 2.5rem;}
	.mo-mt-20{margin-top: 4.2857rem;}

	.social-list6 li, 
	.social-list7 li{
		width: calc(100% / 2 - 0.6rem);
		padding-top: calc(100% / 2 - 0.6rem);
	}
	.social-list6::before{display: none;}
	.social-list6 li{
		margin-bottom: 1.5rem;
	}
	
	.pro-list{flex-direction: column;}
	.pro-list li{gap: 1rem; padding: 1.4286rem;}
	.tech-list{gap: 1rem;}
	.tech-list img{width: 100%;}
	.tech-list a{font-size: 12px;}
	.act-list{gap: 3.75rem;}
	.social-list1{flex-direction: column; gap: 3.333rem;}
	.social-list1 li{width: 12.667rem; height: 12.667rem;}
	.social-list1::before{
		left: 50%;
		transform: translate(-50%,-50%);
		width: 6px;
		height: 100%;
	}
	.social-list2 li .content{
		padding: 1.667rem;
	}
	.social-list2 .agent-mark{
		min-width: 7rem; 
		max-width: 7rem;
		height: 7rem;
		font-size: 14px;
	}
	.social-list3{
		flex-wrap: wrap;
	}
	.social-list3 li{
		width: calc(100% / 2 - 1.143rem / 2);
		padding-top: calc(100% / 2 - 1.143rem / 2);
	}
	.social-list3 li:nth-child(1),
	.social-list3 li:nth-child(2){
		margin-bottom: 1.833rem;
	}
	.social-list3 li .cont{
		width: calc(100% - 10px);
		top: 50%;
	}
	[class*="social-list"] li .txt{
		font-size: 20px;
	}

	.vision-box h5{
		padding: 0 20%;
		text-align: center;
	}
	.zero-box{
		height: 9.429rem;
		background-position: right;
	}
	.col-box.reverse{
		flex-direction: column-reverse;
	}
	.col-box .txt{
		padding-left: 10px;
		margin-top: 1.714rem;
	}
	.col-box .txt.reverse{
		padding-left: 10px;
		padding-right: 20px;
	}
	.social-list4{
		flex-direction: column;
		padding: 30px 52px 52px;
		gap: 2.857rem;
	}
	.social-list4 li{
		width: 100%;
		height: 11.571rem;
	}
	.social-list4::before{
		width: 6px;
		height: 100%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	.social-list4::after{
		transform: translateX(-50%) rotate(90deg);
		top: auto;
		bottom: -10px;
		right: auto;	
		left: 50%;
	}
	.program-list li:not(:last-child){margin-bottom: 4.286rem;}
	.social-list5{
		flex-direction: column;
	}
	.social-list5 li{
		padding: 30px 20px;
	}
	.social-list5 li:not(:last-child):after{
		top: auto;
		right: auto;
		left: 50%;
		bottom: -31px;
		transform: translateX(-50%) rotate(90deg);
		width: 12px;
		height: 34px;
	}
	
	.fs-small{
		font-size: 10px;
	}

	.btn{
		padding: 10px 25.5px;
		font-size: 1.143rem;
	}
	.unit{
		margin-top: -1.4rem;
    margin-bottom: 1.667rem;
	}
	.tb-tit{
		margin-top: 5rem !important;
	}
	.m_show{display: block;}
	.m_hide{display: none;}
	colgroup{
		display: none;
	}
	.mt-20{margin-top: 4.286rem !important;}
	.pt-20{padding-top: 7.5rem !important;}
	.f-normal{font-size: 1rem;}
	.sect-mt2{margin-top: 7.5rem;}
	.sect-pb3{
		padding-bottom: 7.143rem;
	}
}

@media screen and (max-width: 575px){
	.unit{
		margin-top: -1.4rem;
    margin-bottom: 1.667rem;
	}
	
	.social-list3 li .cont{
		width: calc(100% - 10px);
	}
	
	[class*="social-list"] li .txt{
		font-size: 1rem;
	}
	.vision-box h5{
		padding: 0 10%;
	}
}