/* setion1 */
.group-section1 {
  width: 100%;
  height: 100dvh;
  color: var(--white);
  background-color: var(--background-color);
  padding: 0 clamp(1.6rem, 3vw, 4rem);
}

.group-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.group-section1-content {
  position: relative;
  display: flex;
  justify-content: center;
}

.stone-txt1 span,
.stone-txt2 li {
  position: relative;
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.6rem, 2vw, 2.7rem);
  line-height: 1.9rem;
  white-space: nowrap;
}

.stone-txt1 {
  position: absolute;
  left: 10%;
  top: 10%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.3rem, 1vw, 1.5rem);
}

.group-stone {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.group-section1 video {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.notice-ai {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: 12px;
  line-height: 1.2rem;
  text-align: center;

  color: #ffffff;
}

.stone-txt2 {
  position: absolute;
  right: 5%;
  height: 100%;
  display: flex;
  align-items: center;
  gap: clamp(1.3rem, 1vw, 1.5rem);
  list-style-type: none;
}

.stone-txt1 span:not(:last-child)::after,
.stone-txt2 li:not(:last-child)::after {
  content: "";
  position: absolute;
  width: 0.323rem;
  height: 0.323rem;
  left: calc(100% + (clamp(1.3rem, 1vw, 1.5rem) / 2));
  top: 50%;
  background: var(--main-font-color);
  box-shadow: 0px 0px 12.2059px var(--main-font-color),
    0px 0px 6.97482px var(--main-font-color),
    0px 0px 4.06865px var(--main-font-color),
    0px 0px 2.03432px var(--main-font-color),
    0px 0px 0.581235px var(--main-font-color),
    0px 0px 0.290618px var(--main-font-color);
  transform: rotate(36.55deg) translateX(-50%);
}

/* section2 */
.group-section2 {
  width: 100%;
  height: 100dvh;
  color: var(--white);
  background-color: var(--background-color);
  padding: 0 clamp(1.6rem, 3vw, 4rem);
}

.group-section2-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: clamp(5.3rem, 3vw, 10.6rem);
}

.group-section2-subTit {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 100;
  font-size: clamp(1rem, 1vw, 1.3rem);
  line-height: 1.6rem;
  text-align: center;
  color: var(--white);
}

.group-section2-title {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: 26px;
  line-height: 2.4rem;
  text-align: center;
  color: var(--white);
  margin-top: 0.8rem;
}

.group-section2-content {
  max-width: 102rem;
  display: flex;
  flex-direction: column;
  gap: clamp(1.4rem, 1vw, 1.6rem);
}

.group-section2-content p {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: clamp(1.7rem, 1vw, 2.1rem);
  line-height: clamp(1, 1vw, 1.2);
  text-align: center;
  color: var(--white);
}

/* section3 */
.group-section3 {
  width: 100%;
  height: 100dvh;
  color: var(--white);
  background-color: var(--background-color);
  padding: 0 clamp(1.6rem, 3vw, 4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.group-section3-container {
  width: 100%;
  max-width: 144rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.section-title {
  font-family: "Modern No. 20", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.4rem, 3vw, 3.6rem);
  /* line-height: 3.9rem; */
  text-align: center;
}

.section-circle {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
}

.section-circle img {
  width: 80%;
}

.cooperation-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  text-align: center;
  gap: 8.63rem;
  position: relative;
}

.desc-head {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 500;
  font-size: clamp(1.4rem, 1.5vw, 2rem);
  line-height: 2.4rem;
  padding-bottom: 4.1rem;
}

.desc-sub {
  font-family: "Inter", sans-serif;
  font-style: normal;
  font-weight: 200;
  font-size: clamp(1.2rem, 1vw, 1.6rem);
  line-height: 2.5rem;
}

.border {
  position: absolute;
  width: 0.1rem;
  height: 10000%;
  top: 110%;
  right: 50%;
  background-color: var(--white);
}

/* section4 */
.group-section4 {
  width: 100%;
  height: 100dvh;
  background-color: var(--background-color);
  padding: 0 clamp(1.6rem, 3vw, 4rem);
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--white);
  overflow: hidden;
}

.group-section4-container {
  width: 100%;
  max-width: 144rem;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.skin-beauty {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  font-family: "Modern No. 20", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(2.4rem, 3vw, 3.6rem);
  line-height: 3.9rem;
  text-align: center;
  position: relative;
}

.skin-beauty .border {
  height: 105rem;
  top: -108rem;
}

.pc-desc {
  display: block;
}

.mo-desc {
  display: none;
}

@media (max-width: 768px) {
  .group-section2-content {
    max-width: 34rem;
    margin: auto;
  }

  .group-section1 {
    min-width: var(--min-width);
  }

  .group-container {
    justify-content: flex-start;
    gap: 5rem;
  }

  .group-section1-content {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }

  .group-section1 .group-stone {
    width: 100%;
  }

  .stone-txt1,
  .stone-txt2 {
    position: static;
  }

  .stone-txt1 {
    width: 100%;
    justify-content: flex-start;
    margin-left: 5%;
  }

  .stone-txt2 {
    width: 100%;
    justify-content: flex-end;
    margin-right: 5%;
  }

  .group-section2 {
    min-width: var(--min-width);
  }

  .group-section3,
  .group-section4 {
    height: 100%;
    min-width: var(--min-width);
    flex-direction: column;
  }

  .group-section3-container,
  .group-section4-container {
    flex-direction: column;
  }

  .section-title {
    font-size: 2.4rem;
  }

  .section-circle {
    width: 100%;
    order: 2;
    background-color: #071623;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.2rem;
    padding: 5rem 2.8rem;
    border-radius: 50%;
    margin-bottom: 5.6rem;
  }

  .section-circle {
    order: 2;
  }

  .section-circle img {
    width: 100%;
  }

  .skin-beauty {
    order: 1;
  }

  .cooperation-desc {
    width: 100%;
    order: 1;
    justify-content: flex-start;
  }

  .desc-head {
    width: 100%;
    font-size: 1.4rem;
  }

  .desc-sub p {
    width: 100%;
    font-size: 1.2rem;
    text-align: left;
    padding-bottom: 2rem;
  }

  .prp-circle.back {
    top: 50%;
    left: calc(40% + 35%);
    transform: translate(-50%, -50%);
    z-index: 0;
  }

  .desc-sub .pc-desc {
    display: none;
  }

  .desc-sub .mo-desc {
    max-width: 300px;
    display: block;
    text-align: center;
  }
}