/* 前端白明明 */



* {
  margin: 0;
  padding: 0;
  font-family: "granby_ef_lightregular";
}

body {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  margin: 0 auto;
  overflow-x: hidden;
  position: relative;
  padding: 0;
  width: 100%;
  color: #1f1f1f;
  font-family: Arvo, Arial, Helvetica, sans-serif, Microsoft Yahei;
  font-size: 14px;
  line-height: 1;
  background: #fff;
}

html.act {
  overflow: hidden;
  width: 100%;
  height: 100vh;
}

ul,
ul li,
ol li,
tr td,
dl,
dd {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

input,
textarea {
  font-family: Arvo;
}

.clearfix:after {
  content: " ";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.clearfix {
  *zoom: 1;
}

a {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  -webkit-transition: all .5s;
  -moz-transition: all .5s;
  transition: all .5s;
  color: #1f1f1f;
}

textarea,
select {
  outline: none;
  color: #666;
  font-size: 14px;
  width: 100%;
  font-family: Arvo;
}

@font-face {
  font-family: 'granbyef-mediumregular';
  src: url('../font/elsnerflake_-_granbyef-medium-webfont.eot');
  src: url('../font/elsnerflake_-_granbyef-medium-webfont.eot?#iefix') format('embedded-opentype'),
    url('../font/elsnerflake_-_granbyef-medium-webfont.woff2') format('woff2'),
    url('../font/elsnerflake_-_granbyef-medium-webfont.woff') format('woff'),
    url('../font/elsnerflake_-_granbyef-medium-webfont.ttf') format('truetype'),
    url('../font/elsnerflake_-_granbyef-medium-webfont.svg#granbyef-mediumregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'granby_ef_lightregular';
  src: url('../font/granby_ef_light_webfont.eot');
  src: url('../font/granby_ef_light_webfont.eot?#iefix') format('embedded_opentype'),
    url('../font/granby_ef_light_webfont.woff2') format('woff2'),
    url('../font/granby_ef_light_webfont.woff') format('woff'),
    url('../font/granby_ef_light_webfont.ttf') format('truetype'),
    url('../font/granby_ef_light_webfont.svg#granby_ef_lightregular') format('svg');
  font-weight: normal;
  font-style: normal;

}
.inner{
  margin-left: auto;
  margin-right: auto;
  max-width: 1650px;
}
.header{
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}
.header .top{
  height: 70px;
}
.header .top .logo{
  padding-top: 10px;
  float: left;
}
.header .top .tools{
  position: relative;
  height: 70px;
  float: right;
  display: flex;
}
.langBox{
  position: absolute;
  padding: 35px 0;
  left: -44px;
  top: 48px;
  background: #f4f4f4;
  width: 88px;
  font-size: 12px;
  padding: 7px 20px;
  color: #555;
  opacity: 0;
  transition: all 0.5s ease;
  z-index: 6;
}
.header .top .tools:hover .langBox{
  display: block;
  opacity: 1;
}
.langBox a{
  border-bottom: 1px solid #eee;
  font-size: 14px;
  display: block;
  line-height: 32px;
  text-align: center;
}
.header .top .nav {
  float: right;
  margin-right: 70px;
}
.header .top .nav > span{
  display: inline-block;
  line-height: 70px;
  margin: 0 25px;
  position: relative;
  font-weight: bold;
}
.header .top .nav > span .subBox{
  display: none;
  position: absolute;
  left:-30px;
  top:50px;
  background: #f4f4f4;
}
.header .top .nav > span:hover .subBox{
  display: block;
}
.header .top .nav > span .subBox a{
  border-bottom: 1px solid #eee;
    font-size: 14px;
    display: block;
    line-height: 32px;
    text-align: center;
}
.header .top .inner{
  height: auto;
}
.header .top .nav a{
  display: inline-block;
  line-height: 70px;
  margin: 0 25px;
}
.header .top .logo img{
  height: 50px;
}
.header .top .tools span {
  position: relative;
  height: 100%;
  align-items: center;
  display: flex;
  margin-left: 20px;
  cursor: pointer;
}
.header .top .tools span > img{
  width: 18px;
}
.header .navBox{
  border-top: 1px solid #eee;
  height: 38px;
}
.header .navBox  .inner > div{
  width: 100%;
  display: flex;
}
.header .navBox a{
  display: flex;
  flex: 1;
  justify-content: center;
  align-items: center;
  line-height: 38px;
  font-family: 'granby_ef_lightregular';
  font-size: 15px;
  text-transform: uppercase;
  border-left: 1px solid #eee;
}
.header .navBox a:hover{
  color: #fff;
  background-color: #8eca2b;
}
.header .navBox a.active{
  color: #fff;
  background-color: #8eca2b;
}
.header .navBox a:last-child{
  border-right: 1px solid #eee;
}
.inBanner{
  margin-top: 109px;
  height: calc(100vh - 109px);
}
.inBanner .swiper{
  height: 100%;
}
.inBanner .swiper .swiper-slide{
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  position: relative;
}
.inBanner .swiper .swiper-slide .inner{
  position: relative;
  height: 100%;
}
.inBanner .swiper .swiper-slide .inner .txt{
  color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}
.inBanner .swiper-pagination-bullet{
  opacity: .4;
  background: none;
  margin: 0 10px !important;
  color: #fff;
  font-size: 15px;
}
.inBanner .swiper-pagination-bullet-active{
  opacity: 1;
}

.inBanner .swiper .swiper-slide .inner .txt h2{
  font-size: 42px;
  margin-bottom: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
}
.inBanner .swiper .swiper-slide .inner .txt h3{
  font-size: 20px;
  margin-bottom: 8px;
  letter-spacing: 2px;
}
.inBanner .swiper .swiper-slide .inner .txt p{
  font-size: 20px;
  letter-spacing: 2px;
}
.inBanner .inPrev{
  
}
@keyframes fadeInUp {
  0% {
    transform: translateY(40px);
    opacity: 0;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}
.inBanner .swiper-slide-active .txt h2 {
  animation: fadeInUp 1s ease both;
  animation-delay: .5s;
}
.inBanner .swiper-slide-active .txt h3 {
  animation: fadeInUp 1s ease both;
  animation-delay: 1s;
}
.inBanner .swiper-slide-active .txt p {
  animation: fadeInUp 1s ease both;
  animation-delay: 1.5s;
}
.swiperBox{
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  z-index: 3;
}
.inBanner .swiper-pagination{
  width: auto;
  display: flex;
  position: relative !important;
  margin: 0 35px;
  bottom: auto !important;
  height: 30px;
  align-items: center;
}
.inBanner  .inPrev{
  display: flex;
  background: url(../images/inPrev.png);
  width: 60px;
  height: 30px;
  background-size: 30px;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
  outline: none;
  border: none;
}
.inBanner  .inNext{
  display: flex;
  background: url(../images/inNext.png);
  width: 60px;
  height: 30px;
  background-size: 30px;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
  outline: none;
  border: none;
}
.inBanner .swiper .swiper-slide::after{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  display: block;
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .2);
}
.inSec1{
  padding: 60px 0;
}
.inSec1 .inner{
  height: auto;
  overflow: hidden;
}
.inSec1 .l{
  float: left;
  width: 42%;
  overflow: hidden;
}
.inSec1 .l > div{
  height: 620px;
  width: 100%;
  transition: .3s ease;
  background-size: 100%;
  background-position: center bottom !important;
}
.inSec1 .l img{
  width: 100%;
  transition: .3s ease;
}
.inSec1 .r{
  padding-top: 40PX;
  margin-left: 52%;
}
.inSec1 .l:hover > div{
  transform: scale(1.1);
}
.inSec1 .l:hover > img{
  transform: scale(1.1);
}
.inSec1 .r h2{
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 50px;
}
.inSec1 .r .item{
  margin-bottom: 50px;
}
.inSec1 .r .item h3{
  padding-bottom: 3px;
  font-size: 25px;
  font-weight: normal;
}
.inSec1 .r .item p{
  font-size: 15px;
}
a.more{
  display: block;
  width: 130px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border: 2px solid #8eca2b;
  font-size: 15px;
  margin-top: 20px;
  transition: .3s;
}
a.more:hover{
  background-color: #8eca2b;
  color: #fff;
}
.inSec2{
  padding: 60px 0;
  background-color: #f2f2f2;
}
.inSec2 .sec1{
  height: auto;
  overflow: hidden;
  display: flex;
  margin-bottom: 40px;
}
.inSec2 .sec1 .item{
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}
.inSec2 .sec2 .l{
  float: left;
  width: 42%;
  overflow: hidden;
}
.inSec2 .sec2 .r{
  display: none;
  margin-left: 52%;
}

.inSec2 .sec2 .l > div{
  height: 320px;
  width: 100%;
  background-position: center center !important;
  transition: .3s ease;
}
.inSec2 .sec2 .l:hover > div{
  transform: scale(1.1);
}
.inSec2 .sec2 .l:hover img{
  transform: scale(1.1);
}
.inSec2 .sec2 .l img{
  width: 100%;
  transition: .3s ease;
}
.inSec2 .sec2 {
  height: auto;
  overflow: hidden;
}
.inSec2 .sec2  h2{
  font-size: 30px;
  text-transform: uppercase;
  margin-bottom: 50px;
}
.inSec2 .sec2  p{
  font-size: 18px;
  line-height: 26px;
  margin-bottom:30px;
  font-family: "granby_ef_lightregular";
}
.inSec2 .sec1 .item .img{
  margin-left: auto;
  margin-right: auto;
  align-items: center;
  justify-content: center;
  display: flex;
  width: 80px;
  height: 80px;
  border-radius: 15px;
  border: 3px solid #fff;
  background-color: #6d6c6c;
  transition: .3s;
}
.inSec2 .sec1 .item .img img{
  height: 40px;
}
.inSec2 .sec1 .item:nth-child(1) .img img{
  height: 50px;
}
.inSec2 .sec1 .item:nth-child(2) .img img{
  height: 45px;
}
.inSec2 .sec1 .item p{
  padding: 15px 0 0 0;
  text-align: center;
  font-weight: bold;
}
.inSec2 .sec1 .item:hover .img{
  background-color: #8eca2b;
}
.inSec3{
  padding: 60px 0;
}
.title h2{
  font-size: 26px;
  font-weight: bold;
}
.title span{
  display: inline-block;
  background: #8eca2b;
  width: 60px;
  height: 3px;
}

.proSwiper{
  margin-top: 40px;
  position: relative;
  padding: 0 30px;
  overflow: hidden;
}
.proSwiper .main{
  display: block;
  overflow: hidden;
  position: relative;
}
.proSwiper .main .img{
  width: 100%;
  height: 380px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  position: relative;
  z-index: 1;
  transition: 1s;
}
.proSwiper .main:hover .img{
  transform: scale(1.1);
}
.proSwiper .main  .txt{
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 2;
  padding: 15px;
  text-align: center;
  background-color: rgba(255,255,255, .7);
}
.proSwiper .main  .txt h2{
  font-size: 15px;
  padding-bottom: 3px;
}
.proSwiper .main  .txt p{
  font-size: 13px;
  color: #777;
  text-transform: uppercase;
}
.proSwiper .main .search{
  width: 60px;
  height: 60px;
  border-radius: 100%;
  background-color: rgba(255,255,255, .7);
  background-image: url(../images/search2.png);
  background-size: 25px !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  position: absolute;
  left: 50%;
  top: 55%;
  z-index: 2;
  transform: translate(-50%,-50%);
  transition: .45s;
  opacity: 0;
}
.proSwiper .main:hover  .search{
  top: 50%;
  opacity: 1;
}
.proSwiper .proPrev{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  z-index: 2;
  width: 80px;
  height: 40px;
  background-color: #f8f7f7;
  cursor: pointer;
  background-image: url(../images/proL.png);
  background-size: 25px !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.proSwiper .proPrev:hover{
  background-color: #8eca2b;
  background-image: url(../images/proL_1.png);
}

.proSwiper .proNext{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
  width: 80px;
  height: 40px;
  background-color: #f8f7f7;
  cursor: pointer;
  background-image: url(../images/proR.png);
  background-size: 25px !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}

.proSwiper .proNext:hover{
  background-color: #8eca2b;
  background-image: url(../images/proR_1.png);
}
.inSec4{
  padding: 40px 0 20px 0;
}
.honList{
  padding-top: 40px;
  padding-bottom: 40px;
  height: auto;
  overflow: hidden;
}
.inSec4{
  background-color: #f7f7f7;
}
.honList .item{
  cursor: pointer;
  float: left;
  margin-left: 2%;
  width: calc(94% / 4);
  overflow: hidden;
  margin-bottom: 10px;
  background-color: #fff;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.honList .item img{
 max-width: 100%;
 max-height: 100%;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  display: block;
  cursor: pointer;
  transition: .45s;
}
.honList .item:hover img{
  transform: scale(1.1);
}
.honList .item:nth-child(4N+1){
  margin-left: 0;
}
.honList .item:first-child{
  margin-left: 0;
}
.footer{
  background-color: #e6e6e6;
  padding-top: 60px;
}
.footer .copy{
  border-top: 1px solid #ccc;
  padding: 20px 0;
  height: auto;
  overflow: hidden;
}
.footer .copy .l{
  color: #999;
  float: left;
  font-family: 'granby_ef_lightregular';
}
.footer .copy .r{
  color: #999;
  float: right;
  font-family: 'granby_ef_lightregular';
}
.footer .copy .r a{
  color: #999;
  font-family: 'granby_ef_lightregular';
}
.footer .top{
  padding-bottom: 50px;
  height: auto;
  overflow: hidden;
}
.footer .top .item{
  border-right: 1px solid #999;
  float: left;
  margin-left: 4%;
  width: calc((88% - 84px)/4);
  padding-right: 20px;
}
.footer .top .item:first-child{
  margin-left: 0;
}
.footer .top .item .tit{
  font-weight: bold;
  text-transform: uppercase;
  font-size: 20px;
  padding-bottom: 40px;
}
.footer .top .item a{
  font-family: "granby_ef_lightregular";
  display: block;
  margin-bottom: 18px;
  font-size: 15px;
  text-transform: capitalize;
}
.footer .top .item .des{
  font-family: "granby_ef_lightregular";
  font-size: 15px;
  line-height: 22px;
}
.footer .top .item:last-child{
  border-right: none;
}
.footer .top .item .dd img{
  width: 16px;
  position: absolute;
  left: 0;
  top: 0px;
}
.footer .top .item .dd{
  padding-left: 23px;
  position: relative;
  font-family: "granby_ef_lightregular";
  margin-bottom: 18px;
}
.innerBanner{
  margin-top: 109px;
  position: relative;
  height: 450px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
}
.banner1{
  background: url(../images/inbanner1.jpg);
  background-position: center center !important;
}
.banner2{
  background: url(../images/inbanner2.jpg);
}
.banner3{
  background: url(../images/inbanner3.jpg);
}
.banner4{
  background: url(../images/inbanner4.jpg);
}
.banner5{
  background: url(../images/inbanner5.jpg);
}
.banner6{
  background: url(../images/inbanner6.jpg);
}
.innerBanner .inner{
  position: relative;
  height: 100%;
}
.innerBanner .inner >div{
  position: absolute;
  left: 0;
  bottom: 30%;
}
.innerBanner .inner h2{
  color: #fff;
  font-size: 50px;
  text-transform: uppercase;
  letter-spacing: 3px;
  padding-bottom: 15px;
}
.innerBanner .inner h3{
  display: block;
  width: 110px;
  height: 1px;
  background-color: #8eca2b;
  margin-bottom: 5px;
}
.absec1 .bg{
  height: auto;
  overflow: hidden;
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
}
.absec1{
  position: relative;
}
.absec1 .bg .l{
  float: left;
  height: 100%;
  width: 53%;
  background: url(../images/abbg1.jpg);
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
.absec1 .bg .r{
  float: left;
  height: 100%;
  width: 47%;
  background-color: #f7f7f7;
  background: url(../images/profile.jpg);
  background-repeat: no-repeat!important;
  background-size: cover!important;
  background-position: center center !important;
}
.absec1 .inner{
  position: relative;
  z-index: 2;
  height: auto;
  overflow: hidden;
}
.absec1 .inner .l{
  padding: 80px 40px 80px 0;
  float: left;
  width: 50%;
  box-sizing: border-box;
}
.absec1 .inner .r{
  float: right;
  width: 47%;
  height: 100%;
}
.absec1 .inner .l h2{
  font-size: 24px;
  text-transform: uppercase;
  padding-bottom: 30px;
}
.absec1 .inner .l p{
  font-family: "granby_ef_lightregular";
  font-size: 18px;
  line-height: 23px;
}
.absec1 .inner .r > div{
  height: 400px;
  display: none;
}
.absec2{
  padding-top: 80px;
  padding-bottom: 200px;
  background: url(../images/abbg2.jpg);
  background-repeat: no-repeat!important;
  background-size: cover!important;
  background-position: center center !important;
  background-attachment: fixed;
}
.absec2 .box1 .inner > div{
  max-width: 600px;
  padding-bottom: 50px;
}
.absec2 .box1 .inner h2{
  text-transform: uppercase;
  font-size: 24px;
  color: #fff;
  margin-bottom: 20px;
}
.absec2 .box1 .inner p{
  color: #fff;
  font-family: "granby_ef_lightregular";
  font-size: 18px;
  line-height: 23px;
}
.absec3{
  background-color: #fff;
  padding: 60px 0 60px 0;
  margin-top: -200px;
}
.absec3 ul {
  height: auto;
  overflow: hidden;
}
.absec3 ul  li{
  padding: 0 4%;
  text-align: center;
  float: left;
  width: 25%;
  box-sizing: border-box;
}
.absec3 ul li .circle{
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background-color: #8eca2b;
  position: relative;
  transition: .45s;
}
.absec3 ul li:hover .circle{
  transform: rotate(40deg);
}
.absec3 ul li .circle img{
  display: flex;
  width: 50px;
}
.absec3 ul li h2{
  font-size: 22px;
  margin: 15px 0 10px 0;
}
.absec3 ul li p{
  font-family: "granby_ef_lightregular";
  font-size: 18px;
}
.absec3 ul li:last-child img{
  height: 42px;
  width: 42px;
}
.absec4{
  padding:0 0 50px 0;
}
.absec4 .more{
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  font-size: 18px;
}
.absec4 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.HonUl li > div{
  height: 360px !important;
}
.absec5{
  padding:80px 0 80px 0;
  background-color: #f7f7f7;
}
.absec5 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.absec5 ul{
  padding-top: 40px;
  padding-bottom: 80px;
  height: auto;
  overflow: hidden;
}
.absec5 ul li{
  cursor: pointer;
  float: left;
  margin-left: 2%;
  width: calc(94% / 4);
  overflow: hidden;
  margin-bottom: 40px;
  background-color: #fff;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}
.absec5 ul li:nth-child(4N+1){
  margin-left: 0;
}
.absec5 ul li > div{
  height: 210px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: .45s;
}
.absec5 ul li  img{
  max-height: 100%;
  max-width: 100%;
  width: auto;
  transition: .45s;
  margin-left: auto;
  margin-right: auto;
}
.absec5 ul li:hover > img{
  transform: scale(1.1);
}
.absec5.l{
  padding-bottom: 0;
}
.absec5 ul{
  padding-bottom: 40px;
}
.absec5 .more{
  margin: 0 auto;
}
.newsSec{
  padding: 80px 0 20px 0;
  background-color: #f7f7f7;
}
.newsSec li{
  float: left;
  margin-left: 3%;
  width: calc(91% / 4);
  overflow: hidden;
  margin-bottom: 60px;
}
.newsSec ul{
  height: auto;
  overflow: hidden;
}
.newsSec ul li:nth-child(4N+1){
  margin-left: 0;
}
.newsSec ul li .img{
  overflow: hidden;
}
.newsSec ul li a{
  display: block;
}
.newsSec ul li .img > div{
  width: 100%;
  height: 260px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: .45s;
}
.newsSec ul li a:hover .img > div{
  transform: scale(1.1);
}
.newsSec ul li  .txt{
  background-color: #fff;
  padding: 30px 20px;
}
.newsSec ul li .txt h2{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  margin-bottom: 10px;
}
.newsSec ul li .txt p{
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
  color: #999;
  font-family: "granby_ef_lightregular";
  font-size: 18px;
}
.newsSec ul li .txt .con{
  padding-top: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.newsSec ul li .txt .con .view{
  display: flex;
  align-items: center;
  color: #8eca2b;
}
.newsSec ul li .txt .con .view img{
  width:18px;
  margin-left: 5px;
  padding-top: 2px;
}
.conSec1{
  padding: 80px 0;
}
.conSec1 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.conSec1 .company{
  font-size: 28px;
  color: #8eca2b;
  text-transform: uppercase;
}
.conSec1 .iconList{
  padding: 80px 0 20px 0;
  height: auto;
  overflow: hidden;
}
.conSec1 .iconList .item{
  float: left;
  width: 33.33%;
  padding: 0 3% 0 0;
  box-sizing: border-box;
}
.conSec1 .iconList .item .ico{
  float: left;
  position: relative;
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background-color: #8eca2b;
}
.conSec1 .iconList .item .ico img{
  width: 45px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.conSec1 .iconList .item .txt{
  position: relative;
  margin-left:100px;
  font-size: 20px;
  font-family: "granby_ef_lightregular";
}
.conSec1 .iconList .item .txt span{
  display: block;
  margin-bottom: 5pX;
}
.conSec1 .iconList .item:nth-child(2) .txt {
  line-height: 25px;
}
.conSec2{
  padding: 60px 0 60px 0;
  background-color: #8eca2b;
}
.conSec2 .title{
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.conSec2  p{
  font-size: 19px;
  font-family: "granby_ef_lightregular";
  color: #fff;
}
.conSec2 .formBox{
  padding-top: 40px;
  height: auto;
  overflow: hidden;
}
.conSec2 .formBox .l{
  float: left;
  width: 48%;
}
.conSec2 .formBox .r{
  float: right;
  width: 45%;
}
.conSec2 .formBox .r img{
  width: 100%;
}
.conSec2 .formBox .l .input{
  padding: 25px 15px 12px 15px;
  color: #fff;
  font-size: 20px;
  font-family: "granby_ef_lightregular";
  border-bottom: 1px solid #fff;
}
.conSec2 .formBox .l .textarea{
  padding: 25px 15px 80px 15px;
  color: #fff;
  font-size: 20px;
  font-family: "granby_ef_lightregular";
  border-bottom: 1px solid #fff;
}
.conSec2 .formBox .l .button{
  padding-top: 60px;
}
.conSec2 .formBox .l .button button{
  font-family: "granby_ef_lightregular";
  width: 140px;
  height: 45px;
  line-height: 45px;
  background-color: #fff;
  color: #8eca2b;
  border: none;
  outline: none;
  font-size: 25px;
}
.proSec{
  padding: 80px 0;
}
.proSec .l{
  float: left;
  width: 250px;
  border: 1px solid #ccc;
}
.proSec .l li a{
  position: relative;
  padding: 12px 15px;
  display: block;
  text-transform: uppercase;
  font-size: 18px;
}
.proSec .l li{
  border-bottom: 1px solid #ccc;
}
.proSec .l li a:after{
  position: absolute;
  right: 15px;
  top: 50%;
  margin-top: -15px;
  display: block;
  content: "";
  width: 30px;
  height: 30px;
  background: url(../images/arrdown.png);
  background-size: 20px;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
.proSec .l li dd{
  font-family: "granby_ef_lightregular";
  padding: 8px 15px;
  font-size: 18px;
  color: #999;
}
.proSec .l li dd.active{
  font-weight: bold;
  color: #8eca2b;
  cursor: pointer;
}
.proSec .inner{
  height: auto;
  overflow: hidden;
}
.proSec .l li  dl{
  display: none;
}
.proSec .l li.active dl{
  height: auto;
  opacity: 1;
}
.proSec .l li:last-child{
  border-bottom: none;
}
.proSec .l li.active a:after{
  transform: rotate(180deg);
}
.proSec .l li.active dl dd.active{
  font-weight: bold;
  color: #8eca2b;
}
.proSec .l li.active dl dd{
  cursor: pointer;
}
.proSec .r{
  margin-left: 300px;
}
.proSec .r ul{
  height: auto;
  overflow: hidden;
}
.proSec .r ul li{
  cursor: pointer;
  float: left;
  margin-left: 3%;
  width: calc(94% / 3);
  margin-bottom: 0px;
}
.proSec .r ul li:nth-child(3N+1){
  margin-left: 0;
}
.proSec .r ul li .img{
  overflow: hidden;
}
.proSec .r ul li .img > div{
  transition: .3s;
  height: 240px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
}
.proSec .r ul li  .txt{
  padding: 20px 0;
  text-transform: uppercase;
  font-size: 20px;
  height: 40px;
}
.proSec .r ul li:hover .img > div{
  transform: scale(1.1);
}
.proSec .r ul li:hover  .txt{
  color: #8eca2b;
}
.serS1{
  padding: 80px 0;
  background-color: #f7f7f7;
}
.serS1 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.serS1 ul{
  padding-top: 40px;
  height: auto;
  overflow: hidden;
}
.serS1 ul li{
  float: left;
  margin-left: 5%;
  width: 30%;
  background-color: #fff;
  padding: 50px 25px;
  text-align: center;
  box-sizing: border-box;
  height: 280px;
}
.serS1 ul li:first-child{
  margin-left: 0;
}
.serS1 ul li h2{
  font-size: 20px;
  text-transform: uppercase;
  margin: 25px 0 10px 0;
}
.serS1 ul li p{
  font-family: "granby_ef_lightregular";
  font-size: 18px;
}
.serS1 ul li .ico{
  background-color: #6d6c6c;
  border-radius: 15px;
  width: 90px;
  height:90px;
  position: relative;
  margin: 0 auto;
}
.serS1 ul li .ico img{
  width: 55px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
.serS1 ul li:nth-child(2) .ico img{
  width: 60px;
}
.serS1 ul li:nth-child(3) .ico img{
  width: 45px;
}
.serS1 ul li:hover .ico{
  background-color: #8eca2b;
}
.serS2{
  padding: 80px 0;
  height: 250px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-attachment: fixed !important;
  background: url(../images/bg1.jpg);
}
.serS2 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #fff;
}
.serS2 .p{
  font-family: "granby_ef_lightregular";
  font-size: 18px;
  color: #fff;
}
.processBox{
  margin-top: -220px;
  background-color: #fff;
  margin-bottom: 80px;
}
.processBox li .img{
  width: 100%;
  height: 240px;
  overflow: hidden;
}
.processBox li .img >div{
  height: 100%;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: .3s;
}
.processBox li .txt{
  height: 240px;
  padding: 45px 20px;
  text-align: center;
  box-sizing: border-box;
}
.processBox li .txt h2{
  font-size: 22px;
  margin-bottom:8px;
}
.processBox li p{
  font-family: "granby_ef_lightregular";
  font-size: 18px;
}
.processBox li{
  float: left;
  width: 33.33%;
  position: relative;
}
.processBox ul{
  height: auto;
  overflow: hidden;
}
.processBox li:nth-child(2) .img{
  position: absolute;
  top: 240px;
  left: 0;
}
.processBox li .img:hover >div{
  transform: scale(1.1);
}
.serS3{
  position: relative;
  height: 550px;
}
.serS3 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.serS3 .bg{
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  bottom: 0;
}
.serS3  .inner{
  padding-top: 80px;
  position: relative;
  z-index: 2;
}
.serS3  .p{
  font-family: "granby_ef_lightregular";
  font-size: 18px;
  max-width: 700px;
}
.serS3 .netBox{
  padding-top: 30px;
  height: auto;
  overflow: hidden;
}
.serS3 .netBox .r{
  padding: 55px 40px;
  float: right;
  background-color: rgba(142, 202, 43, .6);
}
.serS3 .netBox .r h2{
  font-size: 24px;
  margin-bottom: 40px;
}
.serS3 .netBox .r .item{
  font-family: "granby_ef_lightregular";
  font-size: 20px;
  margin-bottom: 20px;
}
.joinS1{
  padding: 80px 0 20px 0;
}
.joinS1 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.joinS1 ul{
  padding-top: 50px;
  height: auto;
  overflow: hidden;
}
.joinS1 ul li{
  margin-bottom: 60px;
  float: left;
  width: 33.33%;
  padding: 0 3% 0 0;
  box-sizing: border-box;
}
.joinS1 ul li .ico{
  float: left;
}
.joinS1 ul li .ico img{
  height: 70px;
}
.joinS1 ul li .txt{
  margin-left: 98px;
}
.joinS1 ul li .txt h2{
  font-size: 24px;
  margin-bottom: 9px;
}
.joinS1 ul li .txt p{
  font-family: "granby_ef_lightregular";
  font-size: 18px;
  line-height: 22px;
}
.joinS1 ul li:nth-child(1) .ico img{
  height: 60px;
}
.joinS1 ul li:nth-child(3) .ico img{
  height: 63px;
}
.joinS1 ul li:nth-child(4) .ico img{
  height: 60px;
}
.joinS1 ul li:nth-child(5) .ico img{
  height: 62px;
}
.joinS1 ul li:nth-child(6) .ico img{
  height: 62px;
}
.joinS2{
  padding: 80px 0;
  background-color: #f7f7f7;
}
.joinS2 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.joinS2 .item:nth-child(even) {
  flex-direction: row-reverse;
}
.joinS2 .item {
  display: flex;
  background-color: #fff;
}
.joinS2 .img {
  width: 50%;
  overflow: hidden;
}
.joinS2 .txt {
  position: relative;
  width: 50%;
  padding: 50px 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-sizing: border-box;
}
.joinS2 .img img {
  width: 100%;
  height: auto;
  transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.joinS2 .img:hover img{
  transform: scale(1.1);
}
.joinS2 .txt span {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
  opacity: .2;
  font-size: 120px;
  font-style: italic;
}
.joinS2 .txt h2 {
  font-size: 25px;
  margin-bottom: 10px;
}
.joinS2 .txt p {
  font-size: 18px;
  text-align: center;
  font-family: "granby_ef_lightregular";
}
.joinS2 .itemCon{
  margin-top: 60px;
}
.joinS3{
  padding: 80px 0 30px 0;
}
.joinS3 .title{
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
}
.joinS3 .processBox{
  margin-top: 60px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #fff;
  align-items: center;
}
.joinS3 .processBox .item{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 35px 25px;
  width: 250px;
  height: 130px;
  letter-spacing: 1px;
  text-indent: 1px;
  border: 1px solid #ccc;
  color: #333;
  box-sizing: border-box;
  font-size: 18px;
  font-family: "granby_ef_lightregular";
}
.joinS3 .processBox .arr{
  width:60px;
}
.joinS3 .processBox .arr img{
  width: 100%;
}
.joinS3 .processBox .item:hover{
  background-color: #8eca2b;
  color: #fff;
}

.onlinePop {
  position: fixed;
  z-index: 50000;
  background: rgba(0, 0, 0, 0.95);
  left: 0;
  top: -100vh;
  right: 0;
  height: 100vh;
  transition: all 0.5s ease
}

.onlinePop.show {
  top: 0;
}

.onlinePop .close {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  height: 50px;
  cursor: pointer;
  background-color: #8eca2b;
  background-image: url(../images/close1.png);
  background-repeat: no-repeat;
  background-size: 37px;
  background-position: center center;
}

.onlinePop .popForm .prev{
  width: 30px;
  height: 30px;
  background: url(../images/prev_b.png);
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  left: 0;
  cursor: pointer;
}
.onlinePop .popForm .next{
  width: 30px;
  height: 30px;
  background: url(../images/next_b.png);
  background-size: 90%;
  background-repeat: no-repeat;
  background-position: center center;
  position: absolute;
  right: 0;
  cursor: pointer;
}
.onlinePop .popForm .arr{
  width: 100%;
  position: absolute;
  height: 30px;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  top: 50%;
}
/* 手机头部 */
.phHeader{
  height: 50px;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  right: 0;
  background-color: #fff;
}
.phHeader .logo{
  padding-top: 10px;
  float: left;
}
.phHeader .logo a{
  display: block;
}
.phHeader .logo img{
  height: 32px;
}
.phHeader .menu{
  padding-top: 15px;
  float: right;
}
.phHeader .menu em{
  margin-bottom: 6px;
  display: block;
  width: 30px;
  height: 2px;
  background-color: #8eca2b;
  -o-transition: .5s;
  -ms-transition: .5s;
  -moz-transition: .5s;
  -webkit-transition: .5s;
  transition: .5s;
}
.rightNav {
  left: 100vw;
  top: 0;
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: #ffff;
  z-index: 999999;
  transition: all 0.4s ease;
  padding: 0 15px;
  box-sizing: border-box;
}
.rightNav.on{
  left: 0;
}
.rightNav .top {
  display: flex;
  justify-content: flex-end;
  padding: 20px 5px 30px 0;
}
.rightNav .top img{
  width: 35px;
}
.rightNav ul li{
  border-bottom: 1px solid #eee;
  height: 45px;
  line-height: 45px;
}
.mobileA{
  text-align: center;
  padding-top: 35px;
}
.mobileA a {
  margin: 0 15px;
  font-size: 15px;
  text-decoration: underline;
}
.rightNav ul li{
  text-align: center;
  font-size: 18px;
  text-transform: capitalize;
}
.secNy {
  padding: 80px 0;
  background-color: #f5f5f5;
}

.secNy .inner {
  background-color: #fff;
  padding: 60px 40px 50px 40px;
  border-top: 4px solid #8eca2b;
}

.secNy .title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 40px;
}

.secNy .desc {
  display: flex;
  justify-content: center;
  background-color: #f7f7f7;
  padding: 30px;
}

.secNy .desc div {
  display: flex;
  margin: 0 20px;
}

.secNy .desc span {
  margin: 0 5px;
  color: #999;
}

.secNy .newsBody {
  padding: 50px 0;
  font-size: 16px;
  line-height: 25px;
}
.secNy .newsBody img{
  max-width: 90%;
}
.secNy .pageNation {
  height: auto;
  overflow: hidden;
  position: relative;
  padding: 50px 0 0 0;
  border-top: 1px solid #eee;
	border-bottom: 3px solid #8eca2b;
}

.secNy .pageNation .prev {
  float: left;
  width: 30%;
}

.secNy .pageNation .next {
  float: right;
  width: 30%;
  text-align: right;
}

.secNy .pageNation .back {
  position: absolute;
  bottom:0;
  left: 50%;
  margin-left: -70px;
  margin-top: -20px;
  display: block;
  width: 140px;
  height: 35px;
  color: #fff;
  text-align: center;
  line-height: 35px;
  background-color: #8eca2b;
}

.secNy .pageNation .title {
  font-weight: normal;
  font-size: 15px;
  padding-top: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  transition: 0.5s ease;
}
.secNy .pageNation .prev .title{
  text-align: left;
}
.secNy .pageNation .next .title{
  text-align: right;
}
.secNy .pageNation .span {
  display: flex;
  align-items: center;
}

.secNy .pageNation .prev i {
  margin-top: 2px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/arr3.png);
  background-size: 20px;
  background-position: center center;
}

.secNy .pageNation .next i {
  margin-top: 2px;
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/arr3_r.png);
  background-size: 20px;
  background-position: center center;
}

.secNy .pageNation .next .span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.onlinePop .popForm img {
  max-height: 80vh;
  max-width: 80vw;
  display: block;
  margin: 0 auto;
}
.onlinePop .popForm {
  position: absolute;
  width: 90%;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
/* 产品 */

.pmodel {
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -100;
  background-color: rgba(0,0,0, 0.95);
}
.pmodel .modelCon {
  background-color: #fff;
  width: 75%;
  min-height: 400px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  z-index: 222;
  border: 4px solid #8eca2b;
  padding: 45px 26px 45px 26px;
  box-sizing: border-box;
}
.pmodel  .modelCon .close {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #8eca2b;
  width: 45px;
  height: 45px;
  cursor: pointer;
  background-image: url(../images/close1.png);
  background-position: center center;
  background-size: 32px;
  background-repeat: no-repeat;
}
.pmodel .modelCon .wrap{
height: auto;
overflow: hidden;
position: relative;
width: 95%;
}
.pmodel .modelCon .wrap .l{
float: left;
width: 59%;
position: relative;
overflow: hidden;
}
.pmodel .modelCon .wrap .l img{
max-width: 100%;
width: 100%;
height: 450px;
display: block;
margin: 0 auto;
}
.pmodel .modelCon .wrap .r{
padding-top: 25px;
margin-left: 65%;
}
.pmodel .modelCon .wrap .r .item{
font-size: 16px;
border-bottom: 1px solid #eee;
padding-bottom: 15px;
padding-top: 15px;
display: flex;
}
.pmodel .modelCon .wrap .r .item img{
  width: 50px;
  height: 50px;
}
.pmodel .modelCon .wrap .sarr{
text-align: right;
position: absolute;
right: 0;
bottom: 0;

}
.pmodel .modelCon .wrap .sarr .prev {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #8eca2b;
  outline: none;
  border: none;
  cursor: pointer;
  margin: 0 15px;
  display: inline-block;
  background-image: url(../images/arrl_1.png);
  background-size: 30px;
  background-position: center center;
  background-repeat: no-repeat;
}
.pmodel .modelCon .wrap .sarr .next {
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background-color: #8eca2b;
  outline: none;
  border: none;
  cursor: pointer;
  margin: 0 25px;
  display: inline-block;
  background-image: url(../images/arrr_1.png);
  background-size: 30px;
  background-position: center center;
  background-repeat: no-repeat;
}
.proUl li .imgBox{
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.proUl li .imgBox .img {
  width: 100%;
  height: 270px;
  background-size: cover!important;
  background-repeat: no-repeat!important;
  background-position: center center !important;
  transition: all .5s;
}
.proUl  li .txt{
  padding: 20px 0;
  text-transform: uppercase;
  font-size: 20px;
  height: 40px;
}
.proUl  li .none{
  display: none;
}
.proUl  li a{
  display: block;
}
.proUl  li:hover .imgBox .img{
  transform: scale(1.1);
}
.proUl  li h2{
  font-size: 16px;
}
.proSec .r .empty{
  padding: 100px 0;
  text-align: center;
  font-size: 25px;
  display: none;
}
.inSec1 .r .itemCon {
  height: auto;
  overflow: hidden;
}
.rightNav ul li a{
  display: block;
  width: 100%;
}
.abouts1{
  padding-top: 70px;
  background-color: #f7f7f7!important;
}
.abouts2{
  background-color: #fff!important;
}
.abouts2 ul li > div{
  height: 210px;
  width: 100%;
  transition: .45s;
}
.abouts2 ul li{
  height: 210px;
  padding: 0;
  margin-bottom: 0;
}
.abouts3 ul li{
  margin-bottom: 40px;
}
.abouts2 ul li:hover > div{
  transform: scale(1.1);
}
.abouts3{
  padding-bottom: 20px;
}
.abouts2 .more{
  margin-top: 40px;
}
.copy  .r .bz .item{
  border: 1px solid #999;
  border-radius: 3px;
  width: 40px;
  height: 40px;
  display: flex;
  margin-right: 10px;
  align-items: center;
  justify-content: center;
  opacity: .7;
}
.copy .r .bz {
  display: flex;
  margin-right: 10px;
}
.copy .r .bz .item.item1 img{
  height: 19px;
  width: auto;
}
.copy .r .bz .item.item2 img{
  height: 22px;
  width: auto;
}
.copy .r .bz .item.item3 img{
  height: 28px;
  width: auto;
}
.copy .r .bz .item.item4 img{
  height: 15px;
  width: auto;
}
.copy .r .bz .item.item5 img{
  height: 28px;
  width: auto;
}
.copy .r .bz .item.item6 img{
  height: 28px;
  width: auto;
}
.copy .r {
  display: flex;
  align-items: center;
}
.copy .r  .rc{
  display: flex;
}
.copy{
  display: flex;
  align-items: center;
  justify-content: space-between;
}