body{background: #fbefdf}
.top{width: 100%;padding-bottom: 10px;}
.top img{width: 100%;height: 206px}
.top .user-info{position: absolute;top: 58px;left: 30px;width: 84%;justify-content: left;}
.user-info .user-avatar{width: 40px;height: 40px;}
.user-info .user-avatar img{width: 100%;height: 100%;border-radius: 50%;}
.user-nickname{color: white;font-size: 14px;width: calc(100% - 140px);text-indent: 10px;justify-content: left !important;}
.user-info .my-order{width: 100px;font-size: 13px;color: #924d24;background: linear-gradient(#f5e23d,#e29a2d);height: 25px;line-height: 25px;text-align: center;border-radius: 40px;font-weight: bold}
.main-content{width:85%;background: white;margin: 0 auto;padding: 15px;border-radius: 10px;margin-bottom: 20px;}
.main-head{}
.head-title{font-size: 18px;font-weight: bold;color: #a07a54;margin-bottom: 10px;}
.head-content{font-size: 13px;color: #777;}
.head-content span{color: red;}
.scroll{}
.scroll-item{text-align: center;float: left;height: 60px;line-height: 60px;width: 80px;font-weight: bold;}
.scroll-item:first-child{padding-left: 0}
.clearfix{clear: both}
.scroll-type{overflow-x: auto;width: 100%;margin: 0 auto}
.scroll-container{width: 1000px;}
.scroll-type::-webkit-scrollbar {width: 0 !important;height: 0 !important}
.scroll-item.active{font-size: 130%;color: orange}
.scroll-list{width: 100%;margin: 0 auto;}
.list-item{padding: 10px 0;align-items: center;position: relative}
.item-icon{width: 60px;height: 60px;border-radius: 5px;margin-right: 10px;}
.item-button{width: 80px;text-align: center;}
.item-button .button{background: #e7cd78;color: #957835;padding: 6px 0;border-radius: 10px;}
.item-button .disabled{background: #eeeeee;color: #957835;padding: 6px 0;border-radius: 10px;}
.item-icon img{width: 100%;height: 100%}
.item-info{width: calc(100% - 150px)}
.item-info .info-title{
    /*padding-bottom: 10px;*/
    color: #333;
}
.item-info .info-desc{color: #e7cd78;}
.list-item::after{content: '';position: absolute;bottom: 0;width: 100%;height: 1px;background: #e1e1e1;}
.list-item:last-child::after{width: 0;}
.main{padding-bottom: 20px;height: unset}
.scroll-list{overflow-y:auto;max-height: 310px;}
.scroll-list::-webkit-scrollbar{width: 0;}
.exit-icon{background: url('/static/welfare/images/exit.png') no-repeat left center;width: 20px;height: 20px;background-size: cover;margin-left: 10px;}

.popup{top: 0px;left: 0px;width: 100%;height: 100%;}
.popup .login-box{width: 90%;height: 280px;border-radius: 10px;margin: 0 auto}
.popup .login-box::after{content: "";position: absolute;right: 0;bottom: 0;background: url('/static/recharge/images/login-bg.png') no-repeat bottom center;background-size: 100%;width:126px;height: 144px;opacity: .3;z-index: 1}
.popup .login-box .login-title{font-size: 18px;color: #ea813d;font-weight: bold;text-align: center;padding: 15px 0;border-bottom: 1px solid white;}
.popup .login-box .login-input{margin-top: 20px;}
.popup .login-box .login-input input{width:70%;margin:0 auto;display:block;border-radius: 40px;background: none;border:1px solid black;padding: 10px;font-size: 14px;margin-top: 10px;}
.popup .login-box .login-input .code{position: relative;}
.popup .login-box .login-input .valid-code{position: absolute;right: 13%;top: 15px;background: #f7c543;color: #fefaef;font-size: 13px;border-radius: 40px;padding: 5px;z-index: 10}
.popup .login-box .login-button{width: 100%;text-align: center;margin-top: 10px}
.popup .login-box .login-button button{width: 150px;font-size: 15px;color: #814b0c;background: linear-gradient(#f5e93d,#e3982b);height: 40px;line-height: 40px;text-align: center;border-radius: 40px;font-weight: bold;border: 0;margin-top: 30px;position: relative;z-index: 10;}
.popup .login-box .close-btn{position: absolute;bottom: -60px;background: url('/static/recharge/images/close-btn.png') no-repeat left center;background-size:100%;width: 40px;height: 40px;border-radius: 50%;left: 50%;margin-left: -20px;}