*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.cp_cssslider {
	width: 1000px;
	height: 434px;
	overflow: hidden;
}
.cp_slide_item {
width: 1000px;
height: 434px;
float: left;
position: relative;
}
.cp_cssslider .mask {
overflow:hidden;
height:434px;
}
.cp_cssslider ul {
margin: 0;
padding: 0;
position: relative;
}
/* tooltip */
.cp_cssslider .tooltip {
background:rgba(0,0,0,0.7);
width:434px;
height:auto;
position:relative;
bottom:95px;
left:-1000px;
-webkit-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
}
.cp_cssslider .tooltip h1 {
color:#fff;
padding:0 0 0 20px;
}
.cp_cssslider li:hover .tooltip{
left:0px;
}
.cp_cssslider:hover li,
.cp_cssslider:hover .cp_progressbar {
-webkit-animation-play-state:paused;
animation-play-state:paused;
}
.cp_cssslider li {
	width: 1000px;
	height: 434px;
	position: absolute;
	list-style: none;
}
.cp_cssslider li:nth-child(1){
-webkit-animation:cycle1 35s linear infinite;
animation:cycle1 35s linear infinite;
}
.cp_cssslider li:nth-child(2){
-webkit-animation:cycle2 35s linear infinite;
animation:cycle2 35s linear infinite;
}
.cp_cssslider li:nth-child(3){
-webkit-animation:cycle3 35s linear infinite;
animation:cycle3 35s linear infinite;
}
.cp_cssslider li:nth-child(4){
-webkit-animation:cycle4 35s linear infinite;
animation:cycle4 35s linear infinite;
}
.cp_cssslider li:nth-child(5){
-webkit-animation:cycle5 35s linear infinite;
animation:cycle5 35s linear infinite;
}
@keyframes cycle1 {
0%  { top:0px; }
4%  { top:0px; }
16% { top:0px; opacity:1; z-index:0; }
20% { top:434px; opacity:0; z-index:0; }
21% { top:-434px; opacity:0; z-index:-1; }
50% { top:-434px; opacity:0; z-index:-1; }
92% { top:-434px; opacity:0; z-index:0; }
96% { top:-434px; opacity:0; }
100%{ top:0px; opacity:1; }
}
@keyframes cycle2 {
0%  { top:-434px; opacity:0; }
16% { top:-434px; opacity:0; }
20% { top:0px; opacity:1; }
24% { top:0px; opacity:1; }
36% { top:0px; opacity:1; z-index:0; }
40% { top:434px; opacity:0; z-index:0; }
41% { top:-434px; opacity:0; z-index:-1; }
100%{ top:-434px; opacity:0; z-index:-1; }
}
@keyframes cycle3 {
0%  { top:-434px; opacity:0; }
36% { top:-434px; opacity:0; }
40% { top:0px; opacity:1; }
44% { top:0px; opacity:1; }
56% { top:0px; opacity:1; z-index:0; }
60% { top:434px; opacity:0; z-index:0; }
61% { top:-434px; opacity:0; z-index:-1; }
100%{ top:-434px; opacity:0; z-index:-1; }
}
@keyframes cycle4 {
0%  { top:-434px; opacity:0; }
56% { top:-434px; opacity:0; }
60% { top:0px; opacity:1; }
64% { top:0px; opacity:1; }
76% { top:0px; opacity:1; z-index:0; }
80% { top:434px; opacity:0; z-index:0; }
81% { top:-434px; opacity:0; z-index:-1; }
100%{ top:-434px; opacity:0; z-index:-1; }
}
@keyframes cycle5 {
0%  { top:-434px; opacity:0; }
76% { top:-434px; opacity:0; }
80% { top:0px; opacity:1; }
84% { top:0px; opacity:1; }
96% { top:0px; opacity:1; z-index:0; }
100%{ top:434px; opacity:0; z-index:0; }
}

/* animation */
@keyframes 4%, 24%, 44%, 64%, 84% { width:0%; opacity:0.3; }
16%, 36%, 56%, 76%, 96% { width:100%; opacity:0.3; }
18%, 38%, 58%, 78%, 98% { width:100%; opacity:0; }
}