/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License:none (public domain)
*/

/*style slider*/
#slider{margin:0 100px;padding:0;float:left;width:300px;height:180px}
#slider ul{margin:0;padding:0;list-style:none;float:left;position:relative}
#slider ul li{margin-right:auto;padding:0;opacity:0;position:relative;top:0;left:0;
-webkit-animation-name:slides_animation;
-webkit-animation-duration:30s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 30;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name:slides_animation;
-moz-animation-duration:30s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 30;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
animation-name:slides_animation;
animation-duration:30s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-delay: 30;
animation-play-state: running;
animation-fill-mode: forwards;
}



#slider ul li:nth-child(2){-webkit-animation-delay:5s;-moz-animation-delay:5s;animation-delay:5s}
#slider ul li:nth-child(3){-webkit-animation-delay:10s;-moz-animation-delay:10s;animation-delay:10s}
#slider ul li:nth-child(4){-webkit-animation-delay:15s;-moz-animation-delay:15s;animation-delay:15s}
#slider ul li:nth-child(5){-webkit-animation-delay:20s;-moz-animation-delay:20s;animation-delay:20s}
#slider ul li:nth-child(6){-webkit-animation-delay:25s;-moz-animation-delay:25s;animation-delay:25s}

#slider ul li img{display:inline-block




}


/*animation css3*/
@-webkit-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

@-moz-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}

@keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}