@import url('sub.css'); 



/**** S:: ESG 공통 ****/
	.esg_list{display: flex; flex-wrap:wrap;}
	.esg_list dl{margin:0 30px 30px 0; width:calc((100% - 60px)/3); position:relative;}
	.esg_list dl:nth-child(3n){margin-right: 0;}
	.esg_list dl a{display: block; position: relative; width: 100%; height: 100%; overflow: hidden;}
	.esg_list dl a.linkno{cursor:default;}
	.esg_list dl dt{overflow: hidden; aspect-ratio: 1 / 1; position:relative;}
	.esg_list dl dt:after{content:''; display:block; width:100%; height:100%; background:url('/img/eco_hover.png') no-repeat center/100% auto; position:absolute; left:0; top:0;}
	.esg_list dl dt img{display: block; width: 100%; height: 100%; object-fit: cover;}
	.esg_list dl dd{position:absolute; left:0; right:0; top:0; bottom:0; z-index:9; text-align:left; width:100%; height:100%; box-sizing:border-box; padding:50px; transition:all .3s linear;}
	.esg_list dl dd:before{content:''; display:block; width: 100%; height:100%; background:url('/img/main_color.png') repeat center/100% auto; position: absolute;
	left: 0; top:0; opacity: 0; transition:all .3s linear;}
	.esg_list dl:hover dd:before{opacity: 0.88;}
	.esg_list dl dd .fs24{color:var(--white); position:relative; box-sizing:border-box; padding:0 60px 0 0;}
	.esg_list dl dd .fs24:after{content:'\e5c8'; font-weight: 400; position:absolute; right:0; top:10px; display:block; width:24px; height:24px; line-height:24px; font-size:24px; color:var(--white); font-family:var(--icon); transition:all .3s linear;}
	.esg_list dl:hover dd .fs24:after{transform:rotate(90deg);}
	.esg_list dl dd .stxt{padding: 10px 0 0; color:rgba(255,255,255,.9); opacity:0; transform:translateY(-60px);  transition:all .3s linear;}
	.esg_list dl:hover dd .stxt{opacity:1; transform:translateY(0);}
/**** E:: ESG > 공통 ****/


/**** S:: ESG > 활동 > 친환경 경영 ****/
.eco_cont{}
.eco_cont .eco_tit{padding:0 0 60px;}
.eco_cont .eco_tit .fs36{padding: 0 0 30px;}
.eco_cont .eco_tit .fs21{padding: 0 0 30px; color:var(--black);}
.eco_cont .eco_tit .fs21.underline{padding: 0; line-height:180%; display:inline; box-shadow:0 -1px 0 var(--black) inset; }
.eco_cont .fs28{padding:0 0 30px;}
/**** E:: ESG > 활동 > 친환경 경영 ****/



/**** S:: ESG > 활동 > 사회공헌 ****/
.social_cont{}
.social_cont .fs36{padding:0 0 50px;}
/**** E:: ESG > 활동 > 사회공헌 ****/


/**** S:: ESG > 정책 > 윤리경영 ****/ 
.ethical_in .fs28{padding:0 0 20px;}
.ethical_in .btnArea{display:flex; justify-content:center;}
.ethical_in .btnArea a{margin:0 10px 0 0;}
.ethical_in .btnArea a:last-child{margin:0;}

.ethical_practice{}
.ethical_practice .fs28{padding:0 0 30px;}
.ethical_practice ul{display:flex; flex-wrap:wrap;}
.ethical_practice ul li{margin: 0 30px 30px 0; width:calc((100% - 30px)/2); box-sizing:border-box; border:1px solid var(--border); padding:50px 50px 50px 160px; position:relative;}
.ethical_practice ul li:nth-child(2n){margin-right:0;}
.ethical_practice ul li .icon{display:inline-block; width:84px; position:absolute; left:40px; top:35px;}
.ethical_practice ul li .icon img{width:100%; height:auto;}
.ethical_practice ul li .fs21{font-weight: 500;}
.ethical_practice ul li .stxt{padding:8px 0 0;}

