@charset "utf-8";
@import url("/comm/css/common/sub.css");
@import url("/comm/css/common/respond/sub.css");
@import url("/m/user_info/main.css");
@import url("/m/user_info/respond/main.css");
/*-------------------------------------------------
Author : ㅈㅁㅈ
Create date : 2018-11-26
-------------------------------------------------*/

/* 건너뛰기 */
#accessibility dt {overflow: hidden; height: 0;}
#accessibility a { position: absolute; top: -99px; left: 0; background: #333; color: #fff; width: 100%; padding: 0.5rem 0; text-align: center; text-decoration: none; z-index: 999; }
#accessibility a:hover,
#accessibility a:focus,
#accessibility a:active { display: block; top: 0; }

/* === 01_인권경영헌장 === */

/* 상단 */

.biz_charter_part_01 {text-align: center;}
.biz_charter_part_01>h1 {padding: 2rem 0;}
.biz_charter_part_01>div>p {font-size: 1rem;}

/* 중단 */

.biz_charter_part_02 {text-align: left; margin-top: 3rem; padding:1rem; background: #f8f8f8;}
.biz_charter_part_02>p::before {position: absolute; content: ""; margin-left: -4.5rem; margin-top: -.3rem; width: 2rem; height: 2rem; background: url(../../images/mps/content/clip.png) no-repeat center / cover;}
.biz_charter_part_02>p {margin: 1rem 0 1rem 6rem;}

/* 하단 */
.biz_charter_part_03>p {text-align: center; margin-top: 1.3rem;}
.biz_charter_part_03>p:last-child {color: #747474;}


/* === 01_인권경영헌장 === */

/* === 02_인권경영폭표 및 추진체계 === */

/* no1 */
.ethics_wrap {border-top:1px solid #ddd; border-bottom: 1px solid #ddd; padding: 3rem 0;}
.ethics_side {float: left; display: block; padding-right: 4.3rem; width: 20%; font-family: 'NanumSquare', sans-serif;}
.ethics_side::after {content: ""; display: block; clear: both;}
.ethics_wrap::after {content: ""; display: block; clear: both;}
.con_box { padding: 1rem 1rem 2rem 1rem; width: 100%; border: 5px solid #d9dce1;}
.con_box>h3 {text-decoration: underline; text-underline-position: under; font-weight: bold; padding: 0 0 1rem 0;}
.con_box>h1 {padding-bottom: .2rem; font-size: 1.1rem; font-weight: bold;}
.ethics_con {display: table; width: 80%; height: 100%; font-family: 'NanumSquare', sans-serif; font-weight: bold;}
.ethics_con>div { margin: 0.1rem; box-sizing: border-box;}
.substance_name {width: 15%; padding: 1rem 0; vertical-align: middle; display: inline-block; color: #fff; background: #284780; vertical-align: middle; text-align: center; border: 2px solid #284780; font-size: .9rem;}
.substance_name {width: 15%; padding: 1rem 0; vertical-align: middle; display: inline-block; color: #fff; background: #284780; vertical-align: middle; text-align: center; border: 2px solid #284780; font-size: .9rem;}
.substance {width: 83%; padding: 1rem 0; display: inline-block; border: 2px solid #f0f0f0; vertical-align: middle; text-align: center; }
.substance_name:nth-child(3) {background: none; border: 2px solid rgba( 255, 255, 255, 0 );}
.substance:nth-child(4) {border: 1px solid rgba( 255, 255, 255, 0 ); padding: 0; margin: 0;}
.substance_name:nth-child(9) {padding: 2.2rem 0; }
.substance:nth-child(10) {padding: 0; font-size: .9rem; border: none;}
.substance_sub_01 {float: left; color: #747474; box-sizing: border-box;}
.substance_sub_01>div {border: 1px solid #dddddd;}
.substance_sub_01::after {content: ""; display: block; clear: both;}
.substance_sub_01:nth-child(1) {width: 45%;}
.substance_sub_01:nth-child(1)>div {width: 100%;}
.substance_sub_01:nth-child(1)>div:nth-child(1) {background: #78808d; color: #fff; padding: .75rem 0;}
.substance_sub_01:nth-child(1)>div:nth-child(2) {padding: .75rem 0;}
.substance_sub_01:nth-child(2) {width: 10%; padding: 1.5rem 0;}
.substance_sub_01:nth-child(3) {width: 45%}
.substance_sub_01:nth-child(3)>div:nth-child(1) {background: #78808d; color: #fff;}
.substance_sub_01:nth-child(3)>div:nth-child(1) {width: 100%; padding: .75rem 0; border: none;}
.substance_sub_01:nth-child(3)>div:nth-child(2), .substance_sub_01:nth-child(3)>div:nth-child(3) {float: left; width: 50%; box-sizing: border-box; padding: .75rem 0; border: 1px solid #dddddd;}
.substance_sub_01:nth-child(3)>div:nth-child(2)>span, .substance_sub_01:nth-child(3)>div:nth-child(3)>span {color: #000; }
.substance_name:nth-child(11) {padding: 2.2rem 0;}
.substance_name:nth-child(11)>p{padding: .1rem 0;}
.substance:nth-child(12) {padding: .6rem 0rem; text-align: left; color: #747474; font-size: .9rem;}
.substance:nth-child(12) p {padding: 0.3rem 1rem; text-align: left; color: #747474; font-size: .9rem;}
.substance_sub {font-size: .8rem !important; padding-left: 1.5rem !important;}
.substance_name:nth-child(13) {border: none;}
.substance:nth-child(14) {padding: 0; }
.substance_sub_02 {float: left; width: 33.33%; background: #78808d; padding: 1rem 0; color: #fff; box-sizing: border-box;}
.substance_sub_02::after {content: ""; display: block; clear: both;}
.substance_sub_02:nth-child(2) {border-left: 1px solid #878e99; border-right: 1px solid #878e99;}
.substance:nth-child(14) {border: none;}
.substance_sub_03 {float: left; width: 33.33%; box-sizing: border-box; padding: .5rem 0; border: 1px solid #d9dbdf; color: #747474;}
.substance_sub_03 p {padding: 0.11rem 0;  padding-left: .5rem;}
.substance_sub_03:last-child {float: left; width: 33.33%; padding: 1.25rem 0; border: 1px solid #d9dbdf; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.substance_sub_03:last-child>p {white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.substance_sub_03:nth-child(2)>p{ white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.substance_sub_03:nth-child(1)>p{ white-space: nowrap;overflow: hidden; text-overflow: ellipsis;}
.substance_name:nth-child(15) {padding: 3rem 0; background: #446cb7; border: 2px solid #446cb7; }
.substance:nth-child(16) {text-align: left; font-size: .9rem; color: #333; border: none; padding: 0;}

/* no2 */
.ethics_wrap_02 {border-top:1px solid #ddd; border-bottom: 1px solid #ddd; padding: 3rem 0}
.con_box2 {padding-bottom: 3rem;}

.cicle_content {background: #284780; width: 9rem; height: 9rem; border-radius: 50%; text-align: center; background-image: url(../../images/mps/content/cicle_bg.png); color: #fff; margin: 0 auto;}
.cicle_text_area {padding: 4rem 0;}
.cicle_text_area h2 {font-size: 1.1rem; margin-bottom: .5rem;}
.cicle_text_area h4 {font-size: .9rem;}

.cicle_text_area::before {position: absolute; content: ""; width: 1px; height: 31rem; border-left: 1px solid #ddd; z-index: -1;}
.line_01 {position: absolute; left: 54rem; width: 1px; height: 10rem; border-left: 1px solid #000;}

.supple {position: absolute; left: 50%; margin-left: 15rem; width: 12rem;}
.supple>div:nth-child(1) {background: #78808d; padding: .5rem 0; color: #fff; width: 100%; box-sizing: border-box; border: 1px solid #78808d;}
.supple>div:nth-child(2),.supple>div:nth-child(3) {float: left; width: 50%; padding: .5rem .5rem; margin: 0; box-sizing: border-box; color: #78808d; border: 1px solid #78808d; display: block;}
.supple>div:nth-child(2) {border-right: none;}
.supple>div::after {content: ""; display: block; clear: both;}

.ethics_con {text-align: center;}
.second_content {background: #466cb7; width: 10rem; padding: 1rem 0; text-align: center; color: #fff; margin: 0 auto;}
.second_content:nth-child(2) {margin-top: 8rem;}
.second_content:nth-child(3) {margin-top: 2rem;}
.second_content h2 {font-size: 1.1rem; margin-bottom: .5REM;}
.second_content h4 {font-size: .9rem;}

.bottom_content_high::before {content: ""; display: block; border: 1px solid #ddd; width: 80%; height: 2rem; border-bottom: none;}

.bottom_content_high {width: 100%;margin-top: 2rem;}
.bottom_content_high::before { width: 80%; margin: 0 auto;}
.bottom_content_high::after {content: ""; display: block; clear: both;}
.bottom_content_high>div {width: 18%; height: 10rem; background: #fff; margin: 0 1.25%; color: #566a95; font-size: .9rem; float: left; box-sizing: border-box;}
.bottom_content_high>div>div:nth-child(1) {width: 100%; background: #fff;  border: 2px solid #284780; color: #284780; margin: 0 1.25%; padding: .5rem 0; color: #566a95; font-size: .9rem; float: left; box-sizing: border-box; text-align: center;}
.bottom_content_high>div>div:nth-child(2) {width: 100%; height: 6rem; background: #fff; padding-left: 1rem; border: 2px solid #ddd; margin: .5rem 1.25%; text-align: left; color: #566a95; font-size: .9rem; float: left; box-sizing: border-box;}
.bottom_content_high>div:nth-child(1) {width: 18%; margin: 0 1.25% 0 0; float: left; box-sizing: border-box;}
.bottom_content_high>div:nth-child(2)::before {position: absolute; margin-top: -2rem; margin-left: 6.6rem; content: ""; border:none; border-left: 1px solid #ddd; height: 2.5rem; z-index: -1;}
.bottom_content_high>div:nth-child(4)::before {position: absolute; margin-top: -2rem; margin-left: 6.6rem; content: ""; border:none; border-left: 1px solid #ddd; height: 2.5rem; z-index: -1;}
.bottom_content_high>div:nth-child(5) {width: 18%; margin: 0 0 0 1.25%; float: left; box-sizing: border-box;}
.bottom_content_high .last_part01 {padding: 2rem 0 0 1rem !important; background: red;}
.last_part02 {padding: 1.5rem 0 0 1rem;}
.last_part03 {padding: 1rem 0  0 1rem;!important;}

/* === 02_인권경영목표 및 추진체계 끝 === */

/* 반응형 구조 */

@media (max-width:1850px) {
  
}

@media (max-width:1440px) {
       
    .content {margin: 0 !important; padding: 0;}
    .ethics_con, .content_02 {width: 100%; margin: 0; padding: 0;}
    .ethics_wrap .ethics_side, .ethics_wrap_02 .ethics_side {float: none; display: contents; width: 100%;  position: static !important; height: 2rem; border: 1px dotted red;}
    
    .con_box {border: 5px; box-sizing: border-box; border: solid #d9dce1; width: 100%; height: 7rem;  margin-bottom: 1rem; text-align: center;}
    .con_box>h3 {text-decoration: underline; text-underline-position: under; font-weight: bold; float: left; font-size: 2rem; padding: 1rem;}
    .con_box>h1 {font-size: 2.5rem; font-weight: bold; padding: 1rem; float: left;}
    
    .supple {position: absolute; left: 35%; margin-left: 15rem; width: 12rem;}
    .supple>div:nth-child(1) {background: #78808d; padding: .5rem 0; color: #fff; width: 100%; box-sizing: border-box; border: 1px solid #78808d;}
    .supple>div:nth-child(2),.supple>div:nth-child(3) {float: left; width: 50%; padding: .5rem .5rem; margin: 0; box-sizing: border-box; color: #78808d; border: 1px solid #78808d; display: block;}
    .supple>div:nth-child(2) {border-right: none;}
    .supple>div::after {content: ""; display: block; clear: both;}
}

@media (max-width:991px) {
    
    .substance_sub_01:nth-child(2) {width: 10%; padding: 1rem 0;}
}

@media (max-width:768px) {
    /* === 01 === */
    
    .biz_charter_part_02 {text-align: left; margin-top: 3rem; padding:.5rem; background: #f8f8f8;}
    .biz_charter_part_02>p::before {position: absolute; content: ""; margin-left: -3.5rem; margin-top: -.2rem; width: 1.5rem; height: 1.5rem; background: url(../../images/mps/content/clip.png) no-repeat center / cover;}
    .biz_charter_part_02>p {margin: .5rem 0 .5rem 5rem;}
    
    
    .biz_charter_part_03>p {text-align: center; margin-top: .5rem;}
    
    /* === 01 종료 ==== */
    
    /* === 02 === */
    /* no1 */
    
    .con_box>h3 {font-size: 1.2rem;}
    .con_box>h1 {font-size: 1.5rem;}
    
    .substance_name {width: 100%;}
    .substance {width: 100%;}
    .substance>img{width: 20%; margin-top: -4rem;}
    .substance_name:nth-child(9) {padding: 1rem 0;}
    .substance_sub_01:nth-child(3)>div:nth-child(2), .substance_sub_01:nth-child(3)>div:nth-child(3) {font-size: .7rem;padding: 1rem 0;}
    .substance_name:nth-child(11) {padding: 1rem 0;}
    .substance_name:nth-child(11)>p{display: inline;}
    .substance:nth-child(12) {padding: 0; text-align: left; color: #747474; font-size: .9rem;}
    .substance:nth-child(12) p {padding: .3rem 1rem; text-align: left; color: #747474; font-size: .9rem;}
    .substance_sub {font-size: .8rem !important; padding-left: 2rem !important;}
    .substance_name:nth-child(15) {padding: 1rem 0; background: #446cb7; border: 2px solid #446cb7; }
    html .substance_sub_03:last-child {float: left; width: 33.33%; padding: 1.3rem 0; border: 1px solid #d9dbdf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block !important;}
    
    /* no2 */
    
    .supple {position: absolute; left: 10%; margin-left: 58%; margin-top: -15rem; zoom:.5;}
    
    .second_content {background: #466cb7; width: 10rem; padding: 1rem 0; text-align: center; color: #fff; margin: 0 auto;}
    .second_content:nth-child(2), .second_content:nth-child(3) {margin-top: 1rem; width: 100%;}
    .second_content h2 {font-size: 1.1rem; margin-bottom: .5REM;}
    .second_content h4 {font-size: .9rem;}
    
    html .part_wrap {margin: 0 !important; padding: 0; height: 8.5rem;}
    .bottom_content_high>div {width: 100%;  margin: 0 !important; box-sizing: border-box; text-align: center;}
    .bottom_content_high>div:nth-child(1), .bottom_content_high>div:nth-child(5) {width: 100%;  margin: .5rem 0;float: left; box-sizing: border-box;}
    .bottom_content_high>div::after {content: ""; display: block; clear: both;}
    .bottom_content_high::before {display: none;}
    .bottom_content_high>div:nth-child(2)::before,.bottom_content_high>div:nth-child(3)::before,.bottom_content_high>div:nth-child(4)::before {display: none !important;}
    .bottom_content_high>div>div:nth-child(1) {text-align: center; padding: none!important; margin: 0 !important;color: #000; background: #abc1eb;}
    .bottom_content_high>div>div:nth-child(2) {text-align: center; padding: none; margin: .3rem 0 0 !important;}
    .last_part {height: 4rem !important; padding: 0 !important;}
    .bottom_content_high .last_part01 {padding: 1rem 0 !important; height: 1rem;}
    .last_part02 {line-height: 1.7rem;}
    .last_part03 {line-height: 1.3rem;}
}