@charset "utf-8";
/* CSS Document */

/*banner word*/
.bannerslogan{
	width:1200px;
	height:400px;
	position:absolute;
	top:0;
	left:0;
}

.banword1{
	width:600px;
	height:400px;
	background:url(../images/banword1.png) no-repeat;
	position:absolute;
	top:0;
	left:0;
	animation:ani1 40s linear infinite;
}
@keyframes ani1{
	0%{transform: translateX(0); opacity:0;}
	4%{transform: translateX(100px); opacity:1;}
	16%{transform: translateX(100px); opacity:1;}
	20%{transform: translateX(200px); opacity:0;}
	100%{transform: translateX(0); opacity:0;}
}

.banword2{
	width:600px;
	height:400px;
	background:url(../images/banword2.png) no-repeat;
	position:absolute;
	top:0;
	left:0;
	animation:ani2 40s linear infinite;
}
@keyframes ani2{
	0%{transform: translateX(0); opacity:0;}
	20%{transform: translateX(0); opacity:0;}
	24%{transform: translateX(100px); opacity:1;}
	36%{transform: translateX(100px); opacity:1;}
	40%{transform: translateX(200px); opacity:0;}
	100%{transform: translateX(0); opacity:0;}
}

.banword3{
	width:600px;
	height:400px;
	background:url(../images/banword3.png) no-repeat;
	position:absolute;
	top:0;
	left:0;
	animation:ani3 40s linear infinite;
}
@keyframes ani3{
	0%{transform: translateX(0); opacity:0;}
	40%{transform: translateX(0); opacity:0;}
	44%{transform: translateX(100px); opacity:1;}
	56%{transform: translateX(100px); opacity:1;}
	60%{transform: translateX(200px); opacity:0;}
	100%{transform: translateX(0); opacity:0;}
}

.banword4{
	width:600px;
	height:400px;
	background:url(../images/banword4.png) no-repeat;
	position:absolute;
	top:0;
	left:0;
	animation:ani4 40s linear infinite;
}
@keyframes ani4{
	0%{transform: translateX(0); opacity:0;}
	60%{transform: translateX(0); opacity:0;}
	64%{transform: translateX(100px); opacity:1;}
	76%{transform: translateX(100px); opacity:1;}
	80%{transform: translateX(200px); opacity:0;}
	100%{transform: translateX(0); opacity:0;}
}

.banword5{
	width:600px;
	height:400px;
	background:url(../images/banword5.png) no-repeat;
	position:absolute;
	top:0;
	left:0;
	animation:ani5 40s linear infinite;
}
@keyframes ani5{
	0%{transform: translateX(0); opacity:0;}
	80%{transform: translateX(0); opacity:0;}
	84%{transform: translateX(100px); opacity:1;}
	96%{transform: translateX(100px); opacity:1;}
	100%{transform: translateX(200px); opacity:0;}
}