@charset "UTF-8";

/* Normalizes margin,padding */
body,div,dl,dt,dd,ul,li,pre,form,fieldset,input,p,blockquote {
	margin:0px;
	padding:0px
}

/* Removes border from fieldset and img */
fieldset,img { border:0 }


.artboard{width: 780px; height: 175px; display: block; overflow-x: hidden; overflow-y: hidden; position: relative;}
.artboard2{width: 210px; height: 210px; display: block; overflow-x: hidden; overflow-y: hidden; position: relative;}

.bg1{
	position: absolute;
	width: 780px;
	height: 520px;
	display: block;
	background-image: url(image/photo01b.jpg);
	animation-name: bg1;
	animation-duration: 45s ;
	animation-iteration-count: infinite;
	top: 0px;
	animation-name: bg1;

}

@keyframes bg1{
	 0%   {opacity:0;}
	 2%     {opacity:1;}
	 20%  {top: -345px ;opacity:1;}
	 21%  {top: -345px ;opacity:0;}
	 100%  {top: -345px ;opacity:0;}
	}


.bg2{
	position: absolute;
	width: 780px;
	height: 450px;
	display: block;
	background-image: url(image/photo02c.jpg);
	animation-name: bg2;
	animation-duration: 45s ;
	animation-iteration-count: infinite;
	top: -275px;
}	

@keyframes bg2{	
      0%   {opacity:0;} 
	 19%   {top: -275px; opacity:0;}
	 20%  {top: -265px; opacity:1;}
	 40%  {top: 0px; opacity:1;}	 
	 41%  { opacity:0;}
	 100%  { opacity:0;}
	}
	
.bg3{
	position: absolute;
	width: 780px;
	height: 175px;
	display: block;
	background-image: url(image/photo03h.jpg);
	opacity:0;
	animation-name: bg3;
	animation-duration: 45s ;	
	animation-iteration-count: infinite;
}	

@keyframes bg3{	
	 38%  { opacity:0;}	 
	 40%  { opacity:1;}
	 70%  { opacity:1;}
	 71%  { opacity:0;}
	 100%  { opacity:0;}
	}

.bg4{
	position: absolute;
	width: 780px;
	height: 175px;
	display: block;
	background-image: url(image/photo04b.jpg);
	opacity:0;
	animation-name: bg4;
	animation-duration: 45s ;	
	animation-iteration-count: infinite;
}	

@keyframes bg4{	
	 70%  { opacity:0;}	 
	 71%  { opacity:1;}
	 80%  { opacity:1;}
	 81%  { opacity:1;}
	 99%  { opacity:1;}
	 100%  { opacity:0;}
	}


	
.artboard .tagline1{
	position: absolute;
	display: block;
	left: 790px;
	top: 120px;
	animation-name: tagline1;
	animation-duration: 45s ;
	animation-iteration-count: infinite;
	font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
	text-shadow: 2px 2px #000000;
	z-index: 99;
	width: 400px;
	}

@keyframes tagline1{
	 0%   {left: 790px; opacity:1;}	
	 5%  {left: 320px; opacity:1;}
	 15%  {left: 100px ;opacity:1;}
	 19%  {left: 50px ;opacity:0;}
	 100%  {left: 50px ;opacity:0;}
	}	

.artboard .tagline2{
	position: absolute;
	display: block;
	left: 790px;
	top: 100px;
	animation-name: tagline2;
	animation-duration: 45s ;
	animation-iteration-count: infinite;
	font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
	text-shadow: 2px 2px #000000;
	z-index: 99;
	width: 500px;
	}
@keyframes tagline2{
	 0%   {left: 790px; opacity:1;}	
	 19% {left: 790px; opacity:1;}	
	 25%  {left: 320px; opacity:1;}
	 35%  {left: 100px ;opacity:1;}
	 38%  {left: 50px ;opacity:0;}
	 100%  {left: 50px ;opacity:0;}
	}		
.artboard .tagline3{
	position: absolute;
	display: block;
	left: -100px;
	top: 15px;
	animation-name: tagline3;
	animation-duration: 45s ;
	animation-iteration-count: infinite;
	font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
	text-shadow: 2px 2px #000000;
	z-index: 99;
	width: 400px;
	}	
@keyframes tagline3{
	 0%   {left: -450px; opacity:1;}	
	 38% {left: -450px; opacity:1;}
	 40% {left: 50px; opacity:1;}	
	 50%  {left: 400px; opacity:1;}
	 52%  {left: 800px; opacity:1;}
	 100%  {left: 800px ;opacity:1;}
	}	
.artboard .tagline4{
	position: absolute;
	display: block;
	left: 800px;
	top: 15px;
	animation-name: tagline4;
	animation-duration: 45s ;
	animation-iteration-count: infinite;
	font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
	text-shadow: 2px 2px #000000;
	z-index: 99;
	width: 400px;
	}	
@keyframes tagline4{
	 0%   {left: 800px; opacity:1;}	
	 52% {left: 800px; opacity:1;}
	 53% {left: 300px; opacity:1;}	
	 68% {left: 100px; opacity:1;}	
	 70% {left: -400px; opacity:1;}
	 100%  {left: -400px ;opacity:1;}
	}		
		
.artboard .tagline5{
	position: absolute;
	display: block;
	left: 800px;
	top: 15px;
	animation-name: tagline5;
	animation-duration: 45s ;
	animation-iteration-count: infinite;
	font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
	text-shadow: 2px 2px #000000;
	z-index: 99;
	width: 400px;
	}	
@keyframes tagline5{
	 0%   {left: 800px; opacity:1;}	
	 70% {left: 800px; opacity:1;}
	 72% {left: 300px; opacity:1;}	
	 82% {left: 100px; opacity:1;}	
	 84% {left: -400px; opacity:1;}
	 100%  {left: -400px ;opacity:1;}
	}		
.artboard .tagline6{
	position: absolute;
	display: block;
	left: -100px;
	top: 15px;
	animation-name: tagline6;
	animation-duration: 45s;
	animation-iteration-count: infinite;
	font-family: Arial, Helvetica, sans-serif, Microsoft JhengHei;
	font-size: 30px;
	font-weight: bold;
	color: #FFF;
	text-shadow: 2px 2px #000000;
	z-index: 99;
	width: 400px;
	}	
@keyframes tagline6{
	 0%   {left: -450px; opacity:1;}	
	 84% {left: -450px; opacity:1;}
	 86% {left: 50px; opacity:1;}	
	 96%  {left: 400px; opacity:1;}
	 98%  {left: 800px; opacity:1;}
	 100%  {left: 800px ;opacity:1;}
	}