body 
{ 
	font: 12px "Helvetica Neue",Helvetica,STHeiTi,sans-serif; 
	background: #faf9fc; 
	  padding-top: env(safe-area-inset-top);
	  padding-right: env(safe-area-inset-right);
	  padding-bottom: 50px;  /* 兼容不支持 env( ) 的设备  */
	  padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 在 iphone x + 中本句才会生效 */
	  padding-left: env(safe-area-inset-left);
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, p, img, a { padding: 0; margin: 0; }
a { text-decoration: none; outline: none; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); }
img { vertical-align: top; }
table { border-collapse: collapse; }
img, table, fieldset { border: 0; }
ol, ul { list-style: none; }
li { list-style-type: none; }
h1, h2, h3, h4, h5, h6 { font-size: 12px; font-weight: normal; }
p { font-size: rem(24); }
/*html, body { height: 100%; overflow: hidden; }*/
body{ background-color: rgba(85, 85, 85,1);}
html {font-family: sans-serif;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;}

a{ color:black;}
a:active{ color:red;}
a:focus{ color:gray; }

.clear{
    display:block;
    zoom:1;
    content:"clear"; 
    clear:both; 
}
.left{float:left;}
.right{float:right;}

.text-left{ text-align: left; }
.text-right{ text-align: right; }

.text-nowarp
{
    white-space:nowrap; 
    overflow:hidden; 
    text-overflow:ellipsis;
}

