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

* { -webkit-text-size-adjust:none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} 
#header-wrap *, #middle *, #footer *{ -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;} 

body{color:#2a2d34; font-family: "Roboto", \5FAE\8EDF\6B63\9ED1\9AD4, sans-serif; margin:0; padding:0; font-size:15px;}

img{border:0; padding:0; margin:0; vertical-align: middle;	max-width: 100%; width: auto\9; /* ie8 */}

form {margin:0;}

a{ color:#666666; text-decoration:none; blr:expression(this.onFocus=this.blur()); noFocusLine:expression(this.onFocus=this.blur());}
	a:hover {text-decoration:none; color:#ef8700;}
	a img {border:none;}
	a:focus { -moz-outline-style: none; outline:none; text-decoration:none; color:#ef8700;} 

.table-container{width: 100%;	overflow-y: auto;	_overflow: auto;	margin: 0 0 1em;}
.table-container::-webkit-scrollbar{	-webkit-appearance: none;	width: 14px;	height: 14px;}
.table-container::-webkit-scrollbar-thumb{	border-radius: 8px;	border: 3px solid #fff;	background-color: rgba(0, 0, 0, .3);}

#container{background:#fff; overflow:hidden;
-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5); 
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);}

.wrap{height: 1%;}
.wrap:after {clear: both; content: " "; display: block; height: 0; visibility: hidden;}
.wrap{margin:0 auto; width:1200px; text-align: left; padding: 0 15px;}


/*header*/
#header-wrap, #header2{background:#FFF;}
	#header-wrap *{-webkit-transition: all 0.5s; -moz-transition: all 0.5s; -ms-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s;}
	.header--clone { position: fixed; width:100%;  z-index: 130;  top: 0;  left: 0;  
	-webkit-transform: translateY(-100%);    -ms-transform: translateY(-100%);  -o-transform: translateY(-100%); transform: translateY(-100%); 
	-webkit-transition: all 300ms ease-in-out;    -moz-transition: all 300ms ease-in-out; -o-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
	.header--stick {-webkit-transform: translateY(0%);   -ms-transform: translateY(0%); -o-transform: translateY(0%); transform: translateY(0%);
	-webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.5); -moz-box-shadow:    0px 0px 5px 0px rgba(50, 50, 50, 0.5); box-shadow:  0px 0px 5px 0px rgba(50, 50, 50, 0.5);}
	.sb-active .header--clone{-webkit-transform: translateY(-100%);      -ms-transform: translateY(-100%); -o-transform: translateY(-100%); transform: translateY(-100%);}
	.header--unstick {}

#logo{ float:left; padding:10px 0;}
	.logo_b{width:300px; height:60px;} .logo_m{ display: none; width:200px; height: 40px;} 

#lang{ float:right; padding:40px 0 10px}
	#lang ul{list-style:none; padding:0; margin:0;}
	#lang li{ float:left;}
	#lang li a{ display:block; position:relative; line-height:16px; padding:7px 10px;}
	#lang li a:before{content:" "; width:5px; height:5px; background:#bfbfbf; display:block; position:absolute; left:1px; top:15px;}
	#lang li a:after{ content:" "; width:5px; height:5px; background:#72906e; display:block; position:absolute; left:0px; top:14px;}

#nav-wrap{ background:#39865a;}
	#nav ul{ list-style:none; padding:0; margin:0;}
	#nav li{ float:left;}	
	#nav li a{color:#FFF; padding:15px 20px; display: inline-block; font-size:16px; line-height:15px; text-transform: uppercase;}
	#nav li a:hover, #nav li.active a{color:#ffd900;}
	#nav li + li:before{ content:"/"; padding: 0 5px; color:#FFF;}
@media(max-width:900px) {
	#lang, #nav{ display:none;}
	#subnav-wrap{ border-bottom:5px solid #39865a;}
	.logo_b{ display:none;} .logo_m{ display:block;}
}

#mainbanner{position:relative; overflow:hidden;}
#mainbanner:before{ background:url(../images/banner-l.png); width:481px; height:300px; position:absolute; top:0; left:0; display:inline-block; content:''; z-index:102;}
#mainbanner:after{  background:url(../images/banner-r.png); width:468px; height:360px; position:absolute; top:0; right:0; display:inline-block; content:''; z-index:105;}		
#mainbanner > .wrap{padding:0;}	
#banner-wrap{width:160%; margin:0 -30%;}
#mainbanner .swiper-pagination-bullet{width: 15px; height: 15px;}
#mainbanner .swiper-pagination-bullet-active{background: #39865a;}
.inner-wrap{padding:0 20%; position:absolute; left:0; right:0; top:0; }
.banner-txt{padding-left:40%; padding-right:20%; padding-top:5%;}
.banner-txt .title{ font-size:40px; font-weight:700; font-family: "Open Sans", \5FAE\8EDF\6B63\9ED1\9AD4, "Microsoft YaHei", sans-serif; line-height:1.2em; color:#FFF; text-shadow:0 0 2px rgba(100, 100, 100, 0.5);}
.banner-txt .title span{ color:#ffd900;}
.banner-txt .word { color:#FFF; font-size:20px; padding-top:10px;}
.banner-txt .title{opacity:0; -moz-transform: translate(50, 0);	-webkit-transform: translate(50px, 0);	-o-transform: translate(50px, 0);	-ms-transform: translate(50px, 0);	transform: translate(50px, 0);	transition:all 0.4s ease-out 0.8s;	-webkit-transition:all 0.4s ease-out 0.8s;	-moz-transition:all 0.4s ease-out 0.8s;	-o-transition:all 0.4s ease-out 0.8s;	}
.banner-txt .word {opacity:0; 	-moz-transform: translate(50px, 0);	-webkit-transform: translate(50px, 0);	-o-transform: translate(50px, 0);	-ms-transform: translate(50px, 0);	transform: translate(50px, 0);	transition:all 0.4s ease-out 1s;	-webkit-transition:all 0.4s ease-out 1s;	-moz-transition:all 0.4s ease-out 1s;	-o-transition:all 0.4s ease-out 1s;	}
.swiper-slide-active .banner-txt .title,
.swiper-slide-duplicate-active .banner-txt .title,
.swiper-slide-active .banner-txt .word,
.swiper-slide-duplicate-active .banner-txt .word
{opacity:1; -moz-transform: translate(0, 0);	-webkit-transform: translate(0, 0);	-o-transform: translate(0, 0);	-ms-ransform: translate(0, 0); transform: translate(0, 0);	}

@media(max-width:1600px) {
	#mainbanner:before{ left:-10%;}
	#mainbanner:after{ right:-10%;}
}
@media(max-width:1600px) {
	#mainbanner:before{ left:-18%;}
	#mainbanner:after{ right:-18%;}
}
@media(max-width:1199px) {
	#mainbanner:before, #mainbanner:after{ background:none;}
	.banner-txt .title{ font-size:30px;}
	.banner-txt .word { font-size:20px; }
}
@media(max-width:860px) {
	.banner-txt .title{ font-size:24px;}
	.banner-txt .word { font-size:18px; }
}
@media(max-width:700px) {
	.banner-txt .title{ font-size:20px;}
	.banner-txt .word { font-size:15px; }
}
@media(max-width:570px) {
	.banner-txt .title{ font-size:15px;}
	.banner-txt .word { font-size:10px; }
}
@media(max-width:480px) {
	.banner-txt .title{ font-size:13px;}
	.banner-txt .word { display:none; }
}
@media(max-width:360px) {
	.banner-txt .title{ font-size:10px;}
}


#middle{ min-height:600px;}

#side{float:left; width:25%; margin:70px 0;}
	.side-tit{ text-transform:uppercase; color:#73906e; font-size:30px; font-weight:700; padding-left:15px; padding-bottom:20px;}
	#side ul{ list-style:none; padding:0; margin:0;}
	#side>ul>li{ margin-bottom:20px;}
	#side>ul>li>a{ background:#80c29c; color:#FFF; padding:15px; display:block; font-size:16px; text-transform:uppercase;}
	#side>ul>li>a:hover, #side>ul>li.active>a{color:#ffd900;}
	#side>ul>li>a:before{content: "\f101"; font-family:FontAwesome; color:#ffd900; padding-right:10px;}
	#side>ul>li>ul{ margin-top:20px;}
	#side>ul>li>ul>li>a{display:block; position:relative; line-height:1.5em; padding:7px 35px;}
	#side>ul>li>ul>li>a:hover, #side>ul>li>ul>li.active>a{color:#ef8700;}
	#side>ul>li>ul>li>a:before{content:" "; width:5px; height:5px; background:#bfbfbf; display:block; position:absolute; left:16px; top:14px;}
	#side>ul>li>ul>li>a:after{ content:" "; width:5px; height:5px; background:#72906e; display:block; position:absolute; left:15px; top:13px;}
@media(max-width:900px) {
	#side{ display:none;}
}

#main{float:right; width:70%; margin-bottom:15%;}
	.breadcrumb{background:none; border-radius:0; font-size:13px; padding: 8px 0; text-align:right;}
	.breadcrumb li:last-child a{color:#ef8700;}
@media(max-width:900px) {
	#main{ float:none; width:auto;}
	.breadcrumb{text-align:left;}
}


.content{ margin-top:50px;}
	.page-header h1{ text-transform:uppercase;}

/*product*/
.prolist{ list-style:none; padding:0; margin:0;}
	.prolist li{ width:33.33%; float:left; padding:2%;}
	.prothumb a{ border:1px solid #707070; padding:5%; display:block;}
	.prothumb a:hover{border:1px solid #ef8700;}
	

	.proname{ border-top:2px solid #707070; margin-top:10px; text-align:center; padding-top:5%; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0); position: relative;}
	.proname:after{content: ""; position: absolute; z-index:-1; left: 50%; right: 50%; top: -2px; background: #ef8700; height: 2px; 
	-webkit-transition-property: left, right; transition-property: left, right;
    -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;transition-timing-function: ease-out;}
	.proname span{color:#73906e; display:block; font-weight:600;}
	.proname p{ font-size:14px;}
	.prothumb a:hover .proname:after {left: 0;right: 0;}
	.prothumb a:hover .proname, .prothumb a:hover .proname span{color:#ef8700;}


.pro-info, .pro-desc2, .pro-desc3{margin-top:50px;}
	.pro-info:after{clear:both; content:''; display:block; visibility:hidden; height:0;}
	.pro-img{ width:55%; float:left; padding-right:2%;}
	.pro-img a{ display:block; border:1px solid #707070;}
	.pro-desc{width:40%; float:right; line-height:1.5em;}
	.pro-desc ul, .pro-desc2 ul{ list-style: square; margin:0; padding: 0 15px;}
	.pro-desc li, .pro-desc2 li{ padding-bottom:0.5em;}
	.pro-desc p{font-size:18px; margin-bottom:30px;}
	.pro-desc p span{color:#ef8700; display:block; font-size:20px; padding-bottom:0.5em;}
	.pro-desc2 h4{ font-size:20px;}
	.pro-desc2 .desc-img{list-style: none; padding:0; margin:0; margin-top:30px;}
	.pro-desc2 .desc-img li{ display:inline-block; width:30%; padding:1%; text-align:center;}
	.pro-desc2 .desc-img img{ border:1px solid #0e0d0e;}
	.pro-desc2 .desc-img span{ display:block; padding-top:10px;}
	.pro-desc3 .desc-img{list-style: none; padding:0; margin:0; margin-top:30px;}
	.pro-desc3 .desc-img li{ display:inline-block; width:45%; padding:1%; text-align:center;}
	.pro-desc3 .desc-img img{ border:1px solid #0e0d0e;}

.pro-spec, .pro-spec2{ margin-top:50px;}	
	.pro-spec h5{ color:#666666; font-size:16px;}
	.pro-spec p{ color:#666666; font-size:14px;}
	.table{border:1px solid #f4f4f4;}
	.table > thead > tr > th, .pro-spec2 .table > tbody > tr > th{ background:#666666; color:#FFF; text-align:center; vertical-align:middle; border:1px solid #f4f4f4;}
	.table > tbody > tr > td{color:#696f79; border:1px solid #FFF; text-align:center; vertical-align:middle;}
	.table > tbody > tr:nth-child(odd) > td{ background:#f2f2f2;}
	.table > tbody > tr:nth-child(even) > td{ background:#e5e5e5;}
	.table > thead > tr.tr > th{ width:50%;} 
	.pro-spec2 .table > tbody > tr > th, .pro-spec2 .table > tbody > tr > td{text-align:left;}
	.pro-spec2 .table > tbody > tr > th{width:20%;}
	
	
@media(max-width:600px) {
	.prolist li{ width:50%;}
}
@media(max-width:480px) {
	.pro-img, .pro-desc{ float:none; width:auto;}
	.pro-desc{ margin-top:30px;}
	.pro-desc2 .desc-img li{ width:auto; text-align:left;}
	.pro-desc3 .desc-img li{ width:auto; text-align:left;}
}

/*company*/
.company p{ line-height:1.5em;}
.company h3{ font-weight:500; margin-bottom: 20px;}
.company i{ color:#ef8700;}
.company .history, .company .advantage{list-style:none; padding:0; margin:0;}
.company .target{ list-style: square; margin:0; padding: 0 15px;}
.company .target li{ padding-bottom:0.5em;}
.company .history li{ display:inline-block; width:40%; text-align:center; padding:2%;}
.company .advantage li{ display:inline-block; width:30%; text-align:center; padding:2%;}
.company .history img{ border-radius:20px; border: 2px solid #0e0d0e;}
.company .advantage img{ border-radius:50%; border: 3px solid #bfbfbf;}
.company .advantage span{ display:block; padding:20px 0 30px;}
.company hr{ border-bottom: 1px dashed #bfbfbf; margin:30px 0; border-top:0;}
.milestone {position: relative; margin:20px 0;}
	.milestone ul {width: 95%; margin: 0 auto; display: block; position: relative; padding-bottom: 1em; padding-top: 1em; list-style:none;}
	.milestone ul:before {content: ""; display: block; position: absolute; top: 25px; left: 30%; width: 15px; height: 15px; border-radius: 50%; margin-left: -7px;  background: #39865a;}
	.milestone ul:after  {content: ""; display: block; position: absolute; top: 0; left: 30%; width: 2px;  height: 100%; background: #39865a;}
	.milestone .year{ width:25%; position: absolute; left: 0; font-size: 20px; line-height: 1em; text-align:right; }
	.milestone .note{ width:75%; margin-left: 30%; padding: 15px 0;}
@media(max-width:600px) {
	.company .advantage li{width:45%;}
}

/*contact*/
.red{ color:red;}
.embed-responsive{ margin:50px 0;}


/*footer*/
#footer{ position:relative; overflow:hidden; color:#FFF;
background: #39865a; /* Old browsers */
background: -moz-linear-gradient(left,  #39865a 0%, #39865a 50%, #80c29c 50%, #80c29c 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #39865a 0%,#39865a 50%,#80c29c 50%,#80c29c 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #39865a 0%,#39865a 50%,#80c29c 50%,#80c29c 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#39865a', endColorstr='#80c29c',GradientType=1 ); /* IE6-9 */
}
	#footer:before{content:""; width:150px; height:200px; background:url(../images/footer-bg.jpg) center center no-repeat; position:absolute; left:50%; top:0; z-index:2;
	-webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); 
	-moz-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0); -webkit-transform: translate(-50%, 0);}
	#footer ul{ list-style:none; padding:0; margin:0; font-size:13px;}
	#footer a{ color:#FFF;}
	#footer a:hover{ color:#ffd900;}
	#footer .footer-cominfo h5{ font-size:15px;}
	#footer1{ float:left; width:45%; background:#39865a; padding:20px 0;}
		.copyright{ padding:5px 0 0; color:#b0ecc9;}
	#footer2{ float:right; width:40%; background:#80c29c; padding:20px 0;}
		.footlink{ padding:5px 0 0;}
		.footlink a{color:#f0eeee;}
		.footlink ul:before{content:'Design by ';}
		.footlink li{display:inline;}
		.footlink li:after{content:', ';}
		.footlink li:last-child:after{content:' ';}	
	.qr{ position:absolute; left:46%; top:10%; z-index:99;}	
@media(max-width:1120px) {
	#footer:before{width:230px; height:300px; background:url(../images/footer-bg-s.jpg) center center no-repeat;} 
	#footer1, #footer2{ width:35%;}
}
@media(max-width:900px) {
	.qr{left:40%;}	
}
@media(max-width:800px) {
	#footer:before{ background:none;} 
	#footer1, #footer2{ width:45%;}
	.qr{ position:relative; left:10%; }	
}
@media(max-width:599px) {
	#footer{ background:none;}
	#footer > .wrap{ padding:0;}
	#footer1, #footer2{ float:none; width:auto;  padding:15px;}
	#footer1 > .footer-cominfo:first-child{ padding-bottom:20px;}
	.copyright{color:#f0eeee;}
	.qr{ left:0; top:0; padding:10px 0;}	
}



#btntop{ position:fixed; bottom:2%; right:3%; width:37px; height:37px; border-radius:50%; background:#bdbdbd; color:#fff; display:inline-block; text-align:center; line-height:34px; font-size:22px; float:right;  z-index:20; -webkit-transition: all 0.3s;    -moz-transition: all 0.3s;    -ms-transition: all 0.3s;    -o-transition: all 0.3s;    transition: all 0.3s;}
	#btntop:hover{background:#39865a;}

.sb-toggle-right{float:right; height:50px; padding:20px 0; border: 0; display: none; cursor:pointer;}
	.navicon-line { background: #8c8c8c;border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; width: 30px;  height: 3px; margin-bottom: 6px;}
	.sb-active-right .sb-toggle-right .navicon-line:nth-of-type(3){position:relative; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); top:0px;}
	.sb-active-right .sb-toggle-right .navicon-line:nth-of-type(2){display:none;}
 	.sb-active-right .sb-toggle-right .navicon-line:nth-of-type(1){position:relative; transform: rotate(45deg);  -webkit-transform: rotate(45deg); top:9px;}	

.sb-menu{list-style:none; margin:0; padding:0;}
	.sb-menu:after {clear: both; content: " "; display: block; height: 0; visibility: hidden;}
	.sb-menu  a{cursor:pointer;}
	.sb-menu>li{border-bottom:1px rgba(255, 255, 255, 0.5) solid;}
	.sb-menu>li>a{font-size:18px; color:#FFF; line-height:1.4em; padding:0.7em 25px 0.7em 1em; display:block; position:relative; text-shadow:0 0 1px rgba(11, 108, 144, 0.3);  padding-left:12px}
	.sb-menu li > a:hover, .sb-menu > li.active > a{background-color: #39865a;}
	/*.sb-menu:last-child li > a:hover, .sb-menu:last-child > li.active > a{background-color:transparent;}*/
	
	.sb-menu ul{display:none; list-style:none; margin:0; padding:0;} 
	.sb-menu>li>ul>li{ border-bottom:1px rgba(255, 255, 255, 0.1) solid; }
	.sb-menu>li>ul>li>a{font-size:16px; color:#FFF; display:block; line-height:1.3em; padding:0.6em 25px 0.6em 2em; background:#5e5e5e; border-left:10px solid transparent;}
	.sb-menu>li>ul>li>a:hover, .sb-menu>li>ul>li.active>a{border-left:10px solid #39865a; background:#868686;}
	
	.sb-menu ul{display:none; list-style:none; margin:0; padding:0;} 
	.sb-menu>li>ul>li>ul>li{ border-bottom:1px rgba(255, 255, 255, 0.1) solid; }
	.sb-menu>li>ul>li>ul>li>a{font-size:16px; color:#FFF; display:block; line-height:1.3em; padding:0.6em 25px 0.6em 2em; background:#9a9a9a; border-left:10px solid transparent;}
	.sb-menu>li>ul>li>ul>li>a:hover, .sb-menu>li>ul>li>ul>li.active>a{border-left:10px solid #73916f; background:#aeaeae;}
	
	.sb-menu li>a:before{font-family: FontAwesome; color: #bdbdbd; margin-right: 10px;}
	.sb-menu li.n1>a:before{content: "\f007";}
	.sb-menu li.n2>a:before{content: "\f013";}
	.sb-menu li.n3>a:before{content: "\f07c";}
	.sb-menu li.n4>a:before{content: "\f02d";}
	.sb-menu li.n5>a:before{content: "\f0e0";}
	
	.sb-menu:nth-child(2) li:nth-child(1) a:before{content: "\f015";}
	.sb-menu:nth-child(2) li a:before{content: "\f0ac";}
	
	.sb-caret {width:0; height:0; display: inline-block; margin: 0 5px; border: 5px solid transparent; vertical-align:middle; border-top: 5px solid; border-bottom: 0px solid transparent; }
	.sb-submenu-active > .sb-caret {	border-top: 0px solid transparent;	border-bottom: 5px solid;}

		
@media(max-width:1199px) {
	.wrap{width:100%;}
}	
@media(max-width:900px) {
	.sb-toggle-right{ display: block;}
}