@charset "UTF-8";
/* CSS Document */

/*----SCREENSHOT---*/

#screenshot #screenshot-box{
	width:100%;
	padding-top:30px;
	padding-bottom:30px;
}

#screenshot #screenshot-box img{
	width:200px;
	/*float:left;*/
	margin:3px;
	border:1px #000 solid;
}

#screenshot #screenshot-box a:hover img{
	border:1px #777 solid;
}

a.zoom:after{
	-webkit-transform:scale(0.5);
	-moz-transform:scale(0.5);
	-ms-transform:scale(0.5);
	transform:scale(0.5);
}


/*----------MOVIE------------*/
#movie #movie-box{
	width:100%;
	text-align:center;
	padding-top:20px;
	padding-bottom:30px;
}

#movie #movie-box #theater{
	width:90%;
	display:block;
	margin:0 auto;
	display:none;
	background-color:#000;
}
#movie #movie-box #movietitle{
	text-align:center;
	color:#CCC;
	margin-top:0px;
	margin-bottom:30px;
}


#movie a.thumb{
	display:inline-block;
	width:200px;/*272px;*/
	text-align:center;
	color:#CCC;
	text-decoration:none;
	font-size:80%;
	margin:30px 15px;
	position:relative;
}

#movie a.thumb img.thumb-image{
	width:100%;
}

#movie a.thumb img.mark-new{
	position:absolute;
	top:0;
	left:0;
}

#movie a.thumb span.icon-new{
	background-color:#900;
	padding:2px 5px;
	color:#FFF;
	border-radius:5px;
	margin-right:5px;
	display:none;
}




/*-------sound-----*/

#music-box{
	text-align:center;
	margin:60px auto;
	max-width:820px;
}
.music{
	width:46%;/*21%;*/
	/*max-width:390px;*/
	background-color:rgba(0,0,0,0.4);
	padding:8px;
	border:1px #222 solid;
	margin:0.2%;
	display:inline-block;
}
			
.music .button-ui{
	display:block;
	background-image:url(../images/gallery/music/ui-bg.jpg);
	background-repeat:repeat-x;
	overflow:hidden;
	position:relative;
	
	width:30%;
	height:62px;
	float:left;

}
.music .button-ui img{
	position:absolute;
	top:0;
	left:50%;
	margin-left:-57px;
}
.music .music-name{
	display:block;
	
	width:67%;
	/*lheight:62px;
	ine-height:62px;*/
	float:left;
	text-align:left;
	margin-left:3%;
	margin-top:1%;
	
	font-size:12px;
	line-height:1.7;
	
	color:#CCC;
}

.music .music-name span,
.music .music-name marquee{
	font-size:150%;
	color:#FFF;
	display:block;
	margin:0;
	width:100%;
}
		
		

@media screen and (max-width:1280px){
	#screenshot #screenshot-box img{
		width:15.4%;
		margin:0.5%;
	}
}

@media screen and (max-width:1000px){
	#screenshot #screenshot-box img{
		width:23.5%;
		margin:0.5%;
	}
	
}

@media screen and (max-width:800px){
	.music{
		width:45%;
	}
	.music .button-ui{
		height:44px;
		float:left;
		background-size:5px 44px;
	}
	.music .button-ui img{
		width:81px;
		margin-left:-40px;
	}

	.music .music-name{
		float:left;
		/*height:44px;
		line-height:44px;*/
		font-size:10px;
		margin-top:0;
	}
}

@media screen and (max-width:640px){
	#movie a.thumb{
		width:40%;
	}
	#music-box{
		margin-top:30px;
		margin-bottom:30px;
	}
	.music{
		width:93%;
	}
}
@media screen and (max-width:600px){
	#screenshot #screenshot-box img{
		width:31.6%;
	}
	
	#movie a.thumb{
		width:90%;
		border:1px #555 solid;
		height:30px;
		line-height:30px;
		border-radius:5px;
		margin:5px auto;
		background-color:rgba(0,0,0,0.5);
	}
	#movie a.thumb img{
		display:none;
	}

	#movie a.thumb img.mark-new{
		display:none;
	}

	#movie a.thumb span.icon-new{
		display:inline;
	}
}


@media screen and (max-width:400px){
	#screenshot #screenshot-box img{
		width:48.1%;
	}
}