@charset "utf-8";

/*
 *
 *	movie style
 *
 */

/*======================================
	pageTit
======================================*/
.pageTit {
	background: url(../../images/second-tit.png), url(../images/tit-bg.jpg);
	background-position: center, center;
	background-repeat: repeat, no-repeat;
	background-size: 8px 8px, cover;
}



/*======================================
	movieBox
======================================*/
.movieBox {
	margin-bottom: 5%;
}


/****** movieList ******/
.movieBox .movieList li {
	overflow: hidden;
	float: left;
	width: 32%;
	margin: 0 2% 2em 0;
}
.movieBox .movieList li:nth-child(3n) {
	margin-right: 0;
}
.movieBox .movieList li:nth-child(3n+1) {
	clear: both;
}
.movieBox .movieList li a {
	position: relative;
	display: block;
	text-decoration: none;
}
.movieBox .movieList li figure {
	position: relative;
	overflow: hidden;
	line-height: 0;
	box-shadow: rgba(0,0,0,.3) 2px 2px 3px;
}
.movieBox .movieList li a figure:before,
.movieBox .movieList li a figure:after {
	content: '';
	display: block;
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 10;
}
.movieBox .movieList li a figure:before {
	width: 56px;
	height: 38px;
	margin: -19px 0 0 -28px;
	border-radius: 8px;
	border: #fff solid 1px;
	box-shadow: #fff 0 0 3px;
	background: #960009;
}
.movieBox .movieList li a figure:after {
	border: transparent solid;
	border-width: 10px 20px;
	border-left-color: #fff;
	margin: 0 -4px 9px 0;
}
.movieBox .movieList li figure img {
	width: 100%;
}
.movieBox .movieList li p {
	line-height: 1.4;
	margin: .5em 0 0;
	text-align: center;
}
.movieBox .movieList li .newIcon {
	position: absolute;
	display: block;
	top: 0em;
	left: -3em;
	width: 10em;
	padding: .2em;
	border: #fff double 3px;
	background: #ff6464;
	text-align: center;
	font-size: .8em;
	color: #fff;
	transform: rotate(-30deg);
}

/* hover */
.movieBox .movieList li a:hover figure img {
		-moz-transform: scale(1.1);
		-webkit-transform: scale(1.1);
		-ms-transform: scale(1.1);
	transform: scale(1.1);
}





/*============================================================================

	responsive

============================================================================*/
@media screen and (max-width:960px) {

}



@media screen and (max-width:767px) {
/*======================================
	movieBox
======================================*/
/****** movieList ******/
.movieBox .movieList li {
	width: 49%;
}
.movieBox .movieList li:nth-child(even) {
	margin-right: 0;
}
.movieBox .movieList li:nth-child(odd) {
	margin-right: 2%;
}
.movieBox .movieList li:nth-child(3n+1) {
	clear: none;
}

}



@media screen and (max-width:480px) {
/*======================================
	movieBox
======================================*/
/****** movieList ******/
.movieBox .movieList li {
	width: 100%;
}
.movieBox .movieList li:nth-child(3n) {
	margin-right: 0;
}

}