.process-style1 {  
  .process-title {
    position: relative;
    max-width: 290px; 
    width: 100%;
  }
  
  .process-number {
    width: 40px;
    height: 40px;
    line-height: 44px;
    color: $white-color;
    background-color: $theme-color2;
    text-align: center;
    font-size: 16px;
    font-weight: 900;
    border-radius: 50%;
    vertical-align: middle;
    display: inline-block;
    margin: 0 35px 0 0;
  }
  
  .process-text {
    flex: 1;
    margin: 0;
  }
  
  .process-item,
  .process-content {
    &:before {
      content: '';
      position: absolute;
      left: 16px;
      top: 5px;
      width: 8px;
      height: calc(100% + 5px);
      background-color: $theme-color2;
      z-index: -1;
      opacity: 0.10;
      display: none;
    }
  }

  .process-content {
    display: flex;
    flex: 1;
    position: relative;
    padding-bottom: 55px;

    &:before {
      display: block;
    }
  }

  .process-item {
    display: flex;

    &:last-child {
      .process-item,
      .process-content {
        &:before {
          display: none;
        }
      }

      .process-content {
        padding-bottom: 0;
      }
    }
  }

}


@include ml {
  .process-style1 {
    .process-title {
      max-width: 250px;
      font-size: 20px;
    }
  }
}


@include sm {
  .process-style1 {
    .process-item {
      display: block;
      padding: 0 0 0 55px;
      position: relative;
      
      &:not(:last-child) {
        margin: 0 0 30px 0;
        
        &:before {
          display: block;
          height: calc(100% + 50px);
        }
      }
    }

    .process-title {
      max-width: 100%;
      padding-top: 5px;
      margin-bottom: 10px;
    }

    .process-number {
      position: absolute;
      top: 0;
      left: 0;
    }

    .process-content {
      display: block;
      padding: 0;
      position: static;
      
      &:before {
        display: none;
      }
    }
  }
}