@charset "utf-8";

label, input, select{vertical-align:middle;}
body{font-size:14px; font-family:'NanumGothic', '맑은 고딕', 'Malgun Gothic', Dotum, "돋움",Gulim, "굴림", Verdana, Tahoma, AppleGothic, sans-serif; color:#333; letter-spacing:0; }
input, textarea, select{ font-family:'NanumGothic', sans-serif !important; }
input[type="checkbox"]{ border:1px solid #ddd;}

#wrap{ margin:0 auto; width:100%; max-width:900px; padding-top:70px; }

/* header */
#header { position:fixed; left:0; top:0; width:100%; height:70px; background:#fff; z-index:999; }
#header .inner{ padding:0 20px; }
#header .inner h1{ display:inline-block; vertical-align:top; margin-top:10px; }
#header .inner h1 a{ display:block; width:130px; height:50px; background:url('../images/common/logo.jpg') no-repeat center; background-size:130px auto; text-indent:-9999px; }

/*
#header .inner h1 a{ display:block; width:130px; height:50px; background:url('../images/common/logo2.jpg') no-repeat center; background-size:130px auto; text-indent:-9999px; }
#header .inner h1 a{ display:block; width:130px; height:50px; background:url('../images/common/logo3.jpg') no-repeat center; background-size:130px auto; text-indent:-9999px; }
*/
#header .inner .right{ display:inline-block; float:right; margin-top:20px; }
#header .inner .right a{ display:block; position:relative; width:30px; height:30px;}
#header .inner .right a span{ display:block; position:absolute; left:0; width:30px; height:3px; background:#222; -webkit-transition:all 0.4s; -moz-transition:all 0.4s; transition:all 0.4s;}
#header .inner .right a span:nth-of-type(1){ top:0; }
#header .inner .right a span:nth-of-type(2){ top:13px; }
#header .inner .right a span:nth-of-type(3){ top:27px; }

#header .inner .right a.close span:nth-of-type(1){ top:13px; transform: rotate( 225deg ); -webkit-transform: rotate( 225deg ); -moz-transform: rotate( 225deg );}
#header .inner .right a.close span:nth-of-type(2){ opacity:0; }
#header .inner .right a.close span:nth-of-type(3){ top:13px; transform: rotate( -225deg ); -webkit-transform: rotate( -225deg ); -moz-transform: rotate( -225deg );}

#header .menu_bx{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:#fff; border-top:1px solid #d5d5d5; box-sizing:border-box; z-index:100; overflow-y:auto; }
#header .menu_bx .top{ padding:25px 20px; background:#f8f8f8; }
#header .menu_bx .top .bx01{ font-size:0; margin-right:-5px; margin-bottom:15px; }
#header .menu_bx .top .bx01 li{ display:inline-block; vertical-align:top; width:calc(50% - 5px); margin-right:5px; }
#header .menu_bx .top .bx01 li a{ display:block; font-size:14px; line-height:40px; color:#fff; letter-spacing:-0.05em; font-weight:700; text-align:center; border-radius:5px; }
#header .menu_bx .top .bx01 li.li1 a{ background: #Fc6c00; color: #fff; }
#header .menu_bx .top .bx01 li.li2 a{ border: 1px solid #Fc6c00; color: #Fc6c00;}
#header .menu_bx .top .bx02{ font-size:0; overflow:hidden;}
#header .menu_bx .top .bx02 div{ display:inline-block; vertical-align:top; font-size:15px; line-height:30px; color:#111; letter-spacing:-0.05em; font-weight:700;}
#header .menu_bx .top .bx02 div span{ font-size:18px; color:#Fc6c00; }
#header .menu_bx .top .bx02 a{ display:inline-block; float:right; width:30px; height:30px; border:1px solid #Fc6c00; background:url('../images/icon/icon_set.png') no-repeat center; background-size:18px auto; box-sizing:border-box; border-radius:5px; }
#header .menu_bx .top .bx02 a.logout{ width:80px; background: none;  text-align: center; line-height: 30px; font-size: 14px; color: #Fc6c00}
#header .menu_bx .top .bx02 a.logout:link,
#header .menu_bx .top .bx02 a.logout:visited,
#header .menu_bx .top .bx02 a.logout:hover { color: #Fc6c00}

#header .menu_bx .btm{ padding:20px 20px; }
#header .menu_bx ul.link_list{ margin-bottom:30px; font-size:0; border:1px solid #9e9e9e; border-radius:5px; }
#header .menu_bx ul.link_list li{ display:inline-block; vertical-align:top; width:33%; box-sizing:border-box; border-right:1px solid #9e9e9e; }
#header .menu_bx ul.link_list li:last-child{ border-right:0; }
#header .menu_bx ul.link_list li a{ display:block; font-size:13px; line-height:39px; color:#111; letter-spacing:-0.05em; font-weight:700; text-align:center; }

#header .menu_bx #gnb > li{ border-bottom:1px solid #dbdbdb; }
#header .menu_bx #gnb > li:last-child{ border-bottom:0; }
#header .menu_bx #gnb > li > a{ position:relative; display:block; padding:0 5px; font-size:20px; line-height:50px; color:#111; letter-spacing:-0.05em; font-weight:700; }
#header .menu_bx #gnb > li > a:after{ content:''; position:absolute; right:5px; top:50%; margin-top:-8px; width:7px; height:15px; background:url('../images/icon/gnb_ar.png') no-repeat center; background-size:7px auto; }
#header .menu_bx #gnb > li .dep02 { margin-top:-5px; padding:0 5px; }
#header .menu_bx #gnb > li .dep02 li a{ display:block; position:relative; padding-left:7px; font-size:13px; line-height:27px; color:#666; letter-spacing:-0.05em; }
#header .menu_bx #gnb > li .dep02 li a:after{ content:''; position:absolute; left:0; top:13px; width:3px;height:3px; background:#Fc6c00; border-radius:50%; }

#header .menu_bx .callcenter{ display:block; margin-top:22px; text-align:Center; background:#Fc6c00; border-radius:5px; }
#header .menu_bx .callcenter span{ display:inline-block; padding-left:26px; font-size:14px; line-height:47px; color:#fff; letter-spacing:-0.05em; font-weight:700;  background:url('../images/icon/callcenter.png') no-repeat left center; background-size:19px auto;  }

.cursor {cursor: pointer;}
.invalid-feedback {color: #ff6f6f; font-size: 11px !important; }

.btn-white {background-color: #fff;border-color: #c4c5c9 !important;color: #979797 !important;}

/* footer */
footer {
	background: #eee;
	margin: 0 auto;
	text-align: center;
}
footer .inner {
	border-top: 1px solid #e5e5e5;
	padding: 10px;
}
footer .inner li{
	font-size: 10px;
	color: #767676;
	line-height: 1.25;
}

/* common */
.layout{ padding:0 20px; width:100%; box-sizing:border-box; }

#sub .contents{ padding:25px 0 50px; }

.sub_visual{ display:table; width:100%; height:70px; text-align:center; }
.sub_visual.purple{ background:#fff; background-size:cover; }
.sub_visual.purple2{ background:#fff; background-size:cover; }
.sub_visual.blue{ background:#fff; background-size:cover; }
.sub_visual.gray{ background:#fff; background-size:cover; }
.sub_visual h2{ display:table-cell; vertical-align:middle; font-size:21px; line-height:26px; color:#212121; text-align: left; font-weight:700; letter-spacing:-0.05em; padding-left: 20px;}

.h3_titbx{ font-size:0; margin-bottom:15px; }
.h3_titbx.line{ padding-bottom:10px; margin-bottom:20px; border-bottom:1px solid #Fc6c00; }
.h3_titbx h3.tit{ display:inline-block; font-size:18px; line-height:23px; color:#111; font-weight:700; letter-spacing:-0.05em; word-break: keep-all; }
.h3_titbx .right_txt{ margin-top:7px; font-size:11px; line-height:16px; color:#666; letter-spacing:-0.05em; }
.h3_titbx .right_txt span{ color:#Fc6c00; font-weight:700; }
.h3_titbx .right_txt span.red{ color:#e90000; font-weight:700;}
.h3_titbx .right_info{ display:inline-block; float:right; margin-top:-5px; padding:0 12px; font-size:12px; line-height:30px; color:#Fc6c00; font-weight:700; letter-spacing:-0.05em; border:1px solid #Fc6c00; border-radius:3px;}
.h3_titbx .right_info.fin{ background:#ececec; color:#b0b0b0; border-color:#b0b0b0; cursor:auto; }

/* 충전기 번호 */
.chargeBtnS01{ margin-bottom:30px; }
.chargeBtnS01 .bx_wrap{ margin:0 auto; width:100%; max-width:335px; }
.chargeBtnS01 .bx{ position:relative; display:block; margin:0 auto; width:100%; padding-bottom:calc(100% - 40px); border:20px solid #fafafa; border-radius:50%; box-sizing:border-box; }
.chargeBtnS01 .bx a{ position:absolute; left:0; top:0; width:100%; height:100%; border:20px solid #e4e4e4; border-radius:50%; box-sizing:border-box; background: #Fc6c00; background: -moz-linear-gradient(-45deg,  #Fc6c00 1%, #Fc6c00 100%); background: -webkit-linear-gradient(-45deg,  #Fc6c00 1%,#Fc6c00 100%); background: linear-gradient(135deg,  #Fc6c00 1%,#Fc6c00 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#Fc6c00', endColorstr='#Fc6c00',GradientType=1 );}
.chargeBtnS01 .bx a strong{ display:block; padding-top:80px; font-size:20px; line-height:25px; color:#fff; letter-spacing:-0.05em; text-align:center; font-weight:800; font-family: 'NanumSquare', sans-serif; background:url('../images/main/main_sec01_icon.png') no-repeat center 30px; background-size:15px auto;}
.chargeBtnS01 .bx a:after{ content:''; position:absolute; width:31px; height:10px; bottom:45px; left:50%; margin-left:-15px; background:url('../images/btn/btn_ar_w.png') no-repeat center; background-size:31px auto;}
.chargeBtnS01 .bx input{ position:absolute; left:50%; bottom:100px; padding:10px 0; width:60%; height:50px; font-size:25px; line-height:30px; color:#222; background:#fff; border-radius:25px; text-align:center; border:0; box-sizing:border-box; transform:translateX(-50%); -webkit-transform:translateX(-50%); -moz-transform:translateX(-50%); font-weight:700; }

/* 충전기 이미지 */
.charge_img_wrap{ margin:0 auto 30px; width:100%; max-width:335px; }
.charge_img_wrap .bx{ position:relative; padding-bottom:100%;}
.charge_img_wrap .bx div{ position:absolute; left:0; top:0; width:100%; height:100%; border-radius:50%; background-size:cover !important; }

.coupler_selection{ margin:30px; }

/* 충전 정보 */
.chargeInfoS01{ margin-bottom:30px; }
.chargeInfoS01 > ul{ font-size:0; }
.chargeInfoS01 > ul > li{ display:inline-block; vertical-align:top; position:relative; width:33.33%; }
.chargeInfoS01 > ul > li:after{ content:''; position:absolute; right:0; top:0; width:1px; height:40px; background:#eee; }
.chargeInfoS01 > ul > li:last-child:after{ display:none; }
.chargeInfoS01 > ul > li span{ display:block; font-size:13px; line-height:18px; color:#aaa; letter-spacing:-0.05em; font-weight:700; text-align:center; }
.chargeInfoS01 > ul > li p{ margin-top:5px; font-size:14px; line-height:19px; color:#111; font-weight:800; letter-spacing:-0.05em; text-align:center; }
.chargeInfoS01 p {    display: block;
	font-size: 13px;
	line-height: 18px;
	color: #aaa;
	letter-spacing: -0.05em;
	font-weight: 700;
	text-align: center;}
/* 충전 버튼 */
.btn_listS01{ }
.btn_listS01 > ul{ font-size:0; margin-right:-10px; }
.btn_listS01 > ul > li{ display:inline-block; vertical-align:top; width:calc(40% - 10px); margin-right:10px; }
.btn_listS01 > ul > li > a{ display:table; height:45px; width:100%; border-radius:8px; box-shadow:5px 0 10px rgba(0,0,0,.2)}
.btn_listS01 > ul > li > a span{ display:table-cell; vertical-align:middle; font-size:13px; line-height:18px; color:#fff; letter-spacing:-0.05em; font-weight:700; text-align:center; }
.btn_listS01 > ul > li > a.btn01{ background:#Fc6c00; }
.btn_listS01 > ul > li > a.btn02{ background:#Fc6c00; }
.btn_listS01 > ul > li > a.btn03{ background:#Fc6c00; }
.btn_listS01 > ul > li > a.btn04{ background:#222; }
.btn_listS01 > ul > li > a.btn05{ background:#e0e0e0; }
.btn_listS01 > ul > li > a.btn05 span{ color: #Fc6c00; }

/* 충전 아이콘 */
.chargeBtnS02{}
.chargeBtnS02 .graph_wrap{ position:relative;  width:100%; max-width:335px; margin:0 auto 35px;}
.chargeBtnS02 .graph_inner{margin:0 auto; padding-bottom:100%; background:url('../images/sub/graph_bx.png') no-repeat center; background-size:cover; }
.chargeBtnS02 .circular-chart { display: block; position:absolute; left:-7px; top:-7px; width:100%; height:100%; }
.chargeBtnS02 .circle { stroke: #Fc6c00; fill: none; stroke-width: 1; stroke-linecap: round; animation: progress 1s ease-out forwards;}
@keyframes progress {
	0% {
	stroke-dasharray: 0 100;
	}
}
.chargeBtnS02 .bx_wrap1{ margin:0 auto; width:75%; max-width:250px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); }
.chargeBtnS02 .bx_wrap{ position:relative; padding-bottom:100%; background: #Fc6c00; background: -moz-linear-gradient(-45deg,  #Fc6c00 1%, #Fc6c00 100%); background: -webkit-linear-gradient(-45deg,  #Fc6c00 1%,#Fc6c00 100%); background: linear-gradient(135deg,  #Fc6c00 1%,#Fc6c00 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#Fc6c00', endColorstr='#Fc6c00',GradientType=1 ); border-radius:50%;}
.chargeBtnS02 .bx_wrap .inner{ position:absolute; left:0; top:0; width:100%; height:100%; }
.chargeBtnS02 .bx { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); }
.chargeBtnS02 .bx strong.t1{ display:block; padding-top:50px; font-size:20px; line-height:25px; color:#fff; letter-spacing:-0.05em; font-weight:800; font-family: 'NanumSquare', sans-serif; background:url('../images/main/main_sec01_icon.png') no-repeat center top; background-size:15px auto; text-align:center; }
.chargeBtnS02 .bx div.num{ margin:15px auto 0; width:170px; height:50px; font-size:12px; line-height:50px; color:#111; letter-spacing:-0.05em; background:#fff; border-radius:25px; text-align:center; }
.chargeBtnS02 .bx div.num strong{ font-size:30px; font-weight:700; }
.chargeBtnS02 .bx p.date{ margin-top:13px; font-size:12px; line-height:17px; color:#fff; letter-spacing:-0.05em; text-align:center; }


/* 충전상태 */
.chargePrc{ margin-top:25px; }
.chargePrc a{ display:block; font-size:20px; line-height:60px; letter-spacing:-0.05em; font-weight:800; text-align:Center; border-radius:5px; font-family: 'NanumSquare', sans-serif; }
.chargePrc a.fin{ color:#fff; background:#222;  box-shadow:5px 0 10px rgba(0,0,0,.2)}

/* 팝업 */
.popup{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:999; overflow-y:auto; }
.popup .pop_layout{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); background:#fff; border-radius:10px; box-sizing:border-box; }
.popup .pop_layout.small{ padding:0 20px 20px; width:100%; max-width:240px; }
.popup .pop_btn{ margin-top:20px; font-size:0; text-align:center; }
.popup .pop_btn a{ display:inline-block; vertical-align:top; margin-right:5px; width:76px; height:35px; font-size:12px; line-height:35px; color:#fff; letter-spacing:-0.05em; font-weight:700; text-align:center; border-radius:5px; box-shadow:5px 0 10px rgba(0,0,0,.2) }
.popup .pop_btn a:last-of-type{ margin-right:0; }
.popup .pop_btn a.btn01{ background:#Fc6c00; }
.popup .pop_btn a.btn02{ background:#222; }
/* 팝업 - 충전 */
.popup.charge_popup .bx1{ font-size:15px; line-height:50px; color:#111; letter-spacing:-0.05em; text-align:center; border-bottom:1px solid #c2c2c2; }
.popup.charge_popup .bx1 strong{ font-weight:800; }
.popup.charge_popup .bx1 span.c1{ color:#Fc6c00; }
.popup.charge_popup .bx2{ padding-top:16px; }
.popup.charge_popup .bx2 strong.tit{ display:block; margin-bottom:7px; font-size:13px; line-height:18px; color:#111; letter-spacing:-0.05em; font-weight:700; text-align:center; }
.popup.charge_popup .bx2 .input_bx{ font-size:0; }
.popup.charge_popup .bx2 .input_bx input{ display:inline-block; vertical-align:top; padding:7px 14px; width:calc(100% - 15px); height:35px; font-size:13px; line-height:19px; color:#666; letter-spacing:-0.05em; text-align:right; box-sizing:border-box; border:1px solid #8a8a8a; border-radius:5px; }
.popup.charge_popup .bx2 .input_bx span{ display:inline-block; vertical-align:top; width:15px; font-size:12px; line-height:35px; color:#666; text-align:right; }
/* 팝업 - 확인 */
.popup.check_popup .bx1{ padding-top:20px; text-align:center; }
.popup.check_popup .bx1 p{ font-size:13px; line-height:18px; color:#111; letter-spacing:-0.05em; font-weight:700; }
.popup.check_popup .bx1 strong{ display:block; margin-top:5px; font-size:23px; line-height:28px; color:#Fc6c00; font-weight:800;}

/* 팝업 - 탈퇴 */
.popup.wd_popup .bx1{ padding-top:20px; text-align:center; text-align:center;}
.popup.wd_popup .bx1 .txt1{ font-size:12px; line-height:20px; color:#111; letter-spacing:-0.05em; font-weight:700; }
.popup.wd_popup .bx1 .txt1 span{ color:#Fc6c00; font-weight:700; }
.popup.wd_popup .bx1 .txt2{ display:block; margin-top:10px; font-size:11px; line-height:16px; color:#888; letter-spacing:-0.05em;}

/* 팝업 - 탈퇴 */
.popup.wd_popup2 .bx1{ padding-top:20px; text-align:center; text-align:center;}
.popup.wd_popup2 .bx1 .txt1{ font-size:12px; line-height:20px; color:#111; letter-spacing:-0.05em; font-weight:700; }
.popup.wd_popup2 .bx1 .txt1 span{ color:#Fc6c00; font-weight:700; }
.popup.wd_popup2 .bx1 .txt2{ display:block; margin-top:10px; font-size:11px; line-height:16px; color:#888; letter-spacing:-0.05em;}


@media all and (max-width:350px){
	/* 충전 정보 */
	.chargeBtnS01{ margin-bottom:20px; }
	.chargeBtnS01 .bx{ padding-bottom:calc(100% - 30px); border:15px solid #fafafa; }
	.chargeBtnS01 .bx a{ border:15px solid #e4e4e4; }
	.chargeBtnS01 .bx a strong{ padding-top:70px; font-size:17px; line-height:21px; background:url('../images/main/main_sec01_icon.png') no-repeat center 25px; background-size:13px auto;}
	.chargeBtnS01 .bx a:after{ width:31px; height:10px; bottom:35px; left:50%; margin-left:-15px; background:url('../images/btn/btn_ar_w.png') no-repeat center; background-size:31px auto;}
	.chargeBtnS01 .bx input{bottom:80px; padding:7px 0; height:44px; font-size:22px; line-height:30px; border-radius:22px;}

	.btn_listS01 > ul{ margin-right:-5px; }
	.btn_listS01 > ul > li{ width:calc(25% - 5px); margin-right:5px; }
	.btn_listS01 > ul > li > a span{ font-size:12px; }

	.chargeBtnS02 .bx strong.t1{ padding-top:40px; font-size:17px; line-height:21px; background:url('../images/main/main_sec01_icon.png') no-repeat center 5px; background-size:13px auto;}
	.chargeBtnS02 .bx div.num{ margin:12px auto 0; width:140px; height:40px; font-size:12px; line-height:40px; border-radius:20px; }
	.chargeBtnS02 .bx div.num strong{ font-size:25px; }
	.chargeBtnS02 .bx p.date{ margin-top:10px; font-size:12px; line-height:17px; }

}

.popup.noti .close_btn a{ float:right; width:19px; height:19px; background:url('../images/btn/btn_pop_close.png') no-repeat center; text-indent:-9999px; }
.popup.noti .close_btn { padding-top: 14px; }
.popup.noti .contents {padding-top: 20px; min-height: 100px}


.back_btn a{
	width:40px;
	height:40px;
	background:url('../images/icon/back.png') no-repeat center;
	background-size:40px auto;
	box-shadow: 4px 4px 5px #e0e0e0;
	background-size: auto;
	border-radius: 30px;
	position:fixed;
	bottom:20px;
	left:20px;
}

#popup_list img {width: 100% !important;}

div.toast.toast-error {background: #Fc6c00}