/*
  * 充电桩
*/
@charset "utf-8";
html,
body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body,
div,
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
dl,
dd,
dt,
form,
input,
textarea,
select {
  margin: 0;
  padding: 0;
}
body {
  font-size: 14px;
  color: #222;
  text-align: left;
  background-color: #f3f4f3;
}
.body-white {
  background-color: #fff;
}
/* body > iframe {
  opacity: 0;
  display: none;
}
iframe {
  display: none;
  opacity: 0;
} */
li {
  list-style: none;
}
img {
  border: 0;
}
a {
  color: #3296fa;
  text-decoration: none;
  outline: none;
}
/*a:hover {text-decoration:none; outline: none}*/
a,
a:link,
a:visited,
a:hover,
a:active,
input:hover,
input:visited,
input:active,
input:focus,
textarea:hover,
textarea:visited,
textarea:active,
textarea:focus {
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.wrapper {
  margin: 0 auto;
}
.wr-p3 {
  padding: 0 3%;
}
.both {
  clear: both;
}
.t-ellipsis {
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.red {
  color: #ff4d56;
}
.yellow {
  color: #ff9000;
}
.green {
  color: #3296fa;
}
.gray {
  color: #999;
}
.price {
  color: #f90;
  font-size: 16px;
}
.white-bg {
  background-color: #fff;
}
.none {
  display: none;
}
.h10 {
  height: 10px;
}
.h20 {
  height: 20px;
}
.h30 {
  height: 30px;
}
.h40 {
  height: 40px;
}
.h50 {
  height: 50px;
}
.h60 {
  height: 60px;
}
.text-mid {
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
/* 公共部分 */
.ico-loading,
.ico-success,
.ico-error {
  background-image: url("../images/ico-prompt.png");
  background-repeat: no-repeat;
  display: inline-block;
  vertical-align: middle;
}
.ico-loading {
  width: 24px;
  height: 20px;
  background-size: 110px;
  background-position: left top;
  animation: rotate 0.75s linear infinite;
}
.ico-success {
  margin-bottom: 4px;
  width: 26px;
  height: 20px;
  background-size: 110px;
  background-position: -26px top;
}
.ico-error {
  width: 20px;
  height: 25px;
  background-size: 110px;
  background-position: -55px top;
}
.ico-warn {
  display: inline-block;
  background-image: url("../images/ico_exclaimination.png");
  background-repeat: no-repeat;
  vertical-align: middle;
  background-size: 36px;
  width: 20px;
  height: 35px;
}

/* 加载数据  */
.dropload-up,
.dropload-down {
  position: relative;
  height: 0;
  overflow: hidden;
  font-size: 16px;
  transform: translateZ(0);
}
.dropload-down {
  height: 50px;
}
.dropload-refresh,
.dropload-update,
.dropload-load,
.dropload-noData {
  height: 50px;
  line-height: 50px;
  text-align: center;
  font-size: 13px;
  color: #909090;
}
.dropload-noData {
  color: #999;
}
.dropload-load .loading {
  display: inline-block;
  height: 15px;
  width: 15px;
  border-radius: 100%;
  margin: 6px;
  border: 2px solid #666;
  border-bottom-color: transparent;
  vertical-align: middle;
  animation: rotate 0.75s linear infinite;
}
.dropload-load.f18 {
  padding-top: 20px;
  font-size: 18px;
  color: #909090;
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-box {
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 100%;
  position: fixed;
  left: 50%;
  top: 10%;
  z-index: 20;
  margin-left: -15px;
}
.loading-box em,
.loadem {
  display: inline-block;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  margin: 3px;
  border: 2px solid #3296fa;
  border-bottom-color: transparent;
  vertical-align: middle;
  animation: rotate 0.75s linear infinite;
}

.opacity-bg {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #000000;
  opacity: 0.4;
  z-index: 20;
}
.opacity-white {
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0.1;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 20;
}
.fixed-bottom {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 5;
}
.fixed-top {
  position: fixed !important;
  left: 0;
  top: 0;
  z-index: 5;
}

.chargingPrompt {
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 100;
  position: absolute;
  top: 0px;
  opacity: 0.9;
  display: none;
}
.clz {
  width: 100%;
  height: 80px;
  color: #fff;
  opacity: 1;
  font-weight: bold;
  text-align: center;
  color: #128bed;
  font-size: 40px;
  position: fixed;
  top: calc(50% - 40px);
}

.wx-prompt {
  min-height: 30px;
  text-align: center;
  color: #fff;
  font-size: 18px;
  position: fixed;
  top: 40%;
  left: 10%;
  right: 10%;
  z-index: 21;
}
.wx-prompt p {
  padding: 10px 20px 10px;
  display: inline-block;
  min-width: 200px;
  min-height: 30px;
  line-height: 30px;
  background: #3296fa;
  background-size: 340px;
  border-radius: 10px;
}
.wx-prompt em {
  margin-right: 10px;
}
.wx-prompt.small {
  min-height: 20px;
  font-size: 14px;
  top: auto;
  bottom: 10%;
}
.wx-prompt.small p {
  padding: 2px 20px;
  min-width: 100px;
  min-height: 20px;
  line-height: 20px;
}

.wx-prompt2 {
  min-height: 30px;
  text-align: center;
  color: #333;
  font-size: 18px;
  position: fixed;
  top: 40%;
  left: 10%;
  right: 10%;
  z-index: 21;
}
.wx-prompt2 dl {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
}
.wx-prompt2 dl dt {
  padding: 20px 10px 20px;
  min-width: 260px;
  min-height: 40px;
  line-height: 20px;
}
.wx-prompt2 dl dt em {
  margin-right: 10px;
}
.wx-prompt2 dl dd a {
  width: 50%;
  height: 40px;
  line-height: 40px;
  color: #999;
  border-top: 1px solid #f6f6f6;
  position: relative;
  display: block;
  float: left;
}
.wx-prompt2 dl dd a:first-child {
  color: #3296fa;
}
.wx-prompt2 dl dd a:first-child:after {
  content: " ";
  width: 1px;
  height: 100%;
  background-color: #f8f8f8;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}

.wx-prompts {
  min-height: 30px;
  text-align: center;
  color: #333;
  font-size: 18px;
  position: fixed;
  top: 40%;
  left: 10%;
  right: 10%;
  z-index: 21;
}
.wx-prompts .closes {
  background-color: #3296fa;
  border-radius: 0 0 8px 8px;
  color: white;
}
.wx-prompts dl {
  display: inline-block;
  background: #fff;
  border-radius: 10px;
}
.wx-prompts dl dt {
  padding: 12px;
  min-width: 200px;
  line-height: 20px;
}
.wx-prompts dl dt em {
  margin-right: 10px;
}
.wx-prompts dl dd a {
  width: 50%;
  height: 40px;
  line-height: 40px;
  color: #999;
  border-top: 1px solid #f6f6f6;
  position: relative;
  display: block;
  float: left;
}
.wx-prompts dl dd a:first-child {
  color: #3296fa;
}
.wx-prompts dl dd a:first-child:after {
  content: " ";
  width: 1px;
  height: 100%;
  background-color: #f8f8f8;
  position: absolute;
  top: 0;
  right: 0;
  display: block;
}
.wx-prompts .boxShow {
  box-shadow: 0 1px #e7e7e7;
}

.btn {
  padding: 5px 20px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 16px;
  border-radius: 4px;
  display: inline-block;
  cursor: pointer;
}
.btn-green {
  background: linear-gradient(left, #3296fa 15%, #6ad78a 80%);
  background: -webkit-linear-gradient(left, #3296fa 15%, #6ad78a 80%);
  color: #fff;
  border: none;
}
.btn-green:hover {
  color: #fff;
}
.btn.disable,
.btn.disable:hover {
  background: #d5d5d5;
}

.ico-error2,
.ico-arrow-down,
.ico-time,
.ico-updatedata,
.ico-arrow-gray,
.ico-address {
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
}
.ico-time {
  margin-right: 4px;
  width: 13px;
  height: 13px;
  background-image: url("../images/ico-time.png");
}
.ico-updatedata {
  margin-right: 4px;
  width: 16px;
  height: 14px;
  background-image: url("../images/ico-updatedata.png");
}
.ico-error2 {
  margin-right: 4px;
  width: 14px;
  height: 14px;
  background-image: url("../images/ico-close-red.png");
}
.ico-arrow-down {
  margin-left: 4px;
  margin-top: 6px;
  width: 8px;
  height: 6px;
  background-image: url("../images/ico-arrow-down.png");
  background-position: left top;
}
.ico-arrow-gray {
  width: 11px;
  height: 19px;
  background-image: url("../images/ico-arrow-gray.png");
}
.ico-address {
  margin-right: 4px;
  margin-bottom: 2px;
  width: 13px;
  height: 17px;
  background-image: url("../images/ico_1.png");
}
a:hover .ico-address {
  background-position: center bottom;
}

.icon {
  background-image: url("../images/icon.png");
  background-repeat: no-repeat;
  background-size: 234px;
  display: inline-block;
  vertical-align: middle;
}
.ico-phone {
  width: 17px;
  height: 25px;
  background-position: -108px top;
}
.ico-validate {
  width: 20px;
  height: 25px;
  background-position: -127px top;
}
.ico-scan {
  width: 24px;
  height: 24px;
  background-position: -81px top;
}
.ico-f1 {
  width: 21px;
  height: 21px;
  background-position: left top;
}
.ico-f2 {
  width: 24px;
  height: 24px;
  background-position: -55px top;
}
.ico-f3 {
  width: 21px;
  height: 21px;
  background-position: -24px top;
}
.ico-card {
  width: 24px;
  height: 24px;
  background-image: url("../images/icon-card.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
}
.active .ico-f1 {
  background-position: left -26px;
}
.active .ico-f3 {
  background-position: -24px -26px;
}
.ico-search {
  width: 15px;
  height: 16px;
  background-position: -150px top;
}
.ico-location {
  width: 15px;
  height: 17px;
  background-position: -166px top;
}
.ico-arrow-t-right {
  width: 15px;
  height: 14px;
  background-position: -216px top;
}
.ico-fast {
  width: 16px;
  height: 16px;
  background-position: -182px top;
}
.ico-slow {
  width: 16px;
  height: 16px;
  background-position: -199px top;
}
.ico-set {
  width: 19px;
  height: 19px;
  background-position: -50px -26px;
}
.ico-topup {
  width: 24px;
  height: 28px;
  background-position: -73px -26px;
}
.ico-charging {
  width: 33px;
  height: 28px;
  background-position: -99px -26px;
}
.ico-my1,
.ico-my2,
.ico-my3,
.ico-my4,
.ico-my5,
.ico-my6 {
  width: 33px;
  height: 24px;
}
.ico-my1 {
  background-position: 0px -57px;
}
.ico-my2 {
  background-position: -34px -57px;
}
.ico-my3 {
  background-position: -68px -57px;
}
.ico-my4 {
  background-position: -102px -57px;
}
.ico-my5 {
  background-position: -136px -57px;
}
.ico-my6 {
  background-position: -170px -57px;
}

/* login */
.loginbg {
  background: #fcfef3 url("../images/line_1.jpg") repeat-x left bottom;
  background-size: auto 100%;
}
.login-bottombg {
  height: 100%;
  background: url("../images/bg_2.png") no-repeat left bottom;
  background-size: 120px;
  overflow: hidden;
}
.login-one {
  margin-top: 60px;
  height: 18%;
  background: url("../images/bg_1.png") no-repeat center top;
  background-size: 110px auto;
}

.login-box {
  padding-bottom: 20px;
  margin: 0 auto;
  width: 80%;
  max-width: 420px;
  clear: both;
}
.login-box ul {
}
.login-box ul li {
  margin-top: 10px;
  position: relative;
  border-bottom: 1px solid #e7e7e7;
  overflow: hidden;
}
.login-box ul li input {
  padding: 10px 40px;
  height: 50px;
  line-height: 50px;
  width: 100%;
  font-size: 16px;
  border: none;
  background: none;
}
.login-box ul li input::-webkit-input-placeholder,
.login-box ul li input:-moz-placeholder,
.login-box ul li input:-ms-input-placeholder {
  color: red;
}
.login-box ul li.col-2 input {
  padding-right: 10px;
  width: 62%;
}
.login-box ul li.col-2 a {
  float: right;
  width: 35%;
  padding: 5px 0;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
}
.login-box ul li.col-2 a.active {
  color: #999;
}
.login-box ul li input:hover {
  border-color: #128bed;
}
.login-box ul li em {
  position: absolute;
  left: 10px;
  top: 12px;
}
.login-box .lm {
  height: 30px;
}
.login-box .fbtn {
  margin: 8px 0 10px;
}
.login-box .fbtn .btn {
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  border-radius: 60px;
}
.login-no-text {
  margin: 0 -20px;
  font-size: 12px;
  line-height: 24px;
  padding-top: 6px;
  color: #666;
  text-align: center;
}
.msg-error {
  padding: 5px 0 5px;
  color: #f00;
  display: none;
}
.msg-error em {
  margin: 0 6px 2px 0;
}

/* index */
.index-bg {
  height: 100%;
  background: url("../images/bg_4.png") no-repeat center top;
  background-size: contain;
  overflow: hidden;
}
.index-one-box {
  width: 100%;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 120px;
  z-index: 2;
}
.index-one-box .btn {
  padding: 0;
  width: 70%;
  max-width: 360px;
  height: 50px;
  line-height: 50px;
  font-size: 16px;
  border-radius: 60px;
}
.index-one-box .btn em {
  margin-right: 10px;
}
.index-one-box .ctext {
  padding-top: 20px;
  line-height: 24px;
}
.index-one-box .ctext a {
  padding: 0;
  width: 70%;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
}

.footh {
  height: 50px;
}
.foot-nav {
  width: 100%;
  height: 50px;
  background-color: #fff;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 15;
}
.foot-nav a {
  width: 33%;
  height: 50px;
  font-size: 14px;
  display: block;
  float: left;
  text-align: center;
  color: #94969e;
  position: relative;
}
.foot-nav a em {
  margin-top: 5px;
}
.foot-nav a span {
  margin-top: 1px;
  display: block;
}
.foot-nav .f-scan em {
  margin-top: 0px;
}
.foot-nav .f-scan span {
  padding-top: 26px;
  color: #3296fa;
}
.foot-nav .f-scan i {
  width: 50px;
  height: 50px;
  line-height: 50px;
  background: #fff;
  border-radius: 100%;
  text-align: center;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  left: 50%;
  top: -25px;
  z-index: 23;
  margin-left: -25px;
}
.foot-nav .f-scan i em {
  margin-left: 3px;
}
.foot-nav a.active {
  color: #3296fa;
}

.seach-topbox {
  margin-bottom: 10px;
  width: 100%;
  height: 50px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 2;
}
.seach-topbox .address {
  padding-left: 4%;
  width: 20%;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #222;
  overflow: hidden;
  float: left;
}
.seach-topbox .search {
  margin: 8px 6% 0 0;
  width: 66%;
  float: right;
  position: relative;
}
.seach-topbox .sec {
  padding: 0 40px 0 20px;
  width: 100%;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  border: none;
  background-color: #f7f7f7;
  border-radius: 40px;
  display: block;
}
.seach-topbox span {
  width: 40px;
  height: 36px;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  text-align: center;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 1;
}
.seach-topbox span input {
  width: 36px;
  height: 36px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  opacity: 0;
}
.ico-goback {
  width: 15px;
  height: 20px;
  background: url("../images/ico-arrow-gray.png") no-repeat center top;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
  transform: rotate(180deg);
}
.seach-back .go-back {
  padding: 16px 4% 0;
  height: 20px;
  float: left;
  display: block;
}
.seach-back .search {
  width: 78%;
}

.near-sub {
  margin: 0 0 10px;
  padding: 0 4%;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  overflow: hidden;
  position: relative;
}
.near-sub li {
  width: 50%;
  float: left;
  text-align: center;
}
.near-sub li a {
  min-width: 80px;
  height: 40px;
  line-height: 40px;
  font-size: 15px;
  color: #545454;
  display: inline-block;
  font-weight: bold;
  position: relative;
  cursor: pointer;
}
.near-sub li.active a {
  color: #3296fa;
}
.near-sub li.active a:before {
  content: " ";
  width: 100%;
  height: 2px;
  background-color: #3296fa;
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
}

.n-type {
  margin-left: 6px;
  padding: 0 4px;
  height: 16px;
  line-height: 16px;
  color: #666;
  background-color: #f2f2f2;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
}
.near-list {
  padding: 0 4%;
  clear: both;
}
.near-list .item {
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.near-list .item .ntop {
  padding: 13px 10px 10px;
  position: relative;
}
.near-list .item .ntop .nleft {
  margin: 0 100px 0 20px;
}
.near-list .item .ntop .nleft h3 {
  font-size: 16px;
  padding-bottom: 8px;
  position: relative;
}
.near-list .item .ntop .nleft h3 em {
  position: absolute;
  top: 2px;
  left: -21px;
}
.near-list .item .ntop .nleft .cn {
  font-size: 13px;
  line-height: 20px;
  color: #999;
}
.near-list .item .ntop .nleft .cn p {
  padding-bottom: 3px;
}
.near-list .item .nright {
  height: 100%;
  position: absolute;
  top: 15px;
  right: 10px;
  z-index: 2;
  text-align: right;
}
.near-list .item .nright .naddress {
  padding: 0 6px;
  height: 24px;
  line-height: 24px;
  color: #3296fa;
  background-color: #f6fdf8;
  border: 1px solid #b8edd7;
  border-radius: 6px;
  display: inline-block;
}
.near-list .item .nright .nprice {
  width: 100px;
  color: #f90;
  font-size: 13px;
  position: absolute;
  bottom: 28px;
  right: 0;
  display: block;
}
.near-list .item .nright .nprice b {
  margin: 0 3px;
  font-size: 18px;
}
.near-list .item .nbtn {
  padding: 0 10px 0 30px;
  height: 40px;
  line-height: 40px;
  border-top: 1px solid #e6e6e6;
  color: #666;
}
.near-list .item .nbtn li a {
  display: block;
  color: #666;
}
.near-list .item .nbtn li em {
  margin-right: 6px;
  vertical-align: text-bottom;
}
.near-list .item .nbtn li.nl {
  float: left;
}
.near-list .item .nbtn li.nr {
  min-width: 100px;
  float: right;
}

.my-head .wrapper {
  background: url("../images/new/my/bg.png") no-repeat center top;
  background-size: 100%;
}
.my-head .tool {
  height: 50px;
  line-height: 50px;
  color: #fff;
  text-align: center;
  position: relative;
}
.my-head .tool h2 {
  font-size: 18px;
}
.my-head .tool .set {
  padding: 16px 4%;
  display: inline-block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.my-head .my-one {
  padding: 0 5%;
  color: #fff;
}
.my-head .my-one .wximg {
  width: 56px;
  height: 56px;
  border-radius: 100%;
  border: 2px solid #37cd8d;
  overflow: hidden;
  float: left;
}
.my-head .my-one .wximg img {
  width: 56px;
  height: 56px;
  border-radius: 100%;
}
.my-head .my-one dl {
  margin-left: 74px;
}
.my-head .my-one dl dt {
  margin-bottom: 4px;
  height: 26px;
  line-height: 26px;
  font-size: 15px;
  font-weight: bold;
}
.my-head .my-one dl dd {
  padding: 0 10px;
  height: 20px;
  line-height: 20px;
  font-size: 12px;
  border-radius: 20px;
  border: 1px solid #fff;
  display: inline-block;
}
.my-head .my-one ul {
  padding: 0 8% 35px;
  clear: both;
  overflow: hidden;
  text-align: center;
  position: relative;
}
.my-head .my-one ul:before {
  content: " ";
  width: 1px;
  height: 24px;
  background-color: #74deae;
  display: inline-block;
  position: absolute;
  right: 50%;
  top: 24px;
  z-index: 2;
}
.my-head .my-one ul li {
  width: 50%;
  float: left;
}
.my-head .my-one ul li a {
  display: block;
}
.my-head .my-one ul li b {
  padding-top: 10px;
  height: 30px;
  line-height: 30px;
  font-size: 22px;
  color: #fff;
  display: block;
}
.my-head .my-one ul li span {
  font-size: 13px;
  color: #a9f0d0;
  display: block;
}
.my-head .my-one ul li .btn {
  margin-top: 18px;
  padding: 0;
  width: 60%;
  height: 30px;
  line-height: 30px;
  font-size: 15px;
  color: #fff;
  border: 1px solid #fff;
  display: inline-block;
}
.my-tow {
  margin-bottom: 10px;
  padding: 0 5%;
  height: 90px;
  background-color: #fff;
  position: relative;
}
.my-tow ul {
  padding: 0 5%;
  height: 90px;
  text-align: center;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 2px 4px 7px rgba(232, 249, 242, 0.9);
  position: absolute;
  left: 5%;
  right: 5%;
  top: -25px;
  z-index: 2;
}
.my-tow ul li {
  width: 50%;
  float: left;
}
.my-tow ul li a {
  padding: 15px 0;
  height: 60px;
  color: #222;
  display: block;
  cursor: pointer;
}
.my-tow ul li a span {
  padding: 5px 0 5px;
  display: block;
}
.my-tow ul li a p {
  line-height: 22px;
}

.my-sub {
  margin-bottom: 10px;
  padding: 0 5%;
  background-color: #ffffff;
}
.my-sub ul li {
  border-bottom: 1px solid #f6f6f6;
  overflow: hidden;
  position: relative;
}
.my-sub ul li a {
  padding: 10px 0;
  height: 35px;
  line-height: 35px;
  color: #222;
  font-size: 15px;
  display: block;
}
.my-sub ul li b {
  display: inline-block;
  float: left;
  font-weight: normal;
}
.my-sub ul li span {
  margin-right: 30px;
  height: 35px;
  color: #999;
  display: inline-block;
  float: right;
  position: relative;
}
.my-sub ul li .icon {
  margin: 0 10px 2px 0;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  display: inline-block;
  background-color: #e9faee;
}
.my-sub ul li .ico-arrow-gray {
  position: absolute;
  right: -25px;
  top: 50%;
  transform: translateY(-45%);
  z-index: 2;
  opacity: 0.8;
}

.manual-nbox {
  position: fixed;
  right: 7%;
  left: 7%;
  top: 42%;
  transform: translateY(-50%);
  z-index: 2;
}
.manual-nbox dl {
  height: 70px;
  border-bottom: 1px solid #ededed;
  overflow: hidden;
  position: relative;
}
/* .manual-nbox dl:before {content: " "; width: 25px; height: 4px; background-color: #353535; display: inline-block ; margin-left: -15px; position: absolute;left: 55%; top: 30px; z-index: 2; } */
.manual-nbox dl input {
  padding: 15px 0;
  width: 100%;
  line-height: 30px;
  font-size: 15px;
  background: none;
  border: none;
}
.manual-nbox dl dt {
  width: 55%;
  float: left;
}
.manual-nbox dl dt input {
  text-align: center;
  padding-right: 22px;
}
.manual-nbox dl dd {
  width: 45%;
  float: right;
}
.manual-nbox dl dd input {
  padding-left: 30px;
}
.manual-nbox ol {
  padding: 28% 0px 0;
}
.manual-nbox ol .btn {
  display: block;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  border-radius: 60px;
}

.recharge-record {
  padding: 10px 4%;
}
.recharge-record a {
  display: block;
  color: #222;
}
.recharge-record .item {
  margin-bottom: 10px;
  padding: 0 14px;
  background-color: #ffffff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.recharge-record .item:before {
  content: " ";
  width: 4px;
  height: 40px;
  background-color: #3296fa;
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.recharge-record .item h3 {
  height: 40px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ededed;
  font-size: 15px;
  font-weight: normal;
}
.recharge-record .item ul {
  padding: 8px 0 10px;
  overflow: hidden;
}
.recharge-record .item ul li {
  padding: 1px 0;
  overflow: hidden;
  clear: both;
  font-size: 13px;
  color: #666;
  line-height: 22px;
}
.recharge-record .item em {
  width: 50px;
  height: 51px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  display: inline-block;
}
.recharge-record .item ul li .t {
  float: left;
}
.recharge-record .item ul li p {
  margin-left: 66px;
}
.ico-type {
  background-image: url("../images/ico_2.png");
}
.ico-type2 {
  background-image: url("../images/ico_3.png");
}
.ico-type3 {
  background-image: url("../images/ico_6.png");
}

.topup-head {
  margin: 20px auto;
  width: 90%;
  max-width: 360px;
  height: 120px;
  color: #fff;
  border-radius: 6px;
  text-align: center; /* background:url("../images/bg_6.jpg") no-repeat center bottom; */
  background-size: cover;
  background-color: #3296fa;
}
.topup-head .t {
  padding: 20px 0 5px;
  font-size: 18px;
  display: block;
}
.topup-head b {
  font-size: 28px;
  display: block;
  padding-right: 6px;
}

.title-line {
  margin: 40px auto 30px;
  width: 90%;
  max-width: 360px;
  height: 1px;
  background-color: #ededed;
  position: relative;
}
.title-line span {
  padding: 0 20px;
  height: 24px;
  font-size: 16px;
  color: #666;
  background-color: #f3f4f3;
  position: absolute;
  left: 50%;
  top: -12px;
  transform: translateX(-50%);
  z-index: 2;
}
.topup-one {
  margin: 0 auto;
  width: 90%;
  max-width: 360px;
  clear: both;
  overflow: hidden;
}
.topup-one li {
  width: 30%;
  margin: 0 4% 15px 0;
  height: 56px;
  line-height: 56px;
  color: #3296fa;
  text-align: center;
  border: 1px solid #fff;
  background-color: #fff;
  float: left;
  box-shadow: 1px 2px 5px #e2eee9;
  border-radius: 6px;
  position: relative;
}
.topup-one .active {
  border: 1px solid #3296fa;
  background-color: #f8fffc;
}
.topup-one li:nth-child(3n) {
  margin-right: 0;
}
.topup-one li .s {
  font-size: 15px;
}
.topup-one li b {
  font-size: 22px;
}
.topup-one li.no input {
  width: 100px;
  height: 56px;
  line-height: 56px;
  color: #3296fa;
  text-align: center;
  background: none;
  border: none;
}
.topup-one li.no .tf22 {
  font-size: 22px;
  font-weight: bold;
}

.topup-btn {
  margin: 60px auto 30px;
  width: 90%;
  max-width: 360px;
}
.topup-btn .btn {
  display: block;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  border-radius: 60px;
}

.region-one {
  margin-top: 50px;
  padding: 5px 4% 0;
  clear: both;
  overflow: hidden;
}
.region-one dl dt {
  color: #8e8e8e;
  line-height: 20px;
  padding: 5px 0 7px;
}
.region-one dl dd {
  clear: both;
  overflow: hidden;
}
.region-one dl a {
  margin: 0 3% 8px 0;
  min-width: 22%;
  height: 28px;
  line-height: 28px;
  font-size: 13px;
  color: #414141;
  text-align: center;
  background-color: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  align-items: center;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  float: left;
}
.region-one dl a:nth-child(4n) {
  margin-right: 0;
}
.region-one dl a:hover {
  border: 1px solid #3296fa;
  background-color: #f4f7fb;
  color: #3296fa;
}
.region-two {
}
.region-two h3 {
  padding: 0 4%;
  line-height: 24px;
  color: #414141;
}
.region-two .item {
  padding: 0 4%;
  height: 30px;
  line-height: 30px;
  color: #414141;
  border-bottom: 1px solid #e5e5e5;
  background-color: #fff;
  display: block;
}
.region-two .item:hover {
  border-color: #3296fa;
  background-color: #f4f7fb;
  color: #3296fa;
}

.top-bar {
  width: 100%;
  height: 40px;
  background-color: #fff;
  border-bottom: 1px solid #eaeaea;
  position: relative;
}
.top-bar .go-back {
  padding: 0 4%;
  height: 40px;
  float: left;
}
.top-bar h2 {
  padding: 0 35px;
  font-size: 15px;
  color: #414141;
  font-weight: normal;
  text-align: center;
}

.scan-one {
  padding: 0 4%;
}
.scan-one h3,
.scan-one h4 {
  font-weight: normal;
}
.scan-one h3 {
  line-height: 40px;
  font-size: 15px;
}
.scan-one h4 {
  padding-bottom: 6px;
  line-height: 20px;
  color: #999;
}
.scan-one-roll {
  max-height: 40%;
  overflow: auto;
}
.scan-one-roll li {
  margin: 0 4% 10px 0;
  min-width: 16%;
  height: 60px;
  color: #414141;
  text-align: center;
  background-color: #fff;
  border: 1px solid #cacaca;
  border-radius: 4px;
  display: inline-block;
  overflow: hidden;
  float: left;
  cursor: pointer;
}
.scan-one-roll li:nth-child(5n) {
  margin-right: 0;
}
.scan-one-roll li b,
.scan-one-roll li span {
  display: block;
}
.scan-one-roll li b {
  padding: 8px 0 1px;
  font-size: 18px;
}
.scan-one-roll li.active {
  border-color: #3296fa;
  background-color: #f8fffc;
  color: #3296fa;
}
.scan-one-roll li.on {
  border-color: #eeeeee;
  background-color: #eeeeee;
  color: #fff;
}

.scan-two {
  margin-top: 20px;
  padding: 0 4%;
}
.scan-two h4 {
  line-height: 30px;
  color: #999;
  font-weight: normal;
}
.scan-two-list {
  clear: both;
  overflow: hidden;
}
.scan-two-list li {
  margin: 0 6% 10px 0;
  width: 46%;
  height: 60px;
  color: #414141;
  text-align: center;
  background-color: #fff;
  border: 1px solid #cacaca;
  border-radius: 6px;
  display: inline-block;
  overflow: hidden;
  float: left;
  cursor: pointer;
}
.scan-two-list li:nth-child(2n) {
  margin-right: 0;
}
.scan-two-list li p {
  padding: 6px 0 2px;
}
.scan-two-list li p b {
  font-size: 20px;
  margin-right: 2px;
}
.scan-two-list li span {
  display: block;
  color: #999;
  font-size: 13px;
}
.scan-two-list li span i {
  font-style: normal;
}
.scan-two-list li.active {
  border-color: #3296fa;
  background-color: #f8fffc;
  color: #3296fa;
}

.scan-foot {
  padding: 0 4%;
  width: 92%;
  height: 50px;
  line-height: 50px;
  font-size: 15px;
  background-color: #f3f4f3;
  text-align: center;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 23;
  overflow: hidden;
}
.scan-foot a {
  margin-top: 5px;
  display: block;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  border-radius: 60px;
}
.scan-foot .active {
  background: #d5d5d5;
  color: #fff;
}

.topup-records {
  clear: both;
  overflow: hidden;
  padding-bottom: 20px;
  /* background-color: #ffffff; */
}
.topup-records .item {
  padding: 10px;
  line-height: 20px;
  color: #414141;
  /* border-bottom: 1px solid #e5e5e5; */
  margin-bottom: 10px;
  background-color: #fff;
  position: relative;
  border-radius: 5px;
}
.topup-records .item:last-child {
  border-bottom: none;
}
.topup-records .item p {
  clear: both;
  overflow: hidden;
}
.topup-records .item p b {
  font-weight: normal;
  float: left;
}
.topup-records .item p.cn {
  font-size: 12px;
  color: #999;
}
.topup-records .item .price {
  font-size: 16px;
  color: rgb(0, 0, 0);
  padding-right: 4px;
  flex: 1;
  display: block;
}
.topup-records .item .price1 {
  font-size: 16px;
  color: #f90;
  flex: 1;
  display: block;
}
.topup-records .item .div11 {
  position: absolute;
  right: 10px;
  top: 37%;
  width: 38%;
  text-align: right;
}

.edit-phone {
  margin-top: 20%;
}
.edit-phone ul li input {
  padding-left: 10px;
}
.edit-phone .fbtn {
  margin-top: 30px;
}

.dw-world-box {
  padding: 0;
  background-color: #ffffff;
  overflow: hidden;
}
.dw-world-box textarea {
  padding: 20px 4%;
  width: 100%;
  min-height: 200px;
  background: none;
  border: none;
}
.dwworld-btn {
  margin: 30px auto 30px;
  width: 90%;
  max-width: 360px;
}
.dwworld-btn .btn {
  display: block;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  border-radius: 8px;
}

/* 支付成功 */
.ico-success-big,
.ico-fail-big {
  width: 66px;
  height: 66px;
  display: inline-block;
}
.ico-success-big {
  background: url("../images/ico-success.png") no-repeat left top;
  background-size: contain;
}
.ico-fail-big {
  background: url("../images/ico-fail.png") no-repeat left top;
  background-size: contain;
}

.pay-success {
  padding: 70px 0 20px;
  text-align: center;
  color: #1b1a1f;
}
.pay-success .ms {
  padding: 13px 0 30px;
  font-size: 14px;
  line-height: 100%;
}
.pay-success .pp {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 32px;
}
.pay-success .ps {
  padding-top: 20px;
  font-size: 14px;
}
.pay-success .ps a {
  color: #f37820;
}
.pay-success .ps a em {
  margin: 0 0 2px 3px;
}
.pay-success ul {
  margin-top: 30px;
}
.pay-success .pts {
  padding: 20px 0 0;
  font-size: 12px;
  color: #9a9a9a;
}
.pay-success .pgray {
  padding: 10px 8%;
  font-size: 13px;
  color: #9a9a9a;
  line-height: 20px;
}
.pay-fail {
  padding: 20px 0;
  text-align: center;
  color: #1b1a1f;
}
.pay-fail .ms {
  padding: 15px 0 20px;
  font-size: 22px;
  line-height: 32px;
  font-weight: bold;
}
.pay-fail dl {
  margin: 0 20px 60px;
  font-size: 14px;
  line-height: 24px;
  text-align: center;
}
.pay-fail dl dt {
  padding: 15px 0 10px;
  line-height: 100%;
  font-size: 18px;
  font-weight: bold;
}
.pay-fail dl dd {
  padding-bottom: 15px;
  font-size: 12px;
  line-height: 18px;
  color: #595959;
}
.pay-fail .pay-input {
  padding: 30px 5%;
}
.pay-fail .pay-input .btn {
  width: 80%;
  display: inline-block;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  border-radius: 60px;
}
.pay-foot-btn {
  padding: 10px 10%;
}
.pay-foot-btn .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 32px;
  font-size: 16px;
  border-radius: 60px;
}
.ongoing-h2 {
  width: 100%;
  text-align: center;
  position: fixed;
  top: 20%;
  left: 0;
  z-index: 4;
  font-size: 36px;
  color: #3296fa;
  font-weight: bold;
}
.ongoing-bg {
  width: 100%;
  height: 62%;
  background-color: #3296fa;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1;
  animation: ongoAnimation 2s infinite ease;
}
@keyframes ongoAnimation {
  0% {
    height: 62%;
  }
  50% {
    height: 67%;
  }
  100% {
    height: 62%;
  }
}
.ongoing-box {
  width: 100%;
  text-align: center;
  position: fixed;
  top: 36%;
  bottom: 148px;
  left: 0;
  z-index: 2;
  overflow: auto;
}
.ongoing-box .onon {
  line-height: 24px;
  color: #fff;
}
.ongoing-box .onon li {
  position: relative;
  padding-bottom: 16px;
}
.ongoing-box .onon li:after {
  content: " ";
  width: 80px;
  height: 1px;
  background-color: #e4e4e4;
  display: inline-block;
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0.2;
}
.ongoing-box .onon li:last-child:after {
  display: none;
}
.ongoing-foot {
  width: 100%;
  position: fixed;
  left: 0;
  top: 23px;
  z-index: 2;
  text-align: center;
}
.ongoing-foot a {
  width: 80%;
  margin-top: 15px;
  color: rgb(207, 20, 20);
  border: 1px solid #fff;
  height: 32px;
  line-height: 32px;
  font-size: 16px;
  border-radius: 4px;
  display: inline-block;
}

/* 充电设置 */
.chargingset-one {
  padding: 15px 0 20px;
  background-color: #f8fffc;
  text-align: center;
  color: #3296fa;
}
.chargingset-one dt {
  height: 40px;
  line-height: 40px;
  border-bottom: 1px solid #e6e6e6;
  font-size: 18px;
}
.chargingset-one dt a {
  display: block;
  line-height: 40px;
}
.chargingset-one dt b {
  margin-left: 10px;
  font-size: 20px;
}
.chargingset-one dd {
  padding: 8px 0;
  font-size: 18px;
}

.chargingset-btn {
  margin-bottom: 10px;
  padding: 15px 5% 0px;
  background-color: #fff;
  text-align: center;
}
.chargingset-btn .tbprice {
  padding: 10px 10% 60px;
  font-size: 14px;
}
.chargingset-btn .tbprice a {
  display: block;
  color: #222222;
  line-height: 28px;
  text-align: center;
}
.chargingset-btn .tbprice b {
  font-size: 16px;
}
.chargingset-btn .tbprice strong {
  margin-left: 20px;
  font-size: 18px;
}
.chargingset-btn .tbprice p {
  padding-top: 5px;
}
.chargingset-btn .start-btn,
.chargingset-btn .start-btn em {
  width: 125px;
  height: 125px;
  display: inline-block;
  border-radius: 100%;
}
.chargingset-btn .start-btn {
  background: url("../images/btn-bg2.png") no-repeat center top;
  background-size: cover;
}
.chargingset-btn .start-btn em {
  background: url("../images/btn-bg1.png") no-repeat center top;
  background-size: cover;
  animation: rotate 8s linear infinite;
}
.chargingset-btn .start-btn:hover {
  opacity: 0.6;
}
.chargingset-btn .start-btn.noStart {
  opacity: 0.4;
}

#chargingset-mins {
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
  clear: both;
  overflow: hidden;
  margin-top: 30px;
}
#chargingset-mins li {
  width: 25%;
  display: flex;
  margin: 0 4px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #fff;
  background-color: #fff;
  float: left;
  box-shadow: 1px 2px 5px #e2eee9;
  border-radius: 6px;
  position: relative;
}
#chargingset-mins .active {
  border: 1px solid #3296fa;
  background-color: #f8fffc;
}
#chargingset-mins li:nth-child(4n) {
  margin-right: 0;
}
#chargingset-mins #mins {
  display: flex;
  justify-content: space-around;
  display: none;
}
#chargingset-moneys {
  margin: 0 auto;
  width: 100%;
  max-width: 360px;
  clear: both;
  overflow: hidden;
  margin-top: 30px;
}
#chargingset-moneys li {
  width: 25%;
  display: flex;
  margin: 0 4px;
  height: 40px;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 1px solid #fff;
  background-color: #fff;
  float: left;
  box-shadow: 1px 2px 5px #e2eee9;
  border-radius: 6px;
  position: relative;
}
#chargingset-moneys .active {
  border: 1px solid #3296fa;
  background-color: #f8fffc;
}
#chargingset-moneys li:nth-child(4n) {
  margin-right: 0;
}
#chargingset-moneys #moneys {
  display: flex;
  justify-content: space-around;
  display: none;
}

