@media screen and (min-width:1201px) { 
#esgTopbanner {position: relative; height: 400px; background-image: url(../img/esgbannerbg.jpg); background-position: center ; background-size: cover; margin-bottom: 100px; background-color: 0,0,0,0,0.5;}
#esgTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
#esgTopbanner .top_text h2{font-size: 54px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
#esgTopbanner .top_text p{font-size: 18px; color: #FFF;}





#esg {position: relative;background-color: #fff; z-index: 0;}
.esg-wrap {max-width:1280px; padding:100px 40px 200px 40px; margin:0 auto; box-sizing:border-box; z-index:0;}
.con-title {font-size: 30px;line-height: 40px;font-weight: 700;color: #000;}
.esg-wrap .default-wrap .con-title {line-height: 54px;}
.esg-wrap .default-wrap + .default-wrap { margin-top: 100px;}
.con-title.border {padding-bottom: 30px;}
.esg-wrap .default-wrap .con-info-box { padding: 20px 0; font-size: 18px;
 font-weight: 400; color: #666;line-height: 34px;word-break: keep-all;}

.esg-strategy {position: relative;}
.esg-strategy .content-wrap {position: relative; width: 720px; height: 720px; margin: 125px auto 27px; border: 1px solid #e4e4e4;border-radius: 50%;
box-sizing: border-box; z-index: 1; }
.esg-strategy .content-wrap .cont-circle1 .circle-title {
    top: 50%;
    left: 50%;
    margin-top: -286px;
    margin-left: -144px;
    background-color: rgba(75,187,136,0.7);
    z-index: 2;
    transition-duration: 0.7s;
    transition-property: background-color;
}

.esg-strategy .content-wrap .cont-circle2 .circle-title {
    top: 50%;
    left: 50%;
    margin-top: -91px;
    margin-left: -251px;
    background-color: rgba(70,186,220,0.7);
    z-index: 3;
    transition-duration: 0.7s;
    transition-property: background-color;
}

.esg-strategy .content-wrap .cont-circle3 .circle-title {
    top: 50%;
    left: 50%;
    margin-top: -91px;
    margin-left: -36px;
    background-color: rgba(4,53,189,0.7);
    z-index: 4;
    transition-duration: 0.7s;
    transition-property: background-color;
    
}


.esg-strategy .content-wrap .cont-circle1 .circle-title:hover {background-color: rgba(75,187,136,1); z-index: 5;}
.esg-strategy .content-wrap .cont-circle2 .circle-title:hover {background-color: rgba(70,186,220,1); z-index: 5;}
.esg-strategy .content-wrap .cont-circle3 .circle-title:hover{background-color: rgba(4,53,189,1); z-index: 5;}


.esg-strategy .content-wrap .content-item .circle-title {
    position: absolute;
    display: inline-block;
    justify-items: center;
    width: 288px;
    height: 288px;
    line-height: 38px;
    text-align: center;
    border-radius: 50%;
}

.esg-strategy .content-wrap .cont-circle1 .circle-title > div {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -53px;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.esg-strategy .content-wrap .cont-circle2 .circle-title > div, .esg-strategy .content-wrap .cont-circle3 .circle-title > div {
    position: absolute;
    top: 50%;
    width: 100%;
    margin-top: -34px;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
}

.esg-strategy .content-wrap .content-item .circle-title > div .eng {
    display: block;
    font-size: 24px;
    font-weight: 500;
    line-height: 30px;
    color: #fff;
}

.esg-strategy .content-wrap .cont-circle1 .circle-sub-cont {
    top: -48px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent;
}

.esg-strategy .content-wrap .cont-circle2 .circle-sub-cont {
    top: 50%;
    left: -100px;
}

.esg-strategy .content-wrap .cont-circle3 .circle-sub-cont {
    top: 50%;
    right: -80px;
}

.esg-strategy .content-wrap .content-item .circle-sub-cont {
    position: absolute;
    display: inline-block;
    padding: 15px 27px;
    font-size: 20px;
    font-weight: 500;
    color: #666;
    line-height: 30px;
    text-align: center;
    background-color: #fff;
    z-index: 5;
}

.esg-strategy .content-wrap .content-info {
    position: absolute;
    bottom: 53px;
    width: 100%;
    padding: 18px 0;
    font-size: 34px;
    font-weight: 700;
    color: #000;
    line-height: 50px;
    text-align: center;
    background-color: #fff;
}



.grid-frame-layout {
    display: flex;
    flex-wrap: wrap;
}


.esg-action .esg-action-content {
    margin-top: 80px;
}
.esg-action .grid-frame-cell {
    padding: 0 30px;
}

.esg-action .grid-frame-cell + .grid-frame-cell {
    border-left: 1px solid #eaeaea;
}
.grid-03 {
    width: 33.33%;
}

.esg-action .esg-action-content .top-visual {
    position: relative;
}

.esg-action .esg-action-content .top-visual .content-title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    line-height: 60px;
    text-align: center;
    z-index: 2;
}

.esg-action .esg-action-content .top-visual .content-img {
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.esg-action .esg-action-content .top-visual .content-img:hover img{scale: 1.2;}

.esg-action .esg-action-content .top-visual .content-img img {width: 100%; transition-duration: 0.5s;}

.esg-action .esg-action-content .top-visual .content-title.environment {
    background-color: rgba(75,187,136,.8);
}
.esg-action .esg-action-content .top-visual .content-title.social {
    background-color: rgba(70,186,220,0.8);
}
.esg-action .esg-action-content .top-visual .content-title.governace {
    background-color: rgba(4,53,189,.8); 
}

.esg-action .esg-action-content .circle-list-content {
    padding: 36px 0;
    word-break: keep-all;
}

.esg-action .esg-action-content .circle-list-content .circle-list-cell {
    position: relative;
    padding-left: 12px;
    font-size: 18px;
    color: #666;
    line-height: 25px;
}

.esg-action .esg-action-content .circle-list-content .circle-list-cell + .circle-list-cell {
    margin-top: 14px;
}


}





.scroll_1 .con-title{opacity: 0; top: 100px; position: relative;}
.scroll_1 .con-info-box{opacity: 0; top: 100px; position: relative;}
.scroll_2 .con-title{opacity: 0; top: 100px; position: relative;}
.scroll_2 .content-wrap {opacity: 0; top: 100px; position: relative;}
.scroll_3 .con-title{opacity: 0; top: 100px; position: relative;}
.scroll_3 .grid-03{opacity: 0; top: 100px; position: relative;}










@media screen and (min-width:901px) and (max-width:1200px) {
    #esgTopbanner {position: relative; height: 400px; background-image: url(../img/esgbannerbg.jpg); background-position: center ; background-size: cover; margin-bottom: 100px; background-color: 0,0,0,0,0.5;}
    #esgTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #esgTopbanner .top_text h2{font-size: 54px; font-weight: bold; margin-bottom: 40px; color: #FFF;}
    #esgTopbanner .top_text p{font-size: 18px; color: #FFF;}
    
    
    
    
    
    #esg {position: relative;background-color: #fff; z-index: 0;}
    .esg-wrap {max-width:1280px; padding:100px 40px 200px 40px; margin:0 auto; box-sizing:border-box; z-index:0;}
    .con-title {font-size: 30px;line-height: 40px;font-weight: 700;color: #000;}
    .esg-wrap .default-wrap .con-title {line-height: 54px;}
    .esg-wrap .default-wrap + .default-wrap { margin-top: 50px;}
    .con-title.border {padding-bottom: 30px;}
    .esg-wrap .default-wrap .con-info-box { padding: 20px 0; font-size: 18px;
     font-weight: 400; color: #666;line-height: 34px;word-break: keep-all;}
    
    .esg-strategy {position: relative;}
    .esg-strategy .content-wrap {position: relative; width: 720px; height: 720px; margin: 125px auto 27px; border: 1px solid #e4e4e4;border-radius: 50%;
    box-sizing: border-box; z-index: 1;}
    .esg-strategy .content-wrap .cont-circle1 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -286px;
        margin-left: -144px;
        background-color: rgba(75,187,136,0.7);
        z-index: 2;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -91px;
        margin-left: -251px;
        background-color: rgba(70,186,220,0.7);
        z-index: 3;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    .esg-strategy .content-wrap .cont-circle3 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -91px;
        margin-left: -36px;
        background-color: rgba(4,53,189,0.7);
        z-index: 4;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    
    .esg-strategy .content-wrap .cont-circle1 .circle-title:hover {background-color: rgba(75,187,136,1);z-index: 5;}
    .esg-strategy .content-wrap .cont-circle2 .circle-title:hover {background-color: rgba(70,186,220,1); z-index: 5;}
    .esg-strategy .content-wrap .cont-circle3 .circle-title:hover{background-color: rgba(4,53,189,1); z-index: 5;}
    
    
    .esg-strategy .content-wrap .content-item .circle-title {
        position: absolute;
        display: inline-block;
        justify-items: center;
        width: 288px;
        height: 288px;
        line-height: 38px;
        text-align: center;
        border-radius: 50%;
    }
    
    .esg-strategy .content-wrap .cont-circle1 .circle-title > div {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -53px;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-title > div, .esg-strategy .content-wrap .cont-circle3 .circle-title > div {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -34px;
        font-size: 28px;
        font-weight: 700;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .content-item .circle-title > div .eng {
        display: block;
        font-size: 24px;
        font-weight: 500;
        line-height: 30px;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .cont-circle1 .circle-sub-cont {
        top: -48px;
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-sub-cont {
        top: 50%;
        left: -100px;
    }
    
    .esg-strategy .content-wrap .cont-circle3 .circle-sub-cont {
        top: 50%;
        right: -80px;
    }
    
    .esg-strategy .content-wrap .content-item .circle-sub-cont {
        position: absolute;
        display: inline-block;
        padding: 15px 27px;
        font-size: 20px;
        font-weight: 500;
        color: #666;
        line-height: 30px;
        text-align: center;
        background-color: #fff;
        z-index: 5;
    }
    
    .esg-strategy .content-wrap .content-info {
        position: absolute;
        bottom: 53px;
        width: 100%;
        padding: 18px 0;
        font-size: 34px;
        font-weight: 700;
        color: #000;
        line-height: 50px;
        text-align: center;
        background-color: #fff;
    }
    
    
    
    .grid-frame-layout {
        display: flex;
        flex-wrap: wrap;
    }
    .esg-action .esg-action-content {
        margin-top: 80px;
    }
    .esg-action .grid-frame-cell {
        padding: 0 30px;
    }
    
    .esg-action .grid-frame-cell + .grid-frame-cell {
        border-left: 1px solid #eaeaea;
    }
    .grid-03 {
        width: 33.33%;
    }
    
    .esg-action .esg-action-content .top-visual {
        position: relative;
    }
    
    .esg-action .esg-action-content .top-visual .content-title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        line-height: 60px;
        text-align: center;
        z-index: 2;
    }
    
    .esg-action .esg-action-content .top-visual .content-img {
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    
    .esg-action .esg-action-content .top-visual .content-img:hover img{scale: 1.2;}
    
    .esg-action .esg-action-content .top-visual .content-img img {width: 100%; transition-duration: 0.5s;}
    
    .esg-action .esg-action-content .top-visual .content-title.environment {
        background-color: rgba(75,187,136,.8);
    }
    .esg-action .esg-action-content .top-visual .content-title.social {
        background-color: rgba(70,186,220,0.8);
    }
    .esg-action .esg-action-content .top-visual .content-title.governace {
        background-color: rgba(4,53,189,.8); 
    }
    
    .esg-action .esg-action-content .circle-list-content {
        padding: 36px 0;
        word-break: keep-all;
    }
    
    .esg-action .esg-action-content .circle-list-content .circle-list-cell {
        position: relative;
        padding-left: 12px;
        font-size: 18px;
        color: #666;
        line-height: 25px;
    }
    
    .esg-action .esg-action-content .circle-list-content .circle-list-cell + .circle-list-cell {
        margin-top: 14px;
    }
}
















@media screen and (min-width:601px) and (max-width:900px) {
    #esgTopbanner {position: relative; height: 300px; background-image: url(../img/esgbannerbg.jpg); background-position: center ; background-size: cover; margin-bottom: 100px; background-color: 0,0,0,0,0.5;}
    #esgTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #esgTopbanner .top_text h2{font-size: 34px; font-weight: bold; margin-bottom: 24px; color: #FFF;}
    #esgTopbanner .top_text p{font-size: 18px; color: #FFF;}
    
    
    
    
    
    #esg {position: relative;background-color: #fff; z-index: 0;}
    .esg-wrap {max-width:1280px; padding:100px 40px 100px 40px; margin:0 auto; box-sizing:border-box; z-index:0;}
    .con-title {font-size: 30px;line-height: 40px;font-weight: 700;color: #000;}
    .esg-wrap .default-wrap .con-title {line-height: 54px;}
    .esg-wrap .default-wrap + .default-wrap { margin-top: 50px;}
    .con-title.border {padding-bottom: 17px;}
    .esg-wrap .default-wrap .con-info-box { padding: 20px 0; font-size: 18px;
     font-weight: 400; color: #666;line-height: 34px;word-break: keep-all;}
    
    .esg-strategy {position: relative;}
    .esg-strategy .content-wrap {position: relative; width: 100%;height: 490px;
margin: 46px auto 16px; border-radius: 50%; z-index: 1; border: none;}
    .esg-strategy .content-wrap .cont-circle1 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -180px;
        margin-left: -72px;
        background-color: rgba(75,187,136,0.7);
        z-index: 2;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -127px;
        background-color: rgba(70,186,220,0.7);
        z-index: 3;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    .esg-strategy .content-wrap .cont-circle3 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -15px;
        background-color: rgba(4,53,189,0.7);
        z-index: 4;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    
    .esg-strategy .content-wrap .cont-circle1 .circle-title:hover {background-color: rgba(75,187,136,1);z-index: 5;}
    .esg-strategy .content-wrap .cont-circle2 .circle-title:hover {background-color: rgba(70,186,220,1); z-index: 5;}
    .esg-strategy .content-wrap .cont-circle3 .circle-title:hover{background-color: rgba(4,53,189,1); z-index: 5;}
    
    
    .esg-strategy .content-wrap .content-item .circle-title {
        position: absolute;
        display: inline-block;
        justify-items: center;
        width: 144px;
        height: 144px;
        font-size: 17px;
        text-align: center;
        border-radius: 50%;
    }
    
    .esg-strategy .content-wrap .cont-circle1 .circle-title > div {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -30px;
        font-size: 17px;
        font-weight: 700;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-title > div, .esg-strategy .content-wrap .cont-circle3 .circle-title > div {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -25px;
        font-size: 17px;
        font-weight: 700;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .content-item .circle-title > div .eng {
        display: block;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .cont-circle1 .circle-sub-cont {
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-sub-cont {
        top: auto;
        left: 50%;
        bottom: 104px;
        margin-left: -118px;
        text-align: right;
    }
    
    .esg-strategy .content-wrap .cont-circle3 .circle-sub-cont {
        top: auto;
        right: auto;
        left: 50%;
        bottom: 104px;
        margin-left: 30px;
        text-align: left;
    }
    
    .esg-strategy .content-wrap .content-item .circle-sub-cont {
        position: absolute;
        display: inline-block;
        padding: 0;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        color: #666;
        text-align: center;
        background-color: #fff;
        z-index: 5;
    }
    
    .esg-strategy .content-wrap .content-info {
        position: absolute;
        font-weight: 700;
        color: #000;
        text-align: center;
        background-color: #fff;
        left: 50%;
        bottom: 16px;
        width: 190px;
        margin-left: -95px;
        padding: 0;
        font-size: 22px;
        line-height: 30px;
        word-break: keep-all;
    }
    
    
    
    .grid-frame-layout {
        display: flex;
        flex-wrap: wrap;
    }
    .esg-action .esg-action-content {
        margin-top: 50px;
    }
    
    .grid-03 {
        width: 100%;
    }
    
    .esg-action .esg-action-content .top-visual {
        position: relative;
    }
    
    .esg-action .esg-action-content .top-visual .content-title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        line-height: 60px;
        text-align: center;
        z-index: 2;
    }
    
    .esg-action .esg-action-content .top-visual .content-img {
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    
    .esg-action .esg-action-content .top-visual .content-img:hover img{scale: 1.2;}
    
    .esg-action .esg-action-content .top-visual .content-img img {width: 100%; transition-duration: 0.5s;}
    
    .esg-action .esg-action-content .top-visual .content-title.environment {
        background-color: rgba(75,187,136,.8);
    }
    .esg-action .esg-action-content .top-visual .content-title.social {
        background-color: rgba(70,186,220,0.8);
    }
    .esg-action .esg-action-content .top-visual .content-title.governace {
        background-color: rgba(4,53,189,.8); 
    }
    
    .esg-action .esg-action-content .circle-list-content {
        padding: 36px 0;
        word-break: keep-all;
        margin-bottom: 30px;
    }
    
    .esg-action .esg-action-content .circle-list-content .circle-list-cell {
        position: relative;
        padding-left: 10px;
        font-size: 16px;
        line-height: 20px;
        color: #666;
    }
    
    .esg-action .esg-action-content .circle-list-content .circle-list-cell + .circle-list-cell {
        margin-top: 14px;
    }
}














@media screen and (max-width:600px) {
    #esgTopbanner {position: relative; height: 300px; background-image: url(../img/esgbannerbg.jpg); background-position: center ; background-size: cover;  background-color: 0,0,0,0,0.5;}
    #esgTopbanner .top_text{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center;}
    #esgTopbanner .top_text h2{font-size: 30px; font-weight: bold; margin-bottom: 24px; color: #FFF;}
    #esgTopbanner .top_text p{font-size: 15px; color: #FFF;}
    
    
    
    
    
    #esg {position: relative;background-color: #fff; z-index: 0;}
    .esg-wrap {max-width:1280px; padding:100px 40px 100px 40px; margin:0 auto; box-sizing:border-box; z-index:0;}
    .con-title {font-size: 26px;line-height: 40px;font-weight: 700;color: #000;}
    .esg-wrap .default-wrap .con-title {line-height: 54px;}
    .esg-wrap .default-wrap + .default-wrap { margin-top: 50px;}
    .con-title.border {padding-bottom: 17px; }
    .esg-wrap .default-wrap .con-info-box { padding: 20px 0; font-size: 16px;
     font-weight: 400; color: #666;word-break: keep-all;}
    
    .esg-strategy {position: relative;}
    .esg-strategy .content-wrap {position: relative; width: 100%;height: 490px;
margin: 46px auto 16px; border-radius: 50%; z-index: 1; border: none;}
    .esg-strategy .content-wrap .cont-circle1 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -180px;
        margin-left: -72px;
        background-color: rgba(75,187,136,0.7);
        z-index: 2;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -127px;
        background-color: rgba(70,186,220,0.7);
        z-index: 3;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    .esg-strategy .content-wrap .cont-circle3 .circle-title {
        top: 50%;
        left: 50%;
        margin-top: -75px;
        margin-left: -15px;
        background-color: rgba(4,53,189,0.7);
        z-index: 4;
        transition-duration: 0.7s;
        transition-property: background-color;
    }
    
    
    .esg-strategy .content-wrap .cont-circle1 .circle-title:hover {background-color: rgba(75,187,136,1);z-index: 5;}
    .esg-strategy .content-wrap .cont-circle2 .circle-title:hover {background-color: rgba(70,186,220,1); z-index: 5;}
    .esg-strategy .content-wrap .cont-circle3 .circle-title:hover{background-color: rgba(4,53,189,1); z-index: 5;}
    
    
    .esg-strategy .content-wrap .content-item .circle-title {
        position: absolute;
        display: inline-block;
        justify-items: center;
        width: 144px;
        height: 144px;
        font-size: 17px;
        text-align: center;
        border-radius: 50%;
    }
    
    .esg-strategy .content-wrap .cont-circle1 .circle-title > div {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -30px;
        font-size: 17px;
        font-weight: 700;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-title > div, .esg-strategy .content-wrap .cont-circle3 .circle-title > div {
        position: absolute;
        top: 50%;
        width: 100%;
        margin-top: -25px;
        font-size: 17px;
        font-weight: 700;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .content-item .circle-title > div .eng {
        display: block;
        font-size: 14px;
        font-weight: 500;
        line-height: 17px;
        color: #fff;
    }
    
    .esg-strategy .content-wrap .cont-circle1 .circle-sub-cont {
        left: 50%;
        transform: translateX(-50%);
        background-color: transparent;
    }
    
    .esg-strategy .content-wrap .cont-circle2 .circle-sub-cont {
        top: auto;
        left: 50%;
        bottom: 104px;
        margin-left: -118px;
        text-align: right;
    }
    
    .esg-strategy .content-wrap .cont-circle3 .circle-sub-cont {
        top: auto;
        right: auto;
        left: 50%;
        bottom: 104px;
        margin-left: 30px;
        text-align: left;
    }
    
    .esg-strategy .content-wrap .content-item .circle-sub-cont {
        position: absolute;
        display: inline-block;
        padding: 0;
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
        color: #666;
        text-align: center;
        background-color: #fff;
        z-index: 5;
    }
    
    .esg-strategy .content-wrap .content-info {
        position: absolute;
        font-weight: 700;
        color: #000;
        text-align: center;
        background-color: #fff;
        left: 50%;
        bottom: 16px;
        width: 190px;
        margin-left: -95px;
        padding: 0;
        font-size: 22px;
        line-height: 30px;
        word-break: keep-all;
    }
    
    
    
    .grid-frame-layout {
        display: flex;
        flex-wrap: wrap;
    }
    .esg-action .esg-action-content {
        margin-top: 40px;
    }
    
    .grid-03 {
        width: 100%;
    }
    
    .esg-action .esg-action-content .top-visual {
        position: relative;
    }
    
    .esg-action .esg-action-content .top-visual .content-title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
        line-height: 60px;
        text-align: center;
        z-index: 2;
    }
    
    .esg-action .esg-action-content .top-visual .content-img {
        position: relative;
        z-index: 1;
        overflow: hidden;
    }
    
    .esg-action .esg-action-content .top-visual .content-img:hover img{scale: 1.2;}
    
    .esg-action .esg-action-content .top-visual .content-img img {width: 100%; transition-duration: 0.5s;}
    
    .esg-action .esg-action-content .top-visual .content-title.environment {
        background-color: rgba(75,187,136,.8);
    }
    .esg-action .esg-action-content .top-visual .content-title.social {
        background-color: rgba(70,186,220,0.8);
    }
    .esg-action .esg-action-content .top-visual .content-title.governace {
        background-color: rgba(4,53,189,.8); 
    }
    
    .esg-action .esg-action-content .circle-list-content {
        padding: 26px 0;
        word-break: keep-all;
        margin-bottom: 30px;
    }
    
    .esg-action .esg-action-content .circle-list-content .circle-list-cell {
        position: relative;
        padding-left: 10px;
        font-size: 14px;
        line-height: 18px;
        color: #666;
    }
    
    .esg-action .esg-action-content .circle-list-content .circle-list-cell + .circle-list-cell {
        margin-top: 14px;
    }


}