.procate{display:flex;flex-wrap:wrap;justify-content:space-between}
.procate li{width:49%;background:#fff;box-shadow:0 10px 30px 0 rgba(11,3,6,.05);border-radius:10px;padding:20px;display:flex;align-items:center;justify-content:space-between;flex-direction:row-reverse;flex-wrap:wrap;margin-right:0}
.procate li .info{width:48%;padding:20px 0;border-top:none;text-align:left}
.procate li .info .title{font-size:var(--fontsize20);font-weight:var(--fontbold6);transition:all .1s linear;line-height:1.4}
.procate li .info .line{margin:1em 0;width:100%;height:2px;background:#e8e8e8;position:relative}
.procate li .info .line::before{content:"";position:absolute;left:0;top:0;height:2px;width:60px;background:var(--bgcolor);transition:all .3s linear}
.procate li .info .text{color:var(--introcolor)}
.procate li .info .more{width:30px;height:30px;border-radius:50%;background:var(--bgcolor);color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-top:20px}
.procate li .img{width:45%;border-radius:10px;overflow:hidden;background:#f7f7f7;border:1px solid #eee}
.procate li .img img{width:100%;height:100%;object-fit:cover;transition:all .1s linear}
.procate li:hover .info .title{color:var(--color)}
.procate li:hover .info .line::before{width:100%}
.procate li:hover .info .more{transform:rotate(-45deg)}
.procate li:hover .img img{transform:scale(1.02)}
@media (max-width:1024px){.procate li .info .title{font-size:var(--fontsize16)}
}
@media (max-width:768px){.procate li{width:100%;margin-top:1em}
.procate li .info .title{font-size:var(--fontsize18)}
}
@media (max-width:540px){.procate li .info{padding:0}
.procate li .info .more{display:none}
}