body { font: 12px "Helvetica Neue",Helvetica,STHeiTi,sans-serif; background: #faf9fc; }
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);}
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: rgba(235,235,235,1);
}

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

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

.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 rgba(221,221,221,1); height: 5px;}
.footer .about-link{ color:rgba(221,221,221,1); 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;
}