@charset "utf-8";
/* CSS Document */

*{margin: 0px;padding: 0px;}
body{font-family: 'harmonyos', Arial, Verdana, Geneva, sans-serif;color: #333;background-color: #fff; line-height: 150%; 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%; max-width:480px; margin:0px auto;}
a{color: #333;text-decoration: none;}
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: 1200px;}
.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;  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:#000;
  --title-font-size:3.2rem;
}



@font-face {
  font-family: "iconfont"; /* Project id 4800289 */
  src: url('../font2/iconfont.woff2?t=1736125969569') format('woff2'),
       url('../font2/iconfont.woff?t=1736125969569') format('woff'),
       url('../font2/iconfont.ttf?t=1736125969569') 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:#fff;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:1rem 0.625rem; 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: 1.5rem; 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{ z-index: 12; background: #fff; height: 60px; transition:all 0.36s ease; border-bottom:solid 1px #e0e0e0;}
.ix-header.active{position:fixed; width:100%;}

.ix-header .container{height:60px; align-items: center;}

.ix-logo img{margin-top: 10px; height: 40px;}
.ix-nav{line-height:60px; height: 60px;}
.ix-nav>ul>li{ float:left;  position:relative; color:#fff; display:block;  width:calc(100% - 0px); line-height:initial;border-bottom: 1px solid #ebebeb; }
.ix-nav>ul>li>a{ padding:15px 0px; padding-left:35px;  width:calc(100% - 40px);}
.ix-nav li:nth-last-child(1){padding-right:0px;}
.ix-nav li>a{color:#b3b3b3; transition:all 0.6s ease;}

.ix-nav li>i{font-size:12px; display:inline-block; padding-left:10px;}
.ix-nav li i.yy{padding-left:0px; font-size:20px; vertical-align:middle; padding-right:10px;}
.ix-nav li i.mobile-an{cursor:pointer;}
.nax-an{ display:none;}
.ix-nav li:nth-child(1){display: none;}
.ix-nav li.active a{font-weight:bold; color:#fff;}

/*二级导航*/
.ix-nav li .subnav{width:100% !important; left:0 !important; right:0!important;  position:absolute; top:150px;  opacity:0; visibility:hidden; transition:all 0.36s ease; background:#fff; box-shadow:0px 0px 10px rgba(0,0,0,0.2); width:100%; text-align:center; border-radius:6px; overflow:hidden;}
.ix-nav li:hover .subnav, .ix-nav li .subnav.active{ opacity:1; visibility:visible; top:80px; }
.ix-nav li .subnav a{line-height:160%; display: block; font-size:1.12rem; padding:10px 10px; transition:all 0.36s ease;}
.yy-abc{display:none;}
/*=========导航-end=========*/


/*二级*/
.ix-nav li .subnav{ opacity:initial; visibility:initial; transition:initial; display:none; position:initial; box-shadow:none; margin-bottom:10px; }
.ix-nav li .subnav a{padding-left:20px; text-align:left;}
.ix-nav li i.mobile-an{ transition:all 0.36s ease; transform:rotate(270deg); font-size: 14px; color:#b3b3b3; position:absolute; right:5px;  width: 30px; top:10px; cursor: pointer; padding-left:0px; height: 30px; text-align: center; line-height:30px;}
.ix-nav li .mobile-an.active{transform:rotate(360deg); }
.ix-nav li:nth-child(1){padding:20px 0px; color:#666; text-align:right; display:block;}
.ix-nav li i.yy{display:none;}
.ix-nav li .subnav-2 a:after{content:none;}
.ix-nav li .subnav-2{position:relative; padding-left:25px;}
.ix-nav li .subnav .subnav-2>a{padding:5px 20px; padding-right: 40px; }
.ix-nav li  .subnav i.mobile-an{}

/*三级导航*/
.ix-nav li .mobile-an2.active{transform:rotate(360deg); }
.ix-nav li i.mobile-an2{ transition:all 0.36s ease; transform:rotate(270deg); font-size: 14px; color:#b3b3b3; position:absolute; right:5px;  width: 30px; top:0px; cursor: pointer; padding-left:0px; height: 30px; text-align: center; line-height:30px;}
.ix-nav li .subnav-3{display: none; width:100% !important;opacity:0; visibility:hidden; background:#fff; width:100%; text-align:center; border-radius:6px; overflow:hidden; }
.ix-nav li .subnav-3 a{padding:8px 0px; color:#999; padding-left:30px; padding-right:20px;}
.ix-nav li:hover .subnav-3, .ix-nav li .subnav-3.active{ opacity:1; visibility:visible; }

/*头部*/
.ix-header .ix-logo img{height:28px; margin-top: 0px;}
.nax-an{ display:block; font-size:30px; color:#333; }
.ix-nav{width: 300px; height: 100%;  background: #fff; position: fixed; top: 0;  left: -380px;  z-index: 2000; overflow-x: hidden;  overflow-y: scroll;  transition: all .3s;  -webkit-transition: all .3s;}
.ix-nav ul li a{ color:#333;   display:inline-block; font-size:1.2rem;}
.ix-nav li a:after{ width:10px; height:10px; border:solid 1px #d8d8d8; position:absolute; left:15px; top:20px; content:''; border-radius:10px;}
.ix-nav.open{left:0;}
.ix-yy{display:none;}
.yy-abc{display:block;}
.nav-colose{ padding-right: 15px;}
.top-search{font-size:1.8rem;}


/*移动端黑色层*/
.nav-bg { display: none;background-color: rgba(0,0,0,.7); position: fixed; right: 0; left:0; top: 0; width: 100%; height: 100%;  z-index: -1; transition:all .3s; -webkit-transition:all .3s;}
.nav-bg.open{opacity: 1; z-index: 111; display: block;}

/*=======移动端响应式导航-END======*/


/*图标显示*/
.ix-icon ul{gap:0.8rem;}
.ix-icon ul li{width:calc((100% - 3.2rem)/5);}
.ix-icon ul li .ii-img img{border-radius:50%;}
.ix-icon ul li .ii-tit{text-align:center; font-size:0.9rem;}

/*通用头部*/
.ix-head {text-align:center;}
.ix-head .t1{font-size:1.5rem; font-weight:bold;}
.ix-head .t2{color:#999; padding-top:0.625rem;}

/*产品推荐*/
.swiper-pagination-bullet-active{background:#000;}
.pro-box{gap:0.8rem;}
.pro-box .pro-list{width:calc((100% - 0.8rem)/2);}
.color-span{display: inline-block;width: 12px; height: 12px; margin-right: 5px; border:solid 1px #ebebeb;}
/*底部*/
.ix-footer{ text-align:center; font-size:0.9rem; color: #999;}



/*移动端*/
 /*通用*/
  .pt6{ padding-top: 1.875rem;}
  .pb6{ padding-bottom: 1.875rem;}
  .pt8{ padding-top: 1.875rem;}
  .pb8{ padding-bottom: 1.875rem;}
  .pt4{padding-top: 1.25rem;}
 .pb4{padding-bottom: 1.25rem;}
 .pt10{ padding-top: 2.5rem;}
 .pb10{ padding-bottom: 2.5rem;}
 .row {margin-left: -0.4rem;margin-right: -0.4rem;}
 .container{padding-right: 0.8rem;  padding-left: 0.8rem;}
 .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: 0.4rem;padding-left: 0.4rem;}

 /*客服*/
 .left-kf{overflow: hidden; position:fixed; right:0.8rem; bottom:10%; z-index:11111; height:2.5rem; line-height:2.5rem; background:#fff; border-radius:20px; padding-right:0.8rem; box-shadow:0px 0px 10px rgba(0,0,0,0.2);}
  .left-kf i{font-size:1.5rem; color:#000; width:2.5rem; height:2.5rem; line-height:2.5rem; background:#fde101; display:inline-block; text-align:center; border-radius:20px; margin-right:0.325rem;}