* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Helvetica, "PingFang SC", "Microsoft Yahei", sans-serif;
}

.index-module__recharge_web {
    height: 100vh;
    overflow: auto;
    background-image: url('../images/bg.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    font-family: PingFang SC, Helvetica Neue, Hiragino Sans GB, Helvetica, Microsoft YaHei, Arial, sans-serif
}

img {
    width: 100%;
}

:root {
    --primary-color: #ff434f;
    --secondary-color: #e3e3e3;
    --text-color-lightest: #e7e9ec;
    --text-color-darker: #2e2e2e;
    --text-color-dark: #494949;
    --text-color-gray: #8b8b8b;
    --text-color-dark-gray: #727272;
    --text-color-light-gray: #c6c6c6;
    --backdrop-color: rgba(42, 42, 42, 0.69);
}
body{
    background: url('../images/bg.png') no-repeat;
    /*height:100vh;*/
}
.container-wrap{
    background:#fff;
    border-radius: 15px;
    padding:20px;
    padding-top:30px;
    box-shadow: 1px 1px 17px #d5d0d0;
}
.title{
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    font-size: 21px;
    color: #000;
    margin-bottom:20px;
    font-weight: 800;
    padding-top:30px ;
}
.title .title-img{
    width:35px;
    height:35px;
    margin-right:12px;
}
.check-account{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}
.look-douyin{
  color: #2f8cff;
    font-size:14px;
    cursor:pointer;
    text-decoration: underline;
    margin-top:5px;
}

.check-account .search-area {
    box-sizing: border-box;
    padding-left: 10px;
    height: 50px;
    padding-right:20px;
    color: #000000;
    position: relative;
    background: #EFF3F6;
    border-radius: 6px;
    display: inline-block;
    width: 100%;
}

.check-account .search-area input {
    background-color: #EFF3F6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 12px;
    height: 50px;
    min-height: 0;
    font-size: 18px;
    position: absolute;
    border: none;
}

.check-account .icon_search {
    position: absolute;
    left: 5px;
    top: 5px;
    width:34px;
    height:34px;
}
.check-account .check-account-btn {
    font-size: 15px;
    padding: 0 10px;
    border-radius:0 6px 6px 0;
    border: none;
    cursor: pointer;
    background: #5a92f4;
    color: #fff;
    height: 50px;
    position:absolute;
    right:20px;
}
.user-account .check-account-btn{
    font-size: 16rem;
    border-radius:6px;
    cursor: pointer;
    background: transparent;
    color: #fe2c55;
    height: 0.8rem;
    line-height:0.8rem;
    line-height:50px;
}

.check-account .check-account-btn:hover{
    background: #338bff;
}
.check-account-btn img {
    width: 20px;
    margin-right: 10px;
}
.user-account{
    /*background: #EFF3F6;*/
}
.user-account .icon_user{
    width:40px;
    height:40px;
    border-radius:50%;
    background-color:#333;
    margin-right:20px;
}
.user-account .user-info{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 260px;
}
.user-account  .user-area{
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.user-account  .user-area .user-name{
  font-size:18px;
    font-weight: 800;
}
.user-account  .user-area .douyin-number-show{
    font-size:14px;
}
.user-account .check-account-btn{
    font-size: 16px;
    height:50px;
    border-radius:12px;
    border:none;
    padding:0 16px;
    margin-left:10px;
    cursor: pointer;
    background:#EFF3F6;
}
.user-account  .check-account-btn:hover{
    background: #e7eaed;
}
.account{
    background-color:#fff1f4a6;
    padding:20px;
    border-radius:10px 10px 0 0;
    width:550px;
}
.change-icon{
width:35px;
}
.choose-title {
font-weight: 800;
font-size: 18px;
line-height: 18px;
margin-top:40px;
margin-bottom:30px;
}
.tips-title{
margin-top: 8px;
font-size: 14px;
line-height: 20px;
color: #9ca2a9;
font-weight:400;
}
.recharge-box {
background-color: #fff;
margin: 0 auto;
width: 1000px;
padding: 0 48px 40px;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
border-radius: 12px
}
.boxs{
margin-top: 20px;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-moz-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start
}
.box-wrap {
cursor: pointer;
width: 211px;
height: 80px;
margin-right: 20px;
margin-bottom: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
background: #f8f8f8;
position: relative;
border-radius: 4px 24px 4px 4px;
border: 2px solid #fff;
}

.box-wrap:nth-child(4n+4) {
margin-right: 0
}

.box-wrap .top {
color: #222;
font-size: 18px;
line-height: 18px;
font-family: PingFangSC-Medium
}

.box-wrap .bottom {
margin-top: 10px;
font-size: 16px;
line-height: 16px;
color: #505050
}
.sub-tag {
width: max-content;
font-size: 14px;
padding: 3px 7px;
border-radius: 18px 4px 18px 4px;
position: absolute;
left: 0;
top: -14px;
background: linear-gradient(90deg, #000000 0%, #D72D6C 70%, #9B003A 100%);
color: #fff;
}

.recharge-container .boxs .box-wrap.active {
border: 2px solid #fd407d;
}

.recharge-container .boxs .box-wrap.active::after {
background-image: url('../images/checked.png');
background-size: cover;
content: '';
position: absolute;
bottom: 0;
right: -1px;
width: 40px;
height: 20px;
display: inline-block;
}
.recharge-container .boxs .box-wrap .top .mount-span img {
width: 25px;
vertical-align: bottom;
}
.protocol-container{
margin-top: 20px;
font-size: 13px;
line-height: 14px;
color: #505050;
}

.modal-douyin{
width:248px;
}
.charge-btn button{
margin-top: 20px;
background-color: #fe2c55;
width: 442px;
height: 60px;
color: #fff;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: PingFangSC-Medium;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
cursor: pointer;
border-radius: 4px;
font-size: 16px;
border:none;
}
.charge-btn button.disable {
background-color: #e8e8e8;
color: #999;
cursor: auto;
}
.charge-btn button .price{
margin-right:10px;
font-size: 30px;
}

.notice{
    margin:20px 0;
    border-radius:10px;

}
.notice .notice-tips{
    padding:10px;
}
.notice p{
    font-size:16px;
    padding-left:2em;
}
.notice .red{
    color:red;
    font-size:15px;
}
.question-list{
    font-size:15px;
}
.question-list h4{
    font-size:18px;
    margin-top:15px;
    font-weight:800;
}

.recharge-container .boxs .box-wrap .bottom {
    font-size: 15px;
    color: #FF3774;
    text-align: center;
    font-weight: bold;
}

#qrModal .modal-content{
    background-image:url('../images/top-round.png');
    background-size:100% 100%;
    background-color: transparent;
    border:none;
}
#qrModal .qr{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 100px 0px;
}
#qrModal .modal-qr{
    width:200px;
    height:200px;
    border: 4px solid #000000;
}

#qrModal .tips-text{
    font-weight:800;
    font-size:20px;
    margin-top:20px;
    background-image:linear-gradient(135deg,#ff2400,#ff7f11);
    color:#fff;
    border-radius:50px;
    padding:10px;
    border:5px solid #ffe2d5;
}
.wx-attach{
    width:180px;
    height:180px;
    position:fixed;
    right:0;
    bottom:100px;
    z-index:9999;
}
.header .fr img{
    width:40px;
    height:40px;
}
.scroll-box {
    width: 100%;
    height: 50px;
    border: 1px solid #efefef;
    /*margin: 20px auto;*/
    overflow: hidden;
    background-color: #f9e8ec;
}

.scroll-box ul {
    list-style: none;
    width: 100%;
    height: 100%;
}

.scroll-box ul li {
    width: 100%;
    height: 20px;
    box-sizing: border-box;
    line-height: 20px;
    text-align: left;
    font-size:14px;
}
.tab-nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size:18px;
    width:78%;
    padding:5px 20px;
    margin: 0 auto;

}
.tab-nav a{  color:#aaa;}
.tab-nav .active{
    border-bottom:2px solid red;
    color: #333333 !important;
    font-size:25px;
}