@import url('sub.css'); 



.mart60 {margin-top:60px !important;}
.mart100 {margin-top:100px !important;}
.basic_in:has(.esg-main-cont) { width:100%; max-width:none; }
.compad_b:has(.esg-main-cont) { padding-bottom:0px; }

.esg-main-cont {display:flex; flex-wrap:nowrap; width:100%; height:var(--vh); overflow:hidden;}
.esg-main-cont li {width:33.33%; position:relative; background:Var(--black); transition:all 0.5s ease;}
.esg-main-cont li .bg {width:100%; height:100%; position:absolute; top:0; left:0; transition:all 0.5s ease;}
.esg-main-cont li.one .bg {background:url("/resources/esg/img/esg_main_bg01.png")no-repeat left 25% center / cover; opacity:0.65;}
.esg-main-cont li.two .bg {background:url("/resources/esg/img/esg_main_bg02.png")no-repeat center / cover; opacity:0.65;}
.esg-main-cont li.three .bg {background:url("/resources/esg/img/esg_main_bg03.png")no-repeat center / cover; opacity:0.85;}
.esg-main-cont li .in {position:relative; z-index:10; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; text-align:center; padding:0 15px; box-sizing:border-box;}
.esg-main-cont li .in * {color:white;}
.esg-main-cont li .in span { display:block; width:100%; }
.esg-main-cont li .in .fs45 {font-weight: 700; transition:all 0.5s ease;}
.esg-main-cont li .in .stxt { color:rgba(255,255,255,0.8); margin:15px 0 0;  transition:all 0.5s ease;}
.esg-main-cont li .in span:last-child { font-family: var(--eng); font-size: 0.77rem; font-weight: 700; line-height: 171.429%; letter-spacing: 0.7px; text-decoration:underline; text-transform: uppercase; margin:28px 0 0; position:absolute;  transform:translateY(50px); opacity:0; visibility:hidden; transition:all 0.5s ease;}


.esg-main-cont li.on {width:60%; transition:all 0.5s ease;}
.esg-main-cont li.one.on .bg {background-position:center;}
.esg-main-cont li.on .in .fs45 {transition:all 0.5s ease;}
.esg-main-cont li.on .in .stxt {position:relative; transform:translateY(0px); opacity:1; visibility:visible; transition:all 0.5s ease;}
.esg-main-cont li.on .in span {position:relative; transform:translateY(0px); opacity:1; visibility:visible; transition:all 0.5s 0.2s ease;}
.esg-main-cont li.off {width:20%; transition:all 0.5s ease;}
.esg-main-cont li.off .bg {opacity:0.2; transition:all 0.5s ease;}
.esg-main-cont li.off .stxt {position:absolute; transform:translateY(50px); opacity:0; visibility:hidden;}



/* 친환경소개 */
.esg_top .esg_bg.introduce_bg {background:url("/resources/esg/img/introduce_bg.jpg")no-repeat center / cover;}
.esg_top .esg_bg.campaign_bg {background:url("/resources/esg/img/campaign_bg.jpg")no-repeat center / cover;}
.esg_top .esg_bg.domestic_bg {background:url("/resources/esg/img/domestic_bg.jpg")no-repeat center / cover;}
.esg_top .esg_bg.overseas_bg {background:url("/resources/esg/img/overseas_bg.jpg")no-repeat center / cover;}


.esg_content+.esg_content {margin:160px 0 0;}
.esg_content .esg_prd {margin:0 0 60px;}

.esg_prd {display:flex; flex-wrap:wrap; align-items:center;}
.esg_prd .imgBox {width:780px;}
.esg_prd .imgBox img {width:100%;}
.esg_prd .tBox {width:calc(100% - 780px); padding-left:75px; box-sizing:border-box;}
.esg_prd .tBox .fs20 {color: var(--black); font-size: 1.11rem; font-weight: 600; line-height: 160%; letter-spacing: -0.8px;}
.esg_prd .tBox .fs45 {font-weight: 700; margin:5px 0 0;}
.esg_prd .tBox .stxt {margin:20px 0 0;}