.cline {
  margin: 0 -20px;
  margin-right: 12px;
  width: 80px;
  height: 3px;
  display: inline-block;
  background: url("../images/line_2.png") no-repeat center top;
  background-size: contain;
  vertical-align: middle;
}
.cline.c2 {
  margin: 0 0 0 8px;
  transform: rotate(180deg);
}

.chargingset-two {
  padding: 0 5%;
  line-height: 24px;
  color: #999999;
}
.chargingset-two .t {
  padding: 5px 0 10px;
  text-align: center;
  color: #f90;
  font-size: 18px;
}
.chargingset-two .cbox {
  margin-bottom: 50px;
  border: 1px solid #44cf9c;
  border-radius: 10px;
  padding: 5px 20px 0;
  position: relative;
}
.chargingset-two dl {
  margin-bottom: 10px;
  padding: 10px 0 0;
}
.chargingset-two dt {
  color: #44cf9c;
  font-size: 18px;
  text-align: center;
}
.chargingset-two dd {
  padding: 10px 0 15px;
}
.chargingset-two .cn {
  padding: 0 0 20px;
}
.chargingset-two .cn .ct {
  color: #222;
}

/* 充电完成 */
.charge-complete-one {
  padding: 25px 7%;
  background: #01be6e url("../images/bg_5.jpg") no-repeat center bottom;
  background-size: cover;
}
.charge-complete-one .ccb {
  height: auto;
  background-color: #fff;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}
.charge-complete-one .ccb h2 {
  padding: 12px 0 10px;
  text-align: center;
  font-size: 18px;
  color: #3296fa;
}
.charge-complete-one .ccb h2 em {
  margin: 0 10px 3px 0;
  width: 36px;
  height: 36px;
  background: url("../images/ico-success.png") no-repeat center;
  background-size: contain;
  display: inline-block;
  vertical-align: middle;
}
.charge-complete-one ul {
  text-align: center;
  border-top: 1px solid #e4e4e4;
  clear: both;
  overflow: hidden;
  position: relative;
}
.charge-complete-one ul:before {
  content: " ";
  width: 1px;
  height: 14px;
  background-color: #e4e4e4;
  display: inline-block;
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}
.charge-complete-one ul li {
  width: 50%;
  height: 36px;
  line-height: 36px;
  font-size: 13px;
  color: #666666;
  float: left;
}
.charge-complete-one ul li span {
  display: inline-block;
}
.charge-complete-one ul li p {
  display: inline-block;
}
.charge-complete-one ul li p b {
  margin-left: 3px;
  font-size: 15px;
  color: #3296fa;
  display: inline-block;
}

.charge-complete-list {
  margin-top: 5px;
}
.charge-complete-list ul {
  margin-bottom: 5px;
  padding: 10px 5%;
  background-color: #ffffff;
}
.charge-complete-list ul li {
  padding: 2px 0;
  overflow: hidden;
  clear: both;
  font-size: 13px;
  line-height: 20px;
}
.charge-complete-list ul li .t {
  width: 66px;
  float: left;
  font-weight: normal;
  color: #666;
  display: inline-block;
  word-break: keep-all;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.charge-complete-list ul li p {
  margin-left: 70px;
}

.content-box {
  padding: 0 5%;
  line-height: 24px;
}
.content-box h1 {
  padding: 10px 0 10px;
  font-size: 18px;
  line-height: 28px;
  text-align: center;
}
.content-box .cnbox {
  text-align: justify;
}
.content-box .cnbox p {
  padding-bottom: 10px;
}
/* 判断iPhone 6sPlus  iPhone 7Plus */
@media screen and (min-width: 414px) {
  .index-bg {
    background-size: 50%;
  }
}

.scan-three {
  margin-top: 20px;
  padding: 0 4%;
}
.scan-three h4 {
  line-height: 30px;
  color: #999;
  font-weight: normal;
}
.scan-three-list {
  clear: both;
  overflow: hidden;
}
.scan-three-list li {
  margin: 0 6% 10px 0;
  width: 46%;
  height: 60px;
  color: #414141;
  text-align: center;
  background-color: #fff;
  border: 1px solid #cacaca;
  border-radius: 6px;
  display: inline-block;
  overflow: hidden;
  float: left;
  cursor: pointer;
}
.scan-three-list li:nth-child(2n) {
  margin-right: 0;
}
.scan-three-list li p {
  padding: 6px 0 2px;
}
.scan-three-list li p b {
  font-size: 20px;
  margin-right: 2px;
}
.scan-three-list li span {
  display: block;
  color: #999;
  font-size: 13px;
}
.scan-three-list li span i {
  font-style: normal;
}
.scan-three-list li.active {
  border-color: #3296fa;
  background-color: #f4f7fb;
  color: #3296fa;
}

.weixin-pay-image {
  width: 130px;
  padding-top: 5px;
}
.alipay-image {
  width: 154px;
  padding-top: 2px;
}

.empty-list-data {
  text-align: center;
  margin-top: 35px;
  margin-bottom: 35px;
}
.card-world-box {
  padding: 10px;
}
.from-card {
  border: none;
  width: 100%;
  height: 40px;
  text-indent: 12px;
  border-radius: 5px;
}
#icCardNo {
  margin-right: 0px;
}

.primary {
  color: #3296fa;
}
.fr {
  display: flex;
  align-items: center;
}
.blank {
  flex: 1;
}
.ml {
  margin-left: 10px;
}
.mr {
  margin-right: 10px;
}

.center {
  text-align: center;
}
.common-bg {
  background-image: url("../images/new/bg.png");
  background-position: top;
  background-size: 100%;
  background-repeat: no-repeat;
}
.bt-primary {
  height: 44px;
  background: #3296fa;
  border-radius: 4px;
  cursor: pointer;
  /* line-height: 44px; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 15px;
  text-align: center;
}
/* login */
.login-wrapper {
  min-height: 100vh;
  background-image: url("../images/new/login/bg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: linear-gradient(
    204deg,
    #d1e8ff 3%,
    #ffffff 12%,
    #ffffff 85%
  );
}
.img {
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.i-phone {
  background-image: url("../images/new/login/account.png");
}
.i-password {
  background-image: url("../images/new/login/password.png");
}

/* index */
.index-bg {
  background-image: url("../images/new/bg.png");
  background-position: top;
  background-size: 100%;
  background-repeat: no-repeat;
}
.charge-img {
  position: fixed;
  margin: 15vh 10vw;
  /* width: 80%; */
  left: 25%;
  display: inline-block;
}
.i-loc {
  display: inline-block;
  width: 12px;
  height: 18px;
  background-image: url("../images/new/loc.png");
}
.i-loc2 {
  display: inline-block;
  width: 12px;
  height: 18px;
  background-image: url("../images/new/loc2.png");
}
.i-my {
  display: inline-block;
  width: 16px;
  height: 17px;
  background-image: url("../images/new/my.png");
}
.i-my2 {
  display: inline-block;
  width: 16px;
  height: 17px;
  background-image: url("../images/new/my2.png");
}
.i-scan {
  display: inline-block;
  width: 65px;
  height: 65px;
  background-image: url("../images/new/scan.png");
}
.i-scan2 {
  display: inline-block;
  width: 65px;
  height: 65px;
  background-image: url("../images/new/scan2.png");
}
.foot-new.foot-nav {
  padding: 10px 0 20px;
  background: #fafafa;
}
.foot-new.foot-nav a.active {
  color: #3296fa;
}
.foot-new.foot-nav .f-scan i {
  width: unset;
  height: unset;
  background: none;
  box-shadow: none;
  margin-left: 0;
  transform: translateX(-50%);
}
.foot-new.foot-nav .f-scan span {
  color: #1e252f;
  padding-top: 32px;
}
.foot-new.foot-nav a:first-child {
  padding-left: 15vw;
  box-sizing: border-box;
}
.foot-new.foot-nav a:last-child {
  padding-right: 15vw;
  box-sizing: border-box;
}
/* my */
.my-wrap {
  /* height: 170px; */
  opacity: 1;
  background: #ffffff;
  border-radius: 8px;
  margin: 0 15px 0;
  padding: 24px 14px;
  box-sizing: border-box;
}
.my-wrap > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.my-wrap .wximg img {
  width: 48px;
  height: 48px;
  border-radius: 100%;
}
.my-wrap dl {
  flex: 1;
  margin-left: 6px;
}
.my-wrap dl dt {
  color: #333333;
  font-size: 15px;
}
.my-wrap dl dd {
  color: #999999;
  font-size: 12px;
}
.my-wrap .chargeBtn {
  color: white;
  height: 29px;
  /* width: 100px; */
  padding: 0 12;
  font-size: 14px;
  background: #3296fa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.my-wrap .info > div {
  position: relative;
  width: 40%;
  text-align: center;
}
.my-wrap .info b {
  display: block;
  font-size: 15px;
  line-height: 24px;
  margin-top: 10px;
}
.my-wrap .info span {
  font-size: 12px;
  line-height: 24px;
  color: #999999;
  display: inline-block;
  margin-top: 2px;
}
.my-wrap .info .clickRight {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 30%;
  right: 10%;
  background: url("../images/ico-arrow-gray.png") no-repeat;
}
.my-btns {
  margin: 10px 15px;
}
.my-btns ul {
  display: flex;
}
.my-btns ul li {
  flex: 1;
  background-color: white;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(201, 201, 201, 0.5);
  padding: 10px 23px 10px 17px;
}
.my-btns ul li a {
  display: flex;
  align-items: center;
}
.my-btns ul li a > div {
  flex: 1;
  color: #333;
}
.my-btns ul li a > div > p {
  font-size: 12px;
  margin-top: 6px;
}
.i-topup {
  width: 35px;
  height: 35px;
  background-image: url("../images/new/my/topup.png");
}
.i-charging {
  width: 35px;
  height: 35px;
  background-image: url("../images/new/my/charging.png");
}
.my-subs {
  margin: 0 15px;
  border-radius: 8px;
  background-color: white;
  padding: 8px 0;
}
.my-subs ul {
  display: flex;
  flex-wrap: wrap;
}
.my-subs ul li {
  width: 25%;
  padding: 12px 0;
}
.my-subs li > a {
  text-align: center;
  display: block;
}
.my-subs li b {
  text-align: center;
  display: block;
  font-size: 13px;
  margin-top: 8px;
  color: #333;
}
.i-my1 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/my1.png");
}
.i-my8 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/my31.png");
}
.i-my9 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/恢复.png");
}
.i-my10 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/CP合作_o.png");
}
.i-my12 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/top_up.png");
}
.i-my13 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/problem.png");
}
.i-mmy2 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/my2.png");
  background-size: contain;
}
.i-my3 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/my3.png");
}
.i-my4 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/my4.png");
}
.i-my5 {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/my5.png");
}
.i-my-refund {
  width: 16px;
  height: 16px;
  display: inline-block;
  background-image: url("../images/new/my/refund.png");
}

