.dh-steps {
  font-size: 0;
  width: 100%;
  line-height: 1.5; }
  .dh-steps-item {
    position: relative;
    display: inline-block;
    vertical-align: top; }
    .dh-steps-item .dh-steps-status-finish {
      background-color: red; }
  .dh-steps-tail {
    position: absolute;
    left: 0;
    width: 100%;
    top: 13px;
    padding: 0 10px; }
    .dh-steps-tail i {
      display: inline-block;
      vertical-align: top;
      background: #e9e9e9;
      height: 1px;
      border-radius: 1px;
      width: 100%;
      position: relative; }
      .dh-steps-tail i:after {
        position: absolute;
        content: "";
        top: 0;
        width: 0;
        background: #e9e9e9;
        height: 100%;
        opacity: 0; }
  .dh-steps-head {
    position: relative;
    display: inline-block;
    vertical-align: top; }
    .dh-steps-head-inner {
      display: block;
      background-color: rgba(255, 255, 255, 0.5);
      width: 26px;
      height: 26px;
      line-height: 23px;
      text-align: center;
      border-radius: 26px;
      font-size: 14px;
      margin-right: 8px;
      -webkit-transition: background-color .3s ease,border-color .3s ease;
      transition: background-color .3s ease,border-color .3s ease; }
      .dh-steps-head-inner .dh-steps-icon {
        color: #23c132;
        line-height: 26px; }
  .dh-steps-main {
    position: relative;
    display: inline-block;
    vertical-align: top; }
  .dh-steps-title {
    font-size: 14px;
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 700;
    display: inline-block;
    padding-right: 10px; }