/*
Re:LieF 〜DeaR YoU〜
COPYRIGHT [C] RASK ALL RIGHTS RESERVED.
*/

/********************************************************************************

		MoviE

*********************************************************************************/

.movie {
	width: 100%;
	margin-bottom: 20px;
}
#op.movie, #teaser.movie {
	float: left;
	width: 50%;
	height: 360px;
}
#op.movie {
	padding-right: 30px;
}
#teaser.movie {
	padding-left: 30px;
}
#op .subTitle {
	background: url(../img/movie/title01.png) no-repeat center center;
	background-size: auto 20px;
}
#teaser .subTitle {
	background: url(../img/movie/title02.png) no-repeat center center;
	background-size: auto 20px;
}
#other .subTitle {
	background: url(../img/movie/title03.png) no-repeat center center;
	background-size: auto 20px;
}
#AprilFools .subTitle {
	background: url(../img/movie/title04.png) no-repeat center center;
	background-size: auto 20px;
}
.thumb {
	cursor: pointer;
}
.thumb img {
	width: 100%;
	height: auto;
	border: 1px solid #cccccc;
}
.youtube {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	width: 100%;
	max-width: 1280px;
	height: auto;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-transform-origin: center center;
	-moz-transform-origin: center center;
	transform-origin: center center;
	z-index: 9999;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}
#AprilFools.movie {
	width: 100%;
	height: 360px;
}
#AprilFools .thumb {
	float: left;
	width: 50%;
}
#AprilFools .thumb:nth-child(2) {
	padding-right: 30px;
}
#AprilFools .thumb:last-child {
	padding-left: 30px;
}
#other {
	clear: both;
	height: 270px;
}
#other .thumb {
	float: left;
	width: 25%;
	margin-bottom: 20px;
}
#other .thumb:nth-child(4n+1) {
	padding-right: 15px;
}
#other .thumb:nth-child(4n+2) {
	padding: 0 10px 0 5px;
}
#other .thumb:nth-child(4n+3) {
	padding: 0 5px 0 10px;
}
#other .thumb:nth-child(4n+4) {
	padding-left: 15px;
}

@media screen and (max-width : 680px){
	#movieWrap {
		padding: 0 20px;
		margin-bottom: 40px;
	}
	#op.movie, #teaser.movie {
		float: none;
		width: 100%;
		height: auto;
		padding: 0;
		margin-bottom: 40px;
	}
	#AprilFools.movie {
		height: auto;
	}
	#AprilFools .thumb {
		float: none;
		width: 100%;
		margin-bottom: 40px;
	}
	#AprilFools .thumb:nth-child(2) {
		padding-right: 0;
		margin-bottom: 20px;
	}
	#AprilFools .thumb:last-child {
		padding-left: 0;
	}
	#other {
		height: auto;
		padding: 0;
	}
	#other .thumb {
		width: 50%;
		margin-bottom: 20px;
	}
	#other .thumb:first-child {
		padding-right: 10px;
	}
	#other .thumb:nth-child(2) {
		padding: 0 0 0 10px;
	}
	#other .thumb:nth-child(3) {
		padding: 0 10px 0 0;
	}
	#other .thumb:last-child {
		padding-left: 10px;
	}
}