/* ongoing */
.ongoing-title {
  color: #333;
  font-size: 18px;
  text-align: center;
  line-height: 44px;
  background-color: white;
}
.ongoing-box {
  background-color: white;
  top: 54px;
  bottom: 0;
}
.ongoing-box .charge {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 56px;
  position: relative;
  margin-top: 52px;
}
.ongoing-box .charge .row1 {
  background-color: rgb(203, 167, 88);
  width: 9px;
  height: 4px;
}
.ongoing-box .charge .row2 {
  background-color: rgb(206, 97, 75);
  width: 29px;
  flex: 1;
  border-radius: 2px 2px 0 0;
}
.ongoing-box .charge .img {
  width: 29px;
  position: absolute;
  bottom: 0;
  top: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}
.ongoing-box .charge .row3 {
  background-color: rgb(71, 75, 95);
  width: 29px;
  position: absolute;
  bottom: 0;
  border-radius: 0 0 2px 2px;
  animation: row3bg 5s infinite linear;
}
@keyframes row3bg {
  0% {
    top: 4px;
  }
  25% {
    top: 30px;
  }
  50% {
    top: 56px;
  }
  75% {
    top: 30px;
  }
  100% {
    top: 4px;
  }
}
.ongoing-box-new .onon {
  color: #333;
  font-size: 14px;
}
.ongoing-box-new .onon time {
  color: #3296fa;
  font-size: 35px;
  margin: 38px 0 9px;
  display: block;
}
.ongoing-box-new .stop {
  width: inherit;
  display: block;
  height: 44px;
  /* line-height: 44px; */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 30px 15px 25px;
}
.ongoing-foot .back {
  width: inherit;
  display: block;
  height: 44px;
  /* line-height: 44px; */
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin: 30px 15px 25px; */
  margin: 30px 0 25px;
  /* border: 1px solid #3296fa; */
  border-radius: 2px;
  background-color: #ffff;
  color: #3296fa;
  box-shadow: 0 1px #cacaca;
}
/* 充值设置 */
.tbprice .chargeBtn {
  /* width: 80px; */
  padding: 0 12px;
  /* height: 29px; */
  background: #3296fa;
  border-radius: 4px;
  color: white;
  font-weight: normal;
  font-size: 14px;
}
.chargingset-btn .tbprice {
  padding-bottom: 0;
}
.chargingset-btn .startBtn {
  position: relative;
  width: 130px;
  height: 130px;
  display: inline-block;
  background-image: url("../images/new/set/start.png");
  margin-bottom: 28px;
}
.chargingset-btn .startBtn::after {
  position: absolute;
  content: "";
  width: 121px;
  height: 121px;
  top: 4px;
  left: 4px;
  border-radius: 50%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}
