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

/*配色*/
header, .topLink{
	/*background:rgba(7,74,89,0.5);*/
	background:#6a929b;
}
.fixed header{background:#6a929b;}


.workBg{
	position:relative;
	width:100%;
	height:100%;
	overflow:hidden;
}
.bg2{
	position:absolute;
	top:0;
	left:0;
}
p{
	margin:30px 0 0;
	text-align:center;
	font-size:0.8em;
	color:#999;
}
.list{
	padding-top:10px;
	margin:0 -1.5%;
	overflow:hidden;
}
.list li{
	width:22%;
	margin:0 1.5% 40px;
	background:#8c67a9;
	float:left;
}
.list img{
	width:100%;
	box-sizing:border-box;
	border:#8c67a9 solid 1px;
}

.list a{
	width:100%;
	color:#fff;
	display:block;
	margin:-9px 0 0 9px;
}
.casename{
	padding:5px 0;
	
}
.casename .en2{
	font-size:0.8em;
	color:#f4eb2b;
	text-align:right;
}
.casename::after{
	content:'';
	width:80%;
	height:2px;
	background:#baa4cb;
	display:block;
	margin:5px 0 0;
}

@media screen and (max-width:900px){
.list{
	margin:0 -1.5%;
}
.list li{
	width:30%;
	margin:0 1.5% 40px;
}	
.casename{
	font-size:0.9em;
}
.casename .en2{
	font-size:0.9em;
}
}
@media screen and (max-width:720px){
/*配色*/
.mainMenu{
	background:rgba(7,74,89,1);
}	
}
@media screen and (max-width:640px){
.list{
	margin:0 0 0 -2%;
}
.list li{
	width:46%;
	margin:0 2% 40px;
}	

}
@media screen and (max-width:480px){
.list{
	margin:0 10px 0 0;
	overflow:visible;
}
.list li{
	float:none;
	width:100%;
	max-width:360px;
	margin:0px auto 40px;
	display:block;
}	
}