/* section01 */
.sec01{width: 100%;} 
.sec01{width: 100%; height: 460px; background-image: url(/img/esg/esgSec01.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.sec01Wrap{max-width: 1200px; margin: 0 auto;}
.sec01Wrap>h1{position: absolute; top: 400px; font-size: 80px; font-weight: 900;}


/* 공통 */

section .inner {display: flex; align-items: start; max-width: 1200px; margin: 0 auto;}
section .inner .left {font-size: 32px; font-weight: 700; width: 300px;}
section .inner .right {width: calc(100% - 300px);}
section .inner .right>p {font-family: 'GmarketSansMedium'; font-size: 18px; padding-bottom: 15px; border-bottom: 1px solid #d9d9d9; margin-bottom: 15px;}
section .inner .right>ul {display: flex; gap: 30px;}
section .inner .right>ul li {width: calc(100% - 15px); text-align: left;}
section .inner .right>ul li p {font-size: 22px; font-weight: 700; margin-bottom: 15px;}
section .inner .right>ul li span {font-size: 15px; line-height: 1.4; word-break: keep-all;}


/* section02 */
.sec02 {margin: 200px 0 150px;}


/* section03 */
.sec03 {background-color: #333; position: relative; overflow: hidden; padding: 100px 0; margin-bottom: 150px;}
.sec03 .circle {position: absolute; aspect-ratio: 1/1; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid #666;}
.sec03 .circle.circle1 {width: 40%; z-index: 3;}
.sec03 .circle.circle2 {width: 60%; z-index: 2;}
.sec03 .circle.circle3 {width: 80%; z-index: 1;}
.sec03 .inner {z-index: 10; position: relative; align-items: center;}
.sec03 .inner .left {color: #fff;}
.sec03 .inner .right {display: flex; gap: 15px;}
.sec03 .inner .right .circle-item {display: flex; flex-direction: column; gap: 30px; width: 50%; align-items: center;}
.sec03 .inner .right .circle-item p {display: flex; text-align: center; justify-content: center; align-items: center; width: 200px; height: 200px; border-radius: 50%; border: 1px solid #fff; color: #fff; font-size: 22px; font-weight: 700; background-color: #333;}
.sec03 .inner .right .circle-item span {text-align: center; font-size: 15px; line-height: 1.4; word-break: keep-all; color: #f8f8f8;}


/* section04 */
.sec04{margin-bottom: 200px;}


@media screen and (max-width:1300px) {
    section .inner {flex-direction: column; gap: 50px; width: 90%;}
    section .inner .left {width: 100%; text-align: left;}
    section .inner .right {width: 100%;}
    .sec03 .inner .right {gap: 30px;}
    .sec03 .inner .right .circle-item {width: calc(50% - 15px);}
}

@media screen and (max-width:1024px) {
    
    /* section01 */
    .sec01{width: 100%;} 
    .sec01{width: 100%; height: 328px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }
    .sec01Wrap{padding: 0 15px; box-sizing: border-box;}
    .sec01Wrap>h1{position: absolute; top: 290px; font-size: 45px; font-weight: 900;}

    section .inner {width: 100%; padding: 0 15px; gap: 30px;}
    section .inner .left {font-size: 28px;}
    section .inner .right>p {font-size: 16px;}
    section .inner .right>ul li p {font-size: 18px;}

    .sec02 {margin: 100px 0px;}
    .sec03 {padding: 60px 0; margin-bottom: 100px;}

    .sec03 .inner .right {padding: 0 10px;}
    .sec03 .inner .right .circle-item p {width: 150px; height: 150px; font-size: 18px;}

    .sec04 {margin-bottom: 100px;}
}

@media screen and (max-width:800px) {
    section .inner .right>ul {flex-direction: column;}
    .sec03 .circle.circle1 {width: 60%;}
    .sec03 .circle.circle2 {width: 80%;}
    .sec03 .circle.circle3 {width: 100%;}
}


@media screen and (max-width:500px) {
    section .inner .left {position: 18px;}
    section .inner .right>p {font-size: 15px; padding-bottom: 10px; margin-bottom: 30px;}
    section .inner .right>ul li p {font-size: 16px; margin-bottom: 10px;}
    section .inner .right>ul li span {font-size: 14px;}

    .sec02 {margin: 60px 0px;}
    .sec03 {margin-bottom: 60px;}
    .sec03 .inner .right {flex-direction: column; gap: 30px; margin-bottom: 60px; padding: 0; margin-bottom: 0;}
    .sec03 .inner .right .circle-item {width: 100%;}
    .sec03 .circle.circle1 {width: 100%;}
    .sec03 .circle.circle2 {width: 130%;}
    .sec03 .circle.circle3 {width: 160%;}
    .sec03 .inner .right .circle-item span {font-size: 14px; text-align: center;}
    .sec03 .inner .right .circle-item p {font-size: 16px;}
}