/*音乐*/
.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/p0.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;
    left: 11%;
    top: 20%;
    width: 80.5%;
    height: 15.67%;
    background-image: url(../images/p1.1.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_2{
    position: absolute;
    width: 64%;
    height: 17%;
    left:18%;
    top:43%;
    background-image: url(../images/p1.2.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}
.p1_3{
    position: absolute;
    width: 39.2%;
    height: 6.6%;
    left: 29%;
    top: 67%;
    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: 67%;
}
.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 .kou{
    background-image: url(../images/words/kou.png);
}
ul .ba{
    background-image: url(../images/words/ba.png);
}
ul .ling{
    background-image: url(../images/words/ling.png);
}
ul .nan{
    background-image: url(../images/words/nan.png);
}
ul .xun{
    background-image: url(../images/words/xun.png);
}
ul .hai{
    background-image: url(../images/words/hai.png);
}
ul .shen{
    background-image: url(../images/words/shen.png);
}
ul .zhen{
    background-image: url(../images/words/zhen.png);
}
ul .qian{
    background-image: url(../images/words/qian.png);
}
ul .yu{
    background-image: url(../images/words/yu.png);
}
ul .min{
    background-image: url(../images/words/min.png);
}
ul .zhuan{
    background-image: url(../images/words/zhuan.png);
}
ul .li{
    background-image: url(../images/words/li.png);
}
ul .gai{
    background-image: url(../images/words/gai.png);
}
ul .ge{
    background-image: url(../images/words/ge.png);
}

.tip{
    position: absolute;
    width: 100%;
    height:12.5%;
    top: 64.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{
    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/di-5.png);
}
.g0 .dw{
    left: 29%;
    top: 85.5%;
    background-image: url(../images/d_words/she.png);
}
.g1{
    display: none;
}
.g1 .tip{
    background-image: url(../images/tips/t-2.png);
}
.g1 .dt{
     background-image: url(../images/dt1.png);
}
.g1 .dw1{
    left: 20%;
    top: 85.5%;
    background-image: url(../images/d_words/yi.png);
}
.g1 .dw2{
    left: 35.86%;
    top: 85.5%;
    background-image: url(../images/d_words/jiu.png);
}

.g2{
    display: none;
}
.g2 .tip{
    background-image: url(../images/tips/t-3.png);
}
.g2 .dt{
     background-image: url(../images/dt1.png);
}
.g2 .dw1{
    left: 50.5%;
    top: 85.5%;
    background-image: url(../images/d_words/jiang.png);
}
.g2 .dw2{
    left: 66.5%;
    top: 85.5%;
    background-image: url(../images/d_words/hua.png);
}


.g3{
    display: none;
}
.g3 .tip{
    background-image: url(../images/tips/t-4.png);
}
.g3 .dt{
     background-image: url(../images/di-5.png);
}
.g3 .dw{
    left: 29%;
    top: 85.5%;
    background-image: url(../images/d_words/qian.png);
}
.g4{
    display: none;
}
.g4 .tip{
    background-image: url(../images/tips/t-5.png);
}
.g4 .dt{
     background-image: url(../images/dt1.png);
}
.g4 .dw1{
    left: 50.5%;
    top: 85.5%;
    background-image: url(../images/d_words/da.png);
}
.g4 .dw2{
    left: 66.5%;
    top: 85.5%;
    background-image: url(../images/d_words/xue.png);
}
.g5{
    display: none;
}
.g5 .tip{
    background-image: url(../images/tips/t-6.png);
}
.g5 .dt{
     background-image: url(../images/di-5.png);
}
.g5 .dw{
    left: 29%;
    top: 85.5%;
    background-image: url(../images/d_words/yi.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/dt3.png);
}
.g6 .dw{
    left:64.35%;
    top: 85.5%;
    background-image: url(../images/d_words/cun.png);
}


.g7{
    display: none;
}

.g7 .tip{
    background-image: url(../images/tips/t-8.png);
}

.g7 .dt{
     background-image: url(../images/dt1.png);
}

.g7 .dw1{
    left:50.5%;
    top: 85.5%;
    background-image: url(../images/d_words/jing.png);
}
.g7 .dw2{
    left:66.5%;
    top: 85.5%;
    background-image: url(../images/d_words/ji.png);
}

.g8{
    display: none;
}
/*.g8 .tip{*/
    /*background-image: url(../images/tips/t-9.png);*/
/*}*/
.g8 .dt{
     background-image: url(../images/di-4.png);
}
.g8 .dw{
    width: 10.5%;
    height:7%;
    top: 86%;
}
.g8 .dw1{
    left:13.1%;
    background-image: url(../images/d_words/jiang.png);
}
.g8 .dw2{
    left:44%;
    background-image: url(../images/d_words/jin.png);
}
.g8 .dw3{
    left:54.5%;
    background-image: url(../images/d_words/xing.png);
}
.g8 .dw4{
    left:65%;
    background-image: url(../images/d_words/dao.png);
}
.g8 .dw5{
    left:75%;
    background-image: url(../images/d_words/di.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:81%;
    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: 77%;
}
.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:71%;
}
.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: 30.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:50%;
}
.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%;
}