@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: 59px;
    width:47px;
}
@-webkit-keyframes moveUpDown {
    0% { -webkit-transform: translateY(0.85333rem);}
    100% { -webkit-transform: translateY(0);}
}

/*content*/
.window{
    position: absolute;top:0;left: 0;width: 16rem;height: 22.186666rem;
}

.laba{
    width: 3.072rem;height: 3.072rem;position: absolute;left:3.09333rem;bottom: 0.56rem;display:none;z-index:100;
}
.puppy{
    position: absolute;bottom: 1.2rem;left:6.29333rem;width: 6.485333rem;height: 1.749333rem;display:none;z-index:100;
}
.guang{
    width: 16rem;height: 12.416rem;position: absolute;z-index: 110;display:none;top:1rem;left: 0.121333rem;-webkit-animation:rotatex 4s linear infinite;
}
@-webkit-keyframes rotatex{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(360deg);}
}
#ul1{
    width:11.94666rem;height:15.530666rem;position:absolute; top:6.272rem;left:2.00533rem;
}
#ul1 li{
    width:5.12rem;height:6.4rem; list-style:none;
}
#ul1 img{
    width:5.12rem;height:6.4rem;
}
#ul1 li:nth-child(1){
    position: absolute;top:7.45333rem;left: 1.05333rem;
}
#ul1 li:nth-child(2){
    position: absolute;top:1.05333rem;left: 6.17333rem;
}
#ul1 li:nth-child(3){
    position: absolute;top:7.45333rem;left: 6.17333rem;
}
#ul1 li:nth-child(4){
    position: absolute;top:1.06rem;left: 1.06333rem;
}

#ul2{
    width:11.94666rem;height:14.50666rem;position:absolute; top:0.42666rem;left:2.005333rem;z-index: -1;opacity: 0;
}
#ul2 li{
    width:5.12rem;height:6.4rem; margin:0.42666rem; float:left; list-style:none;
}
#ul2 img{
    width:5.12rem;height:6.4rem;
}

.dog{
    position: absolute;top: 4.77866rem;left:0.42666rem;width: 12.8rem;height:13.056rem; z-index: 110;display: none;
}
.cat{
    position: absolute;top: 4.77866rem;left:0.42666rem;width: 12.8rem;height: 12.58666rem;z-index:110;display: none;
}
.tuzi{
    position: absolute;top: 4.77866rem;left:0.42666rem;width: 12.8rem;height:12.714666rem;z-index: 110;display: none;
}
.egg{
    position: absolute;top: 4.77866rem;left:0.42666rem;width: 12.8rem;height: 13.44rem;z-index: 110;display: none;
}
 .yes{
    position: absolute;
    top: 4rem;
    left: 1.56666rem;
    z-index: 9999;
    -webkit-animation: bounceIn 1s .2s ease both;
    display: none;
}
@-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)}
}
 .mack{
    width: 100%;height: 100%;background:rgba(0,0,0,0.8);display:none;position: absolute;top: 0;left: 0;z-index:60;
 }
  .mack1{
    width: 100%;height: 100%;background:rgba(0,0,0,0);display:none;position: absolute;top: 0;left: 0;z-index:100;
 }
 .next{
    position: absolute;bottom:5.18666rem;left:3.584rem;width:9.045333rem;height:2.00533rem;z-index:100;opacity: 0; 
    display: none;-webkit-animation: fadeIn 1s .6s ease both;
 }

 @-webkit-keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}

 /*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);
    }
}