@charset "utf-8";

.movieFrame {
	position: fixed;
	left: calc( 50vw - ( 100vh - 100px ) / 56 * 50 );
	top: 50px;
	display: none;
	width: calc( ( 100vh - 100px ) / 56 * 100 );
	height: calc( 100vh - 100px );
	z-index: 10001;
	border: none;
}
@media all and ( max-aspect-ratio: 85 / 56 ) {
	.movieFrame {
		left: 15px;
		top: calc( 50vh - ( 100vw - 30px ) / 100 * 28 );
		width: calc( 100vw - 30px );
		height: calc( ( 100vw - 30px ) / 100 * 56 );
	}
}
.movieFrame.on {
	display: block;
}

.movieOverlay {
	position: fixed;
	left: 0;
	top: 0;
	display: none;
	width: 100%;
	height: 100%;
	z-index: 10000;
	background: rgba(0,0,0,0.8);
	cursor: pointer;
}
.movieOverlay.on {
	display: block;
}

.movieOverlay::before,
.movieOverlay::after {
	content: "";
	position: absolute;
	right: 10px;
	top: 30px;
	background: #ffffff;
	width: 40px;
	height: 4px;
	transform-origin: center;
}

.movieOverlay::before {
	transform: rotate(45deg);
}

.movieOverlay::after {
	transform: rotate(-45deg);
}