.chargingset-btn .startBtn.business-hours-disabled::after {
  display: block;
}
.tpl-wrap {
  margin: 12px 15px;
  background: #f3faff;
  border-radius: 4px;
  padding: 13px;
  text-align: left;
}
.i-tpl {
  width: 15px;
  height: 15px;
  display: inline-block;
  background-image: url("../images/new/set/tpl.png");
  margin-right: 7px;
}

/* near */
.new-item .nleft {
  margin: 0 !important;
}
.near-list .item .ntop .nleft h3 {
  font-size: 15px;
}
.new-item .going {
  /* width: 72px; */
  /* height: 32px; */
  /* line-height: 32px; */
  border: 1px solid #3296fa;
  border-radius: 4px;
  text-align: center;
  font-size: 20px;
  color: #3296fa;
  transform: scale(0.5);
  transform-origin: center;
  display: inline-block;
  position: relative;
  left: -10px;
  top: 2px;
  font-weight: normal;
}
.near-list .item .ntop .nleft h3 {
  padding-bottom: 0;
}
.near-list .item .ntop {
  padding-left: 16px;
}
.new-item .n-address {
  color: #999999;
  text-align: center;
}
.near-list .item .nbtn {
  border: none;
  padding: 0;
}
.new-item .num {
  color: white;
  font-size: 12px;
  height: 20px;
  background: #3296fa;
  border-radius: 2px;
  padding: 0 2px;
  margin-left: 8px;
}
.new-item .num > span {
  background: white;
  height: 16px;
  /* line-height: 16px; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: #3296fa;
  border-radius: 2px;
  padding: 0 2px;
  margin-left: 2px;
}
.new-item .num2 {
  background: #39b346;
}
.new-item .num2 > span {
  color: #39b346;
}
.new-item .num3 {
  background: #f27b1c;
}
.new-item .num3 > span {
  color: #f27b1c;
}
.background-img {
  position: absolute;
  bottom: 320px;
  /* display: flex;
    justify-content: center; */
  /* align-items: center; */
  /* height: 100vh; */
}
.background-img img {
  max-width: 100%;
  /* height: auto; */
}
/* incompatible */
.warn_body {
  height: 100vh;
  display: flex;
  justify-content: center;
  background-color: #fff;
}
.warn_body .warn_box {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 40px;
  font-size: 20px;
  font-weight: bold;
}
.warn_body .warn_img {
  width: 104px;
  height: 104px;
}
.warn_body .warn_text {
  margin-top: 30px;
}
.phone_pop {
  display: none;
  box-sizing: border-box;
  position: absolute;
  top: 0;
  padding: 0 5%;
  padding-top: 40%;
  height: 100vh;
  width: 100vw;
  z-index: 19;
  background: rgba(0, 0, 0, 0.65);
}

