/* top */
.top div{
	display:block;
	height:500px;
	background:url(../producing/bg.jpg) center top no-repeat;
}
.top h1{
	padding-top:120px;
	font-size:45px;
	text-align:center;
}
.top p{
	padding:30px 15px;
	font-size:23px;
	text-align:center;
}

.title img, .choufu img{
	display:block;
	margin:10px auto;
}
.title{
	text-align:center;
	font-size:22px;
	padding-bottom:20px;
}


/*flow*/
.flow{
	margin:50px auto;
	max-width:1200px;
}

.flow ul{
	margin:20px auto;
}

.flow li{
	margin:10px 5px;
	width:290px;
	height:290px;
	float:left;
	background: center top no-repeat;
	background-size:100%;
}
.flow li span{
	display:block;
	margin-top:240px;
	height:45px;
	background-image:url(../img/skel-w.png);
	text-align:center;
	font-size:18px;
	padding-top:10px;
}

.flow li:nth-of-type(1){background-image:url(../producing/f1.jpg);}
.flow li:nth-of-type(2){background-image:url(../producing/f2.jpg);}
.flow li:nth-of-type(3){background-image:url(../producing/f3.jpg);}
.flow li:nth-of-type(4){background-image:url(../producing/f4.jpg);}
.flow li:nth-of-type(5){background-image:url(../producing/f5.jpg);}
.flow li:nth-of-type(6){background-image:url(../producing/f6.jpg);}
.flow li:nth-of-type(7){background-image:url(../producing/f7.jpg);}
.flow li:nth-of-type(8){background-image:url(../producing/f8.jpg);}
.flow li:nth-of-type(9){background-image:url(../producing/f9.jpg);}
.flow li:nth-of-type(10){background-image:url(../producing/f10.jpg);}


/*lank*/
.lank{
	margin:100px auto;
	max-width:1200px;
}

.lank ul{
	margin:20px auto;
}

.lank li{
	margin:20px 0px; 
	width:45%;
	min-height:220px;
	float:left;
}
.lank h2{
	display:inline;
	font-size:22px;
	font-weight:bold;
	padding:5px;
	border-bottom:solid 4px #17343C;
}
.lank li p:nth-of-type(1){
	margin-top:20px;
}
.lank li img{
	display:block;
	float:left;
	width:50%;
	padding-right:10px;
	max-width:280px;
}

/*label*/
.label{
	margin:100px auto;
	max-width:1200px;
	padding:15px;
}

.label ul{
	margin:20px auto;
}

.label li{
	margin:10px; 
	font-size:20px;
	height:155px;
	width:45%;
	text-align:center;
}
.label li img{
	padding:10px;
	width:100%;
	max-width:500px;
}
.label div{
	margin:20px auto;
	max-width:800px;
}

.choufu{
	padding:20px 10px;
	font-size:28px;
	font-weight:bold;
	text-align:center;
}






/*brand*/
.brand{
	margin:100px auto;
	max-width:1200px;
}

.brand ul{
	margin:20px auto;
}

.brand li{
	margin:10px; 
	width:45%;
	height:320px;
}
.brand h2{
	font-size:22px;
	font-weight:bold;
	padding:30px 5px 5px 5px;
	text-align:center;
}
.brand li p:nth-of-type(1){
	margin-top:20px;
}
.brand li img{
	float:left;
	padding-right:10px;
}




.flow:after, .lank:after, .lank li:after, .brand:after{
	content:"";
	display:block;
	clear:both;
}




@media only screen and (max-width: 768px) {

.top h1{
	font-size:30px;
}
.lank h2{
	font-size:18px;
}
.lank li{
	font-size:16px;
}
.label li{
	height:130px;
}

.label .sub{
	font-size:19px;
}

.brand li{
	width:90%;
	float:none;
}

.choufu{
	font-size:20px;
}

}

@media only screen and (max-width: 480px) {

.top h1{
	font-size:20px;
}
.title{
	font-size:18px;
}

.lank li{
	width:90%;
	padding:5%;
	min-height:400px;
	float:none;
}
.lank li img{
	display:block;
	margin:auto;
	float:none;
	width:100%;
	padding:0px;
}

.lank h2{
	width:90%;
	margin:auto;
	text-align:center;
	padding:5px;
	display:block;
}

.label li{
	width:90%;
	float:none;
}

.brand li{
	width:90%;
	height:500px;
	float:none;
}
.brand h2{
	padding:10px 5px 5px 5px;
}

.brand li img{
	display:block;
	margin:auto;
	float:none;
	padding:0px 10px;
}

}