body{font-size: 14px;font-family: "Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,Helvetica,Arial,sans-serif;}
a,a:hover,a:link{text-decoration: none}
.hd{max-width: 985px;margin:0 auto;}
.container{max-width: 985px;margin:0 auto;width: 100%}
.hide{display: none;}
.btn-blue{color: #FFF;padding:10px 15px;border-radius: 0;background: #00A0E8}

#header .navbar{height: 80px;background: url(../img/top-bg-wrapper.png) 0 0 repeat-x;border-radius: 0;box-shadow: none;margin-bottom: 15px}
.navbar .container{position: relative;height: 70px;}
.navbar .user{position: absolute;bottom: 0;right: 0}
.navbar .user a{color: #F16F05}

.index {margin: 0 -15px}
.index .payment{overflow: hidden;}
.index .payment .nav-tabs{border: 1px solid #CBC9C9;border-top: 2px solid #00A0E9;float: left;width: 248px;background: #F2F2F2 url(../img/bg-ltop.png) -1px 0 no-repeat;
overflow: hidden;}
.index .payment .nav-tabs>li>a{border:0 none;}
.index .payment .nav li{height: 48px;line-height: 48px;}
.index .payment .nav li.title{background: transparent;padding: 0 10px;font-size: 22px}
.index .payment .nav li{width: 100%;display: block;float: none;margin:0;margin-right: -1px}
.index .payment .nav li.active{margin-right: -2px;}
.index .payment .nav li a{color: #717171;height: 48px;margin-right: -2px;background-image: url(../img/left-line.png);background-repeat: no-repeat;background-position:  0 100%}
.index .payment .nav li.active a{border: 0 none;background-color: #FFF;color: #F16F05}
.index .payment .nav li:last-child a{background-image: none;}
.index .payment .tab-content{width: 725px;float: right;overflow: hidden;border: 1px solid #CBC9C9;background-color: #F6F6F6;border-top: 0 none}
.tab-content .tab-header{margin: 0 -1px;margin-bottom: 36px;height: 36px;background: url(../img/bg-rtop.png) 0 0;line-height: 36px}
.tab-content .tab-header>div{margin:0 20px;font-size: 12px;color: #8C8C8B}
.tab-content .tab-pane label{font-weight: normal;margin-right: -15px}

.amount-group table{width: 462px}
.amount-group table td{float: left;border: 1px solid #8C8C8B;border-collapse:collapse;text-align: left;cursor: pointer;height: 32px;width: 115px;position: relative;
margin-right: -1px;margin-bottom: -1px}
.amount-group table td.active{border: 2px solid #6CB93D;}
.amount-group table td.active:after{content: ' ';position: absolute;right: 0;bottom: 0;background: url(../img/tag.png) 0 0 no-repeat;width: 24px;height: 24px;}
.amount-group table td .radio-inline{margin: 5px 0;padding-top: 0;padding-left: 0}
.amount-group table td.other{background: #F1F1F1;padding-right: 0}
.amount-group table td.other .radio-inline{margin:3px -10px; white-space: nowrap;}
.amount-group table td.other .text{width: 78px;display: inline-block;height: 24px;padding: 3px 6px;border-radius: 0;font-size: 12px}

.btn-submit:focus, .btn-submit:hover{background: #00A0EA;color: #FFF;}
.payForm{height: 615px;padding: 0 10px;position: relative;}
form input,input.form-control{border-color: #8C8C8B}
.payForm button.btn{padding: 4px 12px}
.payForm input.form-control[type=text]{height: 30px}
.game-group button,.server-group button,.role-group button{border-color: #8C8C8B}
.game-group button span,.server-group button span,.role-group button span{margin-right: 5px;padding-right: 8px;border-right: 1px solid #8C8C8B;}
.game-group button .caret,.server-group button .caret,.role-group button .caret{border-top-color: #454545;border-top-right: #454545;border-top-left: #454545}

.server-group ul{height: 360px;overflow: auto;}

.form-group{margin-bottom: 30px}
.btn-submit{background: #00A0EA;color: #FFF;border: 0 none;border-radius: 3px;font-weight: normal;text-shadow:none;font-size: 14px;
    padding: 10px 15px;}

.state{bottom: 30px;position: absolute;}
.state .content{margin:0px 30px;}
.state .content h3{font-size: 14px}
.state .content div{color: #717171;font-size: 12px;line-height: 24px;}

#order{padding:10px;color:#6F7889}
#order .confirm table td{height: 32px;line-height: 32px}
#order .confirm table td.first{background-color: #F2F2F2;text-align: right;/* width: 180px */}
#order .confirm .btn{width: 120px;border-radius: 0;height: 40px;line-height: 28px}
#order .confirm .btn-sure{background: #00A1E9;color: #FFF;margin-right: 10px}
#order .confirm .btn-close{border:1px solid #DFDFDF;color: #6F7477;}
#order .confirm .red{color: #F00}
#order .confirm .green{color: #5cb85c}

#order .help h1{margin-top: 10px}
#order .help h1,#order .help h2{color: #F26F05;text-align: center;font-size: 16px;font-size: 28px; font-weight: bold;}
#order .help h2{font-size: 14px;font-weight: normal;line-height: 22px;margin: 30px 0 50px}
#order .help .btn{color: #FFF;margin:0 10px;border-radius: 0;width: 120px;text-align: center;height: 40px;line-height: 28px}
#order .help .btn-result,#order .help .btn-pay{background: #00A1E9;margin-bottom: 10px}
#order .help .btn-faq{background: #F26F05}

#order .qrcode{position: absolute;top: 0;left: 0;display: block; width: 100%;height: 100%;padding:20px 50px 50px;text-align:center;background: #FFF}
#order .qrcode h1{font-size: 18px;margin-bottom: 20px}
#order .qrcode #code{}

#manual {padding: 0 35px;margin-top: -36px;padding-top: 36px;color: #6C708B;background: #FFFFFF;height:720px;position: relative;display: none;}
#manual .tabs{list-style: none;padding: 0;height: 52px;clear: both;margin-bottom: 15px}
#manual .tabs{border-bottom: 1px solid #DEDEDE}
#manual .tabs li{display: inline-block;text-align: center;float: left;}
#manual .tabs li+li a{border-left: 0 none}
#manual .tabs li a{border:1px solid #DEDEDE;display: block;background: #F2F2F2;color: #6C708B;padding: 15px 20px;margin-bottom: -1px;}
#manual .tabs li a.active,#manual .tabs li a:hover{background: #FFF;border-bottom-color: #FFF}
#manual .step-nav{overflow: hidden;height: 36px;background: url(../img/bg-steps.png) 0 0 no-repeat;line-height: 36px;margin-bottom: 20px}
#manual .step-nav a{color: #68707B;font-size: 12px;width: 124px;float: left;padding: 0 12px}
#manual .step-active-0{background-position: 0 0}
#manual .step-active-1{background-position: 0 -40px}
#manual .step-active-2{background-position: 0 -80px}
#manual .step-active-0 a.first{color: #FFF}
#manual .step-active-1 a.first,#manual .step-active-1 a.second{color: #FFF}
#manual .step-active-2 a{color: #FFF}
#manual .step-nav a.btn-back{color: #2783B2;text-align: right}
#manual .btns{margin-bottom: 20px}
#manual .btns a{color: #FFF;margin-left: 15px}
#manual .step .banks{font-size: 12px}
#manual .step .banks th{background-color: #F2F2F2;font-weight: normal;}
#manual .state .content{margin:0;}
#manual .step .success{padding-top: 70px}
#manual .step .success a{color: #02A4ED}
#manual .bank-group .dropdown-menu{height: 320px;overflow: auto;}

.manual-form{margin:0 -30px;}
.manual-form .form-group{margin-bottom: 20px}
.manual-form .form-group label{color: #444444}
.remits {font-size: 12px;}
.remits tr th{background: #F2F2F2;font-weight: normal;}

.footer{padding: 60px 0;color: #717171}

@media (max-width: 768px) {
	#content{padding: 5px}
	.index .payment .tab-content{float: auto;width: 100%}
	.amount-group table{width: 100%}
	.index .form-group{margin-bottom: 10px}
	.amount-group{margin-bottom: 0!important}
	.tab-content .tab-header{margin-bottom: 10px;}
	.navbar-brand{padding: 5px 15px}
	.navbar .user{padding-right: 10px}
	.index .payment .nav-tabs{float: auto!important;}
	.btn-group{margin-bottom: 5px}
	.amount-group table td{overflow: hidden;}

	.navbar-brand img{width: 90%}
	.state{position: static;}
	.state .content{margin: 0}
	.state .content div{line-height: 1.7}
	.index .payment .nav{margin-bottom: 10px;width: 100%;background: #F2F2F2}
	.index .payment .nav li.title{display: none;}
	.index .payment .nav li{float: left;width: auto}
	.index .payment .nav li a{background: none;line-height: 1.6;}
	.index .payment .nav li.active a{    box-shadow: 0 0 1px 1px #CCC;border-radius: 0;}
	.form-group{margin-bottom: 10px}
}
@media (max-width: 414px) {
	.payForm button.btn{padding: 4px 8px}
	.game-group button span, .server-group button span, .role-group button span{padding-right: 3px;margin-right: 3px}
}
@media (max-width: 360px) {
	.payForm button.btn{padding: 4px 5px;}
	.payForm{padding: 0 5px}
	.amount-group table td{width: 110px!important}
	.game-group button span, .server-group button span, .role-group button span{padding-right: 3px;margin-right: 3px}
	#order .confirm {font-size: 13px}
}
@media (max-width: 320px) {
	.amount-group table td{width: 100px!important;}
	.amount-group table td.other .text{width: 72px}
	.game-group button span, .server-group button span, .role-group button span{padding-right: 3px;margin-right: 3px}
	#order .confirm {font-size: 12px}
}