/***
 @author ----- ningwenjing
 @design ----- zhaoxihan
 @time   ----- 2016-04-11
***/
body,button,input,select,textarea{font:12px/1.5 Helvetica,\5FAE\8F6F\96C5\9ED1;;outline:none;-webkit-font-smoothing:antialiased}
ul,ol{list-style:none;}em,i{font-style:normal;}
body{margin:0;background:#eaedef;color:#505050;word-wrap:break-word;overflow-x:hidden;}
ol,ul,input{margin:0; padding:0;}
dl,dd,h1,h2,h3,h4,h5,h6,p,form{margin:0;}
img{display:block;width: 100%;border: 0;vertical-align:middle;}
table{ width:auto;border-collapse: collapse;border-spacing: 0;}
a{text-decoration:none;outline:none;color:#505050;}
a,button,button:active,input{-webkit-tap-highlight-color:rgba(0,0,0,0);}
.fix:after{visibility:hidden;display:block;font-size:0;content:".";clear:both;height:0;}

.ico_pay,.pay_list .cho:after,.pay_way .cho:after,.ico_way_wx,.ico_way_zfb,.footer .logo,.ico_user,.ico_fav,.ico_back,.ico_result_ok,.ico_result_fail,.pri_list li:after,.ico_p_ok,.ico_p_fail,.ico_load{background: url(../img/spr_pay_wap.png) no-repeat;background-size: 320px auto;}
.ico_pay{width: 47px;height: 47px;display: block;margin: 0 auto;}
.ico_pt{background-position: -50px 0;}
.ico_super{background-position: -100px 0;}
.ico_jsq{background-position: -150px 0;}
.ico_gjjsq{background-position: -200px 0;}
.ico_kn{background-position: 0 -50px;}
.ico_speed{background-position: -50px -50px;}
.ico_jsq_1{background-position: -100px -50px;}
.ico_user,.ico_fav,.ico_back{width: 30px;height: 30px;display: block;line-height: 100;overflow: hidden;position: absolute;top: 6px;}
.ico_user{background-position: -100px -100px;left: 6px;}
.ico_fav{background-position: -130px -100px;right: 6px;}
.ico_back{background-position: -160px -100px;left: 6px;}


.wrap{overflow:hidden;margin:0 auto;}
.header{background: #387aff;height:42px;line-height: 42px;}
.header h1{color: #fff;font-weight: normal;font-size: 14px;text-align: center;}
.info{height: 32px;line-height: 32px;padding: 0 12px;margin: 0 0 8px;background: #fff;}
.user_info{float: left;}
.user_name{color: #999;}
.logout{color: #ff9308;float: right;}


.pay_main{background: #fff;font-size: 14px}
.pay_type{background: #f7f7f8;height: 84px;overflow: hidden;}
.pay_type ul{display:-webkit-box;-webkit-box-orient:horizontal;}
.pay_type li{-webkit-box-flex:1;padding: 10px 0 0;text-align: center;height: 74px;width: 50%}
.vip_type{margin-top: 1px;}
.pay_type .cur{background: #fff;box-shadow: 0 0 3px 2px rgba(0,0,0,0.1);}
.pay_list{margin: 0 12px;}
.pay_list li,.pay_way li{border-bottom: solid 1px #e3e3e3;height: 48px;line-height: 48px;position: relative;font-size: 14px;}
.pay_list li:after,.pay_way li:after{position: absolute;right: 0;top: 15px;width: 13px;height: 13px;border: solid 1px #d9d9d9;border-radius: 50%;display: block;content:"";}
.pay_list li:last-child,.pay_way li:last-child{border: 0;}
.pay_list a{display: block;}
.pay_list .price{color: #ff9308;font-size: 16px}
.pay_list .label{background: #ee1f1f;padding: 0 3px;border-radius: 2px;color: #fff;font-size: 9px;margin: 0 0 0 5px;}
.pay_list .cho:after,.pay_way .cho:after{background-position: 0 -150px;background-color: #ff9308;border-color: #ff9308;}

.pay_way{margin: 10px 0;background: #fff;padding: 0 12px;}
.ico_way_wx,.ico_way_zfb{width: 20px;height: 20px;display: inline-block;vertical-align: middle;margin: 0 10px 0 0;}
.ico_way_wx{background-position: 0 -130px;}
.ico_way_zfb{background-position: -25px -130px;}
.btn_pay{margin: 15px 12px 5px;display: block;border-radius: 3px;background: #ff9205;height: 40px;line-height: 40px;color: #fff;text-align: center;font-size: 13px;}
.btn_pay .price{font-size: 16px;font-weight: bold;}
.txt_agree{text-align: center;font-size: 11px;display: block;color: #000}

.pay_lei{background: #fff;padding: 10px 12px;}
.pay_lei h2{font-size: 12px;font-weight: normal;margin: 0 0 10px;}
.pay_lei_list ul{margin-left: -12px;}
.pay_lei_list li{float:left;border: solid 1px #c7c7c7;width: 46%;height: 47px;line-height: 47px;text-align: center;font-size: 14px;border-radius: 3px;margin: 0 0 7px 12px;box-sizing: border-box;}
.pay_lei_list a{display: block;height: 47px;color: #666;}
.pay_lei_list .cho{border:solid 2px #ffbf8c}
.ipt_lei{font-size: 14px;text-align: center;border: 0;width: 100px;color: #666;}

.pay_update{height: 60px;line-height: 60px;padding: 0 12px;position: relative;}
.tatol{position: absolute;right: 12px;top: 19px;line-height: 1.2;text-align: right;}
.tatol .price{color: #ff9308;font-size: 16px;}
.tatol .save{font-size: 12px;}
.tatol .save span{color: #ff9308;}

.pay_result{position: absolute;height: 100%;width: 100%;background: #f7f7f8;}
.pay_result .header{background: #2a3d86;background: linear-gradient(to bottom,#29377b,#2c4291);}
.result_show{background: linear-gradient(#2c4393,#387afe);padding: 30px 0 0;text-align: center;border-top: solid 2px #5a6bab;height: 115px;}
.ico_result_ok,.ico_result_fail{width: 62px;height: 62px;display: block;margin: 0 auto;}
.ico_result_ok{background-position: 0 -220px}
.ico_result_fail{background-position: -65px -220px;}
.txt_result{line-height: 30px;color: #fff;text-align: center;}
.pay_result .btn_pay{background: #387aff;margin: 12px 0;font-size: 16px;}
.result_box{padding: 12px 14px;font-size: 14px;}
.result_box li{line-height: 30px;}
.tips{text-align: center;font-size: 10px;border-top: solid 1px #ececed;padding: 12px 0 0;position: absolute;width: 300px;bottom: 60px;left: 10px;}
.pay_result .footer{position: absolute;bottom: 0;width: 300px;}
.pay_result .footer .logo{background-color:#f7f7f8 }

/* privilege */
.privilege{position: absolute;min-height: 100%;width: 100%;background: #fff;}
.pri_user{height:80px;background: url(../img/bg_ban.png) no-repeat;background-size: cover; color: #fff;position: relative;padding: 30px 0 0 10px;}
.pri_user .pic_user{width: 58px;height: 58px;border-radius: 50%;overflow: hidden;display: inline-block;vertical-align: middle;background: url(../img/user_default.png) no-repeat;background-size: cover;}
.pri_user .pic_user img{width: 100%;height: 100%;}
.pri_name{display: inline-block;margin: 0 0 0 5px;}
.pri_opt{position: absolute;right: 12px;top: 45px;}
.pri_opt .btn_chg{width: 62px;height: 20px;line-height:20px;border: solid 1px rgba(255,255,255,0.6);display: block;text-align: center;color: #fff;border-radius: 2px;}
.pri_list{background: #fff;}
.pri_list li{position: relative;border-bottom: solid 1px #e0e1e5;display: -webkit-box;-webkit-box-align:center;padding: 12px 0;}
.pri_list li .link{height: 100%;display: block;position: absolute;top: 0;left: 0;width: 100%;}
.pri_list li:after{width: 16px;height: 16px;display: block;position: absolute;top: 50%;margin-top: -8px;content: "";background-position: -25px -150px;right: 15px;}
.pri_list li:active{background: #eef1f2}
.pri_list .ico_pay{display: block;vertical-align: middle;margin: 0 0 0 20px;}
.pri_list dl{display: block;width: 200px;vertical-align: middle;margin: 0 0 0 10px;}
.pri_list dl dt{color: #000;font-size: 14px;}
.pri_list dl dd{color: #a4a8b2;font-size: 12px;}

/* pop */
.cover{background: rgba(0,0,0,0.5);width: 100%;height: 100%;display: -webkit-box;-webkit-box-align:center;-webkit-box-pack:center;position: fixed;left: 0;top: 0;z-index: 999}
.pop_pay_tips{width: 260px;padding:22px 0 30px;background: #fff;border-radius: 5px;text-align: center;}
.ico_p_ok,.ico_p_fail{width: 50px;height: 50px;display: block;margin: 0 auto;}
.ico_p_ok{background-position: 0 -170px;}
.ico_p_fail{background-position: -50px -170px;}
.pop_txt_tips{margin: 10px 0 0;font-size: 14px;}
.txt_stop{padding: 40px 0;text-align: center;}
.pop_pay{width:260px;background: #fff;border-radius: 5px;font-size: 14px;}
.btn_active{display: block;height: 40px;line-height: 40px;border-top: solid 1px #c9c9c9;text-align: center;color: #ff9205;}
.pop_load{width: 260px;background: rgba(0,0,0,0.6);border-radius: 10px;text-align: center;padding: 35px 0;color: #fff;}
.ico_load{width: 52px;height: 52px;display: block;margin: 0 auto 15px;background-position: -130px -220px;}
.pop_pro{width: 300px;background: #fff;border-radius: 5px;position: absolute;left: 50%;margin: 20px 0 0 -150px;font-size: 10px;padding: 10px 10px 45px;box-sizing: border-box;}
.pop_pro h1{text-align: center;font-size: 14px;}
.btn_wp_pro{background: #fff;width: 100%;padding: 10px;box-sizing: border-box;position: fixed;bottom: 0;left: 0;}
.pop_pro .btn_pop_ok{display: block;height: 30px;background: #ff9205;color: #fff;text-align: center;line-height: 30px;border-radius: 5px;margin: 0 10px;}
.pop_pro p{text-indent: 2em;}
.pop_pro a{color: #ff9308}

/* footer  */
.footer{text-align: center;position: relative;margin: 20px 12px 10px;}
.footer .logo{width: 90px;height: 30px;background-position: 0 -100px;display: inline-block;line-height: 300;overflow: hidden;position: relative;background-color: #eaedef;z-index: 1}
.footer:after{border-bottom: solid 2px #d5d8dd;position: absolute;width: 100%;content: "";display: block;height: 10px;top: 2px;}

/* frame */
.frm{width:100%;min-height: 400px;}
.login_top{background: url(../img/bg_top.png) no-repeat;background-size: cover;height: 42px;line-height: 42px;}
.login_top h1{font-weight: normal;text-align: center;font-size: 14px;color: #fff;}

.ico_load{-webkit-animation:load 1s linear both infinite;-webkit-transform-origin:26px 27px;}
@-webkit-keyframes load{
    0%{-webkit-transform:rotate(0deg);}
    100%{-webkit-transform:rotate(360deg);}
}


/* media */
@media only screen and (min-width:820px){
    .wrap{zoom:3.2;}
}
@media only screen and (min-width:481px) and (max-width:768px) {
    .wrap{zoom:2.4;}
}
@media only screen and (min-width:436px) and (max-width:480px) {
    .wrap{zoom:1.5;}
}
@media only screen and (min-width:415px) and (max-width:435px) {
    .wrap{zoom:1.3594;}
}
@media only screen and (min-width:401px) and (max-width:414px) {
    .wrap{zoom:1.2935;}
}
@media only screen and (min-width:385px) and (max-width:400px) {
    .wrap{zoom:1.25;}
}
@media only screen and (min-width:376px) and (max-width:384px) {
    .wrap{zoom:1.2;}
}
@media only screen and (min-width:361px) and (max-width:375px) {
    .wrap{zoom:1.1718;}
}
@media only screen and (min-width:321px) and (max-width:360px) {
    .wrap{zoom:1.125;}
}
