/*音乐*/
.music_blk{z-index:999;position:fixed;left:5px;top:5px;display: none}
.music{display:block;width:30px;height:30px;background:url('../images/music_on.png?4') no-repeat;background-size:100% 100%;}
/*
.music_on{
            -webkit-animation:rotate 1.2s linear infinite;
            animation:rotate 1.2s linear infinite;
}
@keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
      }
}
@-webkit-keyframes rotate{
    0%{
         -webkit-transform:rotateZ(0deg);
        transform:rotateZ(0deg);
      }
    100%{
        -webkit-transform:rotateZ(360deg);
        transform:rotateZ(360deg);
    }
}
*/
*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.loadWrap{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/load.gif?5);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    z-index: 2;
}
.page1{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p1.jpg?4);
    background-repeat: no-repeat;
    background-size: 100% 100%; 
    z-index: 1;
}
.videoWrap{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0%;
    top: 0%;
}
#video1{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: fill;
}
.hand{
    display: none;
    position: absolute;
    width: 11%;
    height: 8%;
    left: 45%;
    top: 50%; 
    opacity: 0;
    background-image: url(../images/hand.png?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: hand_s 1s linear infinite alternate;
    -webkit-animation: hand_s 1s linear infinite alternate;
}
@keyframes hand_s{
    0%{
        opacity: 0
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes hand_s{
    0%{
        opacity: 0
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}
.page2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p2.jpg?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    contain:style;
}
#canvas{
    position: absolute;
}
.p2_2{
    position: absolute;
    width: 17%;
    height: 9%;
    left: 53%;
    top: 80%;
    background-image: url(../images/p2.2.png?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform-origin: bottom right;
    -webkit-transform-origin: bottom right;
    opacity: 0;
    animation: fadeIn 1s 9s linear both,hand_rotate 1s 9s linear infinite alternate;
    -webkit-animation: fadeIn 1s 9s linear both,hand_rotate 1s 9s linear infinite alternate;
}
@keyframes hand_rotate{
    0%{
        transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
    }
    100%{
        transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
}
@-webkit-keyframes hand_rotate{
    0%{
        transform: rotate(-30deg);
        -webkit-transform: rotate(-30deg);
    }
    100%{
        transform: rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
}
.p2_3{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    animation: fade_out 7s linear both;
    -webkit-animation: fade_out 7s linear both;
}
@keyframes fade_out{
    0%{
        opacity: 1;
    }
    90%{
        opacity: 0.9;
    }
    100%{
        opacity: 0;
    }
}
@-webkit-keyframes fade_out{
    0%{
        opacity: 1;
    }
    90%{
        opacity: 0.9;
    }
    100%{
        opacity: 0;
    }
}
.p2_4{
    position: absolute;
    width:225%;
    height: 144%;
    left: -60%;
    top:-23%;
    background-image: url(../images/end1.png?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    transform-origin: center;
    -webkit-transform-origin: center;
    animation:end_scale 7s linear both;
    -webkit-animation:end_scale 7s linear both;
    will-change: transform;
}
@keyframes end_scale{
    0%{
        transform: scale(1) translateY(0%) translateX(0%);
        -webkit-transform: scale(1) translateY(0%) translateX(0%); 
        opacity: 0;
    }
    20%{
        transform: scale(1) translateY(0%) translateX(0%);
        -webkit-transform: scale(1) translateY(0%) translateX(0%); 
        opacity: 1;
    }
    99%{
        transform: scale(0.1) translateY(40%) translateX(0%);
        -webkit-transform: scale(0.1) translateY(40%) translateX(0%);  
        opacity: 1;
    }
    100%{
        transform: scale(0.1) translateY(40%) translateX(0%);
        -webkit-transform: scale(0.1) translateY(40%) translateX(0%); 
        opacity: 0;
    }
}
@-webkit-keyframes end_scale{
     0%{
        transform: scale(1) translateY(0%) translateX(0%);
        -webkit-transform: scale(1) translateY(0%) translateX(0%); 
        opacity: 0;
    }
    20%{
        transform: scale(1) translateY(0%) translateX(0%);
        -webkit-transform: scale(1) translateY(0%) translateX(0%); 
        opacity: 1;
    }
    99%{
        transform: scale(0.1) translateY(40%) translateX(0%);
        -webkit-transform: scale(0.1) translateY(40%) translateX(0%);  
        opacity: 1;
    }
    100%{
        transform: scale(0.1) translateY(40%) translateX(0%);
        -webkit-transform: scale(0.1) translateY(40%) translateX(0%); 
        opacity: 0;
    }
}
.p2_5{
    position: absolute;
    width:25%;
    height: 14%;
    left: 50%;
    top:26%;
}
.page3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.jpg?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    contain:style;
}
.p3_1{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.1.png?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: fadeIn 2s linear both;
    -webkit-animation: fadeIn 2s linear both;
}
.p3_2{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.2.png?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_click{
    position: absolute;
    width: 52%;
    height: 9%;
    left: 23%;
    top: 52%;
}
.p3_3{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/p3.3.png?6);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.p3_hand{
    position: absolute;
    width: 11%;
    height: 8%;
    left: 68%;
    top: 55%; 
    background-image: url(../images/hand.png?4);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    animation: fadeIn 2s linear both;
    -webkit-animation: fadeIn 2s linear both;
}
.p3_text{
    position: absolute;
    left: 55%;
    top: 41.35%;
    color: white; 
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}