.process .heading-cate {
  margin-left: 0;
}

.process .process-flex-sticky {
  position: sticky;
  top: 2.4rem;
}

.process .process-content {
  --spacing: 6rem;
  --sizeStep: 4rem;
  padding-left: var(--spacing);
  position: relative;
}

.process .process-progress {
  position: absolute;
  left: calc(var(--sizeStep) / 2);
  top: 50%;
  transform: translateY(-50%);
  border-right: 0.2rem dashed #D9D9D9;
  height: var(--heightProgress);
}

.process .process-progress .on-progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.2rem;
  height: var(--stepProgress);
  background: linear-gradient(to right, #FF8110, #FFC76C);
}

.process .process-list {
  margin-top: 4.8rem;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.process .process-item {
  --pd: 3.2rem;
  color: #656565;
  transition: 0.3s;
  position: relative;
}

.process .process-item-num {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(calc(var(--spacing) * -1), -50%);
  width: var(--sizeStep);
  height: var(--sizeStep);
  padding: 0.8rem;
  border-radius: 50%;
  border: 0.1rem solid #999;
  text-align: center;
  font-size: 2rem;
  font-weight: 600;
  color: #999;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  background-color: #fafafa;
}

.process .process-item-wrap {
  border-radius: 1.6rem;
  transition: 0.3s;
  padding: var(--pd);
}

.process .process-item .tt {
  transition: 0.3s;
  margin-bottom: 1.2rem;
}

.process .process-item.active {
  color: var(--sdn-color-text);
}

.process .process-item.active .process-item-num {
  background: var(--Secondary-Gradient-2, var(--sdn-color-secondary-gradient));
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.05);
  color: #FFF;
  border-color: transparent;
}

.process .process-item.active .process-item-wrap {
  background: var(--Neutral-White, #FFF);
  /* Shadow/2 */
  box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.05);
}

.process .process-item.active .tt {
  background: var(--sdn-color-primary-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (max-width: 1200px) {
  .process .process-progress .on-progress {
    height: 100% !important;
  }

  .process .process-item {
    color: var(--sdn-color-text);
  }

  .process .process-item .tt {
    background: var(--sdn-color-primary-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  .process .process-item .process-item-wrap {
    background: var(--Neutral-White, #FFF);
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.05);
  }

  .process .process-item .process-item-num {
    background: var(--Secondary-Gradient-2, var(--sdn-color-secondary-gradient));
    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.05);
    color: #FFF;
    border-color: transparent;
  }

  .process-flex-img {
    width: 40%;
  }

  .process-flex-content {
    width: 60%;
  }
}

@media (max-width: 993px) {
  .process .process-list {
    margin-top: 3.2rem;
  }

  .process-flex-img {
    display: none;
  }

  .process-flex-content {
    width: 100%;
  }
}

@media (max-width: 576px) {
  .process .process-item {
    --pd: 1.6rem;
  }

  .process .process-content {
    --spacing: 4rem;
    --sizeStep: 3rem;
  }

  .process .process-item-num {
    font-size: 1.4rem;
  }

  .process .process-item .tt {
    margin-bottom: 0.8rem;
  }

  .process .process-list {
    gap: 1.6rem;
  }
}

.process .bg-circle::before,
.process .bg-circle::after {
  position: absolute !important;
  content: "" !important;
  z-index: -1;
  pointer-events: none;
  width: 126.2rem;
  height: 126.2rem;
  border-radius: var(--radius-circle);
}

.process .bg-circle::before {
  top: -26rem;
  background: radial-gradient(50% 50%, rgba(255, 145, 46, 0.25) 0%, rgba(255, 145, 46, 0) 100%);
  right: calc(100% - 50rem);
}

.process .bg-circle::after {
  left: calc(100% - 68rem);
  bottom: calc(100% - 56.2rem);
  background: radial-gradient(50% 50%, rgba(37, 167, 223, 0.25) 0%, rgba(37, 167, 223, 0) 100%);
}