.key_slider { position: relative; }
.key_slider .slick-slide img { width: 900px; }
@media screen and ( max-width: 768px ) {
 .key_slider { margin-bottom: 20px; }
 .key_slider .slick-slide { margin: 0 2.5px; }
 .key_slider .slick-slide img { width: 700px; }
}

.slick-slide {
 margin: 0 5px;
 opacity: .5;
 transition: all ease-in-out 0.5s;
}
.slick-current { opacity: 1; }
.slide-arrow {
 position: absolute;
 top: 50%;
 margin-top: -32px;
 z-index: 9999;
}
.prev-arrow,
.next-arrow {
 position: absolute;
 z-index: 10;
 font-size: 0;
 line-height: 0;
 background-color: #fff;
 opacity: 0.8;
 width: 64px;
 height: 64px;
 border-radius: 32px;
 padding: 0;
 cursor: pointer;
 border: none;
 outline: none;
 box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
.prev-arrow {
 left: 20px;
 background: #fff url(img/arrow_p64.png) no-repeat;
}
.next-arrow {
 right: 20px;
 background: #fff url(img/arrow_n64.png) no-repeat;
}

@media screen and ( max-width: 768px ) {
 .slide-arrow {
  margin-top: -16px;
 }
 .prev-arrow,
 .next-arrow {
  width: 32px; height: 32px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
 }
 .prev-arrow {
  left: 16px;
  background: #fff url(img/arrow_p32.png) no-repeat;
 }
 .next-arrow {
  right: 16px;
  background: #fff url(img/arrow_n32.png) no-repeat;
 }
}