.hy-form {
  width: 660px;
  margin: 50px auto 0;
}

.hy-form .col-form-label {
  text-align: right;
}

.hy-form__label-tip {
  font-size: 13px;
  color: #B2AEAE;
}

.form-check-label {
  color: #717171;
}


.hy-steps {
  display: flex;
}

.hy-step {
  flex-shrink: 1;
  cursor: pointer;
}

.hy-step.is-finish .hy-step__title {
  color: #056CE2;
}

.hy-step.is-finish .hy-step__head {
  color: #056CE2;
  border-color: #056CE2;
}

.hy-step.is-finish+:not(.is-finish) .hy-step__line-inner {
  transition-delay: 0ms;
  border-width: 1px;
  width: 50%;
  border-color: #056CE2;
}

.hy-step.is-finish+.hy-step.is-finish .hy-step__line-inner {
  width: 100%;
}

.hy-step:first-of-type .hy-step__line {
  display: none;
}

.hy-step__head {
  position: relative;
  width: 100%;
  color: #B7BDC4;
  border-color: #B7BDC4;
}

.hy-step__line {
  height: 2px;
  top: 11px;
  left: -50%;
  right: 50%;
  position: absolute;
  background-color: #E9EAEC;
}

.hy-step__line-inner {
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: inherit;
  transition: .15s ease-out;
  box-sizing: border-box;
  width: 0;
  height: 0;
}



.hy-step__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  font-size: 14px;
  box-sizing: border-box;
  background: #fff;
  transition: .15s ease-out;
}

.hy-step__icon.is-text {
  border-radius: 50%;
  border: 2px solid;
  font-weight: bold;
  font-size: 18px;
  color: inherit;
  border-color: inherit;
}

.hy-step__title {
  line-height: 25px;
  font-size: 17px;
  margin-top: 5px;
}

<!--0.00025606155395508-->