@charset "UTF-8";
/* -----------------------------------------------------------
   COFFEE
------------------------------------------------------------*/
#contentsArea h1{	text-indent:-9999px;}
#contentsArea{background: url(../img/movie_bg.png) !important;}
#mList{list-style:none;}

#mList #movieBtn1 img{ background-image: url(../movie/img/movie_btn1.jpg);}
#mList #movieBtn2 img{ background-image: url(../movie/img/movie_btn2.jpg);}
#mList #movieBtn3 img{ background-image: url(../movie/img/movie_btn3.jpg);}
#mList #movieBtn4 img{ background-image: url(../movie/img/movie_btn4.jpg);}
#mList #movieBtn5 img{ background-image: url(../movie/img/movie_btn5.jpg);}
#mList #movieBtn6 img{ background-image: url(../movie/img/movie_btn6.jpg);}
#mList #movieBtn7 img{ background-image: url(../movie/img/movie_btn7.jpg);}
#mList #movieBtn8 img{ background-image: url(../movie/img/movie_btn8.jpg);}
#mList #movieBtn9 img{ background-image: url(../movie/img/movie_btn9.jpg);}
#mList #movieBtn10 img{ background-image: url(../movie/img/movie_btn10.jpg);}

@media all and (min-width: 768px) {
#contentsArea .inner{
	padding:40px;
	}
#contentsArea h1{
	display:block;
	height:310px;
	background:url(../img/movie_header.jpg) no-repeat;
	}
#mList{
	width:900px;
	margin:0 auto;
	}
#mList li{
	width:290px;
	display:inline-block;
	margin-right:15px;
	text-align:center;
	margin-bottom:20px;
	vertical-align:top;
	}
#mList li:nth-child(3n){ margin-right:0;}
#mList a{
	display:block;
	color:#039dd6;
	font-size:94%;
	line-height:1.4;
	}
#mList img{
	width:290px;
	height:160px;
	margin-bottom:4px;
	background-repeat:no-repeat;
	}
}

@media all and (max-width: 767px) {
#contentsArea{
	background-size: contain;
}
#contentsArea .inner{
	padding: 20px 0;

}
#contentsArea h1{
	display:block;
	width:100%;
	height:0;
	padding-top:51.56%;
	background-size:cover;
	background-image:url(../img/movie_header_smp.jpg);
	}
#contentsArea .inner{
	width:90%;
	margin:0 auto;
	padding-bottom: 30px;
	}
#mList{
	width:100%;
	margin:0 auto;
	}
#mList li{
	width:48%;
	float:left;
	margin-right:4%;
	text-align:center;
	margin-bottom:4%;
	}
#mList li:nth-child(2n){ margin-right:0;}
#mList a{
	display:block;
	color:#039dd6;
	font-size:80%;
	line-height:1.2;
	}
#mList img{
	width:100%;
	height:0;
	padding-top:55.172%;
	background-size:cover;
	margin-bottom:4px;
	background-repeat:no-repeat;
	}
}