.red{ color: red; }
.blue{ color: #4795f5; }
.orange{ color: orange; }
.green{ color:#78bc27; }

.w100{ width:100%; }
.w90{ width:90%; }
.w80{ width:80%; }
.w70{ width:70%; }
.w60{ width:60%; }
.w50{ width:50%; }
.w40{ width:40%; }
.w30{ width:30%; }
.w20{ width:20%; }
.w10{ width:10%; }

.h100{ height:100%; }
.h90{ height:90%; }
.h80{ height:80%; }
.h70{ height:70%; }
.h60{ height:60%; }
.h50{ height:50%; }
.h40{ height:40%; }
.h30{ height:30%; }
.h20{ height:20%; }
.h10{ height:10%; }

.header-text
{ 
    height: 45px;
    width:100%;
    background-color: #fff;
    z-index: 99;
    box-shadow: 1px 0.1px 4px rgb(70, 69, 69);
    display: block;position: fixed;z-index: 100;
}

.header-text .logo
{
    padding: 3px 0 0 10px;
} 
.header-text .logo img
{
    width: 100px;
    height: 40px;
}

.header-text .left-menu
{
    color:gray;
    font-size: 30px;
    height: 44px;
    line-height: 44px;
    text-align: left;
}

.header-text .left-menu i{
    line-height: 44px;
}

.header-split{ height: 45px; background-color: #fff; }

.container{
    background: rgb(235,235,235);
}

.container .split{
    height: 15px;
    width: 100%;
}

.footer
{
    width: 100%;
    height: auto;
    padding: 20px 0 0 0 ;
    color: rgb(221,221,221);
}

.footer .device-type
{
    height: 30px;
    text-align: center;
    font-size:18px;

}
.footer a{ color:rgb(221,221,221); }
.footer a.active{ color: rgba(106, 175, 214, 1);}
.footer a:active{ color: rgba(106, 175, 214, 1);}
.footer .spline{border-top:1px solid rgb(221,221,221); height: 5px;}
.footer .about-link{ color:rgb(221,221,221); text-align: center; font-size:13px;  }
.footer .other_text
{
    padding-top:10px;
    text-align: center;
    line-height: 25px;
    font-size:13px;
}


.nav-main{
    height: 96px;
    line-height: 96px;
    float: right;
}

.nav-main a{ 
    font-size: 18px;
    color: #ffffff;
    padding: 0 20px;
    line-height: 96px;
    position: relative;
    display: block;
    float: left;
    height: 96px; 
}

.nav-main a span{
    width:0;
    height: 6px;
    /* background: #a48dff;  */
    background: #efefef;
    position: absolute;
    top: 0;
    left: 0;
}

.nav-main a:hover span{ width: 100%; }

.mobile-nav-main
{
    -moz-transition:all .5s ease;
    -webkit-transition:all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}

.mobile-nav-main{
    height:76px; 
    background:rgb(85,85,85); 
    position:absolute;
    top:45px; 
    text-align:center;
    tranform-origin:100% 1%; 
    display:block; 
    width:100%;
 }
 
.mobile-nav-main .icon-arrow{
    left: auto;
    right: 16px;
    color:  #333;
    top:0px;
}

.eject{
    transform-origin:100% 1%;
    -ms-transform-origin:100% 1%; /* IE 9 */
    -moz-transform-origin:100% 1%;/* Firefox */
    -webkit-transform-origin:100% 1%; /* Safari and Chrome */
    -o-transform-origin:100% 1%; /* Opera */
    transform:scale(0.1,.1);
    -ms-transform:scale(.1,.1); /* IE 9 */
    -moz-transform:scale(.1,.1); /* Firefox */
    -webkit-transform:scale(.1,.1); /* Safari and Chrome */
    -o-transform:scale(.1,.1); /* Opera */
    filter:alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
}

.mobile-nav-a { display:block; }

.mobile-nav-a a 
{
    font-size:1.2em;
    width:25%;
    height:76px;
    color:#fff;
    display:block;
    border-right: 1px solid rgb(78, 78, 78);
    border-bottom:1px solid rgb(78,78,78);
    float:left;box-sizing:border-box;
    text-align:center;
    line-height:76px;
}

.mobile-nav-a a i{
    margin-bottom:0.5em;
    font-size:30px;
    display:inline-block;
}

.mobile-nav-a a span{font-size: 18px;}


@media screen and (min-width:540px) and (max-width:767px)
{
    /*头部导航*/
    .mobile-nav-a a {width:14%;}
}

/*481<539*/
@media screen and (min-width:481px) and (max-width:539px)
{
    /*头部导航*/
    .mobile-nav-main {height:152px;}
}

/*320<480*/
@media screen and (min-width:320px) and (max-width:480px)
{
	/*头部导航*/
    .mobile-nav-main {height:152px;}
}


aside{
    /*侧边栏,初始位置为-200px，即隐藏效果*/
    position: absolute;
    top: 0;
    bottom: 0;
    left: -100%;
    width: 100%;
    background: rgba(0, 0, 0, 0);
    transition: 0.2s ease-out;
    /*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/
}

.sidemenu-container
{
    width: 200px;
    height: 100%;
    min-height: 640px;
    background: #333;
    box-shadow: 1px 2px 3px #000;
}

.sidemenu-container .game-face-container
{
    width: 200px;
    height: 100px;
    margin:0 auto;
    text-align: center;
    /* border: 1px solid red; */
    display: table-cell;
    vertical-align: middle;
}

.sidemenu-container .game-face-container .game-face{
    /* border: 1px solid red; */
    height: 90px;
    width: 90px;
    border-radius: 50px;
    display:inline-block;
    box-shadow: 0.1px 0.2px 3px #000;
}

.sidemenu-container .welcome
{
    margin-top: 10px;
    color:#fff;
    text-align: center;
    font-weight: bold;
    line-height: 28px;
    font-size: 15px;
}

.sidemenu-container .sidemenu-list
{
    margin-top: 20px;
}

.sidemenu-container .sidemenu-list li
{
    width: 90%;
    height: 35px;
    line-height: 35px;
    text-indent: 20px;
    font-size:15px;
    color:#fff;
}

.sidemenu-container .sidemenu-list li.active, 
.sidemenu-container .sidemenu-list li:hover
{
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
    background-color: #fff;
    color: #000;
}


.lobby-down
{
	margin : 5px; 
	height : 140px;
	width : auto;
}

.lobby-down .ld-left
{
	float:left;
	width:40%;
	/*border:1px solid red;*/
}

.lobby-down .ld-left .game-icon
{
	height: 130px;
}

.lobby-down .ld-left .game-icon img
{
	width : 120px;
	height : 120px;
	float: right;
	margin: 0 0 0 5px;
}

.lobby-down .ld-right
{
	float:left;
	width:55%;
	/*border:1px solid blue;*/
}

.lobby-down .ld-right .game-info ul
{
	padding-left:20px;
	font-size: 15px;
}

.lobby-down .ld-right .game-info li
{
	height:26px;
	line-height: 26px;
}

.lobby-down .ld-right .game-info li button
{
	margin-top: 8px;
	height: 36px;
	width: 90%;
}

#wechat-container
{
	position:fixed;
	width:100%;
	background-color:#505556;
	height:100px;
	display:none;
}

.notice-wechat {
	height: 180px
}

.notice-wechat {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 0;
	background-color: #505556;
	box-shadow: 0 -9px 29px -7px rgba(0, 0, 0, .1) inset;
	-webkit-transition: all .5s;
	transition: all .5s
}

.wechat-tips img, .wechat-tips span {
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle
}

.wechat-tips {
	position: fixed;
	top: 10px;
	z-index: 103;
	padding-top: 14px;
	width: 100%;
	text-align: right
}

.wechat-tips span {
	color: #fff;
	text-align: left;
	font-weight: 700;
	font-size: 16px;
	line-height: 30px
}

.wechat-tips span.en {
	width: 240px
}

.wechat-tips img {
	margin-bottom: 13px;
	width: 50px
}

@media ( min-width :420px) {
	.wechat-tips span {
		margin-right: 15px
	}
	.wechat-tips span.en {
		margin-bottom: -20px;
		width: auto
	}
	.wechat-tips img {
		margin-right: 20px
	}
}