@charset "UTF-8";

/* ======================================================================

  "Slick" Style Overwrite

====================================================================== */
.cs-list, .cv-unit { padding: 0 0 70px !important; }
.cs-list .slick-list {
  overflow: visible;
  margin: 0 -40px 0 0;
  padding: 0 0 70px;
}
.cv-unit .slick-list {
  overflow: visible;
  margin: 0;
  padding: 0 0 70px;
}
.cs-list .slick-track, .cv-unit .slick-track { display: flex; }
.cs-list .slick-list .slick-slide,
.cv-unit .slick-list .slick-slide {
  width: 360px;
  height: auto !important;
  margin: 0 40px 0 0;
}
.cs-list.slick-initialized, .cv-unit.slick-initialized { display: block; }

/* Prev Next */
.slick-prev, .slick-next {
  z-index: 1;
  top: initial;
  bottom: 0;
  width: 60px;
  height: 60px;
}
.cs-list .slick-prev {
  left: initial;
  right: calc(420 / 1920 * 100vw);
  margin: 0 80px 0 0;
}
.cs-list .slick-next { right: calc(420 / 1920 * 100vw); }
.cv-unit .slick-prev {
  left: initial;
  right: calc(420 / 1920 * 100vw);
  margin: 0 80px 0 0;
}
.cv-unit .slick-next { right: calc(420 / 1920 * 100vw); }
.slick-prev::before, .slick-next::before {
  content: "";
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;
  display: inline-block;
  font-size: 0;
  opacity: 1;
  transition: all .3s;
}
.slick-prev::before { background-image: url(../common/images/prev_off.png); }
.slick-next::before { background-image: url(../common/images/next_off.png); }
.slick-prev:hover::before { background-image: url(../common/images/prev_ov.png); }
.slick-next:hover::before { background-image: url(../common/images/next_ov.png); }

@media screen and (max-width:480px) {

  .cv-unit, .cs-list, .cv-unit .slick-list, .cs-list .slick-list { padding: 0 0 calc(55 / 480 * 100vw) !important; }
  .cs-list .slick-list .slick-slide,
  .cv-unit .slick-list .slick-slide {
    width: calc(540 / 780 * 100vw);
    height: auto !important;
    margin: 0 calc(55 / 780 * 100vw) 0 0;
  }
  .cs-list .slick-prev {
    right: 50vw;
    margin: 0;
  }
  .cs-list .slick-next {
    right: 35vw;
  }
  .cv-unit .slick-prev {
    right: 50vw;
    margin: 0;
  }
  .cv-unit .slick-next {
    right: 35vw;
  }
  .slick-prev, .slick-next, .slick-prev::before, .slick-next::before {
    width: calc(50 / 480 * 100vw);
    height: calc(50 / 480 * 100vw);
  }

}