@charset "utf-8";
/* CSS Document */
html, body{
    height:100%;
    padding:0;
    margin:0;
	
}
body{margin:0;width:100%;position:absolute;font-family:arial; overflow:hidden;resize:none; }
img {
	position: absolute;
}
/*xpaker update 20150429*/
#background {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	margin:auto;
}
@-webkit-keyframes left_right {	0%{	 -webkit-transform:rotate(-10deg); } 25%{	 -webkit-transform:rotate(0deg); }	50%{	 -webkit-transform:rotate(10deg); } 75%{	 -webkit-transform:rotate(0deg); } 100%{	 -webkit-transform:rotate(-10deg); }}
   @-moz-keyframes left_right {	0%{	 -moz-transform:rotate(-10deg); } 25%{	 -moz-transform:rotate(0deg); }	50%{	 -moz-transform:rotate(10deg); } 75%{	 -moz-transform:rotate(0deg); } 100%{	 -moz-transform:rotate(-10deg); }}
     @-o-keyframes left_right {	0%{	 -o-transform:rotate(-10deg); } 25%{	 -o-transform:rotate(0deg); }	50%{	 -o-transform:rotate(10deg); } 75%{	 -o-transform:rotate(0deg); } 100%{	 -o-transform:rotate(-10deg); }}
    @-ms-keyframes left_right {	0%{	 -ms-transform:rotate(-10deg); } 25%{	 -ms-transform:rotate(0deg); }	50%{	 -ms-transform:rotate(10deg); } 75%{	 -ms-transform:rotate(0deg); } 100%{	 -ms-transform:rotate(-10deg); }}
        @keyframes left_right {	0%{	 transform:rotate(-10deg); } 25%{	 transform:rotate(0deg); }	50%{	 transform:rotate(10deg); } 75%{	 transform:rotate(0deg); } 100%{	 transform:rotate(-10deg); }}
/*左右摇摆 */
.leftRight:hover { -webkit-animation: left_right 0.5s linear infinite; -moz-animation: left_right 0.5s linear infinite; -ms-animation: left_right 0.5s linear infinite; -o-animation: left_right 0.5s linear infinite; animation: left_right 0.5s linear infinite;} 
/*.leftRight:hover { -webkit-animation: left_right 0.5s linear infinite; } */

.little_scale:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}

