@import url('sub.css'); 



/**** S:: ESG ****/
.esg_top{position: relative; overflow: hidden;}
.esg_top .bg{position: absolute; left: 0; top:0; width: 100%; height: 100%; background-repeat:no-repeat; background-size:cover; background-position:center; -webkit-transform:scale(1.1); -ms-transform:scale(1.1); transform:scale(1.1); animation: v_bg 2s linear forwards;}
.esg_top .text_box{position: relative; z-index: 2; text-align:center;}
.esg_top .text_box .fs40{color:var(--white); font-weight: 300; margin-top: 70px;}
.esg_top .text_box .fs40:first-of-type{margin-top: 0;}
.esg_top .text_box .fs40 b{display: inline; line-height: inherit; font-weight: 700; letter-spacing: inherit;}
.esg_top .text_box .fs22{font-weight: 300; color:var(--white); padding-top: 25px; text-wrap: balance;}
.esg_top .text_box .fs26{font-weight: 700; color:var(--white); padding-top: 5px; text-wrap: balance;}

.esg_list{display:flex; flex-wrap:wrap;}
.esg_list.reverse{flex-direction: row-reverse;}
.esg_list dt{width: 50%;}
.esg_list dt img{width: 100%; height: auto;}
.esg_list dd{width: 50%; padding: 0 0 0 70px; box-sizing:border-box; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;}
.esg_list.reverse dd{padding: 0 70px 0 0;}
.esg_list .fs40{display: flex; gap:6px; flex-wrap:wrap; align-items: flex-end; position: relative; box-sizing:border-box; padding:0 0 0 66px;}
.esg_list .fs40 i{display: block; font-style:normal; width: 52px; height: 52px; border-radius:var(--borderR5); overflow: hidden; background:var(--main); text-align:center; font-size:40px; line-height: 52px; font-family:var(--eng); color:var(--white); font-weight: 700; position: absolute; left:0; top:-2px;}
.esg_list .fs40 .fs20{color:var(--black); font-family:var(--eng); line-height: 120%; display: inline-block;}
.esg_list .dot_list{margin: 20px 0 0;}
/**** E:: ESG ****/


/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}
/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){



/**** S:: ESG ****/
.esg_list{}
.esg_list dd{padding: 0 0 0 50px;}
.esg_list.reverse dd{padding: 0 50px 0 0;}
.esg_list .fs40 i{top:-4px;}
/**** E:: ESG ****/



}

/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){

/**** S:: ESG ****/
.esg_top .text_box .fs40{margin-top: 40px;}
.esg_top .text_box .fs22{padding-top: 15px;}
.esg_top .text_box .fs22 br{display: none;}

.esg_list{}
.esg_list dd{padding: 0 0 0 30px;}
.esg_list.reverse dd{padding: 0 30px 0 0;}
.esg_list .fs40{padding:0 0 0 50px;}
.esg_list .fs40 i{width: 40px; height: 40px; font-size:30px; line-height: 40px; top:-3px;}
.esg_list .dot_list{margin: 15px 0 0;}
/**** E:: ESG ****/




}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){

/**** S:: ESG ****/
.esg_top .text_box .fs40{margin-top: 30px;}
.esg_top .text_box .fs22{padding-top: 10px;}

.esg_list{flex-wrap:wrap;}
.esg_list dt{width: 100%;}
.esg_list dd{width: 100%; padding: 25px 0 0;}
.esg_list.reverse dd{padding: 25px 0 0;}
.esg_list .fs40{padding:0 0 0 37px;}
.esg_list .fs40 i{width: 30px; height: 30px; font-size:20px; line-height: 30px; top:-3px;}
.esg_list .dot_list{margin: 10px 0 0;}
/**** E:: ESG ****/






}