.ethical_information{}
.ethical_information > .stxt{padding: 20px 0 30px;}
.ethical_information dl{display:flex; background:var(--grayBg);}
.ethical_information dl dt{width:50%; background:url('/img/ethical_process.jpg') no-repeat center/cover;}
.ethical_information dl dd{width:50%; box-sizing:border-box; padding:100px 70px; text-align:left;}
.ethical_information dl dd .fs21{padding:0 0 10px; font-weight:500;}

.ethical_process{}
.ethical_process > .stxt{padding: 14px 0 30px;}
.ethical_process ul{display:flex;}
.ethical_process ul li{margin:0 30px 0 0; width:calc((100% - 90px)/4); position:relative; box-sizing:border-box; border:1px solid var(--border); padding:40px 20px 80px; text-align:center;}
.ethical_process ul li:after{content:'\e5c8'; font-family:var(--icon); font-size:12px; font-weight:700; color:var(--white); display:block; width:22px; height:22px; line-height:22px; border-radius:50%; background:var(--black); position:absolute; right:-26px; top:50%; margin-top:-11px;}
.ethical_process ul li:nth-child(4n):after{display:none;}
.ethical_process ul li:nth-child(4n){margin-right:0;}
.ethical_process ul li img{width:103px; margin:0 auto;}
.ethical_process ul li small{color:var(--main); font-weight:700; padding:10px 0; display:block; font-family:var(--eng);}
.ethical_process ul li .stxt{color:var(--black);}
/**** E:: ESG > 정책 > 윤리경영 ****/


/**** S:: ESG > 정책 > 안전보건 ****/ 
.safety_management{}
.safety_management > .stxt{padding:14px 0 30px;}
.safety_management dl{display:flex; flex-direction: row-reverse;}
.safety_management dl dt{width:315px; background:url('/img/safety_img.jpg') no-repeat center/cover;}
.safety_management dl dd{width:calc(100% - 315px); background:var(--grayBg); padding:60px; box-sizing:border-box;}
.safety_management dl dd ul{text-align:left;}
.safety_management dl dd ul li{padding:30px 0 30px 26px; border-bottom:1px solid var(--border); box-sizing:border-box; position:relative;}
.safety_management dl dd ul li:first-child{border-top:1px solid var(--border);}
.safety_management dl dd ul li .num{display:inline-block; font-size:var(--fs15); font-family:var(--eng); font-weight:700; color:var(--main); position:absolute; left:0; top:30px;}
.safety_management dl dd ul li .fs15{padding:12px 0 0; line-height:160%;}
.safety_management dl dd ul li .fs15 font{display:inline-block; vertical-align: middle; letter-spacing:inherit; font-size:inherit; font-weight:inherit; line-height:inherit;}
.safety_management dl dd ul li .fs15 small{display:inline; color:var(--light); letter-spacing:inherit; font-size:inherit; font-weight:inherit; line-height:inherit;}

.safety_organ{}
.safety_organ > .stxt{padding:14px 0 30px;}
.safety_organ .imgBox{text-align:center; box-sizing:border-box; padding:60px; background:var(--grayBg);}
.safety_organ .imgBox img{max-width:100%;}

.safety_business{}
.safety_business > .stxt{padding:14px 0 30px;}
.safety_business ul{display: flex; flex-wrap:wrap; text-align:left;}
.safety_business ul li{margin:0 30px 0 0; box-sizing:border-box; border:1px solid var(--border); padding: 130px 35px 40px; position:relative; width:calc((100% - 90px)/4); }
.safety_business ul li:nth-child(4n){margin-right: 0;}
.safety_business ul li:after{content:'\e5c8'; font-family:var(--icon); font-size:12px; font-weight:700; color:var(--white); display:block; width:22px; height:22px; line-height:22px; border-radius:50%; background:var(--black); position:absolute; right:-26px; top:50%; margin-top:-11px; text-align:center;}
.safety_business ul li:nth-child(4n):after{display:none;}
.safety_business ul li .icon{position: absolute; right: 20px; top:20px; display: inline-block; width: 92px;}
.safety_business ul li .icon img{width: 100%; height: auto;}
.safety_business ul li .fs21{font-weight: 500; color:var(--black); padding:0 0 8px;}
.safety_business ul li .dotList{}
.safety_business ul li .dotList > dd{padding-bottom: 4px;}
.safety_business ul li .dotList small{display: block; font-size:var(--fs15); color:var(--light); line-height:150%; padding:5px 0 0;}