#progress_bar{left:10%; top:40%;  width:80%;height:11%;border:3px solid white;background: blue;overflow:hidden;-webkit-box-shadow:0px 0px 30px white;-moz-box-shadow:0px 0px 30px white;-o-box-shadow:0px 0px 30px white;-ms-box-shadow:0px 0px 30px white;box-shadow:0px 0px 30px white;}
#progress{margin-left:1%;margin-top:1%;width:98%;height:80%;background: red;}
#progNum{margin-left:40%; margin-top:3%; text-align:center;color:white;}
#begin_logo{z-index:1000;left:38%; top:32%;width:22%;height:7%;position:absolute;  cursor:pointer;}
#first_logo{z-index:1000;left:10%; top:2%;width:22%;height:7%;position:absolute;  cursor:pointer;}
#second_logo{z-index:1000;left:10%; top:2%;width:22%;height:7%;position:absolute;  cursor:pointer;}
#third_logo{z-index:1000;left:80%; top:90%;width:22%;height:7%;position:absolute;  cursor:pointer;}
#MG1{ z-index:10;width:20%;height:12%;top:73%; left:20%; cursor:pointer;border-radius:10%/20%;}
#MG2{z-index:100; width:13%;height:7%;top:90%; left:74%; cursor:pointer;border-radius:10%/20%;}
#MG3{z-index:100; width:20%;height:11%;top:86%; left:5%; cursor:pointer;border-radius:10%/20%;}
#play{border-radius:10%/20%;-webkit-animation:flash_white 1.1s ease infinite;-webkit-animation:flash_white 1.1s ease infinite;-moz-animation:flash_white 1.1s ease infinite;-o-animation:flash_white 1.1s ease infinite;-ms-animation:flash_white 1.1s ease infinite; animation:flash_white 1.1s ease infinite; }
#MG1:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);-webkit-animation:flash_white 0.99s linear infinite;-moz-animation:flash_white 1.1s ease infinite;-o-animation:flash_white 1.1s ease infinite;-ms-animation:flash_white 1.1s ease infinite; animation:flash_white 1.1s ease infinite; }
#MG2:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);-webkit-animation:flash_white 1.1s ease infinite;-webkit-animation:flash_white 1.1s ease infinite;-moz-animation:flash_white 1.1s ease infinite;-o-animation:flash_white 1.1s ease infinite;-ms-animation:flash_white 1.1s ease infinite; animation:flash_white 1.1s ease infinite; }
#MG3:hover{-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-o-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);-webkit-animation:flash_white 1.1s ease infinite;-webkit-animation:flash_white 1.1s ease infinite;-moz-animation:flash_white 1.1s ease infinite;-o-animation:flash_white 1.1s ease infinite;-ms-animation:flash_white 1.1s ease infinite; animation:flash_white 1.1s ease infinite; }
#replay,#show,#reset,#print,#save{border-radius:10%/20%;}
.xuankuang {border-radius: 100%/100%;}
.xuankuang,#show {-webkit-animation:flash_white 1.1s ease infinite;-webkit-animation:flash_white 1.1s ease infinite;-moz-animation:flash_white 1.1s ease infinite;-o-animation:flash_white 1.1s ease infinite;-ms-animation:flash_white 1.1s ease infinite; animation:flash_white 1.1s ease infinite; }
#reset,#print,#save ,#MG1,#MG2,#MG3{-webkit-animation:flash_white 1.1s ease infinite;-webkit-animation:flash_white 1.1s ease infinite;-moz-animation:flash_white 1.1s ease infinite;-o-animation:flash_white 1.1s ease infinite;-ms-animation:flash_white 1.1s ease infinite; animation:flash_white 1.1s ease infinite; }
#replay{-webkit-animation:flash_white 1.1s ease infinite;-webkit-animation:flash_white 1.1s ease infinite;-moz-animation:flash_white 1.1s ease infinite;-o-animation:flash_white 1.1s ease infinite;-ms-animation:flash_white 1.1s ease infinite; animation:flash_white 1.1s ease infinite; }
#star1{ -webkit-animation:star_shine 1.1s ease infinite; -moz-animation:star_shine 1.1s ease infinite;-o-animation:star_shine 1.1s ease infinite;-ms-animation:star_shine 1.0s ease infinite;animation:star_shine 1.1s ease infinite;}
#star2{ -webkit-animation:star_shine 1.2s ease-in infinite; -moz-animation:star_shine 1.2s ease-in infinite;-o-animation:star_shine 1.2s ease-in infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.2s ease-in infinite;}
#star3{ -webkit-animation:star_shine 1.3s ease-out infinite; -moz-animation:star_shine 1.3s ease-out infinite;-o-animation:star_shine 1.3s ease-out infinite;-ms-animation:star_shine 1.2s ease infinite;animation:star_shine 1.3s ease-out infinite;}
#star4{ -webkit-animation:star_shine 1.4s linear infinite; -moz-animation:star_shine 1.4s linear infinite;-o-animation:star_shine 1.4s linear infinite;-ms-animation:star_shine 1.3s ease infinite;animation:star_shine 1.4s linear infinite;}
#star5{ -webkit-animation:star_shine 1.5s ease-in infinite; -moz-animation:star_shine 1.5s ease infinite;-o-animation:star_shine 1.5s ease infinite;-ms-animation:star_shine 1.4s ease infinite;animation:star_shine 1.5s ease infinite;}
#star6{ -webkit-animation:star_shine 1.6s ease-in-out infinite; -moz-animation:star_shine 1.6s ease-in-out infinite;-o-animation:star_shine 1.6s ease-in-out infinite;-ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.6s ease-in-out infinite;}
#star7{ -webkit-animation:star_shine 1.4s linear infinite; -moz-animation:star_shine 1.4s linear infinite;-o-animation:star_shine 1.4s linear infinite;-ms-animation:star_shine 1.6s ease infinite;animation:star_shine 1.4s linear infinite;}
#star8{ -webkit-animation:star_shine 1.5s ease-in infinite; -moz-animation:star_shine 1.5s ease infinite;-o-animation:star_shine 1.5s ease infinite;-ms-animation:star_shine 1.0s ease infinite;animation:star_shine 1.5s ease infinite;}
#star9{ -webkit-animation:star_shine 1.6s ease-in-out infinite; -moz-animation:star_shine 1.6s ease-in-out infinite;-o-animation:star_shine 1.6s ease-in-out infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.6s ease-in-out infinite;}
#showStar1{ -webkit-animation:star_shine 1.1s ease infinite; -moz-animation:star_shine 1.1s ease infinite;-o-animation:star_shine 1.1s ease infinite;-ms-animation:star_shine 1.2s ease infinite;animation:star_shine 1.1s ease infinite;}
#showStar2{ -webkit-animation:star_shine 1.2s ease-in infinite; -moz-animation:star_shine 1.2s ease infinite;-o-animation:star_shine 1.2s ease infinite;-ms-animation:star_shine 1.3s ease infinite;animation:star_shine 1.2s ease-in-out infinite;}
#showStar3{ -webkit-animation:star_shine 1.3s ease-out infinite; -moz-animation:star_shine 1.3s ease infinite;-o-animation:star_shine 1.3s ease infinite;-ms-animation:star_shine 1.4s ease infinite;animation:star_shine 1.3s ease infinite;}
#showStar4{ -webkit-animation:star_shine 1.4s linear infinite; -moz-animation:star_shine 1.4s ease infinite;-o-animation:star_shine 1.4s ease-in-out infinite;-ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.4s ease-in-out infinite;}
#showStar5{ -webkit-animation:star_shine 1.5s ease-in infinite; -moz-animation:star_shine 1.5s ease-in-out infinite;-o-animation:star_shine 1.5s ease infinite;-ms-animation:star_shine 1.6s ease infinite;animation:star_shine 1.5s ease-in-out infinite;}
#showStar6{ -webkit-animation:star_shine 1.6s ease-in-out infinite; -moz-animation:star_shine 1.6s ease infinite;-o-animation:star_shine 1.6s ease infinite;-ms-animation:star_shine 1.0s ease infinite;animation:star_shine 1.6s ease infinite;}
#showStar7{ -webkit-animation:star_shine 1.1s ease infinite; -moz-animation:star_shine 1.1s ease-in-out infinite;-o-animation:star_shine 1.1s ease-in-out infinite;-ms-animation:star_shine 1.1s ease infinite;animation:star_shine 1.1s ease infinite;}
#showStar8{ -webkit-animation:star_shine 1.2s ease-in infinite; -moz-animation:star_shine 1.2s ease infinite;-o-animation:star_shine 1.2s ease infinite;-ms-animation:star_shine 1.2s ease infinite;animation:star_shine 1.2s ease-in-out infinite;}
#showStar9{ -webkit-animation:star_shine 1.3s ease-out infinite; -moz-animation:star_shine 1.3s ease-in-out infinite;-o-animation:star_shine 1.3s ease infinite;-ms-animation:star_shine 1.3s ease infinite;animation:star_shine 1.3s ease infinite;}
#showStar10{ -webkit-animation:star_shine 1.4s linear infinite; -moz-animation:star_shine 1.4s ease infinite;-o-animation:star_shine 1.4s ease-in-out infinite;-ms-animation:star_shine 1.4s ease infinite;animation:star_shine 1.4s ease-in-out infinite;}
#showStar11{ -webkit-animation:star_shine 1.5s ease-in infinite; -moz-animation:star_shine 1.5s ease infinite;-o-animation:star_shine 1.5s ease infinite;-ms-animation:star_shine 1.5s ease infinite;animation:star_shine 1.5s ease infinite;}
#showStar12{ -webkit-animation:star_shine 1.6s ease-in-out infinite; -moz-animation:star_shine 1.6s ease infinite;-o-animation:star_shine 1.6s ease-in-outinfinite;-ms-animation:star_shine 1.6s ease infinite;animation:star_shine 1.6s ease-in-out infinite;}
#showStar13{ -webkit-animation:star_shine 1.0s ease-in-out infinite; -moz-animation:star_shine 1.0s ease-in-out infinite;-o-animation:star_shine 1.0s ease infinite;-ms-animation:star_shine 1.0s ease infinite;animation:star_shine 1.0s ease infinite;}

