@keyframes modal-video {
 from {
  opacity: 0
 }
 to {
  opacity: 1
 }
}
@keyframes modal-video-inner {
 from {
  transform: translate(0, 100px)
 }
 to {
  transform: translate(0, 0)
 }
}
.modal-video {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 1);
 z-index: 1000000;
 cursor: pointer;
 opacity: 1;
 animation-timing-function: ease-out;
 animation-duration: .3s;
 animation-name: modal-video;
 -webkit-transition: opacity .3s ease-out;
 -moz-transition: opacity .3s ease-out;
 -ms-transition: opacity .3s ease-out;
 -o-transition: opacity .3s ease-out;
 transition: opacity .3s ease-out
}
.modal-video-close {
 opacity: 0
}
.modal-video-close .modal-video-movie-wrap {
 -webkit-transform: translate(0, 100px);
 -moz-transform: translate(0, 100px);
 -ms-transform: translate(0, 100px);
 -o-transform: translate(0, 100px);
 transform: translate(0, 100px)
}
.modal-video-body {
 max-width: 100%;
 width: 100%;
 height: 100%;
 margin: 0 auto;
 padding: 0 10px;
 display: flex;
 justify-content: center;
 box-sizing: border-box
}
.modal-video-inner {
 display: flex;
 justify-content: center;
 align-items: center;
 width: 100%;
 height: 100%
}
@media (orientation: landscape) {
 .modal-video-inner {
  padding: 10px 10px;
  box-sizing: border-box
 }
}
.modal-video-movie-wrap {
 width: 100%;
 height: 0;
 position: relative;
 padding-bottom: 56.25%;
 background-color: #333;
 animation-timing-function: ease-out;
 animation-duration: .3s;
 animation-name: modal-video-inner;
 -webkit-transform: translate(0, 0);
 -moz-transform: translate(0, 0);
 -ms-transform: translate(0, 0);
 -o-transform: translate(0, 0);
 transform: translate(0, 0);
 -webkit-transition: -webkit-transform .3s ease-out;
 -moz-transition: -moz-transform .3s ease-out;
 -ms-transition: -ms-transform .3s ease-out;
 -o-transition: -o-transform .3s ease-out;
 transition: transform .3s ease-out
}
.modal-video-movie-wrap iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;

}
.modal-video-close-btn {
 position: absolute;
 z-index: 2;
 top: -45px;
 right: 0;
 display: inline-block;
 width: 35px;
 height: 35px;
 overflow: hidden;
 border: none;
 background: transparent
}
@media (orientation: landscape) {
 .modal-video-close-btn {
  top: 0;
  right: -45px
 }
}
.modal-video-close-btn:before {
 transform:translate(-50%,-50%) rotate(45deg)
}
.modal-video-close-btn:after {
 transform:translate(-50%,-50%) rotate(-45deg)
}
.modal-video-close-btn:before, .modal-video-close-btn:after {
 content: '';
 position: absolute;
 height: 3px;
 width: 70%;
 top: 50%;
 left: 50%;
 background: #fff;
 border-radius: 5px;
}
.modal-video-movie-wrap{background:#000;padding:0 !important;height:100vh !important;}
.modal-video-body iframe{ width: 100%; height: calc(100% - 208px);margin-top:100px !important;}
.modal-video-close-btn{top:0;background:#F00;border-radius:100px;width: 48px;height: 48px;margin: 30px;}