@charset "UTF-8";
*{margin: 0;padding: 0;font-size:0.832vw;box-sizing: border-box;font-weight: 500;font-family:"PingFang SC", "Microsoft Yahei","PingHei","Lucida Grande","Lucida Sans Unicode"}
@primary:#779407;
@pc:1920;
:root {
  --primary: @primary; /* 主色调、链接*/
  --cPrimary:#19341a; /*辅色调*/
  --dPrimary:#fff; /*辅色调*/
  --words: #000;  /*大部分文字、深色文字*/
  --lightWords: #666; /*少部分文字、浅色文字*/
  --warn: #fdc735;/* 警告*/
  --danger: #ff4880; /*危险、错误*/
  --success: #7ebf50; /*成功*/
  --gray: #b4b8bc; /*灰色*/
  --dark: #202020; /*深色*/
}
/*lighten(@color, 10%); // return a color which is 10% _lighter_ than @color（减淡）
darken(@color, 10%); // return a color which is 10% _darker_ than @color（加深）
saturate(@color, 10%); // return a color 10% _more_ saturated than @color（+饱和度）
desaturate(@color, 10%); // return a color 10% _less_ saturated than @color（-饱和度）
fadein(@color, 10%); // return a color 10% _less_ transparent than @color（-透明度）
fadeout(@color, 10%); // return a color 10% _more_ transparent than @color（+透明度）
spin(@color, 10); // return a color with a 10 degree larger in hue than @color（……）
spin(@color, -10); // return a color with a 10 degree smaller hue than @color（）*/

