/* carousel */

.carousel {
  overflow: hidden;
  margin: 50px auto 0 auto;
  width: 520px;
  position: relative;
}

.carousel .carousel-list {
  width: 100000px;
  position: relative;
}

.carousel .carousel-list::after {
  content: ".";
  clear: both;
  height: 0;
  display: block;
  visibility: hidden;
}

.carousel .carousel-list .carousel-item {
  float: left;
  width: 520px;
}

.carousel .carousel-list .carousel-item img {
  display: block;
  width: 100%;
}

.carousel .btn-container {
  position: absolute;
  width: 100%;
  top: 50%;
  margin-top: -25px;
  height: 50px;
  display: none;
}

.carousel:hover .btn-container { display: block; }

.carousel .btn-container .carousel-btn {
  position: relative;
  width: 30px;
  height: 50px;
}

.carousel .btn-container .carousel-btn .bg {
  width: 100%;
  height: 100%;
  background: #000;
  position: absolute;
  opacity: 0.3;
  filter: alpha(opacity=30);
  z-index: 0;
}

.carousel .btn-container .carousel-btn:hover .bg {
  opacity: 0.6;
  filter: alpha(opacity=60);
}

.carousel .btn-container .carousel-btn .btn-img {
  width: 100%;
  height: 100%;
  background: url(../images/left-right.png) no-repeat;
  position: relative;
  z-index: 10;
}

.carousel .btn-container .carousel-btn.prev-btn .btn-img { background-position: center left; }

.carousel .btn-container .carousel-btn.next-btn .btn-img { background-position: center right; }

.carousel .bottom-btn-container {
  height: 14px;
  position: absolute;
  bottom: 15px;
  width: 100%;
}

.carousel .bottom-btn-container .bottom-btn-inner {
  height: 100%;
  position: relative;
  float: left;
  margin-left: 50%;
}

.carousel .bottom-btn-container .bottom-btn-inner .bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  opacity: 0.3;
  filter: alpha(opacity=30);
  margin-left: -50%;
  z-index: 0;
}

.carousel .bottom-btn-container .bottom-btn-inner .bottom-btn-list {
  margin-left: -50%;
  position: relative;
  z-index: 10
}

.carousel .bottom-btn-container .bottom-btn-inner .bottom-btn-item {
  width: 10px;
  height: 10px;
  margin: 2px;
  background: url(../images/btn-img.png) no-repeat center right;
  float: left;
}

.carousel .bottom-btn-container .bottom-btn-inner .bottom-btn-item.selected { background-position: center left; }