@charset "utf-8";
/*------------------------  modal_movie.css  ------------------------*/


.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .9); z-index: 10; transition: all 1s; }
.modal .inner { position: relative; display: flex; width: 100%; height: 100%; }
.modal .inner .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; }
.modal .inner .content .none { display: none; }
.modal .inner .content .back { margin: 0 0 10px auto; width: 30px; transition: all .3s; cursor: pointer; }
.modal .inner .content .back:hover { transition: all .3s; opacity: .6; }

.modal .inner .content .iframe { margin: 0 auto; width: 800px; height: 450px;  }

.modal .inner .content .movie_btn_wrap { display: flex; justify-content: center; margin-top: 5px; margin-bottom: 20px; }
.modal .inner .content .movie_btn_wrap .movie_btn { flex-basis: calc(100% / 4); position: relative; margin: 0 8px; padding: 14px 0; border-bottom: 1px solid #fff; font-weight: 700; font-size: 17px; line-height: 1.4; color: #fff; transition: all .3s; cursor: pointer; }
.modal .inner .content .movie_btn_wrap .movie_btn span { display: block; font-size: 14px; }
.modal .inner .content .movie_btn_wrap .movie_btn:hover { opacity: .6; transition: all .3s; }
.modal .inner .content .movie_btn_wrap .btn_active { border-bottom: 1px solid #555; color: #555; }
.modal .inner .content .movie_btn_wrap .btn_active:hover { opacity: 1; }


@media screen and (max-width: 800px) {
  .modal .inner .content .back { width: 20px; }
  .modal .inner .content .iframe { width: 74vw; height: 49.33284vw; }
  .modal .inner .content .movie_btn_wrap { margin-top: 0; }
  .modal .inner .content .movie_btn_wrap .movie_btn { font-size: 16px; }
  .modal .inner .content .movie_btn_wrap .movie_btn span { font-size: 13px; }
}

@media screen and (max-width: 390px) {
  .modal .inner .content .iframe { width: 86vw; height: 57.33276vw; }
  .modal .inner .content .movie_btn_wrap { display: block; }
  .modal .inner .content .movie_btn_wrap .movie_btn { margin: 0 4px; padding: 15px 2px; font-size: 16px; }
  .modal .inner .content .movie_btn_wrap .movie_btn span { display: inline-block; margin-right: 14px; font-size: 13px; }
}


.fade-out { animation: fade-out .5s linear forwards; }
@keyframes fade-out {
  from { opacity: 1; }
  to { display: none; opacity: 0; }
}

.fade-in { display: block; animation: fade-in .5s linear forwards; }
@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; display: block; }
}