.process-list{display:flex;justify-content: space-between;flex-wrap:wrap;margin-bottom:50px;}
.process-list .process-item{width:155px;height:155px;text-align: center;padding:15px;border-radius: 50%;background:#f4f4f4;position:relative;transition: all .4s linear;z-index:2;}
.process-list .process-item .process-item-inner{width:100%;height:100%;overflow: hidden;position: absolute;left: 0;top: 0;border-radius: 50%;z-index:-1;cursor: pointer;}
.process-list .process-item .process-item-inner:before{content: "";display: block;width: 100%;height: 0;transition: 0.4s all linear;background:var(--color);border-radius: 50%;position: absolute;left: 0;top: 0;z-index: -1;}
.process-list .process-item .num{position:absolute;left:50%;transform: translateX(-50%);bottom:-20px;z-index:2;color:#fff;background:var(--color);width:35px;height:35px;border-radius: 50%;display: inline-block;text-align: center;line-height:35px;border:1px solid #fff}
.process-list .process-item:hover .process-item-inner:before{height:100%;}
.process-list .process-item:hover .img img{filter: brightness(360);}
.process-list .process-item:hover .tit{color:#fff;z-index:2}
@media (max-width:1024px){.process-list .process-item{width:190px;height:190px;margin-bottom:50px}}