/*====================
  Page
====================*/
/* Page 1 - Health */
.health__container {
  padding: 120px 20px 80px;
  display: flex;
  height: 821px;
  max-height: 812px;
  flex-direction: column;
  justify-content: space-between;
}

.health-header-text {
  padding-bottom: 20px;
}

.health-header-first-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.health-text-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
}

.health-header-text p {
  font-size: 23px;
  font-weight: 700;
  line-height: 31px; /* 134.783% */
  letter-spacing: -0.25px;
  color: #111111;
}

.health__labels {
  display: flex;
  padding-bottom: 32px;
  gap: 4px;
}

.health-label {
  display: flex;
  padding: 6px 12px;
  border-radius: 100px;
}

.health-label p {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px; /* 138.462% */
  letter-spacing: -0.25px;
  color: #484e57;
}

.health-content-text__bold {
  font-size: 14px;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.25px;
  color: #484e57;
  font-weight: 600;
}

.health-content-text__normal {
  padding-bottom: 12px;
  font-size: 14px;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.25px;
  color: #484e57;
  font-weight: 400;
}

.health-content-text__small {
  font-size: 13px;
  font-weight: 400;
  line-height: 18px; /* 138.462% */
  letter-spacing: -0.25px;
  color: #626972;
}

.health-chart-img {
  position: relative;
  width: 335px;
  height: 305px;
}

.health-chart-wrapper {
  position: absolute;
  width: 138px;
  height: 138px;
  top: 38.45%;
  left: 28.35%;
}

.health__chart__value {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0; /* 처음에는 숨김 */
  transition: opacity 0.5s ease-in-out;
}

.health__chart__value.show {
  opacity: 1;
}

.chart-text-name {
  font-size: 9.227px;
  font-weight: 500;
  line-height: 12.775px;
  letter-spacing: -0.177px;
  color: #626972;
}

.chart-text-percent {
  font-size: 14.905px;
  font-weight: 700;
  line-height: 20.583px; /* 138.095% */
  letter-spacing: -0.177px;
  color: #111;
}

/* 배경 차트를 뒤로 */
#health-background-doughnut-chart {
  z-index: 1;
}

/* 포그라운드 차트를 앞으로 */
#health-foreground-doughnut-chart {
  z-index: 2;
}

.health-chart-img img {
  width: 100%;
  height: 100%;
  display: block;
}

.chart-text-wrapper {
  display: none;
  position: absolute;
  top: 169px;
  left: 131px;
  text-align: center;
}

.chart-text-small {
  font-size: 9.227px;
  font-weight: 500;
  line-height: 12.775px; /* 138.462% */
  letter-spacing: -0.177px;
  color: #626972;
}

.chart-text-bold {
  font-size: 14.905px;
  font-weight: 700;
  line-height: 20.583px; /* 138.095% */
  letter-spacing: -0.177px;
  color: #111111;
}

/* Page 2 - Pilates */
.pilates__container {
  padding: 120px 20px 80px;
  display: flex;
  flex-direction: column;
  height: 812px;
  max-height: 812px;
  justify-content: space-between;
}

.pilates__header-text {
  padding-bottom: 20px;
  font-size: 23px;
  font-weight: 700;
  line-height: 31px; /* 134.783% */
  letter-spacing: -0.25px;
  color: #111111;
}

.pilates__labels {
  display: flex;
  padding-bottom: 32px;
  gap: 4px;
}

.pilates__label {
  padding: 6px 12px;
  border-radius: 100px;
}

.pilates__label p {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px; /* 138.462% */
  letter-spacing: -0.25px;
  color: #484e57;
}

.pilates__content-text__bold {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.25px;
  color: #484e57;
}

.pilates__content-text__normal {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.25px;
  color: #484e57;
}

.pilates-chart__wrapper {
  width: 344.178px;
  height: 344.178px;
}

.pilates-chart__wrapper img {
  width: 100%;
  height: 100%;
}

