.homeproductcate>ul{justify-content:space-between}
.homeproductcate .productcate-list li{position:relative;overflow:hidden;width:25%;border-right:solid 1px #EEEEEE}
.homeproductcate .productcate-list li:last-child{border-right:none}
.homeproductcate .productcate-img img{width:100%;display:block}
.homeproductcate .productcate-hot{position:absolute;right:0px;top:0px;background:var(--color);border-radius:0 0 0 16px;color:#FFFFFF;padding:6px 10px;z-index:1}
.homeproductcate .productcate-hot strong{font-weight:var(--fontbold4);font-size:var(--fontsize20);display:block}
.homeproductcate .productcate-box{position:absolute;left:100%;top:0px;background:rgba(0,0,0,.4);color:#FFFFFF;width:50%;height:100%;display:flex;flex-direction:column;justify-content:flex-end;padding:20px 6%;transition:left .3s ease-in-out}
.homeproductcate .productcate-box-title{font-size:var(--fontsize18);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden;line-height:1.5;max-height:75px}
.homeproductcate .productcate-box-more{font-size:var(--fontsize16);font-weight:var(--fontbold4);color:var(--color);padding:20px 0px}
.homeproductcate .productcate-list li:hover .productcate-box{left:50%}
@media (max-width:1024px){.homeproductcate .productcate-box{left:50%;background:rgba(0,0,0,.5);padding:.5rem 6%}
.homeproductcate .productcate-box-more{padding:10px 0px}}
@media (max-width:768px){.homeproductcate .productcate-box-more{padding:20px 0px}}
@media (max-width:415px){.homeproductcate .productcate-box{padding:40px 3% 20px}
.homeproductcate .productcate-box-more{font-size:var(--fontsize14);padding:10px 0px 20px}}
@media (max-width:380px){.homeproductcate .productcate-box-title{font-size:var(--fontsize16)}
.homeproductcate .productcate-box-more{padding-bottom:10px}}

.highpro{background:#111111;display:flex;flex-wrap:wrap;justify-content: space-between;}
.highpro-l,.highpro-r{width:50%}
.highpro-l img{display:block;width:100%;height:100%;object-fit: cover;}
.highpro-r{background:#111111;padding:4% 5%;color:#FFFFFF}
.highpro-r .home-title{color:#FFFFFF;font-weight:var(--fontbold6);text-align:left;}
.highpro-text{font-size:var(--fontsize16);color:#DDDDDD;line-height:1.7;margin:10px 0px 30px}
.highpro-authentication{display:flex;flex-wrap:wrap}
.highpro-authentication li{list-style: none;width:50%;position:relative;padding-left:20px;font-size:var(--fontsize16);color:#DDDDDD;margin-bottom:15px}
.highpro-authentication li::before{content:'';display:block;width:8px;height:8px;background:var(--color);border-radius:50%;position:absolute;left:0px;top:8px}
.highpro-step{display:flex;justify-content:space-between;margin-bottom:5%}
.highpro-r-box::before{content:'';width:88%;height:1px;background:#434343;left:6%;top:20px;position:absolute}
.highpro-step li{list-style: none;position:relative;cursor:pointer;text-align:center}
.highpro-step-num{width:40px;height:40px;background:#252525;border:1px solid #626262;border-radius:50%;text-align:center;line-height:40px;font-size:var(--fontsize18);color:#FFFFFF;margin:0px auto 18px}
.highpro-step-title{font-size:var(--fontsize18)}
.highpro-step-act .highpro-step-title{color:var(--color)}
.highpro-step-act .highpro-step-num{background:var(--color);border-color:var(--color)}
.highpro-l .swiper-pagination{bottom:20px}
@media (max-width:1024px){.highpro-l,.highpro-r,.hotproduct-l,.hotproduct-r{width:100%}}
@media (max-width:500px){.highpro-r-box::before{width:80%;left:10%}
.highpro-authentication li,.highpro-step,.highpro-step-num{margin-bottom:10px}
.highpro-text{margin:10px 0px}}

.hotproduct{overflow: hidden;padding:4% 0;}
.hotproduct .l-wrap{display:flex;justify-content: space-between;flex-wrap:wrap;}
.hotproduct-l{width:23%;padding-right:3%}
.hotproduct-l .home-title{text-align:left;}
.hotproduct-r{width:77%;position:relative;overflow:hidden}
.hotpro-list{display:flex;flex-wrap:wrap;transition:transform .8s ease-in-out,opacity .2s ease-in-out;transform:scale(0);position:absolute;top:0px;left:0px;opacity:0;}
.hotpro-list-act{transform:scale(1);position:static;opacity:1}
.hotpro-list li{width:32%;margin:0px 20px 20px 0px;list-style: none;}
@media(max-width:1366px){.hotpro-list li{width:31%}}
.hotpro-list li>a{display:block;overflow:hidden;position:relative}
.hotpro-box{position:absolute;bottom:-100%;background:rgba(42,42,42,.85);color:#FFFFFF;padding:8px 15px;width:100%;display:flex;justify-content:space-between;left:0px;align-items:center;transition:all .2s ease-in-out}
.hotpro-img{border:1px solid #EEEEEE;overflow:hidden;text-align:center}
.hotpro-img img{width:100%;aspect-ratio: 1 / 1;object-fit: contain;}
.hotpro-title{font-size:var(--fontsize16);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:50px}
.hotpro-box i,.hotpro-box em{font-size:var(--fontsize24)}
.hotpro-list li:nth-child(3n){margin-right:0px}
.hotpro-list li:nth-child(n+4){margin-bottom:0px}
.hotpro-list li:hover .hotpro-box{bottom:0px}
.hotpro-list li:hover img{transform:scale(1.05)}
.hotprocate{border-left:1px solid #BFBFBF;margin:20px 0px 50px;padding-right:10%}
.hotprocate li{padding:10px 0px 10px 20px;position:relative;font-size:var(--fontsize16);color:var(--fontcolor);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:all .2s ease-in-out}
.hotprocate li::before{content:'';width:2px;height:100%;position:absolute;top:0px;left:0px;background:var(--color);opacity:0;transition:all .2s ease-in-out}
.hotprocate .hotprocate-act::before,.hotprocate li:hover::before{opacity:1}
.hotprocate .hotprocate-act,.hotprocate li:hover{color:var(--color)}
@media (max-width:1366px){.hotproduct-l{width:25%}
.hotproduct-r{width:75%}}
@media (max-width:1024px){.hotproduct-l,.hotproduct-r{width:100%}
.hotproduct-l{padding-bottom:6%}
.hotpro-list li{width:49%;margin-right:2%}
.hotpro-list li:nth-child(3n){margin-right:2%}
.hotpro-list li:nth-child(2n){margin-right:0px}
.hotprocate,.hotproduct-l{padding-right:0px}
.hotpro-box{bottom:0px}
.hotprocate,.hotproduct-l{padding-right:0px}}
@media (max-width:768px){.hotproduct-l{display:none;}
.hotprocate,.hotproduct-l .home-more{display:none;}
.hotproduct-l .home-title{text-align:center}}
@media (max-width:450px){.hotprocate li{left:-1px}
.hotprocate{margin:20px 0px}
.hotprocate li{margin-bottom:0px}}
.home-certi{margin-top:3%}
.home-certi img{width:100%;display:block;}
@media (max-width:768px){.home-certi{margin-top:20px;}}