.btns{
    display:flex;
    justify-content: center;
}

.btns button{width: 30%;margin: .1rem .2rem;border-radius: 4px;}
.btns button.del{background: var(--backgroud-dark-gray);}
.btns button.common-from-btn{width: 60%;}

.common-code-btn {
    float: right;
    margin-left: .3rem;
    padding: 0;
    width: 2.4rem;
    height: .8rem;
    font-size: .28rem;
    color: #FE4200;
    text-align: center;
    line-height: .6rem;
    background-color: #fff;
    border: 1px solid #FE4200;
    border-radius: 4px;
}

select {
    padding-left: .2rem;
    margin-right: .3rem;
    width: 1.8rem;
    height: .8rem;
    font-size: .28rem;
    line-height: .8rem;
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 4px;
}

.has-tel {
    margin-bottom: .32rem;
    height: .8rem;
    font-size: .28rem;
    line-height: .8rem;
}

.has-tel i {
    font-style: normal;
    color: #848484;
}

.input-name {
    display: block;
    margin-right: .12rem;
    width: 1.2rem;
    font-size: .28rem;
    color: #848484;
    line-height: .8rem;
}

.topup-head-box {
    position: relative;
    margin: .32rem;
    padding: .4rem .32rem;
    background: linear-gradient(#FFC274, #FEAE47);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .15);
}
.topup-head-box::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3.3rem;
    height: 2.16rem;
    max-height: 100%;
    background: url(../fonts/rechargebg.svg) no-repeat top right;
    background-size: contain;
}
.topup-head-info {
    color: #fff;
    font-size: .28rem;
}
.topup-head-info b {
    display: block;
    margin-top: .12rem;
    font-size: .4rem;
}
.topup-head-btns {
    position: relative;
    z-index: 10;
    margin-top: .32rem;
}
.topup-head-btns a {
    position: relative;
    padding: 0 .4rem;
    font-size: .24rem;
    color: #fff;
}
.topup-head-btns a:first-child {
    padding-left: 0;
}
.topup-head-btns a::after {
    content: '';
    position: absolute;
    right: -1px;
    top: .04rem;
    bottom: 0;
    margin: auto;
    width: 1px;
    height: .24rem;
    background-color: #fff;
}
.topup-head-btns a:last-child::after {
    display: none;
}
/* .common-bg .payInfo-carName {
    margin-top: -.06rem;
    padding: 0 0 0.2rem 0;
    border-bottom: none;
} */
.payInfo-carName.topup-title-box {
    margin: -0.32rem -0.32rem 0;
    border-bottom: none;
}
.topup-items-box .topup-items {
    display: flex;
    flex-wrap: wrap;
}





.topup-items-box .topup-items li {
    margin-bottom: .32rem;
    width: 23.9%;
   
 
 
    text-align: center;
    border: 1px solid #eee;
    border-radius: 4px;
}


.topup-items-box .topup-items li:not(:nth-child(3n)) {
    margin-right: 5%;
}





.topup-items-box .topup-items li.active {
    border-color: #FE9000;
    background-color: #FFF6EB;
}
.topup-items-box div input {
    width: 80%;
}
.topup-areas {
    display: flex;
    margin: -0.32rem -0.32rem 0;
    border-radius: 10px 10px 0 0;
    overflow: hidden;
}
.topup-areas li {
    width: 50%;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    font-size: .28rem;