@charset "utf-8";

.sub_menu.esg > ul > li { width: 20%; }

.esg-page-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;	
	padding-bottom: 60px;
}
.esg-page-title .inner {
}
.esg-page-title h4 {
	position: relative;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.57;
	text-align: center;
}
.esg-page-title h4:before {
	content:'';
	display: block;
	position: absolute;
	top:0;
	left: -90px;
	width: 47px;
	height: 40px;
	background: url('../images/sub/ico-quote.png') no-repeat center center;
}
.esg-page-title h4:after {
	content:'';
	display: block;
	position: absolute;
	top:0;
	right: -90px;
	transform: rotate(180deg);
	width: 47px;
	height: 40px;
	background: url('../images/sub/ico-quote.png') no-repeat center center;
}
.esg-page-title h4 strong {
	color: #c52122;
}
.esg-page-title h5 {
	font-size: 32px;
	text-align: center;
}
.esg-page-title p {
	margin-top: 30px;
	font-size: 16px;
	text-align: center;
}
.esg-goal-box { 
	padding: 80px 0 100px;
}
.esg-goal-box .goal-ico-list {
	padding: 30px 50px;
	background: #f8f8f8;
	border-radius: 172px;
}
.esg-goal-box .goal-ico-list ul {
	display: flex;
	align-items: center;
	gap: 100px;
	width: 100%;
}
.esg-goal-box .goal-ico-list li {
	position: relative;
	width: 100%;
}
.esg-goal-box .goal-ico-list li + li:before {
	content:'';
	display: block;
	position: absolute;
	top: 50%;
	left: -66px;
	transform: translateY(-50%);
	width: 26px;
	height: 52px;
	background: url('../images/sub/goal-arrow.png') no-repeat center center;
}
.esg-goal-box .goal-ico-list .list-inner {
	padding-top: 100%;
}
.esg-goal-box .goal-ico-list .inner-cont {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	background-color: #ffffff;
	border-radius: 50%;
	border: 18px solid transparent;
}
.esg-goal-box .goal-ico-title {
	font-size: 32px;
	font-weight: 700;
}
.esg-goal-box .goal-ico-text {
	font-size: 20px;
	line-height: 1.6;
	text-align: center;
}
.esg-goal-box .goal-item01 .inner-cont {
	border-color: #cf4e7d;
}
.esg-goal-box .goal-item01 .goal-ico-title {
	color: #cf4e7d;
}
.esg-goal-box .goal-item02 .inner-cont {
	border-color: #9e5391;
}
.esg-goal-box .goal-item02 .goal-ico-title {
	color: #9e5391;
}
.esg-goal-box .goal-item03 .inner-cont {
	border-color: #68568e;
}
.esg-goal-box .goal-item03 .goal-ico-title {
	color: #68568e;
}

