@charset "utf-8";
/* CSS Document */
body {
	font-family: "微軟正黑體";
	margin: 0 auto;
	background-color: #FFF;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	position: absolute;
}

.stage {
	margin: 0 auto;
	position: relative;
	width: 940px;
	height: 644px;
	max-width: 940px;
	max-height: 644px;
	font-family: "微軟正黑體";
	overflow: hidden;
	background-image: url(../images/bgindex.jpg)
}

.stage > div {
    position: absolute;
}
#logo{
	width: 182px;
    height: 154px;
	left: 30px;
	top: 30px;
	z-index:99;
	position: absolute;
	background: url(../images/logoindex.png) no-repeat;
}
#bird1{
	z-index:90;
	width:41px;
	height:34px;
	left:-41px;
	position: absolute;
    background: url(../images/bird1.gif) no-repeat;
	animation-name: fly1;
    animation-duration: 8s;
	animation-delay: 0.8s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes fly1 {
  0%   {left:-41px; top:30px;}
  100%  {left:940px; top:30px;}
}
#bird2{
	z-index:98;
	width:72px;
	height:56px;
	position: absolute;
    background: url(../images/bird2.gif) no-repeat;
	animation-name: fly2;
    animation-duration: 6s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes fly2 {
  0%   {left:-80px; top:160px;}
  100%  {left:940px; top:160px;}
}
#bird3{
	z-index:96;
	width:61px;
	height:52px;
	left:-61px;
	position: absolute;
    background: url(../images/bird3.gif) no-repeat;
	animation-name: fly3;
	animation-delay: 1.3s;
    animation-duration: 7s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
@keyframes fly3 {
  0%   {left:-61px; top:86px;}
  100%  {left:940px; top:86px;}
}
#alertcloud{
	z-index:101;
	width:488px;
	height:172px;
	left:-403px;
	position: absolute;
    background: url(../images/alertcloud2.png) no-repeat;
	animation-name: fly4;
    animation-duration: 3s;
	animation-fill-mode: forwards;
}
@keyframes fly4 {
  0%   {left:-453px; top:10px;}
  100%  {left:450px; top:10px;}
}
#alertcloud p{
	font-size:12pt;
	padding:20px 5px 10px 10px;
	text-align:center;
}
#alertcloud2{
	z-index:102;
	width:410px;
	height:172px;
	left:-403px;
	position: absolute;
    background: url(../images/alertcloud2.png) no-repeat;
	background-size:contain;
	animation-name: fly5;
    animation-duration: 4s;
	animation-fill-mode: forwards;
}

@keyframes fly4 {
  0%   {left:-453px; top:10px;}
  100%  {left:450px; top:10px;}
}
@keyframes fly5 {
  0%   {left:-453px; top:10px;}
  100%  {left:60px; top:10px;}
}
#alertcloud2 p{
	padding:20px 5px 10px 10px;
	text-align:center;
}
#cloud1{
	z-index:97;
	width:120px;
	height:73px;
	left:310px;
	top: 84px;
	position: absolute;
    background: url(../images/cloud.png) no-repeat;
	animation-name: float1;
    animation-duration: 3.6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes float1 {
  0%   {top:84px}
  50%  {top:94px}
  100% {top:84px}
}
#cloud2{
	z-index:80;
	width:69px;
	height:47px;
	left:545px;
	top: 20px;
	position: absolute;
    background: url(../images/cloud2.png) no-repeat;
	animation-name: float2;
    animation-duration: 3.6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes float2 {
  0%   {top:20px}
  50%  {top:30px}
  100% {top:20px}
}
#cloud3{
	z-index:92;
	width:120px;
	height:73px;
	left:740px;
	top: 40px;
	position: absolute;
    background: url(../images/cloud.png) no-repeat;
	animation-name: float3;
    animation-duration: 3.6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes float3 {
  0%   {top:40px}
  50%  {top:50px}
  100% {top:40px}
}
#cloud4{
	z-index:90;
	width:69px;
	height:47px;
	left:840px;
	top: 178px;
	position: absolute;
    background: url(../images/cloud2.png) no-repeat;
	animation-name: float4;
    animation-duration: 3.6s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
@keyframes float4 {
  0%   {top:178px}
  50%  {top:188px}
  100% {top:178px}
}

#s1{
	z-index:100;
	left:197px;
	top: 426px;	
	animation: swing1 ease-in-out 1.5s infinite alternate;
    transform-origin: right center;
}
@keyframes swing1 {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
#s2{
	z-index:100;
	left:240px;
	top: 236px;	
	animation: swing2 ease-in-out 1.8s infinite alternate;
    transform-origin: right bottom;
}
@keyframes swing2 {
    0% { transform: rotate(2deg); }
    100% { transform: rotate(-2deg); }
}
#s3{
	z-index:100;
	left:428px;
	top: 120px;	
	animation: swing3 ease-in-out 2s infinite alternate;
    transform-origin: center bottom;
}
#flash{
	z-index:99;
	width:169px;
	height:242px;
	left:428px;
	top: 120px;	
	background: url(../images/flash.gif) no-repeat;
	animation: swing3 ease-in-out 2s infinite alternate;
    transform-origin: center bottom;
}
@keyframes swing3 {
    0% { transform: rotate(2deg); }
    100% { transform: rotate(-2deg); }
}
#s4{
	z-index:100;
	left:615px;
	top: 156px;	
	animation: swing4 ease-in-out 2.2s infinite alternate;
    transform-origin: left bottom;
}
@keyframes swing4 {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
#s5{
	z-index:100;
	left:605px;
	top: 325px;	
	animation: swing5 ease-in-out 2s infinite alternate;
    transform-origin: left bottom;
}
@keyframes swing5 {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }
}
#s6{
	z-index:100;
	left:593px;
	top: 440px;	
	animation: swing6 ease-in-out 2.52s infinite alternate;
    transform-origin: left center;
}
@keyframes swing6 {
    0% { transform: rotate(2deg); }
    100% { transform: rotate(-2deg); }
}