body{margin:0;padding:0;background-color:#fff;font-family:'Source Sans Pro',sans-serif}
.flex{display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;}
.justify-between{justify-content:space-between}
.my-orange-btn{background-color: #FFFFFF;color: #333333;border:1px solid #1b1b1b;transition: all 0.3s ease-in-out;}
.my-orange-btn:hover{background-color: #f18101;color: #fff;border:1px solid #cf7003;}
#header{background-color:#3f8dbf;float:left;width:100%;height:50px;color:#fff;line-height:50px;position:fixed;left:0;top:0;z-index:1}
#header a{color:#fff;text-decoration:none;display:block;font-size:15px}
#header-left{float:left;height:50px}
#header-left:hover #header-left-icon{background-color:#3f8dbf}
#header-left:hover #header-left-text{background-color:#599bc8}
#header-left-icon{float:left;height:50px;width:50px;text-align:center;background-color:#35759f;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}
#header-left-icon a{font-size:25px}
#header-left-text{float:left;height:50px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}
#header-left-text a{padding-left:20px;padding-right:20px}
#header-right{float:right;height:50px}
#header-right:hover #header-right-icon{background-color:#3f8dbf}
#header-right:hover #header-right-text{background-color:#599bc8}
#header-right-icon{float:right;height:50px;width:50px;text-align:center;background-color:#35759f;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}
#header-right-text{float:right;height:50px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s}
#header-right-text a{padding-right:20px;padding-left:20px}
.wrapper{width:100%;float:left}
.wrapper-inner{width:100%;margin-right:auto;margin-left:auto;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.wrapper-inner-buttons{width:100%;float:left;margin-top:50px;text-align:center}
.wrapper-inner-buttons a{background-color:#3f8dbf;line-height:35px;padding-right:15px;padding-left:15px;margin:10px;display:inline-block;text-align:center;text-decoration:none;color:#fff;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s;border-radius:calc(35px / 2)}
.wrapper-inner-buttons a.current{background-color:#f5d76e;color:#d35400}
.wrapper-inner-buttons a:hover{background-color:#35759f;color:#fff}
.mobile{width:100%;position:fixed;top:0;left:0;z-index:999;min-width:320px;max-width:720px}
.mobile-inner{width:100%;background-color:#fafafa}
.mobile-inner p{color:#676767;line-height:25px;font-size:16px;margin:0}
.mobile-inner-header{background-color:#fff;width:100%;height:58px}
.mobile-inner-header-icon{color:#fff;height:58px;font-size:25px;text-align:center;float:right;width:50px;-webkit-transition:background .5s;-moz-transition:background .5s;-o-transition:background .5s;transition:background .5s;position:absolute;right:0}
.mobile-inner-header-icon:hover{background-color:rgba(255,255,255,.2);cursor:pointer}
.mobile-inner-header-icon span{position:absolute;left:calc((100% - 25px)/ 2);top:calc((100% - 1px)/ 2);width:25px;height:2px;background-color:#000}
.mobile-inner-header-icon span:first-child{transform:translateY(4px) rotate(0)}
.mobile-inner-header-icon span:nth-child(2){transform:translateY(-4px) rotate(0)}
.mobile-inner-header-icon-click span:first-child{animation-duration:.5s;animation-fill-mode:both;animation-name:clickfirst}
.mobile-inner-header-icon-click span:nth-child(2){animation-duration:.5s;animation-fill-mode:both;animation-name:clicksecond}
.temp-wrap{width:100%;padding:50px 0;position:relative;overflow:hidden}
.temp-wrap .container{position:relative;width:auto!important;height:auto!important;width:96%;max-width:1400px!important;margin:auto!important}
.temp-wrap .image-box{width:100%}
.temp-wrap .image-box img{display:inline-block;width:100%;vertical-align:middle;border-radius: 16px;overflow:hidden}
.home-video img{width:100%;border-radius: 16px;overflow: hidden;}
.home-products{padding-top:0;width:100%}
.home-products .items{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between}
.home-products .item{width:25%;box-sizing:border-box}
.home-products .product-card{margin:10px;border:1px solid #e5e5e5;border-radius:10px}
.home-products a{display:block}
.home-products .content{padding:10px}
.home-products .item img{display:block;width:100%;padding:10px;box-sizing:border-box;border-bottom:1px solid #e5e5e5}
.home-products .item p{font-size:16px;line-height:26px;text-align:center}
.home-products .price{font-size:16px;line-height:30px;text-align:center}
@media screen and (max-width:960px){.temp-wrap .container{width:100%;max-width:100%!important;padding:0 10px;box-sizing:border-box}
.home-products .item{width:50%}
}
@media screen and (max-width:450px){.temp-wrap{padding:30px 0}
.home-products .item{width:100%}
.home-products .item img{padding:40px}
}
@keyframes clickfirst{0%{transform:translateY(4px) rotate(0)}
100%{transform:translateY(0) rotate(45deg)}
}
@keyframes clicksecond{0%{transform:translateY(-4px) rotate(0)}
100%{transform:translateY(0) rotate(-45deg)}
}
.mobile-inner-header-icon-out span:first-child{animation-duration:.5s;animation-fill-mode:both;animation-name:outfirst}
.mobile-inner-header-icon-out span:nth-child(2){animation-duration:.5s;animation-fill-mode:both;animation-name:outsecond}
@keyframes outfirst{0%{transform:translateY(0) rotate(-45deg)}
100%{transform:translateY(-4px) rotate(0)}
}
@keyframes outsecond{0%{transform:translateY(0) rotate(45deg)}
100%{transform:translateY(4px) rotate(0)}
}

.scaa{display:block;position:relative;width:50px;height:50px;margin-bottom:16px}
.scaa img{width:100%;height:100%}
.scaadiv{width:64px;height:320px;position:fixed;top:40%;right:15px;z-index:2}
.scaacs:hover .erweimaa{display:block}
.scaatel{position:absolute;top:5px;right:55px;background:#666;color:#fff;font-size:16px;padding:10px 20px;display:none;white-space:nowrap}
.scatel:hover .scaatel{display:block}
.erweimaa{width:142px;position:absolute;right:80px;top:0;display:none}
@media screen and (max-width:768px){.scaa{width:45px;height:45px;margin-bottom:10px}
.scaadiv{width:45px;height:165px;top:42%;right:15px}
.erweimaa{width:100px}
.scaimg{width:45px}
}
@media screen and (max-width:450px){.scaimg{width:35px}
.scaa{width:35px;height:35px;margin-bottom:5px}
.scaadiv{width:35px;height:120px;top:18%}
.erweimaa{width:70px;right:40px}
.scaatel{font-size:14px;padding:5px 10px;right:40px}
}
.mobilepl {display: none;}
.mobile-inner-nav{background-color:rgba(0,0,0,.9);width:100%;position:absolute;top:58px;left:0;padding-top:30px;display:none;min-height:calc(100vh - 58px);z-index:1000}
.main-category-wrap{display:inline-block;line-height:50px;text-decoration:none;width:90%;margin-left:5%;color:#fff!important;border-bottom:solid 1px rgba(255,255,255,.3);font-weight:300}
.main-category-title{color:#fff;}
.two-level-category{display:block;height:50px; line-height:50px;text-decoration:none;width:95%;padding-left: 5%; margin-left:0%;color:#fff!important;border-top:solid 1px rgba(255,255,255,.3);font-size:14px;font-weight:300;overflow: hidden;}
.mobile-inner-nav a:hover{color:rgba(255,255,255,.4);border-bottom:solid 1px rgba(255,255,255,.2)}
.htmleaf-container{height:58px}
.main-category-wrap .main-category{ justify-content: space-between; align-items: center;} 
.main-category-wrap .down-icon{display: flex;}
.language-icon{position: absolute;right: 0;top: 12px;width: 18px;height: 18px;line-height: 18px;transition: transform 0.3s ease;}
.down-icon{transition: transform 0.3s ease;}
.language-icon-click {transform: rotate(180deg);}



/* --- 2. 容器 (Containers) --- */
*, *::before, *::after { box-sizing: border-box; }
.bg-white{background-color: #fff;}
.border-radius-16{border-radius: 16px;}
.container-fluid {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.container {
  width: 100%;
  max-width: 1440px;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

/* 随着屏幕变大，限制容器的最大宽度 */
/* @media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
@media (min-width: 1400px) { .container { max-width: 1320px; } } */

/* --- 3. 栅格行 --- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

[class*="col-"] {
  position: relative;
  width: 100%; /* 手机端默认全宽 */
  padding-right: 15px;
  padding-left: 15px;
  flex-shrink: 0;
}

/* --- 4. 12列栅格数据 (Mobile First 逻辑) --- */

/* [XS] 默认 - 针对所有尺寸，通常是手机 (Extra Small) */
.col-1  { width: 8.333333%; }
.col-2  { width: 16.666667%; }
.col-3  { width: 25%; }
.col-4  { width: 33.333333%; }
.col-5  { width: 41.666667%; }
.col-6  { width: 50%; }
.col-7  { width: 58.333333%; }
.col-8  { width: 66.666667%; }
.col-9  { width: 75%; }
.col-10 { width: 83.333333%; }
.col-11 { width: 91.666667%; }
.col-12 { width: 100%; }
.p-50{padding: 50px;}
.p-80{padding: 80px;}
.mb-20{margin-bottom: 20px;}
.py-50{padding-top: 50px;padding-bottom: 50px;}
.py-80{padding-top: 80px;padding-bottom: 80px;}
.mt-50{margin-top: 50px;}


/* margin */
.m-5{margin:5px!important}
.m-t-5{margin-top:5px!important}
.m-r-5{margin-right:5px!important}
.m-b-5{margin-bottom:5px!important}
.m-l-5{margin-left:5px!important}
.m-10{margin:10px!important}
.m-tb-10{margin:10px 0!important}
.m-lr-10{margin:0 10px!important}
.m-t-10{margin-top:10px!important}
.m-r-10{margin-right:10px!important}
.m-b-10{margin-bottom:10px!important}
.m-l-10{margin-left:10px!important}
.m-15{margin:15px!important}
.m-tb-15{margin:15px 0!important}
.m-lr-15{margin:0 15px!important}
.m-t-15{margin-top:15px!important}
.m-r-15{margin-right:15px!important}
.m-b-15{margin-bottom:15px!important}
.m-l-15{margin-left:15px!important}
.p-5{padding:5px!important}
.p-t-5{padding-top:5px!important}
.p-10{padding:10px!important}
.p-tb-10{padding:10px 0!important}
.p-lr-10{padding:0 10px!important}
.p-t-10{padding-top:10px!important}
.p-r-10{padding-right:10px!important}
.p-b-10{padding-bottom:10px!important}
.p-l-10{padding-left:10px!important}
.p-15{padding:15px!important}
.p-tb-15{padding:15px 0!important}
.p-lr-15{padding:0 15px!important}
.p-t-15{padding-top:15px!important}
.p-r-15{padding-right:15px!important}
.p-b-15{padding-bottom:15px!important}
.p-l-15{padding-left:15px!important}
.p-20{padding:20px!important}
.p-b-20{padding-bottom:20px!important}
.p-l-20{padding-left:20px!important}
.p-30{padding:30px!important}
.p-l-30{padding-left:30px!important}
.p-l-40{padding-left:40px!important}
.p-50{padding:50px!important}
.p-l-50{padding-left:50px!important}


/* [SM] 平板竖屏 (Small >= 576px) */
@media (min-width: 576px) {
  .col-sm-1 { width: 8.333333%; }
  .col-sm-2 { width: 16.666667%; }
  .col-sm-3 { width: 25%; }
  .col-sm-4 { width: 33.333333%; }
  .col-sm-5 { width: 41.666667%; }
  .col-sm-6 { width: 50%; }
  .col-sm-7 { width: 58.333333%; }
  .col-sm-8 { width: 66.666667%; }
  .col-sm-9 { width: 75%; }
  .col-sm-10 { width: 83.333333%; }
  .col-sm-11 { width: 91.666667%; }
  .col-sm-12 { width: 100%; }
  .p-sm-20{padding: 20px;}
  .mb-sm-0{margin-bottom: 0px;}
  .mb-sm-20{margin-bottom: 20px;}
  .ft-sm-20{font-size: 20px;}
}

/* [MD] 平板横屏/小屏电脑 (Medium >= 768px) */
@media (min-width: 768px) {
  .col-md-1 { width: 8.333333%; }
  .col-md-2 { width: 16.666667%; }
  .col-md-3 { width: 25%; }
  .col-md-4 { width: 33.333333%; }
  .col-md-5 { width: 41.666667%; }
  .col-md-6 { width: 50%; }
  .col-md-7 { width: 58.333333%; }
  .col-md-8 { width: 66.666667%; }
  .col-md-9 { width: 75%; }
  .col-md-10 { width: 83.333333%; }
  .col-md-11 { width: 91.666667%; }
  .col-md-12 { width: 100%; }
  .p-md-20{padding: 20px;}
}

/* [LG] 普通桌面 (Large >= 992px) */
@media (min-width: 992px) {
  .col-lg-1 { width: 8.333333%; }
  .col-lg-2 { width: 16.666667%; }
  .col-lg-3 { width: 25%; }
  .col-lg-4 { width: 33.333333%; }
  .col-lg-5 { width: 41.666667%; }
  .col-lg-6 { width: 50%; }
  .col-lg-7 { width: 58.333333%; }
  .col-lg-8 { width: 66.666667%; }
  .col-lg-9 { width: 75%; }
  .col-lg-10 { width: 83.333333%; }
  .col-lg-11 { width: 91.666667%; }
  .col-lg-12 { width: 100%; }
  .mb-lg-0{margin-bottom: 0px;}
  .mb-lg-20{margin-bottom: 20px;}
  .p-lg-50{padding: 50px !important;}
}

/* [XL] 大屏桌面 (Extra Large >= 1200px) */
@media (min-width: 1200px) {
  .col-xl-1 { width: 8.333333%; }
  .col-xl-6 { width: 50%; }
  .col-xl-12 { width: 100%; }
  /* 此处可根据需要补全 1-12 */
}

/* [XXL] 超大屏 (Extra Extra Large >= 1400px) */
@media (min-width: 1400px) {
  .col-xxl-1 { width: 8.333333%; }
  .col-xxl-6 { width: 50%; }
  .col-xxl-12 { width: 100%; }
}