.phone_pop .cha {
  width: 33px;
  height: 33px;
  position: relative;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  margin-left: 100%;
  transform: translateX(-100%);
  margin-bottom: 8px;
}
.phone_pop .cha::before,
.phone_pop .cha::after {
  content: "";
  position: absolute;
  height: 13px;
  width: 1.5px;
  top: 10px;
  left: 16px;
  background: #fff;
}
.phone_pop .cha::before {
  transform: rotate(45deg);
}
.phone_pop .cha::after {
  transform: rotate(-45deg);
}

.phone_pop .bind_pop {
  padding-top: 20px;
  border-radius: 10px;
  background-color: #fff;
}
.phone_pop .img_pop {
  padding: 20px;
  border-radius: 10px;
  background-color: #fff;
}
.phone_pop .imgprompt {
  font-size: 14px;
  font-weight: bold;
  /* color: #FFF; */
  text-align: center;
  /* background-color: #3296fa; */
  border-radius: 6px;
  /* padding: 10px 16px; */
}
.bind_btn {
  width: 100%;
  border: none;
  height: 44px;
  /* background: #3296fa; */
  border-radius: 4px;
  cursor: pointer;
  /* line-height: 44px; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 15px;
  text-align: center;
}
.passcode {
  background: #3296fa;
}
.clickWeChat {
  position: relative;
}
.red-point {
  position: absolute;
  top: 6px;
  right: 40px;
  width: 8px;
  height: 8px;
  background-color: red;
  border-radius: 50%;
}
.ico-type6 {
  background-image: url("../images/ico_3.png");
  width: 39px;
  height: 40px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right top;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
  display: inline-block;
}
.recharge-btn {
  width: 50%;
  margin-left: 50%;
  margin-top: 10px;
  transform: translateX(-50%);
  padding: 5px 20px;
  border-radius: 4px;
  height: 28px;
  background: #3296fa;
  cursor: pointer;
  /* line-height: 44px; */
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 15px;
}