.sub._company{ word-break: keep-all; }
.sub._company .s1 .rect {background: #fff;}

/* overview */
._company .s2{
    padding-top: 70px;
    position: relative;
}
._company .s2._n2{padding-bottom: 180px;}
._company .s2::before {
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}

._company .flx{display: flex;align-items: center;justify-content: space-between;}
._company .flx .txtWrap{overflow: hidden;}
._company .flx .txtWrap p{
    font-size: 54px;font-weight: 600;
    font-family: 'Poppins';
    line-height: 1.3;
    letter-spacing: -0.045em;
}
._company .flx .tabBx{
    display: flex;align-items: center;gap: 20px;
    flex-wrap: wrap; justify-content: center;
}
._company .flx .tabBx a{
    font-size: 18px;font-weight: 400;
    text-align: center;
    font-family: 'Poppins';
    color: #222222;
    border: 1px solid #cccccc;
    border-radius: 11px;
    padding: .8em 1.5em;
    box-sizing: border-box;
    transition: color 0.4s, background 0.4s, border 0.4s;
    letter-spacing: -0.03em;
}
._company .flx .tabBx a.on, ._company .flx .tabBx a:hover{
    color: #fff;
    background: #0076ff;
    border: 1px solid #0076ff;
}

@media screen and (max-width: 1280px){
    ._company .flx .txtWrap p{ font-size: 45px; }
    ._company .flx .tabBx a{ font-size: 16px; }
    ._company .flx .tabBx{ gap: 10px; }
}

@media screen and (max-width: 820px){
    ._company .flx{ flex-direction: column; }
    ._company .flx .txtWrap p{ font-size: 35px; }
    ._company .flx .tabBx{ margin-top: 30px; }
    ._company .flx .tabBx a{ font-size: 14px; }
}

@media screen and (max-width: 360px){
    ._company .flx .txtWrap p{ font-size: 26px; }
    ._company .flx .tabBx a{ width: 100%; }
}




._company .s2 .cont{display: flex;align-items: center;margin-top: 60px;}
._company .s2 .cont .left{ width: 50%; padding-right: 30px; box-sizing: border-box;}
._company .s2 .cont .left .imgBx{
    position: relative;
    border: 1px solid #cccccc;
    border-radius: 22px;
}
._company .s2 .cont .left .imgBx::before{
    content: '';
    display: block;
    padding-bottom: calc(450 / 687 * 100%);
}
._company .s2 .cont .left .imgBx img{
    position: absolute;
    top: 50%; left: 50%; transform: translate(-50%, -50%);
    max-width: 70%;
}

._company .s2 .cont .right{width: 50%; display: flex; flex-direction: column; align-items: flex-end;}
._company .s2 .cont .right .row{
    display: flex;gap: 25px;margin-bottom: 30px; width: 100%; max-width: 650px; align-items: flex-start;
}
._company .s2 .cont .right .row._start{align-items: flex-start;}
._company .s2 .cont .right .row:last-child{margin-bottom: 0;}
._company .s2 .cont .right .row em{
    background:#222222;
    display: flex;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    padding: .6em .8em;
    box-sizing: border-box;
    border-radius: 24px;
    flex-shrink: 0;
    min-width: 110px;
    text-align: center;
    font-weight: 400;
    letter-spacing: -0.045em;
}
._company .s2 .cont .right .row span{
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: -0.045em;
    padding-top: 0.3em;
    box-sizing: border-box;
    display: block;
    /* white-space: nowrap; */
}

._company .s3{padding: 180px 0;box-sizing: border-box;}
._company .s3 .titBx{
    overflow: hidden;
    text-align: center; margin-bottom: calc(40 / 44 * 1em);font-size: 44px;
}
._company .s3 .titBx p{
    font-weight: 600;color: #222222;
    font-family: 'Poppins';
}

._company .s3 .cont{
    display: flex;flex-wrap: wrap;gap: 30px;
}
._company .s3 .cont .item{
    width: calc((100% - (30px * 3)) / 4);
}
._company .s3 .cont .item .imgBx{background-color: #f3f3f3;box-sizing: border-box; position: relative;border-radius: 22px; padding: 30px; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}

._company .s3 .cont .item .txtBx{
    text-align: center;margin-top: 18px;
    display: flex;flex-direction: column;gap: 8px;
}
._company .s3 .cont .item .txtBx em{
    color: #222;
    font-size: 20px;font-weight: 700;
    letter-spacing: -0.045em;
    line-height: 1.3;
}
._company .s3 .cont .item .txtBx span{
    display: block;
    letter-spacing: -0.045em;
    color: #666666;
    font-size: 16px;font-weight: 400;
    line-height: calc(24 / 16);
}

@media screen and (max-width: 1280px){
    ._company .s2{ padding-top: 20px; }
    ._company .s2 .cont .right .row{ margin-bottom: 20px; gap: 15px; }
    ._company .s2 .cont .right .row em{ font-size: 18px; }
    ._company .s2 .cont .right .row span{ font-size: 18px; }

    ._company .s3{ padding: 120px 0; }
    ._company .s3 .titBx{ font-size: 35px; }
    ._company .s3 .cont{ gap: 20px; }
    ._company .s3 .cont .item{ width: calc((100% - (20px * 3)) / 4); }
    ._company .s3 .cont .item .imgBx{ padding: 20px; }
    ._company .s3 .cont .item .txtBx em{ font-size: 18px; }
    ._company .s3 .cont .item .txtBx span{ font-size: 14px; }
}

@media screen and (max-width: 820px){
    ._company .s2 .cont{ flex-direction: column; margin-top: 30px; }
    ._company .s2 .cont .left{ width: 100%; max-width: 350px; padding: 0; margin: 0 auto; }
    ._company .s2 .cont .left .imgBx{ border-radius: 16px; }
    
    ._company .s2 .cont .right{ width: 100%;  max-width: 350px; margin: 0 auto; margin-top: 30px; }
    ._company .s2 .cont .right .row{ gap: 10px; }
    ._company .s2 .cont .right .row em{ font-size: 16px; min-width: 90px;  }
    ._company .s2 .cont .right .row span{ font-size: 16px; padding-top: 0.4em; }

    ._company .s3 .cont{ gap: 40px 0; justify-content: space-between; }
    ._company .s3 .cont .item{ width: 48%; }
}

@media screen and (max-width: 500px){
    ._company .s2 .cont .right .row{ margin-bottom: 10px; }
    ._company .s2 .cont .right .row em{ font-size: 14px; min-width: 70px; }
    ._company .s2 .cont .right .row span{ font-size: 14px; }

    ._company .s3 .cont{ flex-direction: column; }
    ._company .s3 .cont .item{ width: 100%; }
    ._company .s3 .cont .item .imgBx{ border-radius: 16px; }
}






/* history */

._company .pin_sec{padding-bottom: 180px;position: relative;}
._company .pin_sec::before{
    content: '';
    display: block;
    width: 100%;
    height: 3px;
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
}
._company .pin_sec .pinBx{margin-top: 140px;}
._company .pin_sec .pinBx .pin_cont{
    display: flex;justify-content: space-between; align-items: flex-start;
}
._company .pin_sec .pinBx .pin_cont .left{
    width: 50%; padding-right: 20px; box-sizing: border-box;
}
._company .pin_sec .pinBx .pin_cont .left p{
    font-size: 54px;font-weight: 700;
    color: #222222; letter-spacing: -0.045em; line-height: 1.3;
}
._company .pin_sec .pinBx .pin_cont .left p b{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(to right, #6cb9ff 0%, #7293f3 100%);
}
._company .pin_sec .pinBx .pin_cont .left span{
    font-size: 22px;font-weight: 300;
    color: #666666;
    letter-spacing: -0.045em;
    line-height: calc(30 / 22);
    margin-top: calc(40 / 22 * 1em);
    display: block;
}
._company .pin_sec .pinBx .pin_cont .left span em{
    font-weight: 700;
}
._company .pin_sec .pinBx .pin_cont .right{
    position: relative;padding-left: 70px;box-sizing: border-box; width: 50%;
}
._company .pin_sec .pinBx .pin_cont .right .lineBx{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 2px;
    background-color: #b8b9bf;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    transform-origin: center top;
}
._company .pin_sec .pinBx .pin_cont .right .lineBx .line{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #7292f3;
    transform: scaleY(0);
    transform-origin: center top;
}
._company .pin_sec .pinBx .pin_cont .right .lineBx .dot{

}

._company .pin_sec .pinBx .pin_cont .right .yearBx{
    margin-bottom: 70px;
}
._company .pin_sec .pinBx .pin_cont .right .yearBx .y_dot{
    display: block;
    width: 12px;height: 12px;border-radius: 50%;background-color: #cccccc;
    position: absolute;
    left: 1px;
    transform: translateX(-50%);
}
._company .pin_sec .pinBx .pin_cont .right .yearBx .y_dot.on{
    background-color: #7292f3;
}
._company .pin_sec .pinBx .pin_cont .right .yearBx .y_dot.on::before{
    content: '';
    display: block;
    width: 17px;height: 17px;
    border: 1px solid #7292f3;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
}
._company .pin_sec .pinBx .pin_cont .right .yearBx:last-child{
    margin-bottom: 0;
}
._company .pin_sec .pinBx .pin_cont .right .yearBx .year{
    font-size: 44px;font-weight: 700;color: #222;
    margin-bottom: calc(50 / 44 * 1em);line-height: 0.3; letter-spacing: -0.045em;
}
._company .pin_sec .pinBx .pin_cont .right .yearBx .txtBx{}
._company .pin_sec .pinBx .pin_cont .right .yearBx .txtBx .txt{
    margin-bottom: 8px; line-height: 1.4;
}
._company .pin_sec .pinBx .pin_cont .right .yearBx .txtBx .txt:last-child{
    margin-bottom: 0;
}
._company .pin_sec .pinBx .pin_cont .right .yearBx .txtBx .txt p{
    font-size: 20px;font-weight: 400;color: #222;position: relative;
    padding-left: .3em; letter-spacing: -0.045em;
}
._company .pin_sec .pinBx .pin_cont .right .yearBx .txtBx .txt p:before{
    content: '•';
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-100%, 0);
}

@media screen and (max-width: 1280px){
    ._company .pin_sec .pinBx .pin_cont .left p{ font-size: 35px; }
    ._company .pin_sec .pinBx .pin_cont .left span{ font-size: 18px; }
    ._company .pin_sec .pinBx .pin_cont .right{ padding-left: 40px; }
    ._company .pin_sec .pinBx .pin_cont .right .yearBx .year{ font-size: 35px; }
    ._company .pin_sec .pinBx .pin_cont .right .yearBx .txtBx .txt p{ font-size: 18px; }
}

@media screen and (max-width: 820px){
    ._company .pin_sec{ padding-bottom: 130px; }
    ._company .pin_sec .pinBx{ margin-top: 70px; }
    ._company .pin_sec .pinBx .pin_cont .left p{ font-size: 30px; }
    ._company .pin_sec .pinBx .pin_cont .left span{ font-size: 16px; }
    ._company .pin_sec .pinBx .pin_cont .right{ padding-left: 30px; }
    ._company .pin_sec .pinBx .pin_cont .right .yearBx .year{ font-size: 24px; }
    ._company .pin_sec .pinBx .pin_cont .right .yearBx .txtBx .txt p{ font-size: 16px; }
}

@media screen and (max-width: 500px){
    ._company .pin_sec .pinBx .pin_cont{ flex-direction: column; }
    ._company .pin_sec .pinBx .pin_cont .left{ width: 100%; padding: 0; }
    ._company .pin_sec .pinBx .pin_cont .left p{ font-size: 22px; }
    ._company .pin_sec .pinBx .pin_cont .left span{ font-size: 14px; }

    ._company .pin_sec .pinBx .pin_cont .right{ width: 100%; margin-top: 70px; }
    ._company .pin_sec .pinBx .pin_cont .right .yearBx .year{ font-size: 22px; }
    ._company .pin_sec .pinBx .pin_cont .right .yearBx .txtBx .txt p{ font-size: 14px; }
}





/* location */
._company .s2._n2 .mapBx {
    margin-top: 140px;
}

/* ===== 지도 영역 ===== */
._company .s2._n2 .mapBx .maps {
    position: relative;
    width: 100%;
}

/* 비율 유지 */
._company .s2._n2 .mapBx .maps::before {
    content: '';
    display: block;
    padding-bottom: calc(600 / 1440 * 100%);
}

/* 지도 공통 */
._company .s2._n2 .mapBx .maps ._map {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility .4s ease;
    will-change: opacity;
}

._company .s2._n2 .mapBx .maps ._map.on {
    opacity: 1;
    visibility: visible;
}

._company .s2._n2 .mapBx .maps iframe {
    width: 100%;
    height: 100%;
    border-radius: 11px;
}

._company .s2._n2 .mapBx .tabBx {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

._company .s2._n2 .mapBx .tabBx .item {
    width: calc((100% - (30px * 2)) / 3);
    background: #cccccc;
    border-radius: 12px;
    padding: 2px;
    cursor: pointer;
}

._company .s2._n2 .mapBx .tabBx .item .inner {
    background: #fff;
    border-radius: 10px;
    padding: 30px 40px;
    box-sizing: border-box;
    height: 100%;
}

._company .s2._n2 .mapBx .tabBx .item.on {
    background: linear-gradient(90deg, #6fd0f0, #9c7cff);
}
._company .s2._n2 .mapBx .tabBx .item:hover{
    background: linear-gradient(90deg, #6fd0f0, #9c7cff);
}


._company .s2._n2 .mapBx .tabBx em {
    font-size: 20px;
    font-weight: 700;
    color: #222;
    letter-spacing: -0.045em;
}

._company .s2._n2 .mapBx .tabBx span {
    font-size: 18px;
    color: #666;
    line-height: 1.6;
    display: block;
    margin-top: 15px;
    letter-spacing: -0.045em;
}

@media screen and (max-width: 1280px){
    ._company .s2._n2 .mapBx{ margin-top: 50px; }
    ._company .s2._n2 .mapBx .tabBx{ gap: 15px; margin-top: 20px; }
    ._company .s2._n2 .mapBx .tabBx .item{ width: calc((100% - (15px * 2)) / 3); }
    ._company .s2._n2 .mapBx .tabBx .item .inner{ padding: 20px 15px; }
    ._company .s2._n2 .mapBx .tabBx em{ font-size: 18px; }
    ._company .s2._n2 .mapBx .tabBx span{ font-size: 16px; }
}

@media screen and (max-width: 820px){
    ._company .s2._n2 .mapBx{ margin-top: 30px; }
    ._company .s2._n2 .mapBx .tabBx{ gap: 10px; }
    ._company .s2._n2 .mapBx .tabBx .item{ width: calc((100% - (10px * 2)) / 3); }
    ._company .s2._n2 .mapBx .tabBx .item .inner{ padding: 20px 10px; }
    ._company .s2._n2 .mapBx .tabBx em{ font-size: 16px; }
    ._company .s2._n2 .mapBx .tabBx span{ font-size: 14px; margin-top: 10px; }
    ._company .s2._n2 .mapBx .maps::before{ padding-bottom: 60%; }
}

@media screen and (max-width: 500px){
    ._company .s2._n2 .mapBx .tabBx{ flex-direction: column; }
    ._company .s2._n2 .mapBx .tabBx .item{ width: 100%; }
    ._company .s2._n2 .mapBx .maps::before{ padding-bottom: 100%; }
}





/* esg */

.esg .s2_bg{
    margin-top: 200px;
    background: #f6f6f6;
    position: relative;
    padding: 40px 0;
    box-sizing: border-box;
}
.esg .s2_bg .s2_txt{
    position: absolute;
    top: -110px;
    right: 5vw;
    font-size: 132px;
    font-weight: 700;
    color: #f6f6f6;
    letter-spacing: -0.045em;
}
.esg .s2_bg .flxBx{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.esg .s2_bg .flxBx .left{
    position: relative;
    top: -9vw;
    width: 45%; max-width: 527px;
}
.esg .s2_bg .flxBx .left .imgBx{
    position: relative;
    border-radius: 22px;
    overflow: hidden;
}
.esg .s2_bg .flxBx .left .imgBx:before{
    content: '';
    display: block;
    padding-bottom: calc(692 / 527 * 100%);
}
.esg .s2_bg .flxBx .left .imgBx img{
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.esg .s2_bg .flxBx .right{
    width: calc(770 / 1440 * 100%)
}
.esg .s2_bg .flxBx .right .info_txt{

}
.esg .s2_bg .flxBx .right .info_txt p{
    font-size: 18px;
    font-weight: 400;
    color: #222;
    line-height: calc(30 / 18);
    margin-bottom: 25px;
    letter-spacing: -0.045em;
    
}
.esg .s2_bg .flxBx .right .info_txt h3{
    font-size: 20px;
    font-weight: 400;
    color: #222;
}
.esg .s2_bg .flxBx .right .info_txt h3 strong{
    font-size: 24px; font-weight: 700;
}

@media screen and (max-width: 1280px){
    .esg .s2_bg{ margin-top: 100px; }
    .esg .s2_bg .s2_txt{ font-size: 70px; top: -60px; }
    .esg .s2_bg .flxBx{ align-items: flex-start; }
    .esg .s2_bg .flxBx .right .info_txt p{ font-size: 16px; }
    .esg .s2_bg .flxBx .left{ top: -120px; }
    .esg .s2_bg .flxBx .right .info_txt h3{ font-size: 16px; }
    .esg .s2_bg .flxBx .right .info_txt h3 strong{ font-size: 20px; }
}

@media screen and (max-width: 820px){
    .esg .s2_bg .flxBx{ flex-direction: column; }
    .esg .s2_bg .flxBx .left{ top: 0; width: 100%; max-width: 300px; margin: 0 auto; }
    .esg .s2_bg .flxBx .right{ width: 100%; margin-top: 20px; }
    .esg .s2_bg .flxBx .right .info_txt p{ font-size: 14px; }
    .esg .s2_bg .flxBx .right .info_txt h3{ font-size: 14px; }
    .esg .s2_bg .flxBx .right .info_txt h3 strong{ font-size: 18px; }
}

@media screen and (max-width: 500px){
    .esg .s2_bg{ margin-top: 50px; }
    .esg .s2_bg .s2_txt{ font-size: 50px; top: -40px; }
}




.esg .titleWrap{ overflow: hidden; }
.esg .titleWrap > strong{ font-size: 50px; letter-spacing: -0.045em; font-weight: 700; text-align: center; display: block; }


.esg .s3{ padding: 0; padding-top: 185px; }
.esg .s3 .esglist{ margin-top: 50px; display: flex; flex-wrap: wrap; gap: 10px; }
.esg .s3 .esglist li{ width: calc((100% - (10px * 4)) / 5); }
.esg .s3 .esglist li .inn{ padding: 30px 25px; box-sizing: border-box; border-radius: 22px; border: 1px solid #cccccc; box-sizing: border-box; height: 200px; display: flex; flex-direction: column; justify-content: space-between; }
.esg .s3 .esglist li .inn span{ display: block; font-size: 36px; letter-spacing: -0.045em; font-weight: 700; }
.esg .s3 .esglist li .inn p{ font-size: 20px; font-weight: 500; letter-spacing: -0.045em; line-height: calc(32 / 20); color: #222; }

@media screen and (max-width: 1280px){
    .esg .titleWrap > strong{ font-size: 42px; }
    .esg .s3{ padding: 0; padding-top: 120px; }
    .esg .s3 .esglist li .inn{ padding: 20px; height: 180px; }
    .esg .s3 .esglist li .inn span{ font-size: 24px; }
    .esg .s3 .esglist li .inn p{ font-size: 16px; }
    .esg .s3 .esglist li .inn p br{ display: none; }
}

@media screen and (max-width: 820px){
    .esg .s3{ padding: 0; padding-top: 100px; }
    .esg .titleWrap > strong{ font-size: 32px; }
    .esg .s3 .esglist li{ width: calc((100% - (10px * 2)) / 3); }
    .esg .s3 .esglist li .inn{ height: 150px; border-radius: 16px; }
    .esg .s3 .esglist li .inn span{ font-size: 20px; }
    .esg .s3 .esglist li .inn p{ font-size: 14px; }
}

@media screen and (max-width: 500px){
    .esg .s3{ padding: 0; padding-top: 70px; }
    .esg .titleWrap > strong{ font-size: 24px; }
    .esg .s3 .esglist{ justify-content: space-between; gap: 10px 0; }
    .esg .s3 .esglist li{ width: 48%; }
    .esg .s3 .esglist li .inn{ height: 150px; padding: 20px 17px; }
    .esg .s3 .esglist li .inn span{ font-size: 18px; }
    .esg .s3 .esglist li .inn p{ font-size: 13px; }
    
}


.esg .s4{ width: 100%; overflow: hidden; padding: 185px 0; }
.esg .s4 .tabWrap{ width: 100%; max-width: 410px; margin: 0 auto; margin-top: 40px; }
.esg .s4 .tabWrap ul{ width: 100%; display: flex; justify-content: center; gap: 10px; }
.esg .s4 .tabWrap ul li{  display: flex; width: calc((100% - (10px * 2)) / 3); justify-content: center; align-items: center; font-size: 18px; letter-spacing: -0.045em; color: #222222; text-align: center; border-radius: 11px; border: 1px solid #cccccc; box-sizing: border-box; height: 48px; cursor: pointer; transition-duration: 0.2s; }
.esg .s4 .tabWrap ul li.on{ background-color: #0076ff; color: #fff; border-color: #0076ff; }

@media screen and (min-width: 821px){
    .esg .s4 .tabWrap ul li:hover{ background-color: #0076ff; color: #fff; border-color: #0076ff; }
}


.esg .s4 .contbx{ display: block; margin-top: 55px; display: none; }

.esg .s4 .contbx.on{ display: block; }
.esg .s4 .contbx .inbx{ display: flex; align-items: flex-start; margin-bottom: 150px; }
.esg .s4 .contbx .inbx:last-of-type{ margin-bottom: 0; }
.esg .s4 .contbx .inbx .lbx{ width: calc(370 / 1440 * 100%); position: relative; z-index: 1; padding-right: 15px; box-sizing: border-box; }
.esg .s4 .contbx .inbx .lbx b{ font-size: 38px; letter-spacing: -0.045em; font-weight: 700; color: #222222; line-height: calc(50 / 38); }
.esg .s4 .contbx .inbx .rbx{ width: calc(1070 / 1440 * 100%); position: relative; z-index: 0; }
.esg .s4 .contbx .inbx .rbx::before{ content: ''; display: block; width: 100%; right: 100%; height: 120%; top: -10%; background-color: #fff; z-index: 1; position: absolute; }
.esg .s4 .contbx .inbx .rbx > ol{ border-radius: 22px; background-color: #f6f6f6; padding: 40px 50px; box-sizing: border-box; width: 100%; }
.esg .s4 .contbx .inbx .rbx > ol li{ display: flex; align-items: baseline; position: relative; font-size: 20px; font-weight: 500; letter-spacing: -0.045em; line-height: 1.4; margin-bottom: 10px; }
.esg .s4 .contbx .inbx .rbx > ol li::before{ content: '•'; display: block; margin-right: 10px; }
.esg .s4 .contbx .inbx .rbx > ol li:last-of-type{ margin-bottom: 0; }

.esg .s4 .contbx .inbx .rbx .taglist{ display: flex; flex-wrap: wrap; gap: 10px; }
.esg .s4 .contbx .inbx .rbx .taglist li{ padding: 15px 20px; box-sizing: border-box; display: flex; align-items: baseline; justify-content: center; text-align: center; gap: 5px; border-radius: 100px; border: 1px solid #7292f3; box-sizing: border-box; color: #222222; line-height: 1.3; font-size: 20px; }
.esg .s4 .contbx .inbx .rbx .taglist li i{ margin-right: 5px; color: #7292f3; }
.esg .s4 .contbx .inbx .rbx .taglist li span{  font-weight: 500; letter-spacing: -0.045em; }
.esg .s4 .contbx .inbx .rbx .swiper{ width: 120%; overflow: visible; position: relative; z-index: 0; margin-right: -20%; cursor: pointer; }
.esg .s4 .contbx .inbx .rbx .swiper .inn{ border-radius: 22px; overflow: hidden; height: 245px; }
.esg .s4 .contbx .inbx .rbx .swiper .inn img{ width: 100%; height: 100%; object-fit: cover; }

.esg .s4 .contbx .inbx .rbx > em{ font-size: 20px; letter-spacing: -0.045em; line-height: calc(32 / 20); font-weight: 500; color: #222222; display: block; margin-bottom: 30px; }

.esg .s4 .contbx .inbx .rbx .tablebtn{ display: flex; gap: 20px; width: 100%; max-width: 740px; }
.esg .s4 .contbx .inbx .rbx .tablebtn .btn{ width: 100%; display: flex; align-items: center; justify-content: center; padding: 10px; box-sizing: border-box; height: 100px; border-radius: 22px; border: 1px solid #cccccc; font-size: 22px; font-weight: 700; letter-spacing: -0.045em; transition-duration: 0.2s; cursor: pointer; color: #222; }
.esg .s4 .contbx .inbx .rbx .tablebtn .btn i{ margin-left: 10px; }

@media screen and (min-width: 821px){
    .esg .s4 .contbx .inbx .rbx .tablebtn .btn:hover{ background-color: #0076ff; color: #fff; border-color: #0076ff; }
}

.esg .s4 .contbx .inbx .rbx .boxlist{ display: flex; width: 100%; gap: 20px; }
.esg .s4 .contbx .inbx .rbx .boxlist li{ width: 100%; border-radius: 22px; border: 1px solid #cccccc; min-height: 200px; padding: 30px; box-sizing: border-box; width: 100%; }
.esg .s4 .contbx .inbx .rbx .boxlist li .top{ display: flex; align-items: center; font-size: 22px; font-weight: 700; letter-spacing: -0.045em; color: #222; }
.esg .s4 .contbx .inbx .rbx .boxlist li .top i{
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-image: linear-gradient(-75deg, #7998f2 0%, #74e7fa 100%);
    margin-right: 15px;
}
.esg .s4 .contbx .inbx .rbx .boxlist li p{ font-size: 18px; font-weight: 500; letter-spacing: -0.045em; line-height: calc(28 / 18); color: #666666;margin-top: 20px; }


@media screen and (max-width: 1280px){
    .esg .s4{ padding: 120px 0; }

    .esg .s4 .tabWrap{ margin-top: 20px; }
    .esg .s4 .tabWrap ul li{ font-size: 16px; height: 40px; }

    .esg .s4 .contbx .inbx{ margin-bottom: 100px; }
    .esg .s4 .contbx .inbx .lbx b{ font-size: 27px; }
    .esg .s4 .contbx .inbx .rbx > ol{ padding: 30px 20px; }
    .esg .s4 .contbx .inbx .rbx > ol li{ font-size: 16px; }
    .esg .s4 .contbx .inbx .rbx .taglist li{ padding: 12px 15px; font-size: 16px; }
    .esg .s4 .contbx .inbx .rbx > em{ font-size: 16px; margin-bottom: 20px; }

    .esg .s4 .contbx .inbx .rbx .tablebtn .btn{ height: 70px; font-size: 18px; border-radius: 16px; }

    .esg .s4 .contbx .inbx .rbx .boxlist{ gap: 10px;  }
    .esg .s4 .contbx .inbx .rbx .boxlist li{ padding: 20px; }
    .esg .s4 .contbx .inbx .rbx .boxlist li .top{ font-size: 18px; }
    .esg .s4 .contbx .inbx .rbx .boxlist li p{ font-size: 16px; }
    
}

@media screen and (max-width: 820px){
    .esg .s4{ padding: 100px 0; }

    .esg .s4 .tabWrap ul{ gap: 5px; }
    .esg .s4 .tabWrap ul li{ font-size: 14px; height: 35px; }

    .esg .s4 .contbx .inbx{ margin-bottom: 70px; display: block; }
    .esg .s4 .contbx .inbx .lbx{ width: 100%; }
    .esg .s4 .contbx .inbx .lbx b{ font-size: 24px; }
    .esg .s4 .contbx .inbx .lbx b br{ display: none; }

    .esg .s4 .contbx .inbx .rbx{ width: 100%; margin-top: 20px; }
    .esg .s4 .contbx .inbx .rbx::before{ display: none; }
    .esg .s4 .contbx .inbx .rbx > ol{ padding: 30px 20px; }
    .esg .s4 .contbx .inbx .rbx > ol li{ font-size: 14px; }
    .esg .s4 .contbx .inbx .rbx .taglist li{ padding: 10px 12px; font-size: 14px; }
    .esg .s4 .contbx .inbx .rbx .swiper .inn{ border-radius: 16px; height: 160px; }

    .esg .s4 .contbx .inbx .rbx > em{ font-size: 14px; }

    .esg .s4 .contbx .inbx .rbx .tablebtn{ gap: 10px; }
    .esg .s4 .contbx .inbx .rbx .tablebtn .btn{ font-size: 16px; height: 55px; }

    .esg .s4 .contbx .inbx .rbx .boxlist{ flex-direction: column; gap: 10px 0; }
    .esg .s4 .contbx .inbx .rbx .boxlist li{ min-height: 130px; border-radius: 16px; }
    .esg .s4 .contbx .inbx .rbx .boxlist li .top{ font-size: 16px; }
    .esg .s4 .contbx .inbx .rbx .boxlist li p{ font-size: 14px; margin-top: 10px; }

}

@media screen and (max-width: 500px){
    .esg .s4 .contbx{ margin-top: 30px; }
    .esg .s4 .contbx .inbx .lbx b{ font-size: 20px; }

    .esg .s4 .contbx .inbx .rbx{ margin-top: 15px; }
    .esg .s4 .contbx .inbx .rbx > ol{ padding: 20px 10px; border-radius: 16px; }
    .esg .s4 .contbx .inbx .rbx .taglist{ gap: 4px; }
    .esg .s4 .contbx .inbx .rbx .taglist li{ padding: 7px 10px; }
    .esg .s4 .contbx .inbx .rbx .taglist li i{ margin-right: 0; }

    .esg .s4 .contbx .inbx .rbx .tablebtn{ flex-direction: column; gap: 5px; }
}





.esglayer{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99999; text-align: center; display: none; }
.esglayer .bg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8); }
.esglayer .inner{ position: absolute; width: 90%; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 1600px; height: 80vh; background-color: #fff; border-radius: 28px; overflow: hidden; padding: 65px 80px; box-sizing: border-box; display: flex; flex-direction: column; }
.esglayer .inner .close{ position: absolute; top: 40px; right: 40px; padding: 10px; box-sizing: border-box; font-size: 35px; cursor: pointer; }
.esglayer .inner > strong{ font-size: 40px; letter-spacing: -0.045em; color: #222222; font-weight: 700; display: block; padding-top: 10px; flex-shrink: 0; }
.esglayer .inner .tableWrap{ margin-top: 70px; overflow: auto; height: 100%; }
.esglayer .inner .tableWrap table{ width: 100%; table-layout: fixed; font-size: 20px; letter-spacing: -0.045em; color: #222; }
.esglayer .inner .tableWrap table:not(:first-of-type){ border-bottom: 1px solid #cccccc; box-sizing: border-box; margin-bottom: 20px; }
.esglayer .inner .tableWrap table:last-of-type{ border-bottom: none; }

.esglayer .inner .tableWrap table tr th{ padding: 2px 5px; box-sizing: border-box; font-weight: 600; }
.esglayer .inner .tableWrap table tr:last-of-type td{ padding-bottom: 35px; }
.esglayer .inner .tableWrap table tr:last-of-type th{ padding-bottom: 20px; }
.esglayer .inner .tableWrap table tr th .bor{ border-radius: 100px;  padding: 13px 0; box-sizing: border-box; border: 1px solid #cccccc; color: #747474; }
.esglayer .inner .tableWrap table tr th .bor.b1{ background-color: #54cbf5; color: #fff; border-color: #54cbf5; }
.esglayer .inner .tableWrap table tr th .bor.b2{ background-color: #62b1f4; color: #fff; border-color: #62b1f4; }
.esglayer .inner .tableWrap table tr th .bor.b3{ background-color: #7293f4; color: #fff; border-color: #7293f4; }

.esglayer .inner .tableWrap table tr th .bor.c1{ color: #54cbf5; border: 1px solid #54cbf5; }
.esglayer .inner .tableWrap table tr th .bor.c2{ color: #62b1f4; border: 1px solid #62b1f4; }
.esglayer .inner .tableWrap table tr th .bor.c3{ color: #7293f4; border: 1px solid #7293f4; }

.esglayer .inner .tableWrap table tr td{ padding: 15px 0; font-weight: 500; }
.esglayer .inner .tableWrap table tr.bold td{ font-weight: 700; color: #000; }
.esglayer .inner .tableWrap table tr.bold td.c1{ color: #54cbf5; }
.esglayer .inner .tableWrap table tr.bold td.c2{ color: #62b1f4; }
.esglayer .inner .tableWrap table tr.bold td.c3{ color: #7293f4; }

/* 260129 단위 추가 */
.esglayer .inner .tableWrap span{ display: flex; justify-content: end; align-items: center; font-size: 16px; margin-bottom: 16px; padding-right: 18px;}

@media screen and (max-width: 1280px){
    .esglayer .inner > strong{ font-size: 30px; }
    .esglayer .inner .close{ top: 30px; right: 30px; font-size: 30px; }
    .esglayer .inner{ padding: 40px 5%; }

    .esglayer .inner .tableWrap{ margin-top: 30px; }
    .esglayer .inner .tableWrap table{ font-size: 16px; }
    .esglayer .inner .tableWrap table colgroup col:nth-of-type(1){ width: 105px; }
    .esglayer .inner .tableWrap table tr th{ padding: 2px; }
    .esglayer .inner .tableWrap table tr th .bor{ padding: 10px 0; }
    .esglayer .inner .tableWrap table tr:last-of-type th{ padding-bottom: 15px; }
    .esglayer .inner .tableWrap table tr:last-of-type td{ padding-bottom: 25px; }
    .esglayer .inner .tableWrap table tr td{ padding: 10px 0; }

    .esglayer._2 .inner .tableWrap table colgroup col:nth-of-type(1){ width: 170px; }
}

@media screen and (max-width: 820px){
    .esglayer .inner{ padding: 40px 2.5%; }
    .esglayer .inner > strong{ font-size: 24px; padding-top: 0; }
    .esglayer .inner .close{ top: 20px; right: 20px; font-size: 26px; padding: 5px; }

    .esglayer .inner .tableWrap table{ min-width: 900px; font-size: 14px; }
    .esglayer .inner .tableWrap table tr th .bor{ padding: 7px 0; }
    .esglayer .inner .tableWrap table tr:last-of-type th{ padding-bottom: 10px; }
    .esglayer .inner .tableWrap table tr:last-of-type td{ padding-bottom: 15px; }
    .esglayer .inner .tableWrap table tr td{ padding: 7px 0; }

    .esglayer .inner .tableWrap span{ justify-content: flex-start; font-size: 14px; }
}