.process-section {
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 11vh;
}
.process-section .container {
  padding-left: var(--distance);
  padding-right: var(--distance);
  padding-top: 11.6vh;
}
.process-section .container .title {
  font-size: 4.6rem;
  line-height: 1.2;
  margin-bottom: 5.7vh;
  padding-right: var(--distance);
}
.process-section .container .content-container {
  display: flex;
  gap: 32px;
}
.process-section .container .content-container .layout-left {
  flex: 1;
}
.process-section .container .content-container .layout-left .media {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: var(--radius);
  overflow: hidden;
}
.process-section .container .content-container .layout-left .media img {
  width: 100%;
  object-fit: cover;
  height: 100%;
}
.process-section .container .content-container .layout-right {
  flex: 1;
  padding-top: 7.9vh;
}
.process-section .container .content-container .layout-right .process-items {
  width: auto;
  margin: 0 8vw;
  margin-bottom: 12rem;
  margin-bottom: 7.4rem;
  position: relative;
}
.process-section .container .content-container .layout-right .process-items .line {
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: auto;
  background-color: var(--scolor);
  left: 20px;
  top: 20px;
  bottom: 20px;
  z-index: 2;
  transition: 0.3s linear;
}
.process-section .container .content-container .layout-right .process-items .process {
  display: flex;
  align-items: center;
  gap: 5.4rem;
  margin-bottom: 7rem;
  position: relative;
  z-index: 3;
}
.process-section .container .content-container .layout-right .process-items .process .index {
  text-align: center;
  line-height: 4rem;
  width: 4rem;
  height: 4rem;
  font-size: 1.8rem;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: var(--scolor);
}
.process-section .container .content-container .layout-right .process-items .process .description {
  font-size: 4.6rem;
  line-height: 1;
  font-weight: 300;
}
.process-section .container .content-container .layout-right .btn-container {
  margin: 0 8vw;
  width: auto;
  display: flex;
  justify-content: center;
}
.process-section .container.not .content-container .layout-right .process-items .process .description {
  opacity: 0;
  transition: opacity 0.3s;
}
.process-section .container.not .content-container .layout-right .process-items .process.show .description {
  opacity: 1;
}
body:not(.wp-admin) .process-section .container .layout-left.wow,
body:not(.wp-admin) .process-section .container .title.wow {
  transform: translateX(-10%);
  opacity: 0;
  transition: transform 1s;
}
body:not(.wp-admin) .process-section .container .layout-left.wow.animated,
body:not(.wp-admin) .process-section .container .title.wow.animated {
  transform: translate(0);
  opacity: 1;
}
body:not(.wp-admin) .process-section .container .process.wow {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s;
}
body:not(.wp-admin) .process-section .container .process.wow.animated {
  opacity: 1;
  transform: translate(0);
}
.process-section .container .content-container .layout-right .btn-container .btn {
  border: 1px solid var(--color);
}
@media all and (max-width: 1441px) {
  .process-section .container .title {
    font-size: var(--h2);
  }
  .process-section .container .content-container .layout-right {
    --size: 3.2rem;
  }
  .process-section .container .content-container .layout-right .process-items {
    margin-bottom: 9.4rem;
    margin-bottom: 5rem;
  }
  .process-section .container .content-container .layout-right .process-items .line {
    left: calc(var(--size) / 2);
  }
  .process-section .container .content-container .layout-right .process-items .process .index {
    width: var(--size);
    height: var(--size);
    font-size: 1.4rem;
    line-height: var(--size);
  }
  .process-section .container .content-container .layout-right .process-items .process .description {
    font-size: 2rem;
  }
  .process-section .container .content-container .layout-right .btn-container .btn {
    padding: 0.6rem 5rem;
    display: inline;
  }
}
@media all and (max-width: 769px) {
  .process-section {
    padding-bottom: 4.1vh;
  }
  .process-section .container .title {
    font-size: var(--h2);
  }
  .process-section .container .content-container {
    flex-direction: column;
  }
  .process-section .container .content-container .layout-right .btn-container .btn {
    padding: 1.5rem 7.4rem;
  }
}
@media all and (max-width: 769px) {
  .process-section {
    padding-bottom: 4.1vh;
  }
  .process-section .container .title {
    font-size: var(--h2);
  }
  .process-section .container .content-container {
    flex-direction: column;
  }
  .process-section .container .content-container .layout-right .btn-container .btn {
    padding: 1.5rem 7.4rem;
  }
}
@media all and (max-width: 500px) {
  .process-section {
    padding-bottom: 10em;
  }
  .process-section .container .title {
    font-size: 3.2rem;
  }
  .process-section .container .content-container {
    flex-direction: column;
  }
  .process-section .container .content-container .layout-right .btn-container {
    padding-left: 0;
    justify-content: center;
  }
  .process-section .container .content-container .layout-right .btn-container .btn {
    padding: 0.9rem 3.2rem;
    font-size: 1.4rem;
  }
  .process-section {
    min-height: 0px;
  }
}