@font-face {
	font-family: 'UDC-BOLD';
	src: url('../fonts/DHUDC1.01-Bold.ttf'); /* IE9 Compat Modes */
	src: url('../fonts/DHUDC1.01-Bold?#iefix') format('embedded-opentype'), /* IE6-IE8 */
	url('../fonts/DHUDC1.01-Bold.woff') format('woff'), /* Modern Browsers */
	url('../fonts/DHUDC1.01-Bold.ttf')  format('truetype'), /* Safari, Android, iOS */
	url('../fonts/DHUDC1.01-Bold.svg#ALBBPHT') format('svg'); /* Legacy iOS */
}
*{margin: 0; padding: 0; box-sizing: border-box; outline: none;}
html,body{font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
input,textarea,select,option{font-family: Arial, Helvetica, sans-serif; font-size: 14px;}
body{background: url(../images/bg.jpg) no-repeat 50% 0;}
.main{margin: 0 auto; margin-top: 150px; width: 1100px;background-color: #ffffff; border-radius: 7px; overflow: hidden; box-shadow: 0 1px 6px 0 rgba(0,0,0,.1);}
.title{padding: 15px 30px; font-size: 17px; background: linear-gradient(to bottom, #fefefe,#efefef);}
.content{padding: 30px 20px;}
.pay-box{display: table; width: 100%;}
.pay-box .left{display: table-cell; width: 240px; border-right: 1px solid #f0f0f0; vertical-align: top; padding: 0 10px;}
.pay-box .left .pay-notice-tl{height: 40px; line-height: 30px; background-color: #bb9b57; color: #ffffff; font-weight: bold; text-align: center;}
.pay-box .left .notice{padding: 5px 10px; font-size: 12px;}
.pay-box .right{display: table-cell; padding-left: 10px;  vertical-align: top;}
.pay-box .right .line{margin-bottom: 10px;}
.pay-box .right .line-title{padding: 8px 10px; font-size: 18px; font-style: italic; background: linear-gradient(to right, #b59a60, #ffffff); color: #ffffff; text-shadow: 1px 1px 0 rgba(0,0,0,.3);}

input,select{height: 35px; border: 1px solid #e0e0e0; padding: 0 10px; color: #535353; transition: all .2s; border-radius: 3px;}
input:hover,input:focus,select:hover,select:focus{border: 1px solid #0D97F2; color: #000000;}
input:disabled,select:disabled{cursor: no-drop; border: 1px solid #f2f2f2; background: rgba(0,0,0,.1);}
.user-table{width: 100%; margin-top: 20px;}
.user-table td{padding: 5px 10px;}
.user-table td input,.user-table td select{width: 200px;}
button{height: 35px; border: none; background: linear-gradient(to right, #bb9b57, #dbbe80); color: #ffffff; border-radius: 3px; padding: 0 20px; text-shadow: 1px 1px 0 rgba(0,0,0,.2); cursor: pointer;}
button:hover{background: linear-gradient(to right, #dbbe80, #e9d09a);}
button:active{background: linear-gradient(to right, #ae955f, #c4ae7e);}
button:disabled{background: linear-gradient(to right,#c0c0c0, #d6d6d6); cursor: no-drop;}
.payment-money{padding-top: 20px;}
.payment-money ul{overflow: hidden; width: calc(100% + 20px); list-style: none;}
.payment-money ul li{float: left; width: calc(100% / 5 - 10px); height: 125px; margin-right: 10px; margin-bottom: 10px; border: 1px solid transparent; cursor: pointer; position: relative;}
.payment-money ul li div{border: 1px solid #c0c0c0; width: 100%; height: 100%; padding: 20px 5px 5px 5px;}
.payment-money ul li:hover,.payment-money ul li:hover div{border: 1px solid #CC9862; background: #F6EAE1;}
.payment-money ul .current,.payment-money ul .current div{border: 1px solid #CC9862; background: #F6EAE1;}
.payment-money ul .disabled,.payment-money ul .disabled:hover{border: 1px solid #9F9F9F; background: rgba(0,0,0,.02); cursor: no-drop;-webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); filter: grayscale(100%); filter: gray;}
.payment-money ul .disabled div,.payment-money ul .disabled:hover div{border: 1px solid #9F9F9F; background: rgba(0,0,0,.02);}
.payment-money ul .current::after{content: ''; width: 32px; height: 32px; position: absolute; right: 0; bottom: 0; background: url(../images/pay-icon-selected.svg) no-repeat;}
.payment-money ul li p{text-align: center;}
.payment-money ul li .tag{position: absolute; right: 0; top: 0; padding: 0 2px 0 3px; border-radius: 0 0 0 5px; background: linear-gradient(to right, #f53d3d, #e20f0f); color: #ffffff; font-size: 12px;}
.payment-money ul li .tl{font-size: 17px; font-weight: bold;}
.payment-money ul li .price{font-family: UDC-BOLD; font-size: 42px; color: #CC9862; position: relative;}
.payment-money ul li .price::before,.pay-money .money-s::before,.pay-money .old-money::before{position: absolute; content: '￥'; font-size: 17px; font-weight: bold; left: -15px; bottom: 5px; font-family: Arial, Helvetica, sans-serif;}
.payment-money ul li .yuanbao{color: #b0b0b0; font-size: 12px;}

.payment-money ul .disabled .tag{position: absolute; right: 0; top: 0; padding: 0 2px 0 3px; border-radius: 0 0 0 5px; background: linear-gradient(to right, #b6b6b6, #929292); color: #ffffff; font-size: 12px;}
.payment-money ul .disabled .tl{font-size: 17px; font-weight: bold; color: #474747;}
.payment-money ul .disabled .price{font-family: UDC-BOLD; font-size: 42px; color: #7e7e7e; position: relative;}
.payment-money ul .disabled .price::before{position: absolute; content: '￥'; font-size: 17px; font-weight: bold; left: -15px; bottom: 5px; font-family: Arial, Helvetica, sans-serif;}
.payment-money ul .disabled .yuanbao{color: #b0b0b0; font-size: 12px;}
.payment-type ul li{height: 48px;}
.payment-type ul li p{text-align: left;}
.payment-type ul li div{padding: 10px;}
.payment-type ul li .icon{display: inline-block; margin-right: 5px; vertical-align: middle; width: 24px; height: 24px;}
.payment-type ul li .wxpay,.payment-type ul li .payjs{background: url(../images/icon-wxpay.svg) no-repeat 50% 50%;}
.payment-type ul li .alipay{background: url(../images/icon-alipay.svg) no-repeat 50% 50%;}
.payment-type ul li .qpay{background: url(../images/icon-qq.svg) no-repeat 50% 50%;}

.payment-type ul .current{ color: #CC9862;}
.pay-money{font-size: 16px; margin-top: 15px;}
.pay-money p{margin-bottom: 10px;}
.pay-money .money-s{font-family: UDC-BOLD; font-size: 36px; color: #CC9862; position: relative; margin-left: 15px;}
.pay-money .old-money{font-family: UDC-BOLD; font-size: 22px; color: #b0b0b0; text-decoration: line-through; margin-left: 20px; position: relative;}
.pay-money .old-money::before{font-size: 13px; bottom: 0px;}
.footer{min-height: 120px; background: #232333; color: #454555; font-size: 12px; text-align: center; padding-top: 30px; margin-top: 50px; }
.footer p{margin: 5px;}
.footer .main-s{border: none; margin-top: auto; background: none; box-shadow: none;}
.tips{margin-left: 10px; color: #b0b0b0;}

.popup-tip{position: fixed; z-index: 99999; padding: 5px 15px; transition: all .2s; border-radius: 3px; font-size: 12px;}
.popup-tip-err{border: 1px solid #b30000; background: #e6c2c2; color: #b30000;}
.popup-tip-warn{border: 1px solid #b68c1c; background: #e6dbc2; color: #997d30;}
.popup-tip-succ{border: 1px solid #21b179; background: #cef4e5; color: #00965c; }



.pay-body{position: fixed; width: 100%; height: 100%; z-index: 10; background-color: rgba(0,0,0,.2); transition: all .5s; left: 0; top: 0;}
.pay-bd{position: absolute; background: #ffffff; box-shadow: 0 0 5px 0 rgba(0,0,0,.3); transition: all .5s;}
.pay-bd-payjs{width: 340px; height: 420px; left: calc(50% - 170px); top: calc(50% - 210px); padding: 50px; text-align: center; border-radius: 10px;}
.pay-bd-payjs div{text-align: center; margin-bottom: 10px;}
.pay-bd-payjs .img-box{ border: 1px solid #e0e0e0; padding: 10px; width: 180px; height: 180px; overflow: hidden; display: inline-block;}
.pay-bd-payjs .img-box img{width: 100%; height: 100%;}
.pay-bd-payjs .line-tip{padding: 5px; background-color: #2bb705; color: #ffffff; margin-top: 10px;}
.pay-bd-payjs .time-box{border: 1px dashed #b0b0b0; background-color: #f0f0f0; color: #565656; font-size: 16px; margin-top: 20px; padding: 8px;}
.pay-bd-payjs .time-box span{font-weight: bold; color: #f53d3d;}
.pay-bd-payjs .pay-money span{font-family: UDC-BOLD; font-size: 24px;}
.hide-payjs-box{opacity: 0; transform: scale(1.2);}
.mini-close{position: absolute; background: url(../images/close.svg) no-repeat 50% 50%; display: inline-block; width: 32px; height: 32px; right: 10px; top: 10px; cursor: pointer;}
.mini-close:hover{background: url(../images/close-h.svg) no-repeat 50% 50%;}