@import "reset.css";
html,body{
    height: 100%;
    width: 100%;
}
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%;
}

/*首页*/
.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.157rem;height:2.816rem;position: absolute;left:6.4rem;bottom:0.65333rem;
}

/*content页*/
canvas{
    margin-left:1.152rem;margin-top: 0.8533333rem;
}
.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%;
}
.box{
    width: 100%;height: 100%;position: absolute;top:0;left:0;
}
.left0{
     width: 1.152rem;float: left;margin-right:2.816rem;margin-top: 12%;
}
.left0 div{
    z-index: 10;
}
.right0{
     width: 5.54666rem;float: left;margin-top: 12%;
}
.right0 div{
    z-index: 10;
}
.yang{
    width:4.565333rem;height:4.69333rem;margin-bottom: 1.98666rem;margin-left:1.152rem;
}
.yu{
    width:6.272rem;height:3.925333rem;margin-bottom:2.98666rem;;margin-left: 0.426666rem;
}
.ya{
    width: 4.05333rem;height: 5.888rem;margin-left: 1.45066rem;
}
.he{
    width:5.546666rem;height:5.546666rem;margin-bottom:1.34666rem;margin-left:5.54666rem;
}
.cao{
    width:5.546666rem;height:5.54666rem;margin-bottom:1.34666rem;margin-left:5.54666rem;
}
.shui{
    width:5.546666rem;height:5.546666rem;margin-bottom:2.34666rem;margin-left:5.54666rem;
}


.yang1{
    position: absolute;width:4.565333rem;height:4.69333rem;top:1.92rem;left:1.194666rem;
}
.yu1{
    position: absolute;width:6.276rem;height:3.925333rem; top:8.6rem;left: 0.469333rem;
}
.ya1{
    position: absolute;width: 4.05333rem;top:15.512rem;left:1.49333rem;
}
.he1{
    position: absolute;width:5.54666rem;height:5.54666rem;;margin-bottom:0.85333rem;top: 1.92rem;left: 9.514666rem;
}
.cao1{
    position: absolute;width:5.54666rem;;height:5.54666rem;;margin-bottom:0.85333rem;top: 8.77066rem;left:9.514666rem;
}
.shui1{
    position: absolute;width:5.54666rem;;height:5.54666rem;top: 15.70666rem;left: 9.514666rem;
}
.line1{
    width: 0.42666rem;
    height: 8.277333rem;
    border-radius: 5px;
    background: #608fff;
    position: absolute;
    top: 16%;
    left: 45%;
    -webkit-transform: rotate(-44deg);
    display: none;
}
.line2{
    width: 0.42666rem;
    height: 8.656rem;
    border-radius: 5px;
    background: #608fff;
    position: absolute;
    top: 35%;
    left: 46%;
    -webkit-transform: rotate(136deg);
    display:none;
}
.line3{
    width: 0.42666rem;
    height: 12.061333rem;
    border-radius: 5px;
    background: #608fff;
    position: absolute;
    top: 23%;
    left: 43%;
    -webkit-transform: rotate(206deg);
    display: none;
}
.error{
    position:absolute;bottom:0;left:4.864rem;width:5.97333rem;height:5.97333rem;z-index: 20;
    display: none;
}
.error1{
     -webkit-animation:bounceIn 1s .2s ease both;
}
.correct{
      position:absolute;bottom:0;left:4.864rem;width:5.97333rem;height:5.97333rem;z-index: 20;
      display: none;
}
.correct1{
     -webkit-animation:bounceIn 1s .2s ease both;
}
.mack{
    width: 100%;height: 100%;background: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0;display:none;z-index: 999
}
.yes{
    width: 16rem;
    height: 19.41333rem;
    position: absolute;
    top: 0;
    left: 0;   
    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)}
}
.next{
    width: 8.746666rem;
    height: 2.98666rem;
    position: absolute;
    bottom: 5.058666rem;
    left: 3.541333rem;
    z-index: 9999;
    display: none;
}