@charset "utf-8";

/* 로그인 */
#sub #sub_login .contents{ padding:55px 0; }
#sub_login .bx { padding:0 20px; }
#sub_login .bx strong{ display:block; margin-bottom:18px; font-size:18px; line-height:23px; color:#212121; font-weight:700; letter-spacing:-0.05em; }
#sub_login .bx input{ margin-bottom:6px; padding:13px 18px; width:100%; height:44px; font-size:13px; line-height:18px; color:#666; letter-spacing:-0.05em; border:0; border-radius:5px; box-sizing:border-box; box-shadow:0 4px 10px rgba(0,0,0,.1) }
#sub_login .bx input:last-of-type{ margin-bottom:0; }
#sub_login .bx .login_btn{ display:block; margin-top:15px; font-size:14px; line-height:47px; color:#fff; font-weight:700; background:#Fc6c00; border-radius:5px; text-align:center; box-shadow:0 4px 10px rgba(92,15,139,.3) }
#sub_login .bx .list_bx{ margin-top:20px; font-size:0; text-align:center; }
#sub_login .bx .list_bx li{ display:inline-block; vertical-align:top; position:relative; padding-right:14px; margin-right:13px; }
#sub_login .bx .list_bx li:last-child{ padding-right:0; margin-right:0; }
#sub_login .bx .list_bx li:after{ content:''; position:absolute; right:0; top:4px; width:1px; height:11px; background:#bdbdbd; }
#sub_login .bx .list_bx li:last-child:after{ display:none; }
#sub_login .bx .list_bx li a{ display:block; font-size:12px; line-height:17px; color:#333; letter-spacing:-0.05em; }
#sub_login .bx .sns_login{ margin-top:40px; }
#sub_login .bx .sns_login a{ display:block; vertical-align:top; margin-bottom:6px; border-radius:5px; font-size:13px; line-height:40px; letter-spacing:-0.05em; font-weight:700; box-sizing:border-box; text-align:center; }
#sub_login .bx .sns_login a:last-of-type{ margin-bottom:0; }
#sub_login .bx .sns_login a.log_n{ color:#fff; background:#2db400 url('../images/btn/log_naver.gif') no-repeat left center; background-size:40px auto; }
#sub_login .bx .sns_login a.log_k{ color:#381e1f; background:#ffe600 url('../images/btn/log_kakao.gif') no-repeat left center; background-size:40px auto; }

/* 회원가입 - 약관동의 */
#subJoin01 .bx_wrap .term_wrap{ border-top:1px solid #Fc6c00; padding-top:15px; padding-bottom:15px; border-bottom:1px solid #ccc; }
#subJoin01 .bx_wrap .term_bx{ margin-bottom:15px; }
#subJoin01 .bx_wrap .term_bx .term{ padding:10px 18px; width:100%; height:167px; font-size:12px; line-height:17px; color:#666; letter-spacing:-0.05em; background:#fafafa; border:1px solid #dadada; overflow-y:auto; box-sizing:border-box; margin-bottom: 10px;}

