*{margin:0px; padding:0px;}
html{-webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
body{font-size:12px; font-family:Microsoft YaHei; background:#eaecee;}
ul,ol,li,input,select,label,p,span,a,img,small,em,h1,h2,h3,h4,h5,h6{font-style:normal; list-style-type:none; background:none; border:none;}
table,tr,td,th{border-collapse:collapse; border-spacing:0;}
img{width:auto\9; max-width:100%; height:auto; margin-bottom:-3px;} 
a{color:#666; text-decoration:none;}
a:hover{text-decoration:underline;}
.clearfix{*zoom:1;}
.clearfix:after{height:0; font-size:0; display:block; clear:both; overflow:hidden; visibility:hidden; content:"";}
.f_l{float:left;}
.f_r{float:right;}

.orange{color:#fe5521;}



#wrapper{width:100%; max-width:640px; margin:0 auto; position:relative;}

/*头部*/
.header{height:70px; color:#fff; background:#272727; padding:0 10px;}
.header .infor{height:52px; padding:9px 0;}
.header .infor span{width:52px; height:52px; margin-right:18px; float:left;}
.header .infor h1{line-height:28px; font-size:1.6em;}
.header .btn{width:118px; height:40px; line-height:36px; color:#fff; font-size:14px; text-align:center; display:block; background:url(/images/self_pay/btns.png) no-repeat; margin:15px 0;}
.header .btn:hover{color:#ff0; text-decoration:none;}


/*首页内容区*/
.main{width:100%; padding-bottom:70px;}
.main .hd{height:78px; color:#212121; font-size:14px; background:#fff; margin-bottom:14px;}
.main .hd li{width:25%; height:78px; line-height:26px; text-align:center; float:left;}
.main .hd li a{height:70px; color:#212121; border-right:1px solid #f6f6f6; display:block; padding-top:8px; cursor:pointer;}
.main .hd li a:hover{color:#ff5622; text-decoration:none;}
.main .hd li.on a{color:#ff5622; text-decoration:none; background:#eaecee;}
.main .hd li a em{width:42px; height:42px; background-image:url(/images/self_pay/icon.png); display:block; margin:0 auto;}
.main .hd li a em.icon1{background-position:0 0;}
.main .hd li a em.icon2{background-position:-42px 0;}
.main .hd li a em.icon3{background-position:-84px 0;}
.main .hd li a em.icon4{background-position:-126px 0;}
.main .bd{width:100%;}

/*礼包*/
.package{color:#999; font-size:1em; margin:2% 3%;}
.package li{height:130px; background:#fff; border:1px solid #dfe0e1; border-radius:6px; overflow:hidden; margin-bottom:8px;}
.package li a{height:100%; color:#333; display:block;}
.package li a:hover{color:#ff5622; text-decoration:none;}
.package li a p{height:60px; font-size:1.4em; border-bottom:1px solid #dfe0e1; padding:15px 9% 15px 3%;}
.package li a em{width:74px; height:60px; overflow:hidden; margin-right:16px; float:left; background:#ccc;}
.package li a small{line-height:39px; color:#999; display:block; padding:0 4%;}
.package .read_more{color:#afafaf; font-size:1.2em; text-shadow:1px 1px 1px #fff; text-align:center; padding:5px 0; margin-bottom:20px;}
.package .read_more a{color:#858585;}
.package .read_more a:hover{text-decoration:none;}
.package .copyright{line-height:28px; text-align:center;}

/*自助服务*/
.self{color:#fff; background:#fff; text-align:center; margin:2% 6%;}
.self h3{height:66px; line-height:64px; font-size:2em; background:#fe6a3c; margin-bottom:24px;}
.self a{height:70px; color:#fff; background:#fe6a3c; border-radius:18px; overflow:hidden; display:block; margin:0 8% 8% 8%;}
.self a:hover{color:#fff; text-decoration:none; background:#fe573c;}
.self a p{line-height:42px; font-size:2em; font-weight:bold;}
.self a strong{line-height:70px; font-size:2em; font-weight:bold;}
.self a span{font-size:14px;}

/*查找账号*/
.czzh{width:300px; height:260px; background:url(/images/self_pay/zwcz_300.jpg) no-repeat; margin:20px auto;}


/*底部导航*/
.foot_nav{width:100%; height:50px; color:#919191; background:#fff; position:fixed; left:0; bottom:0;}
.foot_nav li{width:25%; line-height:22px; text-align:center; float:left;}
.foot_nav li a{height:44px; color:#919191; border-right:1px solid #f6f6f6; display:block; padding-top:6px;}
.foot_nav li a:hover,.foot_nav li.on a{color:#fff; background:#fe6a3c; text-decoration:none;}
.foot_nav li a em{width:20px; height:20px; background-image:url(/images/self_pay/icon.png); display:block; margin:0 auto;}
.foot_nav li a em.icon1{background-position:0 -42px;}
.foot_nav li a em.icon2{background-position:-40px -42px;}
.foot_nav li a em.icon3{background-position:-80px -42px;}
.foot_nav li a em.icon4{background-position:-120px -42px;}
.foot_nav li a:hover em.icon1,.foot_nav li.on a em.icon1{background-position:-20px -42px;}
.foot_nav li a:hover em.icon2,.foot_nav li.on a em.icon2{background-position:-60px -42px;}
.foot_nav li a:hover em.icon3,.foot_nav li.on a em.icon3{background-position:-100px -42px;}
.foot_nav li a:hover em.icon4,.foot_nav li.on a em.icon4{background-position:-140px -42px;}
.foot_nav li a.b4{color:#fe6a3c;}
.foot_nav li a.b4:hover,.foot_nav li.on a.b4{color:#fff;}

/*浮动在线客服*/
.kefu_icon{position:fixed; top:300px; right:0;}



/*充值选择页*/
.mode{width:100%; color:#fff; margin-bottom:60px;}
.mode_tit,.mode_self{height:66px; line-height:64px; font-size:2.5em; font-weight:bold; text-align:center; background:#fe6a3c;}
.mode_txt{background:#fff; padding:2% 4%; margin:3%;}
.mode_self{color:#fff; position:fixed; left:0; top:0; width:100%; z-index:999;}
.mode_box{min-height:100%; color:#fff; background-color:#fff; overflow:hidden; padding:40px 0;}
.mode_box h1{background:#fc4e4d; text-align:center; line-height:40px; color:#fff;}
.mode_body{background:#fff; margin:4% 1% 2% 0;}

/*充值方式*/
.select a{height:60px; line-height:60px; color:#fff; font-size:2em; font-weight:bold; background:#fe6a3c; border-radius:18px; text-align:center; overflow:hidden; display:block; margin:0 30px 20px 30px;}
.select a:hover{color:#fff; text-decoration:none; background:#fe573c;}


/*人工充值*/
.artificial{line-height:30px; color:#555; font-size:1.2em;}
.artificial h3{height:40px; font-weight:normal;}
.artificial h3 span{margin:0 2%;}
.artificial dl{margin-bottom:10px;}
.artificial dt{color:#000;}
.artificial dd a{margin-left:20px;}
.artificial dd em{color:#555; margin-right:10px; float:left;}
.artificial .btns{width:50%; height:42px; line-height:40px; color:#fff; font-size:1.6em; background:#fe6a3c; border-radius:5px; text-align:center; display:block; margin:0 auto 10px auto;}
.artificial .btns:hover{color:#fff; text-decoration:none; background:#fe573c;}


/*公用弹窗*/
.mode_tips{width:85%; background:#fff; border-radius:10px; overflow:hidden; display:none;}
.mode_tips h3{height:50px; line-height:46px; color:#fff; font-size:2em; background:url(/images/self_pay/tit_bg.jpg) repeat-x; text-align:center;}


/*查找账号弹窗*/
.find_acc{width:75%; text-align:center; margin:15px auto;}
.find_acc a{width:auto; height:auto; display:inline-block; margin:10px 28px; background:#000; float:left;}


/*银行转账账号弹窗*/
.bank_infor{line-height:30px; color:#000; font-size:1.2em; padding:5% 10%;}
.bank_infor em{width:72px; color:#555; text-align:right; margin-right:4px; float:left;}
.bank_infor .btns{width:60%; height:42px; line-height:40px; color:#fff; font-size:1.6em; background:#fe6a3c; border-radius:5px; text-align:center; display:block; margin:10px auto;}
.bank_infor .btns:hover{color:#fff; text-decoration:none; background:#fe573c;}


/*我的问题*/
.mode_tip{color:#000; font-size:1.6em; font-weight:bold; padding:0 10% 6% 10%;}
.mode_tip em{color:#f00;}
.question{line-height:30px; color:#555; font-size:1.2em;}
.question h3{height:40px; font-weight:normal;}
.question h3 span{margin:0 2%;}
.question label{display:block; margin-bottom:20px; position:relative;}
.question label em{width:116px; text-align:right; display:inline-block; vertical-align:middle; margin-right:4px;}
.question label .input{width:60%; height:40px; font-size:1em; border:1px solid #888; border-radius:5px; overflow:hidden; vertical-align:middle; resize:none; padding:0 2%;}
.question label .sid_input{width:60%; height:42px; overflow:hidden; vertical-align:middle; display:inline-block;}
.question label .sid_input .input{width:96%; height:100%; height:40px; font-size:1em; border:1px solid #888; border-radius:5px; padding:0 2%;}
.question dl{margin-bottom:10px;}
.question dt{color:#000; margin-bottom:10px;}
.question dd{line-height:34px; padding:0 8%;}
.question dd a{margin-left:20px;}
.question dd em{width:72px; color:#555; margin-right:4px; display:inline-block;}
.question dd span{margin-left:10px;}
.question .btns{width:44%; height:42px; line-height:40px; color:#fff; font-size:1.2em; background:#fe6a3c; border-radius:5px; text-align:center; display:block; margin-bottom:10px;}
.question .btns:hover{color:#fff; text-decoration:none; background:#fe573c;}

/*表单错误提示*/
.hint{width:12px; height:12px; position:absolute; top:14px; right:10px;}
.hint label{width:100%; height:100%; overflow:hidden; padding:0px !important; margin:0px !important; background:#000;}
.hint label.ok{background:url(/images/self_pay/ok.gif) no-repeat;}
.hint label.error{background:url(/images/self_pay/error.gif) no-repeat;}


/*支付未到账*/
.acc_infor{font-size:1.1em; font-weight:normal; overflow:hidden; padding:0 5%; margin-bottom:4%;}
.acc_infor em{width:88px; text-align:right; margin-right:4px; display:inline-block; vertical-align:middle;}
.acc_infor span{height:28px; display:inline-block; vertical-align:middle;}
.acc_infor span .user_input{width:110px; height:22px; line-height:22px; border:1px solid #888; vertical-align:middle; padding:0 3px; display:inline-block;}
.acc_infor span a{width:60px; height:28px; line-height:28px; color:#fff; background:#fe5521; text-align:center; display:inline-block; margin-left:3px; float:right;}
.acc_infor span a:hover{color:#fff; text-decoration:none; background:#fe4021;}


/*选择系统*/
.phone_system{width:192px; height:40px; line-height:40px; display:inline-block; overflow:hidden; vertical-align:middle;}
.phone_system a{width:94px; height:38px; border:1px solid #888; text-align:center; float:left; cursor:pointer;}
.phone_system a:hover{text-decoration:none;}
.phone_system a.on{color:#fff; text-decoration:none; background:#fe5521; border:1px solid #fe5521;}
.phone_system a.role1{border-radius:5px 0 0 5px;}
.phone_system a.role2{border-radius:0 5px 5px 0;}


/*选择金额*/
.pay_amounts{width:186px; height:126px; display:inline-block; overflow:hidden;}
.pay_amounts table{border:1px solid #c9c9c9;}
.pay_amounts td{width:60px; height:30px; border-right:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;}
.pay_amounts td a{width:100%; height:30px; border:1px solid #c9c9c9; text-align:center; margin:0 0 -1px -1%; float:left; position:relative;}
.pay_amounts td a.on{border:1px solid #ff6333;}
.pay_amounts td a .input{width:100%; height:100%; display:none;}
.pay_amounts td a font{width:100%; height:30px; position:absolute; top:0; left:0;}






@media screen and (max-width:375px){
	.user_input{width:100px;}
}

@media screen and (max-width:360px){
	.czzh{width:220px; height:190px; background:url(/images/self_pay/zwcz_220.jpg) no-repeat;}
	
	.question label .input,.question label .sid_input{width:59%;}
	
	.user_input{width:100px; height:20px; line-height:20px;}
	
	.phone_system{width:168px;}
	.phone_system a{width:82px;}
	
	.bank_infor{padding:5% 7%;}
}

@media screen and (max-width:320px){
	.czzh{width:220px; height:190px; background:url(/images/self_pay/zwcz_220.jpg) no-repeat;}

	.header .infor h1{font-size:1.1em;}
	.self h3,.self a p,.self a strong,.mode_tips h3{font-size:1.6em;}
	.self a{height:60px; margin:0 6% 6% 6%;}
	.self a p{line-height:34px;}
	.self a strong{line-height:60px;}
	
	.package li a p{font-size:12px;}
	.package .read_more{padding:0px;}
	
	.mode_tit,.mode_self{font-size:2em;}
	.select a{height:50px; line-height:50px; font-size:1.5em;}
	.artificial,.bank_infor,.question .btns,.package .read_more{font-size:1em;}
	.package .copyright{line-height:20px;}
	.artificial dd{line-height:26px;}
	.artificial .btns{height:36px; line-height:34px; font-size:1.4em;}
	.bank_infor{line-height:24px; padding:4% 7%;}
	.bank_infor .btns{height:36px; line-height:34px;}
	
	.mode_tip{font-size:1.4em;}
	.question dd{padding:0 6%;}
	.question label .input,.question label .sid_input{width:58%; height:30px;}
	.question label em{width:90px; font-size:0.8em;}
	.question .btns{height:32px; line-height:30px;}
	
	.hint{top:10px;}
	
	.acc_infor{font-size:0.8em;}
	.acc_infor em{width:72px;}
	.user_input{width:80px; height:20px; line-height:20px;}
	.acc_infor span a{height:22px; line-height:20px;}
	
	.phone_system{width:144px; height:30px; line-height:30px; font-size:0.8em;}
	.phone_system a{width:70px; height:28px;}
	
	.kefu_icon{top:200px;}
	.acc_infor span .user_input{width:96px;}
}

@media screen and (min-width:1024px){
	.header .btn{font-size:1.5em;}
	.self{margin:2% 10%;}
	
	.package li a p{font-size:1.6em;}
	
	.mode_tips{width:50%;}
	.bank_infor{padding:2% 6%;}
	.bank_infor p{padding:0 22%;}
	
	.question label,.acc_infor{padding:0 10%;}
	.question label .input,.question label .sid_input{width:70%;}
	
	.hint{right:50px;}
	
	.user_input{width:200px;}
	
	.phone_system{width:284px;}
	.phone_system a{width:140px;}
	
	.pay_amounts{width:288px; border-top:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9;}
	.pay_amounts td{width:94px;}
}



/*遮罩层*/
.gray{width:100%; background:#000; opacity:0.7; position:absolute; top:0; left:0; z-index:100;}