/* =====================
  c--key-visual-slider
===================== */
.c--key-visual-slider{
  max-width: 1573px;
  margin: 0 auto;
  padding: 0
}
.c--key-visual-slider .key-visual-main{
  float: left;
  margin: 0;
  padding: 0;
}
.c--key-visual-slider .key-visual-main .slick-slide > div > li > a > img{
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  .c--key-visual-slider .key-visual-main{
    width: 100%;
  }
}
@media screen and (min-width: 768px) {
  .c--key-visual-slider{
    padding: 0 25px;
  }
  .c--key-visual-slider .key-visual-main{
    width: 60%;
  }
  .c--key-visual-slider .key-visual-thumbnail{
    float: left;
    margin: 0;
    padding: 0;
    width: 40%;
  }
  .c--key-visual-slider .key-visual-thumbnail > li{
    cursor: pointer;
    padding-left: 1px;
    padding-bottom: 1px;
    float: left;
    width: 50%;
    -webkit-transition: all 0.3s ease !important;
    -moz-transition: all 0.3s ease !important;
    -o-transition: all 0.3s ease !important;
    transition: all  0.3s ease !important;
  }
  .c--key-visual-slider .key-visual-thumbnail > li:hover{
    opacity: 0.5;
  }
  .c--key-visual-slider .key-visual-thumbnail > li:nth-last-of-type(2),
  .c--key-visual-slider .key-visual-thumbnail > li:last-of-type{
    padding-bottom: none;
  }
  .c--key-visual-slider .key-visual-thumbnail > li img{
    display: block;
    max-width: 100%;
    height: auto;
  }
}

.c--key-visual-slider .slick-dots{
  bottom: -24px;
}
.c--key-visual-slider .slick-dots li button:before{
  color: #e1e1e1;
  opacity: 1;
}
.c--key-visual-slider .slick-dots li.slick-active button:before{
  color: #212121;
}
.c--key-visual-slider .slick-dots li{
  margin: 0 7.5px;
}