.step
{
    ul
    {
        display: flex;
        max-width: 500px;
        margin-left: auto;
        margin-right:auto;
        margin-bottom: 100px;
        li
        {
            width: calc(100% / 3);
            position: relative;
            i
            {
                width: 30px;
                height: 30px;
                display: block;
                margin-left: auto;
                margin-right:auto;
                border-radius: 100%;
                background: #f1f1f1;
                margin-bottom: 10px;
                text-align: center;
                line-height: 30px;
                position: relative;
                z-index:1;

            }
            span
            {
                display: block;
                text-align: center;
            }
            &.active
            {
                i
                {
                    background: #333;
                    color:#fff;
                }
            }
            &::after
            {
                content:' ';
                height:1px;
                background: #f1f1f1;
                display: block;
                position: absolute;
                top:14px;
                left:0px;
                width: 100%;
            }
            &:first-child
            {
                &::after
                {
                    left:50%;
                    width: 50%;
                }
            }
            &:last-child
            {
                &::after
                {
                    left:0;
                    width: 50%;
                }
            }
        }
    }
}