@charset "utf-8";

/* 게시판 목록 */
.infobox{
	text-align:center;
	padding:4rem 3rem;
	margin-bottom:8rem;
	background-color:#f4fbe7;
	border-radius:5rem;
}
.infobox h3{
	font-size:2.6rem;
	margin-bottom:0.5rem;
	font-weight:normal;
}

.infobox h4 {
	font-size:3.5rem;
	margin-bottom:2.5rem;
}

.infobox p {
	font-size:1.7rem;
	line-height:1.5;
}

/* ESG */
.esgbox h2 {
	font-size:4rem;
	color:#333;
	font-weight:600;
	border-bottom:2px solid #222;
	padding-bottom:1.5rem;
}

.esgbox .con {
	margin-bottom:60px;
}

.esgbox .con .txt_center {
	margin:5rem 0 3.2rem;
	text-align:center;
}

.esgbox .con .txt_center h3 {
	font-size:2.2rem;
	font-weight:normal;
}

.esgbox .con .txt_center h4 {
	margin-top:0.5rem;
	font-weight:700;
	font-size:2.8rem;
	color:#333;
	letter-spacing:-0.01em;
}

.esgbox .con_list {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:5rem;
}

.esgbox .con_list .img_box {
	position: relative;
	border-radius:2rem;
	overflow:hidden;
	height:24rem;
}
.esgbox .con_list .img_box img{
	position:absolute;
	top:50%;
	left:50%;
	width:100%;
	height:100%;
	object-fit: cover;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}

.esgbox .con_list .txt_box {
	margin-top:2rem;
	text-align:center;
}

.esgbox .con_list .txt_box h5 {
	font-size:2.6rem;
	color:#333;
	font-weight:600;
}

.esgbox .con_list .txt_box p {
	margin-top:0.5rem;
	font-size:1.6rem;
	color:#333;
	line-height:1.5;
	letter-spacing:-0.01em;
}

.esgbox  .con img {
	width:100%;
}

.esgbox  .con03 {
	margin-bottom:150px;
}

.esgbox  .con04 strong{
	display: block;
	margin:5rem 0 2rem;
	font-size:2.4rem;
	font-weight: 700;
}
.esgbox  .con04 p,
.esgbox  .con05 p{
	background:#f4f4f4;
	padding:2.5rem;
	border-radius: 1rem;
	line-height:1.8;
}

.esgbox  .con04 a,
.esgbox  .con05 a{
	display: block;
	width: fit-content;
	color:var(--color-white);
	height:5.4rem;
	line-height: 5.4rem;
	padding:0 4rem;
	background:var(--color-base);
	border-radius: 2.7rem;
	margin:2.5rem auto 0;
	-webkit-transition:all 0.3s;
	-o-transition:all 0.3s;
	transition:all 0.3s;
}
.esgbox  .con04 a:hover,
.esgbox  .con05 a:hover{
	background:var(--color-primary);
}
.esgbox  .con05 strong{
	display:block;
	font-size:2.8rem;
	font-weight: 700;
	margin:4rem 0 1.5rem;
	text-align: center;
}
.esgbox  .con05 p{
	font-size:1.6rem;
	margin-bottom:5rem;
	text-align: center;
}

p.conText{
	margin-top: 5rem;
	text-align: center;
}
p.conText b{
	display: block;
	font-size: 2.8rem;
	font-weight: 700;
	margin-bottom: 1rem;
}

@media screen and (max-width: 1420px) {
	.esgbox .con_list{
		gap:2rem;
	}
}

@media screen and (max-width: 767px) {
	.esgbox .con_list{
		grid-template-columns: repeat(2, 1fr);
		column-gap:2rem;
		row-gap: 5rem;
	}
}

@media screen and (max-width: 479px) {
	.esgbox .con_list{
		grid-template-columns: 1fr;
	}
}