@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, 0.777); */
    background-color:rgba(25, 35, 65, 0.9);
    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:1280px;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 60px;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;
    border-radius: 8px;
    filter: drop-shadow(0 0 30px rgba(0,0,0,0.5));
}
.modal-video-movie-wrap iframe { 
    position:absolute;top:0;left:0;width:100%;height:100%; 
    border-radius: 8px; overflow: hidden; 
}
.modal-video-close-btn {
    margin: 0; outline: none;
    position:absolute;z-index:2;top:-42px;right:0;display:inline-block;width:34px;height:34px;overflow:hidden;border:none;background:transparent;
    transition:all 0.2s;
}

@media (orientation: landscape) {
    .modal-video-close-btn{top:0;right:-42px}
}

.modal-video-close-btn:before{transform:rotate(45deg)}
.modal-video-close-btn:after{transform:rotate(-45deg)}
.modal-video-close-btn:before,
.modal-video-close-btn:after{content:'';position:absolute;height:4px;width:100%;top:50%;left:0;margin-top:-1px;background:#ff4780;border-radius:3px;margin-top:-4px}

.modal-video-close-btn:hover { transform: rotate(90deg); }

/*
.modal-video-close-btn:hover::before,
.modal-video-close-btn:hover::after { background:#f82165; }
*/