.video-back{
	padding-top:10%;
}

.animationRunZoon{
/*
	width: 600px;
	height: 400px;
	display: block;
	margin: 0 auto;
	border: 1px solid red;
*/

}


#loading{
	width:100%;
	height:100%;
	position:fixed;
	top:0;
	left:0;
	z-index:1000;
	background:#000000 url(../images/guest_loading.gif) no-repeat;
	background-position: center center;
} 


/* 行星動畫 */
#starAni { 
	width:40px; 
	height:40px; 
	margin: 0 auto;
	transform-origin:800% center; /* 	物件畫圓的直徑範圍 */
	position:absolute; 
/*
		margin-top:180px;
		margin-left:350px; 
*/
	top:50%;
	left:20%;
	animation:rotate 210s linear infinite; 
	
}

#starAni:before { 
	content:''; 
	position:absolute; 
	height:100%; 
	width:100%; 
	animation:rotate 70s linear reverse infinite; 
}



#starAni img{
	width: 35px;
	height: auto;
	transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
   
}

#starAni:hover{
	
	cursor: pointer;
}


#starAni:hover img{
	width: 40px;
	height: auto;
}

/* 小牛動畫 */
#cowAni { 
	width:65px; 
	height:65px; 
	margin: 0 auto;
	transform-origin:150%;
	position:absolute; 
	top:40%;
	left:55%;
	animation:rotate 210s linear infinite; 
	animation-direction: reverse;
/* 	background: aqua; */
}

#cowAni:before { 
	content:''; 
	position:absolute; 
	height:100%; 
	width:100%; 
	animation:rotate 70s linear reverse infinite; 
}



#cowAni img{
	width: 65px;
	height: auto;
	position: absolute;
	top:-50px;
	left: 300px;
	transition: all .3s ease-in-out;
   -webkit-transition: all .3s ease-in-out;
   
}


/* 小人動畫 */
#manAni{
	width: 40px;
	height: 61px;
	display: block;
	position: absolute;
	right:-80px;
	bottom: 47px;
	transition: all 5s ease-in-out;
    -webkit-transition: all 5s ease-in-out;
    background: url(../images/manWalk_g.gif) no-repeat;
    background-size: 40px auto;
}


#manAni.walkIn{
	right:100px;
}



#manAni:hover{
	cursor: pointer;
}

#manAni img{
	width: 40px;
	height: auto;
}



#manShow{
	width: 40px;
	height: 61px;
	display: block;
	position: absolute;
	right:100px;
	bottom: 47px;
	background: url(../images/manRiseHand.png);
	background-position: left top;
	background-size: 80px auto;
	overflow: hidden;
}


#manShow:hover{
	background: url(../images/manRiseHand.png);
	background-position: right top;
	background-size: 80px auto;
	cursor: pointer;
}


#cowAni img:hover {
/* 	animation-play-state: paused; */
	width: 70px;
	height: auto;
	cursor: pointer;
}

@keyframes rotate { 100% { transform:rotate(-360deg); } }

/* body { background:rgb(20,20,20); }  */



@media screen and (max-width:767px){

   html, body{
	   width: 100%;
   }
   
   
   .vidbacking-active-body-back{
	   left: 100%;
	   
   }
   
   .animationRunZoon{
	   width: 100%;
	   height: 100px;
	   overflow-x: hidden;
	   position: absolute;
	   bottom: 0;
	   right: 0;
/* 	   border: 2px solid blue; */
   }
   
   #manAni{
	   bottom: 0px;
   }
   
  
   
   #manShow{
	   bottom: 0px;
   }
   

	/* 行星動畫 */
	#starAni { 
		width:35px; 
		height:35px; 
		margin: 0 auto;
		transform-origin:450% center; /* 	物件畫圓的直徑範圍 */
		position:absolute; 
		top:60%;
		left:10%;
		animation:rotate 170s linear infinite; 
	}
	
	
	#starAni img{
		width: 30px;
		height: auto;
		transition: all .5s ease-in-out;
	   -webkit-transition: all .5s ease-in-out;	   
	   
	}
	
	#starAni img:hover{
		cursor: pointer;
	}
	
	#starAni:hover img{
		width: 35px;
		height: auto;
	}
	
	/* 小牛動畫 */
	#cowAni { 
		width:55px; 
		height:55px; 
		margin: 0 auto;
		transform-origin:330% center;
		position:absolute; 
		top:40%;
		left:0%;
		animation:rotate 210s linear infinite; 
		animation-direction: reverse;
	}
	
	#cowAni img{
		width: 65px;
		height: auto;
		position: absolute;
		left: 60vw;
		top:-200px;
		transition: all .5s ease-in-out;
	   -webkit-transition: all .5s ease-in-out;	   
	}
	
	#cowAni img:hover{
		cursor: pointer;
	}

}