*{outline:none;font-family:"Microsoft Yahei";-webkit-tap-highlight-color:transparent;-webkit-appearance: none;-moz-appearance: none;}
body,html{ padding:0; margin:0;width:100%;height:100%;font-weight:normal;font-size:0.875em;background:#bf001d;}
.clearfix { *zoom:1}
.clearfix:before, .clearfix:after { content: ' '; display: table }
.clearfix:after { clear: both; }
ul,li{margin:0;padding:0;list-style:none;list-style-type:none;}

.main{width:100%;height:100%;overflow:hidden;position:relative;}
.page{width:100%;height:100%;overflow:hidden;position:absolute;left:0;top:0;background:url(../images/bg.jpg) no-repeat; background-size:100% 100%;}
.hideimg{opacity:0;}


/***loading 动画***/
#loading{width:100%;height:100%;position:fixed;left:0;top:0;z-index:999999999;text-align:center;background:#bf001d;}
.spinner {
  margin: 60% auto 0;
  width: 150px;
  text-align: center;
}
 
.spinner > div {
  width: 30px;
  height: 30px;
  background-color: #ffffff;
 
  border-radius: 100%;
  display: inline-block;
  -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
  animation: bouncedelay 1.4s infinite ease-in-out;
  /* Prevent first frame from flickering when animation starts */
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
 
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
 
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
 
@-webkit-keyframes bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0.0) }
  40% { -webkit-transform: scale(1.0) }
}
 
@keyframes bouncedelay {
  0%, 80%, 100% {
    transform: scale(0.0);
    -webkit-transform: scale(0.0);
  } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
  }
}

/**page1***/
#page1{z-index:10;font-size:0;}
.top{width:100%;position:absolute;left:0;top:0;}
.top img{width:100%;}
.banner{width:90%;position:absolute;left:5%;top:18%;}
#yaoBox{width:70%;position:absolute;left:15%;top:40%;}
#yaoBox img.circle{width:100%;}
#yaoBox img.shan1{
	width:81%;position:absolute;left:9.7%;top:8%;z-index:60;
    animation: flash 500ms linear 0.8s infinite,rolling1 12.8s linear 0s infinite;
    -webkit-animation:flash 500ms linear 0.8s infinite,rolling1 12.8s linear 0s infinite;
}
#yaoBox img.shan2{
	width:81%;position:absolute;left:9.7%;top:8%;z-index:60;
    animation:rolling1 12.8s linear 0s infinite;
    -webkit-animation: rolling1 12.8s linear 0s infinite;
}
#yaoBox img.hand{
	width:41%;position:absolute;left:29.5%;top:22.2%;z-index:40;
}
.shake{
   animation: swing 0.5s linear 0s infinite;
   -webkit-animation: swing 0.5s linear 0s infinite;
}
.page1-1{width:44.6%;position:absolute;left:27.7%;bottom:5%;}


/***page2***/
#page2{z-index:20;display:none;font-size:0;background:none; background-color:rgba(0,0,0,.5);}
.page2-1{width:99%;font-size:0;position:absolute;left:0.5%;bottom:0;z-index:9999;}
.page2-1 img{width:100%;position:relative;z-index:50;}
.page2-1 img.dai{width:94%;position:absolute;left:3%;bottom:50%;}
.page2-1 img.guang{width:74%;position:absolute;left:13%;bottom:86%;z-index:30;}
.page2-1 img.corn{width:40%;position:absolute;left:30%;top:6%;z-index:40;}
.page2-1 img.star{width:70%;position:absolute;left:15%;top:-22%;z-index:45;}

.active .page2-1{
   animation: fadeInDown 0.5s linear 0s forwards;
   -webkit-animation: fadeInDown 0.5s linear 0s forwards;
}
.active .guang{
   -webkit-transform-origin: center bottom;
   transform-origin: center bottom;
   animation: grownUp 0.6s linear 0.5s forwards,faGuang 2s linear 2.3s infinite;
   -webkit-animation: grownUp 0.6s linear 0.5s forwards,faGuang 2s linear 2.3s infinite;
}
.active .corn{
   animation: fadeInUp 0.6s linear 1.1s forwards,upArrowMovie 2s linear 2.3s infinite;
   -webkit-animation: fadeInUp 0.6s linear 1.1s forwards,upArrowMovie 2s linear 2.3s infinite;
}
.active .star{
   animation: fadeIn 0.6s linear 1.7s forwards/*,faGuang 1s linear 2.3s infinite*/;
   -webkit-animation: fadeIn 0.6s linear 1.7s forwards/*,faGuang 1s linear 2.3s infinite*/;
}


/**iphone4***/
@media only screen
and (min-device-width: 320px)
and (max-device-width: 480px)
and (-webkit-device-pixel-ratio: 2)
and (device-aspect-ratio: 2/3) {
  .banner {
    width: 80%;
    left: 10%;
    top: 19%;
  }
  #yaoBox{width:70%;position:absolute;left:15%;top:40%;}
  #yaoBox img.hand{
	  width:41%;position:absolute;left:29.5%;top:22.2%;z-index:40;
  }
 .page1-1{width:40%;position:absolute;left:30%;bottom:4%;}
 .page2-1{width:90%;left:5%;}
}

/***雪花**/
@keyframes mysnow{  
	0%{  
		bottom:100%;  
		opacity:1;  
	}  
	50%{  
		opacity:1;  
		transform: rotate(180deg);  
	}  
	100%{  
		transform: rotate(0deg);  
		opacity: 0;  
		bottom:15%;  
	}  
}  
@-webkit-keyframes mysnow{  
	0%{  
		bottom:100%;  
		opacity:1;  
	}  
	50%{  
		opacity:1;  
		-webkit-transform: rotate(180deg);  
	}  
	100%{  
		-webkit-transform: rotate(0deg);  
		opacity: 0;  
		bottom:15%;  
	}  
}
.roll{  
	position:absolute;  
	animation: mysnow 4s ease-out;  
	-webkit-animation: mysnow 4s ease-out;  
	bottom:100%;
	width:80px;
}
.roll1{  
	position:absolute;  
	animation: mysnow 3s ease-out;  
	-webkit-animation: mysnow 3s ease-out;  
	bottom:100%;
	width:40px;
}