/*
xpaker update 20150429
@-webkit-keyframes flash_white
{
	0%{	box-shadow:0px 0px 1px 1px white; }
	50%{box-shadow:0px 0px 1px 3px white;  }
	100%{box-shadow:0px 0px 1px 1px white;  	}
}
@-moz-keyframes flash_white
{
	0%{	box-shadow:0px 0px 1px 1px white; }
	50%{box-shadow:0px 0px 1px 3px white;  }
	100%{box-shadow:0px 0px 1px 1px white;  	}
}
@-o-keyframes flash_white
{
	0%{	box-shadow:0px 0px 1px 1px white; }
	50%{box-shadow:0px 0px 1px 3px white;  }
	100%{box-shadow:0px 0px 1px 1px white;  	}
}
@-ms-keyframes flash_white
{
	0%{	box-shadow:0px 0px 1px 1px white; }
	50%{box-shadow:0px 0px 1px 3px white;  }
	100%{box-shadow:0px 0px 1px 1px white;  	}
}
@keyframes flash_white
{
	0%{	box-shadow:0px 0px 1px 1px white; }
	50%{box-shadow:0px 0px 1px 3px white;  }
	100%{box-shadow:0px 0px 1px 1px white;  	}
}
*/

@-webkit-keyframes star_shine
{
	0%{	-webkit-transform:scale(1) 	 rotate(0deg); }
	50%{-webkit-transform:scale(3)  rotate(45deg); }
	100%{-webkit-transform:scale(1) rotate(0deg); 	}
}
@-moz-keyframes star_shine
{
	0%{	-moz-transform:scale(1) 	 rotate(0deg); }
	50%{-moz-transform:scale(3)  rotate(45deg); }
	100%{-moz-transform:scale(1) rotate(0deg); 	}
}
@-o-keyframes star_shine
{
	0%{	-o-transform:scale(1) 	 rotate(0deg); }
	50%{-o-transform:scale(3)  rotate(45deg); }
	100%{-o-transform:scale(1) rotate(0deg); 	}
}
@-ms-keyframes star_shine
{
	0%{	-ms-transform:scale(1) 	 rotate(0deg); }
	50%{-ms-transform:scale(3)  rotate(45deg); }
	100%{-ms-transform:scale(1) rotate(0deg); 	}
}
@keyframes star_shine
{
	0%{	transform:scale(1) 	 rotate(0deg); }
	50%{transform:scale(3)  rotate(45deg); }
	100%{transform:scale(1) rotate(0deg); 	}
}
#title {-webkit-animation: down_jump 1.0s ease-in-out; -moz-animation: down_jump 1.0s ease-in-out;-o-animation: down_jump 1.0s ease-in-out;-ms-animation: down_jump 1.0s ease-in-out;animation: down_jump 1.0s ease-in-out;}/*文字从上往下掉并有弹跳*/
@-webkit-keyframes down_jump{	0%{	top:-50%; }	60%{top:-3%; }	70%{top:-10%; }	80%{top:-3%; }	90%{top:-8%; }	100%{top:-3%; }}
@-moz-keyframes down_jump{	0%{	top:-50%; }	60%{top:-3%; }	70%{top:-10%; }	80%{top:-3%; }	90%{top:-8%; }	100%{top:-3%; }}
@-o-keyframes down_jump{	0%{	top:-50%; }	60%{top:-3%; }	70%{top:-10%; }	80%{top:-3%; }	90%{top:-8%; }	100%{top:-3%; }}
@-ms-keyframes down_jump{	0%{	top:-50%; }	60%{top:-3%; }	70%{top:-10%; }	80%{top:-3%; }	90%{top:-8%; }	100%{top:-3%; }}
@keyframes down_jump{	0%{	top:-50%; }	60%{top:-3%; }	70%{top:-10%; }	80%{top:-3%; }	90%{top:-8%; }	100%{top:-3%; }}

