@charset "utf-8";
/* CSS Document */
* {word-wrap: break-word;padding:0;margin:0;}
body{margin:0; padding:0; font:12px Arial,"microsoft yahei"; color:#666; background:#fff;}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0; }
ul,li,ol{list-style:none;}

a{text-decoration:none; color:#666;}
a:hover{text-decoration:none; color:#4cb035;}
.clear { zoom: 1;clear:both; }
.clear:after { content: ''; display: block; clear: both; }
img{border:0}

.fl{ float:left;}
.fr{ float:right;}
.c1200{ width:1200px; margin:0 auto; min-width:1200px; position: relative;}

@font-face {font-family:'agencyb'; src: url('../fonts/agencyb.ttf') format('truetype'); }
@font-face {font-family:'impact'; src: url('../fonts/impact.ttf') format('truetype'); }

input,textarea,select,button{  font-family:Arial,"Microsoft YaHei";}
input:focus,textarea:focus,select:focus,button:focus{ outline:none;}


/* header */
.header{ margin:0 auto; padding:20px 0; height:82px; width:100%; position: relative; background:#fff; z-index:999; top:0;  min-width:1200px;}
.headerLogo{ padding:0; width:180px; height:52px; margin:15px 0;}
.headerLogo img{width:180px; height:52px;}
.headerCont{ width:925px;}
.headerTel{ height:15px; float:right; display:block; width: 205px;  }
.headerTel dl{ float: left; font-size: 14px;}
.headerTel dl dt{ float: left; width: 15px; height: 15px; background: url(../images/TopIcon.png) no-repeat;}
.headerTel dl dt.icon1{ background-position: 0 0;}
.headerTel dl dt.icon2{ background-position: -15px 0;}
.headerTel dl dt.icon3{ background-position: -30px 0;}
.headerTel dl dd{ float: left; margin-left: 5px; height: 15px; line-height: 15px;;}
.headerTel dl:hover dt.icon1{ background-position: 0 -15px;}
.headerTel dl:hover dt.icon2{ background-position: -15px -15px;}
.headerTel dl:hover dt.icon3{ background-position: -30px -15px;}
.headerTel p{ float: left; margin: 0 10px; color: #999;}
.headerNav{ float: left; width:780px;  padding-left:100px; height:66px; margin:5px  0; }
.headerNav .nLi{float:left; height:66px; width:100px; position:relative; margin:0 0 0 20px;}
.headerNav .nLi h3 a{display:block; width:100px; height:66px; text-align:center; line-height:66px; cursor:pointer; font-size:16px; font-weight:normal}
.headerNav .nLi span{ display:block; position:absolute; width:0px; height:0px; background:#4cb035; top:60px; left:50%;}
.headerNav .sub{ display:none; z-index: 999999;; position:absolute; top:62px; left:0px; width:100px; background:#fff; box-shadow:0 0 10px 0 rgba(0,0,0,0.2);}
.headerNav .sub li{float:left; padding:0; margin:0; height:36px;}
.headerNav .sub a{ height:36px; line-height:36px; width:100px; text-align:center; color:#666; font-size:14px; font-weight: normal; display:block}
.headerNav .sub a:hover{background:#4cb035; color:#fff;}
/* .headerNav .on h3 a{color:#4cb035;} */

.headerLine{ width: 100%; min-width: 1200px; height: 3px; background: url(../images/headerLine.jpg) center center; background-size: 100% 100%;}

/* 搜索 */
input{outline:none}
.search-user b{background:url(../images/search.png) no-repeat center center;}
.search-user a{width:26px; background-color: #4cb035; border-radius: 50%; height:26px;display:inline-block;position:relative;top:0;overflow:hidden;}
.search-user a b{width:26px;height:26px;display:block;position:absolute;top:0;left:0;}
#vivo-head .vivo-nav{float:right;width:26px;height:26px;margin:25px auto 0;position:relative;z-index:999;}
#vivo-head .vivo-search{  left: 0;height:80px;width:100%;background:#202223;position:absolute;top:125px;z-index:9999;display:none;}
.vivo-search .search-box{width:700px;height:40px;position:absolute;top:20px;left:50%;margin-left:-150px;position:relative;z-index:9999;}
.vivo-search .search-box input.inputBox{width:550px;height:40px;padding:0 10px;font-size:14px;color:#555;border:none;background:#fff;overflow:hidden;vertical-align:middle;}
.vivo-search .search-box .searchBox{width:110px;height:40px; margin-top:1px; overflow:hidden;text-align:center;font-size:14px;color:#fff;border:none;overflow:hidden;vertical-align:middle;background:#4cb035;outline:none;cursor:pointer;-webkit-transition:background .2s ease-in-out;-moz-transition:background .2s ease-in-out;-ms-transition:background .2s ease-in-out;transition:background .2s ease-in-out;}
.vivo-search .search-box .searchBox:hover{background:#4cb035;}
.vivo-search .search-box a.close{width:24px;height:24px;position:absolute;top:8px;right:-40px;background:url(../images/vivo-head-ico.png) -86px 0 no-repeat;_background-image:url(../images/vivo-head-ico.gif);}
.vivo-search .search-box a.close:hover{background-position:-86px -25px;}



/*indexBanner*/
.indexBanner{width: 100%;overflow: hidden;}
.indexBanner .swiper-slide img{width: 100%;display: block;}
.indexBanner .box{width: 100%;position: absolute;bottom: 0;left: 0;z-index: 2;min-width: 1200px;height: 80px;display: table;font-size: 0;text-align: left;}
.indexBanner .box>div{display: inline-block;vertical-align: top;}
.indexBanner .swiper-pagination{bottom: 40px;left: 0;right: 0;margin:auto;height: 30px;}
.indexBanner .swiper-pagination-bullet{width:50px;height:3px;cursor: pointer;border-radius: 0;opacity: 1; background-color: #ccc; margin: 0 10px !important;position: relative;}
.indexBanner .swiper-pagination-bullet-active{ width:80px;height:3px;background:#4cb035; }
.indexBanner .box .cont{background-color: #4cb035;width: 12%;padding: 0 5px 0 15px;box-sizing: border-box;height: 80px;}
.indexBanner .box .cont .p{float: left;font-size: 16px;color: #ffffff;line-height: 80px;text-transform: uppercase;}
.indexBanner .box .cont .iconfont{float: right;font-size: 40px;color: #ffffff;margin-top: 13px;cursor: pointer;}
.indexBanner .icon-arrow{width:50px;height:50px;line-height:50px;border-radius: 50%;border: 1px solid rgba(255, 255, 255, 0.4);background:url(../images/iconArrow.png) 0 0 no-repeat; filter:alpha(opacity=50);opacity:0.5 !important; font-size: 26px;color:#fff;text-align: center;transition: all 0.6s ease;}
.indexBanner .icon-arrow::after{display: none;}
.indexBanner .swiper-button-prev{left:-8%; background-position:0 0;}
.indexBanner .swiper-button-next{right:-8%; background-position:-50px 0;}
.indexBanner .swiper-button-prev:hover,.indexBanner .swiper-button-next:hover{filter:alpha(opacity=100); opacity:1 !important;}
.indexBanner:hover .swiper-button-prev{left: 10%;}
.indexBanner:hover .swiper-button-next{right:10%;}

/* product */
.product{ width: 100%; min-width: 1200px; margin:0 auto; height: 540px; background-color:#fff; position: relative; overflow: hidden;}
.product .productBG{ width: 100%; min-width: 1200px; position: absolute; height: 540px; z-index: 1; top: 0; left: 0; background-color: #f7f7f7; }
.product .productBG .left{ width: 50%; height: 440px; background-color: #fff; position: relative; z-index: 1;}
.product .productBG .right{ width: 50%; height: 540px; background-color: #4cb035; position: relative; z-index: 3;}
.product .productList{ position: relative; z-index: 5; height: 540px; }
.product .productList .FLBG{ width: 800px; height: 440px; background-color: #fff; position: absolute; top: 0; left: 0 ; z-index: 5;}
.product .productList .FRBG{ width: 600px; height: 540px; background-color: #4cb035; position: absolute; top: 0; right: 0 ; z-index: 4;}
.product .ProTitle{ width: 150px; height: 60px; position: absolute; z-index: 7; top: 40px; left: 0;}
.product .ProTitle .title{ font-size: 28px; color: #333}
.product .ProTitle .en{ height: 16px; margin: 10px 0; font-size: 14px; text-transform: uppercase; color: #666;}
.product .ProTitle .en p{ float: left; width: 35px; margin: 7px 15px 7px 0; height: 2px; background-color: #bbb;}


.productBox{ width:100%;  position: relative; z-index: 6; height: 540px;  }
.productBox .hd{ position:absolute; left:50px; top:230px; height:130px;  width:480px; z-index: 7;}
.productBox .hd ul{ position: relative; height:130px;  width:480px;  overflow: hidden; }
.productBox .hd ul li{ float:left; padding:0 ; cursor:pointer; text-align: center; margin-right: 30px; height: 130px; background-color: rgba(0, 0, 0, 0);  width: 130px; font-size: 14px;  }
.productBox .hd ul li p{ font-size: 44px; font-family: 'impact'; color: #999; margin: 20px auto 10px;}
.productBox .hd ul li a{ color: #666;}
.productBox .hd ul li.on{  background:rgba(248, 194, 0, 0.2);   }
.productBox .hd ul li.on p,.productBox .hd ul li.on a{ color: #4cb035;}
.productBox .bd{  position: relative; width: 100%; height: 540px; padding:0; z-index: 6;}
.productBox .bd .cont{ position: relative; width: 100%; height: 540px; padding:0;  zoom:1;  }
.productBox .bd .cont .dis{ position: absolute; top: 130px; width: 700px; height: 80px; overflow: hidden; left: 50px; font-size: 14px; line-height: 26px; color: #999;}
.productBox .bd .cont .img{ width: 310px; height: 450px; position: absolute; top: 45px; right: 0; background-color: #fff;}
.productBox .bd .cont .img a{ display: block;}
.productBox .bd .cont .img img{ width: 310px; height: 390px;}
.productBox .bd .cont .img p{ text-align: center; height: 60px; line-height: 60px;}
.productBox .bd .cont .more{ width: 175px; height: 44px; position: absolute; bottom: 28px; right: 400px; background-color: #f8c200; text-align: center;  font-size: 14px; line-height: 44px; box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);}
.productBox .bd .cont .more a{ display: block; color: #fff;}
.productBox .bd .cont .more:hover{ background-color: #333;}

/* recommend */
.recommend{ width: 100%; margin:0 auto ; padding-bottom: 70px; min-width: 1200px; position: relative; background-color: #f7f7f7;}
.recommend .title{ width: 1200px; margin:-100px auto 0; height: 100px; position: relative; z-index: 1; }
.recommend .title p{ font-size: 28px; padding-top: 50px; color: #333; position: relative; z-index: 2;}
.recommend .title span{ width: 100%; height: 100px; font-size: 80px; position: absolute; font-family: 'Arial'; color:#eee; line-height: 100px; left: 0; top: 0;}

.recommend .list{ width: 1260px; margin: 15px auto 0;}
.recommend .list li{ float: left; width: 360px; height: 370px; margin:25px 30px; overflow: hidden; background-color: #fff; box-shadow: 0 0 10px 0 rgba(0,0,0,0.02); transition: all 0.8s ease;}
.recommend .list li .img{ width: 360px; height: 310px; overflow: hidden; position: relative; z-index: 1;}
.recommend .list li .img img{ width: 360px; height: 310px;}
.recommend .list li .con{ width: 360px; text-align: center; height: 140px;transform: translateY(0); transition: all 0.8s ease; position: relative; z-index: 2;}
.recommend .list li .con .name{ width: 100%; color: #333; font-size: 16px; transform: translateY(10px); transition: all 0.8s ease; }
.recommend .list li .con .stage{ font-size: 14px; margin-top: 60px; transition: all 0.8s ease;}
.recommend .list li .con .more{ width: 150px; height: 36px; text-align: center; line-height: 36px; margin: 15px auto; background-color: #f8c200; transition: all 0.8s ease;}
.recommend .list li .con .more a{ display: block; font-size: 14px; color: #fff;}
.recommend .list li .con .more:hover{ background-color: #333;}
.recommend .list li:hover{box-shadow: 0 0 30px 0 rgba(0,0,0,0.1);}
.recommend .list li:hover .con{ transform: translateY(-80px); background-color: #4cb035;}
.recommend .list li:hover .name{ padding-top: 20px; transform: translateY(0); }
.recommend .list li:hover .stage{  margin-top: 10px; }
.recommend .list li:hover .name,.recommend .list li:hover .stage{color: #fff;}


/* about */
.about{ width: 100%; height: 700px; position: relative; z-index: 1;}
.about .title{ width: 280px; height: 160px; padding: 20px; position: absolute; top: 0; left: 0; z-index: 2;}
.about .title p{ font-size: 46px; color: #333; text-transform: uppercase; font-weight: bold; margin:50px 0 10px; }
.about .title span{ font-size: 20px; color: #333;}
.about .list{ width: 100%; height: 700px; position: relative; overflow: hidden;}
.about .list .left{ width: 640px; height: 700px; background: url(../images/about01.jpg) center top 200px no-repeat; position: relative; }
.about .list .left .more{ background-color: #4cb035; position: absolute; left: 40px; bottom: 40px; width: 170px; line-height: 45px; height: 45px; text-align: center;}
.about .list .left .more a{ display: block; font-size: 14px; color: #fff;}
.about .list .left .more:hover{ background-color: #333; box-shadow: 0 0 15px 0 rgba(0,0,0,0.2);}
.about .list .left .about01{ position: absolute; top: 0; right: 0; width: 260px; height: 390px; overflow: hidden; background-color: rgba(76, 176, 53, 0.8); padding: 30px; color: #fff;}
.about .list .left .about01 .p1{ width: 100%; font-size: 30px; margin-top: 40px; font-weight: bold; font-family: 'Arial'; }
.about .list .left .about01 .p1 span{ font-size: 22px;}
.about .list .left .about01 .p2{ font-size: 14px; line-height: 24px; margin-top: 30px;}
.about .list .left .about01 .p3{ font-size: 14px; line-height: 24px; margin-top: 20px;}
.about .list .left .about01:hover{ background-color: rgba(76, 176, 53, 1);}
.about .list .left .about02{ position: absolute; bottom: 0; right: 0; width: 260px; height: 190px;  padding: 30px; overflow: hidden; background-color: #edfde9;}
.about .list .left .about02 .p1{ font-size: 16px; color: #333; font-weight: bold; margin-top: 10px;}
.about .list .left .about02 .p2{ font-size: 14px; line-height: 24px; margin-top: 20px; color: #999;}
.about .list .left .about02 .p3{ position: absolute; bottom: 30px; right: 30px; }
.about .list .left .about02 .p3 a{ font-size: 14px; color: #333;}
.about .list .left .about02:hover{ background-color: rgba(248, 194, 0, 1);}
.about .list .left .about02:hover .p1,.about .list .left .about02:hover .p2,.about .list .left .about02:hover a{ color: #fff;}
.about .list .left .about02:hover a:hover{ color: #4cb035;}
.about .list .mid{ width: 250px; height: 480px; padding: 25px; background: url(../images/about02.jpg) center center no-repeat; margin:60px 0 0  10px; position: relative;}
.about .list .mid .con{ width: 100%; height: 430px; overflow: hidden; position: relative;}
.about .list .mid .p1{ font-size: 16px; color: #333; font-weight: bold; margin-top: 10px; transform: translateY(360px); transition: all 1.5s ease;}
.about .list .mid .p2{ font-size: 14px; line-height: 24px; margin-top: 5px; color: #666; transform: translateY(360px); transition: all 1.5s ease;}
.about .list .mid .p3{  font-size: 14px; line-height: 26px; margin-top: 5px; color: #666;  transform: translateY(360px); transition: all 1.5s ease;}
.about .list .mid .p4{ position: absolute; bottom: 25px; right: 25px; }
.about .list .mid .p5 a{ font-size: 14px; color: #333;}
.about .list .mid:hover .p1,.about .list .mid:hover .p2,.about .list .mid:hover .p3{transform: translateY(0);}

.about .list .right{ width: 240px; height: 530px; margin: 60px 0 0 10px;}
.about .list .right .about03{ width: 190px; height: 250px; padding: 25px; background: url(../images/about03.jpg) center center no-repeat; overflow: hidden; text-align: center;}
.about .list .right .about04{ width: 190px; height: 250px; padding: 25px; background: url(../images/about04.jpg) center center no-repeat; overflow: hidden; margin-top: 10px; text-align: center;}
.about .list .right .about03 .p1,.about .list .right .about04 .p1{font-size: 16px; color: #333; font-weight: bold; margin-top: 0;}
.about .list .right .about03 .p2,.about .list .right .about04 .p2{font-size: 14px; line-height: 24px; margin-top: 10px; color: #999;}
.about .list .right .about03 .p3,.about .list .right .about04 .p3{ margin-top: 10px;}
.about .list .right .about03 .p3 a,.about .list .right .about04 .p3 a{ color: #333;}
.about .list .right .about03 .p3 a:hover,.about .list .right .about04 .p3 a:hover{ color: #4cb035;}




/* news */
.news{ width: 100%; min-width: 1200px; margin:90px auto 0; padding: 60px 0; background-color: #fafafa}
.news .newsTitle{ width: 150px; height: 60px; position: relative; z-index: 7; top: 0; left: 21px;}
.news .newsTitle .title{ font-size: 28px; color: #333}
.news .newsTitle .en{ height: 16px; margin: 10px 0; font-size: 14px; text-transform: uppercase; color: #666;}
.news .newsTitle .en p{ float: left; width: 35px; margin: 7px 15px 7px 0; height: 2px; background-color: #bbb;}

.NewsBox{ width:1242px; margin: auto; position: relative; }
.NewsBox .hd{  position: absolute; top:0 ; right: 0; width: 300px; height: 40px; }
.NewsBox .hd ul{ float:right; position:absolute; right:20px; top:0; height:32px;   }
.NewsBox .hd ul li{ float:left; width: 70px; font-size: 16px; margin-left: 40px; color: #333; cursor:pointer; text-align: center;  }
.NewsBox .hd ul li span{ display: none; width: 100%; height: 6px; background-color: rgba(76, 176, 53, 0.8); float: left; margin-top: -5px;}
.NewsBox .hd ul li.on{ height:30px;   }
.NewsBox .hd ul li.on span{ display: block;}
.NewsBox .bd{ position: relative; margin: 20px auto 0;}
.NewsBox .bd .con{ width: 100%; position: relative;}
.NewsBox .bd ul{ width: 100%; padding:0;  zoom:1;  }
.NewsBox .bd li{ float: left; width: 372px; margin: 21px; height: 400px;  }
.NewsBox .bd li .name{ width: 100%; font-size: 18px; line-height: 30px; height: 60px; margin-bottom: 10px;}
.NewsBox .bd li .name a{ color: #333;}
.NewsBox .bd li .name a:hover{ color: #4cb035;}
.NewsBox .bd li .img{ width: 372px; height: 225px; overflow: hidden;}
.NewsBox .bd li .img img{ width: 372px; height: 225px; transition: all 0.5s ease;}
.NewsBox .bd li .dis{ font-size: 14px; width: 100%; margin-top: 10px;  color: #999; line-height: 24px;}
.NewsBox .bd li .time{ text-align: right; font-size: 14px; color: #999; margin-top: 10px;}
.NewsBox .bd li:hover img{transform:scale(1.2)}
.NewsBox .bd .more{ width: 170px; height: 45px; text-align: center; line-height: 45px; background-color: #4cb035; margin:40px auto 0;}
.NewsBox .bd .more a{ display: block; font-size: 14px; color: #fff;}
.NewsBox .bd .more:hover{ background-color: #333;}

.links{ width: 100%; padding: 10px 0; font-size: 14px; line-height: 26px;}
.links span{ float: left; color: #333;}
.links a{ float: left; color: #333; margin-right: 10px;}
.links a:hover{ color: #4cb035; text-decoration: underline;}

.footer{ width: 100%; padding: 60px 0 0; background-color: rgba(76, 176, 53, 1); min-width: 1200px;}
.footer .footerC{ width: 100%; float: left; margin-bottom: 30px;}
.footer .footerC .left{ width: 180px;}
.footer .footerC .left .footerLogo{ width: 180px; height: 52px; overflow: hidden;}
.footer .footerC .left .footerLogo img{ width: 180px; height: 52px;}
.footer .footerC .left .weixin{ width: 100px; height: 100px; margin: 30px 0 0 30px; border: solid 8px #66bd51;}
.footer .footerC .left .weixin img{ width: 100px; height: 100px; }
.footer .footerC .right dl{ float: left; margin-left: 80px; color: #fff;}
.footer .footerC .right dl dt{margin-bottom: 10px; }
.footer .footerC .right dl dt a{ font-size: 16px; color: #fff;}
.footer .footerC .right dl dd a{ color: #fff; font-size: 12px; line-height: 30px;}
.footer .footerC .right dl dd a:hover{ color: #f8c200; text-decoration: underline;}

.footer .copy{ float: left; width: 100%; padding: 20px 0; height: 30px; }
.footer .copy .left{ font-size: 14px; color:#76d45f;line-height: 30px;}
.footer .copy .left a{ color:#76d45f;}
.footer .copy .left span{ float: left;}
.footer .copy a:hover{ color: #f8c200; text-decoration: underline;}
.footer .copy a.icon{ float: left; height: 30px; margin-left: 5px; width: 26px; display: block;}
.footer .copy a.icon img{height: 30px; width: 26px;}
.footer .copy .right{ height: 20px; margin: 5px 0;}
.footer .copy .right dl{ float: left; margin-left: 30px; line-height: 20px; height: 20px; cursor: pointer;}
.footer .copy .right dl dt{ float: left; width: 20px; height: 20px; background: url(../images/contactIcon.png) no-repeat;}
.footer .copy .right dl dt.icon1{ background-position:  0 0;}
.footer .copy .right dl dt.icon2{ background-position:  -20px 0;}
.footer .copy .right dl dt.icon3{ background-position:  -40px 0;}
.footer .copy .right dl dt.icon4{ background-position:  -60px 0;}
.footer .copy .right dl dd{ float: left; margin-left: 10px; color: #fff; font-size: 16px; font-weight: bold;}
.footer .copy .right dl:hover dt.icon1{ background-position:  0 -20px;}
.footer .copy .right dl:hover dt.icon2{ background-position:  -20px -20px;}
.footer .copy .right dl:hover dt.icon3{ background-position:  -40px -20px;}
.footer .copy .right dl:hover dt.icon4{ background-position:  -60px -20px;}
.footer .copy .right dl:hover dd{ color: #f8c200;}

/* pagebanner */
.pagebanner{ width: 100%; height: 430px; }

/* pageNav */
.pageNav{ width: 100%; border-bottom:solid 1px #eee; padding: 15px 0;}
.pageNav ul{ height: 40px;}
.pageNav li{ float: left; text-align: center; font-size: 14px; background-color: #eee; margin-right: 10px; line-height: 40px; height: 40px; }
.pageNav li a{ display: block; color: #333; padding: 0 20px;}
.pageNav li.on,.pageNav li:hover{ background-color: #4cb035;}
.pageNav li.on a,.pageNav li:hover a{ color: #fff;}

.crumbs{ line-height: 40px; font-size: 14px; color: #333;}
.crumbs a{ color: #333;}
.crumbs span{ margin: 0 5px;}
.crumbs a:hover{ color: #4cb035}



/* pageAbout */
.pageAbout{ font-size: 14px; margin: 60px auto; color: #333; line-height: 28px; position: relative;}
.pageAbout img{ max-width: 100%;}

/* pageProduct */
.pageProduct{ width: 1260px; margin: 45px auto;}
.pageProduct li{ float: left; cursor: pointer; width: 360px;  position: relative; height: 420px; margin:25px 30px; transition: all 0.8s ease;}
.pageProduct li .img{ width: 358px; height: 308px; overflow: hidden;  border: solid 1px #eee;  transition: all 0.8s ease;}
.pageProduct li .img img{ width: 358px; height: 308px;}
.pageProduct li .con{ width: 360px; height: 110px; background-color: #eee;  position: relative; text-align: center; transition: all 0.8s ease;}
.pageProduct li .con .name{ font-size: 16px; color: #333; padding: 0 20px; overflow: hidden; transform: translateY(25px); transition: all 0.8s ease;}
.pageProduct li .con .stage{ font-size: 14px; color: #666; padding: 0 20px; overflow: hidden; transform: translateY(35px); transition: all 0.8s ease;}
.pageProduct li .con .more{ display: none ; width: 150px; height: 38px; line-height: 38px; margin: auto; transform: translateY(70px); background-color: #f8c200; transition: all 0.8s ease;}
.pageProduct li .con .more a{ display: block; color: #fff; font-size: 14px; }
.pageProduct li:hover .name{transform: translateY(15px); color: #fff;}
.pageProduct li:hover .stage{ transform: translateY(25px); color: #fff;}
.pageProduct li:hover .more{ display: inline-block;  transform: translateY(50px); }
.pageProduct li:hover .more:hover{ background-color: #333;}
.pageProduct li:hover .img{ border-color: #4cb035; }
.pageProduct li:hover{ box-shadow: 0 0 20px 0 rgba(0,0,0,0.02);  }
.pageProduct li:hover .con{ background-color: #4cb035; }


/* pageProductD */
.pageProductD{ padding: 60px 0;}
/*产品放大*/
#showbox {z-index:1;  }
.pro_l{background:#fafafa;padding:20px 110px 60px 20px;position:relative;}
#showbox span {background: rgba(76, 176, 53, 0.2);}
#showsum {left:25px; margin-top:10px;}
#showsum span.sel{width:104px !important;height:104px !important;padding:3px;background:#4cb035;}
#showsum span.sel img{}
.showpage {width:550px;position:relative;}
.showpage a{display:block;width:17px;height:30px;line-height:30px; position:absolute; left:0; top:-70px;background: url(../images/jt_ico.png) no-repeat;}
.showpage a#shownext{left:auto;right:0;}
.showpage #showlast{background-position:0 0;}
.showpage #shownext{background-position:-17px 0;}
.bigpro_box{ width: 100%; height: 550px; position: relative;}
.pror_r{width:550px; height: 550px; overflow: hidden; position: relative;}
.pror_r .pro_info{padding-top:20px;padding-left:32px;max-height:270px;min-height:200px; overflow: hidden;}
.pror_r .pro_info .info_tit{font-size:26px;border-bottom:6px solid rgba(76, 176, 53, 0.6);position:relative;height:30px;line-height:38px;display:Inline-block; color: #333;}
.procon_view{padding-bottom:70px;background:url(../images/pro_view_bg.png) no-repeat right top;}
.pror_r .pro_info .info_sum{width:470px;padding:15px 0;color:#666;line-height:32px;font-size:14px;}
.pror_r .pro_info .info_sum p{ float: left; width: 100%; font-size: 14px; line-height: 26px; color: #666; margin: 5px 0;}
.pror_r .pro_info .info_sum p span{  color: #333; }

.pro_line{display:block;width:70px;height:4px;background:#4cb035;position:absolute;top:70px;right:-30px;}
.pro_detail{line-height:34px;color:#333333;padding-top:40px}
.pro_detail .pro_detail_tit{font-size:20px;width:90px;text-align:center;margin-bottom:20px;}
.pro_detail .pro_detail_tit span{margin-top:4px;display:block;height:4px;width:90px;background:#4cb035;}
.pro_detail .pro_detail_con{ width: 100%; font-size: 14px; line-height: 28px;}
.pro_detail .pro_detail_con img{ max-width: 100%;}

.bigpro_box .shopping{position:absolute;bottom:60px;z-index:9;left:530px; width: 282px;}
.bigpro_box .shopping a{background:#4cb035;width: 140px;height: 50px; line-height: 50px; text-align: center; font-size: 16px; color: #fff; display:block;float: left; margin-right: 1px;}
.bigpro_box .shopping a:hover{ background-color: #f8c200;}

/* pageNews */
.pageNews{ padding: 40px 0;}
.pageNews li{ float: left; width: 100%; height: 160px; border-bottom: solid 1px #eee; padding: 20px 0;}
.pageNews li .img{ width: 265px; height: 160px; overflow: hidden;}
.pageNews li .img img{ width: 265px; height: 160px;  transition: all 0.5s ease;}
.pageNews li .cont{ width: 910px;}
.pageNews li .cont .name{ font-size: 18px; color: #333; margin-top: 5px;}
.pageNews li .cont .time{ font-size: 14px; color: #999; margin: 10px 0;}
.pageNews li .cont .con{ font-size: 14px; line-height: 26px; color: #999;}
.pageNews li:hover img{transform:scale(1.2)}
.pageNews li:hover .name{ color: #4cb035;}
.pageNews li:hover .time,.pageNews li:hover .con{ color: #666;}

.pageNewsD{ padding: 60px 0;}
.pageNewsD .title{ text-align: center; font-size: 24px; color: #333; line-height: 30px; width: 100%;}
.pageNewsD .time{ font-size: 14px; color: #666; text-align: center; margin: 10px 0; width: 100%; border-bottom: dotted 1px #ddd; padding-bottom: 10px;}
.pageNewsD .time span{ margin: 0 10px;}
.pageNewsD .cont{ padding: 20px 0; border-bottom: dotted 1px #ddd; font-size: 14px; line-height: 28px; color: #333;}
.pageNewsD .cont img{ max-width: 100%;}


.pageVideo{ margin:40px auto; }
.pageVideo ul{ width:1242px; margin: 0 -21px; display:inline-block;}
.pageVideo li {float: left; position: relative; overflow: hidden; margin:21px ; width:372px; height: 340px; background-color: #fafafa; }
.pageVideo li .img{ width: 372px; height: 340px; overflow: hidden; position: relative; z-index: 1;}
.pageVideo li .img img{display: block; width: 372px; height: 340px; transition: all 0.8s ease; position: relative; z-index: 1;}
.pageVideo li .cont{ width: 372px; padding: 0; text-align: center; height: 340px; z-index: 2; position: relative; overflow: hidden; transform: translateY(-60px); transition: all 0.6s ease; background-color: rgba(0,0,0,0.6); }
.pageVideo li .cont p{  text-align: center; width: 342px; padding: 17px 15px; line-height: 26px; font-size: 16px; color: #fff;  transform: translateY(0); transition: all 0.6s ease; }
.pageVideo li .cont a{ display: block; position: absolute; top: 50%; z-index: 3; left: 50%; margin: -35px 0 0 -35px; width: 70px; height: 70px; overflow: hidden; border-radius: 50%; background: url(../images/iconPlayanimation.png) no-repeat;}

.pageVideo li:hover{-webkit-box-shadow:0 0 20px rgba(0,0,0,0.1); -moz-box-shadow:0 0 20px rgba(0,0,0,0.1); box-shadow:0 0 20px rgba(0,0,0,0.1);}
.pageVideo li:hover img{ transform:scale(1.1); }
.pageVideo li:hover .cont { color: #4cb035; transform: translateY(-340px); }
.pageVideo li:hover .cont p{opacity:1; transform: translateY(40px);}
.pageVideo li .cont a:hover{  background-color: #4cb035;  -webkit-box-shadow:0 0 20px rgba(255,255,255,0.5); -moz-box-shadow:0 0 20px rgba(255,255,255,0.5); box-shadow:0 0 20px rgba(255,255,255,0.5);}

.videoD .a1{ width: 1200px; height: 600px; overflow: hidden;}


.pageHonor {  overflow: hidden; margin: 40px auto; }
.pageHonor ul { width: 1242px; margin: 0 -21px; }
.pageHonor ul li { width: 370px; height: 308px; float: left; overflow: hidden; border: 1px solid #ececec; margin: 21px 21px ; transition:all 0.5s ease-in-out; -webkit-transition:all 0.5s ease-in-out; }
.pageHonor ul li:hover { -webkit-box-shadow: rgba(0,0,0,0.1) 0 0 20px; -moz-box-shadow: rgba(0,0,0,0.1) 0 0 20px; box-shadow: rgba(0,0,0,0.1) 0 0 20px; }
.pageHonor ul li img { display: block; width: 334px; height: 222px; margin: 14px auto;   transition: all 0.8s ease; }
.pageHonor ul li span { display: block; padding: 0 15px;  line-height: 58px; font-size: 16px; color: #333; text-align: center; overflow: hidden; }
.pageHonor ul li:hover img{ transform:scale(1.1);  }
.pageHonor ul li:hover span{ color: #4cb035;}
#boxer{-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}
#boxer-overlay{background:#000; height:100%; left:0; position: fixed; top:0; width:100%; z-index: 99999;}
#boxer{background:#fff; box-shadow: 0 0 20px rgba(0,0,0,0.2); padding:10px; position: absolute; z-index: 99999;}
#boxer .boxer-close{background:rgba(0, 0, 0, 0.67) url(../images/iconImg.png) no-repeat 0 0px; cursor:pointer; display:block; height:50px; position:fixed; right:10px; top:10px; width:50px;text-indent:-99999px; z-index:106;}
#boxer .boxer-close:hover{ background:#4cb035 url(../images/iconImg.png) no-repeat 0px 0px;}
#boxer .boxer-arrow{background:rgba(0, 0, 0, 0.67) url(../images/iconImg.png) no-repeat 0 -50px; cursor:pointer; display:block; height:50px; margin:0 auto; position: absolute; text-indent:-99999px; top:50px; width:50px;}
#boxer .boxer-arrow.previous{left:0px;}
#boxer .boxer-arrow.previous:hover{background:#4cb035 url(../images/iconImg.png) no-repeat 0 -50px; left:0px;}
#boxer .boxer-arrow.next{background-position:-50px -50px; right:0px;}
#boxer .boxer-arrow.next:hover{background:#4cb035 url(../images/iconImg.png) no-repeat -50px -50px;  right:0px;}
#boxer .boxer-position{color:#999; font-size:12px; margin:0; padding:10px 0 6px;}
#boxer .boxer-caption p{margin:0;padding:0; font-size:16px;}
#boxer .boxer-caption.gallery p{padding: 0; text-align:center; line-height:50px;}
#boxer.loading .boxer-container{background: #fff url(../images/loading.gif) no-repeat center;}


/* pageTechnology */
.pageTechnology{overflow: hidden; margin: 40px auto; width: 1242px;}
.pageTechnology li{ width: 370px; overflow: hidden;  height: 308px; float: left; border: 1px solid #ececec; margin: 21px 21px ; position: relative;}
.pageTechnology li img{ width: 370px; height: 308px; transition: all 0.8s ease; position: relative; z-index: 1; }
.pageTechnology li p{ font-size: 14px; line-height: 26px; text-align: center; position: absolute; bottom: 0; left: 0; width: 340px; z-index: 2; background-color: rgba(0, 0, 0, 0.6); padding: 15px; color: #fff;}
.pageTechnology li:hover img{ transform:scale(1.1); }
.pageTechnology li:hover p{ background-color: rgba(76, 176, 53, 0.8);}


/* pageMap */
.pageMap{ width:100%; margin:60px auto; min-width: 1200px;  }
.pageMap .hd{ float: left; padding:0 0 60px 0;height:780px; width: 100%;  position:relative; }
.pageMap .hd ul{   width: 1242px;  margin: auto; }
.pageMap .hd ul li {display: block;overflow: hidden;float: left;width:310px; height: 180px; padding: 20px 30px; margin:20px 21px; border: solid 1px #eee; transition: all 0.6s ease; cursor: pointer;}
.pageMap .hd ul li .name{font-size:20px;border-bottom:6px solid rgba(76, 176, 53, 0.6);position:relative;height:30px;line-height:50px;display:Inline-block; color: #333; transition: all 0.6s ease;}
.pageMap .hd ul li .dis {float:left;color:#666;line-height:32px; margin-top: 20px; font-size: 14px; color: #666; transition: all 0.6s ease;}
.pageMap .hd ul li:hover,.pageMap .hd ul li.on { border-color: #4cb035; background-color: #4cb035;}
.pageMap .hd ul li:hover .name,.pageMap .hd ul li.on .name{ color: #fff; border-bottom:6px solid #f8c200;}
.pageMap .hd ul li:hover .dis,.pageMap .hd ul li.on .dis{ color: #fff;}

.pageMap .bd { float: left; width: 100%; height: 500px;  }
.pageMap .bd .cont{ width: 1200px; height: 500px; margin: auto; }


/* pageForm */
.pageForm{ margin: 60px auto;}
.pageForm .top{font-size:24px; color:#333; position:relative; line-height:36px;}
.pageForm .top em{float:right;padding-right:10px;font-size:16px;color:#999;font-style:normal;padding-left:8px;text-transform:uppercase;}
.pageForm .top span{display: inline-block;height: 1px;width:50px;background: #ccc;margin-left:12px;}
.FormList{ width:1200px; margin:30px auto 90px; overflow:hidden;}
.FormList .row{ width:100%; clear:both;  margin:0 0 20px 0;}
.FormList .row .row_left{ width:400px; float:left; display:block; }
.FormList .txt{ border:1px solid #eee; padding:10px; background:#fff;}
.FormList .txt:focus{ border:1px solid #4cb035; padding:10px; background:#fff;}
.FormList .txt.w1{ width:370px; height:40px; line-height:40px;}
.FormList .txt.w2{ width:1170px; height:200px; line-height:30px;}
.FormList .btn{ float:left; border:0;width:300px; height:50px; cursor:pointer; text-align:center; background:#4cb035;font-size:22px; color:#fff;}
.FormList .btn:hover{ background-color: #333;}
.FormList p{ float: right; line-height: 50px; font-size: 18px; color: #333; font-weight: bold; }
.FormList p span{ color: #4cb035; font-size: 24px;}

.FormList input::-webkit-input-placeholder,.FormList textarea::-webkit-input-placeholder{color:#999999;font-size:14px;}
.FormList input:-ms-placeholder,.FormList textarea:-ms-placeholder{color:#999999;font-size:14px;}
.FormList input:-moz-placeholder,.FormList textarea:-ms-placeholder{color:#999999;font-size:14px;}


/* pageJobs */
.pageJobs{ width:1198px; border:solid 1px #eee; padding:49px 0;  margin:60px auto; position:relative;}
.JobsList{width:1100px;margin:0 auto;}
.JobsPosition{height: 70px;cursor: pointer; margin-bottom: 1px; line-height:70px; border-bottom: 1px solid #eee;position: relative;}
.JobsPosition p{ float:left;}
.JobsPosition .Title{ font-size:20px; width:340px; padding-left:40px; color:#333; font-weight:bold;}
.JobsPosition .Location{ font-size:14px; color:#666; width:160px; padding-left:20px;}
.JobsPosition .Years{ font-size:14px; color:#666; width:160px; padding-left:20px;}
.JobsPosition .Wage{ font-size:14px; color:#666; width:160px; padding-left:20px;}
.JobsPosition .People{ font-size:14px; color:#666; width:160px; padding-left:20px;}
.JobsPosition:hover,.JobsList .current{background:#4cb035;border-bottom: 1px solid #4cb035;}
.JobsPosition:hover .Title,.JobsPosition:hover .Location,.JobsPosition:hover .Years,.JobsPosition:hover .Wage,.JobsPosition:hover .People{ color:#fff;}
.current .Title,.current .Location,.current .Years,.current .Wage,.current .People{ color:#fff;}
.PositionCon{line-height:32px; border-bottom:solid 2px #4cb035; padding:20px 40px; font-size:14px; color:#333;}
.PositionCon img{ max-width: 100%;}

/* pageSearch */
.pageSearch{ width: 100%; text-align: center; line-height: 40px; color: #333; font-size: 24px;}
.pageSearch span{ font-weight: bold; font-size: 30px;}


/* fenye */
.pages { margin:40px 0 0; text-align:center; font-size:12px;}
.pages a { display:inline-block; height:32px; line-height:32px; background:#fff; border:1px solid #e2e2e2; text-align:center; color:#666; padding:0 13px; margin-left:6px;border-radius: 3px;}
.pages a.a1 { background:#fff; width:56px; padding:0; }
.pages a:hover { background:#4cb035; border:1px solid #4cb035; color:#fff; text-decoration:none }
.pages span { display:inline-block; height:32px; line-height:32px; background:#4cb035; border:1px solid #4cb035; color:#fff; text-align:center; padding:0 13px; margin-left:6px;border-radius: 3px;}
.pages1{ width:100%; margin-top:30px;}
.pages1 .pages1_l a,.pages1 .pages1_r a{ font-size:14px; color:#666;}
.pages1 .pages1_l a:hover,.pages1 .pages1_r a:hover{ text-decoration:underline; color:#4cb035;}



.jquery-lightbox-overlay{ background:#000; }
.jquery-lightbox{ position:relative; padding:0; margin:0;}
.jquery-lightbox-html{ z-index:7000; padding:0; position:relative; border:solid 20px #fff; margin: 0; overflow: hidden;}
.jquery-lightbox-background{z-index:6999; position:absolute; padding:0; float:left;}
.jquery-lightbox-mode-html .jquery-lightbox-background{background:#fff;}
.jquery-lightbox-mode-html .jquery-lightbox-html{ overflow:auto}
.jquery-lightbox-loading{background:url(../images/loading.gif) #fff no-repeat center center}
.jquery-lightbox-mode-html .jquery-lightbox-loading{background:url(../images/loading.gif) #fff no-repeat center center}
.jquery-lightbox-button-close{position:absolute; width:50px; background:#333 url(../images/iconBox.png) no-repeat 0 0; height:50px; top:0px; right:-50px;}
.jquery-lightbox-button-close:hover{background:#4cb035 url(../images/iconBox.png) no-repeat 0 0}
.jquery-lightbox-button-close SPAN{display:none}
.jquery-lightbox-buttons SPAN{display:none}
.jquery-lightbox-buttons{z-index: 7001; position: absolute; display: none; height:100px; width:50px; top:50px; right:-50px;}
.jquery-lightbox-buttons .jquery-lightbox-button-left{margin:0px; width:50px; height:50px; display:inline; background:#333 url(../images/iconBox.png) no-repeat -50px 0; float:left; }
.jquery-lightbox-buttons .jquery-lightbox-button-left:hover{background:#4cb035 url(../images/iconBox.png) no-repeat -50px 0;}
.jquery-lightbox-buttons .jquery-lightbox-button-right{margin:0px; width:50px; display: inline; background:#333 url(../images/iconBox.png) no-repeat -100px 0; float:left; height:50px}
.jquery-lightbox-buttons .jquery-lightbox-button-right:hover{background:#4cb035 url(../images/iconBox.png) no-repeat -100px 0;}
.jquery-lightbox-navigator{display: none}



/* tanchu */
.theme-mask{z-index:9999; position:fixed; _position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); display:none; }
.DownloadXcx{ width:360px; height:400px; z-index:10000; position:fixed; top:50%;left:50%; background:#fff; margin:-200px 0 0 -180px;   box-shadow:1px 1px 6px 3px rgba(0,0,0,.2); display:none; text-align:center; border-radius:5px;}
.DownloadXcx dl{ margin-top:30px; font-size:14px; line-height:40px;}
.DownloadXcx .close{ width:110px; height:40px; background:#333; color:#fff; display:inline-block; border-radius:5px; font-size:14px; margin-top:20px;}
.DownloadXcx .close:hover{ background-color: #4cb035;}


.theme-bg{z-index:9999; position:fixed; _position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0, 0, 0, 0.8); }
.popover_statement{ width:320px; height:320px; padding:20px; z-index:10000; position:fixed; top:50%;left:50%; background:#fff; margin:-200px 0 0 -180px;   box-shadow:1px 1px 6px 3px rgba(0,0,0,.2); border-radius:5px; font-size:14px; line-height:26px;}
.popover_statement .title{ text-align:center; font-size:18px; font-weight:bold; line-height:36px; margin-bottom:10px;}
.popover_statement .link{text-align:center;}
.popover_statement .link a{width:110px; height:40px; background:#4cb035; color:#fff; border-radius:5px; display:inline-block; font-size:14px; margin:20px 10px 0; line-height:40px;}



/* customer */
.customer {top:50%; position:fixed; right:0; z-index:99; margin-top:-152px; font-size:12px;}
.customer a {display:block; width:56px; height:56px; padding:8px; background:#4cb035; border:1px solid #4cb035; position: relative; text-align: center; margin:2px 0; font-size:12px; color: #fff;}
.customer a:hover{ background:#f8c200; color:#fff; border:1px solid #f8c200;}
.customer i{ display: block; height:36px; width:36px; background:url(../images/iconFloat.png); margin:2px 10px; }
.customer .customer1{ background-position:0px 0px;}
.customer .customer2{ background-position:-36px 0px;}
.customer .customer3{ background-position:-72px 0px;}
.customer .customer4{ background-position:-108px 0px;}
.customer a:hover .customer1{ background-position:0px -36px;}
.customer a:hover .customer2{ background-position:-36px -36px;}
.customer a:hover .customer3{ background-position:-72px -36px;}
.customer a:hover .customer4{ background-position:-108px -36px;}