/* common */
.esg .title-area {text-align: center;}
.esg .title-area .title {font-size: 50px; font-weight: 700; color: #000; margin-bottom: 25px;}
.esg .title-area .title::before {content: ''; display: block; width: 50px; height: 3px; background: #e50050; margin: 0 auto 10px;}
.esg .title-area .desc {font-size: 16px; font-weight: 300; line-height: 1.88; color: #4c4c4c;}

/* esg */
.esg {overflow: hidden;}
.esg .inner {padding: 80px 0 95px;}
.esg > div:nth-of-type(2n) {background-color: #f7f7f7;}
.esg > div:nth-of-type(2n+1) {background-color: #ffff;}

/* group-title */
/* title-area */
.esg .title-area .inner {padding-bottom: 60px;}
/* swiper */
.esg .simply-scroll {width: 100%; height: auto; margin-bottom: 100px;}
.esg .simply-scroll .simply-scroll-clip {z-index: 2; width: 100%; height: auto;}
.esg .simply-swiper.swiper {margin: 0 -27px;}
.esg .swiper .swiper-slide {position: relative; height: auto;}
.esg .swiper .scroll-thumb {position: relative;}
.esg .swiper .scroll-info {position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; padding: 55px 65px; background: rgba(0, 0, 0, .55); color: #fff; transition: .3s; opacity: 0;}
.esg .swiper .swiper-slide:hover .scroll-info {opacity: 1;}
.esg .swiper .title {display: block; margin-bottom: 10px; font-size: 23px; font-weight: 700;}
.esg .swiper .desc {font-size: 16px; font-weight: 300; line-height: 1.75;}
.esg .swiper .caption {border-top: 1px solid rgba(255, 255, 255, .5); margin-top: 25px; padding-top: 25px;}
.esg .swiper .caption::before {content: '-';}
.esg .swiper .comment {font-size: 15px; font-weight: 300; color: #4c4c4c; margin-top: 15px;}
.esg .swiper .comment::before {content: '·'; margin-right: 5px;}

/* group-mission */
.esg .mission-list {border-top: 2px solid #363d43; margin-top: 50px;}
.esg .mission-list .mission-item {position: relative; border-bottom: 1px solid #ddd; padding: 30px 0; display: flex; align-items: center;}
.esg .mission-list .mission-item::before {content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #000; margin-right: 13px; position: absolute; left: 0; top: 50%;}
.esg .mission-list .title {font-size: 23px; font-weight: 700; color: #000; margin-right: 20px; padding: 0 7px; margin-left: 18px;}
.esg .mission-list .desc {font-size: 17px; font-weight: 300; color: #4c4c4c;}
.esg .mission-item:nth-child(2n) .title {box-shadow: inset 0 -15px 0 rgba(102, 102, 102, .2);}
.esg .mission-item:nth-child(2n+1) .title {box-shadow: inset 0 -15px 0 rgb(229 0 80 / 20%);}

/* group-contact */
.esg .group-contact {background-image: url("../img/esg_bg.jpg"); background-position: center; background-repeat: no-repeat; background-size: cover;}
.esg .group-contact .inner {padding-bottom: 120px;}
.esg .group-contact .title-area .title {color: #fff; margin-bottom: 45px;}
.esg .group-contact .title-area .title::before {background: #fff;}
.esg .group-contact .info-area {position: relative; padding: 55px 70px 80px; border-radius: 20px; background: rgba(0, 0, 0, .4);}
.esg .group-contact .info-area::before, .group-contact .info-area::after {content: ''; position: absolute; background-repeat: no-repeat; background-position: center;}
.esg .group-contact .info-area::before {left: 3%; top: -15%; width: 86px; height: 68px; background-image: url("../img/comma_left.png");}
.esg .group-contact .info-area::after {right: 3%; bottom: -15%; width: 89px; height: 71px; background-image: url("../img/comma_right.png");}
.esg .group-contact .info-area .info-msg {font-size: 17px; font-weight: 300; line-height: 1.94; color: #fff; text-align: center;}
.esg .group-contact .info-area .contact-list {display: flex; margin-top: 60px;}
.esg .group-contact .contact-list .contact-item {position: relative; color: #fff; display: flex; align-items: center;}
.esg .group-contact .contact-item + .contact-item {padding-left: 40px; margin-left: 40px;}
.esg .group-contact .contact-item + .contact-item::before {content: ''; display: inline-block; width: 1px; height: 20px; background: rgba(255, 255, 255, .7); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.esg .group-contact .contact-list i[class^="xi-"]{font-size: 22px; margin-right: 5px;}
.esg .group-contact .contact-list i.xi-send {transform: rotate(-50deg)}
.esg .group-contact .contact-list .title, .group-contact .contact-list .desc {font-size: 20px;}
.esg .group-contact .contact-list .title {font-weight: 700; margin-right: 15px;}
.esg .group-contact .contact-list .desc {font-weight: 300; white-space: nowrap; word-break: break-all;}

/* esg */
.esg .swiper-area {position: relative; padding-bottom: 100px;}
.esg .swiper {max-width: 1500px; margin: 0 auto; max-height: 310px; }
.esg .swiper-slide-active {}
.esg .swiper-slide-active .contents::before {opacity: 0;}
.esg .swiper-slide-active .contents {margin: 0 auto; flex-direction: row;}
.esg .swiper-slide .text {width: 45%;}
.esg .swiper-slide .image {width: 51%; max-width: 660px;}
.esg .swiper-slide img {width: 100%;}
.esg .swiper-slide .thumb-box {position: relative;}

/* swiper-button */
.esg .swiper-area .swiper-button-prev, .esg .swiper-area .swiper-button-next {display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; background: #000; transition: .3s; z-index: 1;}
.esg .swiper-area .swiper-button-prev:hover, .esg .swiper-area .swiper-button-next:hover {background: #333;}
.esg .swiper-area .swiper-button-prev::after, .esg .swiper-area .swiper-button-next::after {display: none;}
.esg .swiper-area .swiper-button-prev {left: 2%;}
.esg .swiper-area .swiper-button-next {right: 2%;}

/* swiper-pagination */
.esg .swiper-pagination-wrap {}
.esg .swiper-pagination {position: static; margin-top: 45px; display: block;}
.esg .swiper-pagination-bullet {border-radius: 0; width: 35px; height: 7px;}
.esg .swiper-pagination-bullet-active {background: #e50050;}
.esg .swiper-pagination-bullet + .swiper-pagination-bullet {margin-left: 25px;}

.esg .swiper-button-prev, .esg .swiper-button-next {top: 30%;}
.esg .swiper-button-next::after, .esg .swiper-button-prev::after {display: none;}

/* media query */
@media screen and (max-width: 1700px) {
    /* common */
    .esg .inner {padding: 80px 20px 95px;}

    /* .esg .swiper-area {padding: 0 20px 100px;} */

    .esg .swiper .scroll-info {padding: 30px;}
}

@media screen and (max-width: 1500px) {
    /* group-contact */
    .esg .group-contact .contact-list .desc {white-space: normal;}
}

@media screen and (max-width: 1400px) {
    /* common */
    .esg .inner {padding: 80px 60px 95px;}

    /* .esg .swiper-area {padding: 0 60px 100px;} */
    /* .esg .swiper-area {padding: 0 0 100px;} */
}

@media screen and (max-width: 1300px) {
    /* group-contact */
    .esg .group-contact .info-area .contact-list {flex-direction: column;}
    .esg .group-contact .contact-item + .contact-item {padding-left: 0; margin: 12px 0 0;}
    .esg .group-contact .contact-item + .contact-item::before {display: none;}
}

@media screen and (max-width: 1200px) {
    .esg .swiper {max-height: 376px; }
}

@media screen and (max-width: 1023px) {
    /* common */
    .esg br {display: none;}
    .esg .title-area .title {font-size: 40px;}

    /* group-contact */
    .esg .group-contact .info-area::before, .esg .group-contact .info-area::after {background-size: contain; width: 75px;}
    .esg .group-contact .info-area::before {top: -8%;}
    .esg .group-contact .info-area::after {bottom: -8%;}

    .esg .swiper-area .swiper-button-prev, .esg .swiper-area .swiper-button-next {display: none;}
}

@media screen and (max-width: 767px) {
    /* common */
    .esg .inner {padding: 60px 40px;}
    .esg .title-area .title {font-size: 35px; margin-bottom: 20px;}
    .esg .title-area .desc {font-size: 15px; line-height: 1.65;}

    /* .esg .swiper-area {padding: 0 40px 60px;} */
    .esg .swiper-area {padding: 0 0 60px;}
    .esg .swiper {max-height: 488px; }

    /* swiper */
    .esg .simply-scroll {margin-bottom: 50px;}
    .esg .swiper .title {font-size: 21px;}
    .esg .swiper .desc {font-size: 15px;}
    .esg .swiper .comment {font-size: 14px;}
    .esg .swiper-pagination {margin-top: 35px;}

    /* group-mission */
    .esg .mission-list {margin-top: 40px;}
    .esg .mission-list .mission-item {padding: 25px 0;}
    .esg .mission-list .title {font-size: 21px;}
    .esg .mission-list .desc {font-size: 16px;}

    /* group-contact */
    .esg .group-contact .info-area .info-msg {font-size: 16px;}
    .esg .group-contact .info-area .contact-list {margin-top: 40px;}
    .esg .group-contact .contact-list .contact-item {display: block; text-align: center;}
    .esg .group-contact .contact-item + .contact-item {margin: 25px 0 0;}
    .esg .group-contact .contact-list i[class^="xi-"] {font-size: 20px;}
    .esg .group-contact .contact-list .title, .group-contact .contact-list .desc {font-size: 18px;}
    .esg .group-contact .info-area::before, .esg .group-contact .info-area::after {width: 70px; display: none;}
}

@media screen and (max-width: 640px) {
    /* group-contact */
    .esg .group-contact .info-area::before, .esg .group-contact .info-area::after {width: 60px;}

}

@media screen and (max-width: 480px) {
    /* common */
    .esg .inner {padding: 60px 20px;}
    .esg .title-area .title {font-size: 30px; margin-bottom: 15px;}
    .esg .title-area .desc {font-size: 14px;}

    /* swiper */
    .esg .swiper .title {font-size: 19px;}
    .esg .swiper .desc {font-size: 14px;}

    /* group-mission */
    .esg .mission-list .title {font-size: 19px;}
    .esg .mission-list .desc {font-size: 15px;}

    /* group-contact */
    .esg .group-contact .info-area {padding: 40px 20px;}
    .esg .group-contact .info-area::before, .esg .group-contact .info-area::after {width: 45px;}
    .esg .group-contact .info-area .info-msg {font-size: 15px;}
    .esg .group-contact .contact-list .title, .group-contact .contact-list .desc {font-size: 17px;}

    .esg .swiper .scroll-info {padding: 0 20px;}
}