@charset "utf-8";
@import url(https://cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css); 
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}
@font-face { font-family: 'Noto Sans KR-5Medium'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/Noto Sans KR-5Medium.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {    font-family: 'SBAggro';   font-weight: 500;  font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.eot?#iefix') format('embedded-opentype'), url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.woff2') format('woff2'),
  url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroMedium.ttf') format("truetype"); font-display: swap;}
@font-face {font-family: 'SBAggro'; font-weight: 700; font-style: normal; src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.eot'); src: url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.eot?#iefix') format('embedded-opentype'),url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.woff2') format('woff2'),
  url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.woff') format('woff'), url('https://cdn.jsdelivr.net/gh/webfontworld/sandbox/SBAggroBold.ttf') format("truetype"); font-display: swap; }


/* common _ jyp */ 
* {
  font-family: 'NanumSquareNeo';
  /*font-family: 'SBAggro';*/
}
body {
  font-family: 'Noto Sans KR', serif;
  color:#000;
  letter-spacing:0;
  -webkit-text-size-adjust: none;  
}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,button,input {
  color:#333;
  margin:0;
  padding:0;
  font-size:16px;  
  line-height:1.756em;
  font-weight:500;
  letter-spacing:-0.03em;
}
table,td,th {     
  font-family: 'NanumSquareNeo';
  color:#000;
}
table {
  border-collapse:collapse;
  border-spacing:0
}
ul,ol,li {
  list-style:none;
}
a,img {
  outline:0;
  text-decoration:none;
  border:0;
}
a:link,a:visited,a:active,a:hover {
  outline:0;
  text-decoration:none;
  color:#000;
}

img.fit {
  width:100%;
}
img.max-fit {
  max-width:100%;
}
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6, {
  margin-top:0;
  font-family: 'NanumSquareNeo';

}
.row {
  padding-right:0px !important;
  padding-left:0px !important
}
.row::after {
  clear:both;
}
.row::before,.row::after {
  display:table;
  content: " ";
}

[canvas=container],
[off-canvas] {
  padding: 10px 20px;
}

[class*=js-] {
  cursor: pointer;
}

#board-list-search .write_btn li p {background:#029147 !important}

/* Overline From Center */

.P-nav-item .over{
  display: block;
  position: absolute;
  overflow: hidden;
  background: #00a14e;
  width: 0; height: 3px;
  top: 72px; left: 50%;
  -webkit-transition: width 0.5s, left 0.5s;
  transition: width 0.5s, left 0.5s;
}

.P-nav-item .active .over, .P-nav-item:hover .over{
  position: absolute;
  z-index: 1;
  width: 100%; left: 0%;
  -webkit-transition: width 0.5s, left 0.5s;
  transition: width 0.5s, left 0.5s;
}



/* Footer */
.P-footer {
  width: 100%;
  float: left;
  position: relative;
}
.P-footer2 {
  clear:both;
  padding-bottom: 20px;
  width:100%;
  background:#fff;
}
.f_wrap{width: 100%;position: relative;padding: 40px 0% 60px 0%;background:#262626;float: left;}
.footer-info {width: 100%;margin-bottom: 100px;max-width: 1300px;margin: auto;position:relative;}
.copy-item{display:flex;}

.copy-item li:first-child{margin-right:290px;}
.footer_m{display: none;}
.copy-item p{font-size: 14px;font-weight: 300;color: #aaa;line-height: 1.4;margin-bottom: 10px;}
.footer-info li span{margin-right: 10px;}
.footer-info li span span{font-weight: 500;margin-right: 5px;color: #8a8a8a;}
.footer_call_wrap{width: 100%;    background: #fff;border-top:1px solid #ccc;}
.f_line{width: 100%; height: 1px; background: #ccc; top: 70px;position: absolute;left: 0;}
.fsymbol {float:right;right:0;top:-5px;position:absolute;}


/*
.call_wrap{width: 100%;max-width: 1300px; height: 70px;margin: auto;}
.call_tit{color: #000;font-size: 18px;font-weight: 400;line-height: 70px;width: 50%; float: left;}
.call_num{float: right;line-height: 70px;}
.call_num a{color: #000;;font-family: 'GmarketSansBold';font-size: 22px;letter-spacing: 0px;}
.call_num a:active, a:visited{color: #000;}
.call_num div{width: 22px;height: 22px;display: inline-block;margin-bottom: -4px;margin-right: 5px;}
.call_num span{font-size: 18px;font-weight: 400;margin-right: 10px;font-family:'Noto Sans KR';letter-spacing: -1px;}
*/
/* Footer 끝*/
#totalANDzeroweb {font-size: 12px;position: relative;margin: 0 auto;padding: 0 !important;    width: 100% !important;max-width: 1200px !important;}
#totalANDzeroweb div{font-size: 12px;color: #555;text-align: left;position: absolute;z-index: 3;left: 50%; transform:translate(-50%); bottom: 35px;}
#menu_box { display:none; }
}



/* all  */
@media all{
  dl {
    padding-top: 5% !important;
    padding-bottom: 5% !important;
  }

  a{
    font-family: 'Noto Sans KR';
  }
}
#SUB_Scontent {margin: 0 auto;}
/*.swiper-container {
position: relative;
width: 50%;
float: left;
overflow: hidden;
}*/
.sw_wrap{
  width:100%;
  float: left;
  padding-bottom: 5%;
}

.m { display: none; }
.t { display: none; }
.pc { display: block; }

.paginate_complex strong{color:#333 !important; border-bottom: 2px solid #333 !important;}
.menu_top ul li{border-bottom:1px solid #eee;}
.menu {max-width:1300px !important; margin: 0 auto;}
.P-header {
  width:100%;
  margin:0 auto;
  height:80px;
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  background: #fff;
  display: inline-block;
  transition-duration: 0.5s;


}
.P-header.shrink {height:65px; background:#fff;}
.P-header a { 
  font-family: 'NanumSquareNeo';
  font-size:18px;
  color:#fff;
  font-weight:500;

}
.P-header a.shrink {color:#fff;}
.P-header a:first-child {margin-left:0;}
.P-header a:last-child {margin-right:0;}
.P-nav-item:hover, .P-nav-item:focus {
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  font-family: 'NanumSquareNeo';
}
.P-member {display: none;}
.P-nav-logo {
  height: 70px;
  position: relative;
  font-size: 30px;
  line-height: 90px;
  float: left;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  color: #000; 
  display: flex;
  padding-bottom:10px;
  justify-content: center;
  align-items: center;
}
.wrap > a {width:30%; float:left;}
.P-nav {float: right;color:#000}
.P-nav li:nth-child(2) {position:relative;}
.P-nav-item {
  position: relative;
  display: block;
  font-weight:500;
  text-align: center;
  line-height: 70px;
  border-bottom: 0px solid #00349d;
  transition-duration: .2s;
  font-size: 20px;
  font-family: 'NanumSquareNeo';
  margin-left:50px;
}
.P-nav-item.shrink .over{position:absolute; top:57px;}
.P-nav-item.shrink {font-size: 16px; line-height:50px;}
.P-nav-logo.white {display:none;}
.P-nav-logo.white.shrink  {display:block;}
.P-nav-logo.blue.shrink  {display:none;}
/*로고 끝*/
#img-row-cover1 .col-lg-3:hover{border: 1px solid #029147 !important;}
#img-row-cover1 .col-lg-3:hover .img-title p{color:#029147 !important;}

.wrap {
  width: 100%;
  max-width:90%;
  margin: auto;margin-top: 6px;
}
.wrap_in {
  height: 60px;
  margin:0 auto;
}  
.visible-lg {
  display: flex !important;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
}
.hidden-lg {display:none;}

.content {
  width:100%;
  height:650px;
  position: relative;
}  

.main_bg{
  background:url("/images/main/main.png") no-repeat center center;
  background-size: cover;
  height: 100%;
}      

.main_bg_box1{
  width: 100%;
  background:url("/images/main/main_bg2.png") no-repeat;
  background-size: contain;
  background-position:center;
  overflow:hidden;
} 
.main_tit{position:absolute; top:60%; left:50%; transform:translate(-50%, -50%); text-align:center;}
.main_tit h1{font-size:65px; line-height:1.5; font-weight:800; letter-spacing:-2px; color:#fff; }
.main_tit h1 span{font-size:20px; letter-spacing:20px; color:rgba(255, 255, 255, 0.5); font-weight:normal;}
.main_tit .main_btn{border:1px solid #fff; display:inline-block; padding:10px 30px; color:#fff !important; margin-top:50px;
  border-radius:50px;}
.main_tit .main_btn a{color:#fff;  padding: 10px 30px;}
.main_btn:hover{/*background-color:#00a14e;*/ color:#fff;}
.main_btn:after{
  content: '';
  position: absolute;
  z-index: -1;
  transition: all 0.5s;
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  background: #00a14e;
}
.main_btn:hover:after{
  width: 100%;
}
.main_btn{

  color: #888;
  border: 0;
  font-size: 1.125em;
  letter-spacing: 0px;

  cursor: pointer;
  display: inline-block;
  margin: 3px 10px;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
}

/* Scroll Animation (sa, 스크롤 애니메이션) */
.sa {
  opacity: 0;  
  transition: all .5s ease;
}
/* 아래에서 위로 페이드 인 */
.sa-up {
  transform: translate(0, 100px);  
}
/* 위에서 아래로 페이드 인 */
.sa-down {
  transform: translate(0, -100px);
}

/* 왼쪽에서 오른쪽으로 페이드 인 */
.sa-right {
  transform: translate(-200px, 0);
}
/* 오른쪽에서 왼쪽으로 페이드 인 */
.sa-left {
  transform: translate(100px, 0);
}  
.sa.show {
  opacity: 1;
  transform: none;
}
.sub_wrap2{width:100%; max-width:1250px; margin:0 auto;}
.sd_mok{background:#029147 !important;}
/* 소개 */  

.back_bg {width: 100%;position: absolute;z-index: -1;left: 0;  top:0;}
.intro_in {width:1300px; margin: 0 auto;} 

.intro_left h2{margin-top:100px;font-size:46px;color:#323232;line-height:1.3;letter-spacing: -0.02em;display:block;font-weight:700;letter-spacing:-1px; font-family: 'NanumSquareNeo'; !important}
.intro_left b {font-weight:800; font-family: 'NanumSquareNeo'; color:#00a14e; font-size:50px; letter-spacing:-0.03em;}
.intro_left b span { 
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background: #ed1c24;
  display: inline-block;
  vertical-align: top;
  float: left;
  margin-left: 5px;
}  
.intro_left small {font-size:20px;color:#323232;line-height:30px;letter-spacing:-0.06em;margin-top:3%;display:block;}
.intro_left p {font-size:15px;color:#294b99;line-height:30px;letter-spacing:-0.06em;margin-top:3%;display:block;transition-duration: .2s;}
.intro_left p:hover {
  transform: scale(1.03);
  box-shadow: 0px 0px 0px 0px rgb(0 59 130 / 15%);}  
.right_in{display:flex; justify-content:space-between; margin-top:90px; width:100%;max-width:1000px; float:right;}
.right_in .text_bg{font-size:65px; font-weight:500; color:#e6f2ea; text-align:right;line-height:1.2;font-family: 'SBAggro';}
.text_bg b{font-weight:700;    font-family: 'SBAggro';}
.intro_right img {width:1400px;height:550px;margin-left: 10%;} 
.right_in .right_btn{font-weight:600; font-family: 'NanumSquareNeo'; font-size:18px; }  
.right_btn em{color:#fff; margin-left:10px; position:relative;}
.right_btn em:before{content:' '; background-color:#00a14e; width:30px; height:30px; display:inline-block; position: absolute;
  z-index:-99; border-radius:50%;}

.video_cover{overflow:hidden;border-radius: 60px 0 0 0; /* 왼쪽 위 모서리만 둥근 테두리 설정 */
  max-width: 1000px; width:100%; float:right;}
.video_cover video{width:100%;}
.con1_wrap{clear:both; padding:100px 0 120px 0; display:flex; justify-content:flex-end;}
.con1_wrap ul{width: 100%; max-width:1000px; display:flex; justify-content:flex-end;}
.con1_wrap li{text-align: center;padding:35px 50px;transition-duration: .2s; margin:0 30px;}
.con1_wrap li img{width: 90%;}
.con1_wrap li div{width: 100%; margin-top: 10px; font-size: 18px;line-height: 1.4; font-weight: 600; color: #333;}
.con1_wrap li:hover{background: #eee;box-shadow: 0 10px 30px #d8d8d8;transition-duration: .2s; border-radius:100%;}
.con1_wrap li:hover div span{display:inline-block;}

/*상품소개*/
.products {/*position:relative;*/ width:100%; height:auto;padding:0% 0;margin-bottom: 10%;}
.products_in {width:1600px; margin:0 auto;} 
.products_in h1 {font-size:42px;font-weight:900;line-height:48px;color:#323232;margin-bottom: 1%;}
.products_in h1 span{ border-radius: 50%;width: 12px;height: 12px;background: #ed1c24;  display: inline-block;vertical-align: top;float: left;margin-right: 5px;}
.products_in h1 small {font-size:20px;line-height:30px;color:#323232;font-weight: 300;margin-left: 15px;}
.p-Tit {width:100%; margin-bottom:30px;}  
.p-Tit h1 {font-size:24px; font-weight:600; color:#000;}
.p-Tit h6 {font-size:18px; font-weight:300; letter-spacing:2px; color:#0075c1;}
.p-Contents {width:100%;margin-top: 10%;margin-bottom:15%;}
.p-Contents a {     
  position:relative;  
  display:block;  
  float: left;  
  width:24%;
  height:500px;
  background:#f3f3f3;
  padding:55px;
  margin-bottom:1%;
  /*border:1px solid #e3e3e3;*/
  border-radius:45px;
  box-sizing:border-box;
  transform:translateY(0px);
  transition:all 0.4s ease-in-out;
  margin-right:1%;
}
.p-Contents div.p-icon {margin-top:10%;bottom: 3%;} 
.p-Contents div h1 {font-size:22px; font-weight:600; color:#282828;text-align:center;}
.p-Contents div h4 {font-size:16px; font-weight:400; color:#ababab; line-height:24px;text-align:center;}
.p-Contents div h4 p {font-size:15px; font-weight:400; color:#294b99; line-height:24px; margin-top:8px;text-align:center;}
.p-Contents a:first-child, .p-Contents a:nth-child(3) {}  
.p-Contents:after, .contact:after, .call_in:after {content:""; display:block; clear:both;}
.p-Contents a.moreview {background:#003b82;}
.p-Contents a.moreview h1, .p-Contents a.moreview h4 {color:#fff;}
.p-Contents a.moreview h4 {margin-left:0;}
.p-Contents a:hover {transform:translateY(-30px); box-shadow:0px 10px 50px 0px rgba(0, 59, 130, 0.15);background: #fff;border: 1px solid #e3e3e3;}
/*상품소개*/

/* step */

.step_in{width:100%; height:350px; position:relative;}
.step_in .bg{background:url("/images/main/main_bg.png") no-repeat center center;
  background-size: cover; height:100%;}
.step_in h4 {font-size:30px;letter-spacing: -0.02em;;font-weight:600;line-height:48px;color:#fff;text-align: center;
  position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; word-break:keep-all;
}

/*story**/
.main_bg_box .story_in {margin:120px 0 65px 0;}
.story_in ul{display:flex; justify-content:space-between;}
.story_in ul li{width:30%;}
.story_in ul li img{width:100%;}
.story_info{margin-top:20px;}
.story_in ul li h5{font-size:20px; font-weight:600; line-height:2;}
.story_info p{font-size:17px;}
.story_info .date{font-size:15px; color:#6f6f6f; padding:40px 0 5px 0; display:inline-block;}
.story_in ul li {border-bottom:3px solid #ccc; display:block;}
.story_in ul li:hover{border-bottom:3px solid #00a14e; display:block;}

.stoty_box{display:flex; justify-content: space-between;}
.stoty_box h2{font-size:30px; font-weight:600; border-bottom:2px solid #ccc; line-height:2;}
.stoty_box>div{position:relative; width:45%;}
.stoty_box h2 span{position:absolute; right:0;}
.stoty_box ul li{padding:15px 0; border-bottom:1px solid #ccc;}
.stoty_box .date{position:absolute; right:0;}
/* news */ 
.news_btn{position:relative; left:50%; transform:translate(-50%); margin:80px 0; border:1px solid #00a14e; border-radius:50px;}
.news_btn a{color:#00a14e; display:inline-block; padding:10px 30px;} 
.news_btn a:hover{color:#fff;}
/* site */
.site {/*position:relative;*/ width:100%; height:auto;padding:0% 0;}
.site_in {width:1200px;} 
.site_txt {width:100%;float:left;text-align:center;} 
.site_txt p {font-size:16px;color:#888;display:block;padding: 15px 0;}
.site_txt h1 {font-weight:900;font-size:42px;color: #062f6e;margin-top: 5%;margin-bottom: 5%;}
.site_txt h2 {font-weight:900;font-size:42px;color: #062f6e;margin-top: 5%;margin-bottom: 5%;}
.site_txt h2 span{font-weight: 400; line-height: 17px;padding: 5px;border: 1px solid #ccc;color: #ccc;width: 30px;height: 30px;display: inline-block;font-size: 24px;border-radius: 100%;text-align: center;margin-top:-4%;cursor: pointer;transition-duration: .2s;}
.site_txt h2 span:hover{border: 1px solid #062f6e; background: #062f6e; color: #fff;transition-duration: .2s;transform: scale(1.8);}    
/*설치충전소*/
#charging_wrap{ 
  width: 50%;
  height: 400px;
  position: relative;
  float: left;
  background: #000 url(/images/main/charging_bg_1020.png)no-repeat center center;
  background-size: cover;  
  float: left;
  padding-left: 27%;  
  display: flex;
  align-items: center;  
}    
#charging_wrap .main_wrap{width: 100%;max-width: 400px;float: left;}
.charging_wrap{width: 100%;}
.charging_wrap .txt_box h1{color: #fff;margin-bottom: 20px;font-size: 32px;font-weight: 900;word-break: keep-all;}
.charging_wrap .txt_box p{text-align: left;color: #fff;font-size: 20px;word-break: keep-all;}
.charging_wrap .txt_box .line {margin-top: -10%;width: 30px; height: 2px;float: left;background: #fff;  font-size: 18px;text-align: left;display: inline-block;font-weight: 400;}
/*설치충전소 끝*/    

/*고객지원*/      
#customer_wrap{ 
  width: 50%;  
  height: 400px;
  position: relative;
  float: left;
  background: #000 url(/images/main/customer_bg_1020.png)no-repeat center center;
  background-size: cover;
  float: left;
  padding-left:4%;   
  display: flex;       
  align-items: center; 
}
#customer_wrap .main_wrap{width: 100%;max-width: 400px;float: left;margin-left: 10%;}
.customer_wrap{width: 100%;}
.customer_wrap .txt_box h1{margin-bottom: 10px;color: #fff;width: 100%;margin-bottom: 20px;font-size: 32px;font-weight: 900;}
.customer_wrap .txt_box p{text-align: left;color: #fff;font-size: 20px;}
.customer_wrap .txt_box .line {margin-top: -10%;width: 30px; height: 2px;float: left;background: #fff;  font-size: 18px;text-align: left;display: inline-block;font-weight: 400;}
/*고객지원 끝*/    

.Floating {z-index:99; position:fixed; bottom:30px; left:15px; width:50px; height:50px; border-radius:100px; background:#fae100;}
.Floating a {position:absolute; top:8px; left:8px;}


.requestTop {line-height:70px; background:#0075c1; padding-left: 50px; font-size:18px; color:#fff; font-weight:600;}
.requestTop img {padding-right:10px;}
#use_div_wrap{background:#fff;width:100%;display:inline-block; padding-top: 5%;}
#use_box{widtH:84%;margin:auto;background:none}
.use_title{width:100%;text-align:left;font-size:30px; padding:100px 0 40px 0;font-weight:bold;color:#fff;color:#333}
#goTop {right:50px;bottom:50px; width:98px;height:98px;border-radius:50px;  background-color:rgba(255, 255, 255, 0.2);line-height:98px;text-align:center;color:#fff; font-size:16px;cursor:pointer;margin-left:auto;margin-right:auto;margin-top:2%;}
.use_text_div {width:100%;font-size:14px;color:#666;border:1px solid #ccc;display:inline-block;text-align:left;padding:60px;margin-bottom:5%;line-height:28px;box-sizing:border-box;font-weight:300}
.use_text_div span {font-weight:bold;color:#333}
.use_text_div div.inner {width:100%;box-sizing:border-box; padding-left:20px;}

/* PC [1300px 이상 적용] */
@media all and (max-width:1300px){
  .intro_in {width:90%;}
  .wrap_in{padding:0 2%;}
}



/* PC [1201px 이상 적용] */
@media all and (min-width:1201px){
  .menu_list > div {
    position:relative;
    width:23%;
    height:337px;
    background:#fff;
    overflow:hidden;
    padding-top:40px;
    text-align:center;
    float:left;
    transition:transform 0.5s easy-in-out;
    cursor:pointer;
    margin: 0 1.3%;
  }
  .menu_list > div:first-child {margin-left:0;}
  .menu_list > div:last-child {margin-right:0;}
  .menu_list > div h4 {
    font-size:24px;
    font-weight:800;
    color:#2e2521;
    font-family: 'Noto Sans KR';
    letter-spacing:0.5px;
    padding-bottom:30px;
  }
  .menu_list > div h6 {
    width: 40%;
    line-height: 40px;
    border-radius:30px;
    background:#cb1d2b;
    font-weight:600;
    font-family: 'Noto Sans KR';
    color:#fff;
    margin:0 auto 20px;
    transition:transform 0.5s easy-in-out;
  }
  .menu_list > div:nth-child(2) h6 {background:#e4a11e;}
  .menu_list > div:nth-child(3) h6 {background:#5c4008;}
  .menu_list > div:nth-child(4) h6 {background:#f3715e;}
  .menu_list > div img {
    position: absolute;
    bottom: 0;
    left: 0;
  }
  .menu_list > div:first-child:hover {
    background:#cb1d2b;
    box-shadow:0px 0px 40px 0px #000;
    -webkit-transition: background-color 0.5s ease-out;
  }
  .menu_list > div:nth-child(2):hover {
    background:#e4a11e;
    box-shadow:0px 0px 40px 0px #000;
    -webkit-transition: background-color 0.5s ease-out;
  }
  .menu_list > div:nth-child(3):hover {
    background:#5c4008;
    box-shadow:0px 0px 40px 0px #000;
    -webkit-transition: background-color 0.5s ease-out;
  }
  .menu_list > div:nth-child(4):hover {
    background:#f3715e;
    box-shadow:0px 0px 40px 0px #000;
    -webkit-transition: background-color 0.5s ease-out;
  }
  .menu_list > div:nth-child(2):hover h6 {color:#e4a11e;}
  .menu_list > div:nth-child(3):hover h6 {color:#5c4008;}
  .menu_list > div:nth-child(4):hover h6 {color:#f3715e;}
  .menu_list > div:hover h4 {color:#fff;	}
  .menu_list > div:hover h6 {
    background:#fff;
    color:#cb1d2b;
    font-weight:700;
  }
  .menu_list:after {
    content:"";
    display:block;
    clear:both;
  }
  #btnCi {
    position: absolute;
    width: 10%;
    height: 90px;
  }
}

/*태블릿 [ 0 ~ 1200px 적용] */
@media all and (max-width:1200px){
  .pc{display:block;}
  .t{display:block;}
  .m{display:none;}
  header {max-width: 100%; margin: 0 auto;}
  .msd_logo {
    width: 100%;
    z-index: 3;
    top: 34%;
    position: absolute;
  }
  .msd_logo_box {
    width: 280px;
    margin: auto;
  }
  .msd_logo_box img {width: 100%;  }
  .msd_logo {
    width: 100%;
    z-index: 3;
    top: 34%;
    position: absolute;
  }
  .P-member {display: none;  }
  .P-header {
    width: 100%;
    height: 60px;
    position: fixed;
    display: inline-block;
    margin: 0 auto;
    padding: 0%;
    z-index: 10;
    top: 0;
    left: 0;
  }
  .wrap {
    position: relative;
    width: 100%;
    margin: auto;
  }
  .P-nav-logo {
    float: left;
    width: 93%;
    height: 70px;
    font-size: 24px;
    line-height: 33px;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    color: #000;
    position: relative;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
  }
  .P-nav-logo img {float: left;}
  .P-nav-logo.blue.shrink {display: block;}
  .P-nav-logo.white.shrink {display:none;}
  .visible-lg {
    display: block;
    overflow: hidden;
  }
  .menu-btn.blue.shrink {display: block; /*margin-top:-10px;*/}




  .menu-btn.white.shrink {display:none;}

  #btn-top-menu {
    width: 45px;
    float: right;
    padding-top: 23px;

  }
  #btn-top-menu img {display: block;}
  /*로고 끝*/
  .wrap {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    /*background: #fff;*/
  }
  .wrap_in {
    height: 70px;
    margin:0 auto;
    width: calc(100% - 70px);
    float: left;
  }
  .wrap:after {
    content:"";
    display:block;
    clear:both;
  }
  .visible-lg {display: none !important; width: 80%;}
  .hidden-lg {display: block;  }
  .main_bg_in {background: url("/images/main/main_img_1020.jpg") no-repeat center top; background-size: cover;}
  .products_in, .call_in {width:90%;}
  .c-Tit, .c-con {max-width:90%;}
  .products {padding: 10% 0 6%;}
  .p-Contents a {max-height:400px;}
  .p-Contents div h1 span {display:block; margin:3px 0 0 0;}
  .p-Contents a {padding:35px;}
  .c-Tit {font-size: 28px; line-height: 36px;}
  .call_left p {font-size: 16px; line-height: 20px;}
  .call_right a {
    float: right;
    width: 173px;
    font-sizE: 20px;
    line-height: 50px;   
    background: #003b82;
    text-align: center;
    color: #fff;
    border-radius: 50px;
    margin-top: 20px;
  }

  .call_right:after {content:""; display:block; clear:both;}
  #totalANDzeroweb div{width: 100%!important; position: inherit;padding-bottom: 20px!important;text-align: center;bottom: 0;background:#262626}
  .f_wrap{padding: 30px 10px 10px 10px;}
  /* intro */

  .intro_left img {width:72%} 
  .intro_right span {font-size:38px;line-height:48px;}

  .step_in h1 {text-align:center;font-size:34px;line-height: 44px;padding-bottom:25%;}
  .news_li {width:90%;}
  .intro_left h2{font-size:40px;color:#323232;letter-spacing: -0.02em;;margin-top:15%;display:block;font-weight:500;}
  .products_in h1 {font-size:34px;font-weight:900;line-height:44px;color:#323232;margin-bottom: 1%;}
  #charging_wrap{ 
    width: 50%;
    height: 400px;
    position: relative;
    float: left;
    background: #000 url(/images/main/charging_bg.png)no-repeat center center;
    background-size: cover;  
    float: left;
    padding-left: 12%;  
    display: flex;
    align-items: center;     
  }  
  .back_bg {max-width: 90%;position: absolute;z-index: -1;left: 0;  top:0;}
}   

/* 모바일 [ ~ 1000px 적용] */
@media all and (max-width:1000px){
  .main_tit h1{font-size:55px;}
  .copy-item li:first-child{margin-right:100px;}
.con1_wrap li{padding:25px 40px; margin:10px; width:40%;}
}

/* 모바일 [ ~ 920px 적용] */
@media all and (max-width:920px){
  


}

/* 모바일 [ ~ 767px 적용] */
@media all and (max-width:767px){
  .news_btn{margin: 10px 0 60px 0;}
  .con1_wrap li{padding:40px;}
  .copy-item{flex-wrap:wrap; padding:0 5%;}
  .copy-item li{width:100%; padding:10px 0;}
  .stoty_box{flex-wrap:wrap;}
  .stoty_box>div{width:100%; margin-bottom:50px;}
  .story_in ul{flex-wrap:wrap;}
  .story_in ul li{width:100%; margin-bottom:30px;}
  .con1_wrap ul{flex-wrap:wrap; justify-content: center;}
  .con1_wrap li img{width:70%;}

  .step_in h4{font-size:26px;}
  .video_cover {margin-top:50px;}
  .right_in .text_bg{display:none;}
  .main_tit {width:100%;}
  .m {display:block;}
  .t {display:none;}
  .pc {display:none;}
  .p-Contents div h1 {font-size:18px;}
  .p-Contents div h4 {font-size:14px; line-height:20px;}
  .call_left {font-size:24px;}
  .call_left p {margin-left:28px; word-break:keep-all;}
  .call_right a {color:#fff;}
  .call_right a:hover {color:#fff;}
  .top-menu-title p {font-size:26px !important;line-height:35px !important;}
  .top-menu-title span {font-size:18px  !important; line-height:1.5 !important; word-break:keep-all !important;}
  .tit_sub {width:90% !important;}
  .news_li li {width: calc(100% / 2 - 10px);}
  .news_li li < li {border:1px solid red;}
  #charging_wrap{ 
    width: 100%;  
    height: 200px;
    position: relative;
    float: left;
    background: #000 url(/images/main/charging_bg.png)no-repeat center center;
    background-size: cover;  
    float: left;
    padding-left: 10%;  
    display: flex;
    align-items: center;}  
  .charging_wrap{width: 100%;margin-top: 20px;}
  .charging_wrap .txt_box h1{color: #fff;margin-bottom: 20px;font-size: 26px;font-weight: 900;word-break: keep-all;}
  .charging_wrap .txt_box p{text-align: left;color: #fff;font-size: 16px;word-break: keep-all;}


  /*고객지원*/      
  #customer_wrap{   
    width: 100%;  
    height: 200px;
    position: relative;
    float: left;
    background: #000 url(/images/main/customer_bg.png)no-repeat center center;
    background-size: cover;
    float: left;
    padding-left:4%;   
    display: flex;       
    align-items: center;}
  #customer_wrap .main_wrap{width: 100%;max-width: 400px;float: left;margin-left: 5%;}

  .intro_right img {width: 600px;height: 300px;margin-left: -11%;} 
  .step_in img {border-radius: 35px;height: 300px;}       
  .customer_wrap{width: 100%;margin-top: 20px;}
  .customer_wrap .txt_box h1{margin-bottom: 10px;color: #fff;width: 100%;margin-bottom: 20px;font-size: 26px;font-weight: 900;}
  .customer_wrap .txt_box p{text-align: left;color: #fff;font-size: 16px;}     

}

/* 모바일 [ ~ 640px 적용] */
@media all and (max-width:640px){
  .news_btn a:hover{color:#00a14e;}
  .main_btn:after{background:transparent;}
  .con1_wrap li{padding:40px; margin:20px; width:35%;}
  .news_btn a{font-size:14px; padding:5px 20px;}
  .stoty_box ul li{font-size:15px;}
  .right_in .right_btn{font-size:16px;}
  .stoty_box h2{font-size:26px;}
  .story_in ul li h5{font-size:18px;}
  .story_info p{font-size:16px;}
  .story_info .date{font-size:15px;}
  .con1_wrap{padding:80px 0;} 
  .copy-item p img{width:150px;}
  .con1_wrap li:hover{background:none; box-shadow:none;}
  .step_in {height:250px;}
  .P-nav-logo.blue.shrink{padding-top:10px;}
  .right_in{float:inherit; margin-top:50px;}
  .intro_left b{font-size:32px;}
  .main_tit h1{font-size:36px; line-height:1.8;}
  .main_tit h1 span{font-size:13px; line-height:1.4;}
  .main_tit .main_btn{margin-top:10px; padding:5px;}
  .main_tit .main_btn a{font-size:14px; padding:10px 25px;}
  .step_in h4{font-size:20px; line-height:1.8;}

  .content {height:430px;}
  .content h6 {width: 72%;font-size:12px; line-height:1.4;right:5%;text-shadow: 0px 10px 10px rgba(0, 0, 0, 1); word-break:keep-all;}
  .main_bg_in {background: url(/images/main/main_img_1020.jpg) no-repeat center center; background-size:cover;}
  .products {padding: 15% 0 0%;}
  .p-Contents a {width:100%;max-height:inherit;height:430px;margin:0 0 2% 0;margin-bottom: 10%;width: 80%;margin-left: 10%;} 


  .p-Contents a:first-child, .p-Contents a:nth-child(3) {margin-right:0;margin-bottom: 10%;width: 80%;margin-left: 10%;}
  .p-Contents div.p-icon {bottom:5%;text-align:center;}  
  .p-Contents div.p-icon img {width:250px;margin:auto;}  
  .p-Contents div.p-icon {margin-top:12%;}
  .c-Tit {font-size: 20px; line-height: 26px;}
  .contact a {font-sizE: 16px;}
  .call_left p span {display: none;}
  .P-nav-logo img {width:150px;}

  .intro_left img {width:80%;}  
  .intro_right {width:100%;}
  .intro_right span {font-size:30px;line-height:38px;}

  .news h1 {font-size:30px;}
  .news h1 p {padding:6px 0px;}

  .site_txt h1 {font-size:30px;}
  .site_txt h1 p {padding:6px 0px;}
  .products_in h1 {font-size:30px;font-weight:900;line-height:48px;color:#323232;margin-bottom: 1%;}
  .products_in h1 small {font-size:18px;line-height:30px;color:#323232;font-weight: 300;margin-left: 15px;}
  .intro_left h2{font-size:28px;color:#323232;letter-spacing: -0.02em;;margin-top:18%;display:block;font-weight:700;}
  .intro_left small {font-size:18px;color:#323232;line-height:26px;letter-spacing:-0.06em;margin-top:3%;display:block;word-break: keep-all;}
  .step_in h1 {margin-top: -26%;text-align:center;font-size:30px;padding-bottom:30px;line-height:32px;}
  .step_in h1 small {font-size:18px;color:#fff;line-height:30px;letter-spacing:-0.06em;margin-top:3%;display:block;word-break: keep-all;}
  
  /* 모바일 [ ~ 500px 적용] */
  @media all and (max-width:500px){
    .con1_wrap{padding:20px 0}
    .con1_wrap li{margin:0;}
  }

  /* 모바일 [ ~ 480px 적용] */  
  @media all and (max-width:480px){
    .content {height: 330px;} 
    .con1_wrap {padding:80px 0;}
    .con1_wrap li {width:40%; padding:18px 30px;}
    .con1_wrap li div{font-size:15px;}

    .products {padding: 20% 0 0%;}
    .contact a {width:135px; font-sizE: 16px;}

    .contact a img {width:20px;}
    .call_in {padding: 5% 0 6%;}
    .call_right a {
      width: 155px;
      font-sizE: 18px;
      line-height: 42px;
      margin-top: 22px;
    }
    .call_left img {width:18px;}

  }


  @media all and (max-width:390px){
    .p-Contents a {padding: 20px;}
    .p-Contents div.p-icon {bottom: 12%; right: 7%;}
    .contact {background-size: cover;}
    .call_in {padding: 5% 0 9%;}
    .c-Tit {
      font-size: 20px;
      line-height: 28px;
    }
    .call_left p {display:none;}
    .call_left, .call_right a {margin-top: 13px;}
    .main_tit h1{margin-bottom:10px;}
    

  }