@import "reset.css";
body{   
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
}
#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:50px;
    text-align:center;
    position:absolute;
    top:50%;
    margin-top:-15px;
    left:0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:1.5em;
    color:#999;
    z-index:999999999;
}

/*首页*/
.index{
    display:block;background:#1a1a1a url('../images/main.png') center no-repeat;
    background-size: 100% 100%;
    width:100%;height:100%;position:fixed;
    top:0;left:0;
}
.logo{margin:5px;}
.start{
    position:absolute;bottom:1.705211rem;left:5.4666rem;
}

/*规则页*/
.rule{
    display:block;background:#1a1a1a url('../images/guize.jpg') center no-repeat;
    width:100%;height:100%;position:fixed;
    background-size: 100% 100%;
    top:0;left:0;right:0;bottom:0;
}
.guize{
    position:absolute;top:1.706666rem;left:1.749333rem;width:12.458666rem;height:19.66933rem;
}
.go{
    position:absolute;bottom:0.85333rem;left:6.3945433rem;
}
.hand{
    position: absolute;bottom:1.0666rem;left:5.3333rem;-webkit-animation:moveUpDown 1s infinite;
    height: 2.517333rem;width:2.00533rem;
}

@-webkit-keyframes moveUpDown {
    0% { -webkit-transform: translateY(20px);}
    100% { -webkit-transform: translateY(0);}
}

/*内容页面*/
.content{
    display:block;background:#1a1a1a url('../images/guiz.png') center no-repeat;
    width:100%;height:100%;position:fixed;
    background-size: 100% 100%;
    top:0;left:0;right:0;bottom:0;
}
.can{
    position: absolute;top:2.56rem;left:3.797333rem;z-index:10;width:8.53333rem;height:0.85333rem;
}
.map{
    position: absolute;top:0.85333rem;left:1.92rem;width:12.245333rem;height: 10.24rem;
}
.laba{
    position: absolute;top:7.89333rem;left:2.98666rem;z-index:1;width:2.176rem;height:2.176rem;
}
.left,.right{
    position:absolute;top:6.4rem;width:1.92rem;height: 2.688rem;
}
.left{left:0.42666rem;}
.right{right:0.42666rem;}
.tab1 img{
    position: absolute;display:none;
}
.tab1 img:nth-of-type(1){
    left:4.522666rem;top:5.54666rem;width:7.125333rem;height:3.84rem;
}
.tab1 img:nth-of-type(2){
    left:6.058666rem;top:4.69333rem;width:4.465333rem;height:4.465333rem;
}
.tab1 img:nth-of-type(3){
    left:5.76rem;top:4.69333rem;width:4.821333rem;height:4.821333rem;
}
.tab1 img:nth-of-type(4){
    left:4.52266rem;top:5.54666rem;width:7.46666rem;height:3.712rem;
}
.tab1 .active{
    display: block;
}
.huihua{
    position:absolute;top:11.94666rem;left:0.597333rem;width:14.9333rem;height:8.5333rem;
}
canvas{
    position:absolute;top:12.314666rem;left:2.662666rem;display: none;background:rgba(0,0,0,0);z-index: 5;
}
.tab2 img{
    position: absolute;display:none;z-index:1;
}
.tab2 img:nth-of-type(1){
    left:3.38666rem;top:13.65333rem;width:9.096333rem;height:4.418666rem;
}
.tab2 img:nth-of-type(2){
    left:4.864rem;top:13.184rem;width:5.71333rem;height:5.71333rem;
}
.tab2 img:nth-of-type(3){
    left:4.821333rem;top:13.056rem;width:6.026666rem;height:6.026666rem;
}
.tab2 img:nth-of-type(4){
    left:4.26666rem;top:14.208rem;width:7.722666rem;height:3.968rem;
}
.tab2 .active{
    display:block;
}
.active{
    display:block;
}
.tisi div{
    display:none;
}
.tisi .active{
    display:block;
}
.tisi .hide{
    display:none;
}

.tab3{
    position:absolute;bottom:0px;
}
.tab3 img{
    margin-left:0.7413333rem;transition:0.3s;-webkit-transform-origin:0% 3.370666rem;
}
.tab3 img:nth-of-type(1),.tab3 img:nth-of-type(6){
        height: 2.8rem;width: 2.0rem;
}
.color{
    height: 2.8rem;width: 2.0rem;
}
.MyPix{position:absolute;width:280px;height:170px;display:none;z-index:10;}
.save img:nth-of-type(1),.save img:nth-of-type(2),.save img:nth-of-type(3),.save img:nth-of-type(4){
    top:12.714666rem;left:2.68666rem;
}
.warning{
    width:8.5333rem;height:1.28rem;line-height:1.28rem;border-radius:5px;position:absolute;
    top:10.538666rem;left:3.712rem;background:#fcf8e3;color:#8a6d3b;text-align:center;
    border:1px solid #faebcc;display:none;font-size:0.85333rem;font-family:'微软雅黑';
}
.hand1{
    position:absolute;bottom:10.2rem;left:2.98666rem;z-index:5;-webkit-animation:moveUpLeft 1s infinite;
}
.hand2{
    position:absolute;bottom:10.1rem;left:4.69333rem;z-index:5;-webkit-animation:moveUpLeft 1s infinite;
}
.hand3{
    position:absolute;bottom:10.8rem;left:7.808rem;z-index:5;-webkit-animation:moveUpLeft 1s infinite;
}
.hand4{
    position:absolute;bottom:6.192rem;left:4.010666rem;z-index:5;-webkit-animation:moveUpDown 1s infinite;
}
.jiantou{
    position:absolute;bottom:11.8rem;left:4.010666rem;z-index:5;
}
.jiantou2{
    position:absolute;bottom:12.2rem;left:5.3333rem;z-index:5;
}
.jiantou3{
    position:absolute;bottom:12rem;left:8.362666rem;z-index:5;
}
.jiantou4{
    position:absolute;bottom:7.8rem;left:3.88266rem;z-index:5;
}

@-webkit-keyframes moveUpLeft{
    0% { -webkit-transform: translateX(20px);}
    100% { -webkit-transform: translateY(0);}
}
@-webkit-keyframes moveUpDown{
    0% { -webkit-transform: translateY(20px);}
    100% { -webkit-transform: translateY(0);}
}

.timer{
    position:absolute;top:175px;left:328px;-webkit-animation:moveScale 1s infinite;display:none;
}
@-webkit-keyframes moveScale{
    0% { -webkit-transform: scale(1.3);}
    100% { -webkit-transform: translateY(0);}
}