.hotproduct{padding:4% 0px}
.hotproduct-l{width:23%;padding-right:3%}
.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:calc(33.3333% - 8px);margin:0px 12px 12px 0px}
.hotpro-list li>a{display:block;overflow:hidden;position:relative}
.hotpro-box{box-sizing:border-box;position:absolute;bottom:-60px;background:rgba(42,42,42,.85);color:#FFF;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 #EEE;overflow:hidden;text-align:center}
.hotpro-img img{width:100%}
.hotpro-title{line-height:22px;font-size:16px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;max-height:44px}
.hotpro-box i,.hotpro-box em{font-size:2-px}
.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.1)}
.hotprocate{border-left:1px solid #BFBFBF;margin:30px 0px 60px;padding-right:10%}
.hotprocate li{line-height:20px;padding:10px 0px 10px 20px;position:relative;font-size:16px;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)}
.home-title{font-size:26px;font-weight:var(--fontbold6);color:#000;text-transform:capitalize}
.hotproduct .home-more{line-height:20px;display:block;width:160px;font-size:13px;border:1px solid var(--color);text-align:center;color:var(--color);padding:8px 0px;text-transform:uppercase;transition:all .2s ease-in-out}
.hotproduct .home-more:hover{background:var(--color);color:#FFF}
i.icon-arrow-long-r:before{content:"\e68b"}
@media (max-width:1024px){.hotproduct .flex{flex-wrap:wrap}
.hotproduct-l{width:100%;padding-bottom:6%}
.hotproduct-r{width:100%}
.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}}
@media (max-width:768px){.hotproduct-l .home-title{text-align:center}
.hotprocate,.hotproduct-l .home-more{display:none}}