@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,172,240,.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: 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: none; cursor: pointer; 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 }
.canver-wrapp-n .js-video-button { width: 100%; float: none; background: none; border: none; outline: none; cursor: pointer; display: inline-block; transition: all 0.25s ease-out 0s; margin: 0 auto 0; position: relative; z-index: 99; }

/*Smartphone css*/
@media screen and (max-width: 480px) {
.js-video-tex1 { font-size: 14px; margin: 9px 0 0; }
}
 @media screen and (min-width:481px) and (max-width:600px) {
.js-video-tex1 { font-size: 14px; margin: 9px 0 0; }
}
 @media screen and (min-width:601px) and (max-width:767px) {
.js-video-tex1 { font-size: 14px; margin: 9px 0 0; }
}
 @media screen and (min-width:768px) and (max-width:900px) {
.js-video-tex1 { font-size: 13px; }
}
 @media screen and (min-width:901px) and (max-width:1024px) {
.js-video-tex1 { font-size: 14px; }
}
 @media screen and (min-width:1025px) and (max-width:1240px) {
}