/* Page 3 - MAU */
.mau__container {
  padding: 120px 0px 80px 0px;
  height: 812px;
  max-height: 812px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mau__description {
  padding-left: 20px;
}

.mau__header-text {
  padding-bottom: 16px;
  font-size: 23px;
  font-weight: 700;
  line-height: 31px; /* 134.783% */
  letter-spacing: -0.25px;
  color: #111111;
}

.mau__content-text__normal {
  font-size: 14px;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.25px;
  color: #484e57;
}

.mau__content-text__bold {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px; /* 142.857% */
  letter-spacing: -0.25px;
  color: #484e57;
}

.mau-chart {
  overflow-x: auto; /* 가로 스크롤 허용 */
  overflow-y: auto; /* 세로 스크롤 허용 (필요 시) */
  -ms-overflow-style: none; /* 인터넷 익스플로러 */
  scrollbar-width: none; /* 파이어폭스 */
}

.mau-chart::-webkit-scrollbar {
  display: none; /* WebKit 브라우저에서 스크롤바 숨김 */
}

.mau-chart__wrapper {
  width: 479.49px;
  height: 360px;
  margin-left: 20px;
  margin-right: 20px;
}

#legend-container {
  display: flex;
  width: 479.49px;
  padding-bottom: 24px;
  justify-content: end;
  gap: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin: 8px 0;
}

.legend-icon-item {
  width: 10px;
  height: 10px;
  border-radius: 1px;
}

.legend-label {
  margin-left: 5px;
  color: #626972;
  font-size: 12px;
  font-weight: 600;
}

/* Page 4 - Product */
.product__container {
  padding: 120px 20px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product__header {
  width: 100%;
  display: flex;
  justify-content: center;
}

.product__header-title {
  padding-bottom: 56px;
  font-size: 23px;
  font-weight: 700;
  line-height: 31px;
  color: #fff;
}

.product__item {
  width: 335px !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product__item:not(:last-of-type) {
  padding-bottom: 40px;
}

.product__image-wrapper {
  position: relative;
  width: 335px;
  height: 272px;
  padding: 40px 47px 0px 48px;
  border-radius: 24px;
  background: #464b5e;
  overflow: hidden;
}

.product__image__mobile-mock {
  position: absolute;
  top: 40px;
  left: 48px;
  width: calc(100% - 95px);
  height: calc(100% - 40px);
}

.product__image__background {
  position: absolute;
  top: 52px;
  left: 62px;
  width: calc(100% - 121px);
  height: calc(100% - 40px);
}

.product__image__mobile-mock {
  z-index: 3;
}

.product__image__background {
  z-index: 1;
}

.product__image__mobile-mock img,
.product__image__background img {
  width: 100%;
  height: auto;
}

.product-lounge-slider {
  position: absolute;
  width: calc(100% - 121px);
  height: calc(100% - 134px);
  left: 62px;
  top: 105px;
  z-index: 1;
}

.product-lounge-slide img {
  width: 100%;
}

.product-notice-slider {
  position: absolute;
  top: 60px;
  left: 0;
  width: 100%;
  padding: 0 10px;
  z-index: 2;
}

.product-notice-slide img {
  width: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.product__image__top {
  position: relative;
  padding: 0px 47px 56px 48px;
}

.product__image__mobile-mock-bottom {
  position: absolute;
  width: calc(100% - 95px);
  top: -270px;
}

.product__image__background-bottom {
  position: absolute;
  width: calc(100% - 121px);
  top: -255px;
}

.product-mypage-slider {
  position: absolute;
  width: 100%;
  padding: 0 8px;
  bottom: -165px;
  z-index: 2;
  filter: drop-shadow(rgba(0, 0, 0, 0.12) 0px 2px 8px);
}

.product-mypage-slide img {
  width: 100%;
  height: 100%;
  border-radius: 4px;
}

.product-booked-slide {
  position: absolute;
  width: 195px;
  top: 108px;
  left: 70px;
  border-radius: 4px;
  z-index: 2;
  overflow: hidden;
}

.product-booked-slide img {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
}

.product__content {
  width: 335px;
}

.product__title {
  padding-top: 32px;
  padding-bottom: 20px;
  font-size: 21px;
  font-weight: 700;
  line-height: 29px; /* 138.095% */
  letter-spacing: -0.25px;
  color: #fff;
  text-align: center;
}

.product__subtitle {
  padding-bottom: 8px;
  font-size: 19px;
  font-weight: 600;
  line-height: 27px; /* 142.105% */
  letter-spacing: -0.25px;
  color: #fff;
  text-align: center;
}

.product__description {
  display: flex;
  flex-direction: column;
}

.product__text {
  font-size: 15px;
  font-weight: 400;
  line-height: 24px; /* 160% */
  letter-spacing: -0.25px;
  color: #fff;
  text-align: center;
}

/* Page 5 - Example */
.example__container {
  padding: 120px 0 80px;
}

.example__header {
  padding-bottom: 32px;
}

.example__brand-logo-wrapper {
  width: 100%;
  padding-bottom: 32px;
  overflow: hidden;
  position: relative;
}

.brand-logo-loop {
  display: flex;
  width: fit-content;
  animation: scroll 40s linear infinite;
  gap: 8px;
}

.brand-logo-loop-wrapper {
  display: flex;
  align-items: center;
}

.brand-logo-loop-wrapper img {
  height: 80px;
  width: auto;
  object-fit: contain;
}

.example__header-text {
  font-size: 23px;
  font-weight: 700;
  line-height: 31px; /* 134.783% */
  letter-spacing: -0.25px;
  text-align: center;
  color: #111111;
}

.example__banner-wrapper {
  display: flex;
  width: 100%;
  align-items: center;
  flex-direction: column;
}

.mobile__wrapper {
  position: relative;
  width: 315px;
  height: 381px;
  margin-top: 56px;
  overflow: hidden;
}

.example__mobile-mock-image {
  position: absolute;
  width: 100%;
  z-index: 3;
}

.example__mobile-mock-image img {
  width: 100%;
}

.example__mobile-image__background {
  position: absolute;
  width: calc(100% - 30px);
  top: 16px;
  left: 16px;
}

.example__mobile-image__background img {
  width: 100%;
}

.example-banner-slide {
  position: absolute;
  width: calc(100% - 30px);
  top: 94px;
  left: 16px;
  z-index: 2;
}

.banner-slide img {
  width: 100%;
}

/* 무한 스크롤 애니메이션 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 전체 너비만큼 이동 */
    transform: translateX(calc(-100% / 2));
  }
}

/* Page 6 - Inquiry */
.inquiry__container {
  display: flex;
  height: 280px;
  max-height: 280px;
  padding: 67px 0;
  flex-direction: column;
  align-items: center;
}

.inquiry__text__wrapper {
  display: flex;
  padding-bottom: 40px;
  flex-direction: column;
  align-items: center;
}

.inquiry__text {
  font-size: 21px;
  font-weight: 700;
  line-height: 160%; /* 33.6px */
  letter-spacing: -0.25px;
  color: #ffffff;
}

.inquiry__text__small {
  font-size: 21px;
  font-weight: 500;
  line-height: 160%; /* 33.6px */
  letter-spacing: -0.25px;
  color: #ffffff;
}

.inquiry-contained {
  background: #2d80eb;
}

.inquiry-contained:hover {
  background: #fff;

  & a {
    color: #2d80eb;
  }
}

.inquiry__button {
  padding: 8px 40px;
  border-radius: 60px;
  transition:
    background 0.3s ease,
    color 0.3s ease;
}

.inquiry__button a {
  font-size: 14px;
  font-weight: 600;
  line-height: 160%; /* 22.4px */
  color: #ffffff;
  font-family: Pretendard;
}

/* Page 7 - Partner */
#partner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.partner__wrapper {
  padding: 136px 20px;
}

