@charset "UTF-8";
@primary:#e7f4f5;
@cPrimary:darken(@primary,50%);
@word:#000;  // 浅色背景下的文字
@lword:#fff; // 深色背景下的文字
@pc:1920;
:root {
  --primary:@primary; /* 主色调、链接*/
  --cPrimary:@cPrimary; /*辅色调*/
  --word:@word;  /*大部分文字、深色文字*/
  --lword: @lword; /*少部分文字、浅色文字*/
}
.swiper{
  --swiper-theme-color:@primary;/* 设置Swiper风格 */
  --swiper-navigation-color: @primary;/* 单独设置按钮颜色 */
  --swiper-navigation-size: 59px;/* 设置按钮大小 */
}

/*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（）*/

//  网站滚动条颜色
/* 定义滚动条的宽度和高度 */
::-webkit-scrollbar {
  width: 5px; /* 滚动条宽度 */
  height: 10px; /* 滚动条高度 */
}
/* 定义滚动条轨道样式 */
::-webkit-scrollbar-track {
  background: #f1f1f1; /* 轨道背景颜色 */
}
/* 定义滚动条滑块样式 */
::-webkit-scrollbar-thumb {
  background: @primary; /* 滑块颜色 */
}
/* 鼠标悬停在滚动条上时的样式 */
::-webkit-scrollbar-thumb:hover {
  background: @primary; /* 滑块悬停时的颜色 */
}
/* 定义滚动条角落的样式 */
::-webkit-scrollbar-corner {
  background: #f1f1f1; /* 角落背景颜色 */
}
//图片出现效果
.shellElement {
  position: relative;
  overflow: hidden;
  overflow: hidden;
  &.on::after {
    width: 0%;
  }
  &:after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    width: 100%;
    height: 100%;
    background: @cPrimary;
    z-index: 3;
    transition: 1s all;
  }
}
*{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"}
html{color:@word; scroll-behavior: smooth;}
body{color:inherit;background: #fff;position: relative;z-index: 2;padding-top: (100vw/@pc)*120;}
li{list-style: none}
strong {  font-weight: bold; span{font-weight: inherit;}}
a{text-decoration: none;color: inherit}
a:hover{color: darken(@primary,50%);}
font{color:inherit;font-size: inherit}
.warp{width:1200px;margin:0 auto}
@media screen and (min-width: 1600px) and (max-width: 1920px){
  .warp{width:1400px;margin:0 auto}
}
@media screen and (min-width: 1400px) and (max-width: 1710px){
  .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;
 img{transition: .3s all}
 img:hover{transform: scale(1.1)}
 &:hover img{transform: scale(1.1)}
}
//多行文本超出省略
.morerowover(@max-lines:3) {
  display: -webkit-box;
  -webkit-line-clamp: @max-lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
//单行文本超出省略
.rowover() {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.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);
}
header{
  transition: .5s all linear;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  overflow: hidden;
  background-color:fadeout(#fff,40%);
  color: @lword;
  backdrop-filter: blur(10px);
  height: (100vw/@pc)*120;
  .warp-90{
    width: 90%;
    margin: 0 auto;
    height: (100vw/@pc)*100 ;
    .flex-row(space-between);
  }
  .headerbg{background: @primary;height: (100vw/@pc)*20;width: 100%;}
  .logo{margin-right: auto}
  .nav ul{.flex-row(flex-start);color: #000;margin-right: 30px;}
  .nav ul a{padding: 30px;display: block; color: @word;.w(14);position: relative;}
  .nav li{position: relative;overflow: hidden;}
  .nav li:after{content: '';z-index:-1;position: absolute;left: 0;bottom: 20px;transform: translateX(calc(-100%));transition:.5s all;width:calc(100% - 50px) ;height: 2px;background:darken(@primary,50%);}
  .nav li:hover:after{transform:translateX(-50% );left: 50%;}
  .nav li:hover a{color: darken(@primary,50%);}
  .lang{display: flex}
  &.active{
    background: @cPrimary;
    color: #fff;
  }
  .contact{
    .flex-row();
    color: #000;
    i{display: inline-block;margin-right: 10px;}
  }
  .search{margin-left: 20px}
  .search i{cursor: pointer;}
  .search form{
    display: none;
  }
  &.act{
    transform: translateY(-100%);
  }
}
.banner{
  position: relative;overflow: hidden;
  background-size: cover;
  img{width: 100%;display: block;}
  .innerimg{opacity: 0;}
  .ignore{text-align: center;}
  .wenzi{position: absolute;width:100%;height:100% ;color: #fff;.w(60);left: 10%;top: 0;.flex-column(center,flex-start);}
  .wenzi h3{.w(48);font-weight: 300;text-transform: uppercase;}
  .wenzi h4{.w(48);font-weight: bold;text-transform: uppercase;}
  .swiper-pagination-bullet{width: 4vw;height: .3vw;border-radius: 4px;outline: none;}
  .swiper-pagination-bullet.swiper-pagination-bullet-active{background: darken(@primary,50%);}
}

.index-block1{
  &:after{position: absolute;content:'';width: 94%;margin: 0 auto;height: 2px;background: darken(@primary,10%);left:3%;bottom: 102px}
  .line{position: absolute;content:'';width: 200px;margin: 0 auto;height: 6px;background:@cPrimary;left:3%;bottom: 100px;z-index: 2}
  padding-bottom: 100px;
  position: relative;
  background: @primary;
  .title{
    padding:40px 0;
    h3{.w(48);text-align: center;color: @cPrimary;font-weight:bold;text-transform: uppercase}
  }
  .swiper-slide p{.w(24);text-align: center}
  .swiper-slide .pic img{mix-blend-mode: multiply;}
  .swiper-slide .pic{transition: .5s all}
  .swiper-slide:hover .pic{background: @primary}
  .swiper-slide{padding-bottom: 50px;}
}
.index-block2{
  padding: 80px 0px;
  text-align: center;
  h3{color: @cPrimary;.w(36);text-transform: uppercase;margin-bottom: 40px}
  p{.w(24);color: @primary;color: @cPrimary;}
  a.more{display: inline-block;margin-top: 40px;.w(18);text-transform: uppercase;color: @cPrimary;text-decoration: revert}
}
.index-block3{
  padding: (100vw/@pc)*130 0 40px;
  background: #fef9f4;
  .warp-90{
    .flex-row();
    padding-bottom: 56px;
    border-bottom: 1px solid #797775;
  }
  .l{flex:1;}
  .l h3{.w(47);color:@word;text-transform: capitalize;font-weight: 600}
  .r{width:60%;flex-shrink: 0}
  .more{margin-top: (100vw/@pc)*100; display: block}
  .r .swiper-slide h3{.w(18);font-weight: bold;padding: 20px 0px}
  .r .pic img{width: 100%}
  .r .swiper-slide  p{color: #666666}
}
.index-block4{
  background: #fef9f4;
  .title{
    padding:40px 0 80px;
    i{.w(48)}
    h3{.w(48);text-align: center;;font-weight:bold;text-transform: uppercase}
  }

  .pic img{width: 100%;height: 100%;display: block;object-fit: cover}
}

/*___________________页脚样式__________________________*/
footer{
  padding: 60px 0 0px;
  background: #00778b;
  color: #c4c3c3;
  .warp-90{
    .flex-row(flex-start, flex-start)
  }
  dl:not(.contact){margin-right:10%}
  dl.contact{
    width: 50%;
    dt{.w(46);margin-bottom: 0;}
    dd:first-of-type{margin-bottom: 20px}
    dd input{background: #fff;border: none;border-radius: 20px;height: 50px;width:(100vw/@pc)*480;padding: 0 20px;outline: none}
    dd button{background: #fff;border: none;border-radius: 20px;height: 50px;width:(100vw/@pc)*150;color: #00778b;font-weight: bold;outline: none;cursor: pointer}
    dd button span{display: inline-block;width: 12px;height: 12px;background:#00778b;margin-right: 10px;border-radius: 50%}
    dd:last-of-type{margin-top: 40px}
    dd:last-of-type i{.w(24);color: #fff;margin-right: 20px}
  }
  dt{.w(18);color: @lword;margin-bottom: 20px;text-transform: uppercase;color: #4da0ad;font-weight: bold;}
  dd{line-height: 2;}
  dd a{color: #fff;.w(16);text-transform: capitalize}
  .coy{
    .warp-90{border-top: 1px solid #4da0ad;padding-top: 20px}
    margin-top: 60px;
    padding: 20px 0px;
    background: #00778b;
    .w(16);
    text-align: center;
    color: #4da0ad;
  }
}
/*___________________内页样式__________________________*/
/* 分页样式 */
.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{background: #f9f9f9;padding:1vw 0;}
//内页侧边导航
.no-data{height: 50vh;display: flex;align-items: center;justify-content: center;font-weight: bold;flex-direction: column}
.pro-tit{position: relative;font-size: 36px;line-height: 40px;color: #333;}
.pro-box .pro-menu-box{margin: 30px 0 50px;}
.pro-box .pro-menu-box {position: relative;width: 100%;display: flex;justify-content: space-between;align-items: center;margin-top: 30px;}
.pro-box .pro-menu-box:before {position: absolute;left: 0;bottom: -20px;content: '';width: 100%;height: 1px;background: #cbcbcb;z-index: 1;}
.pro-box .pro-menu-box .pro-menu {display: flex;font-size: 16px;color: #333;align-items: center;}
.pro-box .pro-menu-box .pro-menu>ul>li {float: left;box-sizing: border-box;cursor: pointer;margin-right: 10px;transition: ease .45s;}
.pro-box .pro-menu-box .pro-menu>ul>li a {display: block;padding: 7px 15px;}
.pro-box .pro-menu-box .pro-menu>ul>li.on,
.pro-box .pro-menu-box .pro-menu>ul>li:hover {background: #23a6d0;border-radius: 3px;}
.pro-box .pro-menu-box .pro-menu>ul>li.on a,
.pro-box .pro-menu-box .pro-menu>ul>li:hover a {color: #fff;}
.pro-box .pro-menu-box .pro-search {position: relative;width: 245px;height: 35px;box-sizing: border-box;border: 1px solid #c5c5c5;}
.pro-box .pro-menu-box .pro-search>.inp {height: 100%;outline: none;border: none;width: 200px;text-indent: 12px;}
.pro-box .pro-menu-box .pro-search>i {position: absolute;right: -1px;top: -1px;height: 35px;width: 45px;background: #23a6d0;color: #fff;font-size: 21px;text-align: center;line-height: 35px;cursor: pointer;z-index: 2;}
.grid,.gridlist{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px;margin-bottom: 20px}
.pro-weizhi{
  a{text-transform: uppercase;color: #999}
  a:last-of-type{text-decoration: underline;color: #333}
  i{font-size: 12px}
}
.pro-menu-box{position: relative}
.more{position:relative;}
.slideToggle{display: none;position: absolute;top: 100%;left: 0;width: 100%;background: rgba(0,0,0,.5);;z-index:999;color: #fff;}
.moremenu{  padding:20px;display:flex;justify-content: flex-start;flex-wrap: wrap}
.moremenu li{line-height: 2;padding: 5px;margin-right: 5px}
.moremenu li.on{background: #23a6d0}
.more i{display: inline-block;margin-right: 10px}
.grid,.gridlist{display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px;margin-bottom: 20px}
/*关于我们*/
.list-about{
  .flex{.flex-row(flex-start,flex-start);margin-top: 40px;}
  .l,.r{width: 50%}
  .l{margin-right: 40px;line-height: 1.5}
  .title{
    position: relative;
    margin-bottom: 40px;
    h3{.w(56);color: darken(@primary,50%);font-weight: bold;margin-bottom: 10px}
    h3 span{.w(56);color:darken(@primary,20%) ;font-weight: bold;margin-bottom: 10px}
    &:after{
      position: absolute;
      content: '';
      left: 0;
      top: 100%;
      width: 50px;
      height: 5px;
      background: darken(@primary,50%);
    }

  }
  .desc p{line-height: 2}
  .r{
    align-self: stretch;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
/*荣誉资质*/
.list-rongyu{
  .pic{text-align: center}
  .wenzi{text-align: center}
}

.left{
  .tit{
    text-align: center;
    h2{.w(30); margin-bottom: 20px; font-weight: normal;}
    h3:before, h3:after {
      display: inline-block;
      width: 30px;
      height: 1px;
      background: #999;
      vertical-align: middle;
      content: '';
      margin: 0 2px;
      margin-bottom: 2px;
    }
  }
  .wow_list{
    .flex-row();
    padding: 20px 0px;
    a{
    display: block;
    padding:5px 20px;
    position: relative;
    &:hover{background: @primary;}
    &::after{content: '';position: absolute;height: 16px;width: 2px;background: #eaeaea;right: -2px;top: calc(50% - 8px);}
    }
    li:last-of-type a::after{display: none;}

  }
}
/*产品列表*/
.list-product{
  .grid, .gridlist{grid-template-columns: repeat(3, 1fr);}
  .pro_list li{text-align: center}
  .pro_list li a {
    display: block;
    background: #fff;
    padding: 23px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
  }
  .img{position: relative;transition: .3s all linear;}
  .img img {transition: .3s all linear;}
  .img:before {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(255,255,255,0);
    z-index: 100;
}
  .pro_list h3 {
    font-size: 16px;
    .rowover();
    padding: 20px 0px;
    font-weight: normal;
  }
  .img:hover img {
    transform: scale(1.1) rotate(3deg);
    -o-transform: scale(1.1) rotate(3deg);
    -webkit-transform: scale(1.1) rotate(3deg);
    -moz-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
}
}
/*newtu列表*/
.caseList{
  .grid, .gridlist{grid-template-columns: repeat(3, 1fr);}
  .case_list li{text-align: center}
  .case_list li a {
    display: block;
    background: #fff;
    padding: 23px;
    box-shadow: 0 0 20px rgba(0,0,0,0.05);
  }
  .img{position: relative;transition: .3s all linear;}
  .img img {transition: .3s all linear;width: 100%}
  .img:before {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(255,255,255,0);
    z-index: 0;
}
  .case_list h3 {
    font-size: 16px;
    .rowover();
    padding: 20px 0px;
    font-weight: normal;
  }
  .img:hover img {
    opacity: .5;
    transform: scale(1.1) rotate(3deg);
    -o-transform: scale(1.1) rotate(3deg);
    -webkit-transform: scale(1.1) rotate(3deg);
    -moz-transform: scale(1.1) rotate(3deg);
    -ms-transform: scale(1.1) rotate(3deg);
}
}
/*新闻列表*/
.list-news{
  .page_news  li {
    margin-bottom: 40px;
  }
  .page_news  .img {
    overflow: hidden;
    width: 471px;
    float: right;
    margin-left: 50px;
    position: relative;
  }
  .img:before {
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    -ms-transition: all 0.5s;
    -o-transition: all 0.5s;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(255,255,255,0);
    z-index: 100;
}
.page_news  .text {
  border-top: 2px solid #000;
  padding-top: 30px;
  overflow: hidden;
}
.page_news  .text h3 {
  font-weight: bold;
  line-height: 2;
}
.page_news li:after {
  content: '';
  display: block;
  clear: both;
}
.page_news .time {
  line-height: 20px;
  margin-bottom: 10px;
  padding-left: 25px;
  background: url(../images/icon6.png) no-repeat left center;
  color: #a8a8a8;
}
.page_news p {
  line-height: 27px;
  height: 81px;
  overflow: hidden;
  color: #737373;
  margin: 30px 0;
}
.page_news .btn a {
  background: none;
  border: 2px solid #000;
  color: #000;
  line-height: 34px;
  width: 120px;
  margin-left: 0;
  text-align: center;
  display: block;
}
.img img{transition: .2s all linear;}
.img:hover {
  background: #000;
}
.img:hover img {
  opacity: .5;
  transform: scale(1.1) rotate(3deg);
  -o-transform: scale(1.1) rotate(3deg);
  -webkit-transform: scale(1.1) rotate(3deg);
  -moz-transform: scale(1.1) rotate(3deg);
  -ms-transform: scale(1.1) rotate(3deg);
}
.page_news .btn a:hover{
  background: @primary;
  color: @lword;
  border-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;
  }
}
.show-product{
  .bg{background: #f8f8f8;}
  .gridlist{display: grid;grid-gap: 20px;grid-template-columns: repeat(3,1fr);}
  .xypg-news-detail{
    .xypg-detail-title{.w(32);font-weight: bold;margin-bottom: 20px;text-align: center;padding: 20px 0px}
    .xypg-detail-con ul{
      width: 500px;
      background:  darken(@primary,50%);
      color: #fff;
      margin: 0 auto;
      box-shadow: 0 0 4px 0px #999;
      overflow: auto;
      li{.flex-row(flex-start); border-bottom: 1px solid #eee;padding: 10px 20px}
      li:hover{background: darken(@primary,30%)}
      h2{.w(18)}
    }
  }
  .detailsImg{
    padding-top: 40px;
    .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: contain;mix-blend-mode: multiply;}
    .swiper {width:(100vw/@pc)*1000;height: (100vw/@pc)*570;margin-left: auto;margin-right: auto;   }
    .swiper-slide {background-size: contain;background-position: center;background-color: #f9f9f9;}
    .mySwiperB{height: 134px;margin-top: 10px}
    .mySwiperB .swiper-slide img{object-fit: contain}
    .mySwiperB .swiper-slide{padding: 5px;cursor: pointer;transition: 1s all;}
    .mySwiperB .swiper-slide.swiper-slide-thumb-active img{padding: 5px;border: 3px solid @cPrimary;cursor: pointer}
    .mySwiperB .swiper-slide {width: 25%;opacity: 0.4;}
    .mySwiperB .swiper-slide-thumb-active {opacity: 1;}

  }
  .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
  .swiper-button-next, .swiper-rtl .swiper-button-prev{color: darken(@primary,30%);outline: none}
  .tit{.w(32);text-align: center;padding: 40px 0px;font-weight: bold}
  .gridlist{
    li{
      padding: 40px;
      border: 1px solid #dfdfdf;
      img{padding: 40px 80px;mix-blend-mode: multiply;}}
    .text{
      text-align: center;
      h3{.w(24)};
      h4{.w(18)};
    }
  }
}
/*联系我们*/
.list-contact{
  .iconfont{font-size:32px}
  background: #f5f3f0;
  padding: 0;
  .contact1{
    .header{
      background-color: darken(@primary,50%);
      color: #fff;
      padding: 20px 0;
      text-align: center;
    }
    .contact.site{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      background: #F6F6F6;
      padding: 5vw 0;
      .item{.flex-column();line-height: 2}
      .item span{font-weight: bold}
    }
  }
  .contact3{

    .con3{background: #f5f3f0;padding: 120px 0 150px;}



    .con3 .tt2{margin: 20px 0 40px;.w(36);font-weight: bold;}



    .con3 .ul1{border-top: 1px solid #dcdcdb;}



    .con3 .ul1 li{border-bottom: 1px solid #dcdcdb;}



    .con3 .ul1 li .ltop{line-height: 1.5;background: url(../images/jia.png ) 98% center no-repeat;cursor: pointer;padding: 40px 80px 40px 0;}



    .con3 .ul1 li .ltop.act{background: url(../images/jian.png ) 98% center no-repeat;}



    .con3 .ul1 li .ltop .ltc{color: #555;font-weight: 100%;margin-top: 10px;}



    .con3 .ul1 li .lbtm{border-top: 1px dashed #dcdcdb;padding: 40px 0;line-height: 2;display: none;}



    .con3 .ul1 li .lbtm a{display: flex;align-items: center;line-height: 18px;}



    .con3 .ul1 li .lbtm a span{display: block;margin-left: 10px;}



    .con3 .ul1 li .lbtm a img{display: block;margin-right: 10px;}



    .con3 .more2{display: block;width: 180px;line-height: 46px;border: 1px solid #bdbdbd;text-align: center;margin: 70px auto 0;letter-spacing: 7px;font-weight: 100;cursor: pointer;}



    .con3 .more2:hover{background: #000;border: 1px solid #000;color: #fff;}
  }
  .subnavNav{display: flex;justify-content: center;align-items: center;border-bottom: 1px solid #ddd;margin-bottom: 40px}
  .subnavNav a{
    display: block;
    padding: 1.3021vw 1.8229vw;
    transition-property: color,background-color;
    transition-duration: .5s,.5s;
    color: #000;
    background: #ececec;
  }
  .subnavNav a.on{
    color: #fff;
    background: #242424;
  }
}
/**搜索**/
.searchlist{
  li{.flex-column(center, center)}
  li{.w(14);font-weight: bold;text-align: center;}
}

/*产品详情*/
.show-product{
  .detailsImg{
    padding-top: 40px;
    .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: contain;mix-blend-mode: multiply;}
    .swiper {width:(100vw/@pc)*1000;height: (100vw/@pc)*570;margin-left: auto;margin-right: auto;}
    .swiper-slide {background-size: contain;background-position: center;background-color: #f9f9f9;}
    .mySwiperB{height: 134px;margin-top: 10px;background: #eee}
    .mySwiperB .swiper-slide img{object-fit: contain}
    .mySwiperB .swiper-slide{padding: 5px;cursor: pointer;transition: 1s all;}
    .mySwiperB .swiper-slide.swiper-slide-thumb-active img{padding: 5px;border: 3px solid @cPrimary;cursor: pointer}
    .mySwiperB .swiper-slide {width: 25%;opacity: 0.4;}
    .mySwiperB .swiper-slide-thumb-active {opacity: 1;}

  }
  .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
  .swiper-button-next, .swiper-rtl .swiper-button-prev{color: darken(@primary,30%);outline: none}
}
.hexinjishu{
  li{height: 100vh;width: 100vw;background-size: cover;background-attachment: fixed;position: relative;}
  .wenzi{
    width:(100vw/@pc)*550;
    height: (100vw/@pc)*168;
    color: #fff;
    position: absolute;left: 10%;top: 50%;
    transform: translateY(-50%);
    h3{.w(55);margin-bottom: 20px}
    p{.w(18);line-height: 2;}
  }
  .wenzi.right{
    position: absolute;left:auto;right:10%;top: 50%;
  }
}
.list-zhaoshang{
  background: #1a1a1a;
  color: #fff;
  .zhaoshang1{
    padding: (100vw/@pc)*350 0 50px;
    line-height: 2;
    h3{.w(75);text-transform: uppercase;line-height:1;font-weight: 300}
    h4{.w(30);margin-bottom: 20px;font-weight: 300}
    .boxes{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 40px;
    }
    li{background: #fff;color: #1a1a1a;height: (100vw/@pc)*390;.flex-row();padding:0  20px 0  40px;}
    li .wenzi{
      .morerowover(5);
      width: 50%;
      padding-right: 40px;
      h3{.w(24);margin-bottom: 40px;color: #333;font-weight: bold;}
    }
  }
  .zhaoshang2{
    padding-top: 2vw;
    .tit{text-align: center}
    .tit h3{.w(75);text-transform: uppercase;line-height:1;font-weight:300}
    .tit h4{.w(30);margin-bottom: 20px;font-weight: 300;margin-top: 20px}
    .liucheng{
      .flex-row(space-between, center);margin-top:80px;
      li{height: (100vw/@pc)*122;width:(100vw/@pc)*122;.flex-row();text-align: center;border-radius:50% ;position: relative; }
      li:after{content: '';position: absolute;width: 100%;height: 100%;animation: identifier 20s  linear infinite;border-radius: 50%;border: 1px dashed #fff;}
    }
    .tiaojian{
      padding: 140px 0;
      .flex-row(space-between, center);
      .l{position: relative}
      .l .pic span{position: absolute;width: 255px;height:181px;background:@cPrimary;right: -15%;bottom:0;.flex-row()}
      .title h3{.w(36);text-transform: uppercase;margin-bottom: 10px;}
      .title h4{.w(30);text-transform: uppercase;margin-bottom: 40px;}
      ul li{line-height: 3;padding-left: 20px;position: relative;}
      ul li::after{content: '';position: absolute;width: 5px;height: 5px;border-radius: 50%;background: @cPrimary;left: 0;top: 50%;}
      .r {position: relative;transform: translateY();width: 35%;}
      .r span{width: 255px;height:181px;background:@cPrimary;right: -15%;bottom:0;.flex-row();transform: translate(-100%,22%);}
    }
  }
  .zhaoshang3{
    padding: 40px 0px;
    background: #fff;
    color: #000;
    .tit h3{
      .w(75);
      text-align: center;
      text-transform: uppercase
    }
    .tit h4{
      .w(30);
      text-align: center;
    }
    text-align: center;
  }
  .zhaoshang4{
    padding: 40px 0px;
    background: #333333;
    color: #fff;
    .tit h3{
      padding: 40px 0;
      .w(75);
      text-align: center;
      color: #fff;
      font-weight: 300;
      text-transform: uppercase
    }
    .tit h4{
      color: #fff;
      .w(30);
      text-align: center;
    }
    text-align: center;
    .swiper-zhaoshang{
      width: 110%;
      transform: translateX(-5%);
      margin: 0 auto;
      text-align: center;
      padding:  50px 0px;
    }
    .swiper-slide{transition: .4s all;}
    .swiper-slide-next{
      transform: scale(1.1);
    }
  }
  .zhaoshang5{
    text-align: right;
    background: #fff;
    color: #000;
    padding:  (100vw/@pc)*180 0;
    h3{.w(30px);   padding-bottom: 60px;position: relative}
    h3:after{position: absolute;content: '';width: 20px;height: 2px;background: red;right: 10px;bottom: 20px;}
    h4{.w(16);}
  }

  @keyframes identifier{
    0%{
      transform: rotate(0deg);
    }
    50%{
      border-radius: 30% 30% 20% 50%;
    }
    100%{
      transform: rotate(360deg);
    }

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

  @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}

  /*手机端头部*/
  .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;
    margin-top: 10px;
  }

  .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: darken(@primary,50%);
    -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 darken(@primary,50%);
    position: relative;
  }

  .xymob-nav > li > a {
    display: block;
    line-height: 50px;
    font-size: 16px;
    color: darken(@primary,50%);
  }
  .xymob-nav .xymob-menu-jt i{
    color: darken(@primary,50%);
  }
  .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;}
  .banner .swiper-pagination-bullet{height: 1vw;}
  .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}
  .index-search{
    height: auto;
     .warp{
      flex-direction: column;
     }
     .tit{width: 100%;padding-bottom: 10px;}
     .tit h3{.w(13)}
     input{padding: 2px;}
     .keyword a{margin-right: 2px;.w(13)}
  }
  .index-block1{
    padding: 10px 0;
    .title{padding: 10px}
    .title h3{.w(20)}
    .swiper-slide .pic img{
      mix-blend-mode: multiply;
      width: 80%;
      display: block;
      margin: 0 auto;
    }
    &:after{
      bottom: 30px;
    }
    .line{
      bottom: 28px;
    }
    .swiper-slide p{padding-top: 10px;.w(14)}
  }
  .index-block2{
    padding: 40px 0px;
    h3{.w(18);font-weight: bold}
    h3{margin-bottom: 40px;}
    p{.w(12)}
    a.more{.w(14)}
  }
  .index-block3{
    padding-bottom: 0;
    .warp-90{flex-direction: column;padding-bottom: 10px}
    .r,.l{width: 100%}
    .l h3{.w(18)}
    .wenzi{margin-bottom: 20px}
    .more{padding: 10px 0px;display: none}
    .r .swiper-slide h3{.w(14)}
  }
  .index-block4 {
    .title{padding: 40px 0px}
    .title h3{ .w(18);}
    .title i{.w(18)}
  }
  footer{
    padding: 40px 0px 0;
    dl.contact{width: 100%}
    dl:not(.contact){display: none}
    dl.contact dt{.w(20)}
    dl.contact dd button{height: 35px;width: 33vw}
    dl.contact dd input{height: 35px;width: 50vw}
    dd a{.w(16)}
    dl.contact dd:last-of-type i{.w(18)}
    .coy{margin-top: 20px}
  }

  .list-news {
    .page_news .img{float: none;margin: 0}
    .page_news .text{padding-top: 10px}
    .page_news p{margin: 20px 0px}
  }
  .list-product{
    .gridlist {
      grid-template-columns: repeat(2, 1fr);
      grid-gap: 10px;
    }
    .pro_list li a{padding: 0}
    .pro_list h3{    background: darken(@primary,50%);padding: 5px 0px;color: #fff}
  }
  .list-contact {
    .contact1 .header span{.w(12)}
    .iconfont{.w(15)}
    .contact1 .contact.site .iconfont{.w(24)}
    .contact1 .contact.site .item{ align-self: self-end; flex-direction: column;justify-content: center;}
    .contact1 .contact.site .item span{font-size: 12px;text-align: center}
    .contact3 .con3{padding: 20px 0px}
  }
  .show-product{
    .tit{.w(20)}
    padding: 20px 0px;
    .gridlist li{padding: 0px;border: none}
    .gridlist{grid-template-columns: repeat(1, 1fr);}
    .gridlist li img{
      padding: 0px;
      width: 60%;
      display: block;
      margin: 0 auto;}

  }
  .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}
  }
  .caseList{
    .case_list li a{padding: 10px}
     .grid, .gridlist{    grid-template-columns: repeat(2, 1fr);grid-gap: 10px;}
  }
  .case_list li a{}
  .list-about{
    .title h3{.w(20);}
    .title h3 span{.w(20);margin-left: 10px}
    .l,.r{width: 100%}
    .title{margin-bottom: 20px}
    .flex{flex-direction: column}
  }
  .show-news{
    .xypg-detail-title{.w(18)}
    .xypg-detail-info-bar{display: flex;justify-content: space-between;background: #eee;padding: 5px 10px}
  }
  .page-link{display: none}
  .pro-box .pro-menu-box{
    margin-top: 20px;
  }
  .pro-box .pro-menu-box{align-items: self-end;flex-direction: column-reverse}
  .pro-menu ul{display: none}
  .pro-box .pro-menu-box .pro-menu{    position: absolute;right: 0;}
  .moremenu li{.w(12);  line-height: 2;padding: 2px 8px;margin-right: 5px;}
}