.esg-goal-box .goal-file-list > ul {
	display: flex;
	align-items: stretch;
	gap: 24px;
}
.esg-goal-box .goal-file-list > ul > li {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	padding-top: 86px;
}
.esg-goal-box .goal-file-list > ul > li:before {
	content:'';
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 60px;
	background: #535353;
}
.esg-goal-box .goal-file-list > ul > li:after {
	content:'';
	display: block;
	position: absolute;
	top: 60px;
	left: 50%;
	transform: translateX(-50%);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #535353;
}
.esg-goal-box .goal-file-list .download-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 56px;
	background-color: #dddddd;
}
.esg-goal-box .goal-file-list .download-link span {
	display: inline-block;
	padding-left: 25px;
	font-size: 16px;
	color: #111111;
	line-height: 20px;
	background: url('../images/sub/ico-file.png') no-repeat left center;
}
.esg-goal-box .goal-file-list .download-link:hover {
	background-color: #485669;
}
.esg-goal-box .goal-file-list .download-link:hover span {
	color: #fff;
	background: url('../images/sub/ico-file-hover.png') no-repeat left center;
}
.esg-goal-box .goal-file-list .txt-box {
	flex: 1;
	padding: 30px 45px;
	background-color: #fff;
	border: 1px solid #dddddd;
}
.esg-goal-box .goal-file-list ol {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.esg-goal-box .goal-file-list ol > li {
	position: relative;
	font-size: 16px;
	line-height: 2;
	font-weight: 500;
}
.esg-goal-box .goal-file-list ol > li .number{
	position: absolute;
	top: -1px;
	left: -15px;
	line-height: 2;
	font-weight: 500;
}
.esg-goal-box .goal-file-list ol ul li {
	position: relative;
	padding-left: 10px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6875;
}
.esg-goal-box .goal-file-list ol ul li:before {
	content:'-';
	display: block;
	position: absolute;
	top: 0;
	left: 0;
}
.esg-goal-box .goal-topic-boxes {
	padding-top: 100px;
}
.goal-topic-boxes {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 40px;
}
.goal-topic-boxes .box-wrap {
	display: flex;
	align-items: center;
	gap: 20px;
	width: 100%;
}
.goal-topic-boxes .ico {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 160px;
	height: 160px;
	border-radius: 50%;
	border: 1px solid #dddddd;
}
.goal-topic-boxes .topic-title {
	margin-bottom: 13px;
	font-size: 32px;
}
.goal-topic-boxes .txt-box p {
	font-size: 20px;
	line-height: 1.6;
	word-break: keep-all;
}
.esg-roadmap-box .esg-page-title {
	padding-top: 0;
}
.esg-roadmap-box .roadmap-list > ul {
	display: flex;
	align-items: center;
}
.esg-roadmap-box .roadmap-list > ul > li {
	width: calc(100% + 6px);
	margin-left: -12px;
}
.esg-roadmap-box .roadmap-list .roadmap-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 83px;
	gap: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.esg-roadmap-box .roadmap-list .roadmap-item01 .roadmap-item {
	background-image: url('../images/sub/esg-roadmap-bg01.png');
}
.esg-roadmap-box .roadmap-list .roadmap-item02 .roadmap-item {
	background-image: url('../images/sub/esg-roadmap-bg02.png');
}
.esg-roadmap-box .roadmap-list .roadmap-item03 .roadmap-item {
	background-image: url('../images/sub/esg-roadmap-bg03.png');
}
.esg-roadmap-box .roadmap-list .roadmap-item .step {
	font-size: 16px;
	color: #c42122;
}
.esg-roadmap-box .roadmap-list .roadmap-item p {
	font-size: 20px;
	font-weight: 500;
}
.esg-roadmap-box .roadmap-info ul {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 30px 50px;
}
.esg-roadmap-box .roadmap-info ul li {
	position: relative;
	padding-left: 20px;
	font-size: 16px;
	font-weight: 500;
}
.esg-roadmap-box .roadmap-info ul li:before {
	content:'';
	display: block;
	position: absolute;
	top: 4px;
	left: 2px;
	transform: rotate(45deg);
	width: 7px;
	height: 7px;
	background-color: #c52122;
}

.esg-chart-box {
	padding: 100px 0 150px;
}
.esg-chart-box .esg-page-title {
	padding-top: 0;
}
.esg-chart-box .chart-top {
	display: flex;
	align-items: center;
	justify-content: center;
}
.esg-chart-box .chart-top .chart-contents {
	background-color: #c52122;
}
.esg-chart-box .chart-top .chart-contents:before {
	content:'';
	display:block;
	position: absolute;
	top: -8px;
	left: -8px;
	width: calc(100% + 16px);
	height: calc(100% + 16px);
	border: 3px solid #c52122;
	background-color: #fff;
	box-sizing: border-box;
	z-index: -1;
}
.esg-chart-box .chart-top .chart-contents * {
	color: #fff;
}
.esg-chart-box .chart-contents {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 8px;
	position: relative;
	width: 100%;
	max-width: 300px;
	height: 72px;
}
.esg-chart-box .chart-contents .role {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.3;
	text-align: center;
}
.esg-chart-box .chart-contents .name-box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 17px;
}
.esg-chart-box .chart-contents .position {
	font-size: 18px;
	font-weight: 500;
}
.esg-chart-box .chart-contents .name {
	font-size: 20px;
	font-weight: 700;
}
.esg-chart-box .chart-mid {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 100px;
	padding: 70px 0 150px;
}
.esg-chart-box .chart-mid .chart-contents {
	border: 3px solid #c52122;
}
.esg-chart-box .chart-mid .chart-contents.ml-auto {
	position: relative;
    left: -250px;
}
.esg-chart-box .chart-mid .chart-contents.ml-auto:before {
	content:'';
	display: block;
	position: absolute;
	top: 50%;
	left: 100%;
	transform: translateY(-50%);
	width: 100px;
	height: 1px;
	background: #d2d2d2;
	z-index: -1;
}
.esg-chart-box .chart-bottom {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	position: relative;
}
.esg-chart-box .chart-bottom:before {
	content: '';
    display: block;
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 546px);
    height: 1px;
    background: #d2d2d2;
    z-index: -1;
}
.esg-chart-box .chart-bottom .chart-contents {
	background: #485669;
	border: 3px solid #485669;
}
.esg-chart-box .chart-bottom .chart-contents:before {
	content:'';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 30px;
	background: #d2d2d2;
	z-index: -1;
}
.esg-chart-box .chart-bottom .chart-contents * {
	color: #fff;
}
.esg-chart-box .chart-mid2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	position: relative;
	padding-top: 100px;
}
.esg-chart-box .chart-mid2:before {
	content: '';
    display: block;
    position: absolute;
    top: 63px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 285px);
    height: 1px;
    background: #d2d2d2;
    z-index: -1;
}
.esg-chart-box .chart-mid2 .chart-contents {
	position: relative;
	height: 100px;
	background: #ffffff;
	border: 3px solid#c52122;
}
.esg-chart-box .chart-mid2 .chart-contents:before {
	content:'';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 40px;
	background: #d2d2d2;
	z-index: -1;
}