.swiper{
  .swiper-button-next, .swiper-rtl .swiper-button-prev,
  .swiper-button-prev, .swiper-rtl .swiper-button-next{outline: none}
  --swiper-theme-color: @primary;/* 设置Swiper风格 */
  --swiper-navigation-color: @primary;/* 单独设置按钮颜色 */
  --swiper-navigation-size: 50px;/* 设置按钮大小 */
}
html{color:var(--words); scroll-behavior: smooth;}
body{color:inherit;padding-bottom:(100vw/@pc)*460;background: #fff;position: relative;z-index: 2}
li{list-style: none}
a{text-decoration: none;color: inherit}
font{color:inherit;font-size: inherit}
.warp{width:1494px;margin:   0 auto}
@media screen and (min-width: 1400px) and (max-width: 1720px){
  .warp{width:1400px;margin:0 auto}
}
@media screen and (min-width: 750px) and (max-width: 1400px){
  .warp{width:90%;margin:0 auto}
}
.warp-95{width: 95%;margin:  0 auto}
.warp-90{width: 90%;margin:  0 auto}
.img-fulid{max-width: 100%;display: block}
.visible-lg, .visible-md, .visible-sm, .visible-xs {
  display: none!important;
}
.scale{overflow:hidden;transition: .3s all}
.scale img{transition: .3s all}
.scale img:hover{transform: scale(1.1)}
.scale:hover img{transform: scale(1.1)}
.layout{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  .layoutL{width: 15vw;transition: 1s all;}
  .layoutL.off{transform:translateX(calc(-100% - 15vw));}
  .layoutR{flex: 1}
}
.flex-row(@justify:center,@align:center) {
  display: flex;
  justify-content: @justify;
  align-items: @align;
}
.flex-column(@justify:center,@align:center) {
  display: flex;
  flex-direction: column;
  justify-content: @justify;
  align-items: @align;
}
.wordsize(@px){
  font-size:((100vw/@pc)*@px);
}
.C666{background:  #666666!important;}
.C748ea1{background:  #748ea1!important;}
.C7d836e{background:  #7d836e!important;}
.Ce09d81{background:  #e09d81!important;}
.Caf7f68{background:  #af7f68!important;}
.Cfff{background:  #fff!important;}
@keyframes transform {
  0%,
  100% {
    border-radius: 63% 37% 54% 46%/55% 48% 52% 45%;
  }
  14% {
    border-radius: 40% 60% 54% 46%/49% 60% 40% 51%;
  }
  28% {
    border-radius: 54% 46% 38% 62%/49% 70% 30% 51%;
  }
  42% {
    border-radius: 61% 39% 55% 45%/61% 38% 62% 39%;
  }
  56% {
    border-radius: 61% 39% 67% 33%/70% 50% 50% 30%;
  }
  70% {
    border-radius: 50% 50% 34% 66%/56% 68% 32% 44%;
  }
  84% {
    border-radius: 46% 54% 50% 50%/35% 61% 39% 65%;
  }
}
@keyframes move-letter{
  0% {
    opacity: 0;
    letter-spacing: -40px;
    filter: blur(10px);
  }
  25% {
    opacity: 1;
  }
  50% {
    filter: blur(5px);
  }
  100% {
    letter-spacing: 20px;
    filter: blur(2px);
  }
}
.main{background: #fff}
.headerTop{
  padding: 10px 0px;
  color: #fff;
  background: #858685;
  .warp{
    .flex-row(flex-end);
  }
  .info{margin-right: auto}
  .info span{display: inline-flex;margin-right: 2vw;align-items: center; }
  .info span i{font-size: 18px;display: inline-block;margin-right: 5px}
  .icon i{display: inline-block;margin-right: 2vw;font-size: 18px;}
}
header{
  transition: 1s all;
  position: relative;
  width: 100%;
  z-index: 999;
  overflow: hidden;
  .warp{
    .flex-row(space-between);
  }
  .logo{.flex-row(center,center);padding: 10px 0;}
  .logo span{font-size: 1.1vw}
  .nav ul{.flex-row(flex-start);color: #000}
  .nav li{padding: 0 1.5vw;margin: 0px 10px;position: relative;}
  .nav li:after{content: '';z-index:-1;position: absolute;left: 0;bottom: 0px;transform: translateY(100px);transition:.5s all;width: 100%;height: 2vw;background:fadeout(#779407,85%);border-radius: 20px}
  .nav li:hover:after{transform:translateY(calc(50% - 8px))}
  &.active{
    background: fadeout(@primary,50%);
    color: #fff;
  }
}
.banner{
  position: relative;overflow: hidden;
  img{width: 100%;display: block}
  .wenzi{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);color: #fff;.wordsize(30)}
  .wenzi h4{font-size: 3vw;color: transparent;-webkit-text-stroke: 2px #fff;transition: 1s all;font-weight: bold;text-align: center}
  .wenzi h4:hover{color:fadeout(@primary,50%)}
  .swiper-pagination-bullet{width: 4vw;height: .3vw;border-radius: 4px}
  .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #fff}
}
.index-block1{
  padding:90px 0;
  overflow: hidden;
  .flex-row();
  .tit,.wenzi{width: 50%;}
  .wenzi{
    padding:0 5%;
    align-self: stretch;
    .flex-column(center,flex-start);
    h4{
      .wordsize(18);
      color:@primary;
    }
    h3{
      .wordsize(42);
      line-height: 1.2;
      text-transform: uppercase;
      font-weight: bold;
    }
    p{ .wordsize(20);padding: 20px 0px}
    a{.wordsize(16);margin-bottom: 20px;margin-top: 7vw;display: inline-block;color: var(--words)}
  }
  .pic{
    cursor: pointer;
    position: relative;
    .video{
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
    }
  }
}
.index-block2{
  padding-bottom: 40px;
  .warp-100{
    height: ((100vw/@pc)*500);
    background: url("../images/bg.jpg");
    background-repeat: repeat-x;
    background-attachment: fixed;
    background-position: center;
    background-size: 100%;
  }
  .box{
    width: 100%;
    height: 100%;
    .flex-column();
    background: fadeout(#000,50%);
    h3{.wordsize(20);text-align: center;font-weight: bold;color:@primary;text-transform: uppercase}
    h4{margin: 0 auto;color: @primary;font-weight: bolder}
    p{.wordsize(32);padding: 20px 22px;width: 1200px;color: #fff;text-align: center;font-weight: bold;}
    a{width: 150px;height: 50px;background: @primary;color: #fff;border-radius: 10px;margin: 0 auto;display: block;text-align: center;line-height: 50px;margin-top: 20px;}
    a i{margin-left: 10px;display: inline-block}
    a:hover{background: var(--primary);color: #fff}
  }
}
.index-block3{
  padding: 40px 0px;
  .tit h3{.wordsize(42);font-size: 42px;color: #000;font-weight: bold;text-align: center;}
  .tit .p{padding: 20px 0px}
  .tit .p p{.wordsize(37);line-height: 1;font-weight: bold}
  .tit  a{
    padding: 10px 20px;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 40px;
    color: @primary;
    margin: 20px 0 40px;
    text-align: center;
    display: block;
  }
  .pic{
    border: 1px solid #eee;
    position: relative;
    height: 550px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .tit{
      h2{ .wordsize(18);    margin-top: 1vw;}
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-direction: column;
      color: #000;
      padding: 20px;
      border: 1px solid #eee;z
      .color{
        display: flex;
        justify-content: space-between;
      }
      .color span{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: pink;
        display: inline-block;
        border: 1px solid #999;
        margin: 0 3px;
        &:hover{
          border: 2px solid #fff;
          box-shadow: 0 0 0px 2px #999;
        }
      }
    }
  }
}
/*___________________页脚样式__________________________*/
footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  padding-top: (100vw/@pc)*80;
  background-size: cover;
  color: #fff;
  background:var(--cPrimary);
  z-index: -1;
  .warp{
    .flex-row(space-between,flex-start);
    .contact{width: 500px}
    .contact li{display: flex;align-items: flex-start;margin-bottom: 10px;color: #fff}
    .contact li:not(:last-of-type) i{margin-right: 11px;}
    .contact li:nth-of-type(3){display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #fff;}
    .contact li form{display: flex;justify-content:space-between;width: 100%}
    .contact input{outline: none;border: none;background: none;width: 20vw;}
    .contact button{background: none;color:#fff;border: none;    padding: 10px 0px;}
    .contact li:last-of-type{.flex-column(flex-start,flex-start);margin-left: -20px;}
    .contact li:last-of-type i{.flex-row();display: inline-flex;color:#fff;margin-right: 10px;width: 40px;height: 40px;border-radius: 50%;.wordsize(18);} ;
    ul li{line-height: 2}
    ul li:first-of-type{.wordsize(20);margin-bottom: 20px;text-transform: capitalize;color: @primary}
    ul:nth-last-child(2){width:(100vw/@pc)*300;}

    .folus{.wordsize(20);color: @primary!important;}

  }
  .footlogo{padding-bottom: 20px; }
  .corygory{
    padding: 20px 0px;
    text-align: center;
    .wrap{.flex-row(space-between,center)}

  }
}
/*___________________内页样式__________________________*/
/* 分页样式 */
.page-status{display: none;}
.paging { margin: 20px 0; font-size: 14px;text-align: center }
.paging > span { margin: auto 16px; }
.paging .page-numbar { margin: auto 0; }
.paging .page-numbar .page-num,
.paging .page-index,
.paging .page-pre,
.paging .page-next,
.paging .page-last { display: inline-block; margin: auto 4px; padding: 2px 12px; border: 1px solid #EEE; border-radius: 2px; }
.paging .page-numbar .page-num-current,
.paging .page-numbar .page-num:hover { border-color: var(--words); color:  var(--words); }
.innerPage{padding: 20px 0px;background: #fff}
//内页侧边导航
.no-data{height: 50vh;display: flex;align-items: center;justify-content: center;font-weight: bold;flex-direction: column}
.weizhi{
    padding: 10px 0px;
    border-bottom: 1px solid #eee;
    .wordsize(16);
    color: #999;
}
.menus{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  border: 1px solid #eee;
  margin: 20px 0px 0 0;
  a{.wordsize(18);position:relative;padding: 5px 10px 5px 40px;line-height: 2;display: block;width: 100%;border:1px solid lighten(#000,70%);color:lighten(#000,40%);margin-bottom: 10px}
  a:after{
    content: '';
    position: absolute;
    left: 4px;
    top: calc(50% - 2px);
    display: block;
    height: 2px;
    width: 20px;
    background: lighten(#000,40%);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    transform-origin: center;
  }
  a:before{
    content: '';
    position: absolute;
    left: 13px;
    top: calc(50% - 10px);
    display: block;
    height: 20px;
    width: 2px;
    background: lighten(#000,40%);
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
    transform-origin: center;
  }

  a:hover,a.on{
    background: @primary;
    color: #fff;
  }
  a:hover:before,a.on:before{
    transform: rotate(45deg);
    background: #fff;
  }
  a:hover:after,a.on:after{
    transform: rotate(45deg);
    background: #fff;
  }
}
.leftmenus{
  padding:0 1vw;
  position: relative;
  cursor: pointer;
  .back{
    width: 100px;
    height: 50px;
    .flex-row();
    background: @primary;
    color: #fff;
    margin-bottom: 1vw;
  }
  .tit{
    .wordsize(24);
  }
  .leftClose{
    position: absolute;
    right: 10px;
    top: 0px;
  }
  .hot{
    background: #fff;
    padding: 1vw;
    border:1px solid #eee;
    margin-top: 2vw;
    h4{.wordsize(24);font-weight: bold;margin-bottom: 1vw}
    .item{.flex-row(flex-start)}
    img{width:(80vw/@pc)*120; border: 1px solid #eee}
    .wenzi{padding-left: 10px;flex: 1;
      h3{.wordsize(18)}
    }
    a{color:#fff;display: block;background: darken(@primary,10%);.flex-row();padding: 5px 8px;border-radius: 10px;margin-top: 20px}
    a:hover{background: lighten(@primary,3%)}
  }
  .senEmail{
    background: #fff;
    padding: 1vw;
    border:1px solid lighten(#000,90%);
    margin-top: 2vw;
    h5{.wordsize(24);font-weight: bold;margin-bottom: 1vw}
    h4{.wordsize(15);font-weight: bold;margin-bottom: 1vw}
    input{border: 1px solid #eee;padding: 10px 20px;outline: none}
    button{
      border: none;
      color: #fff;
      background:darken(@primary,10%);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 9px 14px;
      margin-top: 20px;
      outline: none;
      cursor: pointer;
      &:hover{background: lighten(@primary,3%)}
    }
  }
}

.grid,.gridlist{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px;margin-bottom: 20px}
/*关于我们*/
.list-about{
  padding: 80px 0;
  .tit h3{text-align: center;.wordsize(32);color: @primary;margin-bottom: 20px}
  .wenzi{width: 80%;margin: 0 auto 40px}
  .l{width: 32%}
  .r{width: 68%}
  .videoDom{outline: none;margin: 0 auto;text-align: center;}
  .videoDom video{object-fit: cover;outline: none;width: 80%;margin:0 auto}

}
/*荣誉资质*/
.list-rongyu{
  .pic{text-align: center}
  .wenzi{text-align: center}
}
/*发展历程*/
.list-fazhan{
    .weizhi{    padding: 40px 0 40px;border: none}
    .timer{position: relative;padding-bottom: 50px}
    .swiper-button-next{right: -100px;top: 20px;outline: none}
    .swiper-button-prev{left: -100px;top: 20px;outline: none}
    .mySwiperTime{
      position: relative;
      height: 20%;
      box-sizing: border-box;
      padding:40px 0;
      min-height: 138px;
    }
    .mySwiperTime:after{
      content: '';
      position: absolute;
      width: 100%;
      height: 0px;
      left: 0;
      top: 20px;
      border-top: 1px dashed #999;
      z-index: -1;
    }
    .mySwiperTime .swiper-slide{
      position: relative;

    }
  .mySwiperTime .swiper-slide:after{
      position: absolute;
      top: -25px;
      left: calc(50% - 5px);
      content: '';
      width: 10px;
      height: 10px;
      background: #fff;
      border: 1px solid var(--primary);
      border-radius: 50%;
      z-index: 999;
  }
    .swiper {
        width: 100%;
        height: 100%;
      }
  .mySwiperTime .swiper-slide {
     transition: .2s all;
    text-align: center;
    font-size:24px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
   .mySwiperTimeCtx {
    height: 80%;
    width: 100%;
  }


   .mySwiperTime .swiper-slide {
    width: 25%;
    height: 100%;
    opacity:1;
  }

   .mySwiperTime .swiper-slide-thumb-active {
    opacity: 1;
  }
  .mySwiperTime .swiper-slide.swiper-slide-thumb-active:after {
      transform: scale(1.4);
  }
  .mySwiperTime .swiper-slide.swiper-slide-thumb-active{
    color: var(--primary);
    span{  font-size: 36px;}
    font{font-size: 36px}
  }
   .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .mySwiperTimeCtx  .swiper-slide {display: flex}
  .mySwiperTimeCtx  .pic{width: 50%}
  .mySwiperTimeCtx  .wenzi{padding-left:5%;width: 50%;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;}
  .mySwiperTimeCtx  .wenzi h3{.wordsize(36);color: var(--primary);margin-bottom: 20px}
  .mySwiperTimeCtx  .wenzi .desc{font-size: 18px}
}
/*加入*/
.list-join{
  .join1{
    position: relative;padding: 12vw 0px;
    .warp{display: flex;background: #f5f5f5;}
    .pic{position: absolute;left: 0;top: 50px;z-index: 1;}
    .pic img{width: 38vw}
    .l p{text-align: right;width: 45%;height: 128%;background: var(--primary);display: flex;align-items: flex-end;justify-content: flex-end;color:darken( #fff, 10%);.wordsize(45);font-weight: bold;line-height: 1;}
    .l,.r{width: 50%}
    .r{padding:5vw 0;}
    .r h3{font-size: 48px;line-height: 1.5}
    .r>div{margin-bottom: 1vw}
  }
  .join2{
    .flex-row();
    .pic{width: 59%}
    .pic img{width: 100%;display: block}
    .wenzi {
      .flex-row(flex-start);
      color: #fff;
      width: 41%;
      background: var(--words);
      align-self: stretch;
      .l img{width: 19vw}
      .r{padding-left:3vw}
      .r h3{.wordsize(38)}
      .r p{line-height: 2}
      .r div:first-of-type{margin-bottom: 20px}
    }
  }
  .join3{
    height:(100vw/@pc)*854;
    //padding-top: 35vw;
    background: url("../images/join4.png") no-repeat bottom left;
    background-size: 100%;
    .tit{.wordsize(50);text-align: center;color: var(--words);padding-top: 7vw;}
    .tit h3{.wordsize(50);margin-bottom: 2vw;}
    a.more{width: 260px;height: 60px;.flex-row();box-shadow: 0 0 20px 0 var(--primary);border-radius: 30px;color: #fff;background: var(--primary);margin: 0 auto;position: relative}
    a.more:after{
      position: absolute;
      content: '';
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 37vw;
      background: red;
      z-index: -1;
      height: 17vw;
      background: url(../images/joinus.png) no-repeat center left;
      background-size: 100%;
    }
  }
}

/*产品列表*/
.list-product{
  background: #eee;
  .pro_bg_color {
    display: block;
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    background: @primary;
    transition: all 0.6s ease 0s;
    -moz-transition: all 0.6s ease 0s;
    -webkit-transition: all 0.6s ease 0s;
    -o-transition: all 0.6s ease 0s;
    z-index: 0;
  }
  .gridlist {margin:0px 0px;display: grid;grid-template-columns: repeat(3,1fr);grid-gap:(100vw/@pc)*100;padding: 0 40px;margin-top: (100vw/@pc)*80;}
  .gridlist li{box-shadow: 0px 0px 20px 0px #e0e0e0;position: relative}
  .gridlist li a{display: block;width: 99%;position: relative;overflow: hidden;z-index: 2;margin: 0.5% auto 0 auto;}
  .gridlist li:hover .pro_bg_color{height: 100%}
  .gridlist li:hover .tit{color: #fff}
  .gridlist li .pic{margin: 9px}
  .gridlist li img{transition:.2s all;margin:0 auto;height:auto;display: block;object-fit: contain;padding: 0px;}
  .gridlist li .tit{transition:1s all;display: flex;align-items: center;justify-content: center;color:#000;font-weight: bold;padding:40px 0px;}
}
/*新闻列表*/
.list-news{
  .tit h3{text-align: center;.wordsize(32);color: @primary;padding:40px 0 20px}
  .gridlist{grid-template-columns: repeat(3, 1fr);row-gap: 30px;column-gap: 20px;}
  ul li{.flex-row(flex-start);border-bottom: 1px solid #eee;flex-direction: column;background: #eee}
  ul li h3{padding: 10px;.wordsize(14)}
  ul li a{display:block;width: 100%}
  ul li:hover h3{background: @primary;color: #fff}
  ul li .date{.wordsize(18);color: #999}
  ul li img{display: block}
  ul li .tit{.wordsize(24);color: var(--words);font-weight: bold;padding: 10px 0 20px}
}
.caselist .gridlist{
  grid-template-columns: repeat(4, 1fr);
}
.caselist .gridlist li .tit{
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px 0;
}
.caselist{
  .gridlist li:hover .tit{
    color: @primary;
  }
}
/*新闻详情*/
.show-news{
  .xypg-detail-title {
    background: #eee;
    padding: 5px 10px;
    color: #363636;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.7;
  }
  .xypg-detail-info-bar {
    font-size: 14px;
    overflow: hidden;
    color: #9e9e9e;
    line-height: 35px;
    border-bottom: 1px dashed #cfcfcf;
    margin-bottom: 20px;
  }
  .xypg-detail-info-bar .detail-info-time {
    float: left;
    margin-right: 20px;
    position: relative;
    padding-left: 25px;
  }
  .xypg-detail-info-bar .detail-info-time i {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
  }
  .xypg-detail-info-bar .detail-info-numbers {
    float: left;
    position: relative;
    padding-left: 25px;
  }
  .xypg-detail-info-bar .detail-info-numbers i {
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;
  }
  .xypg-detail-tags {
    margin-top: 40px;
  }
  .xypg-detail-tags .tags-title {
    border-bottom: 1px solid #c3c3c3;
    position: relative;
  }
  .xypg-detail-tags .tags-title h3 {
    display: inline-block;
    padding: 0 30px;
    font-size: 16px;
    color: #005eb8;
    line-height: 40px;
    border-bottom: 3px solid #005eb8;
    margin-bottom: -1px;
  }
  .xypg-detail-tags .tags-title .baidu-share {
    position: absolute;
    right: 0;
    top: 8px;
  }
  .xypg-detail-tags .tags-content {
    padding-top: 12px;
  }
  .xypg-detail-tags .tags-content a {
    font-size: 12px;
    color: #2f2f2f;
    display: inline-block;
    margin-right: 9px;
    background: #f4f4f4;
    line-height: 28px;
    padding: 0 15px;
  }
  .xypg-detail-tags .tags-content a:hover {
    color: #005eb8;
  }
  .xypg-detail-url {
    margin-top: 15px;
  }
  .xypg-detail-url a {
    word-break: break-all;
  }
  .xypg-detail-pn {
    margin-top: 30px;
  }
  .xypg-detail-pn div + div {
    margin-top: 15px;
  }
  .xypg-detail-pn div {
    line-height: 22px;
    padding: 10px;
    position: relative;
    border: 1px solid #eeeeee;
  }
  .xypg-detail-pn div b {
    font-size: 14px;
    color: #005eb8;
    float: left;
    font-weight: normal;
  }
  .xypg-detail-pn div a {
    width: 75%;
    font-size: 14px;
    color: #666666;
  }
  .xypg-detail-pn div a:hover {
    color: #005eb8;
  }
}
/*联系我们*/
.contact{padding-bottom: 0px}
.contact .page {overflow: hidden;padding: 60px 0 10px;}
.contact .page:after {content: '';display: block;clear: both;}
.contact  .page.on {background: #f9f9f9;}
.contact .page_tit {margin-bottom: 40px;text-align: center;}
.contact .page_tit h3 {font-size: 30px;margin-bottom: 20px;font-weight: normal;}
.contact .page_tit h2 {font-size: 28px;}
.contact  .page_tit p {color: #999;}
.contact  .page_tit p span:before, .page_tit p span:after {display: inline-block;width: 30px;height: 1px;background: #999;vertical-align: middle;content: '';margin: 0 2px;margin-bottom: 2px;}
.contact  .page_tag ul li {margin-left: -4px;display: inline-block;}
.contact  .page_tag {text-align: center;}
.contact  .page_tag a {display: block;line-height: 30px;padding: 0 23px;color: #7e7e7e;position: relative;}
.contact  .page_tag .on a, .page_tag a:hover {background: #be9a78;color: #fff;}
.contact  .page_tag .on a:before, .page_tag a:hover:before {color: #be9a78}
.contact  .page_tag a:before {content: '|';display: block;position: absolute;left: -2px;}
.contact  .page_tag li:first-child a:before {display: none;}
.contact  .pro_list ul:after {content: '';display: block;clear: both;}
.contact  .pro_list li {width: 33.333%;float: left;text-align: center;}
.contact  .pro_list h3 {font-size: 16px;color: #000;font-weight: normal;}
.contact  .pro_list p {padding: 10px 0 15px;color: #be9a78;background: no-repeat bottom center;}
.contact  .pro_list ul {display: none;margin-top: 20px;}
.contact  .pro_list ul.on {display: block;}
.contact  .pro_list ul.on li {animation-name: zoomIn;animation-duration: 1s;animation-fill-mode: both;}
.contact  .about_list2 {max-width: 1100px;margin: 0 auto;border-top: 1px solid #e8e8e8;margin-top: 30px;padding-top: 30px;}
.contact .cont_list ul li {width: 24%;float: left;text-align: center;}
.contact .cont_list ul li .text {margin-top: 20px;color: #434343}
.contact .cont_list ul li .text h3 {font-size: 16px;font-weight: normal;color: #000;margin-bottom: 10px;}
.contact .message {max-width: 710px;margin: 0 auto;overflow: hidden}
.contact .message ul li {width: 50%;float: left;}
.contact .page.on {background: #f9f9f9;}
.contact .div_input input {width: 100%;border: 0;background: none;text-align: left;outline: none}
.contact .div_input textarea {outline:none;width: 100%;height: 150px;border: 0;background: none;resize: none;padding: 10px 0;}
.contact .message ul li:last-child {width: 100%;}
.contact .message ul {margin-bottom: 30px;overflow: hidden}
.contact .message .div_input {margin: 5px;line-height: 40px;border: 1px solid #e9e9e9;background: #fff;padding: 0 15px;}
.contact  input[type="submit"] {cursor: pointer;border: none}
.contact .xxj {color: #fff;display: block;line-height: 44px;width: 140px;text-align: center;background: var(--primary);margin: 20px auto;}

/*产品详情*/
/*产品详情*/
.show-product{
  .warp-100 .flex{.flex-row(space-between,flex-start)}
  .l{width: 17vw;margin-right: 50px;flex-shrink: 0}
  .r{flex: 1;}
  .r .main{.flex-column()}
  .isonlythumb .tit{font-size: 24px;text-align: center;margin-bottom: 10px}
  .isonlythumb .grid{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px;}
  .nav .tit{.wordsize(20);padding: 20px 0px}
  .nav>ul{ border: 1px solid #cfd1d2;}
  .nav>ul>li{border-bottom: 1px solid #cfd1d2;}
  .nav>ul>li>a{padding:10px 20px;transition: .2s all;color: #aaaaaa;.wordsize(14);display: flex;justify-content: space-between;}
  .nav>ul>li.on>a{background: var(--primary);border-bottom: 1px solid;color: #fff;}
  .nav > ul > li i{transition: .8s all}
  .nav > ul > li.on i{transform: rotate(180deg)}
  .nav > ul > li.on .sub-menu{display: block}
  .sub-menu{padding: 0 40px;display: none;background: #eee;}
  .sub-menu li{padding: 10px 0px;font-size: 12px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis}
  .sub-menu li:not(:last-of-type){border-bottom: 1px dotted #cfd1d2}

  .hot{ border: 1px solid #cfd1d2;margin-top: 20px}
  .hot .tit{padding: 10px 20px;}
  .hot ul li{padding: 10px 10px;.flex-row()}
  .hot ul li .pic{width: 100px;border: 1px solid #eee;.flex-row();padding: 11px;margin-right: 10px;}
  .hot ul li .wenzi{flex: 1}
  .hot ul li .wenzi h3{font-size: 12px}
  .hot ul li .wenzi a{padding: 0 10px;background: var(--cPrimary);color: #fff;margin-top: 8px;display: inline-block;border-radius: 10px}
  //产品多图
  .detailImg{
    .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: contain;}
    .swiper {width:(100vw/@pc)*570;height: (100vw/@pc)*570;margin-left: auto;margin-right: auto;}
    .swiper-slide {background-size: cover;background-position: center;}
    .mySwiperB{height: 134px;margin-top: 10px}
    .mySwiperB .swiper-slide img{object-fit: contain}
    .mySwiperB .swiper-slide img{padding: 10px;border: 1px solid #eee;cursor: pointer}
    .mySwiperB .swiper-slide {width: 25%;opacity: 0.4;}
    .mySwiperB .swiper-slide-thumb-active {opacity: 1;}
    .mySwiperT .swiper-slide img{padding: 10px;border: 1px solid #eee;cursor: pointer}
  }


  .cansu{
    text-align: center;
    padding: 20px 0px;
    .h1 {font-size: 24px;
      font-weight: bold;
    }
    h1{.wordsize(18)}
    .ft{display: grid;grid-template-columns: repeat(3, 1fr);grid-gap: 20px;margin-top: 30px}
    .ft li{border: 1px solid var(--cPrimary);width: 100px;border-radius: 20px;text-align: center;}
    .sku{margin-top: 20px;line-height: 2}
    .sku p{background: @primary;padding: 4px 20px;color: #fff;margin-bottom: 4px;cursor: pointer;text-align: left;}
    .sku p:hover{background: lighten(@primary,4%)}
    .ft li.active,.ft li:hover{background: var(--cPrimary);color: #fff;cursor: pointer}
    .back{
      width: 80px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background: #779407;
      color: #fff;
      margin: 0 auto;
      margin-bottom: 1vw;
    }
  }
  .other{max-width:(100vw/@pc)*1400;position: relative}
  .other {border: 1px solid #eee;margin-top: 20px}
  .other .tit{.wordsize(18px);padding:15px;border-bottom: 1px solid #eee}
  .other .img img{border: 1px solid #eeeeee}
  .swiper-other{width: 100%;padding: 20px}
  .swiper-other .title{text-align: center;padding-top: 20px}
  .other .btn{position: absolute;top: 40%;width: 100%;}
  .other .btn span{cursor: pointer; width: 45px;height: 45px;background: #f2eee9;display: inline-flex;justify-content: center;align-items: center;border-radius: 50%;    position: absolute;}
  .other .btn span.prev{left: -30px}
  .other .btn span.next{right: -30px;}
  .other{.swiper-button-prev,.swiper-button-next{outline: none;color:@primary}}
}



@media screen and (min-width: 320px) and (max-width: 800px){
  *{font-size: 14px}
  body {padding-top: 60px;    padding-bottom: 56.25vw;}

  @pc:375;
  .hidden-xs {
    display: none!important;
  }
  .visible-xs {
    display: block!important;
  }
  .wordsize(@px){
    font-size:((100vw/@pc)*@px);
  }
  .warp{width:95%;margin: 0 auto;}
  .location{display: none}
  .leftmenus .menus{overflow: auto}
  .layout {
    .layoutL{
      display: none
    }
    .layoutR{
      width: 100%;
    }
  }
  .gridlist{grid-template-columns: repeat(2, 1fr);}
  .layoutL{display: none}
  .pagebar .pagination{overflow-x: auto}
  /*手机端头部*/
  .xymob-head {
    position: fixed;
    top: 0;
    z-index: 999999;
    left: 0;
    right: 0;
    background: var(--primary);
  }

  .xymob-head-box {
    position: relative;
    height: 60px;
  }

  .xymob-head-box .xymob-logo {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #fff;
    mix-blend-mode: multiply;
  }

  .xymob-head-box .xymob-logo h1, .xymob-head-box .xymob-logo a {
    display: inline;
    font-size: 0;
  }

  .xymob-head-box .xymob-logo img {
    width: 37vw;
  }

  .xymob-navbtn {
    position: absolute;
    z-index: 9;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto 0 auto 27px;
    width: 30px;
    height: 20px;
  }

  .xymob-navbtn span, .xymob-navbtn:after, .xymob-navbtn:before {
    display: block;
    height: 2px;
    width: 100%;
    background: #fff;
    -webkit-transition: all .5s;
    transition: all .5s;
  }

  .xymob-navbtn span {
    margin: 7px 0;
  }

  .xymob-navbtn:after, .xymob-navbtn:before {
    content: '';
    -webkit-transform-origin: 7.5%;
    transform-origin: 7.5%;
  }

  .xymob-navbtn.clicked span {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    opacity: 0;
  }

  .xymob-navbtn.clicked:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }

  .xymob-navbtn.clicked:before {
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }

  .xymob-search-btn {
    position: absolute;
    z-index: 9;
    right: 0;
    top: 0;
    bottom: 0;
    width: 24%;
    text-align: center;
    line-height: 50px;
    font-size: 32px;
    color: #fff;
  }
  .xymob-search-btn i{
    font-size: 24px;
  }
  .xymob-search-btn .icon-font {
    display: block;
    width: 100%;
    height: 100%;
  }

  .xymob-search-btn .icon-font:after {
    background-position: -30px -210px;
  }

  .xymob-menu {
    display: none;
    position: absolute;
    z-index: 9999;
    left: 0;
    right: 0;
    height: 100vh;
    background: var(--primary);
    padding: 0 10%;
  }

  .xymob-menu .xymob-menu-box {
    height: 100vh;
    overflow: auto;
    padding-bottom: 80px;
  }

  .xymob-nav > li {
    border-bottom: 1px solid #fff;
    position: relative;
  }

  .xymob-nav > li > a {
    display: block;
    line-height: 50px;
    font-size: 16px;
    color: #ffffff;
  }

  .xymob-nav .xymob-menu-jt {
    position: absolute;
    width: 20%;
    height: 50px;
    line-height: 50px;
    right: 0;
    top: 0;
    text-align: center;
    z-index: 9;
    color: #fff;
  }

  .xymob-nav .xymob-menu-jt .icon-font {
    display: block;
    width: 100%;
    height: 100%;
  }

  .xymob-nav .xymob-menu-jt .icon-font:after {
    background-position: -30px -240px;
  }

  .xymob-nav .xymob-menu-jt.clicked .icon-font:after {
    background-position: -30px -270px;
  }

  .xymob-nav .xymob-sub-menu {
    background: var(--cPrimary);
    display: none;
  }

  .xymob-nav .xymob-sub-menu > li {
    border-top: 1px dashed #fff;
  }

  .xymob-nav .xymob-sub-menu > li > a {
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
    line-height: 40px;
    text-indent: 2em;
  }

  .xymob-dlbtn {
    margin-top: 40px;
  }

  .xymob-dlbtn a {
    text-align: center;
    display: block;
    width: 100%;
    height: 40px;
    line-height: 40px;
    background: #005eb8;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
  }

  .xymob-dlbtn a i {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    margin-right: 5px;
  }

  .xymob-dlbtn a .icon-dl:after {
    background-position: -30px -540px;
  }

  .xymob-dlbtn a .icon-pn:after {
    background-position: -30px -600px;
  }

  .xymob-dlbtn a .icon-tc:after {
    background-position: -30px -570px;
  }

  .xymob-dlbtn .zx-btn {
    margin-top: 10px;
    background: none;
    border: 1px solid #fff;
  }

  .xymob-search {
    position: fixed;
    z-index: 99999;
    left: 100%;
    bottom: 0;
    top: 0;
    width: 100%;
    background: var(--primary);
    padding: 15px 15% 0 15%;
    -webkit-transition: all .5s;
    transition: all .5s;
  }

  .xymob-search .xymob-search-close-btn {
    position: absolute;
    top: 27px;
    left: 30px;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
  }
  #wrapper{display: none}
  //header{
  //  .logo img{width: (100vw/@pc)*100}
  //  .head-top .logo:after{height: 16px}
  //  .head-top{padding: (100vw/@pc)*10;}
  //  .head-top .r{display: none}
  //}
 .banner .swiper-pagination-bullet-active{
   --swiper-theme-color: #fff;
   --swiper-pagination-color: #fff;/* 两种都可以 */
 }
  .headerTop{display: none}
  header{display: none}
  .leftmenus{margin: 0px;justify-content: flex-end}
  .leftmenus .btn{display: block}
  .leftmenus .menus{width: 100%;flex-direction: column;}
  .leftmenus .menus a:after{display: none}
  .leftmenus .menus a.on:before{display: none}
  .leftmenus.clicked .btn{transform: rotate(180deg)}
  .leftmenus .menus a.on{background: var(--words);color: #fff}

  .main{background: #fff;margin-bottom: 10vh;}

  .index-header{display: none;}

  .index-block1{
    padding: 20px 0px;
    flex-direction: column-reverse;
    .wenzi{padding:5% 10%;width: 100%;}
    .wenzi h4{.wordsize(24)}
    .wenzi h3{.wordsize(18)}
    .wenzi a{.wordsize(18)}
  }
  .index-block2{
    padding-bottom: 0px;
    .warp-100{background-size: cover;height: 40vh;}
    .box h3{.wordsize(24)};
    .box p{width: 90%;.wordsize(16)}
    .box a{    height: 40px;line-height: 40px}
  }

  .index-block3{
    .tit h3{.wordsize(24)}
    .tit a{margin: 10px;}
    .pic{height: 50vh}
    .pic .tit h2{.wordsize(16)}
    .color{margin-top: 2vw}
  }
  footer{
    padding: 20px 0px 10px;
    .warp{flex-direction: column-reverse}
    .warp ul:nth-last-child(2){width: 100%}
    .warp ul li:first-of-type{margin-bottom: 0px;font-size: 14px}
    .warp ul li{font-size: 12px}
    .corygory{display: none}
    .flex{flex-direction: column}
    .footlogo img{width: (100vw/@pc)*200}
    .r{display: none}
    .l .footlogo{margin: 0}
    .l li{font-size: 12px}
    footer{padding: 20px 0px;}
    ul{display: none}
    ul:nth-last-of-type(2){display: block}
    .cory{flex-direction: column;padding: 0px;}
    .cory p{font-size: 12px;text-align: center;transform: scale(0.9);white-space: nowrap;}
    .cory div{font-size: 12px}
    .contact{display: none}
  }
  .list-about{
     .tit h3{.wordsize(18)}
     .wenzi{width: 90%;}
  }
  .list-news {
    .tit h3{
      .wordsize(18);
      text-align: center;
    }
    .gridlist{
      grid-template-columns: repeat(2, 1fr);
    }
    ul li h3{
      font-size: 12px;
    }
  }
  .list-product{
    .gridlist {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
    }

  }
  .show-product{
    .back{display: none}
    .warp .flex{flex-direction: column-reverse}
    .r .main{flex-direction: column;justify-content: center;align-items: center}
    .detailImg .swiper{width: 95vw;height: auto}
    .cansu .ft{margin: 10px 0px;}
    .other{max-width: 95vw}
    .other .tit{.wordsize(18)}
    .nav .tit{.wordsize(14)}
    .nav > ul > li > a{.wordsize(14)}
    .l{width: 100%}
    .cansu{margin-top: 2vw;padding: 0 10px}
  }

  .contact{
    .page{padding: 0px 0px}
    .wow_list{display: flex;flex-direction: column}
    .cont_list ul li{width: 100%;float: none;margin-bottom: 20px}
    .cont_list ul li .text{margin-top: 0px}
    .page_tit h3{margin: 10px 0px}
    .page_tit{margin-bottom: 10px}
  }
  

}