@charset "utf-8";
.movie-modal{
  position:fixed;
  inset:0;
  z-index:9999999;
  opacity:0;
  visibility:hidden;
  transition:.3s;
}

.movie-modal.active{
  opacity:1;
  visibility:visible;
}

.movie-modal-bg{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.8);
}

.movie-modal-content{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:min(90vw, 720px);
}

.movie-wrap{
  position:relative;
  padding-top:56.25%;
}

.movie-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.movie-close{
  position:absolute;
  right:-50px;
  top:-50px;

  width:44px;
  height:44px;

  background:#fff;
  border-radius:50%;

  cursor:pointer;
  transition:.3s;

  display:flex;
  align-items:center;
  justify-content:center;
}

.movie-close::before,
.movie-close::after{
  content:"";
  position:absolute;
  width:18px;
  height:2px;
  background:#333;
  transition:.3s;
}

.movie-close::before{
  transform:rotate(45deg);
}

.movie-close::after{
  transform:rotate(-45deg);
}

@media (max-width:768px){

.movie-close{
  right:0;
  top:-50px;
}

.movie-modal-content{
  width:92vw;
}

}