@charset "UTF-8";
@primary:#019dfe;
@cPrimary:#082c4b; /*辅色调*/
@pc:1920;
*{margin: 0;padding: 0;box-sizing: border-box;font-family:"PingFang SC", "Microsoft Yahei","PingHei","Lucida Grande","Lucida Sans Unicode"}
html{font-size:0.832vw;font-weight: 500;}
:root {
  --primary: @primary; /* 主色调、链接*/
  --cPrimary:@cPrimary; /*辅色调*/
  --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（）*/


html{color:var(--words); scroll-behavior: smooth;}
body{color:inherit;padding-bottom:(100vw/@pc)*420;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: 750px) and (max-width: 1400px){
  .warp{width:1200px;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;
}
#translateSelectLanguage{display: none}
.shellElement {
  position: relative;
  overflow: hidden;
  --bg: @primary;
  overflow: hidden;
}
.shellElement.on::after {
  width: 0%;
}
.shellElement:after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: var(--bg);
  z-index: 3;
  transition: 1s all;
}
/**
 * @name heartbeat
 * @description 动画效果
 */
.heartbeat-animation(@name: heartbeat, @color: #000) {
  @keyframes @name {
    0% {
      color: @color;
    }
    50% {
      color: fadeout(@color, 10%);
    }
    100% {
      color: @color;
    }
  }
}
.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;
}
.w(@px){
  font-size:((100vw/@pc)*@px);
}

