@charset "utf-8";

/*컨텐츠 공통*/
ol.list_number{counter-reset:item; margin-top:0.5rem;}
ol.list_number>li{padding-left:2rem; position: relative; box-sizing:border-box;}
ol.list_number>li:before {counter-increment: item; content: counter(item)"."; display: inline-block; position: absolute; top: 0; left: 0;}
/*ol.list_number>li:nth-child(-n+9)::before {content: "0"counter(item);}*/


.sub_visual_wrap { width:100%; position:relative; }
.sub_visual_wrap .sub_visual { width:100%; height:56rem; text-align:center; position:relative; overflow:hidden; }
.sub_visual_wrap .sub_visual .visual_bg { width:100%; height:56rem; }
.sub_visual_wrap .sub_visual.sub01 .visual_bg { background:url("../images/sub/sub_visual1.jpg")center no-repeat; background-size:cover; }
.sub_visual_wrap .sub_visual.sub02 .visual_bg { background:url("../images/sub/sub_visual2.jpg")center no-repeat; background-size:cover; }
.sub_visual_wrap .sub_visual.sub03 .visual_bg { background:url("../images/sub/sub_visual3.jpg")center no-repeat; background-size:cover; }
.sub_visual_wrap .sub_visual.sub04 .visual_bg { background:url("../images/sub/sub_visual4.jpg")center no-repeat; background-size:cover; }
.sub_visual_wrap .sub_visual.sub05 .visual_bg { background:url("../images/sub/sub_visual5.jpg")center no-repeat; background-size:cover; }
.sub_visual_wrap .sub_visual .visual_text { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; }
.sub_visual_wrap .sub_visual .visual_text .text_1 { font-size:5.5rem; font-weight:400; color:#fff; text-shadow: 1px 1px 2px rgba(0,0,0,0.5); opacity:0; margin-top:4.5rem; }
.sub_visual_wrap .sub_visual.active .visual_bg { -webkit-animation:visualBg 4s linear forwards; animation:visualBg 4s linear forwards; }
.sub_visual_wrap .sub_visual.active .visual_text .text_1 { -webkit-animation:enterText 0.8s forwards; animation:enterText 0.8s forwards; animation-delay:0.3s; }

#center { width:100%; }
#center .inner { width:100%; max-width:1280px; padding:0 30px; margin:0 auto; position:relative; display:flex; justify-content:space-between; }
#center .inner .subLeft { width:26rem; flex-shrink:0; margin-right:5%; position:relative; margin-top:-100px; }
#center .inner .subRight { flex-grow:1; max-width:854px; }

.leftNav { background:#fff; /*min-height:calc(100vh - 15rem);*/ margin-bottom:5rem; }
.leftNav .menuTit { text-align:center; padding:9rem 1rem; background:rgba(27,42,74,0.75); color:#fff; font-size:3.2rem; font-weight:400; position:relative; }
.leftNav .menuTit span { position:relative; z-index:2; }
.leftNav .menuTit:before { content:''; display:block; width:100%; height:calc(100% - 20px); background:rgba(27,42,74,0.75); left:10px; top:10px; position:absolute; z-index:1; }
.leftNav .lnb { margin:3.0rem 0; }
.leftNav .lnb > li { padding-left:1.2rem; }
.leftNav .lnb > li + li { margin-top:1rem; }
.leftNav .lnb > li > a { font-size:1.8rem; color:#000; font-weight:400; position:relative; }
.leftNav .lnb > li > a:before { content:''; height:2px; width:0; background:var(--navy); display:block; position:absolute;  bottom:0; left:0;  transition:all 0.3s; }
.leftNav .lnb > li > a:hover { font-size:1.8rem; color:var(--Navy); font-weight:700; transition:all 0.3s; }
.leftNav .lnb > li > a.active,
.leftNav .lnb > li > a.active:hover { font-size:1.9rem; color:var(--Navy); font-weight:700; transition:all 0.3s; }
.leftNav .lnb > li > a.active:before,
.leftNav .lnb > li > a:hover:before  { width:100%; transition:all 0.3s;  }
.leftNav .lnb .lnb_sub { margin-top:1.2rem; }
.leftNav .lnb .lnb_sub li { padding-left:0.5rem; }
.leftNav .lnb .lnb_sub li a { font-size:1.7rem; color:#666; }
.leftNav .lnb .lnb_sub li a:before { dispaly:inline-block; content:'-'; color:#666; margin-right:0.5rem; vertical-align:middle; }
.leftNav .lnb  a { padding:1.2rem 0; }
.leftNav.fixed { position:sticky; top:150px; }
.leftNav .lnb li.depth03 { margin-top:0; }
.leftNav .lnb li.depth03 a { font-size:1.55rem; color:#555; padding:1rem 0 1rem 1.5rem; }
.leftNav .lnb li.depth03 a.active,
.leftNav .lnb li.depth03 a.active:hover { font-size:1.65rem; color:var(--blue); font-weight:700; }
.leftNav .lnb li.depth03 a:before,
.leftNav .lnb li.depth03 a.active:before,
.leftNav .lnb li.depth03 a:hover:before  { display:none !important; }

.subCntsWrap { color:#333; font-size:1.75rem; line-height:1.6; padding-bottom:9.5rem; padding-top:8.5rem; }
.subCntsWrap.padding0 { padding:0; }
.subCntsWrap.pb0 { padding-bottom:0; }
.subCntsWrap h2.title01 { font-size:4.5rem; color:var(--dkNavy); font-weight:400; margin-bottom:3rem; line-height:1.2; color:var(--blue); display:flex; justify-content:space-between;
align-items:center; text-align:right;}
.subCntsWrap h2.title01:before { flex-grow:1; height:1px; content:''; background:var(--blue); display:inline-block; margin-right:10px; }
.subCntsWrap h3.title02 { font-size:2.7rem; font-weight:600; margin-bottom:2.5rem; line-height:1.2; color:#000; background:#f1f1f1; padding:5px 0 5px 3px; border-top:1px solid #bcbbbb;  }
.subCntsWrap h4.title03 { font-size:2.2rem; font-weight:600; margin-bottom:2.0rem; margin-top:4.5rem; line-height:1.2; color:#000; position:relative; color:var(--dkNavy); }
.subCntsWrap h4.title03.bullet { padding-left:15px; }
.subCntsWrap h4.title03.bullet:before { width:5px; height:5px; border:3px solid #333; border-color:var(--dkNavy); border-radius:50%; content:''; display:block; position:absolute;
	left:-1px; top:0.7rem; }
.subCntsWrap .divSection { padding-top:8.0rem; }
.subCntsWrap .divSection.first { padding-top:30px; }
.subCntsWrap .divBox { margin-top:5.0rem; }

/* 탭메뉴 */
.tab_container {}
.tab_container .tabs { border-bottom:1px solid var(--navy); margin-bottom:5.0rem; }
.tab_container .tabs ul { display:flex; justify-content:space-between; align-items:flex-end; }
.tab_container .tabs ul li { margin-right:1px; flex-grow:1; text-align:center; background:#ededed; padding:15px 5px; border:1px solid #ccc; border-bottom:0; position:relative; width:auto; }
.tab_container .tabs ul li:last-child { margin-right:0; }
.tab_container .tabs ul li a { color:var(--navy); font-weight:400; display:block; width:100%; line-height:1.2;  font-size: 1.7rem;}
.tab_container .tabs ul li a:after { width:8px; height:8px; border:2px solid rgba(255,255,255,0.5); border-width:0 0 2px 2px; transform:rotate(-45deg); transform-origin:center; display:block; margin:0px auto; display:none; content:''; }
.tab_container .tabs ul li:before { content:''; display:block; position:absolute; left:0; top:100%; height:15px; width:99%; background:var(--navy); clip-path:polygon(50% 100%, 0 0, 100% 0); display:none; }
.tab_container .tabs ul li.active { background:var(--navy); }
.tab_container .tabs ul li.active a { color:#fff; }
.tab_container .tabs ul li.active:before { display:block; }
.tab_container .tabs ul li.active a:after { display:block; }

/* 버튼 */
.btn { height:4.0rem; line-height:4.0rem; padding:0 2.0rem; font-size:1.6rem; color:#000; border:1px solid #b6b6b8; background:#fff; font-weight:500; background:#f9f9f9; }
.btn.download span:after { content:url("../images/common/download_icon.png"); display:inline-block; margin-left:5px; vertical-align: middle; }

.infogImg .for_large { display:inline-block; }
.infogImg .for_small { display:none; }



/* ================================== Laptop css ================================== */
@media all and (max-width: 1280px) {
	.sub_visual_wrap .sub_visual { height:46rem;  }
	.sub_visual_wrap .sub_visual .visual_bg {height:46rem; }
	.sub_visual_wrap .sub_visual .visual_text .text_1 { font-size:5.0rem; }

	.leftNav .menuTit {  font-size:2.9rem; padding:7rem 1rem; }
}

/* ================================== Tablet css ================================== */
@media all and (max-width: 1080px) {
	.sub_visual_wrap .sub_visual { height:40rem;  }
	.sub_visual_wrap .sub_visual .visual_bg {height:40rem; }
	.sub_visual_wrap .sub_visual .visual_text .text_1 { font-size:5.0rem; }

	#center .inner .subLeft { display:none; }
	#center .inner .subRight { width:100%; max-width:100%;  }

	.subCntsWrap { font-size:1.7rem; line-height:1.6; padding-bottom:9rem; padding-top:8rem;  }
	.subCntsWrap h2.title01 { font-size:4.0rem;  }
	.subCntsWrap h3.title02 { font-size:2.4rem; }
	.subCntsWrap h4.title03 { font-size:2.1rem; margin-bottom:1.7rem; margin-top:3.6rem;  }
	.subCntsWrap .divSection { padding-top:7.0rem; }
}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.sub_visual_wrap .sub_visual { height:30rem;  }
	.sub_visual_wrap .sub_visual .visual_bg {height:30rem; }
	.sub_visual_wrap .sub_visual .visual_text .text_1 { font-size:4.5rem; }

	.subCntsWrap { font-size:1.6rem; line-height:1.5; padding-bottom:8rem; padding-top:7rem;  }
	.subCntsWrap h2.title01 { font-size:3.6rem; margin-bottom:2.0rem; font-weight:500; }
	.subCntsWrap h3.title02 { font-size:2.4rem; margin-bottom:1.7rem; }
	.subCntsWrap h4.title03 { font-size:2.0rem; }
	.subCntsWrap .divSection { padding-top:6.0rem; }

	/* 탭메뉴 */
	.tab_container .tabs ul li { width:auto; flex-grow:1; }
	.tab_container .tabs ul li a { font-size:1.5rem; }

	.infogImg .for_large { display:none; }
	.infogImg .for_small { display:inline-block; }
}

@media all and (max-width: 559px) {
	.sub_visual_wrap .sub_visual { height:40vh;  }
	.sub_visual_wrap .sub_visual .visual_bg {height:40vh; }
	.sub_visual_wrap .sub_visual .visual_text .text_1 { font-size:3.5rem; }

	#center .inner { padding:0 20px; }

	.subCntsWrap { padding-bottom:6rem; padding-top:5.5rem;  }
	.subCntsWrap h2.title01 { font-size:3.0rem; }
	.subCntsWrap h3.title02 { font-size:2.2rem; }
	.subCntsWrap h4.title03 { font-size:1.9rem; margin-bottom:1.5rem; margin-top:2.8rem; }
	.subCntsWrap .divSection { padding-top:4.0rem; }
}


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 지속가능한 경영 - ESG 거버넌스   //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.sub1_1 .flexBox { display:flex; justify-content:space-between; }
.sub1_1 .flexBox .text { width:50%; margin-right:5.0rem; }
.sub1_1 .flexBox .img { flex-grow:1; }
.sub1_1 .pSystemImg .for_large { display:block; }
.sub1_1 .pSystemImg .for_small { display:none; }
.sub1_1 .pStep { display:flex; justify-content:space-between; }
.sub1_1 .pStep li { text-align:center; margin-right:1px; width:15%; flex-grow:1; }
.sub1_1 .pStep li .stepNum { font-size:2.0rem; font-weight:700; color:#fff; padding:1rem 0; position:relative; }
.sub1_1 .pStep li:nth-child(1) { border:1px solid #a5cbcf; }
.sub1_1 .pStep li:nth-child(2) { border:1px solid #78bec6; }
.sub1_1 .pStep li:nth-child(3) { border:1px solid #51b6cb; }
.sub1_1 .pStep li:nth-child(4) { border:1px solid #449bc0; }
.sub1_1 .pStep li:nth-child(5) { border:1px solid #1e7fb1; margin-right:0; }
.sub1_1 .pStep li:nth-child(1) .stepNum { background:#a5cbcf; }
.sub1_1 .pStep li:nth-child(2) .stepNum { background:#78bec6; }
.sub1_1 .pStep li:nth-child(3) .stepNum { background:#51b6cb; }
.sub1_1 .pStep li:nth-child(4) .stepNum { background:#449bc0; }
.sub1_1 .pStep li:nth-child(5) .stepNum { background:#1e7fb1; }
.sub1_1 .pStep .stepCnts { padding:1rem 0.5rem; font-size:1.7rem; color:#000; }
.sub1_1 .pStep li .stepNum:after { width:2.6rem; height:2.6rem; border-radius:50%; content:''; display:block; position:absolute; right:0; top:50%; background: url("../images/sub1/pStep_arw.png")center no-repeat;
background-size:contain; z-index:2; transform:translate(50%, -50%); }
.sub1_1 .pStep li:last-child .stepNum:after { display:none; }

.tab5_org { text-align:center; }
.tab5_org .org01 div{ display:inline-block; padding:1rem 2.5rem; min-width:49%; margin:0 auto; background:var(--blue02); color:#fff; }
.tab5_org .org01 div span { display:block; }
.tab5_org .org01 span:nth-child(2) { color:rgba(255,255,255,0.5); border-top:1px solid rgba(255,255,255,0.5); padding-top:0.6rem; margin-top:0.5rem; }
.tab5_org .org01:after { width:1px; height:5.0rem; content:''; display:block; margin:0 auto; background:var(--blue02); }
.tab5_org .org02:before { width:76.5%; height:1px; content:''; display:block; margin:0 auto; background:var(--blue02); }
.tab5_org .org02 ul { display:flex; justify-content:space-between; }
.tab5_org .org02 ul li { width:23.5%; flex-shrink:0; }
.tab5_org .org02 ul li div { border:1px solid #ccc; padding:2rem; }
.tab5_org .org02 ul li:before { width:1px; height:2.0rem; content:''; display:block; background:var(--blue02); margin:0 auto; }
.tab5_org .org02 ul li div img { margin-bottom:1.0rem; }
.tab5_org .org02 ul li div span { font-weight:600; display:block; }
.tab5_org .org02 ul li.org02_01 div span { color:var(--yGreen);}
.tab5_org .org02 ul li.org02_02 div span { color:var(--blueB);}
.tab5_org .org02 ul li.org02_03 div span { color:var(--blue01);}
.tab5_org .org02 ul li.org02_04 div span { color:var(--blue);}

.pSystemWrap { width:100%; max-width:700px; }
.pSystemWrap .pSystem { width:100%; }
.pSystemWrap .pSystem .psBox { width:45%; text-align:center; }
.pSystemWrap .pSystem .text01,
.pSystemWrap .pSystem .text02 { padding:1rem;}
.pSystemWrap .pSystem .text01 { font-size:1.8rem; color:#fff; font-weight:600; margin-bottom:1px; }
.pSystemWrap .pSystem .text02 { font-size:1.7rem; color:#333; }
.pSystemWrap .pSystem.ps01 .text01 { background:var(--blue); }
.pSystemWrap .pSystem.ps02 .text01 { background:#d8d8d8; color:#010101; }
.pSystemWrap .pSystem.ps03 .text01 { background:var( --blue01); }
.pSystemWrap .pSystem.ps04 .text01 { background:#f7a941; color: #fff;}
.pSystemWrap .pSystem.ps01 .text02 { border:1px solid var(--blue); }
.pSystemWrap .pSystem.ps02 .text02 { border:1px solid #ccc; }
.pSystemWrap .pSystem.ps03 .text02 { border:1px solid var(--blue01); }
.pSystemWrap .pSystem.ps04 .text02 { border:1px solid #f7a941; }
.pSystemWrap .pSystem.ps02 { display:flex; align-items: center; margin:-20px 0; position:relative; }
.pSystemWrap .pSystem.ps02:before { width:35%; height:1px; content:''; background:#d8d8d8; margin-left:22.5%; }
.pSystemWrap .pSystem.ps02:after { position:absolute; top:20px; left:22.5%; height:calc(100% - 40px); width:1px; content:''; background:#d8d8d8; }

.pSystemWrap .pSystem.ps04{margin-top:40px; position: relative;}
.pSystemWrap .pSystem.ps04:after{position:absolute; top:-40px; left:22.5%; height:calc(100% - 40px); width:1px; content:''; background:#d8d8d8; }
.pSystemWrap .pSystem.ps04 .text01{position: relative; z-index:2;}

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.sub1_1 .pStep .stepCnts { font-size:1.6rem; color:#000; }
}
@media all and (max-width: 559px) {
	.sub1_1 .flexBox { flex-direction:column; }
	.sub1_1 .flexBox .text { width:100%; margin-right:0; margin-bottom:2.0rem; }
	.sub1_1 .flexBox .img { width:100%; }
	.sub1_1 .pSystemImg .for_large { display:none; }
	.sub1_1 .pSystemImg .for_small { display:block; }

	.sub1_1 .pStep { flex-wrap:wrap; }
	.sub1_1 .pStep li { width:49%; margin-bottom:1px; }

	.sub1_1 #sub1_tab1 .btn { margin-top:5px; }

	.pSystemWrap .pSystem .psBox { width:48%; }
	.pSystemWrap .pSystem.ps02:before { width:28%; margin-left:24%; }
	.pSystemWrap .pSystem.ps02:after { left:24%; }
	.pSystemWrap .pSystem .text01,
	.pSystemWrap .pSystem .text02 { padding:1rem 0.5rem;}
	.pSystemWrap .pSystem .text01 { font-size:1.7rem; }
	.pSystemWrap .pSystem .text02 { font-size:1.6rem; }
	.pSystemWrap .pSystem.ps04:after{ left:24%;}
}


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// ESG 전략∙비전   //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.esgVisionWrap { }
.esgVisionWrap .box { text-align:center;  }
.esgVisionWrap .box .title { font-size:2.0rem; font-weight:500; color:#fff; padding:1rem; }
.esgVisionWrap .box .cntsBox { padding:1rem; font-size:1.8rem; color:#333; margin-top:1px; }
.esgVisionWrap .box:after { width:80%; height:2.0rem; display:block; margin:1px auto 1.5rem; content:''; background:#d8d8d8; clip-path:polygon(50% 100%, 0 0, 100% 0);  }
.esgVisionWrap .box:last-child:after { display:none; }
.esgVisionWrap .box .cntsBoxWrap.flex { display:flex; justify-content:space-between; }
.esgVisionWrap .box .cntsBoxWrap.flex .cntsBox { width:20%; flex-grow:1; margin-right:1px; padding:2rem 1rem; }
.esgVisionWrap .box .cntsBoxWrap.flex .cntsBox:last-child { margin-right:0; }
.esgVisionWrap .box .cntsBoxWrap.flex .plus { margin:auto 0.5rem; }
.esgVisionWrap .box .cntsBoxWrap.flex .plus img { vertical-align:middle; }
.esgVisionWrap .box .cntsBox .ctTit { font-size:2.0rem; font-weight:600; color:#000; line-height:1.2; margin-bottom:2.0rem;}
.esgVisionWrap .box .cntsBox .ctIcon { width:48px; margin:0 auto 2.0rem; }
.esgVisionWrap .box .cntsBox .ctIcon img { max-width:100%; }
.esgVisionWrap .box .cntsBox .ctText { font-size:1.6rem; font-weight:500; line-height:1.2;  }
.esgVisionWrap .box .cntsBox .ctText ul { display:inline-block; text-align:left;  }
.esgVisionWrap .box .cntsBox .ctText ul li { text-align:left; }
.esgVisionWrap .box .cntsBox .ctTit.ctTit_e { color:var(--yGreen); }
.esgVisionWrap .box .cntsBox .ctTit.ctTit_s { color:var(--blueB); }
.esgVisionWrap .box .cntsBox .ctTit.ctTit_g { color:var(--blue01); }
.esgVisionWrap .box.vision .cntsBox { font-size:1.9rem; color:#000; }

.esgVisionWrap .blue .title { background:var(--blue); }
.esgVisionWrap .blue .cntsBox { border:1px solid var(--blue); }
.esgVisionWrap .blue01 .title { background:var(--blue01); }
.esgVisionWrap .blue01 .cntsBox { border:1px solid var(--blue01); }
.esgVisionWrap .blue02 .title { background:var(--blue02); }
.esgVisionWrap .blue02 .cntsBox { border:1px solid var(--blue02); }
.esgVisionWrap .blue03 .title { background:var(--blue03); }
.esgVisionWrap .blue03 .cntsBox { border:1px solid var(--blue03); }
.esgVisionWrap .blueB .title { background:var(--blueB); }
.esgVisionWrap .blueB .cntsBox { border:1px solid var(--blueB); }
.esgVisionWrap .green .title { background:var(--green); }
.esgVisionWrap .green .cntsBox { border:1px solid var(--green); }
.esgVisionWrap .greenB .title { background:var(--greenB); }
.esgVisionWrap .greenB .cntsBox { border:1px solid var(--greenB); }

.esgActWrap { }
.esgActWrap .esgAct { margin-bottom:5px; display:flex; justify-content:space-between;  }
.esgActWrap .esgAct:last-child { margin-bottom:0;}
.esgActWrap .esgAct .esgType { width:60px; flex-shrink:0; font-size:2.6rem; color:#fff; font-weight:700; display:flex; align-items:center; }
.esgActWrap .esgAct .esgType span { display:inline-block; width:100%; text-align:center; }
.esgActWrap .esgAct .actBoxs { flex-grow:1; display:flex; justify-content:space-between; width:calc(100% - 60px);  }
.esgActWrap .esgAct .actBoxs .actBox { padding:2.5rem; margin-left:5px; width:44%; flex-grow:1; display:flex; }
.esgActWrap .esgAct .actBoxs .actBox .actIcon { width:68px; display:flex; align-items:center; margin-right:2.5rem; }
.esgActWrap .esgAct .actBoxs .actBox .actIcon img { max-width:100%;  }
.esgActWrap .esgAct .actBoxs .actBox .actCnts p { font-size:1.6rem; line-height:1.6; }
.esgActWrap .esgAct .actBoxs .actBox .actCnts strong { font-size:2.0rem; font-weight:700; margin-bottom:1.5rem; display:block; }

.esgActWrap .esgAct.esgAct_e .esgType { background:var(--yGreen); }
.esgActWrap .esgAct.esgAct_e .actBox { border:1px solid var(--yGreen);}
.esgActWrap .esgAct.esgAct_e .actBox strong { color:var(--yGreen); }
.esgActWrap .esgAct.esgAct_s .esgType { background:var(--blueB); }
.esgActWrap .esgAct.esgAct_s .actBox { border:1px solid var(--blueB);}
.esgActWrap .esgAct.esgAct_s .actBox strong { color:var(--blueB); }
.esgActWrap .esgAct.esgAct_g .esgType { background:var(--blue01); }
.esgActWrap .esgAct.esgAct_g .actBox { border:1px solid var(--blue01);}
.esgActWrap .esgAct.esgAct_g .actBox strong { color:var(--blue01); }

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.esgVisionWrap .box .cntsBox .ctTit { font-size:1.9rem; }
	.esgVisionWrap .box .cntsBox .ctIcon { width:36px; }

	.esgActWrap .esgAct .actBoxs { flex-wrap:wrap; margin-left:1px; }
	.esgActWrap .esgAct .actBoxs .actBox { margin:0; width:100%; padding:2rem; }
	.esgActWrap .esgAct .actBoxs .actBox + .actBox { margin-top:1px;}
	.esgActWrap .esgAct .actBoxs .actBox .actCnts strong { margin-bottom:0.7rem; font-size:1.9rem; }
}

@media all and (max-width: 559px) {
	.esgVisionWrap .box .title { font-size:1.8rem; }
	.esgVisionWrap .box .cntsBox { font-size:1.6rem; }
	.esgVisionWrap .box .cntsBox .ctTit { font-size:1.8rem; margin-bottom:1.0rem; }
	.esgVisionWrap .box .cntsBox .ctIcon { margin:0 auto 1rem; }
	.esgVisionWrap .box.vision .cntsBox { font-size:1.7rem; }
	.esgVisionWrap .box .cntsBoxWrap.flex { flex-wrap:wrap;}
	.esgVisionWrap .box .cntsBoxWrap.flex .cntsBox { width:100%; margin:1px 0 0 0; padding:1rem; }
	.esgVisionWrap .box .cntsBoxWrap.flex .plus { width:100%; justify-content:center; }

	.esgActWrap .esgAct .esgType { width:50px; font-size:2.0rem; }
	.esgActWrap .esgAct .actBoxs { width:calc(100% - 50px);  }
	.esgActWrap .esgAct .actBoxs .actBox { padding:1.5rem; }
	.esgActWrap .esgAct .actBoxs .actBox .actIcon { width:50px; margin-right:1rem; }
	.esgActWrap .esgAct .actBoxs .actBox .actCnts strong { font-size:1.8rem; }
}

/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// ESG 스토리   //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.sub1_3 .list { display:flex; justify-content:flex-start; flex-wrap:wrap; }
.sub1_3 .list .link { width:31%; flex-shrink:0; display:block; margin-bottom:3.0rem; margin-right:2.22222%;}
.sub1_3 .list .link:nth-child(3n) { margin-right:0; }
.sub1_3 .list .link img { width:100%; }

/*게시판 목록*/
.sub3ListWrap {}
.sub3ListWrap .sub3_boardList { display:flex; flex-wrap:wrap; gap:50px 12px; }
.sub3ListWrap .sub3_boardList .boardItem { width:calc(33.3333% - 8px); flex-shrink:0;  }
.sub3ListWrap .sub3_boardList .boardItem a { display:block; }
.sub3ListWrap .sub3_boardList .boardItem .boardThumb { width:100%; height:0; padding-bottom:60%; position:relative; overflow:hidden; }
.sub3ListWrap .sub3_boardList .boardItem .boardThumb .thumb { width:100%; height:100%; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); }
.sub3ListWrap .sub3_boardList .boardItem .boardThumb .thumb img { width:100%;
	transform:matrix(1, 0, 0, 1, 0, 0);
	transition:0.2s ease-in;
	-moz-transition:0.2s ease-in;
	-webkit-transition:0.2s ease-in;
	-ms-transition:0.2s ease-in; }
.sub3ListWrap .sub3_boardList .boardItem:hover .boardThumb .thumb img { transform: matrix(1.1, 0, 0, 1.1, 0, 0); }
.sub3ListWrap .sub3_boardList .boardItem .boardTitle { font-size:1.6rem; height:1.3; color:#010101; }
.sub3ListWrap .sub3_boardList .boardItem:hover .boardTitle { text-decoration:underline;}
.sub3ListWrap .sub3_boardList .boardItem .boardDate { text-align:left; font-size:1.4rem; color:#777; margin-top:1rem;  }
.pagination { margin:5rem auto 0; text-align:center; }

/* 게시판 상세 */
.sub3ViewWrap { margin-bottom:5.0rem; }
.sub3View { border-bottom:2px solid #ccc; }
.sub3View .topImg img { width:100%; }
.sub3View .viewHeader { margin-top:2.0rem; margin-bottom:1.5rem; }
.sub3View .viewHeader .cntsSubject { font-size:3.5rem; color:#010101; line-height:4.2rem; }
.sub3View .viewHeader .cntsDate { font-size:1.5rem; color:#777; margin-bottom:0.5rem;  }
.sub3View .viewContents { margin-top:2.0rem; margin-bottom:3.0rem;  letter-spacing:0; line-height:1.6; color:#333; }
.sub3ViewWrap .viewBottom { display:flex; justify-content:space-between; margin-top:1.5rem; width:100%;}
.viewBottom .button { height:4.0rem; line-height:3.8rem; color:#333; font-size:1.8rem; width:8.0rem; text-align:center; }
.viewBottom .listBtn { border:1px solid #ccc; }
.viewBottom .listBtn:hover { border-color:var(--blue); color:var(--blue); }
.viewBottom .prevList:hover,
.viewBottom .nextList:hover {color:var(--blue); font-weight:500; }

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.sub1_3 .list { flex-wrap:wrap;  justify-content:space-between; }
	.sub1_3 .list .link { width:47.5%; margin-right:0;}

	/*게시판 목록*/
	.sub3ListWrap .sub3_boardList { gap:40px 10px; }
	.sub3ListWrap .sub3_boardList .boardItem { width:calc(50% - 5px);  }

	/* 게시판 상세 */
	.sub3View .viewHeader .cntsSubject { font-size:2.5rem; line-height:3.5rem; }
}


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 환경(E) - 환경 경영  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.hsePolicy { display:flex; justify-content:space-between; }
.hsePolicy .img { width:18rem; flex-shrink:0; margin-left:3.0rem; }
.hsePolicy .img img { width:100%; }
.hsePolicy ul { flex-grow:1; }

.sub2_1 .esgVisionWrap .box.flex { display:flex; justify-content:space-between; align-content:center; }
.sub2_1 .esgVisionWrap .box.flex > div { width:40%; flex-grow:1; }
.sub2_1 .esgVisionWrap .box.flex > div .cntsBox { border:0; }
.sub2_1 .esgVisionWrap .box.flex > div .cntsBox .ctTit { font-size:1.8rem; margin-bottom:1.0rem; margin-top:2.0rem; text-align:left; }
.sub2_1 .esgVisionWrap .box.flex > div .cntsBox .ctTit:first-child { margin-top:0; }
.sub2_1 .esgVisionWrap .box.flex > div.blue01 { border:1px solid var(--blue01); }
.sub2_1 .esgVisionWrap .box.flex > div.blueB { border:1px solid var(--blueB); margin-left:1px; }
.sub2_1 .esgVisionWrap .box.flex > div.blue01 .ctTit { color:var(--blue01); }
.sub2_1 .esgVisionWrap .box.flex > div.blueB .ctTit { color:var(--blueB); }
.sub2_1 .esgVisionWrap .box.flex > div.blueB .title { position:relative; }

.sub2_1 .esgVisionWrap .box.flex > div.blueB .title:before { content:''; display:block; width:26px; height:26px; background:url("../images/sub/plus_blue.png")center no-repeat;
background-color:#fff; position:absolute; top:50%; left:0; transform:translate(-50%, -50%); z-index:2; border-radius:50%; }
.sub2_1 .esgVisionWrap .box.flex .cntsBox .ctText { text-align:left; }
.sub2_1 .esgVisionWrap .box.flex .cntsBox .ctText ul li+li { margin-top:0; }

.loadMapWrap { display:flex; justify-content: space-between; margin-top:2.0rem; }
.loadMapWrap .loadMap { width:30%; flex-grow:1; margin-right:1px; }
.loadMapWrap .loadMap:last-child { margin-right:0; }
.loadMapWrap .loadMap .mapTit { font-size:1.8rem; font-weight:700; text-align:center;  padding:1rem; color:#fff; position:relative; }
.loadMapWrap .loadMap .mapTit:before { display:block; content:''; width:26px; height:26px; background: url("../images/sub/arw_y.png")center no-repeat; background-color:#fff; border-radius:50%;
position:absolute; left:0; top:50%; transform:translate(-50%, -50%); z-index:2; }
.loadMapWrap .loadMap:first-child .mapTit:before { display:none; }
.loadMapWrap .loadMap .mapcnts { padding:1.0rem; font-size:1.6rem; }
.loadMapWrap .loadMap .mapcnts ul li+li { margin-top:0.3rem; }
.loadMapWrap .loadMap:nth-child(1) .mapTit { background:#46b1c1; }
.loadMapWrap .loadMap:nth-child(2) .mapTit { background:#4ba396; }
.loadMapWrap .loadMap:nth-child(3) .mapTit { background:#68a34b; }
.loadMapWrap .loadMap:nth-child(1) { border:1px solid #46b1c1; }
.loadMapWrap .loadMap:nth-child(2) { border:1px solid #4ba396; }
.loadMapWrap .loadMap:nth-child(3) { border:1px solid #68a34b; }



/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.hsePolicy .img { width:16rem; margin-left:2.0rem; }
}

@media all and (max-width: 559px) {
	.hsePolicy { flex-wrap:wrap; }
	.hsePolicy .img { width:100%; margin-left:0; margin-top:1.5rem; }

	.loadMapWrap { flex-wrap:wrap; }
	.loadMapWrap .loadMap { width:100%; margin-right:0px; margin-bottom:1px; }
}

/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 환경(E) - 기후변화 대응  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.planWrap { display:flex; justify-content:space-between; margin-top:2.0rem; }
.planWrap .plan { width:30%; flex-grow:1; margin-right:1px; }
.planWrap .plan:last-child { margin-right:0; }
.planWrap .plan .plantit { font-size:1.8rem; font-weight:700; text-align:center;  padding:1rem; color:#fff; position:relative; }
.planWrap .plan .plantit:before { display:block; content:''; width:26px; height:26px; background: url("../images/sub/plus_blue.png")center no-repeat; background-color:#fff; border-radius:50%;
position:absolute; left:0; top:50%; transform:translate(-50%, -50%); z-index:2; }
.planWrap .plan:first-child .plantit:before { display:none; }
.planWrap .plan .planCnts { padding:1.0rem; font-size:1.6rem; text-align:center; }
.planWrap .plan .planCnts .strong { font-size:1.6rem; font-weight:700; }
.planWrap .plan:nth-child(1) .plantit { background:var(--blueB); }
.planWrap .plan:nth-child(2) .plantit { background:var(--blue01); }
.planWrap .plan:nth-child(3) .plantit { background:var(--yGreen); }
.planWrap .plan:nth-child(1) { border:1px solid var(--blueB); }
.planWrap .plan:nth-child(2) { border:1px solid var(--blue01); }
.planWrap .plan:nth-child(3) { border:1px solid var(--yGreen); }
.planWrap .plan:nth-child(1) .planCnts .strong { color:var(--blueB); }
.planWrap .plan:nth-child(2) .planCnts .strong { color:var(--blue01); }
.planWrap .plan:nth-child(3) .planCnts .strong { color:var(--yGreen); }

.sheetImg { display:flex; justify-content: space-between; margin-top:2.0rem; }
.sheetImg  .imgBox { width:30%; flex-grow:1; text-align:center; margin-right:1.0rem; }
.sheetImg  .imgBox img { border:1px solid #ccc; margin-bottom:1.0rem; max-width:100%; }
.sheetImg  .imgBox p { font-size:1.6rem; }

.chartTable th,
.chartTable tfoot td { border-top:1px solid var(--dkNavy); border-bottom:2px solid var(--dkNavy); font-weight:700; }
.chartTable th,
.chartTable td { padding:0.8rem; font-size:1.6rem; text-align:center; }
.chartTable .ct1 { color:#ffc000; font-weight:700;}
.chartTable .ct3 { color:#ce6805; font-weight:700;}
.chartTable .ct4 { color:#7a0bc0; font-weight:700;}
.chartTable .ct5 { color:#2c33c5; font-weight:700;}
.chartTable .ct6 { color:#1e2569; font-weight:700;}
.chartTable .ct7 { color:#613f23; font-weight:700;}
.chartTable .ct11 { color:#70ad47; font-weight:700;}
.chartTable .ct12 { color:#535252; font-weight:700;}
.chartTable .sc { color:#000; font-weight:700;}

.flexBox01 {display:flex; justify-content:space-between; }
.flexBox01 .graph { width:70%; flex-shrink:0; margin-right:3.0rem; }
.flexBox01 .certi { flex-grow:1; }

.result ul li + li { /*margin-top:1.5rem;*/ }
.result ul li { color:#666; }
.result ul li p { border:1px solid #ccc; padding:0.5rem 1rem; font-weight:500; color:#000; }
.result.flexGrid ul { display:flex; flex-wrap:wrap; justify-content:space-between; }
.result.flexGrid ul li { width:32%; flex-grow:1; margin-right:5px; margin-bottom:5px; border:1px solid #ccc; padding:2rem; display:flex; align-items:center; }
.result.flexGrid ul li p { border:0; padding:0; width:100%; text-align:center; }
.result.flexGrid ul li:nth-child(3n) { margin-right:0; }

.scopeImg { display:flex; justify-content:space-between; margin-top:2.0rem; }
.scopeImg figure { width:32%; max-width:270px; padding:0; margin:0; text-align:center; }
.scopeImg figure p { width:100%; background:var(--blue02); color:#fff; font-weight:600; height:4.0rem; line-height:4.0rem; margin-bottom:1px; }
.scopeImg figure:nth-child(2) p { background:var(--blueB); }
.scopeImg figure figcaption { width:100%; line-height:1.5; padding:1rem; border:1px solid #ccc; border-top:0; font-size:1.6rem; }

.workStep { display:flex; justify-content:space-between; }
.workStep li { text-align:center; margin-right:1px; width:15%; flex-grow:1; }
.workStep li:last-child { margin-right:0; }
.workStep li .stepNum { font-size:1.7rem; font-weight:700; color:#fff; padding:1rem 0.5rem; position:relative; }
.workStep li:nth-child(1) { border:1px solid #a5cbcf; }
.workStep li:nth-child(2) { border:1px solid #78bec6; }
.workStep li:nth-child(3) { border:1px solid #51b6cb; }
.workStep li:nth-child(4) { border:1px solid #449bc0; }
.workStep li:nth-child(5) { border:1px solid #1e7fb1; margin-right:0; }
.workStep li:nth-child(1) .stepNum { background:#a5cbcf; }
.workStep li:nth-child(2) .stepNum { background:#78bec6; }
.workStep li:nth-child(3) .stepNum { background:#51b6cb; }
.workStep li:nth-child(4) .stepNum { background:#449bc0; }
.workStep li:nth-child(5) .stepNum { background:#1e7fb1; }
.workStep .stepCnts { padding:1rem 0.5rem; font-size:1.7rem; color:#000; }
.workStep li .stepNum:after { width:2.6rem; height:2.6rem; border-radius:50%; content:''; display:block; position:absolute; right:0; top:50%; background: url("../images/sub1/pStep_arw.png")center no-repeat;
background-size:contain; z-index:2; transform:translate(50%, -50%); }
.workStep li:last-child .stepNum:after { display:none; }

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.workStep { flex-wrap:wrap; }
	.workStep li { width:49%; margin-bottom:1px; }
	.workStep li:nth-child(2) { margin-right:0; }

	.result.flexGrid ul li { padding:1rem; }
}

@media all and (max-width: 559px) {
	.planWrap { flex-wrap:wrap; }
	.planWrap .plan { width:100%; margin-right:0px; margin-bottom:30px; }
	.planWrap .plan .plantit:before { transform:translate(-50%, 0); top:-28px; left:50%; }

	.flexBox01 { flex-wrap:wrap; }
	.flexBox01 .graph { width:100%; margin-bottom:2.0rem; margin-right:0; }
	.flexBox01 .certi img { max-width:300px; width:100%; }

	.sheetImg  .imgBox p { font-size:1.4rem; }

	.scopeImg { flex-wrap:wrap; }
	.scopeImg figure { width:100%; max-width:100%; }
	.scopeImg figure + figure { margin-top:1.0rem; }

	.workStep li { width:100%; margin-bottom:1px; margin-right:0; }
	.workStep li .stepNum:after { left:0; transform:translate(-50%, -50%); }
	.workStep li:last-child .stepNum:after { display:block; }
	.workStep li:first-child .stepNum:after { display:none; }

	.result.flexGrid ul li { width:45%; }
	.result.flexGrid ul li:nth-child(3n) { margin-right:5px; }
	.result.flexGrid ul li:nth-child(2n) { margin-right:0px !important; }
}


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 환경(E) - 자원순환  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.planWrap .plan .planCnts .cntTit { font-size:1.8rem; font-weight:700; }
.planWrap .plan .planCnts .cntTit:after { display:block; width:10px; height:10px; border:2px solid #000; border-width:0 2px 2px 0; transform:rotate(45deg); margin:1rem auto 1.5rem; content:''; }
.planWrap .plan:nth-child(1) .planCnts .cntTit { color:var(--blueB); }
.planWrap .plan:nth-child(2) .planCnts .cntTit { color:var(--blue01); }
.planWrap .plan:nth-child(1) .planCnts .cntTit:after { border-color:var(--blueB); }
.planWrap .plan:nth-child(2) .planCnts .cntTit:after { border-color:var(--blue01); }


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 환경(E) - 자원 순환  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.sub2_4 .flexBox02 { display:flex; justify-content:space-between; }
.sub2_4 .flexBox02 .text { flex-grow:1; }
.sub2_4 .flexBox02 .img { width:305px; margin-left:3.0rem; flex-shrink:0; }

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.sub2_4 .flexBox02 { flex-wrap:wrap; }
	.sub2_4 .flexBox02 .text { flex-grow:1; }
	.sub2_4 .flexBox02 .img {margin-left:0; width:100%; margin-top:2.0rem; }
	.sub2_4 .flexBox02 .img img { width:100%; max-width:360px; }
}

/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 사회적 책임(S) - 인재∙인권 경영    //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.dlList { display:table; border-spacing:1px;  width:100%; }
.dlList dl { display:table-row;  }
.dlList dl dt,
.dlList dl dd { display:table-cell; padding:10px; }
.dlList dl dt { text-align:center;  }
.dlList dl dd { border:1px solid #ccc;  }
.dlList.blue01 dl dt { background:var(--blue01); color:#fff; }
.dlList.blueB dl dt { background:var(--blueB); color:#fff; }

.sub3_1_sci_wrap { text-align:center; }
.sub3_1_sci_wrap strong { color:#333; font-weight:500; font-size:1.8rem; }
.sub3_1_sci { display:flex; justify-content:center; align-items:center; margin-bottom:1.5rem;  }
.sub3_1_sci .sciCnt { border-radius:50%; background:#efefef; display:flex; align-items:center; width:28%; max-width:20rem; aspect-ratio:1/1; }
.sub3_1_sci .sciCnt > div  { width:100%; text-align:center; }
.sub3_1_sci .sciCnt span { display:block; }
.sub3_1_sci .sciCnt .text { font-size:1.7rem; margin-top:1.5rem; color:#010101; font-weight:600; line-height:1.3; }
.sub3_1_sci .plusImg { margin:0 1.5rem; }

.sub3_1 .flexDiv { display:flex; justify-content:space-between;}
.sub3_1 .flexDiv .dtImg { width:22rem; margin-left:1rem; flex-shrink:0; text-align:center; font-size:1.5rem; }
.sub3_1 .flexDiv .tableBox { flex-grow:1; }

@media all and (max-width: 767px) {
	.sub3_1 .flexDiv { flex-wrap:wrap; }
	.sub3_1 .flexDiv .dtImg { width:100%; margin-left:0; margin-top:1rem; }
}

@media all and (max-width: 559px) {
	.sub3_1_sci .plusImg { margin:0 0.7rem; }
	.sub3_1_sci .sciCnt { width:30%; }
	.sub3_1_sci .sciCnt .icon { width:40%; margin:0 auto;}
	.sub3_1_sci .sciCnt .text { margin-top:0.5rem; font-size:1.5rem; }
	.sub3_1_sci_wrap strong { font-size:1.7rem; }
}


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 사회적 책임(S) - 안전∙보건 경영    //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.esgVisionWrap.safety .vision01 { font-size:2.0rem; font-weight:600; text-align:center; margin-bottom:10px; line-height:1.5; }
.esgVisionWrap.safety .box .cntsBox .ctTit.mb0 { margin-bottom:0 !important; }
.esgVisionWrap.safety .box:after { display:none; }
.esgVisionWrap.safety .box.blue01:before { width:80%; height:2.0rem; display:block; margin:1.0rem auto 1px; content:''; background:#d8d8d8; clip-path:polygon(50% 0, 0 100%, 100% 100%); }
.esgVisionWrap.safety .box.blue02 { padding:2.0rem 0; position:relative; }
.esgVisionWrap.safety .box.blue02:before { width:80%; height:calc(100% - 2px); display:block; margin:0 auto; content:''; background:#d8d8d8; clip-path:polygon(50% 0, 0 100%, 100% 100%);
position:absolute; bottom:1px; left:50%; z-index:-1; transform:translateX(-50%);}

.addExp { font-size:1.5rem; line-height:1.3em; }

.sub3_2 .flexDiv { display:flex; justify-content:space-between;}
.sub3_2 .flexDiv .dtImg { width:22rem; margin-left:1rem; flex-shrink:0; text-align:center; font-size:1.5rem; }
.sub3_2 .flexDiv .tableBox { flex-grow:1; }

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.sub3_2 .flexDiv { flex-wrap:wrap; }
	.sub3_2 .flexDiv .dtImg { width:100%; margin-left:0; margin-top:1rem; }
}

@media all and (max-width: 559px) {
	.esgVisionWrap.safety .box.blue02 .cntsBoxWrap.flex { flex-wrap:nowrap; }
	.esgVisionWrap.safety .box.blue02 .cntsBoxWrap.flex .cntsBox { width:20%; flex-grow:1; margin-right:1px; padding:1rem 0.5rem; }
	.esgVisionWrap.safety .box.blue02 .cntsBoxWrap.flex .plus { width:10px !important; flex-shrink:0; margin:auto 0;  }
	.esgVisionWrap.safety .box.blue02 .cntsBox .ctTit small { font-size:1.3rem; }
	.esgVisionWrap.safety .vision01 span { display:block; }
}

/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 사회적 책임(S) - 지속가능한 공급망  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.esgVisionWrap .box.blueB.type01 .title { border:1px solid var(--blueB); color:var(--blueB); background:#fff; }
.esgVisionWrap .box.blueB.type01 .cntsBoxWrap.flex .cntsBox { padding:0; }
.esgVisionWrap .box.blueB.type01 .cntsBox .ctTit { background:var(--blueB); height:40px; line-height:40px; color:#fff; margin:0; }
.esgVisionWrap .box.blueB.type01 .cntsBox .ctText { padding:2rem; }
.esgVisionWrap .box.blueB.type01 .cntsBoxWrap.flex { flex-wrap:wrap; }
.esgVisionWrap .box.blueB.type01 .cntsBoxWrap.flex .cntsBox:nth-child(4),
.esgVisionWrap .box.blueB.type01 .cntsBoxWrap.flex .cntsBox:nth-child(5) { width:49%; }

.sub3_3 .flexDiv { display:flex; justify-content:space-between;}
.sub3_3 .flexDiv .Img { width:22rem; margin-left:1rem; flex-shrink:0; text-align:center; font-size:1.5rem; }
.sub3_3 .flexDiv .tableBox { flex-grow:1; }

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.sub3_3 .flexDiv { flex-wrap:wrap; }
	.sub3_3 .flexDiv .Img { width:100%; margin-left:0; margin-top:1rem; }
}

@media all and (max-width: 559px) {
	.esgVisionWrap .box.blueB.type01 .cntsBoxWrap.flex .cntsBox:nth-child(4),
	.esgVisionWrap .box.blueB.type01 .cntsBoxWrap.flex .cntsBox:nth-child(5) { width:100%; }
}


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 사회적 책임(S) - 나눔 경영  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.imgFlexBox { display:flex; justify-content:space-between; }
.imgFlexBox .imgFigure { width:40%; flex-grow:1; text-align:center; margin:0;}
.imgFlexBox .imgFigure:nth-child(2n) { margin-left:3.0rem; }
.imgFlexBox .imgFigure figcaption { margin-top:1.0rem; }

@media all and (max-width: 559px) {
	.imgFlexBox .imgFigure:nth-child(2n) { margin-left:1.0rem; }
}



/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 사회적 책임(S) - 품질 경영  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.flexBox { display:flex; justify-content: space-between; }
.flexBox > li { width:20%; flex-grow:1; border:1px solid #ccc; padding:2.0rem; text-align:center; font-weight:600; line-height:1.5; position:relative; }
.flexBox > li:not(:last-child) { margin-right:1.0rem; }
.flexBox > li:not(:last-child):after { content:''; display:block; width:26px; height:26px; background: url("../images/sub/plus_white.png")center no-repeat; background-color:var(--blue01); border-radius: 50%;
position:absolute; right:-0.5rem; top:50%; transform:translate(50%, -50%); z-index:2; }

.sub3_6_orgWrap { }
.sub3_6_orgWrap .orgTop { text-align:center; }
.sub3_6_orgWrap .orgTop span { display:inline-block; width:200px; line-height:4.6rem; height:4.6rem; background:#efefef; color:#333; font-size:2.0rem; font-weight:500; }
.sub3_6_orgWrap .orgTop:after { content:''; display:block; height:3.0rem; width:1px; background:var(--blue02); margin:0 auto; }
.sub3_6_orgWrap .orgBtm { display:flex; justify-content:space-between; position:relative; width:100%; }
.sub3_6_orgWrap .orgBtm .orgBox { margin:1px; width:18%; flex-grow:1; border:1px solid var(--blue02); position:relative; margin-top:3.0rem; }
.sub3_6_orgWrap .orgBtm .orgBox .orgTit { background:var(--blue02); color:#fff; font-size:1.8rem; height:4.6rem; line-height:4.6rem; text-align:center; }
.sub3_6_orgWrap .orgBtm .orgBox .orgCnts { padding:1rem; text-align:center; font-size:1.5rem; }
.sub3_6_orgWrap .orgBtm:before { content:''; display:block; width:80%; height:1px; background:var(--blue02); position:absolute; top:0; left:50%; transform:translateX(-50%); }
.sub3_6_orgWrap .orgBtm .orgBox:before { content:''; height:3.0rem; width:1px; background:var(--blue02); display:block; position:absolute; top:-3.0rem; left:50%;  }

.tab_container .tabs.col06 ul li { width:auto; }
.tab_container .tabs.col06 ul li a { letter-spacing:-0.09em; font-size:1.6rem; }

.smartInfoG { display:flex; }
.smartInfoG .infoArw { width:3.0rem; margin:0 0.5rem; flex-shrink:0; display:flex; align-items:center; }
.smartInfoG .infoArw .arwImg { width:100%; height:90%; background:#ccc; clip-path:polygon(0 0, 0% 100%, 100% 50%); }
.smartInfoG .smartInfo01 { flex-grow:1; }
.smartInfoG .smartInfo02 { width:15rem; flex-shrink:0; display:flex; align-items:center; background:#efefef; }
.smartInfoG .smartInfo02 p { width:100%; text-align:center; color:var(--blue); font-weight:600; padding:2rem;  }
.smartInfoG .smartInfo01 .siBox { display:flex; width:100%; line-height:1.2em; }
.smartInfoG .smartInfo01 .siBox + .siBox { margin-top:1.0rem; }
.smartInfoG .smartInfo01 .siBox .siTit { width:10rem; flex-shrink:0; color:#fff; text-align:center; padding:1rem; margin-right:5px; display:flex; align-items:center; position:relative; }
.smartInfoG .smartInfo01 .siBox .siText { flex-grow:1; color:#333; display:flex; align-items:center; }
.smartInfoG .smartInfo01 .siBox .siText p { width:100%; text-align:center; }
.smartInfoG .smartInfo01 .siBox:nth-child(1) .siTit { background:var(--blue);}
.smartInfoG .smartInfo01 .siBox:nth-child(2) .siTit { background:var(--blue01);}
.smartInfoG .smartInfo01 .siBox:nth-child(3) .siTit { background:var(--blue02);}
.smartInfoG .smartInfo01 .siBox:nth-child(1) .siText { border:1px solid var(--blue); }
.smartInfoG .smartInfo01 .siBox:nth-child(2) .siText { border:1px solid var(--blue01); }
.smartInfoG .smartInfo01 .siBox:nth-child(3) .siText { border:1px solid var(--blue02); }
.smartInfoG .smartInfo01 .siBox .siTit:after { position:absolute; top:50%; left:100%; width:5px; height:1px; content:''; display:block; }
.smartInfoG .smartInfo01 .siBox:nth-child(1) .siTit:after { background:var(--blue);}
.smartInfoG .smartInfo01 .siBox:nth-child(2) .siTit:after { background:var(--blue01);}
.smartInfoG .smartInfo01 .siBox:nth-child(3) .siTit:after { background:var(--blue02);}

.stepCustomerWrap { margin-top:2.0rem; }
.stepCustomerWrap .stepCustomer { display:flex; justify-content:space-between; }
.stepCustomerWrap .stepCustomer + .stepCustomer { margin-top:1.5rem; }
.stepCustomerWrap .stepCustomer .stepTit { flex-shrink:0; width:12rem; display:flex; align-items:center; color:#fff; position:relative; padding:1rem; }
.stepCustomerWrap .stepCustomer .stepTit p { width:100%; text-align:center; }
.stepCustomerWrap .stepCustomer .stepText { flex-grow:1; display:flex; align-items:center; padding:1rem; }
.stepCustomerWrap .stepCustomer .stepTit:after { display:block; content:''; position:absolute; top:100%; left:0; width:100%; height:1.2rem; clip-path:polygon(50% 100%, 0 0, 100% 0); }
.stepCustomerWrap .stepCustomer:nth-child(1) .stepTit,
.stepCustomerWrap .stepCustomer:nth-child(1) .stepTit:after { background:#78bec6;}
.stepCustomerWrap .stepCustomer:nth-child(2) .stepTit,
.stepCustomerWrap .stepCustomer:nth-child(2) .stepTit:after { background:#51b6cb;  }
.stepCustomerWrap .stepCustomer:nth-child(3) .stepTit { background:#1e7fb1;  }
.stepCustomerWrap .stepCustomer:nth-child(1) .stepText { border:1px solid #78bec6; }
.stepCustomerWrap .stepCustomer:nth-child(2) .stepText { border:1px solid #51b6cb;  }
.stepCustomerWrap .stepCustomer:nth-child(3) .stepText { border:1px solid #1e7fb1;  }
.stepCustomerWrap .stepCustomer:nth-child(3) .stepTit:after { display:none; }

.sub3_5_tab4Box { display:flex; }
.sub3_5_tab4Box .text { flex-grow:1; }
.sub3_5_tab4Box .text strong { font-size:1.8rem; margin-bottom:1.0rem; display:block;  }
.sub3_5_tab4Box .pic { width:25rem; flex-shrink:0; margin-left:3.0rem; }
.sub3_5_tab4Box .pic img { width:100%; }
.sub3_5_tab4Box .pic img + img { margin-top:2px; }


/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.sub3_6_orgWrap .orgBtm .orgBox .orgTit { font-size:1.7rem; letter-spacing:-0.09em;  }

	.smartInfoG .smartInfo02 { width:12rem; }

	.sub3_5_tab4Box { flex-wrap:wrap; }
	.sub3_5_tab4Box .text { width:100%; }
	.sub3_5_tab4Box .pic { width:100%; display:flex; justify-content:space-between; margin-left:0; margin-top:1.0rem;  }
	.sub3_5_tab4Box .pic img + img { margin-top:0px; }
	.sub3_5_tab4Box .pic img { width:calc(50% - 2px);}
}

@media all and (max-width: 559px) {
	.flexBox { flex-wrap:wrap; }
	.flexBox li { width:100%; padding:1.0rem; }
	.flexBox li:not(:last-child) { margin-right:0; margin-bottom:30px; }
	.flexBox li:not(:last-child):after { width:20px; height:20px; background: url("../images/sub/plus_white.png")center no-repeat; background-size:50%;  background-color:var(--blue01);
	top:calc(100% + 5px); left:50%; transform:translate(-50%, 0); }

	.sub3_6_orgWrap .orgBtm { flex-wrap:wrap; }
	.sub3_6_orgWrap .orgBtm .orgBox:nth-child(4),
	.sub3_6_orgWrap .orgBtm .orgBox:nth-child(5) { width:45%; }
	.sub3_6_orgWrap .orgBtm:before { width:66.66667%; }

	.smartInfoG { flex-wrap:wrap; }
	.smartInfoG .smartInfo01 { width:100%;}
	.smartInfoG .infoArw { width:100%; height:2.0rem; margin:2px auto; }
	.smartInfoG .infoArw .arwImg { width:100%; height:100%; clip-path:polygon(50% 100%, 0 0, 100% 0); }
	.smartInfoG .smartInfo02 { width:100%;}
}

/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 사회적 책임(S) - 정보보호  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.sub3_6 .esgVisionWrap .box.blueB.type01 .cntsBox .ctText ul { display:block; }


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 거버넌스(G) - 준법경영  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.cpGuide .moviePop { display:none;position:fixed; top:50%; left:50%; z-index:90; transform:translate(-50%, -50%); width:100%; max-width:750px; }
.cpGuide .moviePop .videoWrap { width:100%; height:0; padding-bottom:56.25%; position:relative; }
.cpGuide .moviePop .videoWrap video { position:absolute; top:0; left:0; width:100%; height:100%; display:block; }
.cpGuide .moviePop .close_btn { display:block; width:100%; line-height:40px; background:#333; color:#fff; text-align:center; cursor:pointer; margin-top:0; }
.tab_content .topTitle { font-weight:400; font-size:2.4rem; }

.monitoringWrap { display:flex; justify-content: space-between; }
.monitoringWrap .arrow { width:30px; margin-right:30px; background:#d8d8d8; clip-path:polygon(0 0, 100% 50%, 0 100%); flex-shrink:0; }
.monitoringWrap .mot { flex-grow:1; width:20%; }
.monitoringWrap .mot span { display:block; width:100%; width:100%; text-align:center; color:#fff; }
.monitoringWrap .mot01 span { height:4.6rem; line-height:4.6rem; background:var(--blueB); }
.monitoringWrap .mot01 span + span { margin-top:1px; }
.monitoringWrap .mot02 { background:var(--blue01); }
.monitoringWrap .mot03 { background:var(--blue); }
.monitoringWrap .mot02,
.monitoringWrap .mot03 { display:flex; align-items:center; padding:1.5rem; }

.esgVisionWrap .box .cntsBoxWrap.flex.typeNew > .cntsBox { margin-right:2.0rem; position:relative; }
.esgVisionWrap .box .cntsBoxWrap.flex.typeNew > .cntsBox:last-child { margin-right:0;}
.esgVisionWrap .box .cntsBoxWrap.flex.typeNew > .cntsBox:after { display:block; width:2.0rem; height:1px; content:''; background:var(--blueB); left:100%; top:50%; position:absolute; }
.esgVisionWrap .box .cntsBoxWrap.flex.typeNew > .cntsBox:last-child:after { display:none; }
.esgVisionWrap .box .cntsBoxWrap.flex.typeNew > .cntsBox .ctTit { margin-bottom:0; }
.esgVisionWrap .box .cntsBoxWrap.flex.typeNew > .cntsBox .ctTit strong { color:var(--blueB); font-weight:500; font-size:1.7rem; display:block; margin-top:1rem; }
.esgVisionWrap .box .cntBoxNew { position:relative; }
.esgVisionWrap .box .cntBoxNew:before { display:block; content:''; width:1px; height:2.0rem;background:var(--blueB); margin:0 auto; }
.esgVisionWrap .box .cntBoxNew .stitle { border:1px solid var(--blueB); padding:0.5em; font-size:1.7rem; background:#f1f1f1;  }
.esgVisionWrap .box .cntBoxNew .cntsBox { background:#f1f1f1; }
.esgVisionWrap.complianceMng .box:after { clip-path: polygon(50% 0, 0 100%, 100% 100%); margin:0.5rem auto 1px; width:50%; height:2.5rem; }

.complianceStepWrap { display:flex; justify-content: space-between; margin-top:2.0rem; }
.complianceStepWrap .complianceStep { width:30%; flex-grow:1; margin-right:1px; }
.complianceStepWrap .complianceStep:last-child { margin-right:0; }
.complianceStepWrap .complianceStep .stepTit { font-size:1.8rem; font-weight:700; text-align:center;  padding:1rem; color:#fff; position:relative; }
.complianceStepWrap .complianceStep .stepTit:before { display:block; content:''; width:26px; height:26px; background:url("../images/sub/arw_b.png")center no-repeat;
position:absolute; left:0; top:50%; transform:translate(-50%, -50%); z-index:2; }
.complianceStepWrap .complianceStep:first-child .stepTit:before { display:none; }
.complianceStepWrap .complianceStep .stepCnts { padding:1.0rem; font-size:1.6rem; }
.complianceStepWrap .complianceStep .stepCnts ul li+li { margin-top:0.3rem; }
.complianceStepWrap .complianceStep:nth-child(1) .stepTit { background:#78bec6;  }
.complianceStepWrap .complianceStep:nth-child(2) .stepTit { background:#449bc0; }
.complianceStepWrap .complianceStep:nth-child(3) .stepTit { background:#1e7fb1; }
.complianceStepWrap .complianceStep:nth-child(1) { border:1px solid #78bec6; }
.complianceStepWrap .complianceStep:nth-child(2) { border:1px solid #449bc0; }
.complianceStepWrap .complianceStep:nth-child(3) { border:1px solid #1e7fb1; }
.complianceStepWrap .complianceStep:nth-child(1) .stepCnts p { color:#78bec6; }
.complianceStepWrap .complianceStep:nth-child(2) .stepCnts p { color:#449bc0; }
.complianceStepWrap .complianceStep:nth-child(3) .stepCnts p { color:#1e7fb1; }

/* 20240628 추가 */
.gvMsg { display:flex; justify-content:space-between; }
.gvMsg .msgRf { margin-top:10px; }
.gvMsg .msgSign { display:flex; gap:10px; align-items:center; margin-top:20px; }
.gvMsg .msgSign img {width:60px; }
.gvMsg .pic { width:190px; flex-shrink:0; }

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.monitoringWrap .arrow { width:20px; margin-right:10px; }

	.complianceStepWrap { flex-wrap:wrap; }
	.complianceStepWrap .complianceStep { width:100%; margin-right:0px; margin-bottom:1px; }
}

@media all and (max-width: 559px) {
	.basic.ruleTable th,
	.basic.ruleTable td { display:block; width:100%; }

	.tab_content .topTitle { font-size:2.0rem; }
	.monitoringWrap { flex-wrap:wrap; }
	.monitoringWrap .mot  { width:100%; }
	.monitoringWrap .arrow { width:100%; height:20px; margin-bottom:5px; clip-path:polygon(0 0, 100% 0, 50% 100%); }
	.monitoringWrap .mot01 { display:flex; flex-wrap:wrap; justify-content: space-between; }
	.monitoringWrap .mot01 span { width:45%; height:4rem; line-height:4rem; margin:1px; flex-grow:1; }

	.esgVisionWrap .box .cntsBoxWrap.flex.typeNew > .cntsBox { margin-right:0; }
	.esgVisionWrap .box .cntsBoxWrap.flex.typeNew > .cntsBox:after { display:none; }

	/* 20240628 추가 */
	.gvMsg { flex-direction: column; }
	.gvMsg .msgSign { margin-top:10px; }
	.gvMsg .pic { width:100%; text-align:center; }
}

/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 거버넌스(G) - 윤리경영  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.list.ethics li { position:relative; padding-left:70px; }
.list.ethics li .num { position:absolute; left:0; top:0.1rem; font-weight:500;  }

/* ================================== Mobile css ================================== */
@media all and (max-width: 559px) {
	.list.ethics li { padding-left:50px; }
}

/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 거버넌스(G) - 리스크 관리  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.riskProcesswrap {}
.riskProcesswrap .riskProcess { display:flex; justify-content:space-between; text-align:center; font-size:1.6rem; /*letter-spacing:-0.09em;*/ line-height:1.1; }
.riskProcesswrap .riskProcess .text { display:block; padding:1.2rem 0.5rem; /*height:4.8rem;*/ }
.riskProcesswrap .riskProcess .riskTit { width:160px; flex-shrink:0; display:flex; align-items:center; font-weight:500; }
.riskProcesswrap .riskProcess .riskTit .text { width:140px; border:1px solid var(--blue); flex-shrink:0; display:flex; align-items:center;}
.riskProcesswrap .riskProcess .riskTit .line { display:block; height:1px; background:var(--blue); flex-grow:1; }
.riskProcesswrap .riskProcess .riskCnts { flex-grow:1; display:flex; justify-content:space-between;}
.riskProcesswrap .riskProcess.prc05 .riskCnts { flex-wrap:wrap; }
.riskProcesswrap .riskProcess .riskCnts .text { margin:0 1px; background:var(--blue); color:#fff; flex-grow:1; font-size:1.5rem; position:relative; }
.riskProcesswrap .riskProcess .text { display:flex; align-items:center;}
.riskProcesswrap .riskProcess .text > span { display:block; width:100%; text-align:center; }
.riskProcesswrap .riskProcess .riskCnts .text:first-child { margin-left:0; }
.riskProcesswrap .riskProcess .riskCnts .text:last-child { margin-right:0; }
.riskProcesswrap .riskProcess { margin-top:2px; }
.riskProcesswrap .riskProcess.prc03,
.riskProcesswrap .riskProcess.prc05 { margin-top:30px; }
.riskProcesswrap .riskProcess .riskCnts .text.w20 { width:calc(20% - 2px) !important; }
.riskProcesswrap .riskProcess .riskCnts .text.w80 { width:calc(80% - 2px) !important; }
.riskProcesswrap .riskProcess .riskCnts .text.w40 { width:calc(40% - 2px) !important; }
.riskProcesswrap .riskProcess.prc05 .riskCnts .text .grey { color:#777; display:block; }
.riskProcesswrap .riskProcess.prc05 .riskCnts .text:nth-child(5) { margin-right:0; }
.riskProcesswrap .riskProcess.prc05 .riskCnts .text:nth-child(6) { margin-left:0; }
.riskProcesswrap .riskProcess.prc05 .riskCnts .text:nth-child(6),
.riskProcesswrap .riskProcess.prc05 .riskCnts .text:nth-child(7),
.riskProcesswrap .riskProcess.prc05 .riskCnts .text:nth-child(8) { margin-top:2px; }
.riskProcesswrap .riskProcess.prc03 .riskCnts .text:before { content:''; display:block; width:80%; max-width:120px; height:20px; background:#ccc; clip-path:polygon(50% 0, 0 100%, 100% 100%); position:absolute;
top:0; left:50%; transform:translate(-50%, -100%); }

.riskProcesswrap .riskProcess.prc02 .riskTit .text { border:1px solid var(--blue01); }
.riskProcesswrap .riskProcess.prc02 .riskTit .line { background:var(--blue01); }
.riskProcesswrap .riskProcess.prc02 .riskCnts .text { background:var(--blue01); }
.riskProcesswrap .riskProcess.prc03 .riskTit .text { border:1px solid #6d6e71; }
.riskProcesswrap .riskProcess.prc03 .riskTit .line { background:#6d6e71; }
.riskProcesswrap .riskProcess.prc03 .riskCnts .text { background:#6d6e71; }
.riskProcesswrap .riskProcess.prc04 .riskTit .text { border:1px solid #6d6e71; }
.riskProcesswrap .riskProcess.prc04 .riskTit .line { background:#6d6e71; }
.riskProcesswrap .riskProcess.prc04 .riskCnts .text { background:#efefef; color:#333; border:1px solid #6d6e71; }
.riskProcesswrap .riskProcess.prc05 .riskTit .text { border:1px solid var(--blueB); background:var(--blueB); color:#fff;  }
.riskProcesswrap .riskProcess.prc05 .riskTit .line { background:var(--blueB); }
.riskProcesswrap .riskProcess.prc05 .riskCnts .text { border:1px solid var(--blueB); color:var(--blueB); background:#fff; height:6.0rem; }

.sub4_comp { display:flex; justify-content: space-between; }
.sub4_comp > div { flex-grow:1; }
.sub4_comp .compStep { width:19rem; flex-shrink:0; margin-left:2.0rem; }
.compStep ol {}
.compStep ol li span { height:4.6rem; line-height:4.6rem; text-align:center; border:1px solid var(--blue01); width:100%; font-size:1.6rem; display:block; }
.compStep ol li:not(:last-child):after { width:10.0rem; height:1.0rem; display:block; content:''; margin:0 auto; clip-path:polygon(0 0, 100% 0, 50% 100%); background:#ccc; }

.constStep {}
.constStep ol { display:flex; justify-content: space-between; }
.constStep ol li { width:24%; flex-grow:1; margin-right:1px; text-align:center;position:relative; }
.constStep ol li:nth-child(last-child) { margin-right:0; }
.constStep ol li strong,
.constStep ol li span { display:block; width:100%; height:4.6rem; line-height:4.6rem; }
.constStep ol li strong { font-size:2.0rem; color:#fff; margin-bottom:1px; }
.constStep ol li span { font-size:1.6rem; color:#333; border:1px solid var(--blue); font-weight:500; }
.constStep ol li:nth-child(1) strong { background:#76a3ca;}
.constStep ol li:nth-child(1) span { border-color:#76a3ca;}
.constStep ol li:nth-child(2) strong { background:#67a2bb;}
.constStep ol li:nth-child(2) span { border-color:#67a2bb;}
.constStep ol li:nth-child(3) strong { background:#509eaa;}
.constStep ol li:nth-child(3) span { border-color:#509eaa;}
.constStep ol li:nth-child(4) strong { background:#2f9b9c;}
.constStep ol li:nth-child(4) span { border-color:#2f9b9c;}
.constStep ol li:not(:last-child):after { width:2.6rem; height:2.6rem; border-radius:50%; content:''; display:block; background:url("../images/sub/arw_y.png")center no-repeat;
	background-color:#fff; z-index:2; position:absolute; top:1.1rem; left:100%; transform: translateX(-50%)}

.riskTable td { font-size:1.5rem; }
.riskTable .riskIcon { width:4.6rem; margin-bottom:0.3rem; }


/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.riskProcesswrap .riskProcess { flex-wrap:wrap; margin-top:2.0rem; }
	.riskProcesswrap .riskProcess .riskTit { width:100%; flex-wrap:wrap; }
	.riskProcesswrap .riskProcess .riskTit .text { width:100%; margin-bottom:1px;}
	.riskProcesswrap .riskProcess .riskTit .line { display:none; }
	.riskProcesswrap .riskProcess .riskCnts .text { font-size:1.4rem; }
	.riskProcesswrap .riskProcess.prc03 .riskCnts .text:before { content:''; display:block; width:80%; max-width:120px; height:20px; background:#ccc; clip-path:polygon(50% 0, 0 100%, 100% 100%);
		position:absolute; top:-42px; left:50%; transform:translate(-50%, -100%); }
	.riskProcesswrap .riskProcess .text { height:auto; }
	.riskProcesswrap .riskProcess.prc04 { margin-top:1rem; }

	.sub4_comp { flex-wrap:wrap; }
	.sub4_comp .compStep { width:100%; margin-left:0rem; margin-top:2.0rem;  }
	.sub4_comp .compImg { width:100%; text-align:center; }
	.compStep ol li span { height:4.0rem; line-height:4.0rem; font-size:1.5rem; }

}

/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 데이터센터 - 정략적 성과   //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.subCntsWrap.sub5_1 h4.title03 { color:var(--blue01); color:#000; }

.table .tdTit { padding:0;   }
.table .tdTit p { color:var(--blue);/* border-top:1px solid var(--dkNavy); border-bottom:1px solid var(--dkNavy);*/ font-weight:500; padding:0.9rem; background:#f1f1f1; margin:1px 0; }
.table .tdTit p.first { border-top:0 !important;}

.tab_container.dataTab { padding-bottom:3.0rem; }
.tab_container.dataTab .tabs { border-bottom:0; margin-bottom:3.0rem; display:flex; justify-content:space-between; align-items:center; }
.tab_container.dataTab .tabs:before,
.tab_container.dataTab .tabs:after { display:block; width:10%; flex-grow:1; height:1px; content:''; background:#ccc; }
.tab_container.dataTab .tabs ul { display:flex; justify-content:center; align-items:flex-end; margin:0 1rem; }
.tab_container.dataTab .tabs ul li { margin:0 0.5rem; flex-grow:0; text-align:center; background:transparent; padding:0; border:none; width:auto; padding:1.2rem 3rem 1.1rem 3rem; border:1px solid var(--blue01);
	border-radius:2.3rem; min-width:10.0rem; }
.tab_container.dataTab .tabs ul li a { color:var(--blue01); font-weight:600; display:block; width:100%; line-height:1.2; }
.tab_container.dataTab .tabs ul li.active { background:var(--blue01); }
.tab_container.dataTab .tabs ul li.active a { color:#fff;  }
.tab_container.dataTab .tabs ul li.active:before { display:none; }
.tab_container.dataTab .tabs ul li.active a:after { display:none; }

.esgDataTabs { z-index:2; }
.tab_container.esgData { position:relative; }
.tab_container.esgData .esgDataTabs { border-bottom:2px solid var(--navy); background:#fff; }
.tab_container.esgData .esgDataTabs > ul { /*justify-content:center;*/ }
.tab_container.esgData .esgDataTabs > ul > li { flex-grow:1; background:none; padding:0; width:auto; border:0; }
.tab_container.esgData .esgDataTabs > ul > li a { color:#666; font-weight:700; display:block; width:100%; border:0; padding:0 3rem; height:4.6rem; line-height:4.6rem; width:100%; font-size:1.8rem; background:#f1f1f1;}
.tab_container.esgData .esgDataTabs > ul > li.active a { background:var(--navy); color:#fff; }
.tab_container.esgData .esgDataTabs > ul > li.active:before { display:none; }
.tab_container.esgData .esgDataTabs > ul > li.active a:after { display:none; }

table.dataTable th,
table.dataTable td { padding:0.9rem 1.5rem; line-height:1.3; }
table.dataTable thead th { font-size:1.6rem; font-weight:500; color:#000; background:#fff; border-top:2px solid var(--dkNavy); border-bottom:1px solid var(--dkNavy); background:#f1f1f1; }
table.dataTable tbody td { font-size:1.5rem; color:#777; background:#fff; border-top:1px solid #dcdcdc;  }
table.dataTable tbody th { font-size:1.5rem; color:#777; background:#fff; border-top:1px solid #dcdcdc; text-align:left; }
table.dataTable tbody .total { color:#000; font-weight:600; }
table.dataTable tfoot td,
table.dataTable tfoot th { border-top:1px solid var(--dkNavy) !important; /*background:#efefef;*/ font-weight:500; color:var(--blue); font-size:1.6rem; }
table.dataTable tfoot th { text-align:left; }
table.dataTable .lastRow td,
table.dataTable .lastRow th { /*border-bottom:1px solid var(--dkNavy);*/ }
table.dataTable tbody td.sTh { text-align:left; color:var(--blue01); font-weight:700; border-top:1px solid var(--dkNavy); }
table.dataTable {  border-bottom:1px solid var(--dkNavy); }
table.dataTable td.blank { padding:0 !important; width:1.5rem !important;}
table.dataTable sup { color:blue; }
table.dataTable small { font-size:0.6em;}
table.dataTable .rowDiv th,
table.dataTable .rowDiv td { border-color:var(--dkNavy); }
table.dataTable .tCenter { text-align:center; }
table.dataTable th { white-space:nowrap; }

table.dataTable .num { width:60px; }
table.dataTable .cnts {  }
table.dataTable .download { width:110px; }

.addText { color:#000; font-size:1.4rem; margin-top:5px; }
.graphImg { text-align:center; margin:4.0rem auto; /* background:#f1f1f1; padding:4.0rem 1.0rem;*/  }
.graphImg.mb0 { margin-bottom:0; }
.graphImg .flexBox { display:flex; justify-content:space-between; flex-wrap:wrap; }
.graphImg .flexBox .imgBox { width:47.5%; margin-bottom:4.5rem; }
.graphImg .flexBox .imgBox:nth-child(3),
.graphImg .flexBox .imgBox:nth-child(4) { margin-bottom:0; }
.graphImg .flexBox .imgBox p { font-size:1.6rem; font-weight:500; background:#e4e4e5; margin-bottom:0.5rem; color:#101010; padding:7px; }
.graphImg .flexBox .imgBox p sup { color:blue; }
.graphImg .flexBox .imgBox .addText { margin-top:1rem; text-align:left; }
.graphImg .flexBox.col04 .imgBox { width:24%; margin-bottom:0rem !important; }
.graphImg .flexBox.col02 .imgBox { margin-bottom:0; }

/* ================================== Mobile css ================================== */
@media all and (max-width: 767px) {
	.tab_container.esgData .esgDataTabs > ul > li a { padding:0 1.5rem; white-space:nowrap;}
	.tab_container.dataTab .tabs { justify-content:center; }
	.tab_container.dataTab .tabs ul li {padding:1rem 1.5rem 0.9rem 1.5rem; margin:0 1px; }
	.tab_container.dataTab .tabs ul li a { font-size:1.6rem; }
	.tab_container.dataTab .tabs:before,
	.tab_container.dataTab .tabs:after { display:none; }

	.graphImg .flexBox.col04 .imgBox { width:47.5%; margin-bottom:4rem !important; }
	.graphImg .flexBox .imgBox:nth-child(3),
	.graphImg .flexBox .imgBox:nth-child(4) { margin-bottom:0 !important; }
	.graphImg .flexBox.col02 .imgBox { width:100%; }
	.graphImg .flexBox.col02 .imgBox + .imgBox { margin-top:4rem; }
}

@media all and (max-width: 559px) {
	.tab_container.dataTab .tabs ul li {padding:1rem 1.0rem 0.9rem 1.0rem; margin:0 1px; min-width:8.0rem;}

	.graphImg .flexBox .imgBox { width:100%; margin-bottom:4rem; }
	.graphImg .flexBox .imgBox:nth-child(3) { margin-bottom:4rem; }
	.graphImg .flexBox .imgBox:nth-child(4) { margin-bottom:0; }

	table.dataTable th,
	table.dataTable td { padding:0.9rem; }
	table.dataTable .num { width:42px; }
	table.dataTable .cnts {  }
	table.dataTable .download { width:80px; }
}


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 데이터센터 - ESG평가 결과   //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
table.esgEvalTable th,
table.esgEvalTable td { padding:0.9rem 1.5rem; line-height:1.3; }
table.esgEvalTable thead th { font-size:1.6rem; font-weight:500; color:#000; background:#fff; border:1px solid #ccc; border-top-width:2px; }
table.esgEvalTable tbody td { font-size:1.5rem; color:#333; background:#fff; border:1px solid #ccc;  }


/* ---------------------------------------------------------------------------------------------------------------
///////////////////////////////////////////// 가로스크롤바  //////////////////////////////////////
-----------------------------------------------------------------------------------------------------------------*/
.scroll-bar{width:100%; padding-bottom:2rem; overflow-x: auto; overflow-y: hidden;}
.scroll-bar>.img{min-width:854px; text-align: center;}
.scroll-bar::-webkit-scrollbar{width: 0.5rem; height:100%;}/* 스크롤바의 너비 */
.scroll-bar::-webkit-scrollbar:horizontal{width:100%; height:0.5rem}
.scroll-bar::-webkit-scrollbar-thumb{height: 10%; background-color:var(--navy); border-radius: 1rem;}  /* 스크롤바의 길이 & 색상 */
.scroll-bar::-webkit-scrollbar-track{background-color: rgba(0,0,0,0.1);}/*스크롤바 뒷 배경 색상*/
.scroll-bar img{max-width:none;}