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

#css-slider {
	overflow: hidden;
	position: relative;
	height:410px;
}
 
 .slider-wrapper {
	position: absolute;
	top: 0; left: 0; bottom:0;
}

.slide-item {
	animation: slider 16s linear infinite;
	width: 2844px !important;
}  
 
/* txt img*/
.slider_txt_warapper {
padding: 0;
margin: 0;
}
.slider_txt_warapper li{
float: left;
width: 100%;
list-style: none;
position: absolute;
top: 0;
left: 0;
}

.slider_txt01 {animation: txt01 16s linear infinite;}
.slider_txt02 {animation: txt02 16s linear infinite;}
.slider_txt03 {animation: txt03 16s linear infinite;}

@keyframes txt01 {
	0% {opacity:0;} 
	5% {opacity:1;} 
	25% {opacity:1;} 
	30% {opacity:0;}
	100% {opacity:0;} 
}

@keyframes txt02 {
	0% {opacity:0;} 
	30% {opacity:0;} 
	35% {opacity:1;} 
	55% {opacity:1;} 
	60% {opacity:0;} 
	100% {opacity:0;} 
}

@keyframes txt03{
	0% {opacity:0;} 
	60% {opacity:0;} 
	65% {opacity:1;} 
	85% {opacity:1;} 
	90% {opacity:0;} 
	100% {opacity:0;} 
}

@keyframes slider {
  0% { transform: translateX(0); }
  25% { transform: translateX(-24px); }
  30% { transform: translateX(-948px); }
  55% { transform: translateX(-972px); }
  60% { transform: translateX(-1896px); }
  85% { opacity: 1;}
  90% { transform: translateX(-1920px);opacity: 0; }
  98% {transform: translateX(0);opacity: 0; }
  100% {opacity: 1;transform: translateX(0);  }
}