@import url('sub.css'); 

/**** S:: 윤리경영 > 윤리경영 ****/
.ethics .basic_style2 .tit_area h4 {font-weight:700; font-size:2rem; line-height:130%; color:var(--black)}
.ethics .basic_style2 .cont_area p.txt {font-size:1rem; line-height:177%; font-weight:400; color:rgba(34,34,34,.6); padding-bottom: 32px;}
.ethics .basic_style2 .cont_area .img_box{overflow:hidden;}
.ethics .basic_style2 .cont_area .img_box img {max-width:100%; height:auto;}


	.behavior_area{display:flex; flex-wrap:wrap;}
	.behavior_area li{margin:0 0 10px ; padding:40px; box-sizing:border-box; background:var(--grayBg);}
	.behavior_area li .fs20{color:var(--black); font-weight:700; font-size:1.111rem; line-height:150%; color:var(--black);}
	.behavior_area li .fs20 span{display:inline-block; margin:0 6px 0 0; font-size:1.111rem; line-height:150%;}
	.behavior_area li .fs18{font-size:1rem; line-height:155.555%; font-weight:400; color:rgba(34,34,34,.6); padding:10px 0 0;}
	.behavior_area li .detail_btn{margin:27px 0 0; }

	.detail_btn{display: flex; align-items: center; justify-content: space-between;cursor:pointer; width:150px; height:40px; text-align:left; padding:0 20px; box-sizing:border-box; border:1px solid var(--main); transition:all .3s linear; overflow:hidden; background:var(--white);}
	.detail_btn:hover{border-color:var(--main); background:var(--main)}
	.detail_btn i{display:inline-block; vertical-align:top; width:23px; height:23px; position:relative; font-style:normal; transition:all .3s linear;}
	.detail_btn i:after{content:'\e5e1'; font-style:normal; font-family:var(--icon); display:block; width:100%; height:100%; font-size:13px; line-height:25px; position:absolute; left:0; top:0; color:var(--main); transition:all .3s linear; text-align:center; border-radius:50%;}
	.detail_btn.download i:after{content:'\f090'; font-size:17px;}
	.detail_btn em{display:inline-block; vertical-align: top; font-style:normal; font-size:0.889rem;  line-height:40px; font-weight:400; color:var(--main); transition:all .3s linear; position:relative; z-index:2;}
	.detail_btn:hover em{color:var(--white);}
	.detail_btn:hover i:after{color:var(--white);}

/**** E:: 윤리경영 > 윤리경영 ****/



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

/**** S:: 윤리경영 > 윤리경영 ****/
	.behavior_area{}
	.behavior_area li{padding:30px;}
/**** E:: 윤리경영 > 윤리경영 ****/

} 


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


/**** S:: 윤리경영 > 윤리경영 ****/
	.behavior_area{}
	.behavior_area li{margin:0 0 20px; width:100%; padding:30px;}
	.behavior_area li br {display:none;}
	.behavior_area li:last-child{margin:0;}
/**** E:: 윤리경영 > 윤리경영 ****/


}

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

/**** S:: 윤리경영 > 윤리경영 ****/
.ethics .basic_style2 .cont_area p.txt {padding-bottom: 25px;}
.ethics .basic_style2 .tit_area h4 {font-size:1.8rem;}
	.behavior_area{}
	.behavior_area li{margin:0 0 10px; padding:20px;}
	.behavior_area li .fs20 span{margin:0 4px 0 0;}
	.behavior_area li .fs18{padding:8px 0 0;}
	.behavior_area li .detail_btn{margin:12px 0 0; width:138px}
/**** E:: 윤리경영 > 윤리경영 ****/

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


/**** S:: 윤리경영 > 윤리경영 ****/
.ethics .basic_style2 .cont_area p.txt {padding-bottom: 15px; line-height:150%;}

	.behavior_area{}
	.behavior_area li .detail_btn{margin:10px 0 0;}
/**** E:: 윤리경영 > 윤리경영 ****/

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





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




}