@charset "utf-8";
/* CSS Document */

html{color:#333;background:#e8f0f6;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0; font-family:"微软雅黑",Arial, Helvetica, sans-serif;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img,li{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
legend{color:#333;}
a{ text-decoration:none; font-family:"微软雅黑"; color:#333;}

html,body{width: 100%; height: 100%;}

.clearfix:after{ content: ""; display: block; clear: both;}
.fl{ float: left;}
.fr{ float: right;}

#bg{ width: 640px; min-height: 100%; margin: 0 auto;}
#header{ width: 640px; height: 180px;}

input{ display: block; width: 560px; height: 68px; line-height: 68px;  border: 2px solid #eee; margin: 12px auto 24px; padding: 0 16px; font-size: 28px;}

.recharge_select, .pay_select, .user_select{ width: 640px; background-color: #fff; overflow: hidden; margin-top: 10px;}
.user_select{ margin-top: 0;}
.recharge_h, .pay_h{ font-size: 24px; color: #999; margin: 12px 24px 0;}
.link_history{ color: #1AA6FF;}
#recharge_list{ padding-bottom: 24px;}
#history_list{ padding-bottom: 60px;}
#recharge_list li{ margin-top: 16px; background-color: #fff; margin-left: 24px;}
#recharge_list a{ display: block; height: 66px; width: 280px; border: 2px solid #eee; font-size: 28px; line-height: 68px; text-align: center;}
#recharge_list a.active{ border: 2px solid #ffc528; background: url(https://cdn.hztangyou.com/pay2/icon_index.png) no-repeat 226px bottom;}
.cion span{ color: #1aa6ff;}
.jewel span{ color: #eb5044;}

#success, #fail{ width: 640px; min-height: 100%; margin: 0 auto; text-align: center; background-color: #fff;}

#pay_list{ text-align: center; margin-bottom: 24px;}
#pay_list li{ margin: 16px 54px 0; display: inline-block;}
.pay{ display: block; position: relative;}
.active .checkon{ position: absolute; width: 32px; height: 32px; background: url(https://cdn.hztangyou.com/pay2/icon_index.png) no-repeat -468px -155px; top: 0; right: 0;}
.pay i{ display: block; width: 96px; height: 96px; background: url(https://cdn.hztangyou.com/pay2/icon_index.png) no-repeat; border: 2px solid #eee; border-radius: 50%;}
.active i{ border: 2px solid #FFC528;}
.pay h2{ font-size: 24px; margin-top: 8px;}
.pay i.zhifubao{ background-position: -202px 18px;}
.pay i.weixin{ background-position: 16px 20px;}
.pay i.others{ background-position: -422px 17px;}

.pay_btn{ display: block; width: 460px; height: 88px; line-height: 88px; text-align: center; font-size: 32px; background-color: #1AA6FF; color: #fff; border-radius: 20px; margin: 24px auto; box-shadow: rgba(52,176,255,0.35) 0px 7px 46px;}
.pay_btn span{ font-size: 16px; text-decoration: line-through;}
.disable{ background-color: #ccc;box-shadow: none;}

.icon{ display: inline-block; width: 180px; height: 180px; border-radius: 50%; margin-top: 120px;}
#success .icon{ background: #1AA6FF url(https://cdn.hztangyou.com/pay2/icon_suc.png) no-repeat center;}
#success h2,#fail h2{ font-size: 36px; margin-top: 20px;}
#success p, #fail p{ font-size: 24px; margin-top: 8px; color: #999;}
#success p span, #fail p span{ color: #EB5044;}
.btn1, .btn2{ display: inline-block; width: 480px; border-radius: 20px; text-align: center; font-size: 36px;}
.btn1{ height: 80px; line-height: 80px; background-color: #1AA6FF; margin-top: 60px; color: #fff;}
.btn2{ height: 76px; line-height: 76px; border: 2px solid #1AA6FF; margin-top: 40px; color: #1AA6FF;}

#fail .icon{ background: #EB5044 url(https://cdn.hztangyou.com/pay2/icon_fail.png) no-repeat center;}

.mask{ width: 100%; height: 100%; background-color: rgba(0,0,0,0.85); position: fixed; left: 0; top: 0; text-align: center; z-index: 999; display: none;}
.mask p{ font-size: 24px; color: #fff; margin-top: 120px;}
.mask p img{ width: 320px; margin-bottom: 12px;}

.tips{ text-align: center; margin-top: 20px; font-size: 24px; color: #999;}
#history_list{ margin-bottom: 80px;}
#history_list li{ margin-top: 20px; background-color: #fff; border-radius: 10px; font-size: 24px; padding: 16px 30px;}
#history_list .left{ width: 380px; line-height: 48px;}
#history_list .right{ width: 140px; line-height: 48px;}
.state_suc{ color: #1AA6FF;}
.state_fail{ color: #EB5044;}
.back_btn{ position: fixed; width: 640px; height: 88px; line-height: 88px; text-align: center; font-size: 32px; color: #fff; background-color: #1AA6FF; left: 50%; bottom: 0; margin-left: -320px; box-shadow: rgba(52,176,255,0.75) 0px 7px 46px;;}