.accompany__gen{
  height: 100vh;
  position: relative;
}
.accompany__gen .wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  background-image: linear-gradient(to right, rgb(0, 47, 89), rgb(93, 84, 98));
}
.accompany__gen .demo {
  margin: auto;
  text-align: center;
}
.accompany__gen .path {
  color: #ffffff;
  width: 15%;
  border-top: .2rem dashed;
}
.accompany__gen .text {
  border-bottom-right-radius: 3.0rem;
  background: #2ab395;
  padding: 2.2rem 2.8rem;
  border-top-left-radius: 3.0rem;
  text-align: center;
  background-image: linear-gradient(to right, rgb(174, 230, 254), rgb(160, 219, 190));
}
.accompany__gen .text-title {
  font-weight: 700;
  color: rgb(16, 80, 126);
  font-size: 2.2rem;
  text-decoration: none;
}
.accompany__gen .annotation {
  flex: 1;
  display: flex;
  width: max-content;
  align-items: center;
  width: max-content;
  opacity: 1;
}
.accompany__gen .container {
  z-index: 2;
  height: 11.5rem;
  width: 50%;
  display: flex;
  align-items: center;
  position: absolute;
  pointer-events: auto;
  animation-duration: 1s;
}
.accompany__gen .container:nth-child(even) {
  left: 48.8%;
}
.accompany__gen .container:nth-child(odd) {
  right: 49%;
}
.accompany__gen .container:nth-child(odd) .annotation .text {
  border-top-left-radius: 0;
  border-bottom-left-radius: 3.0rem;
  border-bottom-right-radius: 0;
  border-top-right-radius: 3.0rem;
}
.accompany__gen .container:nth-child(odd),
.accompany__gen .container:nth-child(odd) .annotation {
  flex-direction: row-reverse;
}
.accompany__gen .content {
  position: relative;
}
.accompany__gen .icon {
  width: 5.0rem;
  height: 5.0rem;
  border-radius: 50%;
  cursor: pointer;
}
.accompany__gen .item {
  cursor: pointer;
  border-radius: 50%;
}
.accompany__gen .scroll-container {
  position: absolute;
  top: 0;
  width: 100%;
  overflow: hidden;
  height: 100vh;
}
.accompany__gen .scroll-fake {
  position: relative;
  pointer-events: none;
  height: 180vh;
}
@media only screen and (max-width: 60.0rem) {
  .accompany__gen .header-text {
    line-height: 4.0rem !important;
    font-size: 3.0rem !important;
  }
  .accompany__gen .text {
    padding: .5rem;
  }
  .accompany__gen .container:nth-child(odd) .annotation .text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 1.5rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 1.5rem;
  }
  .accompany__gen .text-title {
    font-size: 1.2rem;
  }
  .accompany__gen .icon {
    width: 3.2rem;
    height: 3.2rem;
  }
  .accompany__gen .container:nth-child(even) {
    left: 46%;
  }
  .accompany__gen .container:nth-child(odd) {
    right: 46%;
  }
}
.accompany__gen .header-text {
  line-height: 1.2;
  position: absolute;
  top: 1.5rem;
  width: 100%;
  text-align: center;
  font-size: 4.4rem;
  color: #fff;
  pointer-events: none;
}
@media (max-width: 1400px){
  .accompany__gen .header-text{
    font-size: 3.6rem;
  }
}


.accompany__gen .header-text > span,
.accompany__gen .header-text > p {
  font-weight: 600;
}
.accompany__gen .gradient-text {
  background: linear-gradient(45deg, #176ab4, #b1ffc7);
  -webkit-background-clip: text; /* Clip text to the background */
  font-weight: 600;
  color: transparent;
  display: inline-block;
}