.esg > picture img {width: 100%; max-width: 1920px;}
.esg > picture {display: block;}

.esg-section1 {width: 100%; background: url('/work/img/esg_section1_bg.png') no-repeat center; background-size: cover; display: flex; flex-direction: column; align-items: center; padding-top: 135px; padding-bottom: 133px; position: relative;}
.esg-section1 ul {display: flex; margin-top: 79px;width: 100%; max-width: 1110px; position: relative;}
/* 브라우저 전체 폭 border layer */
.esg-section1 .full-line {position: absolute; left: 50%; bottom:133px; transform: translateX(-50%); width: 100%; min-height: 330px; border-top: 1px solid #c9c9c9; border-bottom: 1px solid #c9c9c9; pointer-events: none; z-index: 0;}
.esg-section1 ul::before {content: ''; position: absolute; left: 0; top: -137%; width: 1px; height: 934px; background-image: url('/work/img/esg_line.svg'); background-size: contain; background-repeat: no-repeat;}
.esg-section1 ul::after {content: ''; position: absolute; right: 0; top: -137%; width: 1px; height: 934px; background-image: url('/work/img/esg_line.svg'); background-size: contain; background-repeat: no-repeat;}
.esg-section1 ul li {flex:1; min-height: 330px; display: flex; flex-direction: column; align-items: center; border-right: 1px solid #C9C9C9; padding-top: 48px; position: relative;}
.esg-section1 ul li:last-child {border-right: none;}
.esg-section1 ul li strong {margin-top: 21.35px; margin-bottom: 8.5px; color: #3A9286; text-align: center; font-size: 22px; font-style: normal; font-weight: 700; line-height: 150%;}
.esg-section1 ul li p {text-align: center; font-size: 16px; font-style: normal;font-weight: 300; color: #444; line-height: 175%; letter-spacing: -0.32px;  word-break: keep-all;}

.esg-section2 {width: 100%; background: url('/work/img/esg_section2_bg.jpg') no-repeat center/cover; display: flex; flex-direction: column; align-items: center; padding-top: 140px; padding-bottom: 146px;}
.esg-section2 .list {max-width: 914px; margin: 0 auto; padding-top: 41px;}
.esg-section2 .list img {width: 100%; margin-bottom: 29px;}
.esg-section2 .list ul {display: flex; padding: 0 20px;}
.esg-section2 .list ul li {flex: 1; text-align: center;}
.esg-section2 .list ul li h3 {color: #2B8075; font-size: 24px; font-style: normal; font-weight: 700; line-height: 137.5%;}
.esg-section2 .list ul li p {color: #444; font-size: 16px; font-style: normal; font-weight: 300;line-height: 175%}

.esg-section3 {width: 100%; display: flex; flex-direction: column; align-items: center; /* gap: 66px; */ padding: 144px 0;}
.esg-section3 > img {padding-top: 66px;}
.esg-section3 .bgimg-area {width: 100%; height: 400px; background: url('/work/img/esg_section3_chart_mo.svg') no-repeat center;}
.esg-section3 ul {text-align: center; display: flex; flex-direction: column; gap: 60px;}
.esg-section3 ul li {position: relative;}
.esg-section3 ul li::after {content: ''; position: absolute; width:22px; height:1px; background-color: #3A9286; left: 50%; bottom: -30px;transform: translateX(-50%);}
.esg-section3 ul li:last-child:after {display: none;}
.esg-section3 ul li p {color: #444; font-size: 16px; font-style: normal; font-weight: 300;line-height: 175%;}

@media (max-width: 1024px){
    .esg-section1 {background: url('/work/img/esg_section1_bg_mo.png') no-repeat center/cover; padding: 100px 0 111px 0;}
    .esg-section1::before, .esg-section1::after {content: ''; position: absolute; top: 0; height: 100%; width: 1px; background: linear-gradient(0deg, rgba(201, 201, 201, 0) 0%, #C9C9C9 11.54%);}
    .esg-section1 .full-line {display: none;}
    .esg-section1::before {left: calc(50% - (100% - 45px) / 2);}
    .esg-section1::after {right: calc(50% - (100% - 45px) / 2);}
    .esg-section1 ul {flex-direction: column; margin-top: 32px;}
    .esg-section1 ul li {border-top: 1px solid #c9c9c9; border-right: 0; padding: 30px 0;}
    .esg-section1 ul li:last-child {border-bottom: 1px solid #C9C9C9;}
    .esg-section1 ul li strong {margin-top: 29px; margin-bottom: 15px;}
    .esg-section2 {background: url('/work/img/esg_section2_bg_mo.jpg') no-repeat center/cover; padding: 120px 0 60px 0;}
    .esg-section1 ul li p {max-width: 268px;}
    .esg-section2 .list {padding-top: 60px;}
    .esg-section2 .list ul {flex-direction: column; gap: 50px;}
    .esg-section2 .list img {width: 60%; margin: 0 auto;}
    .esg-section2 .list h3 {margin-top: 6px;}
    .esg-section3 {/* gap: 36px; */ padding: 100px 0 188px 0;}
    .esg-section3 .bgimg-area {padding-top: 36px; padding-bottom: 40px;} 
}