*{margin: 0;padding: 0}
html,body{margin: 0 auto;width: 100%;height: 100%;top:0;bottom:0;position: absolute;}

.loading{position:absolute;top: 0;left: 0; width:100vw;height:100vh;background:url('../images/loading.gif') no-repeat;background-size:100% 100%;z-index: 9999999;}
.loading_img{position: absolute;left:32vmin;top:39vmin;width: 22vmin;}
.load_wave{
    position:absolute;top:98vmin;left:33vmin;width: 35.26vmin;height:5px;text-align: center;color: #353232;font-size: 26px;font-weight: bold;
}
.load_val{
    position:absolute;top:0vmin;left:0;width: 0;height:5px;background-color: #353232;
}

/*音乐*/
/*.music_blk{z-index:999;position:fixed;bottom:35px;left:10px;display: none}
.music{width:30px;height:30px;background:url('../images/music_on.png') no-repeat;background-size:100% 100%;position: absolute}
.music_on{
    -webkit-animation:rotate 1.5s linear infinite;
    animation:rotate 1.5s linear infinite;
}*/

.video_div{
	display: none;
	width: 100%;
	height: 100%;
}
#video2_1{object-fit: fill};
#page0{
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.page0-bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
}
.page0-top{
    width: 54%;
    height: 49%;
    position: absolute;
    top: 9%;
    left: 24%;
}
.music-box{
	width: 15vmin;
    z-index: 999999;
    position: fixed;
    top: 0;
    left: 0;
}
.music-btn{
	width: 6vmin;
    padding: 3vmin;
    animation: music1 2s linear infinite;
    -webkit-animation: music1 2s linear infinite;
}
.page0-anniu{
    width: 50%;
    height: 11%;
    position: absolute;
    bottom: 20%;
    left: 24%;
    animation: jello 2s linear infinite;
    -webkit-animation: jello 2s linear infinite;
}
#page1{
	display: none;
}
.page1-1{
    width: 45%;
    height: 9%;
    position: absolute;
    bottom: 29%;
    left: 25%;
}
.animation1{
	animation: hand-bling 2s linear;
    -webkit-animation: hand-bling 2s linear;
}
.animation2{
	animation: jello 2s linear infinite;
    -webkit-animation: jello 2s linear infinite;
}
.page1-2{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0%;
    left: 0%;
}
.page1-3{
    width: 45%;
    height: 3.5%;
    position: absolute;
    top: 4%;
    /*left: 24%;*/
    animation: r-to-l 5s linear infinite;
    -webkit-animation: r-to-l 5s linear infinite;
} 
.page1-4{
	width: 27%;
    height: 3.5%;
    position: absolute;
    top: 10%;
    animation: r-to-l 4.5s linear infinite;
    -webkit-animation: r-to-l 4.5s linear infinite;
}
.page1-5{
    width: 39%;
    height: 3.5%;
    position: absolute;
    top: 15%;
    animation: r-to-l 4s linear infinite;
    -webkit-animation: r-to-l 4s linear infinite;
}
.page1-7{
    width: 41%;
    height: 4.5%;
    position: absolute;
    top: 20%;
    animation: r-to-l 3.5s linear infinite;
    -webkit-animation: r-to-l 3.5s linear infinite;
}
.page1-bg{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}

#page2{
	display: none;
	width: 100%;
	height: 100%;
}
.page2{
	width: 100%;
	height: 100%;
}
.page2-1{
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 23%;
    animation: hand-bling 2s linear;
    -webkit-animation: hand-bling 2s linear;
}
.page2-2{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    animation: hand-bling 2s linear;
    -webkit-animation: hand-bling 2s linear;
}
#page3{
	display: none;
}
#page4{
	display: none;
}
#page5{
	display: none;
}
#page6{
	display: none;
}
#page7{
	display: none;
}
#page8{
	display: none;
	width: 100%;
	height: 100%;
}
#page9{
	display: none;
	width: 100%;
	height: 100%;
}
#page10{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
    top: 0;
}
.fuceng{
	width: 100%;
	height: 100%;
}
.page3-bg,.page4-bg,.page5-bg,.page6-bg{
	width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
}
.page3-1,.page4-1,.page5-1,.page6-1{
    width: 46%;
    height: 9%;
    position: absolute;
    bottom: 20%;
    left: 1%;
    animation: jello 2s linear infinite;
    -webkit-animation: jello 2s linear infinite;
}
.page3-2,.page4-2,.page5-2,.page6-2{
    width: 46%;
    height: 9%;
    position: absolute;
    bottom: 20%;
    left: 53%;
    animation: jello 2s linear infinite 0.5s;
    -webkit-animation: jello 2s linear infinite 0.5s;
}
#page7{
	display: none;
}
#page7{
    width: 100%;
    height: 100%;
	display: none;
}
.page7-bg{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
}
.result_page{
	width: 100%;
	height: 100%;
}
.result_anniu{
	width: 69%;
    height: 9%;
    position: absolute;
    bottom: 20%;
    left: 15%;
    z-index: 9;
}
.try_again{
    width: 55%;
    height: 10%;
    position: absolute;
    bottom: 20%;
    left: 22%;
    z-index: 9;
    animation: jello 2s linear;
    -webkit-animation: jello 2s linear;
    
}
.guess_again{
    width: 37%;
    height: 8%;
    position: absolute;
    bottom: 4%;
    left: 8%;
}
.share_people{
    width: 37%;
    height: 8%;
    position: absolute;
    bottom: 4%;
    left: 54%;
}

/*云 右到左 r-to-l*/
@keyframes r-to-l{
	0% {
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
}
100% {
   -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
}
}
@-moz-keyframes r-to-l{
	0% {
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
}
100% {
   -webkit-transform: translateX(-300px);
    transform: translateX(-300px);
}
}

@-webkit-keyframes r-to-l{
	0% {
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
}
100% {
   -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
}
}

@-o-keyframes r-to-l{
	0% {
    -webkit-transform: translateX(500px);
    transform: translateX(500px);
}
100% {
   -webkit-transform: translateX(-250px);
    transform: translateX(-250px);
}
}


/*淡入淡出 闪烁*/
@keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-moz-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-webkit-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}

@-o-keyframes hand-bling{
	0% {
    opacity: 0;
}
100% {
    opacity: 1;
}
}


@keyframes jello {
	70% {
	    transform:rotateZ(0deg);
	}
  	80% {
	    transform:rotateZ(3deg);
	}
	90% {
	    transform:rotateZ(-3deg);
	}
	100% {
	    transform:rotateZ(0deg);
	}
 
}

/*音乐动*/
@keyframes music1{
	0% {
    	transform: rotate(0);
	}
	33% {
		    transform: rotate(-10deg);
	}
	66%{
		transform: rotate(10deg);
	}
	100% {
	    transform: rotate(0);
	}
}
@-webkit-keyframes {
	0% {
    	transform: rotate(0);
	}
	33% {
		    transform: rotate(-10deg);
	}
	66%{
		transform: rotate(10deg);
	}
	100% {
	    transform: rotate(0);
	}
}