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


.modal { position: fixed; top: 0; left: 0; width: 100%; height: 100dvh; background: rgba(0, 0, 0, .9); z-index: 200; transition: all 1s; }
.modal .inner { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100dvh; }
.modal .inner .content { opacity: 1; }
.modal .inner .content .none { display: none; }
.modal .inner .content .back { margin: 0 0 15px auto; width: 36px; transition: all .3s; cursor: pointer; }
.modal .inner .content .back:hover { transition: all .3s; opacity: .6; }
.modal .inner .content .iframe { margin: 0 auto 45px; width: 848px; height: 477px;  }
.modal .inner .content .live-link { margin: 0 auto 45px; max-width: 800px; }
.modal .inner .content .link { display: block; }

@media screen and (max-width: 900px) {
 .modal .inner .content .back { margin: 0 0 15px auto; width: 28px; }
 .modal .inner .content .back:hover { opacity: 1; }
 .modal .inner .content .iframe { margin: 0 auto 43px; width: 94vw; height: 52.875vw; }
}


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

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