.esg-chart-box .chart-mid3 {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-top: 60px;
}
.esg-chart-box .chart-mid3 .chart-contents {
	position: relative;
	height: 158px;
	background: #485669;
}
.esg-chart-box .chart-mid3 .chart-contents.empty-box {
	height: auto;
	background: none;
}
.esg-chart-box .chart-mid3 .chart-contents:not(.empty-box):before {
	content:'';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 40px;
	background: #d2d2d2;
	z-index: -1;
}
.esg-chart-box .chart-mid3 .chart-contents.chart-center:before {
	height: 60px;
}
.esg-chart-box .chart-mid3 .chart-contents * {
	color: #ffffff;
}
.esg-chart-box .esg-chart-wrap.new-chart-wrap:before {
	height: 135px;
}

.esg-chart-box .chart-bottom2 {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding-top: 30px;
}
.esg-chart-box .chart-bottom2 .chart-contents {
	position: relative;
	height: 100px;
	background: #ffffff;
	border: 3px solid#8b9096;
}
.esg-chart-box .chart-bottom2 .chart-contents:before {
	content:'';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 40px;
	background: #d2d2d2;
	z-index: -1;
}
.esg-chart-box .chart-bottom2 .chart-contents * {
	color: #777777;
}
.esg-chart-box .chart-bottom2 .chart-contents .name {
	color: #111;
}