@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{
  color: #fff;
  background: var(--cPrimary);
  .warp{.flex-row(flex-start);}
  .warp .info{margin-right: auto}
  .info span{display: inline-flex;margin-right: 2vw;align-items: center; }
  .info span a{display: block;margin-right: 4px}
  .info span i{font-size: 18px;display: inline-block;margin-right: 5px}
  .icon i{display: inline-block;margin-right: 2vw;font-size: 18px;}
  .tel span{background: @primary;padding: 15px 30px;display: block;}
}
header{
  transition: 1s all;
  position: relative;
  width: 100%;
  z-index: 999;
  overflow: hidden;
  .warp{.flex-row(space-between);}
  .warp .info{margin-right: auto}

  .logo{.flex-row(center,flex-start);padding: 10px 0;}
  .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:@primary;;border-radius: 20px}
  .nav li:hover:after{transform:translateY(calc(50% - 10px));color: #fff;}
  .nav li:hover a{color: #fff;}
  &.active{
    background: fadeout(@primary,50%);
    color: #fff;
  }
}
.banner{
  .heartbeat-animation();
  position: relative;overflow: hidden;
  img{width: 100%;display: block}
 .wenzi{position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);color: #fff;.w(60);  }
  .wenzi h4{font-size: 8vw;color: transparent;-webkit-text-stroke: 2px #fff;transition: 1s all;font-weight: bold;}
  .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: 40px 0;
  overflow: hidden;
  .warp{ .flex-row();}
  .tit,.wenzi{width: 50%;}
  .wenzi{
    align-self: stretch;
    .flex-column(center,flex-start);
    h4{
      .w(44);
      color:@cPrimary;
      font-weight: bold;
      text-transform: capitalize;
    }
    .desc{margin: 20px 0;line-height: 2;padding-right: 4vw;} 
    .icon{.flex-row(center)}
    .icon li{.flex-column();margin-right: 50px;color: @primary;text-transform: capitalize;}
    a.more{height: ((100vw/@pc)*56);width:((100vw/@pc)*180);.flex-row();background: @primary;color: #fff;margin-top: 40px;}
    a.more:hover{background: @cPrimary;}
  }
}
.index-block2{
  background: #f5f8ff;
  padding:80px 0;
  .warp{
    .tit{text-align: center;margin-bottom: 80px;}
    .tit .h4{.w(14);text-transform: uppercase;color: @primary;font-weight: bold}
    .tit .h3{.w(59);color: @cPrimary;text-transform: capitalize}
    .tit .h5{.w(14);width: 50%;margin: 0 auto;font-weight: bold;color: @cPrimary;}
  }
  .swiper-new{padding-bottom: 20px;}
  .swiper-slide{background: #fff;height: 400px;.flex-column(flex-start,center);padding: 40px;transform: 1s all}
  .swiper-slide .title{.w(21);font-weight: bold;text-transform: capitalize;margin: 20px 0;}
  .swiper-slide p{line-height: 2;}
  .swiper-slide .more{margin-top: 40px;}
  .swiper-slide:hover{background: @primary;color: #fff;box-shadow: 0 0 0 #eee;box-shadow: 3px 6px 19px fadeout(#000,70%)}
}
.index-block3{
  background: @cPrimary;
  padding: 0px 40px 40px;
  .tit h3{.w(42);font-size: 42px;color: #fff;font-weight: bold;text-align: center;padding: 40px 0;text-transform: capitalize;position: relative;}
  .tit{position: relative;}
  .tit::after{content: '';position: absolute;left: 50%; bottom: 26px; transform: translateX(-50%);width: 60px;height: 2px;background:@primary; }
  .pic{
    background:#fff;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    img{padding: 20px}
    .title{
      .flex-row();
      background: @primary;
      padding:15px 0px;
      color: #fff;
      z-index: 22;
     position: relative;
    }
  }
}
.index-block4{
  padding: 40px 0px;
  .tit{.flex-row(space-between);margin-bottom: 30px}
  .tit h3{.w(48);padding-bottom: 40px;position: relative;}
  .tit h3::after{content: '';position: absolute;left: 0; bottom: 26px;width: 60px;height: 3px;background:@primary; }
  .tit h4{.w(16);line-height: 2;}
  .tit .more{height: ((100vw/@pc)*56);width:((100vw/@pc)*180);.flex-row();background: @primary;color: #fff;margin-top: 40px;border-radius: 40px;}
  .tit .more:hover{background:@cPrimary;}
  .boxgrid {
    transition: 1s all;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
    figure{width: 100%;height: 100%;}
    img{width: 100%;height: 100%;object-fit: cover;display: block;}
    &>div>div{width: 100%;position: absolute;bottom: 0;left: 0;padding: 20px;.w(18);color: #fff;text-transform: uppercase;}
    }
    .div1 { grid-area: 1 / 1 / 3 / 3; position: relative;}
    .div2 { grid-area: 1 / 3 / 2 / 4; position: relative;}
    .div3 { grid-area: 1 / 4 / 2 / 5; position: relative;}
    .div4 { grid-area: 2 / 3 / 3 / 5; position: relative;}
    
}
.index-block5{
  padding: 0px 40px 40px;
  .tit h3{.w(42);font-size: 42px;color: #000;font-weight: bold;text-align: center;padding: 40px 0;text-transform: capitalize;position: relative;}
  .tit{position: relative;}
  .tit::after{content: '';position: absolute;left: 50%; bottom: 26px; transform: translateX(-50%);width: 60px;height: 2px;background:@primary; }
  .boxgrid{
    display: grid;
    margin-top: 40px;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 20px;
    li{.flex-row(flex-start,center);}
    li .pic{width: 40%;flex-shrink: 0;margin-right: 20px}
    li .wenzi h3{.w(18)}
    li .wenzi p{.w(16);}
    li .wenzi a{display: inline-block;background: @cPrimary;color: #fff;padding:7px 25px;border-radius: 20px;}
    li .wenzi a:hover{background: @primary;}
  }
  .boxgrid li .wenzi p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:3;
    overflow: hidden;
    margin: 20px 0;
  }
}
/*___________________页脚样式__________________________*/
footer{
  position: fixed;
  bottom: 0;
  width: 100%;
  left: 0;
  padding-top: (100vw/@pc)*80;
  background-size: cover;
  color: #eee  ;
  background:@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: #eee}
    .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 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-row(space-between);}
    .contact li:last-of-type i{.flex-row(space-between);display: inline-flex;color:#fff;width: 20px;height: 20px;border-radius: 50%;.w(18);} ;

    ul li{line-height: 2;color: #999;}
    ul li:first-of-type{.w(20);margin-bottom: 20px;text-transform: capitalize;color: #fff;text-transform: uppercase;}
    ul:nth-last-child(2){width:(100vw/@pc)*300;}
    .folus{.w(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;
    .w(16);
    color: #999;
}
.menus{
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  border: 1px solid #eee;
  padding: 10px;
  a{.w(18);padding: 0 10px;line-height: 2;display: block;width: 100%;margin-bottom: 2px;color: #fff;background:@primary;transition: 1s all;}
  a.on,a:hover{
    background: @cPrimary;
    transform: translateX(-10px);
  }

}
.leftmenus{
  position: relative;
  cursor: pointer;
  .leftClose{
    position: absolute;
    .w(26);
    box-shadow:  0 0 10px #999;
    right: 3px;
    top: 0px;
    width: 30px;
    height: 30px;
    background: #fff;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold;
    align-items: center;
    transition: 1s all;
    &:hover{transform: rotate(360deg);}
  }
}

.grid,.gridlist{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px;margin-bottom: 20px}
/*关于我们*/
.list-about{
  .title{
    width: 100%;
    height:96px;
    background: url(../images/title.png)no-repeat top;
    padding-top:5px;
  }
  .title span{
    color:#666666;
    font-size: 14px;
    text-align: center;
    margin-top: 10px;
    display: block;
  }
  .title p{
    color:@primary;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
  } ;
  .content{
    padding: 10px;
    margin-top: 20px;
    margin-bottom: 50px;
    box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);
  }
}
/*荣誉资质*/
.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{.w(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%);.w(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{.w(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{.w(50);text-align: center;color: var(--words);padding-top: 7vw;}
    .tit h3{.w(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%;
    }
  }
}
.innerlist{
  &.gridlist {margin:0px 0px;display: grid;grid-template-columns: repeat(4,1fr);grid-gap:20px;}
  &.gridlist li{box-shadow: 0px 0px 20px 0px #e0e0e0;background: #fff}
  &.gridlist li .pic{}
  &.gridlist li img{transition:.2s all;width:100%;height:auto;display: block;object-fit: contain;padding: 20px 10px;}
  &.gridlist li .tit{display: flex;align-items: center;justify-content: center;font-weight: bold;padding:10px 0px;border-top: 1px solid #ececec;}
  &.gridlist li:hover img{filter: drop-shadow(2px 4px 6px #444);}
}
/*产品列表*/
.list-product{}
/*新闻列表*/
.list-news{
  .newslist{box-shadow: 0px 8px 36.8px 3.2px rgba(0,0,7,0.08);}
  .item {display:flex;padding:40px;background-color:#fff;border-bottom:1px solid #eee;transition:all 0.6s;position:relative;}
  .item .pic {width:300px;flex-shrink:0;background-repeat:no-repeat;background-position:center;background-size:cover;}
  .item .pic img {width:100%;transition:all 0.4s ease-in 0s;-webkit-transition:all 0.4s ease-in 0s;-moz-transition:all 0.4s ease-in 0s;-o-transition:all 0.4s ease-in 0s;}
  .item .pic:hover img {transform:scale(1.1);-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);}
  .item .info {padding-left:40px;display:flex;flex-direction:column;justify-content: space-evenly;}
  .item .info .tt {font-size:22px;line-height:22px;font-weight: bold;}
  .item .info .tt:hover {color:#0f6ab4;}
  .item .info .desc {font-size:16px;line-height:28px;height:80px;color:#666;margin-top:10px;}
  .item .info .more {width:140px;height:40px;line-height:40px;text-align:center;border:1px solid #ddd;color:#999;display:flex;align-items:center;justify-content:center;margin-top:30px;transition:all 0.6s;}
  .item .info .more i {font-size:16px;color:#bbb;}
  .item:hover .info .more {border:1px solid #0f6ab4;background-color:#0f6ab4;color:#fff;}
  .item:hover .info .more i {color:#fff;}
}
/*新闻详情*/
.show-news{
  .xypg-detail-title {
    background: #eee;
    padding: 5px 10px;
    color: #363636;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 1.7;
    .w(24)
  }
  .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 30px 0px;}
.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;}
.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 .banner .wenzi h4{ font-size: 6vw}
.show-product{
  .warp .flex{.flex-row(space-between,flex-start)}
  .back a{width: 97px;height: 51px;.flex-row();color: #fff;background: var(--words);font-size: 13px}
  .back i{font-size: 22px}
  .l{width: 238px;margin-right: 50px;flex-shrink: 0}
  .r{flex: 1;}
  .r .main{.flex-row(flex-start,flex-start)}
  .nav .tit{.w(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;.w(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}
  //产品多图
  .detailsImg{
    .swiper-button-next,.swiper-button-prev{outline: none;}
    width: 1000px;
    margin: 0 auto  ;
    .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: cover}
    .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}
  }
  .color{
    .tit{font-size:18px;padding: 10px 0px}
    .span {display: flex;justify-content: flex-start;align-items: center;}
    span{width:20px;height: 20px;border-radius: 50%;display: inline-block;margin-right: 10px;}
  }

  .cansu{
    margin-left: 20px;
    h1{.w(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}
    .ft li.active,.ft li:hover{background: var(--cPrimary);color: #fff;cursor: pointer}
  }
  .other{max-width:(100vw/@pc)*1200;position: relative}
  .other {border: 1px solid #eee;margin-top: 20px}
  .other .tit{.w(18px);padding:15px;border-bottom: 1px solid #eee}
  .swiper-other{width: 100%;padding: 20px}
  .swiper-other .title{text-align: center}
  .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;}
  .xypg-detail-con{padding-bottom: 20px;}
  .xypg-detail-title{text-align: center;padding: 20px 0px;.w(24)}
  .xypg-detail-url{padding: 10px ;border: 1px solid #eee;}
  .xypg-detail-pn{.flex-row(space-between,center);padding: 10px 0px;}
  .xypg-detail-pn div{background: @primary;color: #fff;padding: 10px 10px;}
  .xypg-detail-pn div:hover{background: @cPrimary;}
}


@media screen and (min-width: 320px) and (max-width: 800px){

  body {padding:60px 0  (100vw/@pc)*135;font-size: 14px}

  @pc:375;
  .hidden-xs {
    display: none!important;
  }
  .visible-xs {
    display: block!important;
  }
  .w(@px){
    font-size:((100vw/@pc)*@px);
  }
  .warp{width:95%;margin: 0 auto;}
  .location{display: none}
  .leftmenus .menus{overflow: auto}
  .layout{flex-direction: column}
  .layout .layoutL{width: 100%}
  .leftmenus .leftClose{display: none}
  /*手机端头部*/
  .mobheader{
    .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: 70%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;

    }

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

    .xymob-head-box .xymob-logo img {
      width: 100px;
    }

    .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: 14%;
      text-align: center;
      line-height: 60px;
      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}
 .banner .swiper-pagination-bullet-active{
   --swiper-theme-color: #fff;
   --swiper-pagination-color: #fff;/* 两种都可以 */
 }
  .banner video{height: 40vh;}
  .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}

  .headerTop,header{display: none;}
  .height{height: 100vh}
  .index-block1{
    .warp{flex-direction: column;}
    .tit,.wenzi{width: 100%;}
    .wenzi{
      h4{.w(20)}
      .desc{.w(16)}
      a.more{width: 100px;height: 40px;margin: 20px 0;}
    }
  }
  .index-block2{
    padding:30px 0;
    .warp  .tit .h4{.w(24) }
    .warp  .tit .h3{.w(24) }
    .warp .tit .h5{width: 90%;.w(16)}
    .warp .tit{margin-bottom: 40px;}
    .swiper-slide .title{.w(24)}
    .swiper-slide p {
      .w(16)
    }
  }
  .index-block3 {
    padding:  0 15px 30px 15px;
    .tit h3{.w(24)}
  }
  .index-block4 {
    .tit{flex-direction: column;}
    .tit .more{.w(20);width: 150px;height: 40px;}
    .tit h3{.w(24)}
    .tit h4{.w(14)}
     .boxgrid{
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(4, 1fr);
    }
    .div1 { grid-area: 1 / 1 / 3 / 3; }
    .div2 { grid-area: 3 / 1 / 4 / 2; }
    .div3 { grid-area: 3 / 2 / 4 / 3; }
    .div4 { grid-area: 4 / 1 / 5 / 3; }
  }
  .index-block5 {
    padding:0 0 40px 0;
    .tit h3{.w(24);padding:0 0  40px 0;}
    .tit::after{bottom: 30px;}
    .boxgrid{ grid-template-columns: repeat(1, 1fr);    margin-top: 0;}
    .boxgrid li .wenzi {align-self: stretch;.flex-column(space-between,flex-start);padding-left: 20px;}
    .boxgrid li .wenzi h3{font-size: 12px}
    .boxgrid li .wenzi p{font-size: 12px;display: none;}
    .boxgrid li .wenzi a{width: 70px;height: 24px;padding: 0;.flex-row();font-size: 12px;}
    .boxgrid li .pic{width: 30%;}
  }
  footer{
    .flex{flex-direction: column}
    .footlogo img{width: (100vw/@pc)*200}
    .r{display: none}
    .l .footlogo{margin: 0}
    .l li{font-size: 12px}
    .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}
    ul{display: none}
    ul.content{width: 100%;display: block}
     .warp{
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .list-news {
    .item{
      flex-direction: column;
    }
    .item .info{padding: 20px 0 0 0;}
    .item .info .desc{overflow: hidden}
    .item h3{
      .w(18)
    }
  }
  .list-product{
    .gridlist {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 20px;
    }
  }
  .show-product{
    .back{display: none}
    .warp .flex{flex-direction: column-reverse}
    .r .main{flex-direction: column}
    .detailImg .swiper{width: 95vw;height: auto}
    .cansu .ft{margin: 10px 0px;}
    .other{max-width: 95vw}
    .other .tit{.w(14)}
    .nav .tit{.w(14)}
    .nav > ul > li > a{.w(14)}
    .l{width: 100%}
    .detailsImg{width: 100%}
    .detailsImg .swiper{
      width: 90%;
      height: 300px
    }
    .detailsImg .mySwiperB{
      height: 100px;
    }
  }
  .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}
  }

}