@charset "UTF-8";
main button{ font-size: 1rem} 
*{image-rendering: -moz-crisp-edges; image-rendering:-o-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;} 
:before, :after{ box-sizing: border-box} 
.content > h3{ margin-bottom: 40px} 
/*20220118-수정2*/
h3+.search-box{margin-top: -40px;}
h4{ display: flex; font-size: 1.428rem; color: #222; font-weight: 600;background: url("../img/org/ico_h4.svg") no-repeat 0 50%; padding-left:24px; background-size: 14px; margin-bottom: 20px; justify-content: space-between; align-items: flex-end    } 
[hidden]{ display: none !important} 
.content > article{ margin-bottom: 80px} 
.sub_tit{ align-items:center; border: none; padding: 0} 
.sub_tit .icon{ width:150px; height: 150px; margin: 0; display: flex; align-items: center; justify-content: center} 

h3+.sub_tit{ padding-top: 0} 
.sub_tit .text{ font-size:1.071rem; margin-left: 40px; flex-basis: 100% !important} 
.sub_tit .text > p{ width: 100%; padding-right: 40px} 
.sub_tit .text p.tit{ font-size: 1.571rem; font-weight: 600;letter-spacing: -0.55px;; color: #222; margin-bottom: 20px} 
.sub_tit .text p.tit strong{ color: #005bac} 
.sub_tit .icon{ border-radius: 100%; background:#f0f0f0 } 
.sub_tit .icon img{ max-width: 81px} 
.content .sub_tit + h4::before{ display: none} 
table{ table-layout: auto; border-top:2px solid #999}
table th, table td{ border-bottom: 1px solid #d9d9d9; padding: 18px 30px; vertical-align: middle} 
table thead th{ background:#f0f0f0 } 
table tbody th{ background:#f9f9f9; vertical-align: middle; font-weight: 600; color: #222; font-size: 1.0714rem; text-align: center; border-right: 1px solid #d9d9d9;}
table tbody td{font-size: 1.0714rem;} 
a.bt_dn{ text-decoration: underline;} 
a.bt_dn:hover{ color:#0253a5 } 
a.bt_dn:after{ content: ""; display: inline-block; vertical-align: middle; background: url("../img/org/bt_dn.png") no-repeat 0 0; width:14px; height: 14px; background-size: 14px; margin-left: 11px} 

a.bt_site{ text-decoration: underline;} 
a.bt_site:hover{ color:#0253a5 } 
a.bt_site[target="_blank"]:after{ content: ""; display: inline-block; vertical-align: middle; background: url("../img/sub/btn_link.png") no-repeat -13px 0; width:14px; height: 14px; background-size: 26px; margin-left: 11px} 

p.guide { margin-top: 20px;color: #777;font-size: 1rem !important;}
ul.list{ text-align: left} 
ul.list li{display: flex;align-items: flex-start;font-size: 1.071rem;}
td ul.list li{ display: block; padding-left: 12px; position: relative; text-align: left} 
ul.list li:before{width: 3px; height: 3px; display: block; background: #606060; content: ""; margin-right:9px; margin-top:12px;flex-shrink: 0;} 
td ul.list li:before{ position: absolute; left: 0; top: 0} 
ol { counter-reset: section;list-style-type: none;}
ol li::before {counter-increment: section;content: counter(section,decimal-leading-zero)""; }
article[class$="_w"] > div+div, article[class$="_w"] > div+h4{ margin-top:40px} 
.sub_tit + div[class$="_bx"]{ border-top: 1px solid #d9d9d9; padding-top: 40px} 
div[class$="_bx"] > p{ font-size: 1.0714rem} 
div[class$="_bx"]  > .box{ border: 1px solid #d9d9d9; padding: 50px} 
p+.box{ margin-top: 30px}
.txt_bx:after{content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.txt_bx .tit{ margin-bottom: 20px} 
.txt_bx .tit > strong{ color: #222; font-size: 1.1428rem; font-weight: 600} 
.txt_bx .img.fl{ margin:0 40px 20px 0; max-width: 20%} 
.txt_bx .img.fr{ margin:0 0 20px 40px; max-width: 20%} 
@media screen and (max-width:767px) { 
	.sub_tit .icon img{ max-width: 70%} 
}
/************** 
탭
**************/
.tab_list_w{ display: table; width: 100%; table-layout: fixed} 
.tab_list_w li{ display: table-cell; text-align: center; margin-right: -1px} 
.tab_list_w li button{ font-size: 1.142rem;border: solid 1px rgb(217, 217, 217); border-right: 0;  padding:10px 18px;  background: #fff; width: 100%; height:52px; ; position: relative; color: #606060; font-weight: 500}
.tab_list_w li:last-of-type button{ border-right: 1px solid rgb(217, 217, 217)} 
.tab_list_w li button[aria-selected="true"]{ border-bottom: 0; font-weight: 600; color: #222 } 
.tab_list_w li button[aria-selected="true"]:before{ content: ""; position: absolute; left: -1px; top: -4px; display: block; width: calc(100% + 2px); height:4px; background:#00a6e7} 

@media screen and (max-width:767px) {    
    .content > h3{ margin-bottom: 30px; padding-bottom: 11px}
    .sub_tit{ padding: 0px 0; display: block;}
    .sub_tit .icon{ width: 60px; height:60px; margin:10px 20px 15px 0;  float: left}        
    .sub_tit .text{ margin: 0} 
	.sub_tit:after{content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0;} 
	h4{ flex-direction: column; justify-content: flex-start; align-items:  flex-start; background-position: 0 8px} 
	.tab_list_w{ overflow-x: auto !important; display: flex !important; width: auto !important; min-width: 100% !important; height: auto !important; }  
	.tab_list_w li{ flex-basis: 50%; margin-right: 0} 
	.table_box{ overflow-x: auto} 
	.tab_list_w li button[aria-selected="true"]:before{ top:0 !important}
	/* td[data-th]{ flex: 1 0 100%; font-weight: 500; text-align: left; color: #606060; padding: 5px 0} 
	td[data-th]:before{ content: attr(data-th) " "; color: #000; font-weight: 300; padding-right: 10px; color: #666}  */
	.sub_tit + div[class$="_bx"]{ padding-top: 30px; margin-top: 30px} 
	.sub_tit .text > p{ padding-right: 0px} 
	.sub_tit .text p.tit{ line-height: 1.46} 
	.txt_bx .img.fl{ margin:0 20px 20px 0; max-width: 30%} 
.txt_bx .img.fr{ margin:0 0 20px 20px; max-width: 30%} 
	article[class$="_w"] > div+div, article[class$="_w"] > div+h4{ margin-top: 30px} 
	table th{ padding: 18px 10px} 
	table td{ padding: 18px } 
	table td a.bt_dn{ word-break: break-all} 
	h3+.search-box{margin-top: -30px;}
	
}
/************** 
컨텐츠
**************/
.style_gray{border: solid 1px rgb(225, 225, 225);  background: rgb(247, 247, 247); padding: 10px} 
.style_d-blue{background: rgb(2, 83, 165); padding: 10px; color: #fff} 
.style_blue{background: rgb(0, 123, 203);padding: 10px; color: #fff} 
.style_bd-blue{border: solid 1px rgb(0, 166, 231);padding: 10px} 
.style_bd-wh{border: solid 1px rgb(225, 225, 225);padding: 10px} 
.style_red{background: #d54400; padding: 10px; color: #fff} 

/* KGS ESG경영 */
.outline_w .box{ border: 1px solid #d9d9d9; padding: 50px; text-align: center}
.outline_w > .box .tit{ font-size: 2rem; font-weight: 600; color: #222; margin-bottom: 40px }
.outline_w > .box .tit strong{ color: #005bac; font-weight: 600} 
.outline_w .tit_bx{ display: flex; justify-content: center; gap:45px;margin-bottom: 40px; position: relative; z-index: 3} 
.outline_w .tit_bx li{ width: 130px; height: 130px; border-radius: 100%; background:#f0f0f0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 500; color: #606060; letter-spacing: -0.35px; position: relative} 
.outline_w .tit_bx li:before{content: ""; width:10px; height: 10px; border-radius: 100%; display: block;  background: #fff !important; border: 2px solid #b7dd3a; position: absolute; left: 50%; bottom: 0; transform: translate(-50%,50% ); z-index: 2} 
.outline_w .tit_bx li:after{content: ""; display: block; height: 1px; position: absolute; left:0; top: 50%; background:#b7dd3a; transform: translate(-100%,0); z-index: 1; width: 45px}
.outline_w .tit_bx li.e_tit:before{ bottom: 50%; left: 0; border-color:#b7dd3a  }
.outline_w .tit_bx li.g_tit:before{ bottom: 50%; left: 100%; border-color:#41c5ec}
.outline_w .tit_bx li.s_tit:before{ border-color:#f6b358} 
.outline_w .tit_bx li.s_tit:after{ display: none} 
.outline_w .tit_bx li.g_tit:after{ left:auto; right: 0; transform: translate(100%,0); background:#56c0f0  } 

.outline_w .tit_bx li strong{ color: #222; font-size: 4.2857rem; font-weight: 700; line-height: 1; } 
.outline_w .dec_bx{ display: flex; justify-content: center; gap:35px; } 
.outline_w .dec_bx dl{ border: 1px solid #b7dd3a; padding: 20px 20px 50px 20px; border-radius: 4px; position: relative} 
.outline_w .dec_bx dl:before{ content: ""; width:10px; height: 10px; border-radius: 100%; display: block;  background: #fff !important; border: 2px solid #b7dd3a; position: absolute; left: 50%; top: 0; transform: translate(-50%,-50% ); z-index: 2} 
.outline_w .dec_bx dl:after{ content: ""; display: block; width: 1px; position: absolute; left: 50%; top: 0; background:#b7dd3a; transform: translate(-50%,-100%); z-index: 1; height: 106px} 
.outline_w .dec_bx dl dt{ width: 209px; font-size:1.2857rem; text-align: center; padding:0 0 6px 0;  font-weight:500; background: #5c8128;position: relative; color: #fff; margin-bottom: 20px; position: relative }
.outline_w .dec_bx dl dt:before{ width: 100%;content: ""; background:#b7dd3a url("../img/esg/ico_e.png") no-repeat 50% 50%; background-size: 72px; z-index: 0; height: 113px; display: block; margin-bottom: 6px} 
.outline_w .dec_bx dl dd{ text-align: left; display: flex; align-items: center; padding-left: 9px; font-size:1.1428rem; margin: 5px 0; max-width: 209px} 
.outline_w .dec_bx dl dd:before{ width: 7px; height: 7px; border-radius: 100%; background: #606060; content: ""; display: block; margin-right: 10px; flex-shrink: 0 } 
.outline_w .dec_bx dl dd.dec{ font-size: 1rem; margin-bottom: 15px} 
.outline_w .dec_bx dl dd.dec:before{ display: none} 
.outline_w .dec_bx dl.s_box{ border-color:#f6b358 } 
.outline_w .dec_bx dl.g_box dt{background:#357da5 } 
.outline_w .dec_bx dl.s_box dt:before{ background-color:#f6b358; background-image: url("../img/esg/ico_s.png"); background-size:46px;  } 
.outline_w .dec_bx dl.g_box{ border-color:#41c5ec} 
.outline_w .dec_bx dl.s_box dt{background:#94703d; } 
.outline_w .dec_bx dl.g_box dt:before{ background-color:#41c5ec; background-image: url("../img/esg/ico_g.png"); background-size:65px;} 
.outline_w .dec_bx dl.s_box:before, .outline_w .dec_bx dl.s_box:after{ border-color:#f6b358; background: #f6b358 } 
.outline_w .dec_bx dl.g_box:before, .outline_w .dec_bx dl.g_box:after{ border-color:#41c5ec; background: #56c0f0} 
.outline_w .dec_bx dl.s_box:after{ height: 40px} 

.outline_w .list_bx ul{border-top: 1px solid #d9d9d9} 
.outline_w .list_bx li{ padding: 40px 40px 40px 190px; position: relative; border-bottom: 1px solid #d9d9d9; font-size: 1.0714rem; } 
.outline_w .list_bx li .l_txt strong{ color: #222; font-weight: 600 } 
.outline_w .list_bx li .l_tit{ font-weight: 600; color: #222; font-size:1.5714rem; margin-bottom: 20px; letter-spacing:  -0.55px;} 
.outline_w .list_bx li .l_tit > span, .outline_w .list_bx li .l_tit > span strong{ font-size:1.428rem; font-weight: 500;   } 
.outline_w .list_bx li .l_tit > span strong{ color:#005bac } 

.outline_w .list_bx li:before{ content: ""; width: 150px; height: 150px; border-radius: 100%; background:#f0f0f0 url("../img/esg/ico_outline01.png") no-repeat 50% 50%; position: absolute; left: 0; top: 50%; display: block; transform: translateY(-50%)} 
.outline_w .list_bx li.l2:before{ background-image: url("../img/esg/ico_outline02.png")} 
.outline_w .list_bx li.l3:before{ background-image: url("../img/esg/ico_outline03.png")} 
.outline_w .list_bx li.l4:before{ background-image: url("../img/esg/ico_outline04.png")} 
.outline_w .list_bx li.l5:before{ background-image: url("../img/esg/ico_outline05.png")} 
.outline_w .list_bx li.l6:before{ background-image: url("../img/esg/ico_outline06.png")} 
.outline_w .list_bx li.l7:before{ background-image: url("../img/esg/ico_outline07.png")} 
.outline_w .list_bx li.l8:before{ background-image: url("../img/esg/ico_outline08.png")} 
.outline_w .list_bx li.l9:before{ background-image: url("../img/esg/ico_outline09.png")} 
.outline_w .list_bx li.l10:before{ background-image: url("../img/esg/ico_outline10.png")} 
.org_bx .box >div{position: relative;}
.org_bx .box >div h5{ position: absolute; left: 0; top: 0; height: 100%; background:#f7f7f7; border: 1px solid #e1e1e1; width: 118px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-size: 1.1428rem; font-weight: 600; color: #222} 

.org_bx .box01 { display: flex; justify-content: flex-end; padding-top: 120px;padding-bottom: 80px;}
.org_bx .box01:before{ position: absolute; left: 50%; bottom: 0; content: ""; width: 1px; height:100%; background: #e1e1e1;z-index: -1;} 
.org_bx .box .box01 {margin: 0 80px; } 
.org_bx .box01_1{ width: 260px;position: absolute;top:0;left: 50%;transform: translateX(-50%);} 
.org_bx .box01_1 p{background:#0253a5; color: #fff; border-radius: 4px;display: flex;align-items: center;justify-content: center;height: 71px;font-size: 1.1428rem; font-weight: 600; width: 100%; z-index: 2 } 
.org_bx .box01_2 {position: absolute;right: 0;top: 0; }
.org_bx .box01_2:before {display: block;content: "";background-color: #e1e1e1;width: 100%;height: 1px;position: absolute;top: 50%;left: -71px;transform: translateY(-50%);z-index: -1;}
.org_bx .box01_2 p{background:#777; color: #fff; border-radius: 4px;display: flex;align-items: center;justify-content: center; height: 71px;font-size: 1.1428rem; font-weight: 600; width: 160px;} 
.org_bx .box01_3 {position: relative;}
.org_bx .box01_3 dt { position: relative; background: #777; color: #fff; border-radius: 4px 4px 0 0; padding: 12px; font-size: 1.1428rem; font-weight: 600; }
.org_bx .box01_3:before { display: block;content: '';background-color: #e1e1e1;width: 200px;height: 1px;position: absolute;top: 50%;left: -200px;transform: translateY(-50%);z-index: -1;}
.org_bx .box01_3 dd { background: #f7f7f7; border: 1px solid #e1e1e1; padding: 15px 12px; color: #222; font-size: 1.0714rem; border-radius: 0 0 4px 4px; font-weight: 500; border-top: 0; height: auto;}

.org_bx .box02 {display: flex;gap: 20px;justify-content: flex-end;margin: 0 80px 0 90px;}
.org_bx .box02::before {display: block;content: '';background-color: #e1e1e1;width: calc(100% - 230px);height: 1px;position: absolute;top: -40px;left: 50%;transform: translateX(-50%);z-index: -1;}
.org_bx .box02 p {position: relative; width: 225px;height: 50px;display: flex;align-items: center;justify-content: center;border-radius: 4px;color: #fff;font-size: 1.1428rem; font-weight: 600;}
.org_bx .box02 p:not(:nth-child(2)):before {display: block;content: '';background-color: #e1e1e1;width: 1px;height: 40px;position: absolute;top: -40px;left: 50%;transform: translateX(-50%);z-index: -1;}
.org_bx .box02 .tit01{ background:#5c8128} 
.org_bx .box02 .tit02{ background:#94703d} 
.org_bx .box02 .tit03{ background:#357da5} 

.org_bx .box03 {position: relative;margin: 40px 80px 0 90px;padding:15px;border-radius: 4px;background-color: #f7f7f7;border: 1px solid #e1e1e1;color: #222;font-size: 1.071rem;}
.org_bx .box03::before { display: block;content: '';background-color: #e1e1e1;width: 1px;height: 40px;position: absolute;top: -40px;left: 50%;transform: translateX(-50%);z-index: -1;}

.outline_w .diagram01 > dl{ display: flex; gap:15px;} 
.outline_w .diagram01 > dl + dl{ margin-top: 20px} 
.outline_w .diagram01 > dl > dd { display: flex; justify-content: space-between; padding: 0 !important; }
.outline_w .diagram01 .style_bd-blue { border-radius: 4px; font-weight: 500; font-size: 1.143rem; padding: 12px 5px; color: #222; }
.outline_w .diagram01 > dl > dt.style_gray { width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative; }
.outline_w .diagram01 > dl > dt.style_gray + dd { width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size: 1.143rem; text-align: center; padding: 17px; gap: 10px;}
.outline_w .diagram01 > dl > dt.style_gray + dd.style_d-blue {padding: 17px!important;justify-content: center;}
.outline_w .diagram01 > dl > dt.style_gray + dd div.style_bd-wh { width: 33.333%;font-size: 1rem; font-weight: 500; padding: 20px;text-align: left;}
.outline_w .diagram01 > dl dt.style_wh { border-radius: 4px 4px 0 0; font-size: 1.071rem; font-weight: 600; padding: 17px; border: 1px solid #d9d9d9;border-bottom-width: 0;}
.outline_w .diagram01 > dl dt.style_wh + dd.style_bg-gr { border-radius: 0 0 4px 4px; border: 1px solid #d9d9d9;border-top-width: 0;background-color: #f7f7f7;height: calc(100% - 50px); font-size: 1.071rem; font-weight: 500; padding: 20px 15px; }
.outline_w .diagram01 > dl dt.style_blue { padding: 3px; height: 50px; display: flex; align-items: center; justify-content: center; line-height: 1.3;border-radius: 4px 4px 0 0; font-size: 1.071rem; font-weight: 600; padding: 17px; }
.outline_w .diagram01 > dl dd.style_bd-wh { padding: 20px; font-weight: 500; border-radius: 0 0 4px 4px; }
.outline_w .diagram01 > dl dt.style_blue + dd.style_bd-wh { height: calc(100% - 50px); font-size: 1.071rem; font-weight: 500; padding: 20px 15px; }
.outline_w .diagram01 > dl > dt.style_gray + dd dl { width: 33.333%;}
.outline_w .diagram01 > dl > dt.style_gray + dd dl:nth-child(1) dt.style_wh { color: #5c8128;}
.outline_w .diagram01 > dl > dt.style_gray + dd dl:nth-child(2) dt.style_wh { color: #94703d;}
.outline_w .diagram01 > dl > dt.style_gray + dd dl:nth-child(3) dt.style_wh { color: #357da5;}

.result_bx .box{ border: none; padding: 0; display: flex; gap:28px } 
.result_bx dl{ width: 33.333%; border: 1px solid #e1e1e1; padding: 0 30px 30px 30px; text-align: left} 
.result_bx dl dt{ font-size: 1.714rem; font-weight: 600; line-height: 1;  color: #5c8128; text-align: left; padding: 0 0 18px 0} 
.result_bx dl.box02 dt{ color:#94703d } 
.result_bx dl.box03 dt{ color:#357da5 } 
.result_bx dl dt img{ width: calc(100% + 60px); margin-bottom: 30px; margin-left: -30px; max-width: none} 
.result_bx dl dd{ font-size: 1.0714rem; }
.result_bx dl dd.txt{margin-bottom: 18px; font-weight: 600 } 

@media screen and (max-width:1299px){
	.org_bx .box >div {width: 690px;}
	.org_bx .box .box01,
	.org_bx .box02,
	.org_bx .box03 {margin: 0 auto}
	.org_bx .box03 {margin-top: 40px;}
}
@media screen and (max-width:1023px){
	.org_bx *{ word-break: break-all} 	
	.outline_w .dec_bx dl dt{ width: 100%}
	.outline_w .dec_bx{ gap:10px; justify-content: space-between} 
	.outline_w .dec_bx dl{ padding: 15px} 
	.outline_w .tit_bx{ justify-content: space-between } 
	.outline_w .tit_bx li{ margin: 0 auto} 
	.outline_w .tit_bx li.s_tit:before{ margin-left: 4px} 
	.outline_w .tit_bx li:before, .outline_w .tit_bx li:after{ display: none} 
	.outline_w .org_bx .box{ padding: 50px 20px} 
	.org_bx .box >div h5{ width: 75px; padding: 0 10px; word-break: keep-all} 

}
@media screen and (max-width:767px){

	.outline_w .list_bx li{ padding: 30px 0} 
	.outline_w .list_bx li:before{ display: inline-block;left: 0; right: auto; top: 25px; transform: none; width: 80px; height: 80px; background-size: 60%} 
	.outline_w .list_bx li .l_tit{ display: inline-block; padding-left: 100px; min-height:80px; line-height: 1.35}  
	.outline_w .dec_bx{ flex-direction: column} 
	.outline_w .box { border: none; padding: 0; }
	.outline_w .diagram_bx .box { border: none; padding: 0} 
	.outline_w .tit_bx{ gap:5px; margin-bottom: 20px} 
	.outline_w .tit_bx li{ width: 100%; height: 80px; border-radius: 20px; margin: 0} 
	.outline_w .dec_bx dl:before, .outline_w .dec_bx dl:after{ display: none} 
	.outline_w .dec_bx dl{ padding: 0 0 20px 0} 
	.outline_w .dec_bx dl dd{ padding-left:20px; max-width: none } 
	.result_bx .box{ flex-direction: column} 
	.result_bx dl{ width: 100%} 
	.org_bx .box >div {width: 100%;}
	.org_bx .box01_1 {width: 125px;}
	.org_bx .box01_2 { position: absolute; right: calc(50% - 240px); top: 0; transform: translateX(-50%);z-index: -1; }
	.org_bx .box01_2 p {width: 100px;}
	.org_bx .box01_3 {right: calc(50% - 190px);}
	.org_bx .box01_3:before {width: 100%;left: calc(-100% + 10px);}
	.org_bx .box01_3 {width: 100px;}
	.org_bx .box02::before {width: calc(100% - 120px);}
	.outline_w .diagram01 > dl > dt.style_gray { width: 80px; text-align: center; }
	.outline_w .diagram01 > dl > dt.style_gray + dd {width: calc(100% - 80px);}
	.outline_w .diagram01 > dl > dt.style_gray + dd {flex-direction: column;}
	.outline_w .diagram01 > dl > dt.style_gray + dd dl {width: 100%;}
	.outline_w .diagram01 > dl > dt.style_gray + dd div.style_bd-wh {width: 100%;}
}
@media screen and (max-width:450px){	
	.org_bx .box01_2 { position: absolute; right: 0; top: calc(50% - 45px); transform: translateY(-50%); z-index: -1; }
	.org_bx .box01_3 { top: 35px; right: 0;;width: 100px; }
	.org_bx .box01_2:before {left: -80px;}
	.org_bx .box01_3:before {left:-80px;}
	.org_bx .box02::before {width: calc(100% - 72px);}
}
@media screen and (max-width:400px){	
	.org_bx .box01_2:before {left: -60px;}
	.org_bx .box01_3:before {left:-60px;}
}
@media screen and (max-width:360px){	
	.org_bx .box01_2:before {left: -20px;}
	.org_bx .box01_3:before {left:-20px;}
}

/* 환경 */
.env_w .diagram_bx .box{ padding: 25px 0} 
.env_w .diagram01{ padding-bottom: 25px} 
.env_w .diagram01 dl{ width: 780px; margin: 0 auto; overflow: hidden; position: relative  }
.env_w .diagram01 dt{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);  color: #fff; width: 190px; height: 190px; border-radius: 100%; font-size: 1.285rem; line-height: 1.33;  letter-spacing: -0.45px;  text-align: center; display: flex; align-items: center; justify-content: center; padding: 0 30px; font-weight: 600; border: 1px solid #00a6e7; background: #fff; z-index: 2}
.env_w .diagram01 dt:before{ position: absolute;width: 160px; height: 160px; border-radius: 100%; left: 15px; top: 15px; background:#0457a8; content: ""; display: block; z-index: -1 } 
.env_w .diagram01 dd{ float: left; width: 220px; border: 2px solid #00a6e7; border-radius: 35px; height:70px; display: flex; justify-content: center; align-items: center; padding:10px 40px; text-align: center; font-size:1.142rem; font-weight: 500; color: #222; line-height: 1.35; margin: 25px 0; position: relative; background: #fff  } 
.env_w .diagram01 dd:nth-of-type(2n+1){ clear: left} 
.env_w .diagram01 dd:nth-of-type(2n){ float: right} 
.env_w .diagram01 dl dd:before{ content: ""; height: 1px; width:220px; position: absolute; right:40px; top: 50%; background:#14ade9; transform: translate(100%, 40px) rotate(30deg); z-index: -1} 
.env_w .diagram01 dl dd:nth-of-type(3):before{transform: translate(100%, 0px) rotate(0deg);}
.env_w .diagram01 dl dd:nth-of-type(5):before{transform: translate(100%, -40px) rotate(-30deg);}
.env_w .diagram01 dd:nth-of-type(2n):before{ right: auto; left: 40px; transform:translate(-100%, -40px) rotate(30deg); } 
.env_w .diagram01 dd:nth-of-type(2):before{ transform:translate(-100%, 40px) rotate(-30deg); } 
.env_w .diagram01 dd:nth-of-type(4):before{ transform:translate(-100%, 0) rotate(0deg); } 
.env_w .diagram02{ background:#f9f9f9;border-top: solid 1px rgb(221, 226, 230); padding: 40px 60px 60px 60px; clear: both; float: none; margin-bottom: -25px} 
.env_w .diagram02 h5{font-size: 1.2857rem; font-weight: 600; color: rgb(34, 34, 34); margin-bottom: 30px}
.env_w .diagram02 ol{ display: flex; justify-content: space-between; gap:28px;} 
.env_w .diagram02 li{ width: 100%; border: solid 1px rgb(0, 166, 231);  background-color: rgb(255, 255, 255); height: 150px; border-radius: 8px 50% 50% 50%; overflow: hidden; max-width: 180px; position: relative; display: flex; justify-content: center; align-items: center; padding: 0 10px; text-align: center; font-size: 1.0714rem; font-weight: 500} 
.env_w .diagram02 li:before{ position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 0 0 6px 0; background: rgb(0, 123, 203); color: #fff; text-align: center; line-height: 30px; font-size: 0.928rem; font-weight: 500  } 

.env_w .diagram03{ padding: 25px 50px;}
.env_w .diagram03 dl{ margin: 0 auto; max-width: 850px; text-align: center} 
.env_w .diagram03 dl dt{ border-radius: 4px;  background: rgb(0, 91, 172); font-weight: 600; line-height: 1.33; color: #fff; font-size:1.125rem; text-align: center; padding: 15px 40px; margin: 0 auto 55px auto; display:block; max-width: 230px; position: relative   } 

.env_w .diagram03 dl dt span{ display: block; font-size:1.1428rem } 
.env_w .diagram03 dl dd{ display: inline-block; margin: 0;  border-radius: 4px;  border: solid 2px rgb(0, 166, 231); background: #fff; padding:14px 20px; width: calc(33% - 20px); max-width: 250px; font-size:1.0714rem; font-weight: 600; position: relative; vertical-align: top} 
.env_w .diagram03 dl dd + dd{ margin-left: 40px} 
.env_w .diagram03 dl dd:before, .env_w .diagram03 dl dt:before{content: ""; width: 1px; height:28px; position: absolute; left: 50%; top: 0; transform: translate(-50%,-100%); background:#e1e1e1} 
.env_w .diagram03 dl dt:before{ top: auto; bottom: 0;transform: translate(-50%,100%); height: 55px} 
.env_w .diagram03 dl dd:after{ content: ""; width: calc(100% + 50px); height: 1px;position: absolute; left: 50%; top: 0;background:#e1e1e1; transform: translate(0,-28px);} 
.env_w .diagram03 dl dd:nth-of-type(2):before, .env_w .diagram03 dl dd:nth-of-type(2):after{ display: none} 
.env_w .diagram03 dl dd:last-of-type:after{transform: translate(-100%,-28px);}
.env_w .txt_bx .img.fr{ margin-top: 40px} 
@media screen and (max-width:1299px){
	.env_w .diagram02 ol{ max-width: 870px; margin: 0 auto} 
}
@media screen and (max-width:1023px){
	.env_w .diagram02 ol{ gap:10px} 
	.env_w .diagram02{padding: 40px 30px 40px 30px} 
	.env_w .diagram01 dl{ max-width: 90%} 
	.env_w .diagram01 dd{ width: 200px; height: 80px; border-radius: 40px;    padding: 10px 30px;} 
	.env_w .diagram03 dl dd{ width: calc(33% - 20px);} 
	.env_w .diagram03 dl dd + dd{ margin-left:20px} 	
}
@media screen and (max-width:767px){
	.env_w .diagram02{ padding: 30px 20px} 
	.env_w .diagram02 ol{ gap:10px; flex-direction: column; align-items: flex-start} 
	.env_w .diagram02 li{ border-radius: 8px; height: auto; width: 100%; max-width: none; padding: 10px 10px 10px 40px; text-align: left; justify-content: flex-start} 
	.env_w .diagram02 li:before{ height: 100%; border-radius: 0; display: flex; align-items: center; justify-content: center} 
	.env_w .diagram02 h5{ margin-bottom: 20px} 
	.env_w .diagram01 dt:before{ width:  100px; height: 100px; left: 4px; top: 4px}
	.env_w .diagram01 dt{ width:  110px; height: 110px; padding: 0 10px}
	.env_w .diagram01 dl{ display: flex; justify-content: space-between; flex-wrap: wrap; padding: 20px 0; } 
	.env_w .diagram01 dl dd{ width: calc(33.333% - 5px); height: auto; border-radius: 20px; padding: 10px; float: none; margin: 0; height: 96px} 
	.env_w .diagram01 dl dd:before{ display: none} 
	.env_w .diagram01 dl dd:nth-of-type(n+4){ margin-top:100px} 
	.env_w .diagram03{ padding:10px 20px} 
	.env_w .diagram03 dl dd{ width: calc(33% - 5px); word-break: break-all; padding: 10px 5px; height: 86px; display: inline-flex; align-items: center; justify-content: center} 
	.env_w .diagram03 dl dd + dd{ margin-left: 5px} 	
}

/* 인권 */
.rights_w .sub_tit .icon img{ width: 68px}
.rights_w .diagram01 > dl{ display: flex; justify-content: space-between} 
.rights_w .diagram01 > dl+dl{ margin-top: 40px} 
.rights_w .diagram01 > dl > dt{ width: 180px; border-radius: 4px; padding:10px 20px; text-align: center; color: #222; font-size: 1.1428rem; font-weight: 600; display: flex; align-items: center; justify-content: center; min-height: 60px; position: relative } 
.rights_w .diagram01 > dl > dd{ width: calc(100% - 265px);border-radius: 4px; padding:10px 0; text-align: center; font-size: 1.142rem; font-weight: 600; min-height: 60px;display: flex; align-items: center; justify-content: center;} 
.rights_w .diagram01 > dl > dd.style_blue{ font-size: 1.2857rem}
.rights_w .diagram01 > dl:last-of-type > dd{ padding: 0; gap:10px; align-items: flex-start} 
.rights_w .diagram01 > dl > dd dl{ width: 33.333%; display: flex; flex-direction: column} 
.rights_w .diagram01 > dl > dd dt{ font-size: 1.0714rem; font-weight: 500; border-radius: 4px 4px 0 0;line-height: 1.33; letter-spacing: -0.38px;} 
.rights_w .diagram01 > dl > dd dd{ border-top: none; border-radius: 0 0 4px 4px; padding: 20px; font-size: 1rem; color: #222; font-weight: 400;line-height: 1.43;} 
.rights_w .diagram01 > dl > dt:after{ content: ""; display: block; position: absolute; right: 0; top: 50%; transform: translate(100%, -50%); width: 40px; height: 15px; background: url("../img/esg/arrow_long_b.svg") no-repeat 50% 50%; background-size: 40px; margin-right: -25px}
.rights_w .diagram02{ margin: 0 auto} 
.rights_w .diagram02 dl{ display: flex; align-items: center; }
.rights_w .diagram02 dl+dl{ margin-top: 20px} 
.rights_w .diagram02 dl dt{ width: 360px; border-radius: 4px; text-align: center;font-weight: 600; font-size: 1.2857rem; height: 60px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-right: 180px; position: relative} 
.rights_w .diagram02 dl dt:before{ position: absolute; left: 50%; top: 0; width: 1px; height:120px; display: block; background:#e1e1e1; content: ""; transform: translate(0, -100%); z-index: -1} 
.rights_w .diagram02 dl.right dt:before{ left: 0; top: 50%; width: 90px; height: 1px; transform: translate(-100%, 0)} 
.rights_w .diagram02 dl:first-of-type dt:before, .rights_w .diagram02 dl:last-of-type dt:before{ display: none}

.rights_w .diagram02 dl dt.style_d-blue{ } 
.rights_w .diagram02 dl.right{ margin-left: 270px;} 
.rights_w .diagram02 dl dt.style_gray{ color: #222; font-size: 1.142rem; margin-right: 90px; line-height: 1.14} 
.rights_w .diagram02 dl.right dt{ width: 180px} 
.rights_w .diagram02 dl:last-of-type{ margin-top:50px } 
.rights_w .diagram02 dl:last-of-type dt{ height: 80px} 
.rights_w .diagram03 .style_d-blue{ width: 240px; border-radius: 4px; text-align: center;font-weight: 600; font-size: 1.2857rem; height: 80px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; flex-direction: column; line-height: 1.2;margin: 0 auto; margin-bottom: 60px; position: relative} 
.rights_w .diagram03 .style_d-blue strong{ font-size: 1.714rem;font-weight: 600;} 
.rights_w .diagram03 .group_box{ display: flex; justify-content: space-between; gap:20px; position: relative } 
.rights_w .diagram03 .group_box:before{ left:103px; top: 0; width: calc(100% - 205px); height: 1px; transform: translate(0, -30px); content: ""; position: absolute; background:#e1e1e1; } 
.rights_w .diagram03 .group_box dl{ width: 25%;   display: flex; flex-direction: column; position: relative} 
.rights_w .diagram03 .group_box dl dt{border-radius: 4px 4px 0 0; text-align: center; font-weight: 600; font-size:1.0714rem; padding: 13px; height: 50px } 
.rights_w .diagram03 .group_box dl dd{border-radius: 0 0 4px 4px; border-top: none; padding:20px 15px; height: calc(100% - 50px)} 
.rights_w .diagram03 .group_box dl:before, .rights_w .diagram03 .style_d-blue:before{position: absolute; left: 50%; top: 0; width: 1px; height:30px; display: block; background:#e1e1e1; content: ""; transform: translate(0, -100%); z-index:1} 
.rights_w .diagram03 .style_d-blue:before{ top: auto; bottom: 0;transform: translate(0, 100%); } 
.rights_w h5{ color: #222; font-size: 1.143rem; margin-bottom: 20px; margin-top: 40px; font-weight: 600} 
.rights_w h5 + p{ line-height: 1.6} 
.rights_w .diagram04 ol li::before, .rights_w .diagram05 ol li::before{ display: none} 
.rights_w .diagram04 [class^=style_], .rights_w .diagram05 [class^=style_]{ text-align: center;font-weight: 600; padding: 20px 15px; border-radius: 4px;  } 
.rights_w .diagram04 .style_gray{ width: 300px;font-size:1.143rem; color: #222; font-weight: 600; margin: 0 auto 40px auto } 
.rights_w .diagram04 .step2{ display: flex; justify-content: center; gap:100px; margin-bottom: 40px} 
.rights_w .diagram04 .step2 dl{ width: 360px; position: relative  } 
.rights_w .diagram04 .step2 dl dd li{ font-size:1.143rem; min-height: 60px; display: flex; align-items: center; justify-content: center; padding: 10px; position: relative}
.rights_w .diagram04 .step2 dl dd li + li{margin-top: 40px; } 
.rights_w .diagram04 .step2 dl dd li + li:before, .rights_w .diagram04 .step2 dl dt:before{ content: ""; display: block; position: absolute; height:40px; background: url("../img/esg/arrow_b.svg") no-repeat right 40px top 50%; background-size:16px; top: 0; left: 0; transform: translateY(-100%); width: 100%} 
.rights_w .diagram04 .step2 dl dd li span{ font-size: 1.072rem; white-space: nowrap}
.rights_w .diagram04 .step2 dl dd li.style_red{ flex-direction: column  } 
.rights_w .diagram04 .step2 dl dd li.style_red + .style_red{ margin-top:31px} 
.rights_w .diagram04 .step2 dl:first-of-type dt{ text-align: right}
.rights_w .diagram04 .step2 dl dt{ font-weight:600; color: #222; margin-bottom: 12px; position: relative; padding-right: 70px } 
.rights_w .diagram04 .step2 dl dt:before{ height: 22px; transform: none; background-image: url("../img/esg/arrow_double_b.svg")} 
.rights_w .diagram04 .step2 dl:nth-of-type(2) dt{ padding-left: 70px} 
.rights_w .diagram04 .step2 dl:nth-of-type(2) dt:before{ background-image: url("../img/esg/arrow_double_r.svg"); background-position: left 40px top 50%;} 
.rights_w .diagram04 .step2 dl:nth-of-type(2)  li + li:before{ background-image: url("../img/esg/arrow_r.svg"); height: 30px;background-position: left 40px top 50%;}
.rights_w .diagram04 .step2 dl:after{content: ""; display: block; position: absolute; height:40px; background: url("../img/esg/arrow_double_b.svg") no-repeat right 40px top 50%; background-size:16px; bottom: 0; left: 0; transform: translateY(100%); width: 100%} 
.rights_w .diagram04 .step2 dl:nth-of-type(2):after{background-image: url("../img/esg/arrow_double_r.svg"); background-position: left 40px top 50%;} 
.rights_w .diagram04 .step3 .style_gray{ margin-bottom: 0} 
.rights_w h4+p+p.guide{ margin-top: 5px} 
strong.red{ font-weight: 600; color:#d54400 } 
.rights_w .diagram05 ol{ display: flex; justify-content: space-between; gap:28px} 
.rights_w .diagram05 ol li{ width: 20%; display: flex; flex-direction: column; position: relative} 
.rights_w .diagram05 ol li *{ display: block} 
.rights_w .diagram05 ol .style_blue{ text-align: center;font-weight: 600; border-radius: 4px 4px 0 0; padding: 14px 10px} 
.rights_w .diagram05 [class^=style_]{ font-size:1.072rem ; display: flex; align-items: center; justify-content: center} 
.rights_w .diagram05 .style_bd-wh{ height: calc(100% - 50px); color: #606060; font-weight: 500} 
.rights_w .diagram05 ol li + li:before{ content: ""; display: block; width: 28px; height: 28px;  background: url("../img/esg/arrow_b.svg") no-repeat 50% 50%; ; position: absolute; left: 0; top: 50%; transform: translate(-100%,-50%) rotate(-90deg); background-size: 14px} 
.rights_w .diagram05 + p.guide{ padding-bottom: 80px; border-bottom: 1px solid #d9d9d9; margin-bottom: 30px} 
.bt_gosite{ display: block; margin: 0 auto; background:#0253a5; width: 250px; padding:20px; text-align: center; color: #fff; font-size: 1.286rem; font-weight: 500;letter-spacing: -0.45px; display: flex; align-items: center; justify-content: center} 
.bt_gosite:after{display: inline-block; content: ""; font-style: normal; font-weight: normal; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "remixicon"; content: "\F0F4"; margin-left:10px;  font-weight: 400 } 
@media screen and (max-width:1023px){    
    .rights_w .diagram02 dl dt{ width: 200px} 
    .rights_w .diagram02 dl.right dt{ width: 150px; margin-right: 40px} 
    .rights_w .diagram02 dl.right{ margin-left: 190px} 
    .rights_w .diagram03 .group_box:before{ left: 70px;width: calc(100% - 139px);}     
}
@media screen and (max-width:767px){
	.rights_w .diagram_bx > .box{ padding: 30px 10px }	
	.rights_w .diagram01 > dl > dt{ width: 60px} 
	.rights_w .diagram01 > dl > dt:after{ width: 15px; background-position: 100% 50%; margin-right:-5px} 
	.rights_w .diagram01 > dl > dd{    width: calc(100% - 85px); padding: 10px} 
	.rights_w .diagram01 > dl:last-of-type > dd{ flex-direction: column} 
	.rights_w .diagram01 > dl > dd dl{ width: 100%} 
	.rights_w .diagram01 > dl > dd dd{ padding: 10px} 
    .rights_w .diagram02 dl{ flex-direction: column; align-items: flex-start} 
    .rights_w .diagram02 dl dt{ margin: 0 } 
    .rights_w .diagram02 dl dd{ padding-left: 30px; padding-top: 5px} 
    .rights_w .diagram02 dl.right{ margin-left: 85px} 
    .rights_w .diagram02 dl.right dd{ padding-left: 0} 
    .rights_w .diagram02 dl.right dt{ margin-right: 0} 
    .rights_w .diagram02 dl.right dt:before{ width:75px} 
    .rights_w .diagram02 dl dt:before{ height: 200px; left: 10px} 
    .rights_w .diagram02 ul.list li:before, .rights_w .diagram03 ul.list li:before{ margin-top:9px} 
    .rights_w .txt_bx > .box{ padding: 30px 10px} 
    .rights_w .diagram03 .group_box{ flex-direction: column} 
    .rights_w .diagram03 .group_box dl{ flex-direction: row; width: 100%} 
    .rights_w .diagram03 .group_box dl dt{ height:auto; border-radius: 4px 0 0 4px; width: 85px; display: flex; align-items: center; justify-content: center } 
    .rights_w .diagram03 .group_box dl dd{ border-radius: 0 4px 4px 0; width: calc(100% - 85px); background: #fff; padding: 10px 15px} 
    .rights_w .diagram03 .group_box dl dd.style_bd-wh{border: solid 1px rgb(225, 225, 225);}
    .rights_w .diagram03 .group_box dl:before, .rights_w .diagram03 .style_d-blue:before{ z-index: -1} 
    .rights_w .diagram03 .group_box:before{ display: none} 
    .rights_w .diagram03 .style_d-blue{ margin-bottom: 30px} 
    .rights_w .diagram04 .step2{ gap:10px} 
    .rights_w .diagram04 .step2 dl dd li{ flex-direction: column} 
    .rights_w .diagram04 .step2 dl dd li span{ white-space: normal} 
    .rights_w .diagram04 .step2 dl{ width: 50%} 
    .rights_w .diagram04 .step2 dl:first-of-type  dd li + li{ margin-top: 52px} 
    .rights_w .diagram05 ol{ flex-direction: column} 
    .rights_w .diagram05 ol li{ width: 100%} 
    .rights_w .diagram05 ol li + li:before{left: 50%;top:0;transform: translate(-50%,-100%) rotate(0deg);} 
    .rights_w .diagram05 + p.guide{ padding-bottom: 50px} 
}
/* 고객감동 */
.satis_w [class^=style_]{ font-size:1.072rem ; display: flex; align-items: center; justify-content: center; border-radius: 4px; padding: 13px; font-weight: 600} 
.satis_w .diagram01 > dl{ width: 480px; text-align: center; margin: 0 auto 20px auto} 
.satis_w .diagram01 > dl > dt{ border-radius: 10px 10px 0 0; padding: 13px; background:#007bcb; color: #fff; font-size: 1.143rem; font-weight: 600;  } 
.satis_w .diagram01 > dl > dd{padding: 18px 13px; border: 1px solid #007bcb; border-radius: 0 0 10px 10px;font-size: 1.143rem; font-weight: 500; } 
.satis_w .diagram01 > dl:nth-of-type(3){ width: 100%; background:#f7f7f7; border: 1px solid #e1e1e1; padding: 0 30px 20px 30px; margin-bottom: 0; border-radius: 10px; margin-top: 60px; position: relative} 
.satis_w .diagram01 > dl:nth-of-type(3):before{ content: ""; width: 60px; height: 60px; position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%); background: url("../img/esg/arrow_big_g.svg") no-repeat 50% 50%; background-size: 58px} 
.satis_w .diagram01 > dl:nth-of-type(3) > dd{ border: none; display: flex; justify-content: space-between; gap:10px; padding-bottom: 0} 
.satis_w .diagram01 > dl:nth-of-type(3) dl{ width: 20%} 
.satis_w .diagram01 > dl:nth-of-type(3) > dt{ width: 480px; background:#0253a5; border-radius: 0 0 10px 10px; margin: 0 auto } 

.satis_w .diagram01 > dl:nth-of-type(3) dl dt{ border-radius: 4px 4px 0 0} 
.satis_w .diagram01 > dl:nth-of-type(3) dl dd{ flex-direction: column; align-items: flex-start; background: #fff; border-radius: 0 0 4px 4px; font-size: 1rem; font-weight: 500; min-height: calc(100% - 50px); justify-content: flex-start} 
.satis_w .diagram01 > dl:nth-of-type(3) dl dd p{ display: flex; text-align: left; justify-content: flex-start} 
.satis_w .diagram01 > dl:nth-of-type(3) dl dd p + p{ margin-top: 2px} 
.satis_w .diagram01 > dl:nth-of-type(3) dl dd p:before{width: 3px; height: 3px; display: block; background: #606060; content: ""; margin-right:9px; margin-top:10px;flex-shrink: 0;} 
.satis_w .diagram02 > dl{ display: flex; padding:10px 0; gap:50px; justify-content: space-between } 
.satis_w .diagram02 > dl > dt{ width: 180px} 
.satis_w .diagram02 > dl > dd img{ height: 60px} 
.satis_w .diagram02 > dl+ dl{ border-top: 1px solid #e1e1e1} 
.satis_w .diagram02 > dl > dd{ width: calc(100% - 180px); text-align: center; position: relative} 
.satis_w .diagram02 .style_d-blue, .satis_w .diagram02 > dl:nth-of-type(3) dd.style_blue{ font-size: 1.286rem; padding: 16px 13px} 
.satis_w .diagram02 > dl:nth-of-type(1),.satis_w .diagram02 > dl:nth-of-type(2){ padding-bottom: 20px} 
.satis_w .diagram02 > dl:nth-of-type(3){ padding-top: 20px; position: relative}
.satis_w .diagram02 > dl:nth-of-type(3) dd:before{content: ""; width: 60px; height: 40px; position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%); background: url("../img/esg/arrow_big_g.svg") no-repeat 50% 50%; background-size: 40px} 
.satis_w .diagram02 > dl:nth-of-type(4) > dd{ display: flex; justify-content: space-between; gap:10px}  
.satis_w .diagram02 > dl:nth-of-type(4) > dd dl{ width: 25%} 
.satis_w .diagram02 > dl:nth-of-type(4) > dd dl dt{ font-size:1.143rem; padding: 8px 9px; border-radius: 4px 4px 0 0; min-height: 40px  } 
.satis_w .diagram02 > dl:nth-of-type(4) > dd dl dd{ font-weight: 500; height: calc(100% - 40px); border-radius: 0 0 4px 4px } 
.satis_w .diagram02 > dl:last-of-type{ padding: 20px 0} 
.satis_w .diagram02 > dl:last-of-type dd{ color:#0253a5; font-weight: 500; font-size: 1.143rem; padding: 20px 10px } 
.satis_w .diagram03{ position: relative; display: flex; flex-wrap: wrap; justify-content: space-between} 
.satis_w .diagram03 > dl{ width: calc(50% - 20px); margin-bottom: 60px; display: flex; flex-direction: column} 
.satis_w .diagram03 > dl dt{ background: #007bcb; color: #fff; font-weight: 600; font-size: 1.143rem; padding: 18px 30px; border-radius: 4px 4px 0 0} 
.satis_w .diagram03 > dl dd{ border: 1px solid #e1e1e1; border-radius: 0 0 4px 4px; border-width: 0 1px 1px 1px; padding: 18px 50px 18px 30px; min-height: 80px; display: flex; align-items: center; font-size: 1.072rem; font-weight: 500 } 
.satis_w .diagram03 > dl:nth-of-type(3),.satis_w .diagram03 > dl:nth-of-type(4){ margin-bottom: 0; display: flex; flex-direction: column-reverse} 
.satis_w .diagram03 > dl:nth-of-type(3) dt,.satis_w .diagram03 > dl:nth-of-type(4) dt{ border-radius: 0 0 4px 4px} 
.satis_w .diagram03 > dl:nth-of-type(3) dd,.satis_w .diagram03 > dl:nth-of-type(4) dd{ border-radius: 4px 4px 0 0; border-width: 1px 1px 0 1px} 
.satis_w .diagram03 > dl:nth-of-type(2),.satis_w .diagram03 > dl:nth-of-type(4){ text-align: right; } 
.satis_w .diagram03 > dl:nth-of-type(2) dd,.satis_w .diagram03 > dl:nth-of-type(4) dd{ justify-content: flex-end; text-align: right; padding: 18px 30px 18px 50px;} 
.satis_w .diagram03 > dl:nth-of-type(2) dt{ background:#d54400 } 
.satis_w .diagram03 > dl:nth-of-type(3) dt{ background:#138a00 } 
.satis_w .diagram03 > dl:nth-of-type(4) dt{ background:#3548bd } 
.satis_w .diagram03 h5{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fff; border: 1px solid #e1e1e1; width: 180px; height: 180px; border-radius: 100%; display: flex; justify-content: center; align-items: center; z-index: 1; color: #fff; font-size: 1.286rem; font-weight: 600; line-height: 1.33; padding: 30px; text-align: center}
.satis_w .diagram03 h5:before{ background:#606060 ; display: block; width: 160px; height: 160px; content: ""; position: absolute; left:9px; top:9px; z-index: -5; border-radius: 100%;} 
.satis_w .diagram04{ display: flex; justify-content: space-between; gap:80px; max-width: 800px; margin: 50px auto 0 auto} 
.satis_w .diagram04 .group01{ position: relative} 
.satis_w .diagram04 .group01 .style_gray{ width: 180px; font-weight: 500; color: #222; position: relative} 
.satis_w .diagram04 .group01 .style_gray +.style_gray{ margin-top: 50px} 
.satis_w .diagram04 .group02{ width: calc(100% - 180px); position: relative; display: flex; gap:40px; padding-top: 100px; justify-content: space-between} 
.satis_w .diagram04 .group02 [class^=style_]{ width: 160px} 
.satis_w .diagram04 .group02 .org1{ position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%)} 
.satis_w .diagram04 .group02 > div{ position: relative; height: 50px} 
.satis_w .diagram04 .group02 > div >p { position: absolute; font-size: 1rem; white-space: nowrap  } 
.satis_w .diagram04 .group02 .org1 p{ left: 0; bottom:0; text-align: right; transform: translate(-50%, 100%); padding-top: 15px} 
.satis_w .diagram04 .group02 .org2 p.take_01{ right: 0; bottom: 0;transform: translate(100%, 100%); padding-top: 10px} 
.satis_w .diagram04 .group02 .org2 p.take_02{ top: 0; left: 10px;transform: translate(-100%, -100%); padding-right: 10px; padding-bottom: 15px } 
.satis_w .diagram04 .group02 .org2 p.take_03{right: 0; bottom: 0;transform: translate(100%, 100%); padding-top: 70px; padding-left: 80px} 
.satis_w .diagram04 .group02 .org3 p.take_01{ right: 0; top: 0;transform: translate(20px, -150%); padding-bottom: 15px} 
.satis_w .diagram04 .group02 .org3 p.take_02{ right: 0; bottom: 0;transform: translate(100%, 100%); padding-top: 10px } 
.satis_w .diagram04 .group02 .org3 p.take_03{ top: 0; left: 0;transform: translate(-50%, -100%); padding-right:50px; padding-bottom: 15px } 
.satis_w .diagram04 .group02 .org4 p.take_01{ top: 0; left: 0;transform: translate(-40px, -100%);  } 
.satis_w .diagram04 .group01 p.take_01{position: absolute; font-size: 1rem; white-space: nowrap; right: 0; top: 50%; transform:translate(100%, 100%); padding-top: 10px; padding-left: 30px }  
.satis_w .diagram04 .group02  > div > p:before, .satis_w .diagram04 .group01 p.take_01:before{content: ""; position: absolute; height: 1px; width: 30px; background: #999  } 
.satis_w .diagram04 .group02 .org2 p.take_02:before, .satis_w .diagram04 .group02 .org3 p.take_03:before,.satis_w .diagram04 .group02 .org4 p.take_01:before{ bottom: -20px; left: 5px} 
.satis_w .diagram04 .group02 .org3 p.take_03:before{ transform: translateX(32px)} 
.satis_w .diagram04 .group02 .org1 p:before, .satis_w .diagram04 .group02 .org3 p.take_01:before, .satis_w .diagram04 .group02 .org4 p.take_02:before{ width:1px; height: 60px; } 
.satis_w .diagram04 .group02 .org1 p:before{ right: -15px; top: 20px} 
.satis_w .diagram04 .group02 .org3 p.take_01:before{ left: -15px ;top:-25px} 
.satis_w .diagram04 .group01 p.take_01:before, .satis_w .diagram04 .group02 .org3 p.take_02:before,.satis_w .diagram04 .group02 .org2 p.take_01:before{ top:-20px; left: 5px } 
.satis_w .diagram04 .group01 p.take_01:before{ left: 35px; top:-30px} 
.satis_w .diagram04 .group02 .org2 p.take_03:before{ width: 400px; left: 0; transform: translate(-100px, -10px)} 
.satis_w .diagram04 .group02 .org4 p.take_02:before{ height: 50px; top:11px; left: 60px} 
.satis_w .diagram04 .group02 > div.org2:before{content: ""; position: absolute;background: #999;width:1px; height: 50px; left: 59px; bottom:-60px  } 
.satis_w .diagram04 .group02  > div > p:after, .satis_w .diagram04 .group01 p.take_01:after{ content: "";border-top:6px solid #999;border-left:4px solid transparent;border-right:4px solid transparent; position: absolute } 
.satis_w .diagram04 .group02 .org2 p.take_02:after, .satis_w .diagram04 .group02 .org3 p.take_03:after, .satis_w .diagram04 .group02 .org4 p.take_01:after{ transform: rotate(90deg); top:53px} 
.satis_w .diagram04 .group02 .org2 p.take_02:after{left: -0px} 
.satis_w .diagram04 .group02 .org3 p.take_03:after{ left:35px} 
.satis_w .diagram04 .group02 .org4 p.take_01:after{ top: 17px; left: 3px} 
.satis_w .diagram04 .group01 p.take_01:after, .satis_w .diagram04 .group02 .org2 p.take_01:after, .satis_w .diagram04 .group02 .org3 p.take_02:after{ transform: rotate(-90deg); top:-23px; right:13px} 
.satis_w .diagram04 .group01 p.take_01:after{ top:-33px; right: 37px} 
.satis_w .diagram04 .group02 .org1 p:after{ bottom:-45px; right: -18px} 
.satis_w .diagram04 .group02 .org3 p.take_01:after{ transform: rotate(180deg); left: -19px; top: -26px} 
.satis_w .diagram04 .group02 .org4 p.take_02:after{transform: rotate(180deg); left: 57px; top: 8px} 
.satis_w .diagram04 .group02 .org2 p.take_03:after{transform: rotate(180deg); left: -104px; top: 8px} 
.satis_w .diagram04 .group01 .style_gray:after{ position: absolute; right: 0; top: 50%; width:20px; content: ""; display: block; transform: translate(100%, 0); background: #e1e1e1; height: 1px} 
.satis_w .diagram04 .group01:after{position: absolute; right: -20px; top:25px; width:1px; content: ""; display: block;  background: #e1e1e1; height: 205px} 
.satis_w .box + .table_box{ margin-top: 40px} 
.satis_w .box + .table_box thead th, .satis_w .box + .table_box tbody td{ border-right: 1px solid #d9d9d9; text-align: center} 
.satis_w .box + .table_box thead th:last-of-type, .satis_w .box + .table_box tbody tr td:last-of-type{ border-right: none} 
.satis_w .bg_bx .box{ background: url("../img/esg/satisfaction-bg.png") no-repeat 50% 30px; background-size: 843px;} 
.satis_w .bg_bx .box > *{ margin: 0 auto; max-width: 643px;} 
.satis_w .bg_bx .box h5{ background: url("../img/esg/satisfaction_title.png") no-repeat 50% 0; background-size: 314px; height: 57px; margin-top: 50px; text-align: center; color: #f7e178; font-size: 1.286rem; padding-top: 8px; margin-bottom: 45px} 
.satis_w .bg_bx .box p{ text-align: center; font-size: 1.572rem; font-weight: 500; margin-bottom: 40px} 
.satis_w .bg_bx .box p.tit > strong{ font-size: 1.858rem; font-weight: 600; color:#005bac } 
.satis_w .bg_bx .box ul{ padding: 20px 40px; margin-bottom: 60px; } 
.satis_w .bg_bx .box p.txt{ font-size: 1.286rem; color: #005bac; font-weight: 500; background: url("../img/main/logo_mark.png") no-repeat 0 0; background-size: 117px; padding: 25px 25px 25px 143px; height: 100px; text-align: left; margin-bottom: 100px   } 
.satis_w .bg_bx .box p.txt>strong{ font-weight: 600; white-space: nowrap} 
.satis_w .bg_bx .callme{ width: 100%; background: #005bac; max-width: 850px; color: #fff; padding: 40px} 
.satis_w .bg_bx .callme p{ font-size:1.072rem; margin-bottom: 10px; font-weight: 400} 
.satis_w .bg_bx .callme p > strong{ font-weight: 600; font-size: 1.429rem} 
.satis_w .bg_bx .callme p > em{ font-weight: 600; font-size: 1.143rem} 
.satis_w .diagram05{ margin: 0 auto; max-width: 883px} 
.satis_w .diagram05  [class^=style_]{ width: 180px;margin: 0 auto}
.satis_w .diagram05 .style_d-blue{ font-size: 1.286rem; margin-bottom: 40px}
.satis_w .diagram05 ul{ position: relative}
.satis_w .diagram05 ul li{ margin-left:100px; width: calc(100% - 100px); position: relative} 
.satis_w .diagram05 ul li:first-of-type{ position: absolute; left: 0px; margin: 0; width:200px } 
.satis_w .diagram05 .style_blue{ border-radius: 4px 4px 0 0} 
.satis_w .diagram05 .style_gray{ border-radius: 0 0 4px 4px; font-weight: 400; font-size: 1rem; border-top: 0; display: block} 
.satis_w .diagram05 .style_gray > p{ display: flex; } 
.satis_w .diagram05 .style_gray > p:before{width: 3px; height: 3px; display: block; background: #606060; content: ""; margin-right:9px; margin-top:12px;flex-shrink: 0;}
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl{ display: flex; align-items: flex-start; padding-top: 90px; position: relative; justify-content: space-between}
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dt{ position: absolute; left: 50%; top: 0; transform: translate(0, 0); border-radius: 4px} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd{ margin: 0} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd strong.style_bd-blue{ margin-left: 250px} 

.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd:first-of-type{ width:100%;} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul{ width: calc(100% + 90px); display: flex; justify-content: space-between; margin-top: 70px; gap:20px; position: relative} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li{ width: 33.333%; margin-left: 0; position: relative !important; left: auto; border: 1px solid #e1e1e1; background: #f7f7f7; border-radius: 4px; padding-bottom: 30px} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li > strong{ display: block; width: 100%; padding:13px; margin-bottom: 20px; background: #fff; color:#0253a5; font-size: 1.072rem; font-weight: 600; text-align: center; border-bottom: 1px solid #e1e1e1; border-radius: 4px 4px 0 0} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li > p{  font-size: 1rem; padding: 0 15px; display: flex} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li > p:before{width: 3px; height: 3px; display: block; background: #606060; content: ""; margin-right:9px; margin-top:12px;flex-shrink: 0;}
.satis_w .diagram05 .style_blue, .satis_w .diagram05 .style_bd-blue, .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li, .satis_w .diagram05 .style_d-blue{ position: relative} 
.satis_w .diagram05 .style_blue:before, .satis_w .diagram05 .style_bd-blue:before, .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li:before, .satis_w .diagram05 .style_d-blue:before{ content: ""; position: absolute; left: 50%; top: 0px; height: 20px; width: 1px; background: #e1e1e1; transform: translate(0, -100%)} 

.satis_w .diagram05 .style_d-blue:before{ top: auto; bottom: 0;transform: translate(0, 100%)} 
.satis_w .diagram05 > ul > li:nth-of-type(2):before, .satis_w .diagram05 > ul> li:nth-of-type(2) > dl:first-of-type:before{content: ""; position: absolute; left: 50%; top: 0px; height: 1px; width: calc(100% - 300px); background: #e1e1e1; transform: translate(-100%, -20px); margin-left:90px}
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl:first-of-type:before{ top:90px; transform: translate(0, -20px); width: calc(100% - 414px); margin-left:-52px} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li:nth-of-type(2):before{ height: 70px} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul:before{content: ""; position: absolute; left: 50%; top: 0px; height: 1px; width: calc(100% - 225px); background: #e1e1e1; transform: translate(-50%, -20px);} 
.satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dt:after{content: ""; position: absolute; left: 50%; bottom: 0px; height: 20px; width: 1px; background: #e1e1e1; transform: translate(0, 100%)} 
.satis_w .txt_bx .list.txt_list li >strong{ font-weight: 600; color: #222} 
.satis_w .txt_bx .list.txt_list li{ display: block; padding-left:12px; position: relative } 
.satis_w .txt_bx .list.txt_list li:before{ position: absolute; left: 0; top: 0} 
.satis_w .diagram06{ display: flex; justify-content: space-between; gap:35px; align-items: center} 
.satis_w .diagram06 > *{ width: 50%} 
.satis_w .diagram06 dl dt.style_blue{ background: #005bac; font-size:1.286rem; padding: 16px; border-radius: 4px 4px 0 0 }
.satis_w .diagram06 dl dd{ border-top: 0; border-radius: 0 0 4px 4px; flex-direction: column; padding: 17px 20px 30px 20px} 
.satis_w .diagram06 dl dd strong{ display: block; width: 100%; text-align: center; padding:0 15px 15px 15px; color: #007bcb; font-size:1.143rem; font-weight: 600; border-bottom: 1px solid #e1e1e1; margin-bottom: 20px} 
.satis_w .diagram06 dl dd p{ width: 100%; text-align: left; font-size: 1rem; font-weight: 400; display: flex} 
.satis_w .diagram06 dl dd p:before{width: 3px; height: 3px; display: block; background: #606060; content: ""; margin-right:9px; margin-top:12px;flex-shrink: 0;} 


@media screen and (max-width:1023px){  
    .satis_w div[class$="_bx"] > .box{ padding: 30px 20px} 
    .satis_w .diagram01 > dl:nth-of-type(3){ padding:  0 5px} 
    .satis_w .diagram01 > dl:nth-of-type(3) > dd{ gap:5px; padding:18px 5px 10px} 
    .satis_w .diagram01 > dl:nth-of-type(3) dl dd{} 
    .satis_w .diagram01 > dl:nth-of-type(3) dl dt{ padding: 13px 5px} 
    .satis_w .diagram04 .group01 .style_gray{ width: 160px; padding-left: 5px; padding-right: 5px; font-size: 1rem} 
    .satis_w .diagram04 .group02 [class^=style_]{ width: 100px; font-size: 1rem} 
    .satis_w .diagram04{ width: 670px} 
    .satis_w .diagram04 .group02{ gap:30px;width: calc(100% - 250px);} 
    .satis_w .diagram04 .group02 .org1 p{  left: -26px} 
    .satis_w .diagram04 .group02 .org3 p.take_01{ right: -21px} 
    .satis_w .diagram04 .group02 .org2 p.take_03{ right: -61px} 
    .satis_w .diagram04 .group02 .org2 p.take_03:before{ width: 320px} 
    .satis_w .diagram04 .group02 .org2 p.take_01,
    .satis_w .diagram04 .group02 .org3 p.take_02{ right: -10px} 
    .satis_w .diagram04 .group02 .org3 p.take_03, .satis_w .diagram04 .group02 .org4 p.take_01{ left: -10px} 
    .satis_w .bg_bx .box{ background-size:700px} 
    .satis_w .bg_bx .box h5{ margin-bottom: 20px} 
    .satis_w .bg_bx .box p.tit{ line-height: 1.4; font-size: 1.3rem; margin-bottom: 30px} 
    .satis_w .bg_bx .box ul { padding: 20px 80px; margin-bottom: 10px }
    .satis_w .bg_bx .box ul li{ font-size: 1rem; } 
    .satis_w .bg_bx .box p.txt{ width:550px; background-size: 90px; padding-left: 110px; padding-top:10px } 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd strong.style_bd-blue{ margin-left: 130px; margin-right: 0} 
    .satis_w .diagram05{ width: 710px} 
    .satis_w .diagram05 ul li{    width: calc(100% - 148px);} 
    .satis_w .diagram05 > ul > li:nth-of-type(2):before{    width: calc(100% - 192px);} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl:first-of-type:before{    width: calc(100% - 290px); margin-left: -60px} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul:before{    width: calc(100% - 155px);} 
}
@media screen and (max-width:767px){  
    .satis_w div[class$="_bx"] > .box{ padding: 30px 10px}  
    .satis_w .diagram01 > dl{ width: 100%} 
    .satis_w .diagram01 > dl:nth-of-type(3) > dt{ width: 90%} 
    .satis_w .diagram01 > dl:nth-of-type(3) > dd{ flex-direction: column} 
    .satis_w .diagram01 > dl:nth-of-type(3) dl{ width: 100%} 
    .satis_w .diagram01 > dl:nth-of-type(3):before{ background-size: 36px; width: 40px; height: 40px} 
    .satis_w .diagram01 > dl:nth-of-type(3){ margin-top: 40px} 
    .satis_w .diagram02 > dl{ flex-direction: column; border: none !important} 
    .satis_w .diagram02 > dl{ padding: 0; gap:10px} 
    .satis_w .diagram02 > dl > dt{ width: 100%} 
    .satis_w .diagram02 > dl > dd{ width: 100%} 
    .satis_w .diagram02 > dl:nth-of-type(3) dd:before{ margin-top: -60px} 
    .satis_w .diagram02 > dl:nth-of-type(3){ margin-bottom: 20px} 
    .satis_w .diagram02 > dl:last-of-type{ padding: 20px 0 0 0} 
    .satis_w .diagram02 > dl:nth-of-type(4) > dd dl dd{ padding: 13px 5px} 
    .satis_w .diagram02 > dl:nth-of-type(4) > dd{ gap:5px} 
    .satis_w .diagram02 > dl > dd img{ height: 50px} 
    .satis_w .diagram03 > dl{    width: calc(50% - 5px);} 
    .satis_w .diagram03 > dl dt, .satis_w .diagram03 > dl dd{ padding-left: 5px !important; padding-right: 5px !important; min-height: 102px}  
    .satis_w .diagram03 > dl:nth-of-type(3), .satis_w .diagram03 > dl:nth-of-type(4){padding-top: 50px} 
    .satis_w .diagram03 > dl dt{ display: flex; align-items: center; padding-left: 10px !important; padding-right: 10px !important} 
    .satis_w .diagram03 > dl{ margin-bottom: 0px} 
    .satis_w .diagram03 > dl:nth-of-type(1) dd, .satis_w .diagram03 > dl:nth-of-type(2) dd{ padding-bottom: 50px} 
    .satis_w .diagram03 h5{ width: 140px; height: 140px; margin-top: 7px} 
    .satis_w .diagram03 h5:before{ width: 120px; height: 120px} 
    .satis_w .diagram04 [class^=take_], .satis_w .diagram04 *:before, .satis_w .diagram04 *:after, .satis_w .diagram04 .group02 .org1 p{ display: none !important}
    .satis_w .diagram04{ width: 100%; flex-direction: column; margin: 0} 
    .satis_w .diagram04 .group01 { display: flex; gap:5px} 
    .satis_w .diagram04 .group01 .style_gray{ width: auto; margin: 0; width: 33.333%; text-align: center} 
    .satis_w .diagram04 .group01 .style_gray +.style_gray{ margin:0}
    .satis_w .diagram04 .group02{ width: 100%; gap:5px; padding-top: 0px} 
    .satis_w .diagram04 .group02 [class^=style_]{ width: 100%} 
    .satis_w .diagram04 .group02 > div{ width: 33.333%} 
    .satis_w .bg_bx .box{  background: #fff} 
    .satis_w .bg_bx .box h5{ margin-top: 0} 
    .satis_w .bg_bx .box p.tit{ margin-bottom: 0} 
    .satis_w .bg_bx .box p.tit > strong{ white-space: nowrap} 
    .satis_w .bg_bx .box ul{ padding: 20px 0} 
    .satis_w .bg_bx .box p.txt{ background-size: 50px; padding: 0px 0 0 60px; width: 100%; line-height: 1.3; margin-bottom: 0} 
    .satis_w .bg_bx .box p.txt>strong{ white-space: normal} 
    .satis_w .diagram05{ width: 100%} 
    .satis_w .diagram05 ul li{ width: 100% !important; position: relative; left: auto; top: auto; margin: 0 !important; margin-bottom: 20px} 
    .satis_w .diagram05 ul li [class^=style_]{ width: 100%} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dt{ position: relative; left: auto; transform: none; } 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl{ flex-direction: column} 
    .satis_w .diagram05 ul li:first-of-type{ position: relative; left: auto} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl{ padding-top: 0; margin-top: 20px} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd strong.style_bd-blue{ margin-left: 0; margin-top: 10px; font-weight: 500} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul{ width: 100%; gap:5px; margin-top: 30px} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li{ width: 33.333% !important} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li > strong{ padding: 10px 5px} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li > p{ padding: 0 5px} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li > p:before{ margin-right: 5px;margin-top: 9px;} 
    .satis_w .diagram05 .style_d-blue{ width: 100%; margin-bottom: 20px} 
    .satis_w .diagram05 .style_d-blue:before{ display: none} 
    .satis_w .diagram05 > ul > li:nth-of-type(2):before, .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dt:after{ display: none} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd strong.style_bd-blue{ width: 50%} 
    .satis_w .diagram05 .style_bd-blue:before{ z-index: -1} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl:first-of-type:before{ display: none} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li:nth-of-type(2):before{ height: 20px} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd:last-of-type{ width: calc(50% - 5px); position: absolute; right: 0; top: 56px} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul:before { width: calc(67% + 1px); }  
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li > p{ word-break: break-all} 
    .satis_w .diagram05 > ul> li:nth-of-type(2) > dl > dd ul li:nth-of-type(1):before{ height: 30px} 
    .satis_w .box + .table_box thead th, .satis_w .box + .table_box tbody td{ padding-left: 5px; padding-right: 5px} 
    .satis_w .diagram06{ flex-direction: column} 
    .satis_w .diagram06 > *{ width: 100%} 
}

/* 동반성장 */
.growth_w h5{ font-size: 1.143rem; color: #222; margin-bottom:20px; margin-top: 40px; font-weight: 600 } 
.growth_w [class^=diagram0] > dl{ display: flex; gap:83px;} 
.growth_w [class^=diagram0] > dl + dl{ margin-top: 20px} 
.growth_w [class^=diagram0] > dl > dt.style_gray{ width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative } 
.growth_w [class^=diagram0] > dl > dt.style_gray + dd{ width: calc(100% - 180px)} 
.growth_w .diagram01 p.style_d-blue, .growth_w .diagram02 p.style_d-blue{ font-size: 1.143rem; font-weight: 600; text-align: center; border-radius: 4px 4px 0 0; padding: 17px} 
.growth_w .diagram01 p.style_bd-blue, .growth_w .diagram02 dd.style_bd-blue{ font-weight: 500; font-size:1.143rem; border-width: 0 1px 1px 1px; border-radius: 0 0 4px 4px; padding: 17px; text-align: center } 
.growth_w .diagram02 dd.style_bd-blue{ border-width: 1px; border-radius: 4px; font-size: 1.286rem; font-weight: 600; color:#0253a5; padding: 15px } 
.growth_w [class^=diagram0] > dl > dt.style_gray:before{ width:83px; height:15px; background: url("../img/esg/arrow_long_b.svg") no-repeat 50% 50%; background-size: 40px; content: ""; position: absolute; right: 0; top: 50%; transform: translate(100%, -50%);} 
.growth_w .diagram02 dl:first-of-type dd, .growth_w .diagram02 dl:nth-of-type(3) dd, .growth_w .diagram02 dl:nth-of-type(4) dd{ display: flex; justify-content: space-between; gap:10px} 
.growth_w .diagram02 dl:first-of-type dd .style_d-blue{ width: 50%; border-radius: 4px} 
.growth_w .diagram02 dl dd .style_blue, .growth_w .diagram02 dl dd .style_bd-wh{ width: 33.3333%; border-radius: 4px} 
.growth_w .diagram02 dl dd .style_blue{ text-align: center; font-weight: 600; font-size:1.072rem;   } 
.growth_w .diagram02 dl dd .style_bd-wh{ padding: 20px 10px} 
.growth_w .diagram02 dl dd .style_bd-wh p{ display: flex; } 
.growth_w .diagram02 dl dd .style_bd-wh p:before{width: 3px; height: 3px; display: block; background: #606060; content: ""; margin-right:9px; margin-top:12px;flex-shrink: 0;}  
.growth_w .diagram03{ text-align: center} 
.growth_w .diagram03 img{ max-width: 600px; margin: 0 auto} 
.growth_w .table_box table thead th, .growth_w .table_box table tbody td{border-left: 1px solid #d9d9d9 }
.growth_w .table_box table thead th:first-of-type, .growth_w .table_box table tbody tr th:first-of-type{ border-left: none} 


.growth_w .diagram03 + .table_box{ display: flex; gap:15px; justify-content: space-between} 
.growth_w .diagram03 + .table_box table{border-right: 1px solid #e1e1e1; width: 60%} 
.growth_w .diagram03 + .table_box table:last-of-type{ width: 40%} 
.growth_w .diagram03 + .table_box thead th{ padding: 13px; font-size:1.108rem; border-left: 1px solid #e1e1e1 !important } 
.growth_w .diagram03 + .table_box tbody td{ padding: 13px; font-size: 1rem; font-weight: 500; text-align: center; border-left: 1px solid #e1e1e1} 
.growth_w .diagram04{ max-width: 877px; margin: 0 auto} 
.growth_w .diagram04 .style_d-blue{ max-width: 280px; margin: 0 auto; border-radius: 4px; font-size: 1.429rem; font-weight: 600; text-align: center } 
.growth_w .diagram04 .style_d-blue span{ display: block; font-size: 1.286rem } 
.growth_w .diagram04 .style_bd-blue { width: 180px; float: right;border-radius: 4px; margin-bottom: 40px; font-size:1.143rem; text-align: center; font-weight: 600; position: relative; background: #fff} 
.growth_w .diagram04 .style_bd-blue:after{content:"";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.growth_w .diagram04 .group_box{ clear: both; float: none; width: 100%; margin-top: 40px; display: flex; gap:35px; justify-content: space-between; position: relative} 
.growth_w .diagram04 .group_box dl{ width: 33.333%; position: relative} 
.growth_w .diagram04 .style_blue{ font-size:1.143rem; text-align: center; font-weight: 600; padding: 12px; border-radius: 4px 4px 0 0} 
.growth_w .diagram04 .style_bd-wh{ text-align: center; font-weight: 500; font-size: 1.072rem; padding: 20px 5px 30px; border-radius: 0 0 4px 4px; position: relative} 
.growth_w .diagram04 .group_box dl:before{ content: ""; width: 1px; height: 20px; background:#e1e1e1; position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%)} 
.growth_w .diagram04 .group_box dl:nth-of-type(2):before{ height: 120px; z-index: -1} 
.growth_w .diagram04 .group_box:before, .growth_w .diagram04 .style_bd-blue:before{content: ""; width:calc(100% - 30%); height: 1px; background:#e1e1e1; position: absolute; left: 15%; top: -20px; } 
.growth_w .diagram04 .style_bd-blue:before{ right: 0; left: auto; top: 50%; width:438px; z-index: -1; } 
.growth_w .diagram05{ margin-top: -50px; width: calc(100% + 100px); margin-left: -50px; } 
.growth_w .diagram05 p.tit{  padding: 30px;  background-color: #0253a5; color: #fff; text-align: center; font-weight: 600; font-size: 1.429rem } 
.growth_w .diagram05 ul{ padding:40px 80px 0px 80px;position: relative } 
.growth_w .diagram05 ul:before, .growth_w .diagram05 ul:after{ content: ""; width: 110px; height:80px; position: absolute; right:200px; top: 40px; background: url("../img/esg/img_growth02.png") no-repeat 50% 50%; background-size:103px; } 
.growth_w .diagram05 ul:after{ right: 45px; background-image: url("../img/esg/img_growth03.png"); background-size:115px; border-left: 1px solid #d9d9d9; width: 140px} 
.growth_w .diagram05 ul li{ font-size: 1.286rem; font-weight: 500; position: relative; padding-left: 15px} 
.growth_w .diagram05 ul li:before{ content: ""; width: 6px; height: 6px; position: absolute; left: 0; top: 12px; background: #606060; border-radius: 100%} 
.growth_w .diagram05 ul li strong{ font-weight: 600; color: #d54400} 
.growth_w .table_box table thead tr th[colspan]{ border-left: 1px solid #e1e1e1} 
.growth_w .table_box td strong{ color:#005bac; font-weight: 600} 
.growth_w .table_box td p.guide{ margin-top: 10px} 
.growth_w .table_box td p.guide strong{ color: inherit; font-weight: 600} 
.growth_w .diagram_bx .box + .table_box{ margin-top: -1px} 
@media screen and (max-width:1023px){ 
    .growth_w .diagram04 .style_bd-blue{ margin-top: 10px; position: absolute; left: 50%; margin-left: 100px} 
    .growth_w .diagram04 .style_bd-blue:before{ width:100px; right: auto; left: 0; transform: translate(-100%, 0)} 
    .growth_w .diagram04 .group_box{ margin-top: 120px    } 
    .growth_w .diagram_bx .box + .table_box td{ padding: 18px 10px; word-break: break-all} 
    .growth_w .diagram05 ul{ padding-left:30px; padding-right:240px} 
    .growth_w .diagram05 ul:before, .growth_w .diagram05 ul:after{ width:90px; background-size:80px; height: 60px} 
    .growth_w .diagram05 ul:before{ right: 145px} 
}
@media screen and (max-width:767px){  
  .growth_w div[class$="_bx"] > .box{ padding: 30px 10px}    
    .growth_w [class^=diagram0] > dl{ flex-direction: column; gap:40px} 
    .growth_w [class^=diagram0] > dl > dt.style_gray{ width: 100%} 
    .growth_w [class^=diagram0] > dl > dt.style_gray:before{ right: auto; left: 50%; bottom:-15px;  top: auto;   transform: translate( -50%, 100%) rotate(90deg); width: 25px; margin-top: 50px; overflow: hidden; background-position: 100% 50%}
    .growth_w [class^=diagram0] > dl > dt.style_gray + dd{ width: 100%}
    .growth_w .diagram02 dl:first-of-type dd .style_d-blue{display: flex; align-items: center} 
    .growth_w .diagram02 dl dd .style_bd-wh p{ word-break: break-all} 
    .growth_w .diagram02 dl dd .style_bd-wh p:before{ margin-top: 9px; margin-right: 5px} 
    .growth_w .diagram03 img{ max-width: 100%} 
    .growth_w .diagram03 + .table_box{ flex-direction: column} 
    .growth_w .diagram03 + .table_box table{ width: 100% !important} 
    .growth_w .diagram03 + .table_box tbody td{ word-break: break-all; padding: 13px 5px} 
    .growth_w .diagram04{ position: relative} 
    .growth_w .diagram04 .group_box{ gap:5px} 
    .growth_w .diagram04 .group_box dl dd{ word-break: break-all} 
    .growth_w .diagram04 .group_box dl:nth-of-type(2):before{ height: 20px} 
    .growth_w .diagram04 .style_bd-blue{ left:50%; width: auto; margin-left: 0} 
    .growth_w .diagram04 .style_bd-blue:before{ width: 50px  }  
    .growth_w .diagram04 .style_d-blue{ position: relative} 
    .growth_w .diagram04 .style_d-blue:after{ content: ""; width: 1px; height:100px; background:#e1e1e1; position: absolute; left: 50%; bottom: 0; transform: translate(-50px, 100%)} 
    .growth_w .diagram05{ margin-top: -30px; width: calc(100% + 20px); margin-left: -10px}
    .growth_w .diagram05 ul:before, .growth_w .diagram05 ul:after{ right: auto; left: 0; bottom:0; top: auto; width: 50%     } 
    .growth_w .diagram05 ul{ padding: 20px 10px 80px 20px} 
    .growth_w .diagram05 ul:after{ left: 50%} 
    .growth_w .diagram_bx .box + .table_box td{ word-break: keep-all} 
}

/* 사회공헌 */
.with_w .txt_bx .img.fl, .with_w .txt_bx .img.fr{ max-width:320px } 
.with_w [class^=diagram0] > dl{ display: flex; gap:83px;} 
.with_w [class^=diagram0] > dl + dl{ margin-top: 20px} 
.with_w [class^=diagram0] > dl > dt.style_gray{ width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative } 
.with_w [class^=diagram0] > dl > dt.style_gray + dd{ width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 17px} 
.with_w [class^=diagram0] > dl > dt.style_gray:before{ width:83px; height:15px; background: url("../img/esg/arrow_long_b.svg") no-repeat 50% 50%; background-size: 40px; content: ""; position: absolute; right: 0; top: 50%; transform: translate(100%, -50%);} 
.with_w .diagram01 > dl > dt.style_gray + dd.style_bd-blue{ font-weight: 500; color: #222} 
.with_w .diagram02{ display: flex; flex-direction: column; align-items: center; gap:20px}
.with_w .diagram02  [class^=style_]{ width:250px;  border-radius: 4px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 1.143rem; font-weight: 600} 
.with_w .diagram02 .style_d-blue{ font-size: 1.429rem; position: relative} 
.with_w .diagram02 .style_d-blue:after{ left: 50%; bottom:0;content: ""; width: 1px; height: 200px; background:#e1e1e1; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%); z-index: -1 } 
.with_w .diagram02 .style_bd-blue{ color: #222; background: #fff} 
.with_w .diagram02 .style_gray{ margin: -30px 0 -30px 500px; width: 200px; position: relative} 
.with_w .diagram02 .style_gray:before{content: ""; width:150px; height: 1px; background:#e1e1e1; position: absolute; left:0; top: 50%; transform: translate(-100%, 0)} 
.with_w .diagram02 ul{ display: flex; justify-content: space-between; width: 100%; margin-top: 20px; position: relative; } 
.with_w .diagram02 ul:before{content: ""; width:calc(100% - 250px); height: 1px; background:#e1e1e1; position: absolute; left:125px; top: -20px; } 
.with_w .diagram02 ul li{ position: relative} 
.with_w .diagram02 ul li:before{content: ""; width: 1px; height: 20px; background:#e1e1e1; position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%)} 
.with_w .diagram02 ul .style_blue{ height: 50px}
.with_w .diagram02 ul p.style_blue{ border-radius: 4px 4px 0 0 } 
.with_w .diagram02 ul .style_bd-wh{ border-radius: 0 0 4px 4px; height: 50px; font-weight: 500; font-size:1.072rem  } 
.with_w .diagram_bx .box + .table_box{ margin-top: -1px} 
.with_w .txt_bx .list_box{ padding: 40px 0 0 0} 
.with_w .txt_bx .list_box ul{ display: flex; flex-wrap: wrap; justify-content: space-between;margin-bottom: -50px } 
.with_w .txt_bx .list_box ul li{ width: calc(33.3333% - 30px); margin-bottom: 50px; display: flex; flex-direction: column}
.with_w .txt_bx .list_box ul li h5{ min-height: 55px; font-weight: 500; color: #222; font-size: 1.143rem} 
.with_w .txt_bx .list_box ul li .img{ margin-bottom: 25px} 
@media screen and (max-width:1023px){ 
    .with_w .txt_bx .img.fl, .with_w .txt_bx .img.fr{ max-width:35% } 
    .with_w .diagram02 .style_gray{ width: 160px; margin-left: 460px} 
}
@media screen and (max-width:767px){  
  .with_w div[class$="_bx"] > .box{ padding: 30px 10px}  
     .with_w [class^=diagram0] > dl{ flex-direction: column; gap:40px} 
    .with_w [class^=diagram0] > dl > dt.style_gray{ width: 100%} 
    .with_w [class^=diagram0] > dl > dt.style_gray:before{ right: auto; left: 50%; bottom:-15px;  top: auto;   transform: translate( -50%, 100%) rotate(90deg); width: 25px; margin-top: 50px; overflow: hidden; background-position: 100% 50%}
    .with_w [class^=diagram0] > dl > dt.style_gray + dd{ width: 100%}
    .with_w .diagram02 .style_gray{ margin: 0 0 0 100px} 
    .with_w .diagram02 .style_gray:before{ width:60px} 
    .with_w .diagram02 .style_d-blue:after{ left: 35px;    height: 230px;} 
    .with_w .diagram02 ul li{ width: 50% !important} 
    .with_w .diagram02 ul p.style_blue, .with_w .diagram02 ul .style_bd-wh{ width: 100%} 
    .with_w .diagram02 ul{ gap:5px; margin-top: 0}
    .with_w .txt_bx .list_box ul li{ width: calc(50% - 5px)} 
    .with_w .txt_bx .list_box ul li h5{ line-height: 1.4} 
}


/* 안전 경영 */

.safe_w [class^=diagram0] > dl{ display: flex; gap:83px;} 
.safe_w [class^=diagram0] > dl + dl{ margin-top: 20px} 
.safe_w [class^=diagram0] > dl > dt.style_gray{ width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative } 
.safe_w [class^=diagram0] > dl > dt.style_gray + dd{ width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 17px} 
.safe_w [class^=diagram0] > dl > dt.style_gray:before{ width:83px; height:15px; background: url("../img/esg/arrow_long_b.svg") no-repeat 50% 50%; background-size: 40px; content: ""; position: absolute; right: 0; top: 50%; transform: translate(100%, -50%);} 
.safe_w .diagram01 .style_bd-blue li{ font-weight: 500; font-size: 1.143rem }
.safe_w .diagram01 .style_bd-blue ul{ padding-left:10px; text-align: left } 
.safe_w .diagram01 .style_bd-blue li:before{ width: 6px; height: 6px; border-radius: 100%; margin-top:9px } 
.safe_w .diagram01 .group{ margin-top: 40px} 
.safe_w .diagram01 .group > dl >dt{width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem;font-weight: 600; position: relative }
.safe_w .diagram01 .group > dl{ display: flex; gap:83px;} 
.safe_w .diagram01 .group > dl + dl{margin-top: 10px} 
.safe_w .diagram01 .group > dl >dt.style_gray{ color: #222;} 
.safe_w .diagram01 .group > dl >dd{ width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 20px 10px } 
.safe_w .diagram01 .group > dl >dd.style_blue{ padding: 10px} 
.safe_w .diagram01 .group > dl >dt.style_gray:before{ width:83px; height:15px; background: url("../img/esg/arrow_long_b.svg") no-repeat 50% 50%; background-size: 40px; content: ""; position: absolute; right: 0; top: 50%; transform: translate(100%, -50%);} 
.safe_w .diagram01 .group > dl ol{ text-align: left; padding-left: 20px; font-size: 1rem; font-weight: 500} 
.safe_w .diagram01 .group > dl ol li:before{content: counter(section,decimal)"."; padding-right: 5px}
.safe_w .img_box{ text-align: center; border: 1px solid #d9d9d9; margin-top: -1px; padding: 30px} 
.safe_w .img_box img{ max-width:520px } 
.safe_w .diagram02{ max-width: 883px; margin: 0 auto} 
.safe_w .diagram02 .style_d-blue{ width: 280px; display: flex; height: 60px; margin: 0 auto; border-radius: 4px; justify-content: center; align-items: center; font-size:1.2857rem; font-weight: 600; position: relative}
.safe_w .diagram02 .group{ margin-top: 5px; display: flex; justify-content: space-between; align-items: center; padding: 0 20px; margin-bottom: 35px; position: relative} 
.safe_w .diagram02 .group .style_gray{ width: 180px; border-radius: 4px; font-size: 1.142rem; font-weight: 600; text-align: center; padding: 23px } 
.safe_w .diagram02 .style_bd-dot_blue{ border-radius: 8px;  border: 1px dashed #00a6e7; padding: 10px; display: flex; justify-content: space-between; align-items: center; gap:10px; margin-bottom: 60px} 
.safe_w .diagram02 .style_bd-dot_blue dt{ color: #007bcb;font-size: 1.142rem; font-weight: 600; font-weight: 600; padding:0 10px; width: 160px; text-align: center} 
.safe_w .diagram02 .style_bd-dot_blue dd{ width: calc(100% - 160px); display: flex; justify-content: space-between; gap:20px; position: relative} 
.safe_w .diagram02 .style_bd-dot_blue dd>div{ width: 25%; display: flex; align-items: center; justify-content: center; border-radius: 4px;font-size: 1.142rem; font-weight: 600; flex-direction: column; line-height: 1.33;text-align: center; position: relative } 
.safe_w .diagram02 .style_bd-dot_blue dd>div>span{ font-size: 1.0714rem; font-weight: 500} 
.safe_w .diagram02 dl.style_gray{ border: none; border-radius: 10px; display: flex; justify-content: space-between; gap:0; position: relative; z-index: -2}
.safe_w .diagram02 dl.style_gray dt{font-size: 1.0714rem; font-weight: 600; align-items: center; justify-content: center; display: flex; width: 140px} 
.safe_w .diagram02 dl.style_gray dd{ width: calc(100% - 140px); display: flex; gap:10px; justify-content: space-between; position: relative; z-index: 2} 
.safe_w .diagram02 dl.style_gray dd > div{ width: 20%; background: #fff; border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #222; font-size: 1.0714rem; font-weight: 600; flex-direction: column; text-align: center; position: relative; z-index: 2} 
.safe_w .diagram02 dl.style_gray dd > div span.job1,.safe_w .diagram02 dl.style_gray dd > div span.job2{ position: absolute; left: -10px; top: 0; transform: translateY(-50px); font-size: 1rem; font-weight: 500; color: #606060} 
.safe_w .diagram02 dl.style_gray dd > div span.job2{ left: auto; right: -10px} 
.safe_w .diagram02 dl.style_gray dd > div:last-of-type{ margin-left: 50px} 
.safe_w .diagram02 dl.style_gray dd > div:nth-last-of-type(2){ margin-left: 10px}
.safe_w .table_box table thead th, .safe_w .table_box table tbody td{border-left: 1px solid #d9d9d9; text-align: center }
.safe_w .table_box table thead th:first-of-type, .safe_w .table_box table tbody tr th:first-of-type{ border-left: none} 
.safe_w .diagram02 .group:before, .safe_w .diagram02 .style_bd-dot_blue dd:before{ content: ""; width:calc(100% - 360px); height: 1px; background:#e1e1e1; position: absolute; left:180px; top: 50%; z-index: -1}
.safe_w .diagram02 .style_bd-dot_blue dd>div:before{ content: ""; height: 172px; width: 1px;  background:#e1e1e1; position: absolute; left: 50%; top: 0; transform: translate(50%,-30px); z-index:-1} 
.safe_w .diagram02 .style_bd-dot_blue dd:before{ left: 50%; top: 0; transform: translate(-50%,-30px); width: calc(100% - 160px)} 
.safe_w .diagram02 dl.style_gray dd > div span.job1:before,.safe_w .diagram02 dl.style_gray dd > div span.job2:before{ width: calc(100% + 10px); height: 1px; left: -15px; bottom:-10px;background:#e1e1e1; position: absolute; content: "" } 
.safe_w .diagram02 dl.style_gray dd > div span.job2:before{ left: auto; right: -20px} 
.safe_w .diagram02 dl.style_gray dd > div span.job1:after,.safe_w .diagram02 dl.style_gray dd > div span.job2:after{ width: 1px; height: 17px; left: calc(100% - 5px); bottom:-9px;background:#e1e1e1; position: absolute; content: ""; transform: translateY(100%)} 
.safe_w .diagram02 dl.style_gray dd > div span.job2:after{ left: 10px; } 
.safe_w .diagram02 .style_d-blue:before{ position: absolute; left: 50%; bottom:0;width: 1px; height: 146px; background:#e1e1e1; position: absolute; content: ""; transform: translateY(100%) } 
@media screen and (max-width:1023px){ 
	
	.safe_w .diagram02{ max-width: 609px} 
	.safe_w .diagram02 .style_bd-dot_blue dt{ width: auto; padding: 0;  } 
	.safe_w .diagram02 .style_bd-dot_blue dd{width: 100%;    gap: 5px;} 
	.safe_w .diagram02 .style_bd-dot_blue dd:before{ width: 376px; margin-left: -8px} 
	.safe_w .diagram02 dl.style_gray dd > div{ margin: 0 !important} 
	.safe_w .diagram02 dl.style_gray{ margin-top: -20px; gap:20px} 
	.safe_w .diagram02 dl.style_gray dt{ width: auto; padding: 0} 
	.safe_w .diagram02 dl.style_gray dd{ width: 100%; gap:5px} 
	.safe_w .diagram02 .style_bd-dot_blue dd>div:first-of-type:before{  margin-left: -20px} 
	.safe_w .diagram02 .style_bd-dot_blue dd>div:nth-of-type(2):before{  margin-left: 34px} 
	.safe_w .diagram02 dl.style_gray dd > div span.job1{ margin-left: -10px}
	.safe_w .diagram02 dl.style_gray dd > div span.job2{ margin-right: -15px}
}
@media screen and (max-width:767px){ 	
	.safe_w div[class$="_bx"] > .box, .safe_w .img_box{ padding: 30px 10px}  
	.safe_w .diagram01 > dl, .safe_w .diagram01 .group > dl{ flex-direction: column; gap:10px} 
	.safe_w .diagram01 > dl > dt.style_gray,.safe_w .diagram01 > dl > dd,.safe_w .diagram01 .group > dl >dt.style_gray,.safe_w .diagram01 .group > dl >dd{ width: 100% !important} 
	.safe_w .diagram01 > dl > dt.style_gray:before,.safe_w .diagram01 .group > dl >dt.style_gray:before{ display: none} 
	.safe_w .diagram01 .group > dl + dl{ margin-top: 20px} 
	.safe_w .diagram01 .group > dl ol{ padding-left: 0} 
	.safe_w .diagram01 .group > dl ol li{ display: flex} 
	.safe_w .diagram01 .group > dl:first-of-type{ display: block; flex-direction: row; gap:0; border-radius: 4px; background: rgb(0, 123, 203); overflow: hidden; margin-bottom: -10px; width: 100%; text-align: center; padding: 10px} 
	.safe_w .diagram01 .group > dl:first-of-type >.style_blue{ width: auto; border-radius: 0; display: inline; padding: 0} 
	.safe_w .diagram01 .group > dl:first-of-type >dd.style_blue:before{ content: "/"; display: inline !important} 
	.safe_w .diagram01 .style_bd-blue ul{ padding-left: 0} 
	.safe_w .diagram02{ max-width: 100%}
	.safe_w .diagram02 .style_d-blue{ width: 100%} 
	.safe_w .diagram02 .group{ padding: 0; gap:10px} 
	.safe_w .diagram02 .group .style_gray{ width:50%; padding: 20px 10px; display: flex; align-items: center; justify-content: center} 
	.safe_w .diagram02 .style_bd-dot_blue, .safe_w .diagram02 dl.style_gray{ flex-direction: column}
	.safe_w .diagram02 .style_bd-dot_blue dd>div{ word-break: break-all} 
	.safe_w .diagram02 dl.style_gray dd{ flex-direction: column} 
	.safe_w .diagram02 dl.style_gray dd > div{ width: 100%}
	.safe_w .diagram02 dl.style_gray dd > div span.job1, .safe_w .diagram02 dl.style_gray dd > div span.job2{ position: relative; left: auto; right: auto; transform: none; margin: 0;} 
	.safe_w .diagram02 *:before, .safe_w .diagram02 *:after{ display: none !important} 
	.safe_w .diagram02 dl.style_gray{ gap:10px; margin-top: 0} 
	.safe_w .diagram02 .group,.safe_w .diagram02 .style_bd-dot_blue{ margin-bottom: 20px; align-items: stretch} 
	.safe_w .diagram02 dl.style_gray dd > div{ display: block; } 
	.safe_w table th, .safe_w table td{ padding: 18px 5px} 
	.safe_w .img_box img{ max-width: 100%}
}

/* 혁신경영 */
.sure_w [class^=diagram0] > dl{ display: flex; gap:14px;} 
.sure_w [class^=diagram0] > dl + dl{ margin-top: 20px}
.sure_w .diagram01 > dl > dd {padding: 0 !important; }
.sure_w [class^=diagram0] > dl > dt.style_gray{ width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative } 
.sure_w [class^=diagram0] > dl > dt.style_gray + dd{ width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 17px} 
.sure_w [class^=diagram0] > dl > dt.style_gray + dd.style_d-blue{ font-size: 1.2857rem; display: flex; align-items: center; justify-content: center;padding: 16px 10px } 
.sure_w [class^=diagram0] > dl dt.style_blue{ border-radius: 4px 4px 0 0;font-size: 1.143rem;font-weight: 600; padding: 13px } 
.sure_w [class^=diagram0] > dl dd.style_bd-wh{ padding: 20px; font-weight: 500; border-radius: 0 0 4px 4px} 
.sure_w [class^=diagram0] .style_bd-blue{ border-radius: 4px; font-weight: 500;font-size: 1.143rem; padding: 12px 5px; color: #222 } 
.sure_w .diagram01 > dl > dt.style_gray + dd{ padding: 0} 
.sure_w .diagram01 > dl > dt.style_gray + dd { width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size: 1.143rem; text-align: center; padding: 17px; gap: 10px;}
.sure_w .diagram01 > dl > dt.style_gray + dd.style_d-blue {padding: 17px!important;justify-content: center;}
.sure_w .diagram01 > dl > dt.style_gray + dd div.style_bd-wh { width: 33.333%;font-size: 1rem; font-weight: 500; padding: 20px;text-align: left;}
.sure_w .diagram01 > dl dt.style_wh { border-radius: 4px 4px 0 0; font-size: 1.071rem; font-weight: 600; padding: 17px; border: 1px solid #d9d9d9;border-bottom-width: 0;}
.sure_w .diagram01 > dl dt.style_wh + dd.style_bg-gr { border-radius: 0 0 4px 4px; border: 1px solid #d9d9d9;border-top-width: 0;background-color: #f7f7f7;height: calc(100% - 50px); font-size: 1.071rem; font-weight: 500; padding: 20px 15px; }

.sure_w .diagram01 > dl:nth-of-type(3){ margin-top: 30px} 
.sure_w .diagram01 > dl:nth-of-type(3) dd{ display: flex; justify-content: space-between; gap:10px; } 
.sure_w .diagram01 > dl:nth-of-type(3) dd div{ width: 33.333%} 
.sure_w .diagram01 > dl:nth-of-type(4) >dd{ display: flex; justify-content: space-between; position: relative; } 
.sure_w .diagram01 > dl:nth-of-type(4) >dd dl{ width: calc(25% - 10px); margin-left: 10px; margin-bottom: 10px} 
.sure_w .diagram01 > dl:nth-of-type(4) >dd dl .style_blue{ font-size: 1.0714rem; padding: 3px; height: 50px; display: flex; align-items: center; justify-content: center; line-height: 1.3} 
.sure_w .diagram01 > dl:nth-of-type(4) >dd dl .style_bd-wh{ height: calc(100% - 50px); font-size: 1rem; font-weight: 500; padding: 20px 15px} 
.sure_w .diagram01 > dl:nth-of-type(4) >dd dl:first-of-type{ position: absolute; left:0; top: 0; margin-left: 0; width: 25%; height: 100% } 
.sure_w .diagram01 > dl:nth-of-type(4) >dd dl:nth-of-type(2), .sure_w .diagram01 > dl:nth-of-type(4) >dd dl:nth-of-type(5){ margin-left: 25%} 
.sure_w .diagram01 > dl:nth-of-type(4) >dd dl:nth-of-type(n+5){ margin-bottom: 0} 
.sure_w .diagram01 p{ font-weight: 500; font-size:1.1428rem; text-align: center; margin-bottom:30px } 
.sure_w .diagram01 p strong{ font-size: 1.428rem; color: #0253a5; font-weight: 600} 
.sure_w .diagram01 > dl li{ font-size: 1rem; color: #606060; font-weight:500} 
.sure_w .diagram01 > dl li:before{ margin-top: 10px} 

.sure_w .diagram02 > dl > dd{ display: flex; flex-wrap: wrap; justify-content: space-between; padding: 0 !important} 
.sure_w .diagram02 > dl > dd .style_bd-blue{ width: calc(50% - 5px); margin-bottom: 10px; font-weight: 400; color: #606060} 
.sure_w .diagram02 > dl > dd .style_bd-blue strong{ display: block; color: #222; font-weight: 600} 
.sure_w .diagram02 > dl > dd .group{ width: 100%; display: flex; justify-content: space-between; gap:10px;} 
.sure_w .diagram02 > dl > dd .group dl{ width: 25%} 
.sure_w .diagram02 > dl > dd .group dt{ padding: 3px 5px; display: flex; align-items: center; justify-content: center; height: 50px; font-size: 1.0714rem} 
.sure_w .diagram02 > dl > dd .group dl dd.style_bd-wh{ padding: 20px 15px; height: calc(100% - 50px)} 
.sure_w .diagram02 > dl > dd .group dl dd.style_bd-wh ul.list li{ font-size: 1rem; color: #606060; font-weight:500 } 
.sure_w .diagram02 > dl > dd .group dl dd.style_bd-wh ul.list li:before{ margin-top: 10px} 
.sure_w .diagram02 > dl > dd .style_d-blue{ width: 100%; margin-top: 50px; border-radius: 4px; font-size:1.2857rem; font-weight: 600; position: relative; padding: 16px 10px   } 
.sure_w .diagram02 > dl > dd .style_d-blue:before{ content: ""; width: 50px; height: 50px; display: block; background: url("../img/esg/arrow_big_g.svg") no-repeat 50% 50%; position: absolute; left: 50%; top: 0; transform: translate(-50%, -100%); background-size: 40px} 
.sure_w .diagram03 .style_d-blue{ width: 100%; margin-top: 50px; border-radius: 4px; font-size:1.2857rem; font-weight: 600; position: relative; padding: 16px 10px; display: flex; align-items: center; justify-content: center; max-width: 400px; margin: 0 auto 30px auto } 
.sure_w .diagram03 .group{ position: relative} 
.sure_w .diagram03 .group > dl{ display: flex; gap:15px; margin-top: 15px} 
.sure_w .diagram03 .group > dl > dt.style_gray{ width: 170px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative; flex-direction: column } 
.sure_w .diagram03 .group > dl > dt.style_gray span{ font-size:1.0714rem; font-weight: 500 } 
.sure_w .diagram03 .group > dl > dt.style_gray + dd{ width: calc(100% - 360px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 17px} 
.sure_w .diagram03 .group > dl:last-of-type > dd{ padding: 0 !important} 
.sure_w .diagram03 .group div.style_bd-blue{ width: 160px; position: absolute; right: 0; top: 0; height: 100%; display: flex; align-items: center; justify-content: center; font-size:1.0714rem; padding: 10px 20px; text-align: center} 
.sure_w .diagram03 .group p{ text-align: center; margin-top: 15px; height: 20px; position: relative} 
.sure_w .diagram03 .group p.topdn:after, .sure_w .diagram03 .group p.botup:before, .sure_w .diagram03 .group p.plus:before, .sure_w .diagram03 .group p.plus:after{ display: inline-block; width: 21px; height: 21px; content: ""; background: url("../img/esg/arrow_big_g.svg") no-repeat 50% 50%; background-size: 20px; vertical-align: middle; margin: 0 10px} 
.sure_w .diagram03 .group p.plus:before, .sure_w .diagram03 .group p.plus:after{ width:21px; height: 3px; border-radius: 2px; background: #d9d9d9; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(0deg)} 
.sure_w .diagram03 .group p.plus:after{ transform: translate(-50%, -50%) rotate(90deg)} 
.sure_w .diagram03 .group > dl dd.style_blue{ display: flex; align-items: center; justify-content: center; text-align: center} 
.sure_w .diagram03 .group > dl:last-of-type dl dt,.sure_w .diagram03 .group > dl:last-of-type dl dd{ padding: 17px 5px; border-radius: 4px 4px 0 0}
.sure_w .diagram03 .group > dl:last-of-type dl dd{ border-radius: 0 0 4px 4px; font-size: 1.0714rem; font-weight: 500} 
.sure_w .diagram04 .group{ display: flex; gap:65px; justify-content: space-between; position: relative} 
.sure_w .diagram04 dl{width:33.333%; } 
.sure_w .diagram04 .style_d-blue{  border-radius:4px 4px 0  0; font-size:1.1428rem; font-weight: 600; position: relative; padding: 12.5px 10px; display: flex; align-items: center; justify-content: center; max-width: 400px; margin: 0 ; display: flex} 
.sure_w .diagram04 .style_bd-dblue{ border: 1px solid #0253a5; border-radius: 0 0 4px 4px; padding: 20px 30px } 
.sure_w .diagram04 .style_bd-dblue li{ font-weight: 500} 
.sure_w .diagram04 .style_bd-dblue li:before{ width: 6px; height: 6px; margin-top: 9px; border-radius: 100%} 
.sure_w .diagram04 .group:first-of-type{ margin-bottom: 40px} 
.sure_w .diagram04 .group:first-of-type p{ position: absolute; left: 25%;  margin-left:3px; padding: 0; height: 100%; top: 20px } 
.sure_w .diagram04 .group:first-of-type p span{ display: block;  margin-left: 30px; width: 60px; text-align: center; line-height: 40px; font-size: 1rem; color: #222; font-weight: 600; padding-right: 10px; position: relative; height: 40px} 
.sure_w .diagram04 .group:first-of-type p span:before{ position: absolute; left: 0; top: 0; content: ""; display: block;background: url("../img/esg/arrow_txt.svg") no-repeat 0 0; background-size: 60px; height: 50px; width: 60px; z-index: -1 } 
.sure_w .diagram04 .group:first-of-type p span + span{ padding-right: 0; line-height: 56px } 
.sure_w .diagram04 .group:first-of-type p span + span:before{ transform: rotate(180deg); margin-left: -3px; } 
.sure_w .diagram04 .group:first-of-type p:last-of-type{left: auto; right: 25%; margin-left: 0; margin-right: 30px} 
.sure_w .diagram04 .group+.group > dl{ display: flex; gap:15px; margin-top: 15px; width: 100%; justify-content: space-between} 
.sure_w .diagram04 .group+.group > dl> dt{} 
.sure_w .diagram04 .group+.group > dl .style_gray{ width: 110px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative; height: 60px} 
.sure_w .diagram04 .group+.group > dl .style_gray + .style_gray{ margin-top: 5px; height: calc(100% - 65px)} 
.sure_w .diagram04 .group+.group > dl .style_gray span{ font-size:1.0714rem; font-weight: 500 } 
.sure_w .diagram04 .group+.group > dl > dd{ width: calc(100% - 110px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 17px; display: flex; justify-content: space-between; padding: 0 !important; gap:10px} 
.sure_w .diagram04 .group+.group > dl > dd dt{ height: 60px; padding: 5px; background:#007bcb; color: #fff; line-height: 1.3; display: flex; justify-content: center; align-items: center; border-radius: 4px 4px 0 0; font-size:1.0714rem } 
.sure_w .diagram04 .group+.group > dl > dd dd{ padding: 20px 15px; border: 1px solid #e1e1e1; border-width: 0 1px 1px 1px; border-radius: 0 0 4px 4px} 
.sure_w .diagram04 .group+.group > dl > dd dd li{ font-size: 1rem; font-weight: 500} 
.sure_w .diagram05{ width: 883px; margin: 0 auto} 
.sure_w .diagram05 .group{ gap:60px; display: flex; justify-content: space-between} 
.sure_w .diagram05 .group > dl{  width: 230px; position: relative} 
.sure_w .diagram05 .group > dl:first-of-type{ width: calc(100% - 230px)} 
.sure_w .diagram05 .style_d-blue{ width: 100%; border-radius: 4px; font-size:1.2857rem; font-weight: 600; position: relative; padding: 16px 10px; display: flex; align-items: center; justify-content: center; max-width: 440px; margin: 30px auto} 
.sure_w .diagram05 .style_d-blue + .group > dl{ width: 33.333% !important; position: relative} 
.sure_w .diagram05 .group > dl dt.style_blue{ border-radius: 4px 4px 0 0; display: flex; justify-content: center; align-items: center; font-size: 1.142rem; font-weight: 600; padding: 13px 10px;text-align: center} 
.sure_w .diagram05 .group > dl .style_bd-wh{ padding: 25px; display: flex; gap:20px; } 
.sure_w .diagram05 .group > dl .style_bd-wh ul{ flex-basis: 100%; text-align: center} 
.sure_w .diagram05 .group > dl .style_bd-wh ul li.style_bd-blue{ font-weight: 600} 
.sure_w .diagram05 .group > dl .style_bd-wh ul li{ border-radius: 4px; text-align: center; font-size:1.0714rem; padding: 13px 10px; font-weight: 500; position: relative} 
.sure_w .diagram05 .group > dl .style_bd-wh ul li+li{ margin-top: 15px;} 
.sure_w .diagram05 .group > dl .style_bd-wh ul li+li:before{ content: ""; display: block; position: absolute; width: 30px; height: 15px; left: 50%; top: 0; transform: translate(-50%, -100%) rotate(90deg); background: url("../img/esg/arrow_g.svg") no-repeat 50% 50%; background-size:8px; } 
.sure_w .diagram05 .group > dl .style_bd-wh ul li.style_bd-blue + li:before{ display: none} 
.sure_w h5.style_bd-blue{ margin: 0 auto 30px auto; width: 240px; padding:10px 10px; color: #0253a5; font-size: 1.2857rem; font-weight: 600; text-align: center; border-radius: 10px } 
.sure_w .diagram05 .group:first-of-type > dl:after{ position: absolute; left: 50%; bottom:0; height: 30px; width: 1px;  background:#e1e1e1; display: block; content: ""; transform: translate(100%, 100%); z-index: -1} 
.sure_w .diagram05 .group > dl:last-of-type:after{ height: 60px} 
.sure_w .diagram05 .style_d-blue:before{position: absolute; left: auto; right:0; top:50%; height: 1px; width: 232px;  background:#e1e1e1; display: block; content: ""; transform: translate(50%, -50%); z-index: -1} 

.sure_w .diagram05 .style_d-blue + .group > dl:before{ width:50%; height: 50px; border: 1px solid #e1e1e1; border-width: 1px 0 0 1px; display: block; position: absolute; left: 50%; top: 0; transform: translate(0, -100%); content: ""; z-index: -1} 
.sure_w .diagram05 .style_d-blue + .group > dl:last-of-type:before{transform: translate(-100%, -100%); border-width: 1px 1px 0 0} 
.sure_w .diagram06{ display: flex; gap:55px; justify-content: space-between} 
.sure_w .diagram06 > div{ width: 50%} 
.sure_w .diagram06 > div >dl{ display: flex; gap:15px}
.sure_w .diagram06 > div >dl + dl{ margin-top: 20px} 
.sure_w .diagram06 > div >dl > dt{ width: 100px; border-radius: 4px; display: flex; justify-content: center; align-items: center;font-size: 1.0714rem; font-weight: 600; color: #222} 
.sure_w .diagram06 > div >dl > dd{ width: calc(100% - 100px); text-align: center; font-size: 1.0714rem; font-weight: 600} 
.sure_w .diagram06 > div >dl > dd li{ border-radius: 4px; text-align: center; font-size:1.0714rem; padding: 13px 10px; position: relative} 
.sure_w .diagram06 > div >dl > dd li + li{ margin-top: 20px}  
.sure_w .diagram06 > div >dl > dd li:before{content: ""; display: block; position: absolute; width: 30px; height: 20px; left: 50%; top: 0; transform: translate(-50%, -100%) rotate(90deg); background: url("../img/esg/arrow_g.svg") no-repeat 50% 50%; background-size:8px;} 
.sure_w .diagram06 > div >dl:first-of-type > dd li:first-of-type:before{ display: none} 
.sure_w .diagram06 > div:last-of-type{ display: flex; flex-direction: column; justify-content: space-between; gap:44px; height: 100%; position: relative} 
.sure_w .diagram06 > div:last-of-type dl{ flex-direction: row-reverse}  
.sure_w .diagram06 > div:last-of-type dl dd ul{ display: flex; justify-content: space-between; flex-direction: column; height: 100% } 
.sure_w .diagram06 > div:last-of-type dl dd li{ height: 80px; display: flex; align-items: center; text-align: center; justify-content: center} 
.sure_w .diagram06 > div:last-of-type > dl{ height: 204px} 
.sure_w .diagram06 > div:last-of-type > dl:last-of-type{ height: 81px; margin-top: 0} 
.sure_w .diagram06 > div:last-of-type dl dd li:before{ height: 44px} 
.sure_w .diagram06 > div:last-of-type:before{ content: ""; display: block; position: absolute; left: 0; top: 40px; height: calc(100% - 65px); border: 1px solid #00a6e7; width:30px; transform: translate(-25px, 0); border-width: 1px 0 0 1px} 
.sure_w .diagram06 > div:first-of-type >dl:last-of-type > dd li:last-of-type:after{content: ""; display: block; position: absolute; right: 0; top: 50%; height:1px; background:  #00a6e7; width:31px; transform: translate(100%, -50%);left: auto} 
@media screen and (max-width:1023px){ 
.sure_w div[class$="_bx"] > .box{ padding: 50px 30px} 
	.sure_w .diagram04, .sure_w .diagram05{ max-width:650px; margin: 0 auto } 
	.sure_w .diagram04 .style_bd-dblue{ padding: 20px 15px} 
	.sure_w .diagram04 .group{gap:50px} 
	.sure_w .diagram04 .group:first-of-type p{ z-index: 1; height: 80px; top: 30px} 
	.sure_w .diagram04 .group:first-of-type p span{ margin-left:15px} 
	.sure_w .diagram04 .group:first-of-type p span + span{ margin-top: -10px} 
	.sure_w .diagram04 .group:first-of-type p:last-of-type{ margin-right: 13px} 
	.sure_w .diagram04 .group+.group > dl > dd dd{ padding: 20px 10px} 
	.sure_w .diagram05 .group{ gap:20px} 
	.sure_w .diagram05 .group > dl .style_bd-wh{ padding: 25px 10px} 
	.sure_w .diagram05 .group > dl:last-of-type:after{ left: 40%} 
	.sure_w .diagram05 .style_d-blue:before{ display: none} 
	.sure_w .diagram05 .style_d-blue + .group > dl:before{ left: 60%; border-top: 0} 
	.sure_w .diagram05 .style_d-blue + .group > dl:last-of-type:before{ left: 40%; border-top: 0} 
	.sure_w .diagram06{ gap:40px} 
	.sure_w .diagram06 > div >dl > dt{ width: 80px; text-align: center} 
	.sure_w .diagram06 > div >dl{ gap:10px} 
	.sure_w .diagram06 > div >dl > dd{    width: calc(100% - 80px);} 
	.sure_w .diagram06 > div:last-of-type:before{transform: translate(-20px, 0);} 
	.sure_w .diagram06 > div:first-of-type >dl:last-of-type > dd li:last-of-type:before{ width: 21px} 
}
@media screen and (max-width:767px){ 
	.sure_w div[class$="_bx"] > .box, .sure_w .img_box{ padding: 30px 10px}  
	.sure_w [class^=diagram0] > dl > dt.style_gray{ width: 80px; text-align: center} 
	.sure_w [class^=diagram0] > dl > dt.style_gray + dd{width: calc(100% - 80px);} 
	.sure_w .diagram01 > dl:nth-of-type(3) > dt.style_gray + dd, .sure_w .diagram01 > dl:nth-of-type(4) > dt.style_gray + dd{ flex-direction: column} 
	.sure_w .diagram01 > dl:nth-of-type(4) > dt.style_gray + dd{ gap:10px} 
	.sure_w .diagram01 > dl:nth-of-type(3) dd div{ width: 100%} 
	.sure_w .diagram01 > dl:nth-of-type(4) >dd dl{ width: 100% !important; position: relative !important; height: auto !important; left: auto; top: auto; margin: 0 !important } 
	.sure_w .diagram01 > dl > dt.style_gray + dd div.style_bd-wh {width: 100%;}
	
	.sure_w .diagram02 > dl > dd .group{ flex-direction: column} 
	.sure_w .diagram02 > dl > dd .group dl{ width: 100%} 
	.sure_w .diagram02 > dl > dd .style_bd-blue{ display: flex; align-items: center; justify-content: center; flex-direction: column } 
	.sure_w .diagram03 .style_d-blue{ text-align: center; padding: 15px 20px; margin-bottom: 20px} 
	.sure_w .diagram03 .group > dl{ gap:5px} 
	.sure_w .diagram03 .group > dl > dt.style_gray{ width: 100px;  text-align: center} 
	.sure_w .diagram03 .group > dl > dt.style_gray + dd{width: calc(100% - 100px);} 
	.sure_w .diagram03 .group div.style_bd-blue{ position: relative; width: 100%; right: auto; top: auto; margin-top: 20px} 
	.sure_w .diagram04 .group:first-of-type{ flex-direction: column; gap:5px; margin: 0} 
	.sure_w .diagram04 dl{ width: 100%} 
	.sure_w .diagram04 .group:first-of-type p{ position: relative; left: auto !important; right: auto !important;top: auto; margin: 0 auto !important; height: auto; display: flex } 
	.sure_w .diagram04 .group:first-of-type p span{ margin: 0} 
	.sure_w .diagram04 .group:first-of-type p span:before{ transform: rotate(90deg)} 
	.sure_w .diagram04 .group:first-of-type p span + span:before{transform: rotate(270deg)} 
	.sure_w .diagram04 .group+.group > dl dt{ display: none} 
	.sure_w .diagram04 .group+.group > dl > dd{ width: 100%; flex-direction: column} 
	.sure_w .diagram_bx ul.list li:before{ margin-top: 9px} 
	.sure_w .diagram04, .sure_w .diagram05{ width: 100%} 
	.sure_w .diagram05 .group{ flex-direction: column} 
	.sure_w .diagram05 .group > dl, .sure_w .diagram05 .style_d-blue + .group > dl{ width: 100% !important} 
	.sure_w .diagram05 .group > dl .style_bd-wh{ gap:5px; background: #fff; padding: 10px} 
	.sure_w .diagram05 .group > dl .style_bd-wh ul li.style_bd-blue{ height: 70px; display: flex; align-items: center; justify-content: center} 
	.sure_w .diagram05 .group:first-of-type > dl:after{ display: none} 
	.sure_w .diagram05 .group > dl{} 
	.sure_w .diagram06{ flex-direction: column; gap:30px} 
	.sure_w .diagram06 > div{ width: 100%} 
	.sure_w .diagram06 > div:last-of-type dl{ flex-direction: row} 
	.sure_w .diagram06 > div:last-of-type:before{ display: none} 
	.sure_w .diagram06 > div:first-of-type >dl:last-of-type > dd li:last-of-type:after{ right: 50%; top: auto; bottom:0; transform: translate(0, 100%); width: 1px; height: 30px} 
	.sure_w .diagram06 > div:last-of-type > dl{ height: auto} 
	.sure_w .diagram06 > div:last-of-type{ gap:20px} 
	.sure_w .diagram06 > div:last-of-type dl dd li:before{ height: 20px} 
	.sure_w .diagram06 > div:last-of-type dl dd li, .sure_w .diagram06 > div:last-of-type > dl:last-of-type{ height: auto} 
}

/* 적극행정 */

.active_w .table_box table thead th, .active_w .table_box table tbody td{border-left: 1px solid #d9d9d9; text-align: center }
.active_w .table_box table thead th:first-of-type, .active_w .table_box table tbody tr th:first-of-type{ border-left: none} 
.active_w [class^=diagram0] > dl{ display: flex; gap:83px;} 
.active_w [class^=diagram0] > dl + dl{ margin-top: 20px} 
.active_w [class^=diagram0] > dl > dt.style_gray{ width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative } 
.active_w [class^=diagram0] > dl > dt.style_gray + dd{ width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 17px} 
.active_w [class^=diagram0] > dl > dt.style_gray + dd.style_d-blue{ font-size: 1.2857rem; display: flex; align-items: center; justify-content: center;padding: 16px 10px } 
.active_w [class^=diagram0] > dl dt.style_blue{ border-radius: 4px 4px 0 0;font-size: 1.143rem;font-weight: 600; padding: 13px } 
.active_w [class^=diagram0] > dl dd.style_bd-wh{ padding: 20px; font-weight: 500; border-radius: 0 0 4px 4px} 
.active_w [class^=diagram0] .style_bd-blue{ border-radius: 4px; font-weight: 500;font-size: 1.143rem; padding: 12px 5px; color: #222 } 
.active_w [class^=diagram0] > dl > dt.style_gray:before{ width:83px; height:15px; background: url("../img/esg/arrow_long_b.svg") no-repeat 50% 50%; background-size: 40px; content: ""; position: absolute; right: 0; top: 50%; transform: translate(100%, -50%);} 
.active_w .diagram01 > dl+dl{ margin-top: 50px}
.active_w .diagram01 > dl:nth-of-type(2) > dd{ padding: 0 !important; position: relative} 
.active_w .diagram01 > dl:nth-of-type(2) > dd:before{ position: absolute; left: 50%; top: 0; width:50px; height:50px; content: ""; background: url("../img/esg/arrow_big_g.svg") no-repeat 50% 50%; background-size: 40px; transform: translate(-50%, -100%)} 
.active_w .diagram01 > dl:nth-of-type(2) dd dl{ display: flex} 
.active_w .diagram01 > dl:nth-of-type(2) dd dl dt{ width: 200px; border-radius: 4px 0 0 4px; display: flex; align-items: center; justify-content: center} 
.active_w .diagram01 > dl:nth-of-type(2) dd dl dd{ width: calc(100% - 200px); border-radius: 0 4px 4px 0; border-left: 0; text-align: left; padding: 20px 20px 20px 30px; font-size: 1.0714rem; font-weight: 500}
.active_w .diagram01 > dl:nth-of-type(2) dd dl+dl{ margin-top: 10px} 
.active_w .diagram01 > .group{ margin-top: 50px; display: flex; justify-content: space-between; gap:37px} 
.active_w .diagram01 > .group dl{ width: 33.3333%; position: relative } 
.active_w .diagram01 > .group dl:before{ content: ""; width: 37px; height: 37px; position: absolute; right: 0; top: 50%; transform: translate(100%,-50%); display: block; background: url("../img/esg/arrow_g.svg") no-repeat 50% 50%; background-size: 8px } 
.active_w .diagram01 > .group dl:last-of-type:before{ display: none} 
.active_w .diagram01 > .group dl dt{ border-radius: 4px 4px 0 0; background: #777; color: #fff; font-size:1.1428rem; padding: 13px 5px; font-weight: 600; display: flex; align-items: center; justify-content: center} 
.active_w .diagram01 > .group dl dt.style_red{ background:#d54400 } 
.active_w .diagram01 > .group dl dd.style_bd-wh{ border-radius: 0 0 4px 4px; border-top: 0; padding: 20px } 
.active_w .diagram01 > .group dl dd.style_bd-wh ul{ padding-left: 15px; font-weight: 500} 
.active_w .diagram01 > .group dl dd.style_bd-wh ul li:before{ width: 6px; height: 6px; border-radius: 100%; margin-top: 9px} 
.active_w .diagram01 > .group dl dd.style_bd-wh ul li + li{ margin-top: 3px} 
.active_w h5{ margin-top: 40px; color:#222; font-size: 1.142rem; font-weight: 600; margin-bottom: 20px } 

@media screen and (max-width:1023px){ 
	.active_w [class^=diagram0] > dl{ gap:60px} 
	.active_w [class^=diagram0] > dl > dt.style_gray{ width: 150px} 
	.active_w [class^=diagram0] > dl > dt.style_gray + dd {	width: calc(100% - 150px);}
	.active_w .diagram01 > dl:nth-of-type(2) dd dl dt{ width: 130px} 
	.active_w .diagram01 > dl:nth-of-type(2) dd dl dd{    width: calc(100% - 130px);} 
	.active_w [class^=diagram0] > dl > dt.style_gray:before{ width: 60px} 
	.active_w .diagram01 > .group{ gap:15px} 
	.active_w .diagram01 > .group dl dd.style_bd-wh{ padding: 20px 15px} 
	.active_w .diagram01 > .group dl dd.style_bd-wh ul{ padding-left: 0} 
	.active_w .diagram01 > .group dl:before{ width: 15px; } 
}

@media screen and (max-width:767px){ 
	.active_w div[class$="_bx"] > .box, .active_w .img_box{ padding: 30px 10px}  
	.active_w [class^=diagram0] > dl{ flex-direction: column; gap:10px} 
	.active_w [class^=diagram0] > dl > dt.style_gray:before{ display: none} 
	.active_w [class^=diagram0] > dl > dt.style_gray, .active_w [class^=diagram0] > dl > dt.style_gray + dd{ width: 100%} 
	.active_w .diagram01 > dl:nth-of-type(2) > dd:before{ top:-52px} 
	.active_w .diagram01 > dl:nth-of-type(2) dd dl dt{ width: 100px} 
	.active_w .diagram01 > dl:nth-of-type(2) dd dl dd{width: calc(100% - 100px); padding: 20px 10px} 
	.active_w .diagram01 > .group dl dd.style_bd-wh{ padding: 20px 8px} 
	.active_w .diagram01 > .group{ gap:5px; flex-direction: column} 
	.active_w .diagram01 > .group{ margin-top: 30px} 
	.active_w .diagram01 > .group dl{ width: 100%}
	.active_w .table_box table thead th, .active_w .table_box table tbody td, .active_w .table_box table tbody th{ padding-left: 5px; padding-right: 5px} 
	.active_w .table_box table tbody td{ padding-left: 8px} 
	.active_w .diagram01 > dl+dl{ margin-top: 30px} 
	.active_w .diagram01 > dl:nth-of-type(2) > dd:before{ height: 30px; background-size: 30px} 
	.active_w .diagram01 > .group dl:before{ display: none} 
}



/* 윤리경영 */
.moral_w .table_box table thead th, .moral_w .table_box table tbody td{border-left: 1px solid #d9d9d9; text-align: center }
.moral_w .table_box table thead th:first-of-type, .moral_w .table_box table tbody tr th:first-of-type{ border-left: none} 
.moral_w [class^=diagram0] > dl{ display: flex; gap:83px;} 
.moral_w [class^=diagram0] > dl + dl{ margin-top: 20px} 
.moral_w [class^=diagram0] > dl > dt.style_gray{ width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative } 
.moral_w [class^=diagram0] > dl > dt.style_gray + dd{ width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 17px} 
.moral_w [class^=diagram0] > dl > dt.style_gray + dd.style_d-blue{ font-size: 1.2857rem; display: flex; align-items: center; justify-content: center;padding: 16px 10px } 
.moral_w [class^=diagram0] > dl dt.style_blue{ border-radius: 4px 4px 0 0;font-size: 1.143rem;font-weight: 600; padding: 13px } 
.moral_w [class^=diagram0] > dl dd.style_bd-wh{ padding: 20px; font-weight: 500; border-radius: 0 0 4px 4px} 
.moral_w [class^=diagram0] .style_bd-blue{ border-radius: 4px; font-weight: 500;font-size: 1.143rem; padding: 12px 5px; color: #222 } 
.moral_w [class^=diagram0] > dl > dt.style_gray:before{ width:83px; height:15px; background: url("../img/esg/arrow_long_b.svg") no-repeat 50% 50%; background-size: 40px; content: ""; position: absolute; right: 0; top: 50%; transform: translate(100%, -50%);} 
.moral_w .diagram01 > dl+dl{ margin-top: 50px}
.moral_w .diagram01 > dl:nth-of-type(2) > dd{ padding: 0 !important; position: relative} 
.moral_w .diagram01 > dl:nth-of-type(2) > dd:before{ position: absolute; left: 50%; top: 0; width:50px; height:50px; content: ""; background: url("../img/esg/arrow_big_g.svg") no-repeat 50% 50%; background-size: 40px; transform: translate(-50%, -100%)} 
.moral_w .diagram01 > dl:nth-of-type(2) dd li{ border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size:1.1428rem; font-weight: 500; padding: 13px 10px} 
.moral_w .diagram01 > dl:nth-of-type(2) dd li+li{ margin-top: 10px} 
.moral_w .diagram01 h5{ font-size: 1.2857rem; margin-top: 40px; color:#222; font-weight: 600; margin-bottom: 20px} 
.moral_w .diagram01 > .group{ margin-top: 0px; display: flex; justify-content: space-between; gap:37px} 
.moral_w .diagram01 > .group dl{ width: 33.3333%; position: relative } 
.moral_w .diagram01 > .group dl:before{ content: ""; width: 37px; height: 37px; position: absolute; right: 0; top: 50%; transform: translate(100%,-50%); display: block; background: url("../img/esg/arrow_g.svg") no-repeat 50% 50%; background-size: 8px } 
.moral_w .diagram01 > .group dl:last-of-type:before{ display: none} 
.moral_w .diagram01 > .group dl dt{ border-radius: 4px 4px 0 0; background: #777; color: #fff; font-size:1.1428rem; padding: 13px 5px; font-weight: 600; display: flex; align-items: center; justify-content: center} 
.moral_w .diagram01 > .group dl dt.style_red{ background:#d54400 } 
.moral_w .diagram01 > .group dl dd.style_bd-wh{ border-radius: 0 0 4px 4px; border-top: 0; padding: 20px; font-weight: 500; font-size: 1.2857rem;  text-align: center } 
.moral_w .txt_bx p strong{ color: #222; font-weight: 600}
.moral_w .diagram_bx .table_box + ul.list{ margin: 30px 0 20px} 
.moral_w .diagram_bx .table_box + ul.list li{ color: #222; font-weight: 500} 
.moral_w .diagram_bx .table_box + ul.list li + li{ margin-top: 8px} 
.moral_w .diagram02{ margin: 0 auto; } 

.moral_w .diagram02{ display: flex; flex-direction: column; align-items: center; }
.moral_w .diagram02  [class^=style_]{ border-radius: 4px; height: 60px; display: flex; justify-content: center; align-items: center; font-size: 1.143rem; font-weight: 600} 
.moral_w .diagram02 .style_d-blue{ font-size: 1.429rem; position: relative; width:280px; margin-bottom: 80px } 
.moral_w .diagram02 .style_d-blue:after{content: ""; width: 1px; height: 220px; background:#e1e1e1; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 100%); z-index: -1 } 
.moral_w .diagram02 .group{ display: flex; gap:36px; position: relative} 
.moral_w .diagram02 .group:before{ content: ""; display: block; width:66%; height: 200px; left: 50%; top: 0; transform: translate(-50%, -30px); border: 1px solid #e1e1e1; position: absolute; z-index: -1; border-bottom: 0} 
.moral_w .diagram02 .group dl{ width: 33.333%} 
.moral_w .diagram02 .group dl dt.style_blue{ height: 50px; border-radius: 4px 4px 0 0} 
.moral_w .diagram02 .group dl dd.style_bd-wh{ background: #fff; border-radius: 0 0 4px 4px; border-top: 0; font-weight: 500; font-size: 1.0714rem} 
.moral_w .diagram02 .group dl dd.style_gray{ margin-top:15px; font-weight: 500; font-size: 1.0714rem; padding:10px 20px; text-align: center; height: auto; min-height: 80px; display: flex; align-items: center; justify-content: center } 

@media screen and (max-width:1023px){ 
	.moral_w [class^=diagram0] > dl{ gap:60px} 
	.moral_w [class^=diagram0] > dl > dt.style_gray{ width: 150px} 
	.moral_w [class^=diagram0] > dl > dt.style_gray + dd {	width: calc(100% - 150px);}
	.moral_w [class^=diagram0] > dl > dt.style_gray:before{ width: 60px} 
	.moral_w .diagram01 > .group{ gap:15px} 
	.moral_w .diagram01 > .group dl dd.style_bd-wh{ padding: 20px 15px} 
	.moral_w .diagram01 > .group dl dd.style_bd-wh ul{ padding-left: 0} 
	.moral_w .diagram01 > .group dl:before{ width: 15px; } 
}

@media screen and (max-width:767px){ 
	.moral_w div[class$="_bx"] > .box, .moral_w .img_box{ padding: 30px 10px}  
	.moral_w [class^=diagram0] > dl{ flex-direction: column; gap:10px} 
	.moral_w [class^=diagram0] > dl > dt.style_gray:before{ display: none} 
	.moral_w [class^=diagram0] > dl > dt.style_gray, .moral_w [class^=diagram0] > dl > dt.style_gray + dd{ width: 100%} 
	.moral_w .diagram01 > dl:nth-of-type(2) > dd:before{ top:-52px} 
	
	.moral_w .diagram01 > .group dl dd.style_bd-wh{ padding: 20px 8px} 
	.moral_w .diagram01 > .group{ gap:5px; flex-direction: column} 
	.moral_w .diagram01 > .group{ margin-top: 30px} 
	.moral_w .diagram01 > .group dl{ width: 100%}
	.moral_w .table_box table thead th, .moral_w .table_box table tbody td, .moral_w .table_box table tbody th{ padding-left: 5px; padding-right: 5px} 
	.moral_w .table_box table tbody td{ padding-left: 8px} 
	.moral_w .diagram01 > dl+dl{ margin-top: 30px} 
	.moral_w .diagram01 > dl:nth-of-type(2) > dd:before{ height: 30px; background-size: 30px} 
	.moral_w .diagram01 > .group dl:before{ display: none} 
	.moral_w .table_box table colgroup{ display: none} 
	.moral_w .diagram02 .style_d-blue{ width: 100%; max-width: 280px} 
	.moral_w .diagram02 .group{ gap:5px} 
	.moral_w .diagram02 .group dl dt.style_blue{ word-break: break-all; text-align: center} 
	.moral_w .diagram02 .group dl dd.style_gray{ padding: 10px 5px} 
}

/* 반부패청렴 */
.upright_w .table_box table thead th, .upright_w .table_box table tbody td{border-left: 1px solid #d9d9d9; text-align: center }
.upright_w .table_box table thead th:first-of-type, .upright_w .table_box table tbody tr th:first-of-type{ border-left: none} 
.upright_w [class^=diagram0] > dl{ display: flex; gap:43px;} 
.upright_w [class^=diagram0] > dl + dl{ margin-top: 20px} 
.upright_w [class^=diagram0] > dl > dt.style_gray{ width: 180px; border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size: 1.143rem; color: #222; font-weight: 600; position: relative } 
.upright_w [class^=diagram0] > dl > dt.style_gray + dd{ width: calc(100% - 180px); border-radius: 4px; font-weight: 600; font-size:1.143rem; text-align: center; padding: 17px} 
.upright_w [class^=diagram0] > dl > dt.style_gray + dd.style_d-blue{ font-size: 1.2857rem; display: flex; align-items: center; justify-content: center;padding: 16px 10px } 
.upright_w [class^=diagram0] > dl dt.style_blue{ border-radius: 4px 4px 0 0;font-size: 1.143rem;font-weight: 600; padding: 13px } 
.upright_w [class^=diagram0] > dl dd.style_bd-wh{ padding: 20px; font-weight: 500; border-radius: 0 0 4px 4px} 
.upright_w [class^=diagram0] .style_bd-blue{ border-radius: 4px; font-weight: 500;font-size: 1.143rem; padding: 12px 5px; color: #222 } 
.upright_w [class^=diagram0] > dl > dt.style_gray:before{ width:23px; height:15px; background: url("../img/esg/arrow_long_b.svg") no-repeat 100% 50%; background-size: 40px; content: ""; position: absolute; right: -10px; top: 50%; transform: translate( 100%, -50%); overflow: hidden; } 
.upright_w .diagram01 > dl > dt.style_gray + dd.style_d-blue{ display: block; padding: 50px 10px 20px } 
.upright_w .diagram01 > dl > dt.style_gray + dd.style_d-blue strong{ color: #fff600; font-weight: 600} 
.upright_w .diagram01 span.clean{ font-size: 0; line-height: 0; position: relative; display: inline-block; vertical-align: middle; width:23px } 
.upright_w .diagram01 span.clean:before{ background: url("../img/esg/integrity_clean.png") no-repeat 0 0; content: ""; position: absolute; width: 60px; height: 60px; background-size: 54px; display: block; position: absolute; left: 0; top: 0; transform: translate(0, -70%)} 
.upright_w .diagram01 > dl:nth-of-type(2) > dd, .upright_w .diagram01 > dl:nth-of-type(3) > dd{ padding: 0 !important} 
.upright_w .diagram01 > dl:nth-of-type(2) dd p{ border-radius: 4px; display: flex; align-items: center; justify-content: center; font-size:1.1428rem; font-weight: 600; padding: 13px 10px} 
.upright_w .diagram01 > dl:nth-of-type(2) dd p+p{ margin-top: 10px} 
.upright_w .diagram01 > dl:nth-of-type(3) dd{ display: flex; gap:10px} 
.upright_w .diagram01 > dl:nth-of-type(3) dd dl{ width: 33.333%} 
.upright_w .diagram01 > dl:nth-of-type(3) dd .style_blue{ border-radius: 4px 4px 0 0; font-size: 1.0714rem; font-weight: 500; height: 60px; padding: 5px 40px; display: flex; align-items: center; justify-content: center; line-height: 1.3 } 
.upright_w .diagram01 > dl:nth-of-type(3) dd .style_bd-wh{ border-radius: 0 0 4px 4px; padding: 20px 15px 30px 15px;} 
.upright_w .diagram01 > dl:nth-of-type(3) dd .style_bd-wh li{ font-size: 1rem; font-weight:400} 
.upright_w .diagram03 dl{ gap:25px} 
.upright_w .diagram03 > dl > dt.style_gray:before{ display: none} 
.upright_w .diagram03 > dl > dt.style_gray{ width:140px } 
.upright_w .diagram03 > dl > dd{ padding: 0 !important;width: calc(50% - 70px) !important;} 
.upright_w .diagram03 > dl > dd.style_d-blue{ padding: 16px 10px !important; font-weight: 600; font-size:1.1428rem !important; display: flex; justify-content: center; align-items: center; border-radius: 4px } 
.upright_w .diagram03 > dl .style_blue{padding: 16px 10px !important; font-weight: 600; font-size:1.1428rem !important; display: flex; justify-content: center; align-items: center;border-radius: 4px} 
.upright_w .diagram03 > dl:nth-of-type(3) dd, .upright_w .diagram03 > dl:nth-of-type(4) dd{ flex-wrap: wrap; display: flex; justify-content: center} 
.upright_w .diagram03 > dl:nth-of-type(3) dd .style_bd-blue, .upright_w .diagram03 > dl:nth-of-type(4) dd .style_gray{ width: calc(50% - 5px); display: flex; align-items: center; justify-content: center; padding: 10px 30px; text-align: center; margin-bottom: 10px; font-size: 1.0714rem; line-height: 1.3} 
.upright_w .diagram03 > dl:nth-of-type(3) dd .style_bd-blue:nth-of-type(n+3), .upright_w .diagram03 > dl:nth-of-type(4) dd .style_gray:nth-of-type(n+3){ margin-bottom: 0} 
.upright_w .diagram03 > dl:nth-of-type(3) dd .style_bd-blue:nth-of-type(2n), .upright_w .diagram03 > dl:nth-of-type(4) dd .style_gray:nth-of-type(2n){ margin-left: 10px} 
.upright_w .diagram03 > dl:nth-of-type(4) dd .style_gray{ text-align: left; font-size: 1rem; font-weight: 400; padding: 10px 15px; border-radius: 4px; flex-direction: column; align-items: flex-start} 
.upright_w .diagram03 > dl:nth-of-type(4) dd .style_gray p, .upright_w .diagram03 > dl:nth-of-type(5) > dd p{ display: block; padding-left: 12px; position: relative; text-align: left;font-size: 1rem; font-weight: 400;} 
.upright_w .diagram03 > dl:nth-of-type(4) dd .style_gray p:before, .upright_w .diagram03 > dl:nth-of-type(5) > dd p:before{width: 3px; height: 3px; display: block; background: #606060; content: "";  position: absolute; left: 0; top: 9px} 
.upright_w .diagram03 > dl:nth-of-type(5) > dd{ display: flex; gap: 10px; justify-content: space-between} 
.upright_w .diagram03 > dl:nth-of-type(5) > dd dl{ width: 50%} 
.upright_w .diagram03 > .group{ border: 1px dashed #e1e1e1; padding:15px; border-radius: 10px; margin-top: 30px } 
.upright_w .diagram03 > .group > dl{margin-top: 20px;gap: 25px;display: flex; margin: 0} 
.upright_w .diagram03 > .group > dl > dt{ width: 140px;display: flex; align-items: center;justify-content: center;font-size: 1.143rem;color: #222;font-weight: 600; } 
.upright_w .diagram03 > .group > dl > dd{padding: 0 !important; width: calc(50% - 70px) !important; }
.upright_w .diagram03 > .group > dl > dd dl{display: flex; justify-content: space-between; border-radius: 4px; overflow: hidden; gap:0} 
.upright_w .diagram03 > .group > dl > dd dl dt{ width: 60px; background: #777777; color: #fff; font-weight: 600; font-size: 1.0714rem; text-align: center; padding: 15px}  
.upright_w .diagram03 > .group > dl > dd dl dd{ padding: 15px; background: #f0f0f0; font-size: 1.0714rem; font-weight: 500; text-align: center; width: calc(100% - 60px) } 
@media screen and (max-width:1023px){ 
.upright_w div[class$="_bx"] > .box{ padding: 50px 30px} 
	.upright_w .diagram01 > dl > dt.style_gray{ width: 140px; text-align: center } 
	.upright_w .diagram01 > dl > dt.style_gray + dd{    width: calc(100% - 140px);} 
	.upright_w .diagram03 > dl > dt.style_gray, .upright_w .diagram03 > .group > dl > dt{ width: 100px} 
	.upright_w .diagram03 dl, .upright_w .diagram03 > .group > dl{ gap:15px}
	.upright_w .diagram03 > dl:nth-of-type(3) dd .style_bd-blue, .upright_w .diagram03 > dl:nth-of-type(4) dd .style_gray{ padding: 10px} 
	.upright_w [class^=diagram0] > dl dd.style_bd-wh{ padding: 20px 10px} 
	.upright_w .diagram03 > dl > dd, .upright_w .diagram03 > .group > dl > dd{width: calc(50% - 50px) !important;}
	.upright_w .diagram01 > dl:nth-of-type(3) dd .style_blue{ padding: 5px 5px} 
}
@media screen and (max-width:767px){ 
	.upright_w .diagram01 > dl{ flex-direction: column; gap:10px} 
	.upright_w .diagram01 > dl > dt.style_gray,	.upright_w .diagram01 > dl > dt.style_gray + dd{ width:100%;} 
	.upright_w  .diagram01 > dl > dt.style_gray:before{ display: none} 
	.upright_w .diagram01 > dl:nth-of-type(3) > dd{ flex-direction: column} 
	
	.upright_w .diagram01 > dl:nth-of-type(3) dd dl{ width: 100%} 
	.upright_w .diagram01 > dl:nth-of-type(3) dd dl li:before{ margin-top: 8px} 
	.upright_w div[class$="_bx"] > .box, .moral_w .img_box{ padding: 30px 10px}  
	.upright_w .diagram03 > dl > dt.style_gray, .upright_w .diagram03 > .group > dl > dt{ width: 60px} 
	.upright_w .diagram03 > dl > dd, .upright_w .diagram03 > .group > dl > dd{ width: calc(50% - 30px) !important} 
	.upright_w .diagram03 dl, .upright_w .diagram03 > .group > dl{ gap:10px} 
	.upright_w .diagram03 > dl:nth-of-type(3) dd, .upright_w .diagram03 > dl:nth-of-type(4) dd, .upright_w .diagram03 > dl:nth-of-type(5) > dd{ flex-direction: column;gap:5px; flex-wrap: nowrap; justify-content: flex-start} 
	.upright_w .diagram03 > dl:nth-of-type(3) dd .style_bd-blue, .upright_w .diagram03 > dl:nth-of-type(4) dd .style_gray, .upright_w .diagram03 > dl:nth-of-type(5) > dd dl{ width: 100%; margin: 0 !important; } 
	.upright_w .diagram03 > dl:nth-of-type(5) .style_blue, .upright_w .diagram03 > dl:nth-of-type(5) .style_bd-wh p{ word-break: break-all;} 
	.upright_w .diagram03 > .group > dl > dd dl{ flex-direction: column} 
	.upright_w .diagram03 > .group > dl > dd dl dd, .upright_w .diagram03 > .group > dl > dd dl dt{ width: 100%} 
}

/* 게시판 view 단 수정 */
.content .view_area {margin-top: -40px;}
.content .view_area .view_title {border-top: none;}
	@media screen and (max-width:767px){
		.content .view_area {margin-top: -30px;}
	}