.esg-chart-box .chart-bottom3 {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	position: relative;
	padding-top: 90px;
}
.esg-chart-box .chart-bottom3:before {
	content: '';
    display: block;
    position: absolute;
    top: 51px;
    left: 142px;
    width: calc(100% - 585px);
    height: 1px;
    background: #d2d2d2;
    z-index: -1;
}
.esg-chart-box .chart-bottom3 .chart-contents {
	position: relative;
	height: auto;
	gap: 0;
	background: #ffffff;
	border: 3px solid#8b9096;
}
.esg-chart-box .chart-bottom3 .chart-contents.empty-box {
	border: none;
}
.esg-chart-box .chart-bottom3 .chart-contents:not(.empty-box):before {
	content:'';
	display: block;
	position: absolute;
	bottom: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: 40px;
	background: #d2d2d2;
	z-index: -1;
}
.esg-chart-box .chart-bottom3 .chart-contents.chart-center:before {
	height: 90px;
}
.esg-chart-box .chart-bottom3 .chart-contents * {
	color: #777777;
}
.esg-chart-box .chart-bottom3 .chart-contents .name {
	color: #111;
}
.esg-chart-box .chart-bottom3 .role-box {
	display: flex;
	align-items: center;
	width: 100%;
}
.esg-chart-box .chart-bottom3 .role-box:not(:first-child) {
	border-bottom: 1px solid #d2d2d2;
}
.esg-chart-box .chart-bottom3 .role-box .position + .name {
	border-left: 1px solid #d2d2d2;
}
.esg-chart-box .chart-bottom3 .role-box .position,
.esg-chart-box .chart-bottom3 .role-box .name {
	width: 100%;
	padding: 14px;
	text-align: center;
}
.esg-chart-box .chart-bottom3 .batch {
	width: 100%;
	padding: 10px;
	font-size: 16px;
	font-weight: 500;
	color: #ffffff;
	box-sizing: border-box;
	text-align: center;
	background-color: #8b9096;
}

.esg-chart-box .esg-chart-wrap {
	position: relative;
}
.esg-chart-box .esg-chart-wrap:before {
	content:'';
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 1px;
	height: calc(100% - 240px);
	background: #d2d2d2;
	z-index: -1;
}

.esg-environment-box {
	padding: 80px 0 100px;
}

.esg-governance-box {
	padding-bottom: 60px;
}
.esg-governance-box.governance-top {
	padding-top: 80px;
}

.basic-box-title {
	margin-bottom: 25px;
}
.basic-box-title .title-name {
	padding-left: 30px;
	font-size: 24px;
	background: url('../images/sub/ico-basic-title.png') no-repeat left center;
}
.basic-text-box {
	display: flex;
	flex-direction: column;
	gap: 30px;
	padding: 30px 40px;
	background: #f8f8f8;
}
.basic-text-box .basic-text-title {
	position: relative;
	padding-left: 21px;
	margin-bottom: 12px;
	font-size: 18px;
	font-weight: 500;
}
.basic-text-box .basic-text-title:before {
	content:'';
	display: block;
	position: absolute;
	top: 3px;
	left: 2px;
	width: 7px;
	height: 7px;
	background: #c52122;
	transform: rotate(45deg);
}
.basic-text-box .basic-text-cont {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
}
.basic-text-box ul {
	margin-top: 10px;
}
.basic-text-box ul li {
	position: relative;
	padding-left: 16px;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
}
.basic-text-box ul li .number {
	position: absolute;
	top: 0;
	left: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.75;
	font-family: 'Noto Sans KR', sans-serif;
}
.multi-box-wrap .box-wrap + .box-wrap {
	margin-top: 60px;
}

.esg-certificate-box {
	padding-bottom: 100px;
}
.esg-certificate-box .quality_slide_wrap {
	padding-top: 0;
}

.esg-structure-box {
	padding-bottom: 150px;
}
.esg-structure-box .structure-box + .structure-box {
	margin-top: 60px;
}
.esg-structure-box .quality_table_wrap {
	text-align: center;
}
.esg-structure-box .table_gray tbody tr {
    border-bottom: 1px solid #d2d2d2;
}
.esg-structure-box .quality_table_wrap tbody td:last-child {
	text-align: center;
}
.esg-structure-box .table_gray th,
.esg-structure-box .table_gray td {
	font-size: 18px;
}

.esg-safety-box {
	padding-bottom: 100px;
}
.esg-safety-box .goal-topic-boxes .box-wrap {
	padding: 10px 0;
}

.basic-images-layout {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-top: 20px;
}
.basic-images-layout .img-wrap img {
	display: block;
}

.esg-local-box {
	padding-bottom: 100px;
}
.esg-education-box {
	padding-bottom: 100px;
}