img[src$=".gif"], img[src$=".png"], img[src$=".jpg"] {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}


/*공통*/
 h2.guide {font-size:2.5rem; font-weight:700; letter-spacing:-3px;  margin-bottom:5%; text-align:center;}
.sub_vi {width:100%; display:inline-block; text-align:center; box-sizing:border-box; height:400px; position:relative; }
.sub_vi_text{line-height:2.5em ; font-weight:600; color:#fff ; position:absolute; top:50%; left:50%; transform: translate(-50%, 0%); letter-spacing:-1px; width:100%; padding:0 5%; box-sizing:border-box; }
.sub_vi_text p{font-size:2.2em; }
.sub_vi_text p span{font-size:1.3rem; font-weight:400;}
i.fa-home {font-size:21px; opacity:0.9}
.navigatonBox {width:100%; float:left; position:relative; border-bottom:1px solid #ddd; z-index: 2;}
.buttonGroup {overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;}
.navButton, .option {display: inline-block; margin-right:12px; cursor:default;}
.navButton {}
.navButton a {font-size:0.98em; line-height:45px; font-weight:400; color:#777; }
a.button_ov {font-weight:600; color:#333 !important;  }
.navButton:last-child {margin-right:20px;}
.navButton:first-child {margin-left:20px;}
.span_br {display:block}
.sub_con_menu {width:100%; box-sizing:border-box; margin:-30px auto 5% auto}
.sub_con_menu ul{max-width:1400px;margin:0 auto; text-align:center; display:flex;}
.sub_con_menu li {width:25%; display:inline-block; vertical-align:top;}
.sub_con_menu1 li{width:33.3333%;}
.sub_con_menu2 li{width:33.3333%;}
.sub_con_menu li:last-child {margin-right:0}
.sub_con_menu li a {font-weight:500; font-size:1.2rem; letter-spacing:-0.5pt; color:#333; display:block;  line-height:60px; height:60px; text-align:center; padding:0 10px; box-sizing:border-box; transition: all 0.3s ease-out; display:flex; justify-content:center; align-items:center; box-sizing:border-box;   }
.sub_con_menu li a:after{position:absolute; display:block; bottom:-1px; left:0; content:""; overflow:hidden; width:0; height:2px; transition: all 0.3s ease-out;}
.sub_con_menu li a:hover{font-weight:500; text-decoration: none; transition: all 0.3s ease-out;}
.sub_con_menu li a:hover:after{width:100%; transition: all 0.3s ease-out;}
#sub_con_menu_wrap { z-index:999 !important; width:100%; position:relative;  background:#f9f9f9; transition: all 0.2s ease-out;}
#sub_con_menu_wrap .ov{display:block; background:#6ac4f3 !important; color:#fff; font-weight:500 !important; text-decoration: none; }
#sub_con_menu_wrap .ov:after{width:100% !important; transition: all 0.3s ease-out;}






/*공통 컨텐츠*/
.sub_content{width:80%; margin:0 auto; max-width:1240px; padding-bottom:80px;}






/*회사소개 - 인사말*/
.ceo_wrap{display:flex;}
.ceo_left{}
.ceo_right{width:56%; padding:22px 0 0 60px; position: relative;}
.ceo_right:after{content:''; display:block; width:170px; height:2px; background:#3b76b5; position: absolute; top:0; left:60px;}
.ceo_right .ceo_title{font-size:3rem; margin-bottom:40px;}
.ceo_right p{font-size:1rem; font-weight:400; margin-bottom:30px; line-height:1.5em; color:#222}
.ceo_right .ceo_sign{border-top:1px solid #ddd; font-size:1rem; font-weight:500; padding-top:0.7em}
.ceo_right .ceo_sign span{font-size:1.5rem; margin-left:15px; font-weight:700}







/*회사소개 - 연혁*/
.sub_content{position: relative;}
.history{margin-bottom:50px;}
.history:after{content:''; display:block; clear:both;}
.history_left{width:45%; padding:133px 0 78px 87px; border-radius:20px; float:left; color:#fff;box-sizing:border-box;}
.history_left1{background-color:#3d74b5;}
.history_left2{background-color:#309e9e;}
.history_left span:last-child{font-size:5rem; font-family:'Montserrat'; font-weight:700; display:block;}
.history_left span:first-child{font-size:1.5rem; font-weight:500; margin-bottom:25px;}

.history_wrap{width:50%; margin-left:5%; display:inline-block; position: relative;}
.history_wrap div.in h3 {width:18%; font-family:'Montserrat'; font-size:2rem; font-weight:700; line-height:1em;}
.history_wrap div.in{padding-top:110px; margin-top:0;}
.history_wrap div.in ul {width:80%;}
.history_wrap div.in ul li{width:100%; display:flex; align-items:center; padding-bottom:64px}
.history_wrap div.in ul li:before{background-color:#cae0ef; border-radius:20%; width:15px; height:15px; display:inline-block; content:''; position:relative; z-index:999; margin-right:5%;}
.history_wrap div.in ul li span{width:140px; font-size:1.5rem; font-weight:600; color:#333; display:inline-block; font-family:'Montserrat'}

.history_line {width:1px; height:82%; top:10%; position:absolute; left:50.7%; transform:translateX(-50.7%); display:inline-block; background-color:#ddd}








/*회사소개 - 조직도*/
.chart_wrap {position:relative; box-sizing:border-box;  width:100%; display:inline-block}
.chart_wrap .box {width:200px; line-height:55px; font-size:1.2rem; font-weight:600; display:inline-block; color:#fff;  text-align:center; position:absolute; z-index:999; background-color:#309e9e; border-radius:5px;}
.chart_wrap .box:after {position:absolute; width:95%; top:10%; left:2.5%; height:80%; border:1px solid rgba(255,255,255,.5); content:''; display:inline-block; box-sizing:border-box; border-radius:5px;}
.chart_wrap .box.type1 {left:50%; margin-left:-100px; background-color:#3d74b5;}
.chart_wrap .box.type2 {left:30%; top:160px;}
.chart_wrap .box.type3 {left:30%; top:80px;}
.chart_wrap .box.type4 {right:30%; top:80px;}
.chart_wrap .box_100 {width:100%; display:flex;  justify-content :space-between;  margin-top:300px;}
.chart_wrap .box2 {width:200px; line-height:45px; font-size:1.1rem; display:inline-block; background-color:#666; color:#fff;  text-align:center;  z-index:999; border-radius:5px;}
.chart_wrap .box_80 {width:70%; margin-left:15%; display:flex;  justify-content :space-between;   margin-top:80px;}
 

.line_x {width:80%; height:1px; display:inline-block; position:absolute; background-color:#333;}
.line_y {width:1px; height:300px; display:inline-block; position:absolute; background-color:#333;}
.line_x.line-x_type1 {top:185px; width:200px; left:50%; margin-left:-200px}
.line_x.line-x_type2 {top:105px; width:200px; left:50%; margin-left:-200px}
.line_x.line-x_type3 {top:105px; width:200px; left:50%;}



.chart_wrap div.in {width:100%;  position:relative; margin-top:10px; display:flex; align-items:center; margin-bottom:20px}
.chart_wrap div.in h3 {width:18%; font-family:'Montserrat'; font-size:2rem;   font-weight:700; margin-bottom:0; line-height:1em;}
.chart_wrap div.in ul {width:80%;  }
.chart_wrap div.in ul li   {width:100%; display:flex; align-items:center;  padding-bottom:5px}
.chart_wrap div.in ul li:before {width:15px; height:15px; border:4px solid #af1e23; display:inline-block; content:''; background-color:#fff; position:relative; z-index:999;  border-radius:50%;  margin-right:5%; vertical-align:-3px }
.chart_wrap div.in ul li span {width:50px; font-size:1.2rem; font-weight:500; color:#333;  display:inline-block ; font-family:'Montserrat'; }








/*회사소개 - 오시는길*/
.map{align-items:flex-end;}
.map_left iframe{border:1px solid #ddd !important;}
.map_left{width:70%}
.map_left p{background:#3a7ab4; color:#fff; display:inline-block; padding:10px 20px; font-size:1.2rem; font-weight:500; border-radius:5px 5px 0 0;}
.map_right{width:30%; padding-left:3%}
.map_right p{line-height:1.5;}
.map_right p:nth-child(2){font-weight:600; color:#333; font-size:1.3rem;}
.map_right p:nth-child(3), .map_right p:nth-child(4){font-weight:500; color:#333; font-size:1rem;}







/*사업소개 - 수소경제*/
	
.sub_title{margin-top:100px; color:#333; font-size:1.8rem; margin-bottom:20px}
.sub_content1 > p{text-align:center; border:1px solid #ddd; padding:1em;}
.sub_content1 img{ max-width:100%; height:auto;}
.text_wrap{margin-top:20px; border:1px solid #ddd; padding:2em;}
.text_wrap p{line-height:1.3; margin-bottom:20px; font-size:1.1rem; position: relative; color:#666; display:list-item; list-style-type:disc;}
/*.text_wrap p:after{content:''; display:block; width:5px; height:5px; background:#555; position: absolute; top:50%; left:0; transform:translateY(-50%); border-radius:50%;}*/
.text_wrap p:last-child{margin-bottom:0;}

.bgfix{ background-repeat:no-repeat; background-position:50% 50%; background-size:cover !important; position:absolute; left:0; top:0; width:100%; height:100%}
.bgfix1{background:url('/common/img/sub/0621_img1.jpg') no-repeat 50% center;}
.bgfix2{background:url('/common/img/sub/0621_img2.jpg') no-repeat 50% center;}
.bgfix3{background:url('/common/img/sub/0621_img3.jpg') no-repeat 50% center;}
.resize{ position:relative; display:block; height:0; padding-bottom:100%; box-sizing:border-box;}
.resize .re{ position:absolute; left:0; right:0; top:0; bottom:0; height:100%; box-sizing:border-box;}
.resize.s2 { padding-bottom:56.25%;}

.content_box{}
.content_box:before{content:''; display:block; clear:both; width:1920px; height:auto; background:#ddd}
.content_box ul{flex-wrap:wrap; justify-content:space-between;}
.content_box ul li{width:32%; background:#fff; box-shadow:0.75em 0.75em 0.75em rgb(9 50 145 / 8%);}
.content_box ul li dl{padding:2.5em 2em; position: relative;}
.content_box ul li dl dt{font-weight:700; color:#3d74b5; font-size:1.3rem; margin-bottom:10px}
.content_box ul li dl .border_title{position: absolute; top:0; left:1.75em; width:3.75em; height:3.75em; background:#ddd; border-radius:100%; color:#fff; transform:translateY(-50%); padding-left:0;}
.content_box ul li dl .border_title span{display:flex; align-content:center; align-items:center; justify-content:center; height: 100%; font-weight:700; font-size:1.3rem;}
.content_box ul li dl dd{font-size:.95em; color:#555; line-height:1.5; margin-bottom:5px; position: relative; list-style-type:disc; display:list-item;}
.content_box ul li dl .border_title:after{display:none;}
/*.content_box ul li dl dd:after{content:''; display:block; width:5px; height:5px; background:#555; position:absolute; top:50%; left:0; transform:translateY(-50%); border-radius:50%;}*/
/*.content_box ul li dl dd .title_round{background:#555; width:5px; height:5px; border-radius:50%; margin-right:0.75em; display:inline-block; vertical-align:middle;}*/
sub{font-size:small; margin-top:0.5em;}

.content_box ul li:nth-child(1) dl .border_title{background:#309e9e}
.content_box ul li:nth-child(2) dl .border_title{background:#666}
.content_box ul li:nth-child(3) dl .border_title{background:#3d74b5}
.content_box ul li:nth-child(1) dl dt{color:#309e9e}
.content_box ul li:nth-child(2) dl dt{color:#666}
.content_box ul li:nth-child(3) dl dt{color:#3d74b5}

.bottom_title{margin-top:1.5em; font-weight:500; color:#777;}




.page_tit > .t0{ font-size:1.750em; color:#3d74b5; font-weight:500;}
.page_tit{ margin-bottom:1.75em; box-sizing:border-box;}
.page_tit.icon:after{ content:""; display:inline-block; width:1px; height:2em; margin:1.5em .375em 0 .375em; background:#111;}
.page_txt > .t1{ font-size:1.125em; line-height:1.8; font-weight:400; }

.flex.wrap{ flex-wrap:wrap;}

.page_icon > img{width:2.5em; margin-bottom:1em}

.page_layout{ position:relative; padding:2em 0; box-sizing:border-box;}

.page_layout .wrap_in .img_wrap{ position:relative; width:42%; }
.page_layout .wrap_in .img_wrap img{box-shadow:.75em .75em .75em rgba(9,50,145,.15); }


.page_layout .wrap_in .imgBig{ width:55%;}
.page_layout .wrap_in .imgSmall{ width:35%;}
.page_layout .wrap_in .mov_wrap{ position:relative; width:65%;}
.page_layout .wrap_in .mov_wrap .mov{ z-index:2; background:#888;}
.page_layout .wrap_in .mov_wrap .mov .vod{ width:100%; height:100%;}
.page_layout .wrap_in .mov_wrap:before,
.page_layout .wrap_in .mov_wrap:after { content:""; z-index:1; position:absolute; border-radius:100%;
-webkit-animation: circleSize 3s 0s ease-in-out infinite;
		animation: circleSize 3s 0s ease-in-out infinite;}
.page_layout .wrap_in .mov_wrap:before{ width:4.5em; height:4.5em; top:2em; left:-3.5em; background:#ffcb6a; opacity:.2;}
.page_layout .wrap_in .mov_wrap:after { width:15.5em; height:15.5em; right:-5.5em; bottom:-2em; background:#093291; opacity:.18}
.page_layout .wrap_in .con_wrap{ flex:1; padding:1em 0 0em 5.5em;}

.page_layout.layoutR .wrap_in .img_wrap:before{ left:-3.5em; right:auto;}
.page_layout.layoutR .wrap_in .con_wrap{ order:-1; padding-left:0; padding-right:5.5em;}

.page_layout.layoutL .layout_img{ left:0;}
.page_layout.layoutL .layout_con{ padding-left:40%; padding-right:4.5em; margin-left:4em;}
.page_layout.layoutL .layout_con:before{ left:30%; right:0;}






/* 사업소개 - 수소산업로드맵 */
.pa100{ position:absolute; z-index:inherit;  left:0; top:0; width:100%; height:100%}
.step_list{display:flex; }
.step_list > li{ flex:1;   }
.step_list > li:nth-child(even){margin-top:6em;}
.step_list > li > .inner{ position:relative;  }
.step_list > li .shape{ transform:rotate(0); transition:all 3s ease-out; }
.step_list > li .shape svg{ width:100%; height:100%;}
.step_list > li .con_wrap{ position:absolute; top:50%; left:0; width:100%; text-align:center; transform: translate(0, -50%); }
.step_list > li .in_ac .con_wrap{ flex:1; min-height:80%;}
.step_list > li:hover .shape{ transform:rotate(360deg);}
.step_list > li:hover .shape #polygon{ fill:#ed1c24; }
.step_list.flexW4 > li:nth-child(n+5) > .inner:after{ left:0; right:auto; transform:translate(-50%,-50%) rotateY(-180deg);}


.shape_txt{text-align:center; font-size:1.1rem; font-weight:500; padding:18% 16% 1em 16%; position: relative;}
.shape_txt p:nth-child(1){font-weight:700; display:inline-block; padding:0.5em 2.2em; border-radius:50px; color:#fff; font-size:0.9rem; position: relative;}
.shape_txt p:nth-child(2){margin:1em 0 0.5em 0}
.shape_txt p:nth-child(1):after{content:''; display:block; margin:0.5em auto; width:1px; height:1em; background:#000; z-index:-1; position: absolute; top:80%; left:50%; transform:translate(-50%,-50%);}
.shape_txt span{font-size:2rem; font-weight:700}
.step_list > li:nth-child(1) .shape_txt p:nth-child(1){background:#6ac4f3;}
.step_list > li:nth-child(2) .shape_txt p:nth-child(1){background:#309e9e;}
.step_list > li:nth-child(3) .shape_txt p:nth-child(1){background:#3d74b5;}
.step_list > li:nth-child(4) .shape_txt p:nth-child(1){background:#6ac4f3;}
.step_list > li:nth-child(5) .shape_txt p:nth-child(1){background:#309e9e;}
.step_list > li:nth-child(1) .shape_txt span{color:#6ac4f3;}
.step_list > li:nth-child(2) .shape_txt span{color:#309e9e;}
.step_list > li:nth-child(3) .shape_txt span{color:#3d74b5;}
.step_list > li:nth-child(4) .shape_txt span{color:#6ac4f3;}
.step_list > li:nth-child(5) .shape_txt span{color:#309e9e;}






.layer .bg{display:none;}
.pop-layer .pop-container{display:none;}
.pop-layer .btn-r{display:none;}



 @media all and (max-width:1500px) {
 .ceo_right{padding:50px 0 0 20px}
 .ceo_left img{max-width:100%; height:100%;}
 .ceo_right .ceo_title{font-size:2.5rem}
 .ceo_right:after{left:20px;}
} 
 @media all and (max-width:1440px) {
 .shape_txt{font-size:.9rem; padding:12% 16% 1em 16%;}

 }


 @media all and (max-width:1400px) {
.sub_section .sub_section_wrap .page_layout .wrap_in {flex-direction:column; align-items:center;}
.page_layout .wrap_in .con_wrap{ flex:1; padding:0;}
.page_layout .wrap_in .img_wrap{margin-bottom:4em; width:100%; text-align:center;}

}



 @media all and (max-width:1350px) {
 .ceo_wrap{display:flex; flex-direction:column; text-align:center;}
 .ceo_right{width:100%; padding:50px 0 0 0; margin-top:50px;}
 .ceo_right:after{left:50%; transform:translateX(-50%)}
 .ceo_right p br{display:none;}
 .ceo_left img{content:url("/common/img/sub/ceo_img11.jpg")}
 .ceo_title br{display:none;}

/*.sub_content01{overflow:hidden;}*/
} 


 @media all and (max-width:1300px) {
.chart_wrap .box.type2 {left:0;  top:160px; }
.chart_wrap .box.type3 {left:0;  top:80px; }
.chart_wrap .box.type4 {right:0;  top:80px; }
.line_x.line-x_type1 {top:180px; width:50%; left:0; margin-left:0}
.line_x.line-x_type2 {top:100px; width:50%; left:0; margin-left:0}
.line_x.line-x_type3 {top:100px; width:50%; right:0;}
.busi_span1{display:block}
 }

 @media all and (max-width:1200px) {
.sub_content{width:90%}
.sub_con_menu{margin:5% auto 5% auto !important;} 
} 


 @media all and (max-width:1024px) {
.chart_wrap {padding:0; width:100%; margin-left:0;}
.chart_wrap .box {width:150px; line-height:45px  }
.chart_wrap .box:after {display:none}
.chart_wrap .box.type1 {margin-left:-75px}
.chart_wrap .box_80{width:100%; margin-left:0; display:flex;  justify-content:space-between;   margin-top:80px;}
.chart_wrap .box2{width:32%; font-size:1rem}
.chart_wrap div.in {display:inline-block; margin-bottom:8px; padding-bottom:8px;  border-bottom:1px solid #ddd; }
.chart_wrap div.in h3 {width:100%;  font-size:1.5rem; margin-bottom:10px}
.chart_wrap div.in ul {width:100%}
.chart_wrap div.in ul li span {font-size:1rem}
.chart_wrap div.in ul li:before {display:none}
}





 @media all and (max-width:1000px) {
.step_list{display:block; margin:0 auto; overflow:hidden;}
.step_list:after{content:''; display:block; clear:both;}
.step_list > li{float:left; width:31.3%; padding:1%;}
.step_list > li:nth-child(even){margin-top:0;}
.shape_txt{font-size:1rem; padding:18% 16% 1em 16%;}
}










 @media all and (max-width:950px) {
 .ceo_right .ceo_title{font-size:6.5vw; margin:0 auto 40px auto;}
 .ceo_right .ceo_title span{display:block;}




 .history{flex-direction:column;}
 .history_left{padding:22px 0; width:100%; height: 100px; text-align:center; margin-bottom:10px;}
 .history_left span:first-child{font-size:1rem;}
 .history_left span:last-child{font-size:2rem}
 .history_wrap{margin-left:0; width:100%;}
 .history_wrap div.in ul li span{font-size:1rem; width:100px;}
 .history_wrap div.in h3{font-size:1.5rem; margin-bottom: 10px;}
 .history_wrap div.in{padding-top:20px; flex-direction:column; align-items:flex-start; }
 .history_wrap div.in ul li{padding-bottom:14px;}
 .history_wrap div.in ul li:before{width:6px; height:6px; border-radius:50%; margin-right:3%;}
 .history_wrap div.in ul li span{font-size:1rem; width:100px;}
 .history_line{display:none;}




 .map{flex-direction:column;}
 .map_left{width:100%}
 .map_left iframe{border:none !important;}
 .map_left p{font-size:1rem;}
 .map_right{width:100%; padding-left:0; background:#f7f7f7; box-sizing:border-box; padding:15px;}
 .map_right p:first-child{display:none}
 .map_right p:nth-child(2){font-size:1.05rem;}
 .map_right p:nth-child(3), .map_right p:nth-child(4){font-size:0.97rem;}


} 

 @media all and (max-width:900px) {
 .m_none{display:none !important}
.pc_none{display:block !important; margin-bottom:40px;}
.sub_vi{height:300px;}
.sub_vi_text{transform:translate(-50%,-10%)}
.content_box ul{flex-direction:column; }
.content_box ul li{width:100%; margin-bottom:1em; box-shadow:none; border:1px solid #ddd;}
.busi_span1{display:inline-block;}
.sub_title{font-size:1.5rem;}
h2.guide{font-size:2rem;}






 .img_p_wrap{cursor:pointer;}
.sub_content1 > p:hover{border:1px solid #000;}
.layer {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:100;}
.layer .bg {position:absolute; top:0; left:0; width:100%; height:100%; z-index:999; background:#000; opacity:.7; filter:alpha(opacity=70); display:block;}
.layer .pop-layer {display:block;}

.pop-layer {display:none; position: absolute; top: 50%; left: 50%; width: 92%; height:auto; z-index: 999999999999999999999999999999999; transform:translate(-50%,-50%)}
.pop-layer .pop-container {width:100%; float:left; background:#fff; display:block; border-top:1px solid #ddd;}
.pop-layer .pop-container ul {width:100%; float:left; }
.pop-layer .pop-container ul li {width:100%; float:left; padding:3% 0; text-align:center;}
.pop-layer p.ctxt {color: #666; line-height: 25px;}
.pop-layer .btn-r {width: 100%; text-align:right; padding:1em 1em 1em 0; box-sizing:border-box; background:#fff; display:block;}

a.cbtn {display:inline-block; height:25px; padding:0 14px 0; border:1px solid #304a8a; background-color:#3f5a9d; font-size:13px; color:#fff; line-height:25px;}
a.cbtn:hover {border: 1px solid #091940; background-color:#1f326a; color:#fff;}

} 



 @media all and (max-width:800px) {
.step_list > li{width:48%; box-sizing:border-box;}
.shape_txt{font-size:1.2rem; padding:24% 16% 1em 16%;}

.layer{display:block}
.layer .pop-layer {display:block;}
.layer .bg{display:block;}
}






 @media all and (max-width:600px) {
.ceo_right p br{display:none}
.page_layout .wrap_in .img_wrap img{max-width:100%;}
.page_txt > .t1{font-size:1rem;}
.sub_title{margin-top:50px;}
.text_wrap{padding:2em 0.5em 2em 1.5em;}
.content_box ul li dl{padding:2.5em 0.5em 2.5em 1.5em}
.text_wrap p{font-size:1rem;}
h2.guide{font-size:1.8rem;}
.bottom_title{font-size:.9rem;}
.m_table_none{display:none;}
.history_wrap div.in ul{width:100%;}
.pop-layer .btn-r{padding:0.5em 0.5em 0.5em 0;}
.shape_txt{font-size:1rem; padding:18% 16% 1em 16%;}
} 


@media  all and (max-width:500px){
.shape_txt{font-size:.9rem; padding:12% 16% 1em 16%;}
.shape_txt p:nth-child(1):after{display:none;}
.shape_txt p:nth-child(2){margin:0.2em 0;}
.shape_txt span{font-size:1.5rem;}
}