.intro{ padding: 0 0 50px; margin: 0 auto 50px; border-bottom: 1px solid #ebebec}

.intrologo{ width: 134px;}
.intrologo img{ width: 100%;}
.introcon{ font-size: 20px; color: #666; padding: 46px 0 0 }
.introcon p{ margin: 0 0 20px}
.introcon a span{ font: 14px/1.5 iconfont; color: #1a6b36}
.intronum{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.int{ width: 23%; display: flex; flex-wrap: wrap; padding: 40px 30px; box-sizing: border-box; font-size: 50px; line-height: 1; font-weight: bold; background: rgba(255,255,255,.6);;}
.int p{ font-size: 20px; font-weight: normal; color: #666; margin: 15px 0 0; width: 100%; border-top: 1px solid #ccc; padding: 20px 0 0;}
.int i{ font-style: normal;  font-size: 24px; display: block; }
.int i.zw{ padding: 5px 0 0 10px}
.int i.fh{ font-size: 40px;  padding: 0 0 0 5px; line-height: .6;}

#introimg a{ line-height: 0;}
#introimg img{ width: 100%; border-radius: 30px; height: auto;}

.product{ position: relative; margin-bottom: 60px; overflow: hidden;}
.product img{ width: 100%; height: auto; border-radius: 30px 30px 0 0; position: absolute; left: 0; top: 0;}
.cptd{ display: flex; margin: 30px 0 }
.cptd li{ margin: 0 50px 0 0; font-size: 36px; font-weight: bold; color: #fff; position: relative; padding: 0 0 0 60px;}
.cptd li::before{ font: normal 50px/1.5 iconfont; position: absolute; top: -7px; left: 0; }
.gxl::before{ content: "\e67c";}
.csm::before{ content: "\e621";}
.xtj::before{ content: "\e635";}
.gkk::before{ content: "\e604";}
.probox{ padding: 4% 0 0;}

.proconimg{ border-radius: 30px 30px 0 0; overflow: hidden; line-height: 0; width: 100%;}
.proconimg img{ width: 100%; height: auto; transform:scale(1); transition: all .5s ease; position: static; }
.proconimg img:hover{ transform:scale(1.1); transition: all .5s ease;}
.proconin{ position: relative; background: #f1f1f1; padding: 0 0 40px; border-radius: 0 0 30px 30px; }
.proconin h3{ font-size: 36px; color: #fff; position: absolute; top: -70px; left: 40px; margin: 0; text-shadow: 0 0 5px #000}
.proconin p{ padding: 30px 40px; margin: 0; font-size: 24px; line-height: 1.5}
.promore,.newsmore{ display: block; margin: auto; background: #fff; width: 160px; height: 54px; line-height: 54px; border: 1px solid #1a6b36; box-sizing: border-box; text-align: center; border-radius: 27px; font-size: 18px; color: #1a6b36;}
.promore:hover,.newsmore:hover{ background: #1a6b36; color: #fff; text-decoration: none}

.news{ margin: 0 0 50px;}
.nwrap{ width: 1410px; margin: 0 auto 120px;}
#sppics .bd{ display: flex; justify-content: space-between;}
#sppics .bd li{  width: 420px; margin: 0 30px; line-height: 0; }
#sppics .bd li a.newsimg{ display: block; width: 100%; overflow: hidden; border-radius: 30px;}
#sppics .bd li img{  transform:scale(1); transition: all .5s ease; width: 410px;}
#sppics .bd li img:hover{ transform:scale(1.1); transition: all .5s ease;}
#sppics .bd li span{ font-size: 14px; color: #666; display: block; margin: 25px 0 15px;}
#sppics .bd li p{ margin: 0; line-height: 1.8;}

#sycp .hd{ display: flex; justify-content: center; align-items: center; margin: 50px 0 0;}
#sycp .hd a{ display: block; box-sizing: border-box; border: 1px solid #999; width: 48px; height: 48px; border-radius: 24px; cursor: pointer; color: #1a6b36; text-align: center; font: 20px/48px iconfont;}
#sycp .hd a:hover{ background: #1a6b36; color: #fff; border: none; text-decoration: none;}
#sycp .hd ul{ display: flex; justify-content: center; margin: 0 20px; align-items: center;}
#sycp .hd ul li{ width: 60px; height: 1px; overflow: hidden; background: #999;}
#sycp .hd ul li.on{ height: 3px; background: #1a6b36;}

.jsmain{ padding: 100px 0 0; width: 1340px; margin: 0 auto 80px;}
.mtitle{ text-align: center; margin: 0 0 30px; }
.mtitle h2{ font-size: 42px; margin: 0 0 10px; line-height: 1.2;}
.mtitle span{ color: #666; font-size: 16px;}
.jsbox{ display: flex; justify-content: space-between; flex-wrap: wrap;}
.jsi{ width: 23%; position: relative; display: block; overflow: hidden; border-radius: 5px;}
.jsi img{ display: block; width: 100%; height: auto; transform:scale(1); transition: all .5s ease;}
.jsi::after{ display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,.6); content: ""; z-index: 3; transition: all .5s ease;}
.jsi:hover img{ transform:scale(1.1); transition: all .5s ease; }
.jsi:hover::after{ background: rgba(0,0,0,.4); content: ""; transition: all .5s ease;}
.jst{ position: absolute; top: 10%; left: 10%; width: 80%; z-index: 10; line-height: 1.4;}
.jst h3{ color: #fff; font-size: 18px; margin: 0 0 15px;}
.jst span{ color: #fff; font-size: 16px; }
.xcbox{ display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; margin: 0 auto 80px; width: 1340px;}
.xct,.xcp{ width: 45%;}
.xcp{ overflow: hidden; line-height: 0; border-radius: 30px;}
.xcp img{ width: 100%; height: auto; transform:scale(1); transition: all .5s ease;}
.xcp img:hover{ transform:scale(1.1); transition: all .5s ease;}
.xct h2{ font-size: 32px; margin: 0 0 10px;}
.xct p{ margin: 0; color: #666}
.xcboxs{ display: flex; justify-content: space-between; flex-wrap: wrap; width: 1340px; margin: 0 auto; }
.xcbsitem{ width: 32%; display: flex; justify-content: space-between; align-items: center;}

.xcbsip{ overflow: hidden; border-radius: 10px; line-height: 0; width: 42%;}
.xcbsip img{ width: 100%; height: auto; transform:scale(1); transition: all .5s ease;}
.xcbsip img:hover{ transform:scale(1.1); transition: all .5s ease;}
.xcbsit{ width: 54%;}
.xcbsit h3{ font-size: 18px; margin: 0 0 5px; line-height: 1.2;}
.xcbsit p{ font-size: 14px; color: #666; margin: 0; line-height: 1.5;}
.xcbg{ background: #f8f8f8; padding: 80px 0; margin: 0 0 80px;}
.syab{ background: url(../img/syabbg.jpg) center bottom no-repeat; background-size: cover; padding: 80px 0 230px; margin: 0 0 80px;}
.introbox{ display: flex; justify-content: space-between; margin: 0 auto 80px; align-items: center;}
.introt h2{ margin: 0; font-size: 32px; margin: 0 0 10px;}
.introt p{ margin: 0; color: #666;}
.intromore a{ display: block; width: 120px; height: 40px; line-height: 40px; border-radius: 20px; text-align: center; border: 1px solid #1a6b36; font-size: 16px; color: #1a6b36;}
.intromore a:hover{  color: #fff; text-decoration: none; background: #1a6b36;}
.intromore a span{ font: 18px/40px iconfont; }

.synbox{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 auto 80px; overflow: hidden;}
.syni{ width: 32%; }
.synt{ font-size: 24px; line-height: 1.5; margin: 0 0 10px; font-weight: bold;}
.sync{ background: #f1f1f1; border-radius: 10px; overflow: hidden; height: 100%; }
.sync a.newsimg{ display: block; line-height: 0; overflow: hidden;}
.sync a.newsimg img{ width: 100%; height: auto; transform:scale(1); transition: all .5s ease;}
.sync a.newsimg img:hover{ transform:scale(1.1); transition: all .5s ease; }
.sync p{ margin: 0; padding: 20px; font-size: 16px; font-weight: bold; line-height: 1.5;}
.sync p span{ display: block; font-size: 14px; color: #666; font-weight: normal; margin: 5px 0 0;}
.sync p a:hover{ text-decoration: none; color: #1a6b36;}
.synlist{ overflow: auto; background: #f1f1f1; height: 420px; border-radius: 10px;}
.synlist a{ display: block; padding: 20px 10px; font-size: 16px; font-weight: bold; line-height: 1.5;}
.synlist a:hover{ text-decoration: none; color: #1a6b36;}
.synlist a span{ display: block; font-weight: normal; color: #666; font-size: 14px; margin: 5px 0 0;}
.synlist::-webkit-scrollbar{ height: 4px; width: 4px; padding: 5px;}
.synlist::-webkit-scrollbar-thumb{ background: #ccc;}
.syfa{ position: relative; margin: 0 0 80px;}
.content-slide{ position: relative;}
.content-slide img{ width: auto; height: auto; line-height: 0; min-height: 700px; min-width: 100%;}
.sfc{ width: 1340px; position: absolute; z-index: 1000; left: 50%; top: 50%; line-height: 1.8; color: #fff; transform: translateX(-50%) translateY(-50%); }
.sfc h2{ font-size: 32px; margin: 0 0 10px;}
.sfc p{ margin: 0 0 20px;}
.sfc a{ color: #fff; font-size: 16px;}
.sfc a::after{ font: 16px/1.8 iconfont; content: "\e775";}
.content-slide::after{ display: block; width: 100%; height: 100%; background: rgba(0,0,0,.4); position: absolute; top: 0; left: 0; z-index: 50; content: ''; }
.syfat{ position: absolute; bottom: 30px; left: 0; width: 100%; z-index: 1000; background:}
.syfatabs{ width: 1340px; margin: auto; display: flex; justify-content: space-between;}
.syfatabs a{ display: block; width: 23%; line-height: 60px; border-bottom: 1px solid #fff; color: #fff; opacity: .6; font-size: 18px;}
.syfatabs a.active{ opacity: 1; color: #1a6b36; border-bottom: 1px solid #1a6b36; font-weight: bold;}
.syfatabs a:hover{ text-decoration: none; opacity: 1; color: #1a6b36; border-bottom: 1px solid #1a6b36; font-weight: bold;}
.arrow-left,.arrow-right{ display: block; position: absolute; width: 30px; height: 30px; color: #fff; font: 30px/30px iconfont; text-align: center; top: 50%; transform: translateY(-50%); z-index: 1000;}
.arrow-left{ left: 100px; transform: scaleX(-1);}
.arrow-right{ right: 100px;}
.arrow-left:hover,.arrow-right:hover{ text-decoration: none; color: #fff;}
.sycpbox{ margin: 0 auto 80px; width: 1366px;}
.sycp{ width: 429px; min-height: 358px; margin: 0 13px; background: #f1f1f1; text-align: center; padding: 80px 0; box-sizing: border-box; border-radius: 10px; display: flex; flex-wrap: wrap; justify-content: center; align-content: space-between;} 
.sycp img{ width: 60%; height: auto;}
.sycp p{ font-weight: bold; margin: 10px auto 0; width: 65%; line-height: 1.5;}

@media only screen and (max-width: 1920px){
  .wrap{ width: 1340px;}
} 

@media only screen and (max-width: 1440px){
  .introt h2{ font-size: 3.3vw; line-height: 1.2; margin: 10px 0 0}
} 



@media only screen and (max-width: 736px){
  .sycpbox{ width: 90%; margin: auto;}
  .sfc{ width: 90%;}
  .syfatabs{ width: 90%; flex-wrap: wrap;}
  .syfatabs a{ width: 48%; font-size: 14px; line-height: 50px;}
  .sycp,.syni{ width: 100%; margin: 0 0 20px;}
  .syab{ padding: 20px 0;}
  .sync{ height: auto;}
  .introbox{ flex-wrap: wrap;}
  .introt{ width: 100%; margin: 0 0 20px;}
  .int{ padding: 20px;}
  .int p{ font-size: 14px;}
  .xcbg{ padding: 20px 0; margin: 0 0 20px;}
  .wrap{ width: 90%;}
  .xct,.xcp{ width: 100%;}
  .xcp{ order: 0; margin: 0 0 20px; border-radius: 10px;}
  .xct{ order: 1;}
  .xct h2{ line-height: 1.2;}
  .xcbsitem{ width: 100%; margin: 0 0 20px;}
  .xcboxs{ width: 90%; margin: 0 auto 20px;}
    .xcbox{ width: 90%; margin: 0 auto 20px;}
    .jsmain{ width: 90%; padding: 30px 0 0; margin: 0 auto 30px;}
    .intro{ padding: 20px 0 30px; margin: 0 auto 30px ;}
    .introt h2{ font-size: 7.4vw;}
    .introcon{ padding: 25px 0 0;}
    .int{ width: 48%; font-size: 40px; margin: 0 0 20px;}


    .introimg{ margin: 0 0 50px;}
    .product{ margin: 0;}
    .product img{ display: none;}
    .probox{ position: static; border-radius: 30px 30px 0 0; background: url(../img/cpbg.jpg) no-repeat 50% 0; background-size: 300%; width: 100%; padding: 40px 20px 0; left: 0; margin-left: 0; box-sizing: border-box; top: 10px; transform:none; }
    .title{ font-size: 32px; margin: 0 0 30px;}
    .title h3{ font-size: 18px;}
    .cptd{ flex-wrap: wrap; justify-content: space-between; margin: 20px 0 20px;}
    .cptd li{ margin: 0 0 10px; font-size: 30px;}
    .cptd li::before{ font-size: 44px;}
    .proconimg img{ width: 100%; display: block;}
    .procon{ margin: 0 0 30px;}
    .proconin p{ font-size: 18px;}
    .titlink{ font-size: 14px; top: 14px;}
    .nwrap{ width: 100%;}

    .jsi{ width: 48%; margin: 0 0 20px;}
    .jst h3{ font-size: 15px;}
    .jst span{ font-size: 12px;}
}