.dh-steps {
  width: 100%;
  display: flex; }
  .dh-steps-item {
    display: flex;
    flex-direction: row;
    align-items: center; }
  .dh-steps-step {
    padding: 0 8px; }
  .dh-steps-head {
    width: 32px;
    height: 32px;
    line-height: 32px;
    display: inline-block;
    position: relative; }
    .dh-steps-head-inner {
      display: inline-block;
      width: 100%;
      height: inherit;
      background-color: #23c132;
      text-align: center;
      color: #fff;
      font-size: 14px;
      font-weight: 400;
      border-radius: 50%; }
      .dh-steps-head-inner-finish {
        display: inline-block;
        width: 100%;
        height: inherit;
        background-color: #23c132;
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: 400;
        border-radius: 50%; }
  .dh-steps-main {
    display: inline-block;
    margin-left: 6px;
    font-size: 14px; }
  .dh-steps-tail {
    flex: 1;
    height: 4px;
    background: #e9e9e9;
    position: relative; }
    .dh-steps-tail__inline {
      width: 0;
      height: 100%;
      background-color: #23c132; }
      .dh-steps-tail__inline[data-slide="true"] {
        -webkit-animation: keyframes_inline_start 1s cubic-bezier(0.23, 1, 0.32, 1) 0.1s forwards;
        animation: keyframes_inline_start 1s cubic-bezier(0.23, 1, 0.32, 1) 0.1s forwards; }