.bar {
  padding: 0 30%;
  overflow: hidden;
}

.success {
  background-color: #12CEB3;
  width: 300%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.box {
  width: 100%;
  height: 8px;
  position: relative;
  background-color: #12CEB3;

  .exception,
  .breakdown {
    height: 100%;
    position: absolute;
  }

  .breakdown {
    z-index: 2;
    background-color: #FE5850;
  }

  .exception {
    z-index: 1;
    background-color: #F5A623;
  }

  

  .scaleBlackLeft,
  .scaleBlackRight {
    position: absolute;
    width: 6px;
    height: 100%;
    background: #0D1A2B;
    top: 0;
    z-index: 20;
  }

  .scaleBlackLeft {
    left: -3px;
  }

  .scaleBlackRight {
    right: -3px;
  }

  
}
.scale {
  position: absolute;
  top: 18px;
  line-height: 1.2;
  font-size: 24px;
  word-break: keep-all;
  transform: translateX(-50%);

  &.top {
    top: inherit;
    bottom: 18px;
  }
}
.current {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  // height: 120%;
  width: 9px;
  height: 22px;
  // background: url("@/assets/current.png") no-repeat center;
  background-size: 100% 100%;
  // .currentBar {
  //   height: 100%;
  //   width: 4px;
  //   background-color: #fff;
  // }
}

.sectionOut{
  display: flex;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0; 
}