﻿/*支付页面样式开始*/
.pay_main{width: 100%;background: #f4f4f4;color: #333;}
.wrap{width: 1200px;margin-left: auto;margin-right: auto;padding-bottom:200px;}
.g-wrap{background: #fff;}
.pay_tit{margin: 0px 73px 0;padding-top: 60px;border-bottom: 1px solid #d5d5d5;font: 400 22px/50px 'Microsoft YaHei';color: #333;position:relative;}
.p_name{margin: 0 73px 0;font: 400 15px/50px 'Microsoft YaHei';color: #333;}
.p_name span.na{padding-right: 10px;}
.p_name span.zhyy{padding-left: 10px;}
.p_name span.zhyy font{color: #8b1853;padding: 0 5px;}
/*支付选择*/
.payforType{margin-top:20px;}
.paychoice{width:570px;}
.payforType a{width:110px;height:35px;line-height:35px;display:inline-block;text-align:center;color:#fff;border-radius:5px;background-color:#a8cbdb}
.payforType a:hover,.payforType a.on{background-color:#18a9ea}
.forSelect{margin-bottom:20px;margin-top:10px;position:relative;z-index:10;}
.forSelect .friendsNum{width:242px;height:30px;border:1px solid #ff8301;text-indent:10px;float:left;}
.forSelect .selectTips{display:inline-block;height:30px;line-height:30px;width:200px;float:left;margin-left:10px;text-indent:30px;display:none;}
.forSelect span.ok{background:url(../images/pay_ok.png) no-repeat left center;color:#878787}
.forSelect span.no{background:url(../images/pay_no.png) no-repeat left center;color:#fd3434}
/*代人充值*/
a.HelpPay{display:inline-block;height:15px;line-height:15px;background-color:#ff8301;padding:3px 5px 3px 5px;border-radius:5px;font-size:12px;color:#fff;position:relative;}
a.HelpPay .showQrCode{display:none;position:absolute;left:-45px;top:31px;padding-top:10px;white-space: nowrap;border:1px solid #ff8301;color:#ff8301;border-radius:3px;background-color:#fff;}
a.HelpPay .showQrCode .item{height:168px;display:inline-block;vertical-align:top;position:relative;}
a.HelpPay .showQrCode .item .img{width:180px;height:150px;text-align:center;}
a.HelpPay .showQrCode .item .img img{width:100%;}
a.HelpPay .showQrCode .item .img canvas{text-align:center;line-height:20px;position:relative;}

a.HelpPay .payTips{position: absolute;font-size: 12px;color: #ff8301;width: 100%;text-align: center;bottom: 8px;}
a.HelpPay .showQrCode:before{content:"";width: 0;height: 0;border-style:solid;border-color:transparent;border-top:none;border-width:8px;border-bottom-color:#ff8301;position:absolute;top:-8px;left:65px;}
a.HelpPay .showQrCode:after{content:"";width: 0;height: 0;border-style:solid;border-color:transparent;border-top:none;border-width:8px;border-bottom-color:#fff;position:absolute;top:-7px;left:65px;}
a.HelpPay:hover .showQrCode,a.HelpPay .showQrCode:hover{display:block;}








.czje{margin: 0 73px 0;padding: 30px 0;font-family: 'Microsoft YaHei';font-size: 15px;color: #333;}
.czje span{float: left;}
.czje ul{float: left;margin-left: 20px;}
.czje ul li{width: 130px;height: 60px;float: left;margin-right: 16px;border: 2px solid #FFD0AE;position: relative;margin-top:10px;}
.czje ul li:hover{border: 2px solid #FF8301;}
.czje ul li h4.option_label{line-height: 24px;text-align: center;padding-top: 8px;font-size: 20px;font-weight: normal;color: #FF8301;font-family: 'Microsoft YaHei';}
.czje ul li h4.option_label font{color: #8d8d8d;font-size: 13px;font-weight: normal;font-family: 'Microsoft YaHei';}
.czje ul li .radio_a{position: absolute;left: -9999px;}
.czje ul li.on{border: 2px solid #FF8301;}
.czje ul li i{position: absolute;display: none;right: -8px;top: -8px;z-index: 5;height: 16px;width: 16px;background: url(../images/dot2.png) no-repeat 0 0;}
.czje ul li label{cursor: pointer;}
.czje ul li h4.option_label input{width: 64px;height: 24px;line-height: 24px;padding-left: 5px;border: 1px solid #333;font-size: 14px;margin-right: 5px;}
.s-paytab-close .paytab-hd{background: #F9F9F9 none repeat scroll 0% 0%;padding: 0;margin: 0 60px;border-top: none;cursor: pointer;}
.s-paytab-close{background: #F9F9F9;display: none;}
.paytab-hd{position: relative;background: #f9f9f9;margin-top: -1px;padding: 0 60px;border-top: 1px solid #ececec;font-size: 0;letter-spacing: 0;transition: background .3s;}
.paytab-hd .zfb{background: url(../images/zf_pic.jpg) 0px 20px no-repeat;float: left;width: 115px;height: 65px;}
.paytab-hd .dk{background: url(../images/zf_pic2.jpg) 0px 20px no-repeat;float: left;width: 115px;height: 65px;}
.paytab-hd .wy{background: url(../images/zf_pic3.jpg) 0px 20px no-repeat;float: left;width: 115px;height: 65px;}
.paytab-hd .tit{margin-right: 10px;font: 400 20px/84px 'Microsoft YaHei';}
.paytab-hd a{color: #2290E5;}
.paytab-hd a .paytab-hd-fw{margin-right: 10px;font: 400 12px/84px helvetica;}
.s-paytab-close .paytab-hd .icon-folder{display: block;position: absolute;left: 190px;top: 38px;}
.paytab-hd .icon-folder{display: none;}
.icon-folder{display: inline-block;width: 24px;height: 24px;background: url(../images/dot3.png) 0px 0px no-repeat;}
.fn-alipay .fn-paymethodLine{display: block;}
.banklist-line .banklist-item{display: block;position: relative;margin-bottom: 20px;background: #fff;border: 2px solid #ececec;cursor: pointer;transition: border-color .1s;}
.banklist-line .banklist-item span{vertical-align: middle;}
.banklist-line .logo{width: 150px;padding-left: 48px;display: inline-block;height: 50px;line-height: 50px;}
.banklist-line .logo img{margin-top: 5px;vertical-align: middle;}
.banklist-line .s-banklist-item-select .paynum{display: inline-block;}
.banklist-line .paynum{position: absolute;right: 0;top: 0;padding-right: 18px;display: inline-block;height: 50px;font-size: 14px;line-height: 50px;}
.banklist-line .paynum .num{padding: 0 2px;font-weight: 700;color: #d946be;vertical-align: baseline;}
.paytab-main{border-bottom: 1px solid #ececec;padding: 12px 0;margin: 0px 73px;overflow: hidden;transition: background .3s;font-size: 15px;color: #333;font-family: "Microsoft YaHei";}
.readProtocol{text-align: center;border: none;margin: 0;font-size:16px;color:#bdbcbc;}
.readProtocol a{color:#ff8301;}
.paycontent{background: #F9F9F9 none repeat scroll 0% 0%;display: none;}
.tit{float: left;}
.lxfs{background: #fff;padding: 28px 0 28px 55px;}
.lxfs p{font-size: 15px;line-height: 30px;padding-bottom: 20px;}
.lxfs ul li{margin-bottom: 10px;}
.lxfs ul li span{width: 76px;text-align: right;font-size: 15px;display: inline-block;padding-right: 10px;}
.lxfs ul li input{width: 233px;font-size: 15px;height: 28px;border: 1px solid #497ca7;background: #f9f9f9;padding-left: 10px;}
.md-order-foot{padding: 44px 60px 16px;height: 40px;text-align:center}
.md-order-foot .btn-comfirm{display: inline-block;width: 188px;height: 54px;vertical-align: middle;text-align: center;color: #fff;background: #FF8301;font: 400 20px/54px 'Microsoft YaHei';float:none}
.fr{float: right;_display: inline;}
.md-order-foot .mon{padding-right: 20px;line-height: 54px;}
.md-order-foot .mon-num{color: #c221a5;font: 700 24px/54px 'Microsoft YaHei';}
.md-order-foot .mon span{display: inline-block;vertical-align: middle;}
.md-order-foot .mon{padding-right: 20px;line-height: 54px;}
/*点卡支付*/
.bank{margin-left: 20px;float: left;}
.paytab-main ul.bank li{background: #fff;position: relative;float: left;margin-right: 33px;margin-bottom: 12px;border: 2px solid #cccccc;width: 150px;height: 46px;}
.paytab-main ul.bank li:hover{border: 2px solid #79ac31;}
.paytab-main ul.bank li img{vertical-align: middle;padding: 5px 9px;}
.paytab-main ul.bank li .radio_a{position: absolute;left: -9999px;}
.paytab-main ul.bank li i{position: absolute;display: none;right: 0px;bottom: 0px;z-index: 5;height: 20px;width: 34px;background: url(../images/dot4.png) no-repeat 0 0;}
.paytab-main ul.bank li.on{border: 2px solid #79ac31;}
.paytab-main label{cursor: pointer;}
.dk_tip{margin: 3px 73px 0 3px;float: left;}
.dk_tip .dk_tit{color: #ff7e00;font-size: 14px;line-height: 24px;}
.dk_tip .dk_content{margin: 25px 178px 0;}
.dk_tip .dk_content h4{font-size: 18px;color: #ff7e00;font-weight: normal;padding: 15px 0;border-bottom: 1px solid #4d92b9;border-top: 1px solid #4d92b9;text-align: center;cursor: pointer;}
.dk_tip .dk_content .dk_sm{border-bottom: 1px solid #4d92b9;display: none;}
.dk_tip .dk_content .dk_sm p{line-height: 30px;font-size: 14px;color: #4d92b9;}
/*段位充值返利提示*/
.DanTips{font: 16px '微软雅黑';color:#ff8301;position:relative;}
.DanTips .question{display:inline-block;width:14px;height:14px;background:url(../images/pay_dan_question.png) no-repeat;margin-left:5px;position:relative;top:2px;}
.DanTips .OpenDan{display:inline-block;width:64px;height:20px;line-height:20px;text-align:center;color:#fff;font-size:12px;background-color:#ff8301;border-radius:5px;margin-left:10px;}
.DanTipsBox{position:absolute;width:360px;left:240px;top:95px;display:none;z-index:20;}
.DanTipsBox .arrow-up{width: 0px;height: 0px;font-size: 0px;line-height: 0px;border-left: 10px solid transparent;border-right: 10px solid transparent;border-bottom: 10px solid #ff8301;position:absolute;z-index:20;left:50%;}
.DanTipsBox .arrow-up-in{border-width:8px;border-bottom: 9px solid #fff;left:-8px;top:1px;}
.DanTipsBox .boxInfo{width:100%;height:110px;border:1px solid #ff8301;position:absolute;border-radius:10px;top:9px;z-index:10;background-color:#fff;}
.DanTipsBox .boxInfo .boxTable{width:95%;height:40px;margin:10px auto;text-align:center;}
.DanTipsBox .boxInfo .boxTable td{height:25px;line-height:25px;}
.DanTipsBox .boxInfo .boxTips{width:100%;line-height:20px;font-size:12px;color:#8c8c8c;background-color:#fff3e5;border-bottom-left-radius:10px;border-bottom-right-radius:10px;}
.DanTipsBox .boxInfo .boxTips .TipsCon{margin-top:-5px;padding-bottom:5px;width:95%;margin-left:15px;}
/*更多支付方式*/
.paymore{border: 2px solid #cccccc;position: relative;float: left;margin: 0 12px 12px 0;padding: 3px 10px;cursor:cell;}
.deprecatedpay{display:none;}

/*充值方式选择*/
.payTypeSelect{margin:0 73px 0;border-bottom: 1px solid #d5d5d5;position:relative;}
.payTypeSelect a{width:140px;height:50px;line-height:50px;display:inline-block;background-color:#e9e9e9;text-align:center;color:#5c5b5b;font-size:18px;position:relative;}
.payTypeSelect a em{display:none;position:absolute;bottom:-10px;left:50%;transform:translate(-50%,0);width: 0;height: 0;border-left: 0px solid transparent;border-right: 0px solid transparent;border-top: 0px solid #ff8301;border-width:10px;}
.payTypeSelect a.active{background-color:#ff8301;color:#fff;}
.payTypeSelect a.active em{display:block;transition: all 300ms linear 10s; }
.payTypeSelect .message{position:absolute;right:0px;top:10px;font-size:16px;}


/*首充福利*/
.first_pay{overflow:initial;}
.first_pay .con{display:inline-block;margin-left:20px;color:#FF8301;position:relative;}
.first_pay .con .question{display:inline-block;width:16px;height:16px;background:url(../images/first_pay_question.png) no-repeat left;position:relative;top:3px; left:5px;padding-right:20px;}
.first_pay .con .question .first_tips{display:none;width:583px;height:332px;position:absolute;background:url(../images/first_tips.png) no-repeat;top:-140px;left:20px;}
.first_pay .con .question:hover .first_tips{display:block;}

/*客服充值*/
.servicePay{margin:40px 73px 0;}
.tab{width:100%;text-align:center;border-collapse: collapse;border:1px solid #e5e5e5;}
.tab th,.tab td{text-align:center;height:58px;line-height:58px;border:1px solid #e5e5e5;font-size:16px;color:#888888;}
.tab td{color:#333333;}
.tab td .qqcode{display:inline-block;width:120px;}
.tab td .copy{color:#00acff;display:inline-block;}
.servicePay .servicePay_tips{margin-top:65px;color:#ff8301;}


/*充值弹层样式*/
[v-cloak]{display:none;}
.payWin{background-color:#fff;}
.payWin .header{width:100%;height:.96rem;background:url(../images/payWin/head_bg.png) no-repeat;background-size:100%;}
.payWin .close{width:.26rem; position:absolute;}

.payWin .title{margin:.48rem 0 .32rem .32rem;font-size:.36rem;}

/*充值弹层样式——代人充值*/
.payWin .title .insteadPay{display:inline-block;width:1.5rem;height:.42rem;line-height:.42rem;margin-left:.36rem; background-color:#00D8C9;border-radius:.7rem;font-size:.27rem;color:#fff;position:relative;top:-.01rem;text-align:center;z-index:99;}
.payWin .title .insteadPay .qrcodeBox{display:none;padding:.12rem; background-color:#fff;border:.04rem solid #00D8C9;color:#00D8C9;font-weight: 400;font-size: .32rem;margin-top:20px;position:absolute;left:-1rem;white-space: nowrap;}
.payWin .title .insteadPay .qrcodeBox .item{width:3.44rem;display:inline-block;vertical-align:top;}
.payWin .title .insteadPay .qrcodeBox .item .img{width:100%;height:2.80rem;}
.payWin .title .insteadPay .qrcodeBox .item .img img{width:100%;}
.payWin .title .insteadPay .qrcodeBox:before{content:"";width: 0;height: 0;border-style:solid;border-color:transparent;border-top:none;border-width:.24rem;border-bottom-color:#00D8C9;position:absolute;top:-.26rem;left:1.55rem;}
.payWin .title .insteadPay .qrcodeBox:after{content:"";width: 0;height: 0;border-style:solid;border-color:transparent;border-top:none;border-width:.24rem;border-bottom-color:#fff;position:absolute;top:-.21rem;left:1.55rem;}
.payWin .title .insteadPay:hover .qrcodeBox{display:block;}





.payWin .faceAmounts{font-size:0;margin-left:.24rem;}
.payWin .faceAmounts li{width:2.92rem;height:1.7rem;display:inline-block;font-size:.32rem;text-align:center;border-radius:.16rem;border:.02rem solid #eee;margin:0 .08rem;box-sizing:border-box;padding-top:.4rem;cursor:pointer;overflow:hidden;}
.payWin .faceAmounts li.on{background:url(../images/payWin/border_bg.png) no-repeat;background-size:100% 100%;border:none;}
.payWin .faceAmounts li .rmb{color:#999;}
.payWin .faceAmounts li .ipt_rmb{width:90%;font-size:.32rem;color:#999;text-align:center;}
.payWin .faceAmounts li .ipt_rmb::placeholder{color:#999;}

.payWin .selectPayType{margin-left:.32rem;display:inline-block;}
.payWin .selectPayType li{width:5.18rem;height:1.44rem;line-height:1.44rem; border: .02rem solid #eee;border-radius:.16rem;margin-bottom:.32rem;background-size:.65rem .65rem;background-repeat:no-repeat;background-position:.68rem center;text-indent:1.56rem;}
.payWin .selectPayType li.alipay{background-image:url(../images/payWin/alipay.png);}
.payWin .selectPayType li.alipay.on{border-color:#0C60E2;}
.payWin .selectPayType li.wechat{background-image:url(../images/payWin/wechat.png);}
.payWin .selectPayType li.wechat.on{border-color:#3CAF34;}

.payWin .qrcode{display:inline-block;width:3.36rem;vertical-align:top;margin-left:2.64rem;text-align:center;font-size:.28rem;color:#999;position:relative;}
.payWin .qrcode .txt{margin-top:.1rem;}
.payWin .qrcode .createBtn{width:100%;height:3.36rem;position:absolute;top:0;left:0;background-color:rgba(0,0,0,.5);}
.payWin .qrcode .createBtn a{display: block;line-height: .48rem;padding: 0 .28rem;background-color: #fff;border-radius: .08rem;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: .16rem;color: #333;white-space: nowrap;}


.payWin .footer{width:100%;height:1.28rem;line-height:1.28rem; border-top:.02rem solid #eee;margin:.4rem 0 0 0;}
.payWin .footer .tips{color:#FD2D3D;font-size:.24rem;position:absolute;right:.32rem;}
.payWin .close{width:.52rem;height:.52rem;position:absolute;top:.22rem;right:.32rem;background:url(../images/payWin/close.png) no-repeat;background-size:100%;cursor:pointer;}



