ul,li {
    list-style: none;
    margin: 0px;
    padding: 0px;
}

.bar-box {
    position: relative;
    top: -6px;
    left: 9px;
    z-index: 9;
}

.bar-content {
    position: relative;
}

.bar-bg {
    width: 100%;
    height: 6px;
    background: #ebebeb;
    position: relative;
}

.bar-color {
    width: 0%;
    height: 7px;
    position: absolute;
    left: 0px;
    top: 0px;
}
.pipStep .bar-color { background: linear-gradient(to right,#17d084,#25a5c5);}
.globalStep .bar-color { background: linear-gradient(to right,#ffc12d,#ff811b);}

/* .bar-circle-ul {width: calc(62vh);} */

#content .bar-circle-ul li, .bar-circle-ul li{
    float: left;
    padding: 0;
    margin-top: 0;
}
.bar-circle-ul li div {
    width: 20px;
    height: 20px;
    text-align: center;
    line-height:20px;
    display: inline-block;
    border-radius: 50%;
    background: #ddd;
    color: #252525;
    position: relative;
    z-index: 10;
}
.bar-circle-ul li .li-div::before {content: ''; display: inline-block; width: 10px;height: 10px;
   background: #fff; border-radius: 50%; position: absolute;top:50%; left:50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%)}
.bar-circle-ul li div span { position: absolute; top: -23px;  color: #7c7c7c; left: -113%; width: 65px;}
.bar-circle-ul li div .mess-span{ top: 17px;}
.luStepMes .bar-content, .perSteps .bar-content{height: 40px;}
.luStepMes .bar-box{top: -23px;left:12px;}
.luSteps .bar-box{left:9px;}
/* .luStepMes .bar-circle-ul {text-align: center;} */
.perSteps .bar-box{top: -15px;left:20px;}
.perSteps .bar-circle-ul li div,.luStepMes .bar-circle-ul li div {margin-left: 12px;}
.perSteps {width: calc(100% - 15%);}