.slider {
  position: relative;
    z-index: 200;
  width: 100%;
  height: 520px;
  overflow: hidden;
  padding-bottom:100px;
}

.box{width:100%; height: 100%;margin:0;padding:0}

.slides {
  height: 100%;
    display: flex;
  /* Clear fix */
  overflow: hidden;
  *zoom: 1;
  /**
   * Prevent blinking issue
   * Not tested. Experimental.
   */
  -webkit-backface-visibility: hidden;
  -webkit-transform-style: preserve-3d;
}

.slide {
  height: 100%; 
}

.slider-arrow {
  position: absolute;
  display: block;
  margin-bottom: -20px;
  /*padding: 20px;*/
}

.slider-arrow--right {
  bottom: 5%;
  right: 30px;
}

.slider-arrow--left {
  bottom: 5%;
  left: 30px;
}

.slider-nav {
  position: absolute;
  bottom: 30px;
}

.slider-nav__item {
  width: 12px;
  height: 12px;
  float: left;
  clear: none;
  display: block;
  margin: 0 5px;
  background: #fff;
}

.slider-nav__item:hover {
  background: #ccc;
}

.slider-nav__item--current {
  background: #ccc;
}