.process-content ul {
    position: relative
}

.process-content li {
    padding-left: 88px;
    padding-bottom: 32px;
    position: relative
}

.process-content ul li:before,.process-content ul li:after {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    width: 2px;
    height: 100%;
    background-color: var(--border-color-gray5)
}

.process-content ul li:after {
    max-height: 0;
    transition: all 1.5s ease;
    background: linear-gradient(180deg,#1FB3FD -6.67%,#8087F2 20.75%,#E957E7 50.45%,#F359A5 77.87%,#FE5C5D 107.58%)
}

.process-content ul li:last-child:before,.process-content ul li:last-child:after {
    display: none
}

.process-content li .count,.process-content li .count-hover {
    text-align: center;
    background-color: #fff;
    color: #fff;
    -webkit-text-stroke: 1px var(--border-color-gray5)
}

.process-content li .count-hover {
    letter-spacing: 1px;
    padding-inline:2px;z-index: 50;
    max-height: 0;
    overflow: hidden;
    background: linear-gradient(90deg,#1FB3FD -6.67%,#8087F2 20.75%,#E957E7 50.45%,#F359A5 77.87%,#FE5C5D 107.58%);
    -webkit-background-clip: text;
    -webkit-text-stroke: 3px transparent;
    color: #fff
}

.process-content li .anime-box {
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    background-color: #fff;
    z-index: -1
}

.animate-count-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 46px;
    height: 39px
}

.process-content li.animate-count-hover .anime-box {
    z-index: 5
}

.process-content li p {
    margin-bottom: 0
}

.process-content li .count-hover {
    max-height: 0;
    transition: max-height 6s ease
}

.process-content li:after {
    max-height: 0
}

.process-content li.animate-count-hover .count-hover {
    max-height: 300px
}

.process-content li.animate-line:after {
    max-height: 100%
}