@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{
animation-duration: 0.3s;
animation-name: modal-video;
animation-timing-function: ease-out;
background-color: rgba(0, 0, 0, 0.85);
background-image: url("../images/popup_book.png");
background-position: center center;
background-repeat: no-repeat;
cursor: pointer;
height: 100%;
left: 0;
opacity: 1;
position: fixed;
top: 0;
transition: opacity 0.3s ease-out 0s;
width: 100%;
z-index: 1000000;
}


.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:720px;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;background:transparent}.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:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px}


/*-------------------[480px]------------------*/
@media only screen and ( max-width: 768px ) {

.modal-video {
background-image:none;
}

}

/*-------------------[320px]------------------*/
@media only screen and ( max-width: 479px ) {


.modal-video {
background-image:none;
}

.modal-video-body {
  display: table;
  height: 100%;
  margin: 0 auto;
  max-width: 720px;
  width: 95%;
}

.modal-video-close-btn {
  background: transparent none repeat scroll 0 0;
  border: medium none;
  display: inline-block;
  height: 35px;
  left: 50%;
  margin-left: -15px;
  overflow: hidden;
  position: absolute;
  top: -35px;
  width: 35px;
  z-index: 2;
}

}