@charset "utf-8";
/* CSS Document */
*{margin: 0px;padding: 0px;}
body{font-family: harmonyos, Arial,Manrope, Verdana, Geneva, sans-serif;color: #333;background-color: #fff; line-height: 180%; font-size: 1rem; } 
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td, hr{margin: 0px;padding: 0px;}
html, body{ height: 100%; width: 100%;}
a{color: #333;text-decoration: none; display:inline-block;}
a:hover{color: var(--theme-color);text-decoration: none;}
img{border: 0; max-width: 100%;}
ul{display: block;}
ul, ul li{list-style: none;}
input, select, textarea{vertical-align: middle;border: 1px solid #e5e5e5;}
.mt{margin-top: 0.625rem;}
.mr{margin-right: 0.625rem;}
.mb{margin-bottom: 0.625rem;}
.ml{margin-left: 0.625rem;}
.pt{padding-top: 0.625rem;}
.pt2{padding-top:1.25rem;}
.pt3{padding-top:1.875rem;}
.pt4{padding-top:2.5rem;}
.pt5{padding-top:3.125rem;}
.pt6{padding-top:3.75rem;}
.pt7{padding-top:4.375rem;}
.pt8{padding-top:5rem;}
.pt9{padding-top:5.625rem;}
.pt10{padding-top:6.25rem;}
.pr{padding-right: 0.625rem;}
.pb{padding-bottom: 0.625rem;}
.pb2{padding-bottom: 1.25rem;}
.pb3{padding-bottom: 1.875rem;}
.pb4{padding-bottom: 2.5rem;}
.pb5{padding-bottom: 3.125rem;}
.pb6{padding-bottom: 3.75rem;}
.pb7{padding-bottom: 4.375rem;}
.pb8{padding-bottom: 5rem;}
.pb9{padding-bottom: 5.625rem;}
.pb10{padding-bottom: 6.25rem;}
.pl{padding-left: 0.625rem;}
.wp{margin: 0px auto;width: 1400px;}
.cls{font-size: 0px;height: 0px;line-height: 0px;clear: both;}
.hs{ background: #f6f6f6;}
.wp1380{ width:1380px; margin:0px auto}
.hs{ background: #f5f5f5;}
.h1, h1{ font-size: 1.3rem; font-weight: 600;}
.container-s{ padding: 0px 40px;} 
.clearfix:after { content: ""; display: block;  height: 0; clear: both;}
.x1 {text-overflow: ellipsis;overflow: hidden; white-space: nowrap; display: block; }
.x2 {text-overflow: ellipsis; overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.x3 {text-overflow: ellipsis; overflow: hidden; display: -webkit-box;  -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
::-webkit-scrollbar{width: 8px;height: 8px;background-color: #f6f6f6;}
::-webkit-scrollbar-track{background-color: #f6f6f6;}
::-webkit-scrollbar-thumb{background-color: var(--theme-color);}

.zsy-img{ width: 100%; overflow: hidden;  height: 100%;position: relative;}
.zsy-img img{ max-width:100%;     object-fit: cover;}
.zsy-img img.abc {position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; display: block; text-align: center; margin: auto; transition:all 0.36s ease; }

.xg1{position: relative; overflow: hidden;}
.xg1:before{background:rgba(217,169,91,0.2); content:"";height:0;left:0;margin:auto;opacity:1;position:absolute;top:0;width:0;pointer-events:none;z-index:1}
.xg1:after{background:rgba(217,169,91,0.2); bottom:0;content:"";height:0;opacity:1;position:absolute;right:0;width:0;pointer-events:none;z-index:1}
.xg1:hover:before{height:100%;opacity:0;-webkit-transition-duration:1.3s;-o-transition-duration:1.3s;transition-duration:1.3s;width:100%}
.xg1:hover:after{height:100%;opacity:0;-webkit-transition-duration:1.3s;-o-transition-duration:1.3s;transition-duration:1.3s;width:100%}
.xg1 img{transition: all 0.36s ease;}
.xg1:hover img{transform: scale(1.08);}

.container-fluid{padding-left: 100px; padding-right: 100px;}


.ty-flex{display:flex; flex-wrap: wrap;}
.ty-flex-zy-lb{justify-content: space-between;}
.ty-flex-zy-jz{justify-content: center;}
.ty-flex-sx-jz{ align-items: center;} 
.ty-flex-wrap{flex-wrap: wrap;}




/*响应式字体*/
html {  font-size: calc(0.8rem + 0.3vw);}
/*768~以上的继承下面样式*/
@media (min-width: 768px) {
   html { font-size: 16px; }
}


@media (min-width: 1360px) {
    .container{ max-width: 1320px; margin:0px auto;} 
}
.container{ padding-right: 20px; padding-left: 20px;} 
.row { margin-right: -20px; margin-left: -20px;}  
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9{padding-right: 20px; padding-left: 20px;}
    


:root{
  --theme-color:#0071e3;
  --title-font-size:3.2rem;
}





/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4781511 */
  src: url('//at.alicdn.com/t/c/font_4781511_ee6sx3cy6q.woff2?t=1734158255505') format('woff2'),
       url('//at.alicdn.com/t/c/font_4781511_ee6sx3cy6q.woff?t=1734158255505') format('woff'),
       url('//at.alicdn.com/t/c/font_4781511_ee6sx3cy6q.ttf?t=1734158255505') format('truetype');
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 1.1rem;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/*harmonyos*/
@font-face {
    font-family: 'harmonyos_bold';
    src: url('../fonts/harmonyos_sans_bold-webfont.woff2') format('woff2'),
         url('../fonts/harmonyos_sans_bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




@font-face {
    font-family: 'harmonyos';
    src: url('../fonts/harmonyos_sans_regular-webfont.woff2') format('woff2'),
         url('../fonts/harmonyos_sans_regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}




/*效果*/

.zoom-one {
  -webkit-animation: zoom-one 15s infinite linear;
  animation: zoom-one 15s infinite linear;
}


@keyframes zoom-one {
    0% {
        -webkit-transform: scale(0.85);
        transform: scale(0.85)
      }
    
      50% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
      }
    
      100% {
        -webkit-transform: scale(0.85);
        transform: scale(0.85)
      }
}



/*===============================db_xs==========================*/
.db_xs { width: 50px; height: 50px; transition: all 0.36s ease;  position: fixed; right: 30px; bottom: 60px; z-index: 9999; border-radius: 50%; display: none; background: url(../images/xs.png) no-repeat center center; background-color: rgba(0, 0, 0, 0.5);}
.db_xs:hover{ background-color: var(--theme-color);}


/*加载动画*/
.preloader{height:100vh;width:100%;position:fixed;background:var(--white);top:0;left:0;right:0;bottom:0;z-index:9999999999}
.preloader-orbit-loading{position:relative;top:50%;left:50%;width:100px;height:100px;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%;perspective:780px;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%)}
.preloader-orbit-loading .cssload-inner{position:absolute;width:100%;height:100%;box-sizing:border-box;-o-box-sizing:border-box;-ms-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;border-radius:50%;-o-border-radius:50%;-ms-border-radius:50%;-webkit-border-radius:50%;-moz-border-radius:50%}
.preloader-orbit-loading .cssload-inner.cssload-one{left:0;top:0;animation:cssload-rotate-one 1.15s linear infinite;-o-animation:cssload-rotate-one 1.15s linear infinite;-ms-animation:cssload-rotate-one 1.15s linear infinite;-webkit-animation:cssload-rotate-one 1.15s linear infinite;-moz-animation:cssload-rotate-one 1.15s linear infinite;border-bottom:5px solid var(--theme-color)}
.preloader-orbit-loading .cssload-inner.cssload-two{right:0;top:0;animation:cssload-rotate-two 1.15s linear infinite;-o-animation:cssload-rotate-two 1.15s linear infinite;-ms-animation:cssload-rotate-two 1.15s linear infinite;-webkit-animation:cssload-rotate-two 1.15s linear infinite;-moz-animation:cssload-rotate-two 1.15s linear infinite;border-right:5px solid var(--theme-color)}
.preloader-orbit-loading .cssload-inner.cssload-three{right:0;bottom:0;animation:cssload-rotate-three 1.15s linear infinite;-o-animation:cssload-rotate-three 1.15s linear infinite;-ms-animation:cssload-rotate-three 1.15s linear infinite;-webkit-animation:cssload-rotate-three 1.15s linear infinite;-moz-animation:cssload-rotate-three 1.15s linear infinite;border-top:5px solid var(--theme-color)}
@keyframes cssload-rotate-one{0%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}
100%{transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}
}@-o-keyframes cssload-rotate-one{0%{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}
100%{-o-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}
}@-ms-keyframes cssload-rotate-one{0%{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}
100%{-ms-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}
}@-webkit-keyframes cssload-rotate-one{0%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}
100%{-webkit-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}
}@-moz-keyframes cssload-rotate-one{0%{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(0deg)}
100%{-moz-transform:rotateX(35deg) rotateY(-45deg) rotateZ(360deg)}
}@keyframes cssload-rotate-two{0%{transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}
100%{transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}
}@-o-keyframes cssload-rotate-two{0%{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}
100%{-o-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}
}@-ms-keyframes cssload-rotate-two{0%{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}
100%{-ms-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}
}@-webkit-keyframes cssload-rotate-two{0%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}
100%{-webkit-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}
}@-moz-keyframes cssload-rotate-two{0%{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(0deg)}
100%{-moz-transform:rotateX(50deg) rotateY(10deg) rotateZ(360deg)}
}@keyframes cssload-rotate-three{0%{transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}
100%{transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}
}@-o-keyframes cssload-rotate-three{0%{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}
100%{-o-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}
}@-ms-keyframes cssload-rotate-three{0%{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}
100%{-ms-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}
}@-webkit-keyframes cssload-rotate-three{0%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}
100%{-webkit-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}
}@-moz-keyframes cssload-rotate-three{0%{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(0deg)}
100%{-moz-transform:rotateX(35deg) rotateY(55deg) rotateZ(360deg)}
}


 /*搜索*/
.search-input-area{transition:all 500ms ease;visibility:hidden;transform:translateY(-100%);opacity:0;position:fixed;top:0;left:0;width:100%;padding:32px 0; background:white;box-shadow:1px 1px 50px rgba(0,0,0,0.46);z-index:13;display:flex;justify-content:center;align-items:center;}
.search-input-inner{display:flex;align-items:center;position:relative;}
.search-input-inner .input-div{width:100%;position:relative; overflow: hidden;}
.search-input-inner .input-div .input5{padding:15px 20px;}
.search-input-inner input{background:#f8f8f8;padding:0px 20px;padding-left:20px; height: 45px; line-height: 45px;  border-radius:6px;width:100%;font-size:1rem;position:relative; outline: none;}
.search-input-area.show{visibility:visible;transform:inherit;opacity:1;}
.search-input-inner .search-close-icon i { color: #040404;font-size: 2rem; cursor: pointer;}
.search-close-icon{ padding-left: 20px;}
.search-an{ position: absolute; right: 0; top: 0px;font-size: 1.5rem;  right: 0px; padding: 0px 20px; height: 45px; line-height: 45px; background: #000; color: #fff; border-radius:0px 6px 6px 0px; cursor: pointer; transition: all 0.36s ease;}
.search-an:hover{background: var(--theme-color);}



 /*顶部*/
 .ix-header{border-top:solid 8px #000;border-bottom: 1px solid #ececec; transition:all 0.36s ease; z-index:11;  background:#fff;}
 .ix-links a{color:#333;  transition:all 0.36s ease;}
 .ix-links a i{font-size:22px; transition:all 0.36s ease;}
 .ix-links a:hover{transform:scale(1.05);}
 .ix-links a:hover i{color:var(--theme-color); transform:scale(1.02);}
 .ix-logo-links{height:70px; text-align:center; position:relative; justify-content: center; align-items: center; width:100%; }
 .ix-logo-links .ix-logo img{max-height:32px;}
 .ix-links{position:absolute;right:0; top:50%;  transform: translateY(-50%);}
 .ix-nav ul{gap:40px; height:30px;  justify-content: center; align-items: center;}
 .ix-nav ul li a{font-size:12px; height:30px; display:block; position:relative; line-height:30px; font-weight:bold;}
  .ix-nav ul li a::after{width:0%; height:0px; background:var(--theme-color); margin:0px auto; transition:all 0.36s ease; content:''; display:block; left:0; right:0; bottom:0; position:absolute; transition:all 0.36s ease;}
 .ix-nav ul li a:hover::after{width:0%;}
 .ix-links{gap:20px;}
 .ix-top{transition:all 0.36s ease;}
 .ix-nav{ width:100% !important; }


 .ix-header.active{position:fixed; width:100%;}


/*产品列表*/
.ix-pro .pro-list-wp:nth-last-child(1){margin-bottom:0px;}
.pro-list-wp{margin-bottom:10px; width: 100%; position: relative;  overflow: hidden;}
.pro-list{max-width:1920px; margin:0px auto; height:600px;  position:relative; text-align:center; transition:all 0.36s ease; overflow:hidden;}
.pro-list a{display:block; width:100%; height:100%;}
.pro-list .pl-tit{position:absolute; left:0; right:0; color:#fff; top:60px; margin:0px auto;}
.pro-list .pl-tit .t1{font-size:56px; line-height:120%;}
.pro-list .pl-tit .t2{font-size:22px;}
.pro-list .pl-tit .t3{padding:5px 20px; background:var(--theme-color); border-radius:15px; display:inline-block; margin:0px auto; transition:all 0.36s ease;}
/*.pro-list:hover{transform:scale(1.08);}*/
.pro-list .pl-tit .t3:hover{background:#000;}

/*产品详情*/
.pg-pro-tit .t1{font-size:24px; font-weight:bold; color:#000;}
.pg-pro-tit .t2{gap:20px;     align-items: center;}
.pg-pro-tit .t2 a{position:relative; color:#666; transition:all 0.36s ease; font-size:14px; text-transform: uppercase; display:block; line-height: 34px; height:30px;}
.pg-pro-tit .t2 a.buy{background:var(--theme-color); color:#fff;border-radius:50px; padding:0px 10px; }
.pg-pro-tit .t2 a.active::before{width:100%; position:absolute; bottom:0; left:0; height:1px; background:var(--theme-color); content:'';}
.pg-pro-tit .t2 a:hover{color:var(--theme-color);}
.pg-pro-tit .t2 a.buy:hover{color:#fff; background:#000;}

.pg-wz.active{position: fixed; width: 100%; background:#fff; top:0; border-bottom: 1px solid #ececec;}

/*底部*/
.ix-footer{background:url(../images/ix_foot_bj.jpg)no-repeat top center; background-size:cover; background:#1a1a1a;}
.ix-foot-xx .ifx-t1 img{ max-height:40px;}
.ix-foot-xx .ifx-t2{padding-top:30px; line-height:180%; width:90%;}
.ix-foot-xx .ifx-t2 ul li{padding-left:40px;  color:#fff; position:relative; padding-bottom:1rem; min-height:30px;}
.ix-foot-xx .ifx-t2 ul li i{font-size:30px; color:#fff; display:block; top:0; left:0; position:absolute;}
.ix-foot-mess .col-md-4, .ix-foot-mess .col-md-12{padding-left:0.625rem; padding: right 0.625rem;}

.ix-foot-copy{border-top:solid 1px #262626; padding:15px 0px; color:#fff;}
.ix-foot-copy a{color:#fff;}
.ix-foot-copy a:hover{color:var(--theme-color);}

.pcx-t1{  background: #fff; height: 340px; padding: 20px;}
.pcx-t1 h1{ color:#333; font-size: 16px; font-weight: bold; }
.pcx-t1 p{ padding-top: 8px; line-height: 180%; color:#666; font-size: 14px;}
.pcx-t1 span{ display: block; color:#999; padding-bottom: 15px; font-size: 12px;}
.pcx-input input{ height: 50px; border: none; line-height: 50px; width: 100%; border-radius:6px; padding: 0px 20px; outline: none; font-size: 16px; background-color: #f5f5f5;}
.pcx-input{ padding-bottom: 20px;}
.pcx-input input.input-an{ background-color: var(--theme-color); font-size:18px; transition:all 0.36s ease;}
.pcx-textarea{ padding-bottom:20px; font-size: 14px;}
.pcx-textarea textarea{ height: 100px; border: none; border-radius:6px;  line-height: 40px; width: 100%; padding: 0px 20px; outline: none; font-size: 16px; background-color: #f5f5f5;}
.input-an{ color:#fff; outline: none; background: var(--theme-color);}
.input-an:hover{ background: var(--theme-color); color:#fff;}
.pcx-input input.input-an:hover{background: var(--theme-color);}
.pcx-input:last-child(3){padding-bottom: 0px;}

#shareButton:hover{transition:all 0.36s ease;}
#shareButton:hover{color:var(--theme-color);}

/*==分页==*/
.paginator{ font-family:Arial; text-align: center; }
.paginator a { transition: all 0.36s ease;  width:36px; color: #666;  text-align:center; height:36px; line-height:36px; display:inline-block; text-decoration:none;  background:#f5f5f5;  margin:0 5px; color:#666; transition: all 0.36s ease;}
.paginator a i {display:inline-block; font-size: 16px; line-height:34px; }
.paginator a:hover { background:var(--theme-color) !important; color:#fff !important; }
.paginator span.cpb { transition: all 0.36s ease; text-align:center;  width:36px; height:36px;  line-height:36px; display:inline-block; color:#fff; background:var(--theme-color); margin-left: 5px; }
.paginatordis{ display:none;}



/*内页产品显示*/
.pg-pro{gap:10px;}
.pg-pro .pro-list-wp{width:calc((100% - 10px)/2); margin-bottom:0px;}
.pg-pro #ab1.pro-list-wp{width:100%;}

.pro-detail{min-height:200px;}
.pro-detail img{display:inline-block;}



/*弹窗留言*/
#tcmess{display:none;}
#tcmess .pcx-input input{background:#f5f5f5; border:solid 1px #e0e0e0;}
#tcmess .pcx-textarea textarea{background:#f5f5f5; border:solid 1px #e0e0e0;}

#tcmess .pcx-input input.input-an{background-color:var(--theme-color);}
#tcmess .pcx-input input.input-an:hover{background:#333;}
.pcx-input input.input-an:hover{background:#333;}


/*分享按钮*/
#shareButton{text-align:center;}
.shareButton-a1{ width: 100%;font-size:18px; color:#333; margin:0px auto; padding: 0.5rem 1.5rem; background-color: #fff; border-radius: 0.8rem; border: 1px solid #d5d9d9; box-shadow: 0 2px 5px 0 rgba(213,217,217,.5); cursor: pointer;max-width: 280px;}
.shareButton-a2{color:#666;}
.shareButton-a1:hover{background:#f0f2f2;}
/*单端显示*/
html, body{
    min-width: 1280px;
}

@media (max-width: 1280px) {
 
    .wp{width: 1240px; width: 1240px; padding-right: 20px; padding-left: 20px;}
}

@media (max-width: 1080px) {

   
    }
@media (max-width: 780px) {
  
}
@media (max-width: 640px) {
  
 

}