@charset "utf-8";

.effect-section {
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  height: auto;
  display: flex;
  padding: 120px 96px;
  justify-content: center;
  align-items: center;
  background: var(--sys-bg-default, #f3f5f7);
}

.effect-section .content-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.effect-section .content-container .title-container {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.effect-section .content-container .title-container .title-text {
  color: var(--ref-base-black, #151818);
  text-align: center;
  box-sizing: border-box;
  word-break: keep-all;
  /* Display/Medium */
  font-family: Pretendard;
  font-size: var(--ref-font-size-10-fluent, 45px);
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 63px */
}

.effect-section .content-container .title-container .subtitle-text {
  color: var(--sys-text-light-700, #4e5760);
  text-align: center;
  box-sizing: border-box;
  word-break: keep-all;
  /* Title/XLarge */
  font-family: Pretendard;
  font-size: var(--ref-font-size-6-static, 24px);
  font-style: normal;
  font-weight: 400;
  line-height: 160%; /* 38.4px */
}

.effect-section .content-container .body-container {
  display: flex;
  width: 100%;
  max-width: 1248px;
  box-sizing: border-box;
  height: fit-content;
  border-radius: 16px;
  background: var(--global-white-a100, #fff);
  /* shadow/basic/md */
  box-shadow: 0px 0px 16px 0px rgba(55, 61, 68, 0.08);
  padding: 50px 50px 37px 60px;
  align-items: center;
  justify-content: center;
  gap: 52px;
  flex-wrap: wrap;
  overflow: hidden; /* 또는 auto */
}

.effect-section .content-container .body-container .left-child {
  display: flex;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  gap: 60px;
}

.effect-section .content-container .body-container .left-child .headline-text {
  word-break: keep-all;
  color: var(--sys-text-default-900, #373d44);
  /* Headline/Large */
  font-family: Pretendard;
  font-size: var(--ref-font-size-8-fluent, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 51.2px */
}

.effect-section
  .content-container
  .body-container
  .left-child
  .left-content-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  flex-direction: column;
  align-items: flex-start;
  gap: 127px;
  padding-bottom: 23px;
}

.effect-section
  .content-container
  .body-container
  .left-child
  .left-content-container
  .left-content-top-container {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  align-items: center;
  gap: 12px;
  min-height: 196px;
}

.effect-section .content-container .body-container .right-child {
  display: flex;
  box-sizing: border-box;
  max-width: 474px;
  padding: 36px 0 24px 0;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 36px;
}

.effect-section .content-container .body-container .right-child img {
  aspect-ratio: 1;
  max-width: 466px;
}

.effect-section .content-container .body-container .img-description-text {
  color: var(--ref-neutral-300, #b6bdc4);
  word-break: keep-all;
  /* Caption/Small */
  text-align: left;
  font-family: Pretendard;
  font-size: var(--ref-font-size-1-static, 12px);
  font-style: normal;
  font-weight: 500;
  line-height: 140%; /* 16.8px */
  align-self: stretch;
}

.effect-section .box-child {
  display: flex;
  width: 196px;
  height: 196px;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 16px;
  padding: 38px 25px;
}

.effect-section .brand-light-bg {
  background: var(--ref-primary-100, #70dcdc);
}

.effect-section .brand-default-bg {
  background: var(--ref-primary-200, #3cd0d0);
}

.effect-section .brand-dark-bg {
  background: var(--ref-primary-300, #00bbba);
}

.effect-section .box-child .box-child-top-text {
  color: var(--comp-cont-inverse, #fff);
  text-align: center;
  word-break: keep-all;
  /* Headline/Large */
  font-family: Pretendard;
  font-size: var(--ref-font-size-8-fluent, 32px);
  font-style: normal;
  font-weight: 700;
  line-height: 160%; /* 51.2px */
}

.effect-section .box-child .box-child-bottom-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.effect-section .box-child .box-child-bottom-container .percent-text {
  color: var(--global-white-a100, #fff);
  word-break: keep-all;
  text-align: center;
  font-family: var(--ref-font-size-font-family-2, Pretendard);
  font-size: var(--sys-font-size-display-lg, 56px);
  font-style: normal;
  font-weight: 700;
  line-height: 140%; /* 78.4px */
  letter-spacing: -1.68px;
}

.effect-section
  .box-child
  .box-child-bottom-container
  .percent-text
  .suffix-text {
  font-size: 36px;
  word-break: keep-all;
}

.effect-section .box-child .box-child-bottom-container img {
  width: 20px;
  height: 20px;
}

@media screen and (max-width: 1023px) {
  .effect-section {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    height: auto;
    display: flex;
    padding: 50px 24px;
    justify-content: center;
    align-items: center;
    background: var(--sys-bg-default, #f3f5f7);
  }

  .effect-section .content-container {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }

  .effect-section .content-container .title-container {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    gap: 23px;
  }

  .effect-section .content-container .title-container .title-text {
    color: var(--ref-base-black, #151818);
    text-align: center;
    /* Headline/Medium */
    font-family: Pretendard;
    font-size: var(--ref-font-size-7-fluent, 28px);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 39.2px */
  }

  .effect-section .content-container .title-container .subtitle-text {
    color: var(--sys-text-light-700, #4e5760);
    box-sizing: border-box;
    /* Body/Medium */
    font-family: Pretendard;
    font-size: var(--ref-font-size-3-static, 16px);
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.6px */
  }

  .effect-section .content-container .body-container {
    display: flex;
    width: 100%;
    flex-direction: column;
    box-sizing: border-box;
    height: fit-content;
    border-radius: 16px;
    background: var(--global-white-a100, #fff);
    /* shadow/basic/md */
    box-shadow: 0px 0px 16px 0px rgba(55, 61, 68, 0.08);
    padding: 20px 21px 22px 20px;
    align-items: center;
    justify-content: center;
    gap: 31px;
    flex-wrap: wrap;
    overflow: hidden; /* 또는 auto */
  }

  .effect-section .content-container .body-container .left-child {
    display: flex;
    box-sizing: border-box;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .effect-section
    .content-container
    .body-container
    .left-child
    .headline-text {
    color: var(--sys-text-default-900, #373d44);
    /* Title/Large */
    font-family: Pretendard;
    font-size: var(--ref-font-size-5-static, 20px);
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 32px */
  }

  .effect-section
    .content-container
    .body-container
    .left-child
    .left-content-container {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 0;
  }

  .effect-section
    .content-container
    .body-container
    .left-child
    .left-content-container
    .left-content-top-container {
    display: flex;
    box-sizing: border-box;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .effect-section .content-container .body-container .right-child {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 21.554px;
    flex-shrink: 0;
    padding: 0;
  }

  .effect-section .content-container .body-container .right-child img {
    aspect-ratio: 1;
    max-width: 265px;
  }

  .effect-section .content-container .body-container .img-description-text {
    word-break: keep-all;
    color: var(--ref-neutral-300, #b6bdc4);
    font-family: Pretendard;
    font-size: 10px;
    font-style: normal;
    font-weight: 500;
    line-height: 140%; /* 14px */
    text-align: center;
    align-self: stretch;
  }

  .effect-section .box-child {
    display: flex;
    width: 100%;
    box-sizing: border-box;
    height: fit-content;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    gap: 10px;
    padding: 20px 20px 20px 30px;
  }

  .effect-section .brand-light-bg {
    background: var(--ref-primary-100, #70dcdc);
  }

  .effect-section .brand-default-bg {
    background: var(--ref-primary-200, #3cd0d0);
  }

  .effect-section .brand-dark-bg {
    background: var(--ref-primary-300, #00bbba);
  }

  .effect-section .box-child .box-child-top-text {
    word-break: keep-all;
    color: var(--comp-cont-inverse, #fff);
    /* Title/XLarge */
    min-width: 110px;
    font-family: Pretendard;
    font-size: var(--ref-font-size-6-static, 24px);
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 38.4px */
    text-align: left; /* 왼쪽 정렬 */
  }

  .effect-section .box-child .box-child-bottom-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .effect-section .box-child .box-child-bottom-container .percent-text {
    word-break: keep-all;
    color: var(--global-white-a100, #fff);
    text-align: center;
    font-family: var(--ref-font-size-font-family-2, Pretendard);
    font-size: 40px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 56px */
    letter-spacing: -1.2px;
  }

  .effect-section
    .box-child
    .box-child-bottom-container
    .percent-text
    .suffix-text {
    word-break: keep-all;
    font-size: 24px;
  }

  .effect-section .box-child .box-child-bottom-container img {
    width: 16px;
    height: 16px;
  }
}