.compaign-container{
  padding: 50px 0;
  text-align: center;
}
.campaign{
  margin-bottom: 40px;
  position: relative;
}
.campaign>div{
  min-height: 50px;
  max-height: 150px;
  height: 1000px;
  position: relative;
}

.campaign>div::before {
  content: " ";
  width: 14px;
  height: 14px;
  background-color: #aaa;
  position: absolute;
  right: calc(50% - 7px);
  top: -7px;
  border-radius: 50%;
  z-index: 100;
}
.campaign>div:last-of-type::after {
  content: " ";
  width: 14px;
  height: 14px;
  background-color: #ff8000;
  position: absolute;
  right: calc(50% - 7px);
  bottom: -7px;
  border-radius: 50%;
  z-index: 100;
}



.campaign>div>span{
  position: absolute;
  text-align: left;
}
.campaign .line{
  margin: 0 auto;
  display: inline-block;  
  height: 100%;
  width: 2px;
  background-color: #aaa;
  left: calc(50% - 1px);
  top:0;
  z-index: 90;
}

.campaign>div.fill .line,
.campaign>div.fill::before,
.campaign>div.fill::after{
  background: #ff8000;
}

.campaign .sign{
  left:calc(50% + 10px);
  top:-5px;
  line-height: 15px;
}
.campaign .sign .title{
  display: block;
  font-size: 9px;
}

.campaign .sign-count{
  position: absolute;
    right: calc(50% + 11px);
    background: #ff8000;
    padding: 1px 16px 1px 10px;
    border-radius: 50px;
    color: #fff;
    font-size: 13px;
    z-index: 200;
    bottom: 0;
}

.campaign .sign-count::before {
  content: " ";
  width: 14px;
  height: 14px;
  transform: rotate(-45deg);
  background-color: #ff8000;
  position: absolute;
  right: -1px;
  top: 4px;
  border-radius: 4px 4px 0 4px;
}

.campaign .cpb {
  width: 2px;
  background: #ff8000;
  left: calc(50% - 1px);
  display: block;
  position: absolute;
  bottom: 0;
  z-index: 200;
}