.box { 
-moz-border-radius: 15px; /* Firefox */ 
-webkit-border-radius: 15px; /* Safari and Chrome */ 
border-radius: 15px; /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */ 
-moz-box-shadow: 10px 10px 20px #000; /* Firefox */ 
-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */ 
box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */ 
behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */ 
} 
.container{width: 520px; height: 300px; margin: 0 auto;  border:0px solid #d0d0d0; }
.img{width: 520px; height: 300px; overflow: hidden; position: relative;}
.bg{width: auto; height: 20px; z-index: 99; position: absolute; left: 15px; bottom: 15px;}
.bg_in{width: 200px; height: 20px; position: relative;}
.bg_in li{width: 20px; height: 20px; line-height: 20px; border-radius: 20px; background: #ffffff; opacity: 0.5; text-align: center; color: #333333; float: left; margin-right: 10px; position: relative; z-index: 999;}
.bg_in #lp{position: absolute; left: 0px; top: 0; background: #ff3c00; opacity: 1; z-index: 998; animation: myfirstArr 22.5s infinite; -webkit-animation: myfirstArr 22.5s infinite; -moz-animation: myfirstArr 22.5s infinite; -o-animation: myfirstArr 22.5s infinite; behavior: url(ie-css3.htc); 
}

.nav{width: 2600px; height: 300px; position: absolute; left: 0px; top: 0; z-index: 9; animation: myfirst 22.5s infinite; -webkit-animation: myfirst 22.5s infinite; -0-animation: myfirst 22.5s infinite; -moz-animation: myfirst 22.5s infinite;behavior: url(ie-css3.htc); }
.nav li{float: left;}
.nav li img{width: 100%; height: 100%;}
@keyframes myfirst 
{
0%   {left: 0px;}
18%   {left: 0px;}
20%   {left: -520px;}
38%   {left: -520px;}
40%   {left: -1040px;}
58%   {left: -1040px;}
60%   {left: -1560px;}
78%   {left: -1560px;}
80%   {left: -2080px;}
98%   {left: -2080px;}
100%   {left: -0px;}

behavior: url(ie-css3.htc);

}

@-o-keyframes myfirst 
{
0%   {left: 0px;}
18%   {left: 0px;}
20%   {left: -520px;}
38%   {left: -520px;}
40%   {left: -1040px;}
58%   {left: -1040px;}
60%   {left: -1560px;}
78%   {left: -1560px;}
80%   {left: -2080px;}
98%   {left: -2080px;}
100%   {left: -0px;}
}

@-moz-keyframes myfirst 
{
0%   {left: 0px;}
18%   {left: 0px;}
20%   {left: -520px;}
38%   {left: -520px;}
40%   {left: -1040px;}
58%   {left: -1040px;}
60%   {left: -1560px;}
78%   {left: -1560px;}
80%   {left: -2080px;}
98%   {left: -2080px;}
100%   {left: -0px;}
}

@-webkit-keyframes myfirst
{
0%   {left: 0px;}
18%   {left: 0px;}
20%   {left: -520px;}
38%   {left: -520px;}
40%   {left: -1040px;}
58%   {left: -1040px;}
60%   {left: -1560px;}
78%   {left: -1560px;}
80%   {left: -2080px;}
98%   {left: -2080px;}
100%   {left: -0px;}
}

@keyframes myfirstArr
{
0%   {left: 0px;}

19%   {left: 0px;}
20%   {left: 30px;}

39%   {left: 30px;}
40%   {left: 60px;}
59%   {left: 60px;}
60%   {left: 90px;}
79%   {left: 90px;}
80%   {left: 120px;}
99%   {left: 120px;}
100%   {left: 0px;}
}


@-webkit-keyframes myfirstArr
{
0%   {left: 0px;}

19%   {left: 0px;}
20%   {left: 30px;}

39%   {left: 30px;}
40%   {left: 60px;}
59%   {left: 60px;}
60%   {left: 90px;}
79%   {left: 90px;}
80%   {left: 120px;}
99%   {left: 120px;}
100%   {left: 0px;}
}

@-moz-keyframes myfirstArr
{
0%   {left: 0px;}

19%   {left: 0px;}
20%   {left: 30px;}

39%   {left: 30px;}
40%   {left: 60px;}
59%   {left: 60px;}
60%   {left: 90px;}
79%   {left: 90px;}
80%   {left: 120px;}
99%   {left: 120px;}
100%   {left: 0px;}
}

@-o-keyframes myfirstArr
{
0%   {left: 0px;}

19%   {left: 0px;}
20%   {left: 30px;}

39%   {left: 30px;}
40%   {left: 60px;}
59%   {left: 60px;}
60%   {left: 90px;}
79%   {left: 90px;}
80%   {left: 120px;}
99%   {left: 120px;}
100%   {left: 0px;}
}