@charset "UTF-8";
main button{ font-size: 12px} 
.container{ padding-bottom: 0} 
#footer{ margin-top: 0} 
/* 메인비주얼 */
.main_visual{ position: relative; width: 100%; background:#f7f7f7}
.main_visual .swiper-wrapper{ position: relative; z-index: 1; width: 100%; max-width:1280px; margin: 0 auto;} 
.main_visual{ } 
.main_visual .swiper-slide{ position: relative; height: 400px; width: 100%; display: flex; align-items: center; background-color: #f7f7f7 } 
.main_visual .img{ position: absolute; left:0; top: 0; ;width: 100%;height:400px; object-fit: cover; z-index: 1;  background-repeat: no-repeat; background-position:38px 50%;  background-color: #f7f7f7;}
.main_visual img{ min-width: 100%; height: 560px; width: auto; object-fit: cover; display: none} 
.main_visual .v_txt{ position: relative; z-index: 2; width:410px;color: #fff; background:#0253a5;box-shadow: 10.5px 18.2px 19.4px 0.6px rgba(0, 0, 0, 0.25); padding:35px 40px; height: 280px;  } 
.main_visual .v_txt .tit{ font-weight: 500; line-height: 1.24;  letter-spacing: -0.45px; font-size:1.2857rem;} 
.main_visual .v_txt .tit strong{ display: block;font-weight: 600; font-size:2.4285rem; letter-spacing: -0.85px; margin-top: 10px} 
.main_visual .v_txt .txt{ word-break: keep-all; font-weight: 400; font-size:1.1428rem;  margin-top:15px;line-height: 1.5;  letter-spacing: -0.4px; } 
.slide_tool{ position: absolute; z-index: 2; bottom:90px; width: 100%; max-width: 1200px; left: 50%; transform: translateX(-50%); display: flex; align-items: center} 
.main_visual .swiper-button-prev, .main_visual .swiper-button-next{ display: none } 
.main_visual.swiper-container-horizontal > .swiper-pagination-bullets{ position: relative; width: auto; bottom: auto; left: auto} 
.main_visual .swiper-pagination{ position: relative; opacity: 1; transition: none; line-height: 15px} 
.swiper-pagination-clickable .swiper-pagination-bullet{ width: 10px; height:5px; margin-right: 5px; opacity: 1; background:rgba(255,255,255,0.76); transition:width .3s ; border-radius: 0; vertical-align: middle; margin-top: -2px} 
.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:25px; background: #fff;  } 
.play_pause{ line-height: 1}
.swiper-button-play{ display: none;font-size: 0} 
.swiper-button-pause{ font-size: 0;}
.swiper-button-play:before, .swiper-button-pause:before{font-style: normal; font-weight: normal; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "remixicon"; content: "\EFDA"; color: rgba(255,255,255,0.6); font-size: 15px; line-height: 15px}
.swiper-button-play:before{content: "\F012";} 
@media screen and (min-width:1300px) {
	.main_visual .img:before{ content: ""; display: block; width: 60px; height: calc(100% + 50px); background:#f7f7f7; position: absolute; left:-40px; top: 0; z-index: 1}
}

/************ 
컨텐츠 
************/
.contentWrap{ margin: 4rem auto 0 auto; padding: 0 40px; width: 100%; max-width: 1280px } 
.contentWrap h2{ font-size:  1.2857rem; font-weight: 600; color: #222;  padding-bottom: 14px; position: relative }
.contentWrap .blind{ padding: 0 !important; margin: 0 !important} 
/* 더보기 버튼 기본 */
.bt_more{ position: absolute; right: 0; top:-3px; width: 30px; height: 30px; display: block ;  } 
.bt_more:before, .bt_more:after{ content: ""; display: block; width: 19px; height: 1px; background: #606060;  position: absolute; left:6px;top: 50%} 
.bt_more:after{ transform: rotate(90deg);  } 
/* 리스트 기본 */
ul.list{ display: flex;}
ul.list .img{ margin-bottom: 15px} 
ul.list .img img{image-rendering: -moz-crisp-edges; image-rendering:-o-crisp-edges;       image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;}
ul.list .tit{ font-size: 1.142rem; font-weight: 500; color: #222;  display: block; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis} 
ul.list .date{ font-size: 1rem; color: #999; font-weight: 500 } 
ul.list .dec{ font-size: 1rem;line-height: 1.29;color: #606060;height:4.08rem; margin-bottom: 15px; overflow: hidden; display: -webkit-box; word-wrap: break-word; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; width: 100%; font-weight: 200; padding-top: 5px } 
ul.list li> a{ display: block; } 
/* 탭 기본 */
.tab_list_w{ display: flex; font-size: 1.428rem;  color: #838281; width: 100%; border-bottom: 1px solid #222222; margin-bottom:0  } 
.tab_list_w li{ position: relative;} 
.tab_list_w li button{ font-size: 1.2857rem;  color: #838281; font-weight:400; padding-bottom: 10px; min-width:120px; line-height: 1.6; margin-bottom: -1px} 
.tab_list_w li.active button{ color: #222; font-weight: 600; border-bottom: 4px solid #00a6e7} 


/* 뉴스 */
.news_container{ padding: 0; display: flex; justify-content: space-between;gap:60px} 
.news_bx{ position: relative; width: 50%;} 
.news_bx ul.list{ flex-direction: column;} 
.news_bx ul.list li{ border-bottom: 1px solid #e1e1e1} 
.news_bx ul.list li:last-of-type{ border-bottom-color:#606060 } 
.news_bx ul.list a{ display: flex; flex-direction: row-reverse; justify-content: space-between ;gap:45px; align-items: center; padding: 0 30px} 

.news_bx ul.list a .img{ margin-bottom: 0; width: 170px}

.news_bx ul.list .txt{ width: calc(100% - 50px); overflow: hidden; padding: 20px 0} 
.news_bx ul.list .txt .tit{ font-size: 1.0714rem; font-weight: 400  } 

.news_bx ul.list p.date{ display: flex; flex-direction: column-reverse; text-align: center; color: #777; font-size: 0.928rem; line-height: 1.2; width: 50px; flex-shrink: 0} 
.news_bx ul.list p.date > strong{ font-size: 1.42857rem; font-weight: 600; color: #007bcb } 
/* .news_bx .tab_contents:nth-of-type(2) ul.list{ padding-top:5px} 
.news_bx .tab_contents:nth-of-type(2) ul.list a{ flex-direction: row; padding:25px 0 25px 0; gap:20px}
.news_bx .tab_contents:nth-of-type(2) ul.list li:last-of-type{ padding-bottom: 4px}  */
.news_bx ul.list .img +.txt{ padding: 0;width: calc(100% - 190px); overflow: hidden; } 
.news_bx ul.list .img +.txt p.tit{ font-weight: 500; color: #222;  font-size:1.143rem} 
.news_bx ul.list .img +.txt p.date{ font-size: 1rem; width: auto; text-align: left} 
.news_bx ul.list .img +.txt .dec{ margin-bottom: 0;-webkit-line-clamp: 2; line-height: 1.6; font-weight: 400;height:3.68rem; margin-top: 10px} 



/* 전국 수소충전소 모니터링 */
.cyber_bx{ width:570px; position: relative; flex: 1 0 570px;}
.cyber_bx h2:after{ content: ""; display: block; width: 200px; height: 4px; background:#00a6e7; position: absolute; left: 0; bottom:0  }
.cyber_bx .info_box{  display: flex; gap:10px; padding:210px 30px 40px 30px; background:#0073c3 url("../img/HST_main/monitoring.jpg") no-repeat 0 0; background-size: 100%; color: #fff; font-size: 1rem; line-height: 1.43; align-items: center; min-height: 325px} 
.cyber_bx .info_box dl{ width: 73px; height: 73px; flex-shrink: 0; background: #fff; border-radius: 100%; text-align: center; color: #222; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.2 } 
.cyber_bx .info_box dl dt{ font-size: 1rem; font-weight: 600}
.cyber_bx .info_box dl dd{ font-size: 1.572rem; font-weight: 500}
.cyber_bx .info_box dl.run{ color: #0253a5}
.cyber_bx .info_box dl.stop{color: #d54400}


.cyber_bx .info_box p{ padding-right: 20px} 
/* 자주 찾는 메뉴 */
.hot_bx{ margin-top: 60px; position: relative; display: flex; align-items: center; padding: 25px 0 30px 0; justify-content: space-between; gap:120px} 
.hot_bx:before{ content: ""; background: #0253a5; position: absolute; left: 50%; top:0; transform: translate(-50%); width: 100vw; height: 100%; z-index: -1} 
.hot_bx h2{ color: #fff; font-size: 1.4285rem; width: 130px; flex-shrink: 0; padding-bottom: 0} 
.hot_bx h2 span{ font-weight: 500; font-size: 1.0714rem; display: block} 
.hot_bx i{ display: block; overflow: hidden; margin-bottom: 5px} 
.hot_bx .list{ width: calc(100% - 130px); display: flex; justify-content: space-between; padding-right: 70px} 
.hot_bx .list li{ color: #fff; font-size:1.0714rem; font-weight: 500; text-align: center;} 
.hot_bx .list i img{ max-height:40px;max-width: 40px; } 

/* 교육조회 */
.sns_bx{ display: flex; margin-top: 60px; gap:50px; align-items: center; position: relative } 
.sns_bx h2{ font-size: 1.4285rem; line-height: 1.4; width: 260px; flex-shrink: 0; padding-right: 30px} 
.sns_bx h2 > span{ font-size: 1.1428rem; font-weight: 400; line-height: 1.5; color: #606060; display: block;margin-top: 15px} 
.sns_bx .list{ } 
.sns_bx .list li .txt{ position: relative} 
.sns_bx .list li .img{ margin-bottom: 25px} 

.sns_bx .list li a p>strong{ color: #222; font-size:1.1428rem; font-weight: 500; display: block } 

.sns_bx li .txt .badge{ position: absolute; left: 0; top:-55px} 
.sns_bx .badge > span{ display: block; width: 40px; height: 40px; font-size: 0} 
.sns_bx .badge > span:after{ width: 100%; height: 100%; display: block; font-style: normal; font-weight: normal; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: "remixicon"; content: "\EFDA"; color: #fff;background: #000; font-size: 25px; line-height: 40px; text-align: center }
.sns_bx .badge > span.youtube:after{ background: rgb(240, 48, 54);content: "\F2D4";} 
.sns_bx .badge > span.blog:after{ background: rgb(68, 194, 78) url("../img/main/blog.svg") no-repeat 50% 50%; background-size: 25px; content: "";} 
.sns_bx .badge > span.fbook:after{ background: rgb(66, 102, 175);content: "\ECBC";} 
.sns_bx .swiper-button-prev, .sns_bx .swiper-button-next{ color:#0253a5; margin-top: -50px} 
.sns_bx .swiper-button-prev{ left:270px} 
.sns_bx .swiper-button-next{ right: -40px} 
.sns_bx .swiper-button-prev:after, .sns_bx .swiper-button-next:after{ font-size:30px} 
.sns_bx .swiper-pagination{ left: 50%; bottom:0; display: none} 
.sns_bx .swiper-button-prev.swiper-button-disabled, .sns_bx .swiper-button-next.swiper-button-disabled{ color: #999} 




/* 관련사이트 */
.banner_bx{ height: 100px; display: flex; align-items: center; justify-content: space-between; width: calc(100% + 80px); margin-left: -40px; max-width: 1280px; position: relative;margin-top: 120px } 
.banner_bx:before{ position: absolute; left: 50%; top: 0; transform: translate(-50%); width: 100vw; height: 1px; background:#e1e1e1; content: ""} 
.banner_bx .swiper-container{ width: calc(100% - 100px); margin: 0; order: 1 } 
.banner_bx .swiper-wrapper{ align-items: center} 
.banner_bx .swiper-wrapper li{}
.banner_bx .swiper-wrapper li img{ width: auto; max-width: 100%; max-height: 35px;image-rendering: -moz-crisp-edges; image-rendering:-o-crisp-edges;image-rendering: -webkit-optimize-contrast;image-rendering: crisp-edges;} 
.banner_bx .slide_tool{ position: relative; width: 80px; order: 2; bottom: auto; left: auto; transform: none; justify-content: center } 
.banner_bx .swiper-button-prev:after, .banner_bx .swiper-button-next:after{ color:#606060; font-size: 15px } 
.banner_bx .swiper-button-prev{ left: 0} 
.banner_bx .swiper-button-next{ right: 0} 
.banner_bx .swiper-button-pause, .banner_bx .swiper-button-play{ position: relative; text-align: center; width: 8px; height: 15px; line-height: 15px; vertical-align: top} 
.banner_bx .swiper-button-play{ width: 20px} 
.banner_bx .swiper-button-play:before, .banner_bx .swiper-button-pause:before{ color: #606060; font-size: 20px; font-weight: normal; width: 20px; height: 15px} 
.banner_bx .swiper-button-pause:before, .banner_bx .swiper-button-pause:after{content:""; display: block; width: 2px; height: 15px; position: absolute; left: 0; background: #606060; top: 0 }
.banner_bx .swiper-button-pause:after{ left: auto; right: 0} 

@media screen and (max-width:1300px) {
	.banner_bx{width:calc(100% + 40px); margin-left: -20px; padding: 0 0px} 
}
@media screen and (max-width:1299px) {
	.main_visual .img{ background-position: 50% 50%} 
    .cyber_bx{ flex: auto} 
}
@media screen and (max-width:1280px) {
	.main_visual .v_txt{ padding-left: 40px; padding-right: 40px} 	
	.main_visual .slide_tool{ padding-left: 40px} 
    .cyber_bx .info_box{ padding-top: 170px} 
	
}
@media screen and (max-width:1100px) {
	.contentWrap{ padding: 0 20px} 	
    .cyber_bx .info_box{ flex-wrap: wrap; justify-content: center; padding-bottom: 30px} 
    .cyber_bx .info_box p{ width: 100%; padding-right: 0; padding-bottom: 12px} 
    .sns_bx .swiper-button-next{ right: -25px; } 
     .sns_bx .swiper-button-prev{ left: 285px} 
    .sns_bx .swiper-button-prev:after, .sns_bx .swiper-button-next:after{ font-size: 26px} 
   
}
@media screen and (max-width:1023px) {
	.news_container{ gap:25px} 
	.news_bx ul.list a{gap:15px; padding: 0 15px} 
	
	.cyber_bx ul.list li> a{ line-height: 1.4; padding: 0 3px} 
	.hot_bx{gap:50px}
	.hot_bx .list{ padding-right: 20px} 
	.sns_bx{ display: block} 
	.sns_bx h2{ width: 100%; margin-bottom: 20px} 
	.sns_bx h2 > span{ margin-top: 10px} 
	.sns_bx h2 br{ display: none} 
    .sns_bx .swiper-pagination{ display: block} 
    .sns_bx .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #00a6e7} 
    .sns_bx .swiper-pagination-clickable .swiper-pagination-bullet{ background: #999} 
   
}

@media screen and (max-width:767px) {	
	.contentWrap h2{ padding-bottom: 11.5px; margin-bottom: 20px} 
	.main_visual{ padding-bottom:130px; background: #fff} 
	.main_visual .swiper-slide{ align-items: flex-start} 
	.main_visual img{ display: block; height: auto} 
	.main_visual .swiper-slide, .main_visual .img{ height: auto; background: none !important} 
	.main_visual .img{ position: relative; } 
	.main_visual .v_txt{ padding: 30px 20px; position: absolute; left: 0; bottom: -90px; max-width: 70%; min-width:260px;box-shadow: 3.8px 6.5px 10px rgba(0, 0, 0, 0.09); height: auto   } 
	.main_visual .v_txt .tit{ font-size: 1.166rem; font-weight: 500} 
	.main_visual .v_txt .tit strong{ font-size: 1.8333rem; font-weight: 600}
	.main_visual .v_txt .txt{ font-size: 1rem; letter-spacing: -0.3px; line-height: 18px; margin-top: 19.5px; word-break: keep-all; font-weight: 400} 
	.swiper-pagination-clickable .swiper-pagination-bullet{ margin: 0 2px; background: #cee6ff; width: 20px; height: 6.5px} 
	.swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active, .popzone_bx .swiper-pagination-clickable .swiper-pagination-bullet.swiper-pagination-bullet-active{ width:40px; background: #00a6e7} 
	.main_visual .play_pause, .main_visual .swiper-button-prev, .main_visual .swiper-button-next{ display: none} 
	.main_visual .slide_tool{ padding: 0;  bottom: 0px; text-align: center; width: 100%} 
	.main_visual .swiper-pagination{ width: 100%; text-align: center} 
	.contentWrap{ margin-top: 50px} 
	.news_container{ flex-direction: column; gap:60px} 
	.news_container [class$=_bx]{ width: 100%} 
	.tab_list_w li button{ font-size: 17px;min-width: 100px} 
	ul.list .tit{ white-space: normal; text-overflow: inherit; } 
	.news_bx ul.list p.date{ font-size: 1rem} 
	.news_bx ul.list p.date > strong{ font-size:1.58333rem; color: #00a6e7 } 
	.news_bx ul.list .txt{ padding: 15px 0} 
	.contentWrap h2{margin-bottom: 0; border-bottom: 1px solid #606060}
	.cyber_bx .list{ padding: 30px 10px 20px 10px} 
	.cyber_bx .list li{ width: 50%; margin-bottom: 20px} 
	.cyber_bx .list i{ width: 60px; height: 60px} 
	.hot_bx{ flex-direction: column; align-items: flex-start; gap:25px; padding-bottom: 10px;} 
	.hot_bx h2{ width: 100%; border-bottom-color: #80d3f3; font-size: 1.416rem} 
	.hot_bx h2 span{ display: none} 
	.hot_bx .list{ overflow-x: auto; width: 100%; padding-bottom: 20px; width: calc(100% + 20px);gap:35px}     
	.banner_bx{ height: 70px; width: 100%; margin-left: 0; margin-top: 80px}
	.banner_bx .swiper-container{ width: 100%}
	.banner_bx .slide_tool{ display: none} 
    .news_bx .tab_contents:nth-of-type(2) ul.list{ flex-direction: row; gap:20px} 
    .news_bx .tab_contents:nth-of-type(2) ul.list a{ flex-direction: column; gap:10px; padding: 0; line-height: 1.43;} 
    .news_bx ul.list a .img, .news_bx ul.list .img +.txt{ width: 100%} 
    .news_bx ul.list .img +.txt .dec{ display: none} 
    .news_bx .tab_contents:nth-of-type(2) ul.list li{ width: 50%; border-bottom: none} 
    .news_bx ul.list .img +.txt p.tit{ font-size: 1.084rem; } 
    .cyber_bx .info_box{ padding-top: 230px} 
}


@media screen and (max-width:600px) {	
    .cyber_bx .info_box{ padding-top: 180px; min-height: auto} 
}

@media screen and (max-width:450px) {	
    .cyber_bx .info_box{ padding-top: 150px;} 
}

@media screen and (max-width:380px) {	
     .cyber_bx .info_box{ padding-top: 125px;} 
    .cyber_bx .info_box dl{ width: 62px; height: 62px} 
}