/* common - rem */
a,
body { color: #2b2b2b; }
.r_li, .r_mp { margin: 0; padding: 0; }
.full, .fullWidth { width: 100%; }
.blind { overflow: hidden; clip: rect(0 0 0 0); margin: -1px; }
.r_li { list-style-type: none; }
.full { height: 100%; box-sizing: border-box; }
.center { text-align: center; }
.flex { display: box; display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: -moz-flex; display: -o-flex; display: flex; -webkit-align-items: center; -ms-align-items: center; -moz-align-items: center; -o-align-items: center; align-items: center; -webkit-justify-content: center; -ms-justify-content: center; -moz-justify-content: center; -o-justify-content: center; justify-content: center; -ms-flex-align: center; }
.block { display: block; }
.i_block, .popup.moviePop .btnClose, .popup.moviePop .container, .popup.moviePop .content { display: inline-block; }
.i_block { vertical-align: middle; }
.hidden { overflow: hidden; }
.clear { display: block; content: ""; height: 0; font-size: 0; opacity: 0; filter: alpha(opacity=0); clear: both; }
.blind { position: absolute; width: 1px; height: 1px; }
.bold { font-weight: bold; }
[data-ephox-mobile-fullscreen-style] header { display: none; }

.popup.moviePop { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); top: 0; left: 0; z-index: 999; display: none; }
.popup.moviePop .content { width: auto; min-width: 540px; height: auto; min-height: 240px; top: 52%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); position: relative; background: #3a3552; max-width: 100%; overflow: hidden; color: #fff; font-size: 24px; padding: 4%; }
.popup.moviePop .content:after { background-size: contain; top: -130px; right: -160px; opacity: 0.15; width: 607px; min-height: 560px; }
.popup.moviePop .btnClose { position: absolute; width: 68px; top: 12px; right: 12px; opacity: 0.5; text-align: center; height: 68px; }
.popup.moviePop .btnClose:after,
.popup.moviePop .btnClose:before { content: ""; position: absolute; left: -5px; height: 2px; background-color: #fff; width: 80px; right: 0; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }
.popup.moviePop .btnClose:before { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 50%; }
.popup.moviePop .btnClose:after { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 50%; }
.popup.moviePop .btnClose span { display: inline-block; line-height: 65px; color: #fff; opacity: 0; font-size: 1rem; margin-left: -10px; width: 100%; }
.popup.moviePop .btnClose:hover { opacity: 0.8; }
.popup.moviePop .btnClose:hover span { opacity: 1; }
.popup.moviePop .btnClose:hover:before { top: 0; -webkit-transform: rotate(0); transform: rotate(0); width: 68px; }
.popup.moviePop .btnClose:hover:after { bottom: 0; -webkit-transform: rotate(0); transform: rotate(0); width: 68px; }
.popup.moviePop .container .title { font-size: 24px; color: #fff; font-weight: 400; }
.popup.moviePop .container ul { font-size: 16px; color: #d8d8ea; margin-top: 30px; }
.popup.moviePop .container ul li { padding-left: 10px; position: relative; white-space: nowrap; }
.popup.moviePop .container ul li:before { content: "-"; position: absolute; left: 0; top: 0; }
#Movie .content { overflow: inherit; border: 1px solid #555; background: #000; padding: 0; }
#Movie .content:after { display: none; }
#Movie .content .btnClose { width: 68px; height: 68px; display: inline-block; position: absolute; top: -88px; right: 0; }
#Movie .content .container,
#Movie .content .container iframe { width: 100%; height: 100%; }

/* pc/mo */
.pc { display: block !important; }
.mo { display: none !important; }
.pcFlex { display: flex !important; }
.moFlex { display: none !important; }
img { max-width: 100%; }
.hide { opacity: 0 !important; }
.on { opacity: 1 !important; transition: opacity 0.8s; }

@media screen and (min-width: 1280px) {
    .only-m { display: none !important; }
}

@media screen and (max-width: 1279px) {
    .only-pc { display: none !important; }
}

@media screen and (max-width: 767px) {
    .pc { display: none !important; }
    .mo { display: block !important; }
    .pcFelx { display: none !important; }
    .moFelx { display: flex !important; }
}

@media screen and (max-width: 640px) {
    .popup.moviePop .content { min-width: 100vw; min-height: 56.25vw; }
}