/* YOUTUBE */

#youtube, #youtube .mBox {
  box-sizing: border-box;
}

#youtube h3 {
  text-indent: -9999px;
  background: url(../img/subtitle/youtube.png) center top no-repeat;
  background-size: contain;
}


/* line */

#youtube .line {
  border: none;
  height: 10px;
  background-image: linear-gradient(90deg, hsla(0, 0%, 50%, 1), hsla(0, 0%, 50%, 1) 33.33%, hsla(0, 0%, 50%, 0) 33.33%, hsla(0, 0%, 50%, 0) 100%);
  background-size: 3px 100%;
}

@media all and (min-width: 768px) {
  #youtube {
    position: relative;
    width: 960px;
    height: 220px;
    margin: 0 auto 40px;
  }
  #youtube h3 {
    width: 920px;
    height: 50px;
    margin: 5px auto;
    background: url(../img/subtitle/youtube.png) center center no-repeat;
  }
  #youtube .slider {
    width: 760px;
    height: 135px;
    margin: 0 auto;
  }
  #youtube .regular {
    padding: 0;
    margin: 0 auto 20px;
  }
  #youtube .slick-slide img {
    width: 240px;
    height: 135px;
    position: absolute;
    top: 0;
    left: 0;
  }
  #youtube .slick-slide {
    margin: 0px 5px;
  }
  #youtube .slider div.tab {
    position: relative;
    width: 240px;
    height: 135px;
  }
  #youtube .mBox {
    display: block;
    width: 240px;
    height: 135px;
    border: solid 3px #000;
    /*border-radius:5px;*/
  }
}

@media all and (max-width: 767px) {
  #youtube {
    padding: 0px 0 5px;
    width: 95%;
    margin: 0 auto;
  }
  #youtube h3 {
    width: 100%;
    height: 0;
    padding-top: 10%;
    margin: .5em auto .3em;
  }
  #youtube .slider {
    width: 85%;
    margin: 0 auto;
  }
  #youtube .regular {
    padding: 0;
    margin: 0 auto 1em;
  }
  #youtube .slick-slide img {
    width: 100%;
  }
  #youtube .slick-slide {
    margin: 0 .1em;
  }
  #youtube .mBox {
    display: block;
    width: 100%;
    border: solid 2px #000;
    /*border-radius:5px;*/
  }
}