/* CSS Document */

/* [ Gallery ]
===================================================================== */

#works .manufacturing{
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	padding-bottom: 30px;
}
.manufacturing p{
	text-align: left;
	padding-bottom: 30px;
}

/* gallery */

#modal{
	position: relative;
	width: 100%;
	height: 650px;
	overflow: hidden;
}
#modal .car_img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 650px;
	z-index: 0;
}
#pc_gallery{
	width: 100%;
}
#pc_gallery img{
	position: absolute;
	z-index: 2;
}
#pc_gallery .gallery_1 img{ top: 250px; left: 0; }
#pc_gallery .gallery_2 img{ top: 150px; left: 15%; }
#pc_gallery .gallery_3 img{ top: 70px; left: 28%; }
#pc_gallery .gallery_4 img{ top: 310px; left: 80%; }
#pc_gallery .gallery_5 img{ top: 0; left: 50%; }
#pc_gallery .gallery_6 img{ top: 290px; left: 61%; }
#pc_gallery .gallery_7 img{ top: 430px; left: 54%; }
#pc_gallery .gallery_8 img{ top: 310px; left: 38%; }

#pc_gallery a:hover{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 650px;
	z-index: 1;
}
#pc_gallery .gallery_1 a:hover{ background: url(../img/works/bg_gallery_1.jpg) left top no-repeat; }
#pc_gallery .gallery_2 a:hover{ background: url(../img/works/bg_gallery_2.jpg) left top no-repeat; }
#pc_gallery .gallery_3 a:hover{ background: url(../img/works/bg_gallery_3.jpg) left top no-repeat; }
#pc_gallery .gallery_4 a:hover{ background: url(../img/works/bg_gallery_4.jpg) left top no-repeat; }
#pc_gallery .gallery_5 a:hover{ background: url(../img/works/bg_gallery_5.jpg) left top no-repeat; }
#pc_gallery .gallery_6 a:hover{ background: url(../img/works/bg_gallery_6.jpg) left top no-repeat; }
#pc_gallery .gallery_7 a:hover{ background: url(../img/works/bg_gallery_7.jpg) left top no-repeat; }
#pc_gallery .gallery_8 a:hover{ background: url(../img/works/bg_gallery_8.jpg) left top no-repeat; }

#pc_gallery .gallery_1 a:hover,#pc_gallery .gallery_2 a:hover,#pc_gallery .gallery_3 a:hover,#pc_gallery .gallery_4 a:hover,
#pc_gallery .gallery_5 a:hover,#pc_gallery .gallery_6 a:hover,#pc_gallery .gallery_7 a:hover,#pc_gallery .gallery_8 a:hover{ background-size: 100% auto; }

#sp_gallery{
	display: none;
}

@media screen and (max-width: 960px){
	#works .manufacturing{
		padding-bottom: 8%;
	}
	.manufacturing p{
		padding-bottom: 0;
	}
	#modal{
		height: auto;
	}
	#modal .car_img{
		position: relative;
		width: 70%;
		height: auto;
		margin: 0 auto;
		padding-right: 8%;
	}
	
	#pc_gallery{ display: none; }
	#sp_gallery{ display: block; }
	
	#sp_gallery{
		width: 100%;
		margin: 0 auto;
	}
	#sp_gallery li a img{
		width: auto;
		height: 42px;
		float: left;
		margin: 0 10px 10px 0;
	}
}
@media screen and (max-width: 650px){
	#modal .car_img{
		width: 100%;
	}
	#sp_gallery{
		width: 101%;
		margin: 0 auto;
	}
	#sp_gallery li a{
		float: left;
		width: 24%;
		text-align: left;
		margin: 0 1% 10px 0;
	}
	#sp_gallery li a img{
		float: none;
		margin: 0;
	}
}