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



#wrapper {
	width:100%;
	margin: 0 auto;
}
#container {
	clear: both;
	max-width: 1100px;
    margin: 0 auto;
    width: 94%;
    padding-top: 40px;
	flex-wrap: wrap;
    display: flex;
}
ul#sort { margin: 0 auto;
    width: 90%;
    max-width: 752px;}
#sort li {
	list-style:none;
	float: left;
	color: #FFF;
	font-weight: 300;
	cursor: pointer;
	-moz-border-radius: 15px;
	-webkit-border-radius: 15px;
	border-radius: 15px;
	background: -moz-linear-gradient(
	top,
	#f5f5f5 0%,
	#dedcde);
	background: -webkit-gradient(
	linear, left top, left bottom,
	from(#2facbd),
	to(#c53e82));
	width: 10%;
}
#sort li:hover{ color:#C60167; background: -moz-linear-gradient(
	top,
	#FFF 0%,
	#FFF);
	background: -webkit-gradient(
	linear, left top, left bottom,
	from(#ffefef),
	to(#ffb8df));}

.all a { color:#333;}
.all h3{ line-height:1.3; color:#C72166; padding-bottom: 15px;}
.all span{ font-size:90%; color:#ef3d96;}
.new_mark{color: #fff; background-color: #c72066; border: 0 solid;}


.event,.game,.goods,.cd,.special {
	float: left;
	width: 27.1%;
    display: block;
    padding: 2.5%;
    background: url("../img/news_bg_bottom.gif") no-repeat left bottom, url(../img/news_bg_top.gif) no-repeat left top;
    background-size: 100%;
    text-align: left;
    color: #333;
    background-color: #FFF;
    position: relative;
}	



@media screen and (min-width: 640px)  {
.event,.game,.goods,.cd,.special { width: 26.6%; margin: 5px;}
#sort li { width: 9.5%;}
	

}


@media screen and (max-width: 639px) {
.event,.game,.goods,.cd,.special { width: 40%; padding:4%; margin: 1%;}
#sort li{ width: 30.3%; padding:3% 0; margin:1%;}
#container { padding-top: 20px;}
	

}