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

#mainbanner:before{ background:url(../images/index/index-banner-l.png); width:488px; height:500px;}
#mainbanner:after{  background:url(../images/index/index-banner-r.png); width:467px; height:600px;}	
.banner-txt{padding-left:50%; padding-right:5%; padding-top:10%;}

#index-middle{ margin:80px 0;}
#index-company{ text-align:center;}
	.company-tit {color:#444444; font-size:36px; font-weight:700; padding:20px 0;}
 	.company-tit span{color:#ffd900;}
#index-product{ margin-top:80px;}
#index-product ul{ list-style:none; padding:0; margin:0;}
#index-product li{ width:33.33%; float:left; padding:1%;}
	.product-tit{ font-size:20px; font-weight:500; padding-bottom:15px;}
	.product-tit:before{content: "\f101"; font-family:FontAwesome; color:#ffd900; font-size:24px; padding-right:10px;}
	.product-img a{ background:#eeeeee; border:1px solid #333333; text-align:center; display:block; position:relative;}
	.product-img a:before{ opacity:0; content:""; position:absolute; top:0; bottom:0; left:0; right:0; background:#f7e377; z-index:3;}
	.product-img a:after{  opacity:0;content: "\f0c1"; font-family:FontAwesome; position:absolute; top:50%;  left:50%; color:#FFF; z-index:5; font-size:50px; -moz-transform: translate(-50%, -50%);	-webkit-transform: translate(-50%, -50%);	-o-transform: translate(-50%, -50%);	-ms-transform: translate(-50%, -50%);	transform: translate(-50%, -50%);
	-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
	.product-img a:hover{ border:1px solid #f7bc77;}
	.product-img a:hover:before{opacity:0.8;}
	.product-img a:hover:after{opacity:1;}
@media(max-width:1199px) {
	#mainbanner:before, #mainbanner:after{ background:none;}
}
@media(max-width:999px) {
	.product-tit{ font-size:18px;}
	.product-tit:before{padding-right:5px;}
}
@media(max-width:900px) {
	#index-product li{ width:50%;}
}
@media(max-width:600px) {
	#index-middle{ margin:0 0 50px;}
	#index-product{ margin-top:50px;}	
}
@media(max-width:570px) {
	.product-tit{ font-size:15px;}
}
@media(max-width:535px) {
	#index-product li{ float:none;width:auto;}
}
@media(max-width:480px) {
	.company-tit{ font-size:28px;}
}