@-webkit-keyframes left_in{	0%{	left:-50%  }	100%{left:0; }}
@-moz-keyframes left_in{	0%{	left:-50%  }	100%{left:0; }}
@-o-keyframes left_in{	0%{	left:-50%  }	100%{left:0; }}
@-ms-keyframes left_in{	0%{	left:-50%  }	100%{left:0; }}
@keyframes left_in{	0%{	left:-50%  }	100%{left:0; }}

@-webkit-keyframes girl_left_in{	0%{	left:-100%; opacity:0;  }	50%{	left:-100% ; opacity:0; } 60%{	left:-40% ; opacity:0.7; }  100%{left:0;; opacity:1; }}
@-moz-keyframes girl_left_in{	0%{	left:-50%; opacity:0;  }	50%{	left:-50% ; opacity:0; } 60%{	left:-40% ; opacity:0.5; }  100%{left:0;; opacity:1; }}
@-o-keyframes girl_left_in{	0%{	left:-50%; opacity:0;  }	50%{	left:-50% ; opacity:0; } 60%{	left:-40% ; opacity:0.5; }  100%{left:0;; opacity:1; }}
@-ms-keyframes girl_left_in{	0%{	left:-50%; opacity:0;  }	50%{	left:-50% ; opacity:0; } 60%{	left:-40% ; opacity:0.5; }  100%{left:0;; opacity:1; }}
@keyframes girl_left_in{	0%{	left:-50%; opacity:0;  }	50%{	left:-50% ; opacity:0; } 60%{	left:-40% ; opacity:0.5; }  100%{left:0;; opacity:1; }}

