@CHARSET "UTF-8";
header,nav,article,footer,#mainObj,#header,#topBanner,#topNav,#article,#footer{margin:auto; width:760px; display:block; position:relative}
html, body {-webkit-text-size-adjust:none;     background: #FFF none repeat scroll 0% 0%;}
body,ul,li,dl,dt,dd,h3,h4,p,form,td{margin:0;padding:0; }
body,input,textarea,select{font:12px/1.5 Arial,Helvetica,Tahoma,Geneva,sans-serif; color:#333;}
ul{list-style:none;}
input,textarea,select{resize:none;}
table{width:100%;}
a{text-decoration:none; outline:none; blr:expression(this.onFocus=this.blur()); color:#3B5998; cursor:pointer; border:none}
a:hover{text-decoration:underline;}
img{border:none;vertical-align:middle;}
.cl:before,.cl:after{content:"";display:table;}
.cl:after{clear:both;}
.cl{zoom:1}
/*box width*/
.w980{width:980px;}
.w970{width:970px;}
.w760{width:760px;}
.w210{width:210px;}
/*layout*/
.ma{margin:auto;}
.fl{float:left;}
.fr{float:right;}
.pr{position:relative;}
.pa{position:absolute;}
.m5{margin:5px;}
.m10{margin:10px;}
.m20{margin:20px;}
.p5{padding:5px;}
.p10{padding:10px;}
.p20{padding:20px;}
/*text & font*/
.tc{text-align:center;}
.tl{text-align:left;}
.tr{text-align:right;}
.f12{font-size:12px;}
.f14{font-size:14px;}
.f16{font-size:16px;}
.fb{font-weight:bold;}
.red{color:#f00;}
.green{color:#0f0;}
.blue{color:#00f;} 

#game_box{background:#000}
#load_index{display:none;right:0;top:7px}

.clear{
	clear:both;
}

.logo{
	width: 100%;
	max-width: 1212px;
	height: 42px;
	padding-top: 12px;
	padding-bottom: 12px;
	text-align: center;
	margin: 0 auto;
	left: 0;
	right: 0;
	overflow: hidden;
	border-bottom: 5px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.logo img{
	height: 40px;
	width: auto;
}

.nav{
	margin-bottom: 10px;
	margin-left: 0;
	display: flex;
	align-items: center;
	flex: 1;
	justify-content: center;
}

.nav ul{
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li{
	float: none;
	width: auto;
	text-align: center;
	padding: 8px 12px;
	white-space: nowrap;
	margin: 0 3px;
	border-radius: 4px;
	transition: background-color 0.3s ease;
}

.nav li:hover {
	background-color: rgba(233, 76, 74, 0.1);
}
.nav li.online{
	background:#c92129;
}
.nav li.online:hover{
	background:url(../images/chargebg.png);
} 

.logo .nav a{
	color: #333333;
	font-size: 14px;
	font-family: Arial, Helvetica, sans-serif;
	height: auto;
	line-height: 1.4;
	text-decoration: none;
	display: block;
	padding: 5px 0;
	transition: color 0.3s ease;
}

.logo .nav li.online a{
	color: #fff;
}

.logo .nav a:hover, .logo .nav a:active{
	color: #e94c4a;
}

.logo .nav a.onChoose{
	color: #e94c4a;
	font-weight: bold;
}


.charges{
	display:none; 
	width:80px; 
	background:#fff;
	margin:0 auto;
	left:77.21%; 
	top:48px; 
	border:1px solid #eeeeee; 
	-webkit-border-radius: 4px; 
	-moz-border-radius: 4px; 
	border-radius: 4px; 
	position:absolute; 
	z-index:1000;
}

.charges a{
	display:block; 
	width:72px;
	height:25px;
	color:#333333;
	text-decoration:none; 
}
.charges a:hover{
	color:#e94c4a;
}

.charges a:nth-child(1){
	margin:4px auto; 
	border-bottom:2px solid #e6e6e6;
}

.charges a:nth-child(2){
	margin:3px auto 0px;
}