@charset "UTF-8";
.bannera {
  width: 800px;
  position: relative;
  height: 300px;
  margin: 0px auto 0 auto;
}
.bannera .hd {
  position: absolute;
  bottom:0px;
  margin-left:0px;
  z-index: 2;
  width: 800px;
}
.bannera .hd ul {
  display: block;
  width: 300px;
  height: 3px;
  margin:0 auto;
}
.bannera .hd ul li {
  width: 50px;
  height: 3px;
  background-color: #ffffff;
  cursor: pointer;
  float: left;
  overflow: visible;
  text-align: center;
  opacity: .7;
  filter: alpha(opacity=70);
  margin:0px 5px;
}
.bannera .hd ul li em {
  display: block;
  width: 50px;
  height: 3px;
}
.bannera .hd ul li.on {
  color: #fff;
  font-weight: bold;
  opacity: 1;
  filter: alpha(opacity=100);
  z-index: 2;
  position: relative;
}
.bannera .hd ul li.on em {
  background: #cc0022;
  display: block;
  animation: myfirst 3s;
  -moz-animation: myfirst 3s;
  /* Firefox */
  -webkit-animation: myfirst 3s;
  /* Safari 和 Chrome */
  -o-animation: myfirst 3s;
  /* Opera */
}
.bannera .bd {
  width: 800px;
  height: 300px;
  margin: auto;
}
.bannera .bd ul{
  position: relative;
  width: 800px;
  height: 300px;
  overflow: hidden;
}
.bannera .bd li{
  position: absolute;
  width: 800px;
  height: 300px;
}
.bannera .bd li img{
	margin-bottom:10px;
}
.bannera .bd .prev,
.bannera .bd .next {
  position: absolute;
  left: 3%;
  top: 50%;
  margin-top: -25px;
  display: block;
  width: 32px;
  height: 40px;
  background: url(./../image/slider-arrow.png) -110px 5px no-repeat;
  filter: alpha(opacity=50);
  opacity: 0.5;
}
.bannera .bd .prev:hover,
.bannera .bd .next:hover {
  filter: alpha(opacity=100);
  opacity: 1;
}
.bannera .bd .next {
  left: auto;
  right: 3%;
  background-position: 8px 5px;
}
.bannera .bd .prevStop {
  display: none;
}
.bannera .bdx .nextStop {
  display: none;
}
  body{
    overflow-x: hidden;
  }
@keyframes myfirst
{
0%   {width: 10px;}
/*50%  }*/
100% {width: 50px;}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {width: 10px;}
/*50%  }*/
100% {width: 50px;}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {width: 10px;}
/*50%  }*/
100% {width: 50px;}
}

@-o-keyframes myfirst /* Opera */
{
0%   {width: 10px;}
/*50%  }*/
100% {width: 50px;}
}
