@charset "utf-8";
@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,.9);
    z-index:9999999999;
    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:940px;
    width:100%;
    height:100%;
    margin:0 auto;
    display:table
}
.modal-video-inner {
    display:table-cell;
    vertical-align:middle;
    width:100%;
    height:100%
}
.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:-35px;
    right:-35px;
    display:inline-block;
    width:35px;
    height:35px;
    overflow:hidden;
    border:none;
    outline:0;
    cursor:pointer;
    background:0 0
}
.modal-video-close-btn:before {
    transform:rotate(45deg)
}
.modal-video-close-btn:after {
    transform:rotate(-45deg)
}
.modal-video-close-btn:after,
.modal-video-close-btn:before {
    content:'';
    position:absolute;
    height:2px;
    width:100%;
    top:50%;
    left:0;
    background:#fff;
    border-radius:5px;
    margin-top:-6px
}
.js-video-button {
    width:48px;
    float:left;
    background:0 0;
    border:none;
    outline:0;
    cursor:pointer;
    display:inline-block;
    top:50%;
    transform:translateY(-50%);
    transition:.25s ease-out;
    position:absolute;
    left:0;
    right:0;
    margin:0 auto;
    z-index:9
}
@media screen and (max-width:480px) {
    .modal-video-close-btn {
        right:5%
    }
}
@media screen and (min-width:481px) and (max-width:600px) {
    .modal-video-close-btn {
        right:5%
    }
}
@media screen and (min-width:601px) and (max-width:767px) {
    .modal-video-close-btn {
        right:5%
    }
}
@media screen and (min-width:768px) and (max-width:900px) {
    .modal-video-close-btn {
        right:3%
    }
}
@media screen and (min-width:901px) and (max-width:1024px) {
    .modal-video-close-btn {
        right:3%
    }
}
@media screen and (min-width:1025px) and (max-width:1240px) {
    .modal-video-close-btn {
        right:3%
    }
}