.oLa-steps {
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.oLa-steps--h {
    padding: 4px 0;
}

.oLa-steps--h.oLa-steps--2 .oLa-step {
    width: 50%;
}

.oLa-steps--h.oLa-steps--3 .oLa-step {
    width: 33.33333%;
}

.oLa-steps--h.oLa-steps--4 .oLa-step {
    width: 25%;
}

.oLa-steps--h.oLa-steps--5 .oLa-step {
    width: 20%;
}

.oLa-steps--h .oLa-step {
    float: left;
    position: relative;
}

.oLa-steps--h .oLa-step:nth-child(1) {
    z-index: 6;
}

.oLa-steps--h .oLa-step:nth-child(2) {
    z-index: 5;
}

.oLa-steps--h .oLa-step:nth-child(3) {
    z-index: 4;
}

.oLa-steps--h .oLa-step:nth-child(4) {
    z-index: 3;
}

.oLa-steps--h .oLa-step:nth-child(5) {
    z-index: 2;
}

.oLa-steps--h .oLa-step:nth-child(6) {
    z-index: 1;
}

.oLa-steps--h .oLa-step--title {
    font-size: 32rpx;
    display: block;
    text-align: center;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-top: 10px;
}

.oLa-steps--h .oLa-step--title-desc {
    font-size: 24rpx;
    margin-top: 2px;
}

.oLa-steps--h .oLa-steps--line {
    width: 100%;
    height: 2px;
    background: #bfbfbf;
    position: absolute;
    left: -50%;
    top: 0;
    z-index: 1;
}

.oLa-steps--h .oLa-step--done .oLa-step--title,
.oLa-steps--h .oLa-step--done .oLa-step--title-desc {
    color: #1f1f1f;
}

.oLa-steps--h .oLa-step--done .oLa-steps--line {
    background: #5797FB;
}

.oLa-steps--h .oLa-step--icons {
    position: absolute;
    top: -3px;
    left: 50%;
    -webkit-transform: translate(-50%,0);
    background-color: #fff;
    z-index: 3;
}

.oLa-steps--h .oLa-step--circle {
    display: block;
    position: relative;
    width: 4px;
    height: 4px;
    border: 2px solid #bfbfbf;
    background-color: #bfbfbf;
    border-radius: 50%;
}

.oLa-steps--h .oLa-step--done .oLa-step--icons {
    top: -4px;
}

.oLa-steps--h .oLa-step--done .oLa-step--circle {
    width: 6px;
    height: 6px;
    border: 2px solid #5797FB;
    background-color: #fff;
}

.oLa-steps--v .oLa-step {
    float: left;
    position: relative;
    width: 100%;
    padding: 16rpx 0;
}

.oLa-steps--v .oLa-step--title {
    font-size: 32rpx;
    display: block;
    color: #999;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin-left: 32px;
}

.oLa-steps--v .oLa-step--title-desc {
    font-size: 24rpx;
    margin-top: 2px;
}

.oLa-steps--v .oLa-steps--line {
    width: 2px;
    height: 100%;
    background: #bfbfbf;
    position: absolute;
    left: 15px;
    top: -50%;
    z-index: 1;
}

.oLa-steps--v .oLa-step--icons {
    position: absolute;
    top: 50%;
    left: 12px;
    -webkit-transform: translate(0,-50%);
    background-color: #fff;
    z-index: 3;
}

.oLa-steps--v .oLa-step--circle {
    display: block;
    position: relative;
    width: 4px;
    height: 4px;
    border: 2px solid #bfbfbf;
    background-color: #bfbfbf;
    border-radius: 50%;
}

.oLa-steps--v .oLa-step--done .oLa-step--title,
.oLa-steps--v .oLa-step--done .oLa-step--title-desc {
    color: #1f1f1f;
}

.oLa-steps--v .oLa-step--done .oLa-steps--line {
    background: #5797FB;
}

.oLa-steps--v .oLa-step--done .oLa-step--icons {
    left: 11px;
}

.oLa-steps--v .oLa-step--done .oLa-step--circle {
    width: 6px;
    height: 6px;
    border: 2px solid #5797FB;
    background-color: #fff;
}