.safety_process{}
.safety_process > .stxt{padding:14px 0 30px;}
.safety_process .safety_health{padding:50px; display:flex; justify-content: center; align-items: center; box-sizing:border-box; text-align:left; background:var(--grayBg);}
.safety_process .safety_health dt{width:114px;}
.safety_process .safety_health dt img{max-width:100%;}
.safety_process .safety_health dd{padding:0 0 0 40px; box-sizing:border-box;}
.safety_process .safety_health dd .fs21{padding:0 0 8px; font-weight: 500;}
.safety_process ul{display: flex; flex-wrap:wrap; text-align:left; margin:30px 0 0;}
.safety_process ul li{margin:0 30px 30px 0; box-sizing:border-box; border:1px solid var(--border); position:relative; padding: 50px 50px 50px 160px; width:calc((100% - 30px)/2); }
.safety_process ul li:nth-child(2n){margin-right: 0;}
.safety_process ul li .icon{position: absolute; left: 40px; top:35px; width: 84px;}
.safety_process ul li .icon img{width: 100%; height:auto;}
.safety_process ul li .fs21{font-weight:500;}
.safety_process ul li .dotList,
.safety_process ul li .stxt{padding:9px 0 0;}
/**** E:: ESG > 정책 > 안전보건 ****/ 


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

/**** S:: ESG 공통 ****/
	.esg_list{}
	.esg_list dl dd{padding:40px;}
	.esg_list dl dd .fs24{padding:0 50px 0 0;}
	.esg_list dl dd .fs24:after{top:8px;}
/**** E:: ESG > 공통 ****/


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

/**** S:: ESG 공통 ****/
	.esg_list{}
	.esg_list dl{margin:0 30px 30px 0; width:calc((100% - 30px)/2);}
	.esg_list dl:nth-child(3n){margin-right: 30px;}
	.esg_list dl:nth-child(2n){margin-right: 0;}
/**** E:: ESG > 공통 ****/


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


/**** S:: ESG 공통 ****/
	.esg_list{}
	.esg_list dl{margin:0 20px 20px 0; width:calc((100% - 20px)/2);}
	.esg_list dl:nth-child(3n){margin-right: 20px;}
	.esg_list dl:nth-child(2n){margin-right: 0;}
	.esg_list dl dd{padding:30px;}
	.esg_list dl dd .fs24{padding:0 40px 0 0;}
	.esg_list dl dd .fs24:after{top:6px; width:20px; height:20px; line-height:20px; font-size:20px;}
/**** E:: ESG > 공통 ****/

/**** S:: ESG > 활동 > 친환경 경영 ****/
.eco_cont{}
.eco_cont .eco_tit{padding:0 0 40px;}
.eco_cont .eco_tit .fs36{padding: 0 0 20px;}
.eco_cont .eco_tit .fs21{padding: 0 0 20px;}
.eco_cont .fs28{padding:0 0 20px;}
/**** E:: ESG > 활동 > 친환경 경영 ****/


/**** S:: ESG > 활동 > 사회공헌 ****/
.social_cont{}
.social_cont .fs36{padding:0 0 30px;}
/**** E:: ESG > 활동 > 사회공헌 ****/



/**** S:: ESG > 정책 > 윤리경영 ****/ 
.ethical_in .fs28{padding:0 0 15px;}
.ethical_in .btnArea a{margin:0 10px 0 0;}

.ethical_practice{}
.ethical_practice .fs28{padding:0 0 20px;}
.ethical_practice ul{}
.ethical_practice ul li{margin: 0 20px 20px 0; width:calc((100% - 20px)/2); padding:30px 30px 30px 100px;}
.ethical_practice ul li:nth-child(2n){margin-right:0;}
.ethical_practice ul li .icon{width:70px; left:20px; top:25px;}

