.hotproduct{padding:4% 0px}
.hotproduct .l-wrap{display:flex;flex-wrap:wrap}
.hotproduct-l{width:23%;padding-right:3%}
.hotproduct-r{width:77%;position:relative;overflow:hidden}
.hotproduct .unify .title{text-align:left}
@media (min-width:501px){.hotproduct .unify .title{font-size:28px;}}
.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.33333% - 8px);margin:0px 12px 12px 0px}
.hotpro-list li>a{display:block;overflow:hidden;position:relative}
.hotpro-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:24px}
.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{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-more{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}
.home-more:hover{background:var(--color);color:#FFF}
@media (max-width:1024px){.highpro-l,.highpro-r,.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}}
@media (max-width:768px){.hotprocate,.home-more{display:none}
.hotproduct .unify .title{text-align:center}}