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

html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
a,abbr,acronym,address,big,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,
b,u,i,center,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,embed,
figure,figcaption,footer,header,hgroup,
menu,nav,output,ruby,section,summary,
time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,
q:before,q:after{content:'';content:none}
table{border-collapse:collapse;border-spacing:0}

/*all element rendered the declared width, and any border and padding cut inside the box*/
*{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}

/*general style*/
body{color:#333}
h1, h2, h3, h4, h5, h6{margin-bottom:0.6em; font-weight:normal; line-height:1em; color:#4C4D48}
h1{font-size:160%}
h2{font-size:130%}
h3{font-size:110%}
h4{font-size:100%}
h5{font-size:90%}
h6{font-size:80%}
p{margin:0 0 10px 0; padding:0; line-height:170%;font-size:90%}
p:last-child{margin:0}
strong{font-weight: 900}
a{outline:none;color:#022945}
a:hover{text-decoration:none}
#wrapper{margin:0 auto;padding:0;width:960px}
header{margin:40px 0;float:left;width:960px;text-align:center}
footer{margin:40px 0 0;float:left;width:960px;text-align:center}

/*style slider*/
#slider{margin:0 10px;padding:0;float:left;width:940px;height:350px}
#slider ul{margin:0;padding:0;list-style:none;float:left;position:relative}
#slider ul li{margin:0;padding:0;opacity:0;position:absolute;top:0;left:0;
-o-animation-name:slides_animation;
-o-animation-duration:25s;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-delay: 0;
-o-animation-play-state: running;
-o-animation-fill-mode: forwards;
-webkit-animation-name:slides_animation;
-webkit-animation-duration:25s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
-moz-animation-name:slides_animation;
-moz-animation-duration:25s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
animation-name:slides_animation;
animation-duration:25s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: forwards;
}
#slider ul li:nth-child(2){-o-animation-delay:5s;-webkit-animation-delay:5s;-moz-animation-delay:5s;animation-delay:5s}
#slider ul li:nth-child(3){-o-animation-delay:10s;-webkit-animation-delay:10s;-moz-animation-delay:10s;animation-delay:10s}
#slider ul li:nth-child(4){-o-animation-delay:15s;-webkit-animation-delay:15s;-moz-animation-delay:15s;animation-delay:15s}
#slider ul li:nth-child(5){-o-animation-delay:20s;-webkit-animation-delay:20s;-moz-animation-delay:20s;animation-delay:20s}
#slider ul li img{display:inline-block}

/*animation css3*/
@-o-keyframes slides_animation{
   0%{opacity:0;}
   4%{opacity:1;}
   16%{opacity:1;}
   24%{opacity:0;}
   100%{opacity:0;}
}
@-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;}
}