body {
  text-align: center;
  background-color: #e8e8e8;
}
.slider {
  position: relative;
  display: inline-block;
}
.slider .arrow {
  margin-top: -30px;
  width: 60px;
  height: 57px;
  position: absolute;
  top: 50%;
  display: block;
  background: url('../img/slider/arrow.png') no-repeat;
  cursor: pointer;
  opacity: 0.2;
}
.slider .left {
  left: 50px;
}
.slider .right {
  right: 50px;
  background-position: -30px;
}
.slider .left:hover {
  opacity: 1;
}
.slider .right:hover {
  opacity: 1;
}
.slider .frame-wrap {
  width: 780px;
  height: 534px;
  margin: 10px 10px 0 10px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
}
.slider .frame-wrap .arrow {
  position: absolute;
}
.slider .frame-wrap img {
  display: inline-block;
}
.slider .pagination-wrap {
  line-height: 35px;
}
.slider .pagination-wrap li {
  margin: 0 10px;
  width: 10px;
  height: 10px;
  display: inline-block;
  vertical-align: middle;
  background-color: #555555;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
.slider .pagination-wrap li.active {
  width: 8px;
  height: 8px;
  background-color: #ffffff;
  border: 1px solid #c0c0c0;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}