/* 휴대폰 인증 */
.phone_find{ margin:0 auto; width:100%; max-width:640px; padding:25px 43px 30px; background:#efefef; border-radius:10px; box-sizing:border-box; }
.phone_find p{ margin-bottom:15px; font-size:15px; line-height:20px; color:#212121; letter-spacing:-0.05em; font-weight:700; text-align:center; }
.phone_find a{ display:block; padding-bottom:20px; background:#fff; border:1px solid #Fc6c00; border-radius:5px; background:#fff; text-align:Center; }
.phone_find a span{ display:block; padding-top:100px; font-size:13px; line-height:18px; color:#Fc6c00; letter-spacing:-0.05em; font-weight:700; background:url('../images/icon/icon_phone01.png') no-repeat center 25px; background-size:40px auto; }

/* 아이디 찾기 */
#sub #subFindID .contents{ padding-top:30px; }
#subFindID .find_id{ margin:0 auto; padding:25px 42px 30px; width:100%; max-width:640px; background:#efefef; border-radius:10px; box-sizing:border-box; }
#subFindID .find_id p{ margin-bottom:15px; font-size:15px; line-height:20px; color:#212121; font-weight:700; letter-spacing:-0.05em; text-align:center; }
#subFindID .find_id strong{ display:block; padding:13px 15px; border:1px solid #Fc6c00; font-size:18px; line-height:23px; color:#Fc6c00; font-weight:800; text-align:center; border-radius:5px; }
#subFindID .find_id .btn_bx{ margin-top:10px; font-size:0; }
#subFindID .find_id .btn_bx a{ display:inline-block; vertical-align:top; width:100%; border-radius:5px; font-size:12px; line-height:40px; color:#fff; font-weight:700; letter-spacing:-0.05em; border-radius:5px; text-align:center; }
#subFindID .find_id .btn_bx a.btn01{ background:#Fc6c00; }

/* 비밀번호 찾기 */
#subFindPw .find_pw{ margin:0 auto; padding:25px 25px 30px; width:100%; max-width:640px; background:#efefef; border-radius:10px; box-sizing:border-box;}
#subFindPw .find_pw p{ margin-bottom:10px; font-size:12px; line-height:14px; color:#212121; letter-spacing:-0.05em; font-weight:700; }
#subFindPw .find_pw input{ margin-bottom:4px; padding:8px 15px; width:100%; height:35px; font-size:12px; line-height:17px; color:#666; letter-spacing:-0.05em; box-sizing:border-box; border-radius:5px; border:1px solid #d2d2d2; }
#subFindPw .find_pw input:last-of-type{ margin-bottom:10px; }
#subFindPw .find_pw a{ display:block; font-size:12px; line-height:40px; color:#fff; font-weight:700; letter-spacing:-0.05em; text-align:center; background:#Fc6c00; border-radius:5px; }

/**/
#subPayNcrg .chargeInfoS01{ margin-left:-10px; width: calc(100% + 20px);}
#subPayNcrg .txt01{ margin-top:18px; font-size:13px; line-height:16px; color:#666; letter-spacing:-0.05em; text-align:center; }

/* 충전상태 */
#subNowCh .chargeInfoS01{ margin-left:-10px; width: calc(100% + 20px);}
#subNowCh .txt01{ margin-top:18px; font-size:11px; line-height:16px; color:#666; letter-spacing:-0.05em; text-align:center; }

/* 충전카드등록 */
.card_listS01{ font-size:0; }
.card_listS01 .my_point{ margin-bottom:15px; font-size:15px; line-height:20px; color:#212121; letter-spacing:-0.05em; font-weight:700; }
.card_listS01 .my_point strong{ font-size:18px; color:#Fc6c00; }
.card_listS01 > div{ display:inline-block; vertical-align:top; margin-bottom:15px; padding:20px 23px 23px; width:100%; border-radius:10px; background:#f7f7f7; border:2px dashed #d4d4d4; box-sizing:border-box; }
.card_listS01 > div:last-of-type{ margin-bottom:0; }
.card_listS01 > div .top{ padding-bottom:10px; margin-bottom:20px; border-bottom:1px solid #e1e1e1; font-size:0; }
.card_listS01 > div .top:after{ content:''; display:block; clear:both; }
.card_listS01 > div .top strong{ display:inline-block; vertical-align:top; font-size:15px; line-height:20px; letter-spacing:-0.05em; font-weight:700; }
.card_listS01 > div .top strong span{ font-size:12px; font-weight:400; letter-spacing:-0.05em; }
.card_listS01 > div .top .chk_bx{ float:right; margin-bottom:0; margin-top:2px; }
.card_listS01 > div .top .chk_bx label{ font-size:12px; line-height:13px; letter-spacing:-0.05em; color:#333; font-weight:400; }
.card_listS01 > div .top .chk_bx label span{ font-size:11px; color:#888; }

.card_listS01 > div .btm .card_bx{ position:relative; top:0; margin:0 auto; display:block; padding:75px 25px 0; width:100%; max-width:245px; height:154px; border-radius:5px; box-shadow:5px 5px 10px rgba(0,0,0,.1); box-sizing:border-box; }
.card_listS01 > div .btm .card_bx strong{ display:block; font-size:16px; line-height:20px; color:#fff; font-weight:800; }
.card_listS01 > div .btm .card_bx span{ display:block; margin-top:5px; font-size:11px; line-height:16px; color:#fff; }

.card_listS01 > div.card1.on{ border-color:#Fc6c00; background:#fff; }
.card_listS01 > div.card2.on{ border-color:#Fc6c00; background:#fff; }
.card_listS01 > div.card1 .top strong{ color:#Fc6c00; }
.card_listS01 > div.card2 .top strong{ color:#Fc6c00; }
.card_listS01 > div.card1 .btm .card_bx{ background:url('../images/sub/card_img01.jpg') no-repeat center; background-size:cover; }
.card_listS01 > div.card2 .btm .card_bx{ background:url('../images/sub/card_img02.jpg') no-repeat center; background-size:cover; }

/* 포인트 관리 */
#myPoint01 .point_bx{ margin-top:30px; padding-top:20px; border-top:1px solid #d0d0d0; text-align:Center; }
#myPoint01 .point_bx dl{ font-size:0; display:block;}
#myPoint01 .point_bx dt{ display:inline-block; vertical-align:top; margin-right:15px; font-size:12px; line-height:37px; color:#212121; letter-spacing:-0.05em; font-weight:700; }
#myPoint01 .point_bx dd{ display:inline-block; vertical-align:top; font-size:12px; line-height:17px; color:#212121; font-weight:700; }
#myPoint01 .point_bx dd input{ margin-right:5px; padding:8px 11px; width:100px; height:37px; font-size:14px; line-height:21px; color:#Fc6c00; font-weight:700; text-align:right; border:1px solid #b4b4b4; border-radius:5px; box-sizing:border-box; outline:none; }
#myPoint01 .point_bx dd input:focus{ border-color:#Fc6c00;}

#myPoint02{ background:#efefef; }

#myCard02{ background:#efefef; }

/*충전기 고장신고*/
#subBreak{ background:#efefef; }

/* 로밍 */
#subRoaming{ background:#efefef; }

/* 즉시카드결제하기 */
#subMycardpay .point_bx{ margin-top:30px; padding-top:20px; border-top:1px solid #d0d0d0; text-align:Center; }
#subMycardpay .point_bx dl{ font-size:0; display:block;}
#subMycardpay .point_bx dt{ display:inline-block; vertical-align:top; margin-right:15px; font-size:12px; line-height:37px; color:#212121; letter-spacing:-0.05em; font-weight:700; }
#subMycardpay .point_bx dd{ display:inline-block; vertical-align:top; font-size:12px; line-height:17px; color:#212121; font-weight:700; }
#subMycardpay .point_bx dd input{ margin-right:5px; padding:8px 11px; width:100px; height:37px; font-size:14px; line-height:21px; color:#212121; font-weight:700; text-align:right; border:1px solid #b4b4b4; border-radius:5px; box-sizing:border-box; outline:none; }
#subMycardpay .point_bx dd input:focus{ border-color:#Fc6c00;}

/* 충전소 검색 */
#subFindStore .map{ height:200px; margin-top:30px; }

#subFindStoreView .cate_bx{ font-size:0; margin-right:-5px; }
#subFindStoreView .cate_bx > div{ display:inline-block; vertical-align:top; margin-bottom:15px; padding:15px 0 15px; width:calc(50% - 5px); margin-right:5px; border:1px solid #Fc6c00; border-radius:3px; box-sizing:border-box; }
#subFindStoreView .cate_bx > div span{ display:block; padding-top:50px; font-size:12px; line-height:17px; font-weight:700; letter-spacing:-0.05em; text-align:Center; }
#subFindStoreView .cate_bx > div.c1 span{ background:url('../images/icon/icon_store_on.png') no-repeat 50% top; background-size:36px auto; color:#Fc6c00;  }
#subFindStoreView .cate_bx > div.c2{ background:#e0e0e0; border: 1px solid #e0e0e0;}
#subFindStoreView .cate_bx > div.c2 span{ background:url('../images/icon/icon_store.png') no-repeat 50% top; background-size:36px auto; color:#9e9e9e; }

#subFindStoreView .btn_bx{ margin-bottom:30px; font-size:0; text-align:Center; }
#subFindStoreView .btn_bx a{ display:inline-block; vertical-align:top; margin-right:5px; width:120px; font-size:12px; line-height:37px; color:#fff; letter-spacing:-0.05em; text-align:center; border-radius:3px; }
#subFindStoreView .btn_bx a:last-of-type{ margin-right:0; }
#subFindStoreView .btn_bx a.btn01{ background:#Fc6c00; }
#subFindStoreView .btn_bx a.btn02{ background:#Fc6c00; }

#subFindStoreView .list_bx{  }
#subFindStoreView .list_bx a{ display:block; margin-bottom:5px; }
#subFindStoreView .list_bx a:last-of-type{ margin-bottom:0; }
#subFindStoreView .list_bx dl{ position:relative; border:1px solid #ddd; border-radius:5px; padding:13px 60px 13px 20px; background: #f0f0f0;}
#subFindStoreView .list_bx dl:after{ content:''; position:absolute; right:20px; top:50%; margin-top:-22px; width:36px; height:44px; background:url('../images/icon/icon_store.png') no-repeat center; background-size:36px auto;}
#subFindStoreView .list_bx dl.on{border: 1px solid #Fc6c00; background: #fff;}
#subFindStoreView .list_bx dl.on dt {color: #212121;}
#subFindStoreView .list_bx dl.on:after{ background:url('../images/icon/icon_store_on.png') no-repeat center;  background-size:36px auto;}
#subFindStoreView .list_bx dl dt{ display:block; margin-bottom:7px; font-size:16px; line-height:21px; color:#9e9e9e; font-weight:700; letter-spacing:-0.05em;}
#subFindStoreView .list_bx dl dd ul{ font-size:0; }
#subFindStoreView .list_bx dl dd ul li{ display:inline-block; vertical-align:top; position:relative; padding-right:11px; margin-right:10px; font-size:11px; line-height:16px; color:#666; letter-spacing:-0.05em; }
#subFindStoreView .list_bx dl dd ul li:last-child{ padding-right:0; margin-right:0; }
#subFindStoreView .list_bx dl dd ul li:after{ content:''; position:absolute; right:0; top:4px; width:1px; height:10px; background:#d7d7d7; }
#subFindStoreView .list_bx dl dd ul li:last-child:after{ display:none; }

/* 카드등록 */
#subMyReg02{ background:#efefef; }

/* 환경설정 */
#subSet .contents{ position:relative; min-height:350px; height:calc(100vh - 70px); box-sizing:border-box; }
#subSet .bx > div{ padding:20px 0; font-size:0; border-bottom:1px solid #dedede; }
#subSet .bx > div:first-of-type{ padding-top:0;}
#subSet .bx > div:after{ content:''; display:block; clear:both; }
#subSet .bx > div strong{ display:inline-block; vertical-align:top; font-size:15px; line-height:20px; color:#212121; letter-spacing:-0.05em; }
#subSet .bx > div div{ display:inline-block; vertical-align:top; float:right; }
#subSet .bx > div div a{ position:relative; display:block; width:50px; height:25px; background:#e1e4e6; border:2px solid #e1e4e6; border-radius:13px; box-sizing:border-box; }
#subSet .bx > div div a span{ position:absolute; left:0; top:0; width:21px; height:21px; border-radius:50%; -webkit-transition:left 0.4s; -moz-transition:left 0.4s; transition:left 0.4s;  box-shadow:0 5px 10px rgba(0,0,0,0.2);
background: #939393;background: -moz-linear-gradient(-45deg,  #939393 0%, #3c3b3e 100%); background: -webkit-linear-gradient(-45deg,  #939393 0%,#3c3b3e 100%); background: linear-gradient(135deg,  #939393 0%,#3c3b3e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#939393', endColorstr='#3c3b3e',GradientType=1 ); }
#subSet .bx > div div a.on span{ left:calc(100% - 21px); background: #Fc6c00; background: -moz-linear-gradient(-45deg,  #Fc6c00 1%, #Fc6c00 100%); background: -webkit-linear-gradient(-45deg,  #Fc6c00 1%,#32045d 100%); background: linear-gradient(135deg,  #Fc6c00 1%,#32045d 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#Fc6c00', endColorstr='#32045d',GradientType=1 );}

#subSet .bx > p{ margin-top:15px; font-size:12px; line-height:17px; color:#666; letter-spacing:-0.05em; }
#subSet .btn_area{ position:absolute; left:0; bottom:0; width:100%; padding:0 20px 30px; box-sizing:border-box; }

#ui-datepicker-div { top: 238px !important;}

@media all and (max-width:320px){

.card_listS01 > div .btm .card_bx{ padding-top:60px; height:140px; }

}


/* 회사소개 */
#subCompany .bx{ font-size:0; }
#subCompany .bx .list_bx{ margin-bottom:25px; }
#subCompany .bx .list_bx ul{  vertical-align:middle; padding:15px 20px; background:#f6f6f6; }
#subCompany .bx .list_bx ul li{ position:relative; margin-bottom:2px; padding-left:13px; font-size:12px; line-height:18px; color:#666; letter-spacing:-0.05em; word-break: keep-all; }
#subCompany .bx .list_bx ul li:last-child{ margin-bottom:0; }
#subCompany .bx .list_bx ul li:after{ content:''; position:absolute; left:0; top:8px; width:4px; height:4px; background:#999; border-radius:50%; }
#subCompany .bx img{ width:100%; border:1px solid #e7e7e7; box-sizing:border-box; margin-bottom:20px; }
#subCompany .bx table{ border-top:1px solid #333; width:100%; }
#subCompany .bx table tr{ border-bottom:1px solid #ddd; }
#subCompany .bx table th{ height:40px; padding:10px 0; font-size:13px; line-height:18px; color:#212121; font-weight:700; letter-spacing:-0.05em; text-align:center; box-sizing:border-box; border-right:1px solid #ddd; }
#subCompany .bx table td{ height:40px; padding:10px 15px; font-size:12px; line-height:18px; color:#666; letter-spacing:-0.05em;  box-sizing:border-box;}
#subCompany .bx table td ul.history_list li{ margin-bottom:5px; font-size:0; }
#subCompany .bx table td ul.history_list li:last-child{ margin-bottom:0; }
#subCompany .bx table td ul.history_list li span{ display:inline-block; vertical-align:top; width:45px; font-size:12px; line-height:18px; font-weight:700; }
#subCompany .bx table td ul.history_list li p{ display:inline-block; vertical-align:top; width:calc(100% - 45px); font-size:12px; line-height:18px; }

/* 주요사업 */
#subBiz .txt1{ margin-bottom:65px; font-size:17px; line-height:22px; color:#212121; font-weight:700; text-align:center; letter-spacing:-0.05em; word-break: keep-all; }
#subBiz .bx{ background:#efefef; border-radius:20px; font-size:0; text-align:center; padding:0 55px 75px; }
#subBiz .bx > strong{ display:Block; position:relative; top:-20px; margin:0 auto 18px; width:220px; font-size:15px; line-height:40px; color:#fff; font-weight:700; letter-spacing:-0.05em; text-align:center; border-radius:30px; background:#Fc6c00; }
#subBiz .bx dl{ display:inline-block; vertical-align:top; width:100%; margin-bottom:17px; }
#subBiz .bx dl:last-of-type{ margin-bottom:0; }
#subBiz .bx dl dt{ height:130px; padding-top:80px; border-radius:5px; font-size:15px; line-height:20px; color:#666; font-weight:700; letter-spacing:-0.05em; box-sizing:border-box; font-family: 'NanumSquare', sans-serif; }
#subBiz .bx dl dd ul{ margin-top:10px; text-align:left; }
#subBiz .bx dl dd ul li{ position:relative; padding-left:15px; margin-bottom:6px; font-size:13px; line-height:18px; color:#666; font-weight:700; letter-spacing:-0.05em; }
#subBiz .bx dl dd ul li:after{ content:''; position:absolute; left:0; top:8px; width:4px; height:4px; background:#999; border-radius:50%; }

#subBiz .bx dl.dl01 dt{ background:#fff url('../images/sub/biz_icon01.png') no-repeat center 33px; background-size:37px auto;}
#subBiz .bx dl.dl02 dt{ background:#fff url('../images/sub/biz_icon02.png') no-repeat center 32px; background-size:30px auto; }
#subBiz .bx dl.dl03 dt{ background:#fff url('../images/sub/biz_icon03.png') no-repeat center 32px; background-size:20px auto; }

#subBiz .step_bx{ margin-top:40px; }
#subBiz .step_bx ul{ position:relative; padding-top:70px; }
#subBiz .step_bx ul:before{ content:''; position:absolute; left:50%; margin-left:-9px; bottom:0; width:18px; height:16px; background:url('../images/sub/biz_ar.png') no-repeat center; z-index:1; background-size:18px auto; }
#subBiz .step_bx ul:after{ content:''; position:absolute; left:50%; margin-left:-3px; top:0; width:7px; height:99%; background:#efedf9; }
#subBiz .step_bx ul li{ position:relative; font-size:14px; line-height:130px; color:#444; font-weight:700; letter-spacing:-0.05em; text-align:center; }
#subBiz .step_bx ul li:after{ content:''; position:absolute; left:50%; margin-left:-8px; top:0; width:17px; height:17px; background:#Fc6c00; border-radius:50%; z-index:1; }
#subBiz .step_bx ul li:nth-child(2n-1){ padding-left:50%; }
#subBiz .step_bx ul li:nth-child(2n){ padding-right:50%; }

/* 전기차 충전기 설치 절차 */
#subInstall .bx{ margin-top:15px; font-size:0; }
#subInstall img{ width:100%; }
#subInstall .bx > div{ background:#FEF8E0; border-radius:10px; padding:20px 20px; margin-bottom:15px; }
#subInstall .bx > div:last-of-type{ margin-bottom:0; }
#subInstall .bx > div strong{ display:block; margin-bottom:6px; font-size:13px; line-height:18px; color:#212121; font-weight:700; letter-spacing:-0.05em; }
#subInstall .bx > div ul li{ position:relative; padding-left:14px; margin-bottom:2px; font-size:12px; line-height:17px; color:#666; letter-spacing:-0.05em; word-break: keep-all;}
#subInstall .bx > div ul li span{ font-size:11px; }
#subInstall .bx > div ul li:last-child{ margin-bottom:0; }
#subInstall .bx > div ul li:after{ content:''; position:absolute; left:0; top:8px; width:4px; height:4px; background:#999; border-radius:50%; }