.partner__text__wrapper {
  padding-bottom: 32px;
  text-align: center;
}

.partner__text__title {
  padding-bottom: 16px;
  font-family: Pretendard;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 38.4px */
  letter-spacing: -0.15px;
}

.partner__text__sub {
  font-family: Pretendard;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  line-height: 140%; /* 18.2px */
  letter-spacing: -0.25px;
  color: #484e57;
}

.partner__company {
  display: flex;
  width: 335px;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  border-radius: 12px;
  overflow: hidden;
}

.partner__company-fonv {
  margin-bottom: 20px;
  background-color: #ececec;
}

.partner__company-img-fonv {
  padding-right: 39.2px;
  img {
    width: 100%;
  }
}

.name-fonv img {
  width: 72px;
  height: 24px;
  padding: 0.6px 1.918px 0.168px 2px;
}

.partner__company-samsung {
  background-color: #dfd9d0;
}

.partner__company-img-samsung {
  img {
    width: 100%;
  }
}

.partner__company-info {
  width: 100%;
  padding: 16px 20px;
}

.partner__company-name {
  padding-bottom: 20px;
}

.partner__company-description {
  padding-bottom: 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.25px;
  color: #484e57;
}

.partner__company__link {
  height: 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  min-width: 96px;
}

.partner__company__link > a {
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: 160%;
  color: #111;
  text-decoration: none;
}