.prd-info-list {display: grid; grid-template-columns: repeat(3, 1fr); gap:30px;}
.prd-info-list dl dt img {width:100%;}
.prd-info-list dl dd {padding:30px 0 0;}
.prd-info-list dl dd h4 {color: var(--black); font-size: 1.22rem; font-weight: 600; line-height: 154.545%; letter-spacing: -0.88px;}
.prd-info-list dl dd p {margin:15px 0 0;}

.table-box .table-content .prd-info-list.sm-list dl dd {padding:10px 0 0;}
.table-box .table-content .prd-info-list.sm-list dl dd h4 {font-size:1rem;}
.table-box .table-content .prd-info-list.sm-list dl dd p {font-size:0.88rem; margin:0;}

.tab_tit_wrap {margin:0 0 30px;}
.tab_tit_wrap .fs26 {font-size: 1.444rem; font-weight: 600; line-height: 138.462%; color:var(--black);}
.tab_tit_wrap .fs26.eng {font-family:var(--eng); letter-spacing:0;}
.tab_tit_wrap .stxt {margin:5px 0 0;}
/* 친환경소개 */


.two_layout {grid-template-columns: repeat(2, 1fr);}
.four_layout {grid-template-columns: repeat(4, 1fr); gap:30px 15px;}
.sp_layout {display:flex; flex-wrap:wrap; gap:0 !important;}
.sp_layout dl:first-of-type {width:calc(33% - 15px); margin-right:30px;}
.sp_layout dl:last-of-type {display:flex; flex-wrap:wrap; justify-content:space-between; width:calc(66.66% - 15px);}
.sp_layout dl:last-of-type dt {width:100%;}
.sp_layout dl:last-of-type dd {width:calc((100% - 30px) / 2);}


.zig_table .esg_prd {margin-top:100px;}

.zig_table .esg_prd:nth-of-type(2n) .imgBox {order:2;}
.zig_table .esg_prd:nth-of-type(2n) .tBox {order:1; padding-left:0; padding-right:75px;}




.table-box .table-content .prd-info-list dl dd {padding:20px 0 0;}
.table-box .table-content .prd-info-list dl dd p {margin:5px 0 0;}


.esg_history {display:flex; flex-wrap:wrap; align-items:center; width:100%; padding:75px 60px; box-sizing:border-box; background:var(--gray_bg_opa6);}
.esg_history .history-list {width:calc(100% - 430px);}
.esg_history .history-list li {position:relative; line-height:177.778%; letter-spacing: -0.72px; padding:12px 0; padding-left:110px; box-sizing:border-box;}
.esg_history .history-list li+li {border-top:1px solid var(--border);}
.esg_history .history-list li span {position:absolute; top:12px; left:0; color: var(--black); font-family: var(--eng); font-size: 1.11rem; font-weight: 600; line-height: 170%; letter-spacing: 0.4px;}
.esg_history .history-img {width:430px; text-align:right;}
.esg_history .history-img img {max-width:100%;}



.plan_state {padding:60px 30px 50px; background: var(--gray_bg_opa6); margin:0 0 30px;}
.plan_state ul {max-width:532px; margin:0 auto; display:flex; flex-wrap:wrap; justify-content:space-between; position:relative; z-index:10;}
.plan_state ul::after {content:''; width:calc(100% - 30px); height:1px; background:var(--black); opacity:0.5; position:absolute; top:15px; right:10px; z-index:-1;}
.plan_state ul li {text-align:center;}
.plan_state ul li i {width: 30px; height: 30px; border-radius:100%; border:8px solid var(--black); background:white; box-sizing:border-box; display:block; margin:0 auto 10px;}
.plan_state ul li p {color: var(--black); text-align: center; font-size: 0.88rem; font-weight: 400; line-height: 175%; letter-spacing: -0.64px;}
.plan_state ul li p b {display:block; font-weight: 700; font-family:var(--eng);  font-size:1rem; line-height:1.2;}

.plan_state ul li.blue i {border-color:var(--main);}
.plan_state ul li.blue p {color:var(--main);}




