/*音乐*/
.music_blk{z-index:999;position:fixed;right:5px;top:5px;display: none}
.music{display:block;width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;}

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.loadWrap{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/loading.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.l_1{
    position: absolute;
    width: 20%;
    height: 13%;
    left: 40%;
    top: 40%;
    background-image: url(../images/loading.gif);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.page0{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    contain:strict;
}
.p0_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 10;
    animation: ani_scale 2s ease-in both;
    -webkit-animation: ani_scale 2s ease-in both;
    will-change: transform;
}
@keyframes ani_scale{
    0%{
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
    99%{
        transform: scale(4);
        -webkit-transform: scale(4);
        opacity: 1;
    }
    100%{
        transform: scale(4);
        -webkit-transform: scale(4);
        opacity: 0;
    }
}
@-webkit-keyframes ani_scale{
    0%{
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 1;
    }
    99%{
        transform: scale(4);
        -webkit-transform: scale(4);
        opacity: 1;
    }
    100%{
        transform: scale(4);
        -webkit-transform: scale(4);
        opacity: 0;
    }
}
.p0_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 9;
    animation: ani_scale 3s ease-in both;
    -webkit-animation: ani_scale 3s ease-in both;
    will-change: transform;
}
.p0_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 8;
    animation: train_move 1s linear both;
    -webkit-animation: train_move 1s linear both;
    will-change: transform;
}
@keyframes train_move{
    0%{
        transform: translate3d(0%,0,0) scale(1);
        -webkit-transform: translate3d(0%,0,0) scale(1);
    }
    99%{
        transform: translate3d(-80%,-25%,0) scale(2);
        -webkit-transform: translate3d(-80%,-25%,0) scale(2);
        z-index: 10;
        opacity: 1;
    }
    100%{
        transform: translate3d(-80%,-25%,0) scale(2);
        -webkit-transform: translate3d(-80%,-25%,0) scale(2);
        z-index: 10;
        opacity: 0;
    }
}
@-webkit-keyframes train_move{
    0%{
        transform: translate3d(0%,0,0) scale(1);
        -webkit-transform: translate3d(0%,0,0) scale(1);
    }
    99%{
        transform: translate3d(-80%,-25%,0) scale(2);
        -webkit-transform: translate3d(-80%,-25%,0) scale(2);
        z-index: 10;
        opacity: 1;
    }
    100%{
        transform: translate3d(-80%,-25%,0) scale(2);
        -webkit-transform: translate3d(-80%,-25%,0) scale(2);
        z-index: 10;
        opacity: 0;
    }
}
.p0_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.4.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 7;
    animation: ani_scale 4s ease-in both;
    -webkit-animation: ani_scale 4s ease-in both;
    will-change: transform;
}
.p0_5{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.5.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 6;
    animation: plane_move 1s linear both;
    -webkit-animation: plane_move 1s linear both;
    will-change: transform;
}
@keyframes plane_move{
    0%{
        transform: scale(1) translate3d(0,0,0);
        opacity: 1;
    }
    99%{
        transform: scale(2) translate3d(50%,0,0);
        z-index: 10;
        opacity: 1;
    }
    100%{
       transform: scale(2) translate3d(50%,0,0);
       z-index: 10;
       opacity: 0;
    }
}
.p0_6{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.6.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 5;
    animation: ani_scale 5s ease-in both;
    -webkit-animation: ani_scale 5s ease-in both;
    will-change: transform;
}
.p0_7{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p0.7.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: 4;
    animation: ani_scale 6s ease-in both;
    -webkit-animation: ani_scale 6s ease-in both;
    will-change: transform;
}
.page1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 0;
    animation: fadeIn 2s linear both;
    -webkit-animation: fadeIn 2s linear both;
    contain:strict;
}
.p1_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
/*
.p1_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.4.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
*/
/*
.p1_5{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.5.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
*/
.p1_6{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.6.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_7{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.7.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_8{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.8.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_click{
    position: absolute;
    width: 40%;
    height: 7.5%;
    left: 29%;
    top: 63%;
}
.page_game{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    contain:strict;
}
.timeW{
    position: absolute;
    width:10%;
    height: 4.5%;
    left: 21%;
    top: 11.24%;
    display: table;
}
.time{
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: white;
}
.scoreW{
    position: absolute;
    width:14%;
    height: 4.5%;
    left: 70%;
    top: 11.24%;
    display: table;
}
.score{
    font-size: 18px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: white;
}
.pg_skip{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/skip.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.pg_skclick{
    position: absolute;
    width: 11%;
    height: 4%;
    left: 88%;
    top: 81%;
}
ul li{
    position: absolute;
    width: 15%;
    height: 9.5%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    list-style: none;
}
ul .zhong{
    background-image: url(../images/words/zhong.png);
}
ul .qiu{
    background-image: url(../images/words/qiu.png);
}
ul .jin{
    background-image: url(../images/words/jin.png);
}
ul .quan{
    background-image: url(../images/words/quan.png);
}
ul .mian{
    background-image: url(../images/words/mian.png);
}
ul .xiao{
    background-image: url(../images/words/xiao.png);
}
ul .gong{
    background-image: url(../images/words/gong.png);
}
ul .ji{
    background-image: url(../images/words/ji.png);
}
ul .shui{
    background-image: url(../images/words/shui.png);
}
ul .an{
    background-image: url(../images/words/an.png);
}
ul .xin{
    background-image: url(../images/words/xin.png);
}
ul .qu{
    background-image: url(../images/words/qu.png);
}
ul .yi{
    background-image: url(../images/words/yi.png);
}
ul .zheng{
    background-image: url(../images/words/zheng.png);
}
ul .quan1{
    background-image: url(../images/words/quan1.png);
}
ul .yi1{
    background-image: url(../images/words/yi.png);
}
ul .dai{
    background-image: url(../images/words/dai.png);
}
ul .jian{
    background-image: url(../images/words/jian.png);
}
ul .ce{
    background-image: url(../images/words/ce.png);
}
ul .qing{
    background-image: url(../images/words/qing.png);
}
ul .shan{
    background-image: url(../images/words/shan.png);
}
ul .da{
    background-image: url(../images/words/da.png);
}
ul .pai{
    background-image: url(../images/words/pai.png);
}
ul .ying{
    background-image: url(../images/words/ying.png);
}
ul .gong1{
    background-image: url(../images/words/gong1.png);
}
ul .jian1{
    background-image: url(../images/words/jian1.png);
}
ul .zhan{
    background-image: url(../images/words/zhan.png);
}
ul .xin1{
    background-image: url(../images/words/xin.png);
}
ul .shi{
    background-image: url(../images/words/shi.png);
}
ul .dai1{
    background-image: url(../images/words/dai1.png);
}
.tip{
    position: absolute;
    width: 100%;
    height:4.5%;
    top: 76.3%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.dt{
    position: absolute;
    width: 90%;
    height:10%;
    top: 84.5%;
    left: 4%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.dw{
    position: absolute;
    width: 13.5%;
    height: 8.5%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.g0,.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10{
    position: absolute;
    width: 100%;
    height: 100%;
}
.g0{
    display: none;
}
.g0 .tip{
    background-image: url(../images/tips/t-1.png);
}
.g0 .dt{
     background-image: url(../images/dt1.png);
}
.g0 .dw{
    left: 20%;
    top: 85.5%;
    background-image: url(../images/d_words/wen.png);
}
.g1{
    display: none;
}
.g1 .tip{
    background-image: url(../images/tips/t-2.png);
}
.g1 .dt{
     background-image: url(../images/dt1.png);
}
.g1 .dw{
    left: 66%;
    top: 85.5%;
    background-image: url(../images/d_words/kang.png);
}
.g2{
    display: none;
}
.g2 .tip{
    background-image: url(../images/tips/t-3.png);
}
.g2 .dt{
     background-image: url(../images/dt2.png);
}
.g2 .dw1{
    left: 56.5%;
    top: 85.5%;
    background-image: url(../images/d_words/gai.png);
}
.g2 .dw2{
    left: 69.5%;
    top: 85.5%;
    background-image: url(../images/d_words/ge.png);
}
.g3{
    display: none;
}
.g3 .tip{
    background-image: url(../images/tips/t-4.png);
}
.g3 .dt{
     background-image: url(../images/dt1.png);
}
.g3 .dw{
    left: 20%;
    top: 85.5%;
    background-image: url(../images/d_words/xiong.png);
}
.g4{
    display: none;
}
.g4 .tip{
    background-image: url(../images/tips/t-5.png);
}
.g4 .dt{
     background-image: url(../images/dt1.png);
}
.g4 .dw{
    left: 50.5%;
    top: 85.5%;
    background-image: url(../images/d_words/fang.png);
}

.g5{
    display: none;
}
.g5 .tip{
    background-image: url(../images/tips/t-6.png);
}
.g5 .dt{
     background-image: url(../images/dt1.png);
}
.g5 .dw{
    left: 66%;
    top: 85.5%;
    background-image: url(../images/d_words/lu.png);
}

.g6{
    display: none;
}
.g6 .tip{
    background-image: url(../images/tips/t-7.png);
}
.g6_t_hand{
    position: absolute;
    width: 15%;
    height: 190%;
    left: 53%;
    top:25%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
.g6 .tip .g6_tclick1{
    position: absolute;
    width: 30%;
    height: 100%;
    left: 35%;
}
.g6 .dt{
     background-image: url(../images/dt1.png);
}
.g6 .dw{
    left:20%;
    top: 85.5%;
    background-image: url(../images/d_words/lv.png);
}

.g7{
    display: none;
}
.g7 .tip{
    background-image: url(../images/tips/t-8.png);
}
.g7 .dt{
     background-image: url(../images/dt1.png);
}
.g7 .dw{
    left:35%;
    top: 85.5%;
    background-image: url(../images/d_words/hu.png);
}

.g8{
    display: none;
}
.g8 .tip{
    background-image: url(../images/tips/t-9.png);
}
.g8 .dt{
     background-image: url(../images/dt2.png);
}
.g8 .dw1{
    left:17%;
    top: 85.5%;
    background-image: url(../images/d_words/san.png);
}
.g8 .dw2{
    left:30%;
    top: 85.5%;
    background-image: url(../images/d_words/da.png);
}
.g9{
    display: none;
}
/*
.g9 .tip{
    background-image: url(../images/tips/t-10.png);
}
*/
.g9 .dt{
     background-image: url(../images/dt3.png);
}
#canvas{
    position: absolute;
    display: none;
}
.pg_result{
    position: absolute;
    width: 20%;
    height: 10%;
    top: 80%;
    left: 4%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.pg_gz1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/gz1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.pg_gz1_hand{
    position: absolute;
    width: 13%;
    height: 8%;
    left: 54%;
    top: 84%;
    background-image: url(../images/hand.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    animation: flash 2s linear infinite alternate;
    -webkit-animation: flash 2s linear infinite alternate;
}
.pg_gz1_click{
    position: absolute;
    width: 39%;
    height: 9%;
    left: 30%;
    top: 82%;
}
.pg_gz2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/gz2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.pg_gz2_click{
    position: absolute;
    width: 31%;
    height: 6%;
    left: 35%;
    top: 82%;
}
.pg_gz3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/gz3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.pg_gz3_click{
    position: absolute;
    width: 32%;
    height: 6%;
    left: 32%;
    top: 29.5%;
}
.page3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    contain:strict;
}
.p3_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.1-1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p3_scoreW{
    position: absolute;
    width: 14%;
    height: 4%;
    left: 51%;
    top: 33.7%;
    display: table;
}
.p3_score{
    font-size: 16px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    color: darkred;
    font-weight: bold;
}
.p3_2{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p3_click1{
    position: absolute;
    width: 45%;
    height: 9%;
    left: 28%;
    top:51%;
}
.p3_click2{
    position: absolute;
    width: 45%;
    height: 9%;
    left: 28%;
    top:59.8%;
}
.p3_click3{
    position: absolute;
    width: 45%;
    height: 9%;
    left: 28%;
    top:68.5%;
}
.p3_3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/p3.4.png)
}
.p3_4{
    position: absolute;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-image: url(../images/pc3.2.png)
}
.p3_rank{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.3.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.rankWrap{
    position: absolute;
    width: 64%;
    height: 53%;
    left: 17%;
    top: 23%;
    overflow-y: scroll;
}
.rank{
    position: relative;
    width: 100%;
    height: 200%;
}
.rank li{
    position: relative;
    list-style: none;
    width: 100%;
    height: 5%;
    overflow: hidden;
}
.rank li div:nth-of-type(1){
    position: relative;
    float: left;
    width: 10%;
    height: 100%;
    text-align: center;
    display: table;
    overflow: hidden;  
}
.rank li div:nth-of-type(1) img{
    position: absolute;
    height: 70%;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}
.rank li div:nth-of-type(2){
     float: left; 
     width: 14%;
     height: 100%;
     text-align: center;
     overflow: hidden;
     position: relative;
}
.rank li div:nth-of-type(2) img{
    position: absolute;
    height: 70%;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    -webkit-transform: translate3d(-50%,-50%,0);
}
.rank li div:nth-of-type(3) {
    display: table; 
    float: left;
     height: 100%;
     width: 52%;
    overflow: hidden;
}
.rank li div:nth-of-type(4){
    height: 100%;
    display: table;
    float: left;  
    width: 24%;
    overflow: hidden;
}

.rank li span {
    font-size: 12px;
    display:table-cell;
    vertical-align: middle;
    text-align: center;
    color:orangered;
}
.p3_rclick{
    position: absolute;
    width:12%;
    height: 7%;
    left: 43%;
    top: 83%;
}