.ethical_information{}
.ethical_information > .stxt{padding: 10px 0 20px;}
.ethical_information dl{}
.ethical_information dl dt{}
.ethical_information dl dd{padding:70px 50px;}

.ethical_process{}
.ethical_process > .stxt{padding: 10px 0 20px;}
.ethical_process ul{}
.ethical_process ul li{padding:30px 10px 50px;}
.ethical_process ul li img{width:80px;}
/**** E:: ESG > 정책 > 윤리경영 ****/



/**** S:: ESG > 정책 > 안전보건 ****/ 
.safety_management{}
.safety_management > .stxt{padding:8px 0 20px;}
.safety_management dl{flex-wrap:wrap;}
.safety_management dl dt{width:100%; height:300px; background-image:url('/img/safety_img_m.jpg');}
.safety_management dl dd{width:100%; padding:40px;}
.safety_management dl dd ul li{padding:20px 0 20px 26px;}
.safety_management dl dd ul li .num{top:20px;}
.safety_management dl dd ul li .fs15{padding:12px 0 0;}

.safety_organ{}
.safety_organ > .stxt{padding:8px 0 20px;}
.safety_organ .imgBox{padding:40px;}
.safety_organ .imgBox img{max-width:80%;}

.safety_business{}
.safety_business > .stxt{padding:8px 0 20px;}
.safety_business ul{}
.safety_business ul li{margin:0 30px 0 0; padding: 100px 20px 30px; width:calc((100% - 90px)/4); }
.safety_business ul li:nth-child(4n){margin-right: 0;}
.safety_business ul li:after{width:22px; height:22px; line-height:22px; right:-26px; margin-top:-11px;}
.safety_business ul li:nth-child(4n):after{display:none;}
.safety_business ul li .icon{right: 15px; top:15px; width: 70px;}

.safety_process{}
.safety_process > .stxt{padding:8px 0 20px;}
.safety_process .safety_health{padding:30px;}
.safety_process .safety_health dt{width:100px;}
.safety_process .safety_health dd{padding:0 0 0 20px;}
.safety_process ul{margin:20px 0 0;}
.safety_process ul li{margin:0 20px 20px 0; padding: 30px 30px 30px 110px; width:calc((100% - 20px)/2); }
.safety_process ul li:nth-child(2n){margin-right: 0;}
.safety_process ul li .icon{left: 25px; top:25px; width: 64px;}
.safety_process ul li .dotList,
.safety_process ul li .stxt{padding:7px 0 0;}
/**** E:: ESG > 정책 > 안전보건 ****/ 


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


/**** S:: ESG 공통 ****/
	.esg_list{}
	.esg_list dl{margin:0 0 20px; width:100%;}
	.esg_list dl:nth-child(3n){margin-right: 0;}
	.esg_list dl:nth-child(2n){margin-right: 0;}

	.esg_list dl dd{padding:30px;}
	.esg_list dl dd:after{content:''; display:block; width:100%; height: 100%; opacity: 0.5; position:absolute; left:0; top:0; background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 100%);}
	.esg_list dl:hover dd{background:none;}
	.esg_list dl dd .fs24{padding:0 40px 0 0; z-index: 9;	}
	.esg_list dl dd .fs24:after{top:4px; transform:rotate(90deg);}
	.esg_list dl dd .stxt{opacity:1; transform:translateY(0); position: relative; z-index: 9;}
/**** E:: ESG > 공통 ****/


/**** S:: ESG > 활동 > 친환경 경영 ****/
.eco_cont{}
.eco_cont .eco_tit{padding:0 0 30px;}
.eco_cont .eco_tit .fs36{padding: 0 0 15px;}
.eco_cont .eco_tit .fs21{padding: 0 0 15px;}
.eco_cont .fs28{padding:0 0 15px;}
/**** E:: ESG > 활동 > 친환경 경영 ****/


