*, body, html {
    margin: 0;
    padding: 0 
}
a, body, html {
    color: #00b7c3 
}
h1, h2 {
    text-shadow: 0 0 0.25rem rgba(254,254,255,.85);
    visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0) 
}
#canvas, #container {
    width: 100%;
    height: 100%;
    background: url("../images/bg.gif") ;
    /*background-size: 100% auto;*/
}
@media screen and (max-width:1440px) {
   #canvas, #container {
    width: 100%;
    height: 100%;
    background: url("../images/bg.gif") ;
   /* background-size: 1440px auto;*/
}
}
#canvas, #stats {
    position: absolute;
    z-index: 10 
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -o-box-sizing: border-box;
    box-sizing: border-box 
}
body, html {
    font: 0.16rem/1.4 Lato, sans-serif;
    -webkit-font-smoothing: antialiased;
    font-smoothing: antialiased 
}
body {
    overflow: hidden;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none 
}
h1 {
    font: 2.75em Cinzel, serif;
    font-weight: 400;
    letter-spacing: .35em 
}
h2 {
    font: 1.45em Cinzel, serif;
    font-weight: 400;
    letter-spacing: .5em;
    text-transform: lowercase 
}
[class^=letter] {
    -webkit-transition:opacity 3s ease;
    -moz-transition:opacity 3s ease;
    transition:opacity 3s ease 
}
.letter-0 {
    transition-delay: .2s 
}
.letter-1 {
    transition-delay: .4s 
}
.letter-2 {
    transition-delay: .6s 
}
.letter-3 {
    transition-delay: .8s 
}
.letter-4 {
    transition-delay: 1s 
}
.letter-5 {
    transition-delay: 1.2s 
}
.letter-6 {
    transition-delay: 1.4s 
}
.letter-7 {
    transition-delay: 1.6s 
}
.letter-8 {
    transition-delay: 1.8s 
}
.letter-9 {
    transition-delay: 2s 
}
.letter-10 {
    transition-delay: 2.2s 
}
.letter-11 {
    transition-delay: 2.4s 
}
.letter-12 {
    transition-delay: 2.6s 
}
.letter-13 {
    transition-delay: 2.8s 
}
.letter-14 {
    transition-delay: 3s 
}
h1.transition-in, h2.transition-in {
    visibility: visible 
}
h1 [class^=letter], h2 [class^=letter] {
    opacity: 0 
}
h1.transition-in [class^=letter], h2.transition-in [class^=letter] {
    opacity: 1 
}
#container {
    display: table;
    position: absolute;
    z-index: 20;
    text-align: center;
    cursor: context-menu;
}
#container>div {
    display: table-cell;
    vertical-align: middle 
}
#container p {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0.25rem;
    font-size: .8em;
    letter-spacing: .1em;
    font-weight: 300;
    color: #76747a;
    -webkit-font-smoothing: subpixel-antialiased;
    font-smoothing: subpixel-antialiased 
}
#container p strong {
    color: #b3abc5;
    font-size: 5em 
}
#container p span {
    font-size: .75em;
    padding: 0 0.02rem 
}
#canvas {
    top: 0;
    left: 0;
    cursor: none 
}
#stats {
    left: 0.1rem;
    top: 0.1rem 
}
.dg.ac {
    z-index: 100!important 
}
#container div p strong a {
    color: #999;
    font-size: 0.15rem 
}
body, td, th {
    font-family: Lato, sans-serif 
}
a:active, a:hover, a:link, a:visited {
    text-decoration: none 
}
img.img1s {
    /* margin-top: 0.7rem; */
    height: 0.6rem;
}
img.img1s1 {
    width: 5rem;
    display: block;
    margin: 0.1rem auto;
}
.center.bottms {
} 
.l1 {
    width: 3.42rem;
    height: 0.52rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/9.png) center top no-repeat;
}
.l1:hover {
    width: 3.42rem;
    height: 0.52rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/10.png) center top no-repeat;
}
.l0{
    width: 3.42rem;
    height: 0.41rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/1.png) center top no-repeat;
    
}
.l0,.l1,.l2,.l3,.l4{
   background-size: auto 100% !important; 
}
.l0:hover  {
    width: 3.42rem;
    height:  0.41rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/2.png) center top no-repeat;
}
.l2 {
    width: 3.42rem;
    height: 0.52rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/3.png) center top no-repeat;
}
.l2:hover {
    width: 3.42rem;
    height: 0.52rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/4.png) center top no-repeat;
}
.l3 {
    width: 3.42rem;
    height: 0.52rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/5.png) center top no-repeat;
}
.l3:hover {
    width: 3.42rem;
    height: 0.52rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/6.png) center top no-repeat;
}
.l4 {
    width: 3.42rem;
    height: 0.52rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/r3.png) center top no-repeat;
}
.l4:hover {
    width: 3.42rem;
    height: 0.52rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/r2.png) center top no-repeat;
}
@media screen and (max-width:640px) {
    * {
        width: 100%;
        padding: 0;
        margin: 0;
   }
    img {
        width: 100%;
   }
    a {
        width: 90%;
   }
}
@media screen and (max-width:414px) {
    .img1s{
        width: 80%;
   }
    .img2s{
        width: 50%;
   }
    .bottms{
        margin-bottom: 0.3rem;
   }
}
.xiaoqi{
    width:100%;
    height:2rem;
}
body{
    width: 80%vw;
}
img#img2s:hover {
    margin-top: 0.01rem;
    margin-left: 0.01rem;
}
div a div {
   width: 100%;
   height: 100%;
}


@media screen and (max-width: 765px) {
.l1 {
    width: 6rem;
    height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/9.png) center top no-repeat;
}
.l1:hover {
    width: 6rem;
        height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/10.png) center top no-repeat;
}
.l0{
    width: 7.5rem;
    height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/1.png) center top no-repeat;
}
.l0,.l1,.l2,.l3,.l4{
   background-size: auto 100% !important; 
}
.l0:hover  {
    width: 6rem;
        height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/2.png) center top no-repeat;
}
.l2 {
    width: 6rem;
    height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/3.png) center top no-repeat;
}
.l2:hover {
    width: 6rem;
        height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/4.png) center top no-repeat;
}
.l3 {
    width: 6rem;
    height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/5.png) center top no-repeat;
}
.l3:hover {
    width: 6rem;
        height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/6.png) center top no-repeat;
}
.l4 {
    width: 6rem;
        height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/r3.png) center top no-repeat;
}
.l4:hover {
    width: 6rem;
    height: 0.9rem;
    text-align: center;
    margin: 0 auto;
    background: url(../images/r2.png) center top no-repeat;
}

img.img1s {
    /* margin-top: 0.7rem; */
    height: 0.79rem;
    width: 8rem;
}
img.img1s1 {
    width: 9rem;
    display: block;
    margin: 0.1rem auto;
}
 }