@charset "UTF-8";
/* 充值页面专有CSS */

.topup-content{
  overflow: hidden;
}

.money-container{
  margin-bottom: 20px;
  overflow: hidden;
}

.money-list{
  /* width: 500px; */
  margin-bottom: 20px;
  overflow: hidden;
}
.money-item{
  float: left;
  margin: 0 20px 20px 0;
  width: 140px;
  height: 60px;
  line-height: 24px;
  border-radius: 8px;
  font-size: 24px;
  border: 2px solid #979797;
  text-align: center;
  cursor: pointer;
  color: #CCAF80;
}
.money-item.active{
  position: relative;
  border-color: #CCAF80;
  border-top-right-radius: 0px;
}
.money-item.active::after{
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background-image: url(../img/select.png);
  background-size: 28px 28px;
  background-repeat: no-repeat;
}
.money-item .k{
  padding-top: 10px;
}
.money-item .rmb{
  font-size: 14px;
}
.money-item:nth-child(4){
  margin-right: 0;
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .money-item{
    border-width: 1px;
  }
}

.money-item .input-wrapper{
  display: inline-block;
  width: 70px;
  line-height: 32px;
  margin-top: 14px;
  border-bottom: 1px solid #CCAF80;
}

.money-item .input{
  width: 100%;
  color: #CCAF80;
  font-size: 20px;
  border: 0 none;
}
.money-item:last-child{
  /* line-height: 1; */
  margin: 0;
}

.line{
  width: 600px;
  height: 1px;
  background-color: #D8D8D8;
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .line{
    height: 0.5px;
  }
}

.payway-container{
  margin-bottom: 20px;
}

.payway-item{
  display: inline-block;
  margin-right: 20px;
  width: 220px;
  height: 80px;
  line-height: 80px;
  border-radius: 8px;
  border: 1px solid #CCAF80;
  background-color: #FFFFFF;
  background-repeat: no-repeat;
  cursor: pointer;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .payway-item{
    border: .5px solid #CCAF80;
  }
}
.payway-item.alipay{
  background-position: 7px 7px;
  background-size: 186px 66px;
  background-image: url("../img/alipay.png");
}
.payway-item.wechatpay{
  background-position: 5px 11px;
  background-size: 210px 58px;
  background-image: url("../img/wechatpay.png");
}

.payway-item.active{
  position: relative;
  border-top-right-radius: 0;
  border: 2px solid #CCAF80;
  margin: -1px 19px -1px -1px;
}
.payway-item.active::after{
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  width: 28px;
  height: 28px;
  background-image: url(../img/select.png);
  background-size: 28px 28px;
  background-repeat: no-repeat;
}

.topup-content .title{
  margin-bottom: 20px;
}

.qrcode-container{
  margin-bottom: 20px;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0,0 ,.5);
}
.qrcode-container .title,.qrcode-container .span{
  text-align: center;
}
.close-qrcode{
  position: absolute;
    top: -20px;
    right: -20px;
    width: 20px;
    cursor: pointer;
    &:hover{
      opacity: .8;
    }
}
.qrcode-container .span{
  margin-top: 16px;
  font-size: 20px;
}
.qrcode-box{
  position: absolute;
  width: 300px;
  height: 330px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

.qrcode-container .qrcode-img{
  width: 160px;
  height: 160px;
  border: 1px solid #CCC;
}
#qrcode{
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){
  .qrcode-container .qrcode-img{
    border: .5px solid #CCC;
  }
}

.pay-btn{
  margin-bottom: 20px;
  width: 180px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  border-radius: 8px;
  font-size: 20px;
  font-weight: 500;
  color: #FFFFFF;
  background-color: #CCAF80;
  cursor: pointer;
}
.pay-btn.not-allowed{
  background-color: #CCCCCC;
  cursor: not-allowed;
}

.protocol-container{
  margin-bottom: 70px;
}

.protocol-content{
  vertical-align: middle;
  line-height: 28px;
  font-size: 20px;
  font-weight: 500;
  color: #222222;
}

.simulate-checkbox{
  display: inline-block;
  vertical-align: middle;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-image: url("../img/circle.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

#agree{
  display: none;
}
#agree:checked + .simulate-checkbox{
  background-image: url("../img/circle-agree.png");
}