.overseas-list dl {display:flex; flex-wrap:wrap; align-items:center;}
.overseas-list dl+dl {margin:30px 0 0;}
.overseas-list dl dt {width:375px;}
.overseas-list dl dt img {width:100%;}
.overseas-list dl dd {width:calc(100% - 375px); padding-left:60px; box-sizing:border-box;}
.overseas-list dl dd .logo {display:block; margin:0 0 5px;}
.overseas-list dl dd .stxt {margin:20px 0 0;}
.overseas-list dl dd .pcolor {display:block; color: #042F43; font-family: var(--eng); font-size: 1rem; font-weight: 700; line-height: 177.778%; letter-spacing: 0.36px; text-transform: uppercase; margin:0 0 20px;}
.overseas-list dl dd .pcolor.green {color:#75A630;}
.overseas-list dl dd .pcolor.red {color:#CC0000;}



/*  환경경영 - 환경경영시스템 인증  */
.system_certi {display:flex; flex-wrap:wrap; align-items:center; margin:90px 0 0;}
.system_certi .imgBox {width:50%; max-width:780px; }
.system_certi .imgBox img {max-width:100%;}
.system_certi .tBox {width:50%; padding-left:75px; box-sizing:border-box;}
.system_certi .tBox .stxt {margin:20px 0 0;}
.system_certi .tBox .down-list {display:flex; flex-wrap:wrap; border-top:1px solid var(--border); border-left:1px solid var(--border); box-sizing:border-box; margin:40px 0 0;}
.system_certi .tBox .down-list li {width:33.33%; border-bottom:1px solid var(--border); border-right:1px solid var(--border); box-sizing:border-box;}
.system_certi .tBox .down-list li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:20px 25px; box-sizing:border-box; color: var(--black); font-size: 1rem; font-weight: 400; line-height: 177.778%; letter-spacing: -0.72px; transition:all 0.5s ease;}
.system_certi .tBox .down-list li a::after {content:'\f090'; width: 36px; height: 36px; line-height:36px; text-align:center;  border-radius:100%; background:var(--main); font-family:var(--icon); position:relative; font-size:20px; color:var(--white);}
.system_certi .tBox .down-list li a:hover {color:var(--main); background:var(--grayBg); transition:all 0.5s ease;}
/*  환경경영 - 환경경영시스템 인증  */




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

.esg_prd .imgBox {width:50%;}
.esg_prd .tBox {width:50%; padding-left:5%;}
.esg_prd .tBox br {display:none;}

.zig_table .esg_prd:nth-of-type(2n) .tBox {padding-right:5%;}


.esg_history {align-items:flex-start;}
.esg_history .history-list {width:70%; padding-right:5%; box-sizing:border-box;}
.esg_history .history-img {width:30%; text-align:right;}

/*  환경경영 - 환경경영시스템 인증  */
.system_certi .tBox {padding-left:5%;}
.system_certi .tBox .down-list li a {padding:20px 10%;}
/*  환경경영 - 환경경영시스템 인증  */

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

.four_layout {grid-template-columns: repeat(2, 1fr);}

.overseas-list dl dt {width:250px;}
.overseas-list dl dd {width:calc(100% - 250px); padding-left:40px;}

/*  환경경영 - 환경경영시스템 인증  */
.system_certi .tBox .down-list li a::after {width:30px; height:30px; line-height:30px; font-size:18px;}
/*  환경경영 - 환경경영시스템 인증  */


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



.esg_content+.esg_content {margin:120px 0 0;}

.esg_prd .tBox .fs20 {font-size:1.05rem;}
.esg_prd .tBox .stxt {margin:15px 0 0;}

.prd-info-list {grid-template-columns: repeat(2, 1fr); gap:20px 15px;}
.prd-info-list dl dd p {margin:10px 0 0;}

.zig_table .esg_prd {margin-top:60px;}

.tab_tit_wrap {margin:0 0 25px;}


.esg_history {padding:40px;}
.esg_history .history-list {width:100%; padding-right:0; box-sizing:border-box;}
.esg_history .history-img {display:none;}


.overseas-list dl {align-items:flex-start;}
.overseas-list dl dt {width:200px;}
.overseas-list dl dd {width:calc(100% - 200px); padding-left:30px;}
.overseas-list dl dd .logo img {max-height:60px;}
.overseas-list dl dd .pcolor {margin:0 0 15px;}
.overseas-list dl dd .stxt {margin:15px 0 0;}


.plan_state {padding:40px 20px;}
.plan_state ul {max-width:445px;}
.plan_state ul::after {top:10px;}
.plan_state ul li i {width:20px; height:20px; border-width:6px;}

/*  환경경영 - 환경경영시스템 인증  */
.system_certi {margin:60px 0 0;}
.system_certi .imgBox {width:100%; max-width:100%;}
.system_certi .tBox {width:100%; padding-left:0; padding-top:40px;}
.system_certi .tBox img {max-width:120px;}
.system_certi .tBox .down-list li a {padding:15px 8%;}
/*  환경경영 - 환경경영시스템 인증  */


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

.mart60 {margin-top:30px !important;}
.mart100 {margin-top:50px !important;}



.esg-main-cont {flex-wrap:wrap;}
.esg-main-cont li {width:100%; height:33.33%;}
.esg-main-cont li .in .stxt {margin:10px 0 0;}
.esg-main-cont li .in span {margin:18px 0 0;}

.esg-main-cont li.on {width:100%; height:60%; transition:all 0.5s ease;}
.esg-main-cont li.off {width:100%; height:20%; transition:all 0.5s ease;}




.esg_content+.esg_content {margin:60px 0 0;}

.esg_prd .imgBox {width:100%;}
.esg_prd .tBox {width:100%; padding-left:0; padding-top:25px;}
.esg_prd .tBox .stxt {margin:10px 0 0;}



.tab_tit_wrap {margin:0 0 20px;}
.table-box .table-tit {margin:0 0 20px;}


.prd-info-list {grid-template-columns: repeat(2, 1fr); gap:20px 10px;}
.prd-info-list dl dd {padding:15px 0 0;}
.prd-info-list dl dd p {margin:5px 0 0;}


.zig_table .esg_prd {margin-top:30px;}
.zig_table .esg_prd:nth-of-type(2n) .imgBox {order:1;}
.zig_table .esg_prd:nth-of-type(2n) .tBox {order:2; padding-left:0; padding-right:0;}


.sp_layout dl:first-of-type {width:calc(33% - 5px); margin-right:10px;}
.sp_layout dl:last-of-type {width:calc(66.66% - 5px);}
.sp_layout dl:last-of-type dd {width:calc((100% - 15px) / 2);}


.esg_history {padding:20px;}
.esg_history .history-list li {padding-left:75px;}
.esg_history .history-list li span {font-size:1.05rem;}




.plan_state {padding:20px 15px;}
.plan_state ul {max-width:240px;}
.plan_state ul::after {top:6px;}
.plan_state ul li i {width:12px; height:12px; border-width:3px;}

.tab_tit_wrap .fs26 {font-size:1.2rem;}



.overseas-list dl {align-items:flex-start;}
.overseas-list dl dt {width:100px;}
.overseas-list dl dd {width:calc(100% - 100px); padding-left:20px;}
.overseas-list dl dd .logo img {max-height:35px;}
.overseas-list dl dd .pcolor {margin:0 0 10px;}
.overseas-list dl dd .stxt {margin:10px 0 0;}


/*  환경경영 - 환경경영시스템 인증  */
.system_certi {margin:30px 0 0;}
.system_certi .imgBox {width:100%; max-width:100%;}
.system_certi .tBox {width:100%; padding-left:0; padding-top:30px;}
.system_certi .tBox img {max-width:80px;}
.system_certi .tBox .stxt {margin:10px  00;}
.system_certi .tBox .down-list {margin:20px 0 0;}
.system_certi .tBox .down-list li a {padding:10px 8%;}
.system_certi .tBox .down-list li a::after {width:26px; height:26px; line-height:26px; font-size:16px;}
/*  환경경영 - 환경경영시스템 인증  */

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

.prd-info-list {grid-template-columns: repeat(1, 1fr); gap:20px 10px;}


.sp_layout dl:first-of-type {width:100%; margin-right:0;}
.sp_layout dl:last-of-type {width:100%; margin-top:20px;}

/*  환경경영 - 환경경영시스템 인증  */
.system_certi .tBox .down-list li {width:100%;}
.system_certi .tBox .down-list li a {padding:10px 15px;}
/*  환경경영 - 환경경영시스템 인증  */

}