/**** S:: ESG > 활동 > 사회공헌 ****/
.social_cont{}
.social_cont .fs36{padding:0 0 20px;}
.social_cont .fs36 br{display:none;}
/**** E:: ESG > 활동 > 사회공헌 ****/


/**** S:: ESG > 정책 > 윤리경영 ****/ 
.ethical_in .fs28{padding:0 0 10px;}
.ethical_in .btnArea a{margin:0 5px 0 0;}

.ethical_practice{}
.ethical_practice .fs28{padding:0 0 15px;}
.ethical_practice ul{}
.ethical_practice ul li{margin: 0 0 10px; width:100%; padding:20px 20px 20px 80px;}
.ethical_practice ul li:nth-child(2n){margin-right:0;}
.ethical_practice ul li .icon{width:50px; left:15px; top:20px;}
.ethical_practice ul li .stxt{padding:4px 0 0;}

.ethical_information{}
.ethical_information dl{flex-wrap:wrap;}
.ethical_information dl dt{width: 100%; height:250px;}
.ethical_information dl dd{width: 100%; padding:30px 25px;}
.ethical_information dl dd .fs21{padding:0 0 6px;}

.ethical_process{}
.ethical_process ul{flex-wrap:wrap;}
.ethical_process ul li{margin:0 30px 30px 0; width:calc((100% - 30px)/2); padding:20px 10px 30px;}
.ethical_process ul li:nth-child(2n){margin-right: 0;}
.ethical_process ul li:nth-child(3){order:2; margin-right: 0; margin-bottom:0;}
.ethical_process ul li:nth-child(4){order:1; margin-right: 30px; margin-bottom:0;}
.ethical_process ul li:after{}
.ethical_process ul li:nth-child(2):after{transform:rotate(90deg); right:auto; left:50%; margin-left: -11px; top:auto; bottom:-26px; margin-top:0;}
.ethical_process ul li:nth-child(3):after{transform:rotate(180deg); right:auto; left:-26px;}
.ethical_process ul li img{width:60px;}
.ethical_process ul li small{padding:8px 0;}
/**** E:: ESG > 정책 > 윤리경영 ****/


/**** S:: ESG > 정책 > 안전보건 ****/ 
.safety_management{}
.safety_management dl dt{height:250px;}
.safety_management dl dd{padding:30px 25px;}
.safety_management dl dd ul li{padding:15px 0 15px 20px;}
.safety_management dl dd ul li .num{top:18px;}
.safety_management dl dd ul li .fs15{padding:8px 0 0;}

.safety_organ{}
.safety_organ .imgBox{padding:20px;}

.safety_business{}
.safety_business ul{}
.safety_business ul li{margin:0 30px 30px 0; padding: 80px 20px 25px; width:calc((100% - 30px)/2); }
.safety_business ul li:nth-child(4n){margin-right: 30px;}
.safety_business ul li:nth-child(2n){margin-right: 0;}
.safety_business ul li:nth-child(3){order:2; margin-right: 0; margin-bottom:0;}
.safety_business ul li:nth-child(4){order:1; margin-right: 30px; margin-bottom:0;}
.safety_business ul li:after{width:22px; height:22px; line-height:22px; right:-26px; margin-top:-11px;}
.safety_business ul li:nth-child(4n):after{display:block;}
.safety_business ul li:nth-child(2):after{transform:rotate(90deg); right:auto; left:50%; margin-left: -11px; top:auto; bottom:-26px; margin-top:0;}
.safety_business ul li:nth-child(3):after{transform:rotate(180deg); right:auto; left:-26px;}
.safety_business ul li .icon{width: 50px;}
.safety_business ul li .fs21{padding:0 0 6px;}

.safety_process{}
.safety_process .safety_health{padding:30px;}
.safety_process ul{margin:10px 0 0;}
.safety_process ul li{margin:0 0 10px; padding: 20px 20px 20px 90px; width:100%; }
.safety_process ul li .icon{left: 20px; top:20px; width: 50px;}
.safety_process ul li .dotList,
.safety_process ul li .stxt{padding:5px 0 0;}
/**** E:: ESG > 정책 > 안전보건 ****/ 


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



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




}