.banner_wrapper
{
  position: relative;
  float:left;
  background-color: #E6E6E6;
}

.banner_wrapper img
{
  transition: opacity 2s;
  -webkit-transition: opacity 2s;
}

.banner_wrapper img
{
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  opacity: 0;
  z-index: -1;
}

.banner_wrapper a:nth-child(1) img
{
  position: inherit;
  opacity: 1;
  z-index: 0;
}

.banner_wrapper  .banner_previous,
.banner_wrapper  .banner_next
{
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  position: absolute;
  width: 60px;
  height: 50px;
  top: 50%;
  margin-top: -25px;
  cursor: pointer;
  opacity: 0.2;
}

.banner_wrapper:hover  .banner_previous,
.banner_wrapper:hover  .banner_next
{
  opacity: 1;
}

.banner_wrapper  .banner_next
{
  left: 100%;
  margin-left: -60px;
}

.banner_wrapper  .banner_previous
{
  background: url('../images/previous.png') no-repeat center center;
}

.banner_wrapper  .banner_next
{
  background: url('../images/next.png') no-repeat center center;
}

.banner_wrapper  .banner_switcher
{
  position: absolute;
  width: 100%;
  height: 18px;
  left: 0;
  top: 100%;
  margin-top: -18px;
  text-align: center;
  cursor: pointer;
}

.banner_wrapper  .banner_switcher .bullet
{
  transition: opacity 1s;
  -webkit-transition: opacity 1s;
  width: 12px;
  height: 12px;
  background-color: #cccccc;
  border:1px solid gray;
  border-radius: 50%;
  display: inline-block;
  margin: 0px 3px 0px 3px;
  opacity: 0.2;
}

.banner_wrapper:hover  .banner_switcher .bullet
{
  opacity: 1;
}

.banner_wrapper  .banner_switcher .active_bullet,
.banner_wrapper  .banner_switcher .bullet:hover
{
  background-color: #8FB6EF;
}