*{margin: 0;padding: 0;border: 0;}
html,body{height: 100%}

.music{position: fixed; top: 3vh; right: 4vw; z-index: 5; width: 15vw;
height: 15vw; border: 4px solid #ccc; border-radius: 50%; }

.music img{ position: absolute; top: 0px; right: 0px; left: 0px; bottom: 0px; margin: auto; width: 85%;;}
.music img.play{
	-webkit-animation: music_disc 4s linear infinite;
		animation: music_disc 4s linear infinite;
}
@keyframes music_disc{
	0%{ -webkit-transform: rotate(0deg);
			transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);
			transform: rotate(360deg);}
}
@-webkit-keyframes music_disc{
	0%{ -webkit-transform: rotate(0deg);
			transform: rotate(0deg);}
	100%{-webkit-transform: rotate(360deg);
			transform: rotate(360deg);}
}
.page{height: 100%; position: absolute; width: 100%; }
.page .bg{ position: absolute;width: 100%;height: 100%;}
#page1 {display:block; }
#page1 .bg{ background:url(../images/p1_bg.png) no-repeat center center;
background-size: 100%; }

#page1 .p1_shan{ width: 80vw; height: 35vh; position: absolute; display: none ;
top:10vh;right: 0; left: 0; background: url(../images/bg1_shan.png) no-repeat center center; background-size:100%; margin: auto ;}
#page1 .p1_zong_max{width: 35vw; height: 15vh; position: absolute; display: none ;
top:8vh ; right:9vw;   background: url(../images/p1_zong_big0.png) no-repeat center center; background-size:100%; }
#page1 .p1_zong_max .p1_reqi_max{left:0;right:0;margin: auto; position: absolute; width:10vw ; height:15vh ; }

#page1 .p1_zong_min{width: 20vw; height: 10vh; position: absolute; display: none ;
top:8vh ;left:10vw;   background: url(../images/p1_zong_min0.png) no-repeat center center; background-size:100%; }
#page1 .p1_zong_min .p1_reqi_min{left:0;right:0;margin: auto; position: absolute; width:10vw ; height:15vh ; }

#page1 .p1_text{width: 80vw; height: 40vh; position: absolute; display: none ;
top:45vh ;right: 0; left: 0;   background:  url(../images/p1_text.png) no-repeat center center; background-size:100%; margin: auto; }
#page1 .p1_yun{width: 22vw; height:6vh; position: absolute;  display: none;
top:65vh ;right: 0; left:5vw;   background:  url(../images/p1_yun_29.png); animation-name: myfirst;
animation-duration: 8s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-play-state: running;
}
@keyframes myfirst
{
0%   { left:10vw; top:55vh;}
25%  { left:30vw; top:65vh;}
50%  {left:40vw; top:50vh;}
75%  { left:65vw; top:70vh;}
100% {left:80vw; top:55vh;}
}
#page2{  display: none;}
#page2  .bg2{height:100% ; background: url(../images/p2_bg.png) no-repeat center center ; background-size:100% ;}
#page2  .p2_zong{ width: 38vw; height: 50vh; position: absolute;  display: none ;
top:5vh; right: 0; left: 0; background: url(../images/p2-zong.png) no-repeat center center;background-size:100% ; margin: auto ;}
#page2  .p2_text{ width: 60vw; height: 8vh; position: absolute;  display: none ;
top:55vh; right: 0; left: 0; background: url(../images/p2-text.png) no-repeat center center;background-size:100% ; margin: auto ;}
#page2  .p2_chuang_max{ width: 65vw; height: 25vh; position: absolute;  display: none ;
top:65vh; right: 0; left:5vw; background: url(../images/p2-chuang_max.png) no-repeat center center;background-size:100% ; }
#page2  .p2_chuang_min{ width: 30vw; height: 15vh; position: absolute;  display: none ;
top:70vh;   right: 2vw; background: url(../images/p2-chuang_min.png) no-repeat center center;background-size:100%  ;}
#page2  .p2_leaf{ width: 65vw; height: 40vh; position: absolute;  display: none ;
top:58vh; right: 8vw;  background:  url(../images/p2-leaf.png) no-repeat center center;background-size:100% ; }
#page2  .p2_butterfly{ width: 8vw; height: 6vh; position: absolute;  
top:38vh; right: 0;  background:  url(../images/p2_butterfly.png) no-repeat center center;
background-size:100% ; animation-name: mybutterfly;
animation-duration: 5s;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
}
@keyframes mybutterfly{
	0%{ width:2vw ; height:2vh ; right: 0;top:38vh;}
	35%{ width:5vw ;height:4vh ; right:4vw ;top:30vh;}
	70%{ width:8vw ;height:6vh ;right:15vw ; top:25vh;}
	100%{ width:8vw ;height:6vh ; right:30vw ; top:20vh;}
}

#page2  .p2_cloud{ width: 60vw; height: 30vh; position: absolute;  display: none ;
top:60vh;   left:0; background:url(../images/p2-cloud.png) no-repeat center center;background-size:100%  ;
animation-name: mycloud;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-direction: normal;
animation-play-state: running;
}
@keyframes mycloud
{
0%   { left:0; }
25%  { left:10vw; }
50%  {left:20vw; }
75%  { left:30vw; }
100% {left:40vw; }
}