@charset "utf-8";

#movie1 { display: none; }
#movie2 { display: none; }
#movie3 { display: none; }
#movie4 { display: none; }
#movies { display: block; }

.contentsTitle {
  margin: 20px auto;
}

/* youtube */
.iframe-wrap {
  text-align: center;
  width: 82.65%;
  padding-bottom: 46.49%;
  height: 0px;
  position: relative;
  margin: 30px auto;
}

.iframe-wrap iframe {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

/* Movies */
.movies {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:horizontal;
  -webkit-box-direction:normal;
  -ms-flex-direction:row;
  flex-direction:row;
  -ms-flex-wrap:wrap;
  flex-wrap:wrap;
  justify-content: space-evenly;
  padding: 0 30px;
}
.movie {
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-box-direction:normal;
  -ms-flex-direction:column;
  flex-direction:column;
  width: 300px;
  margin: 20px 20px;
}
.movie .thumb {
  position: relative;
  width: 300px;
  height: auto;
  margin: 0 auto 10px;
}
.movie .title {
  font-size: 16px;
  line-height: 20px;
  text-align: left;
}

@media only screen and (min-width:641px) and (max-width:999px) {
}

@media only screen and (max-width: 640px) {
  #movie1 { display: block; }
  #movie2 { display: block; }
  #movie3 { display: block; }
  #movie4 { display: block; }
  #movies { display: none; }
  .iframe-wrap {
  		width: 100%;
  		padding-bottom: 56.25%;
  }
  .contentsTitle {
    width: 80%;
    text-align: left;
    margin: 15vw auto 0;
  }
}