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

a.nav-product { color: #7da12c; }

.title {
	height: 28px;
	overflow: hidden;
	background: url(../../../images/index-title-bg.png) repeat-x left center;
}
.title span {
	background-color: #fff;
	padding-right: 2%;
}
.title label {
	display: inline-block;
	height: 26px;
	color: #1fbb89;
	padding: 0 15px;
	font-size: 16px;
	font-weight: normal;
	line-height: 26px;
	border: 1px solid #1fbb89;
	border-radius: 5px;
	vertical-align: top;
}

.feature ul { padding-bottom: 3%;}

.front,
.feature,
.feature li { margin-top: 3%; }

.feature li {
	float: left;
	display: inline;
	width: 25%;
	*width: 24.95% !important;
	text-align: center;
}
.feature img {
	width: 100%;
	max-width: 100px;
}
.feature .txt {
	padding: 5px 0;
	font-size: 14px;
}

.front-img {
    width: 47%;    
	*width: 46.5% !important;
}
.front-img img {
	width: 42%;
	max-width: 195px;
}
.front-txt {
	width: 53%;
	padding-top: 10%;
}
.front-txt h3 {
	padding: 3% 0 1%;
	color: #4c4c4c;
	font-size: 36px;
	font-weight: 400;
}
.front-txt p {
	color: #95be3a;
	font-size: 24px;
	font-weight: 400;
}

.case {
	padding: 2% 0;
	background: url(../../../images/case-bg.jpg) no-repeat center;
	background-size: 100% 100%;
}
.case li {
	float: left;
	width: 24%;
	*width: 23.92% !important;
	padding: .5%;
	text-align: center;
	overflow: hidden;
}
.case img {	width: 100%; }
.case .txt {
	position: absolute;
	left: 8%;
	top: 12%;
	color: #95be3a;
	font-size: 36px;
	font-weight: 300;
	line-height: 1.2;
}
.case .num {
	display: block;
	font-size: 72px;
}

.pro-tit {
	height: 22px;
	padding-left: 30px;
	color: #198630;
	font-size: 18px;
	font-weight: 400;
	line-height: 22px;
}

.param-img { padding: 3% 0; }
.param-img img {
	width: 100%;
	max-width: 605px;
}
.parameter .pro-tit { background-position: -538px -72px; }
.parameter table {
	min-width: 70%;
	margin: 3% auto;	
	border-left: 1px solid #e3e3e3;
	border-top: 1px solid #e3e3e3;
}
.parameter th,
.parameter td {
	padding: 7px 10px;
	font-size: 14px;
	line-height: 1.5;
	border-bottom: 1px solid #e3e3e3;
	border-right: 1px solid #e3e3e3;
}
.parameter th {
	color: #216d03;
	text-align: left;
}

.dir-title {
	height: 46px;
	background: url(../../../images/index-title-bg.png) repeat-x left center;
}
.dir-title a {
	display: inline-block;
	height: 46px;
	padding: 0 10px;
	vertical-align: middle;
	color: #fff;
	font-size: 18px;
	line-height: 46px;
	background-color: #40ba3a;
	border-radius: 8px;
}
	

@media screen and (max-width: 640px) {
	.title {
		height: 24px;
		margin-left: 2%;
	}
	.title span { padding-right: 4%; }
	.title label {
		height: 22px;
		line-height: 22px;
		padding: 0 8px;
		font-size: 14px;
	}
	
	.front,
	.feature,
	.feature li { margin-top: 5%; }
	.feature ul { padding-bottom: 5%;}	
	.feature li { width: 50%; }
	.feature img { width: 45%; }
	
	.front-img { width: 42%; }
	.front-txt { width: 58%; }
	.front-txt h3 { font-size: 18px; }
	.front-txt p,
	.direction h3 { font-size: 14px; }
	
	.case { background: #fff; }
	.case li {
		width: 93%;
		padding: 2% 3.5%;
	}
	
	.pro-tit {
		font-size: 16px;
		font-weight: bold;
	}
	
	.parameter { padding: 0 3%; }
}

@media screen and (min-width: 641px) and (max-width: 800px) {
	.title,
	.pro-tit { margin-left: 1%; }
	
	.feature img { width: 55%; }
	
	.front-txt h3 { font-size: 26px; }
	.front-txt p { font-size: 18px; }
	
	.case li { width: 49%; }
}

@media screen and (min-width: 801px) and (max-width: 960px) {
	.title,
	.pro-tit { margin-left: 1%; }
	
	.case li { width: 32.3333333333333333%; }
}

@media screen and (min-width: 961px) and (max-width: 1124px) {
	.title,
	.pro-tit { margin-left: 1%; }
	
	.case img { max-width: 272px; }
}