@import  "reset.css";
html,body{
    height: 100%;
    width: 100%;
}
body{
    overflow: hidden;
    position: absolute;
}
img{
    border:none;
}
#loading {
    display:block;
    background:#1a1a1a url(../images/loading.gif) center no-repeat;
    width:100%;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:999999;
}
#loading p {
    width:100%;
    height:2.1333rem;
    text-align:center;
    position:absolute;
    top:50%;
    margin-top:-0.64rem;
    left:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:1.5em;
    color:#999;
    z-index:999999999;
}
.bigbox{
    width: 100%;height: 100%;overflow:hidden;transition: 1s;
}
.big{
    float: left;width: 100%;height: 100%;
}
.logo{
    position: absolute;top:0.682666rem;left:0.469333rem;width: 3.626666rem;height: 4.05333rem;z-index: 1;
}

/*首页*/
.index{
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
}
.start{
    position:absolute;width: 6.4rem;height: 2.816rem;left:5rem;bottom:1.24666rem;
}

/*规则页面*/
.rule{
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../images/rule.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
}
.go{
    width:3.2rem;height:2.005333rem;position: absolute;left:6.4rem;bottom:2.65333rem;
}

.line{
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../images/content.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
}
.hand{
    position: absolute;bottom:1.7rem;left:5.33333rem;
    -webkit-animation: moveUpDown 1s infinite;
    height: 2.517333rem;
    width:2.005333rem;
}
@-webkit-keyframes moveUpDown {
    0% { -webkit-transform: translateY(0.85333rem);}
    100% { -webkit-transform: translateY(0);}
}

/*content*/
 .mack{
    width: 100%;height: 100%;background:rgba(0,0,0,0);position: absolute;top: 0;left: 0;z-index:10;
 }
  .mack1{
    width: 100%;height: 100%;background:rgba(0,0,0,0.8);display:none;position: absolute;top: 0;left: 0;z-index:10;
 }
.error{display: none;}
.error img{
    width: 100%;height: 100%;position: absolute;top: -3rem;left: 0;z-index:10; 
    -webkit-animation: bounceIn 1s .2s ease both;
}
.error .err{width:2.986rem;height: 2.986rem;position: absolute;top:20rem;left:6.34666rem;z-index:10;}
.content{
    width: 100%;
    height: 100%;
    position: absolute;
    background-image: url(../images/content.jpg);
    background-repeat: no-repeat;
    background-position: 0px 0px;
    background-size: 100% 100%;
    overflow:hidden; 
}
.success{display: none;}
.success img{
    width: 100%;height: 100%;position: absolute;top: -3rem;left: 0;z-index:10;
    -webkit-animation: bounceIn 1s .2s ease both;
}
.success .succ{width: 9.216rem;height: 2.21866rem;position: absolute;top:20rem;left:3.34666rem;z-index:10;}
@-webkit-keyframes bounceIn{
    0%{opacity:0;-webkit-transform:scale(.3)}
    50%{opacity:1;-webkit-transform:scale(1.05)}
    70%{-webkit-transform:scale(.9)}
    100%{-webkit-transform:scale(1)}
}

.nav{position:absolute;top:1.28rem;left: 0}
.one{width: 42.487466rem;height: 6.912rem;float: left}
#ul1{position: absolute;top: 1.28rem;}
#ul1 li{
    width: 5.29066rem;height: 6.912rem;float: left;
    display: flex;justify-content: center;align-items: center;
}
.biao{
    position: absolute;top: 8.74666rem;left: 4.69333rem;width:7.338666rem;height:4.77866rem;
}
.time{
    position: absolute;top:9.6rem;left:5.290666rem;width:6.058666rem;height:3.2rem;font-family: '微软雅黑';font-size: 1.49333rem;
    font-weight: bold;text-align: center;line-height: 3.2rem;
}
.list{
    position: absolute;width: 16rem;height:11.52rem;top: 13.65333rem;left: 1.70666rem;
}
.list li{
    margin-top: 0.682666rem;
}
.laba{
    width: 3.2rem;height: 2.645333rem;
}
.list_img{
    width: 9.642666rem;height: 2.858666rem;
}


 /*over页面*/
.end {
    width:100%;
    height: 100%;
    background-color: #00b5ee;
    position:absolute;
    top:0;
    left:0;
    z-index: 9;
    display: none;
}
.end span:nth-child(1) {
    width: 100%;
    height: 100%;
    background: url(../images/end_bg.png) top center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-animation:shake 20s .2s linear infinite alternate;
}
@-webkit-keyframes shake{
0%,100%{-webkit-transform:translateX(0);}
10%,30%,50%,70%, 90%{-webkit-transform:translateX(-8px);}
20%,40%,60%,80%{-webkit-transform:translateX(8px);}
}
.end span:nth-child(2) {
    width: 11.776rem;
    height: 13.866rem;
    background: url(../images/great.png) top center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 18.74%;
    left: 2rem;
    -webkit-animation:titlePulse .8s .5s ease both;
}
@-webkit-keyframes titlePulse{
0%{opacity:0;-webkit-transform:scale(0.2)}
60%{opacity:1;-webkit-transform:scale(1.5)}
100%{opacity:1;-webkit-transform:scale(1)}
}
.end h4:nth-child(3) {
    width: 2.98666rem;
    height: 2.98666rem;
    background: url(../images/btn_onceMore.png) top center no-repeat;
    background-size: 100% 100%;
    position: absolute;
    bottom: 2.3rem;
    left: 6.06rem;
    z-index: 5;
    -webkit-animation: rotate360 10s linear infinite;
}
@-webkit-keyframes rotate360 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}