/* reset begin */
html,body,h1,h2,h3,h4,h5,h6,div,dl,dt,dd,ul,ol,li,p,blockquote,pre,hr,figure,table,caption,th,td,form,fieldset,legend,input,button,textarea,menu{margin:0;padding:0;}
header,footer,section,article,aside,nav,hgroup,address,figure,figcaption,menu,details{display:block;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;font-weight:normal;}
html,body,fieldset,img,iframe,abbr{border:0;}
i,cite,em,var,address,dfn{font-style:normal;}
[hidefocus],summary{outline:0;}
li{list-style:none;}
h1,h2,h3,h4,h5,h6,small{font-size:100%;}
sup,sub{font-size:83%;}
pre,code,kbd,samp{font-family:inherit;}
q:before,q:after{content:none;}
textarea{overflow:auto;resize:none;}
label,summary{cursor:default;}
a,button{cursor:pointer;}
h1,h2,h3,h4,h5,h6,em,strong,b{font-weight:bold;}
ins,u,s,a,a:hover{text-decoration:none;}
body,textarea,input,button,select,keygen,legend{font:12px/1.14 arial,\5b8b\4f53;color:#333;outline:0;}
body{background:#fff;}
a{color:#333;}
/* reset end */

.syb-header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	font-size: 18px;
	background-color: #fff;
}
.syb-header.transparent{
	background-color: transparent;
}
.syb-header .back{
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	width: 44px;
	height: 44px;
	background-image: url(../images/back.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 8px 14px;
}
.syb-header .right{
	position: absolute;
	top: 50%;
	right: 20px;
	font-size: 14px;
	transform: translateY(-50%);
}
.main{
	position: relative;
}
.mt44{
	margin-top: 44px;
}
.linear{
	height: 70vh;
	background: linear-gradient(180deg, #FFCB00 0%, rgba(255, 203, 0, 0) 100%);
	overflow: hidden;
}
.circle{
	margin: 124px auto 0;
	display: flex;
	align-items: center;
	flex-direction: column;
	justify-content: center;
	width: 126px;
	height: 126px;
	background: #FFFBF4;
	border-radius: 50%;
	box-shadow: inset 0px 17px 29px rgba(255, 201, 0, 0.23), inset -3px -4px 25px #FFE57D, inset 0px 30px 14px #FFFFFF;
}
.c-title{
	font-size: 14px;
}
.c-value{
	font-size: 35px;
	line-height: 47px;
}
.go-pay{
	margin: 0 auto 30px;
	display: block;
	width: 85%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	background: #FFD01A;
	border-radius: 5px;
}
.expense-detail{
	padding: 0 20px;
}
.expense-detail li{
	position: relative;
	padding: 20px 0 10px;
}
.expense-detail li > div{
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.expense-top .left{
	font-size: 16px;
}
.expense-top .right{
	font-size: 14px;
	color: #FF7039;
}
.expense-bottom{
	margin-top: 10px;
}
.expense-bottom .left{
	font-size: 12px;
	color: #999;
}
.expense-bottom .right{
	font-size: 12px;
}
.expense-detail li:after{
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	border-bottom: 1px solid #eee;
	transform: scaleY(0.5);
}
.plr24{
	padding: 0 24px;
}
.plr4 {
	padding: 0 4px;
}
.r-title{
	padding-top: 20px;
	margin-bottom: 20px;
	font-size: 16px;
}
.recharge-list{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: space-between;
}
.recharge-list li{
	margin-bottom: 10px;
	width: 30%;
	height: 62px;
	line-height: 62px;
	text-align: center;
	font-size: 14px;
	color: rgba(51, 51, 51, 0.5);
	background: rgba(180, 180, 180, 0.2);
	border-radius: 4px;
	box-sizing: border-box;
}
.recharge-list li.on{
	background: rgba(255, 107, 0, 0.1);
	border: 1px solid #FF6B00;
}
.card-list li{
	margin-bottom: 15px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-right: 36px;
	height: 81px;
	background-image: url(../images/bg_card.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.card-list li > div{
	display: flex;
	align-items: center;
}
.card-list li .left{
	flex-shrink: 0;
	width: 30%;
	text-align: center;
}
.card-list li .right{
	padding-left: 15px;
	flex: 1;
}
.card-top .left{
	font-size: 16px;
	color: #FF6600;
	font-weight: bold;
}
.card-top .left span{
	font-size: 30px;
}
.card-top .right{
	margin-top: 8px;
	font-size: 16px;
}
.card-bottom .left{
	font-size: 12px;
	color: #666;
}
.card-bottom .right{
	font-size: 10px;
	color: #666;
}
.card-list .select{
	position: absolute;
	top: 50%;
	right: 20px;
	width: 16px;
	height: 16px;
	border: 1px solid #ccc;
	border-radius: 50%;
	transform: translateY(-50%);
}
.card-list .select.on{
	background-image: url(../images/select_on.png);
	background-size: contain;
	border: none;
}
.loadmore{
	display: flex;
	justify-content: center;
}
.loadmore a{
	width: 22px;
	height: 12px;
	background-image: url(../images/more.png);
	background-size: 11px 6px;
	background-position: center;
	background-repeat: no-repeat;
}
.order-info{
	margin-top: 30px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 14px;
}
.order-info p{
	margin-right: 5px;
	font-size: 18px;
	font-weight: bold;
}
.order-info p span{
	font-size: 24px;
}
.order-info del,
.order-info .zk{
	font-size: 14px;
}
.order-info del{
	color: #999;
}
.order-info .zk{
	color: #FF6B00;
}
.pay-type{
	margin-top: 30px;
	margin-bottom: 30px;
}
.pay-type p{
	font-size: 14px;
	color: #999;
}
.pay-type-item{
	position: relative;
	margin-top: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	text-align: center;
	font-size: 18px;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
}
.pay-type-item span{
	position: relative;
	display: block;
	width: 80px;
}
.pay-type-wepay{
	background-color: #24AF41;
}
.pay-type-alipay{
	background-color: #1296DB;
}
.pay-type-syb{
	background-color: #FF6B00;
}
.pay-type-item span:before{
	content: "";
	position: absolute;
	top: 0;
	left: -30px;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-size: contain;
}
.pay-type-syb span{
	/* margin-left: 20px; */
	width: 100px;
}
.pay-type-wepay span:before{
	background-image: url(../images/icon_wepay.png);
}
.pay-type-alipay span:before{
	background-image: url(../images/icon_alipay.png);
}
.pay-type-syb span:before{
	background-image: url(../images/icon_syb.png);
}