/* Page 8 - Contact */
.contact__container {
  padding: 80px 20px 108px;
  height: 1139px;
  max-height: 1139px;
}

.contact__content-title {
  padding-bottom: 104px;
}

.contact__title-wrapper {
  margin-bottom: 16px;
}

.contact__title {
  font-size: 20px;
  font-weight: 800;
  line-height: 160%; /* 32px */
  letter-spacing: -0.15px;
  color: #111;
}

.contact__icon-item-wrapper {
  display: flex;
  gap: 16px;
}

.contact__icon-item-wrapper img {
  width: 100%;
}

.contact__icon-item-wrapper a {
  width: 16px;
  height: 16px;
}

.business {
  padding-bottom: 104px;
}

.business__title-wrapper {
  padding-bottom: 16px;
}

.business__title {
  padding-bottom: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 160%; /* 22.4px */
  letter-spacing: -0.25px;
}

.business__description {
  font-size: 12px;
  font-weight: 400;
  line-height: 160%; /* 19.2px */
  letter-spacing: -0.15px;
}

.business__bold {
  font-size: 12px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: -0.15px;
}

.business__text {
  font-size: 12px;
  font-weight: 400;
  line-height: 160%; /* 19.2px */
  letter-spacing: -0.15px;
  color: #626972;
}

.business__warning {
  padding-top: 8px;
  font-size: 11px;
  font-weight: 400;
  line-height: 140%; /* 15.4px */
  letter-spacing: -0.15px;
  color: #ff5d66;
}

.business__app-button-wrapper {
  display: flex;
  gap: 8px;
}

.business__app-button {
  display: flex;
  width: 120px;
  height: 40px;
  padding: 9.941px 19.882px;
  border-radius: 8.947px;
  justify-content: center;
  align-items: center;
  background: rgba(17, 17, 17, 0.72);
}

.business__app-button-content {
  height: 18px;
}

.business__app-button-content picture img {
  height: 100%;
}

.contact__details {
  padding-bottom: 104px;
}

.contact__call {
  display: flex;
  padding-bottom: 16px;
  align-items: center;
  gap: 8px;
}

.contact__phone-number {
  font-size: 20px;
  font-weight: 600;
  line-height: 160%; /* 32px */
  letter-spacing: -0.15px;
  color: #2d80eb;
}

.contact__button-group {
  display: flex;
  padding-bottom: 10px;
  gap: 8px;
}

.contact__button {
  display: flex;
  width: 138px;
  padding: 8px 0px;
  justify-content: center;
  align-items: center;
  border-radius: 60px;
  transition:
    background 0.3s ease,
    color 0.3s ease,
    border 0.3s ease;
}

.contact__button a {
  font-size: 14px;
  font-weight: 600;
  line-height: 160%; /* 22.4px */
  color: #ffffff;
}

.contact__button.outline a {
  font-size: 14px;
  font-weight: 600;
  line-height: 160%; /* 22.4px */
  color: #2d80eb;
  transition: color 0.3s ease;
}

.contact__kakao {
  display: flex;
  width: 284px;
  padding: 16px 0px;
  align-items: center;
  justify-content: center;
  border-radius: 60px;
  background: #fee500;
}

.contact__kakao a {
  display: flex;
  align-items: center;
  gap: 8px;
}

.contact__kakao-icon {
  height: 14px;
}

.contact__kakao-icon img {
  height: 100%;
}

.contact__kakao-label {
  font-size: 14px;
  font-weight: 600;
  line-height: 160%; /* 22.4px */
  color: #191919;
}

.company-info__logo {
  width: 136px;
  padding-bottom: 24px;
}

.company-info__logo img {
  width: 100%;
}

.company-info__details {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.company-info__group span {
  display: block;
  font-size: 11px;
  font-weight: 500;
  line-height: 160%; /* 17.6px */
  letter-spacing: -0.15px;
  color: #484e57;
}
.company-info__links {
  display: flex;
  gap: 8px;
  position: relative;
}

.company-info__link:last-child {
  position: relative;
  padding-left: 8px;
}

.company-info__links .company-info__link {
  font-size: 11px;
  font-weight: 500;
  line-height: 160%; /* 17.6px */
  letter-spacing: -0.15px;
  color: #484e57;
}

.company-info__link:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 8px;
  background-color: #d2d8e1;
}