.hotproduct{overflow:hidden;background: #fcfcfc;padding:5% 0;}
.hotproduct .hotprocate{margin-top:20px;}
.hotproduct-l{width:23%;}
.hotproduct-r{width:77%;position:relative;overflow:hidden}
.hotprocate{border-left:1px solid #BFBFBF;margin:10px 0px 30px;padding-right:10%}
.hotprocate li{padding:10px;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;display:flex;align-items:center;justify-content:center;}
.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:1367px){.hotproduct-l{width:25%}
.hotproduct-r{width:75%}}
@media(max-width:1024px){.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{padding-right:0px}
.hotproduct-l,.hotproduct-r{width:100%}
.hotproduct-l{padding-right:0px}}
@media(max-width:768px){.hotproduct-l .home-more{display:none}
.hotproduct-l .home-title{text-align:center}
.hotprocate{display:none}}
@media(max-width:415px){.hotprocate li{left:-1px}
.hotprocate{margin:20px 0px}
.hotprocate li{margin-bottom:0px}}
.hotpro-list-act{transform:scale(1);position:static;opacity:1}
#indproduct .hotproduct-r{width:100%}
.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}
@media(max-width:1366px){.hotpro-list li{width:31%}}
.hotpro-list li>a{display:block;overflow:hidden;position:relative}
.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)}
@media (max-width:1024px){.home-animal .lists{grid-template-columns:repeat(2,1fr)}}
.hotpro-list-act{transform:scale(1);position:static;opacity:1}
.hotproduct .container.flex{display:block;margin:0 auto}
.hotproduct .hotproduct-l{width:100%;margin-right:0}
.hotproduct-r{width:100%;margin:0 0 30px}
.hotpro-list li>a{text-align:center;border:1px solid var(--color);height:100%;display:flex;flex-direction:column;align-items:center;overflow:hidden}
.hotproduct .home-title{text-align:center;color:var(--fontcolor);}
.hotpro-box{width:100%;padding:2% 0;background:var(--color);color:#fff;flex:1}
.hotproduct  .hotprocate{display:flex;align-items:center;justify-content:center;width:100%;padding-right:0}
.hotprocate li{flex:1;text-align:center;border:1px solid #DEDEDE;border-radius:27px;margin-right:2%;color:#666;box-sizing:border-box}
.hotprocate li:last-child{margin-right:0}
.hotprocate{border-left:none}
.hotprocate .hotprocate-act{background:var(--color);color:#fff !important}
.hotprocate .hotprocate-act,.hotprocate li:hover{color:unset}
.hotprocate li::before{display:none}
.hotproduct .swiper-wrapper{align-items:stretch}
.hotpro-list li{margin-bottom:0 !important;height:auto !important}
.hotpro-img{overflow:hidden}
@media (max-width:768px){.hotproduct .hotprocate{flex-wrap:wrap;justify-content:space-between}
.hotprocate li{width:48%;flex:initial;margin-bottom:2%;margin-right:0}}
@media (max-width:500px){.hotprocate li,.hotpro-title{font-size:14px}
.hotpro-box{display:flex;align-items:center;justify-content:center;padding:5px;box-sizing:border-box}}