@-webkit-keyframes girl_right_in{	0%{	left:100%; opacity:0;  }	50%{	left:100% ; opacity:0; } 60%{	left:40% ; opacity:0.7; }  100%{left:0;; opacity:1; }}
@-moz-keyframes girl_right_in{	0%{	left:50%; opacity:0;  }	50%{	left:50% ; opacity:0; } 60%{	left:40% ; opacity:0.7; }  100%{left:0;; opacity:1; }}
@-o-keyframes girl_right_in{	0%{	left:50%; opacity:0;  }	50%{	left:50% ; opacity:0; } 60%{	left:40% ; opacity:0.5; }  100%{left:0;; opacity:1; }}
@-ms-keyframes girl_right_in{	0%{	left:50%; opacity:0;  }	50%{	left:50% ; opacity:0; } 60%{	left:40% ; opacity:0.5; }  100%{left:0;; opacity:1; }}
@keyframes girl_right_in{	0%{	left:50%; opacity:0;  }	50%{	left:50% ; opacity:0; } 60%{	left:40% ; opacity:0.5; }  100%{left:0;; opacity:1; }}

/*从右边移进 */
.right_in_dis
{-webkit-animation: right_in_ele 1s linear;-moz-animation: right_in_ele 1s linear;-o-animation: right_in_ele 1s linear;-ms-animation: right_in_ele 1s linear;animation: right_in_ele 1s linear;}

@-webkit-keyframes right_in_ele{0%{	left:90% ;opacity:0; }	40%{	left:80%;opacity:0;  } 50%{	left:80%;opacity:0.5;  }60%{	left:75%;opacity:1;  }	100%{ }}
@-moz-keyframes right_in_ele{0%{	left:90%  ;opacity:0;}	40%{	left:80%;opacity:0;  }50%{	left:80%;opacity:0.5;  }60%{	left:75%;opacity:1;  }	100%{ }}
@-o-keyframes right_in_ele{	0%{	left:90%  ;opacity:0;}		40%{	left:80%;opacity:0;  }50%{	left:80%;opacity:0.5;  }60%{	left:75%;opacity:1;  }100%{ }}
@-ms-keyframes right_in_ele{0%{	left:90%  ;opacity:0;}	    40%{	left:80%;opacity:0;  } 50%{	left:80%;opacity:0.5;  }60%{	left:75%;opacity:1;  }100%{ }}
@keyframes right_in_ele{	0%{	left:90%  ;opacity:0; }		40%{	left:80%;opacity:0;  } 50%{	left:80%;opacity:0.5;  }60%{	left:75%;opacity:1;  }100%{ }}

/*向左移出并隐藏*/
.left_out_nodis
{-webkit-animation: left_out 0.5s linear;-moz-animation: left_out 0.5s linear;-o-animation: left_out 0.5s linear;-ms-animation: left_out 0.5s linear;animation: left_out 0.5s linear;}
@-webkit-keyframes left_out{	0%{	 opacity:1; }	100%{left:30%; opacity:0;}}
@-moz-keyframes left_out{	0%{	 opacity:1; }	100%{left:30%; opacity:0; }}
@-o-keyframes left_out{	0%{	opacity:1;  }	100%{left:30%;  opacity:0;}}
@-ms-keyframes left_out{	0%{ opacity:1; }	100%{left:30%; opacity:0; }}
@keyframes left_out{	0%{	opacity:1;  }	100%{left:30%;  opacity:0;}}

.show {-webkit-animation: left_in 0.5s linear;-moz-animation: left_in 0.5s linear;-ms-animation: left_in 0.5s linear;-o-animation: left_in 0.5s linear; animation: left_in 0.5s linear;}
/*.show {-webkit-animation: bigtosmall 4s linear ;-moz-animation: bigtosmall 4s linear;-o-animation: bigtosmall 4s linear;-ms-animation: bigtosmall 4s linear ;animation: bigtosmall 4s linear ;}
@-webkit-keyframes bigtosmall {	0%{	 -webkit-transform-origin:70% 5%;	-webkit-transform:scale(5); }100%{	 -webkit-transform-origin:70% 5%;	-webkit-transform:scale(1); }}
   @-moz-keyframes bigtosmall {	0%{	 -moz-transform-origin:70% 5%;	-moz-transform:scale(5); }100%{	 -moz-transform-origin:70% 5%;	-moz-transform:scale(1); }}
     @-o-keyframes bigtosmall {	0%{	 -o-transform-origin:70% 5%;	-o-transform:scale(5); }100%{	 -o-transform-origin:70% 5%;	-o-transform:scale(1); }}
    @-ms-keyframes bigtosmall {	0%{	 -ms-transform-origin:70% 5%;	-ms-transform:scale(5); }100%{	 -ms-transform-origin:70% 5%;	-ms-transform:scale(1); }}
        @keyframes bigtosmall {	0%{	 transform-origin:70% 5%;	transform:scale(5); }100%{	 transform-origin:70% 5%;	transform:scale(1); }}
*/