/* 
** 서브페이지 공통 ===============================================================
 */
.bg-grad-blue {
  background: linear-gradient(90deg, #f6fdff 0%, #deedf6 100%), #d6e6ee;
}

.bg-gray {
  background: #f7f7f7;
}

.bg-honeycomb {
  background: url("/assets/img/pages/bg_honeycomb.png") no-repeat 50% 50% / cover;
}

.bg-doctor {
  background: url("/assets/img/pages/bg_doctor_blue.png") no-repeat 60% 50% / cover;
}

.bg-doctor-short {
  background: url("/assets/img/pages/bg_doctor_blue_short.png") no-repeat 60% 50% / cover;
}

.text-grad-box {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-align: center;

  padding: 0.8em 2em;

  border-radius: 999px;
  background: linear-gradient(90deg, #618599 0%, rgba(97, 133, 153, 0.6) 100%);
  box-shadow: 0px 4px 10px 0px rgba(112, 118, 132, 0.25);
}

.text-grad-box.sm {
  width: fit-content;
  padding: 0.8em 4em;
  margin: 0 auto;
}

.text-caution-box {
  font-size: 1.8rem;
  color: var(--color-text-secondary);
  text-align: center;

  padding: 0.9em 1em;

  background: #fff;
  border-radius: 999px;
  box-shadow: 0px 0.4rem 1rem 0px rgba(112, 118, 132, 0.25);
}

.text-caution-box:lang(en) {
  display: flex;
  justify-content: center;
  text-align: left;
}

.text-caution-box .icon-label {
  position: relative;
  display: inline-block;
  padding-left: 2em;

  font-weight: 700;
}

.text-caution-box .icon-label:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);

  width: 1.2em;
  height: 1.2em;

  background: url("/assets/img/common/icon/caution-bk.svg") no-repeat center center / contain;
}

.text-caution-box.sm {
  width: fit-content;
  padding: 0.9em 3.6em;
  margin: 0 auto;
}

.text-caution-box.multi-line {
  padding: 1em 2em;
  border-radius: 2rem;

  text-align: left;

  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.text-caution-box.multi-line .icon-label {
  padding-left: 0;
  padding-top: 2em;
}

.text-caution-box.multi-line .icon-label:before {
  top: 0;
  transform: translate(0, 0);
}

.tel-border-box {
  position: relative;
  display: inline-block;

  border-radius: 999px;
  border: 0.4rem solid var(--color-primary);
  background: #fff;

  font-size: 1.7rem;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;

  padding: 0.4em 1.2em 0.4em 2.6em;

  transition: all 0.2s;
}

.tel-border-box:lang(en) {
  max-width: 20em;
  text-align: left;
}

.tel-border-box:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1em;
  transform: translate(0, -50%) rotate(0deg);

  width: 1em;
  height: 1em;
  background: url("/assets/img/common/icon/call-bl.svg") no-repeat 50% 50% / 1em;
}

.tel-border-box:hover {
  box-shadow: 0.1em 0.1em 1px 2px var(--color-primary-light);
}

.tel-border-box:hover:before {
  animation: call-icon-swing 0.5s ease-in-out;
}

@keyframes call-icon-swing {
  20% {
    transform: translate(0, -50%) rotate(15deg);
  }

  40% {
    transform: translate(0, -50%) rotate(-10deg);
  }

  60% {
    transform: translate(0, -50%) rotate(5deg);
  }

  80% {
    transform: translate(0, -50%) rotate(-5deg);
  }

  to {
    transform: translate(0, -50%) rotate(0deg);
  }
}

.image-wrap.rounded img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flex-half {
  display: flex;
  align-items: center;
  gap: 4rem;
}

.flex-half .flex-left,
.flex-half .flex-right {
  width: 50%;
}

.sp-tit {
  font-size: 3.6rem;
  font-weight: 700;
  line-height: 1.4;
  color: #262626;
}

.sp-tit.color-primary {
  color: var(--color-primary);
}

.sp-tit.color-primary-dark {
  color: var(--color-primary-dark);
}

.sp-tit.color-wh {
  color: #fff;
}

.sp-eyebrow {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary);

  margin-bottom: 2.4rem;
}

.sp-eyebrow.color-bk {
  color: #1c1c1c;
}

.sp-eyebrow.color-wh {
  color: #fff;
}

.sp-eyebrow-lg {
  font-size: 2rem;
  font-weight: 700;
}

.sp-eyebrow-border {
  display: inline-block;

  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);

  padding: 0.3em 0.6em 0.2em;

  border: 1px solid var(--color-primary);
  border-radius: 999px;
}

.sp-eyebrow .num {
  position: relative;

  font-family: var(--font-poppins);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary);

  margin-right: 6rem;
}

.sp-eyebrow .num:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(1rem, -50%);

  width: 4rem;
  height: 1px;
  background-color: #e1e1e1;
}

.sp-desc {
  font-size: 1.7rem;
  color: var(--color-text-secondary);
  line-height: 1.6;

  margin-top: 2.4rem;
}

.sp-desc.color-wh {
  color: #fff;
}

.sp-desc.divider {
  position: relative;
  padding-top: 2rem;
  margin-top: 2rem;
}

.sp-desc.divider:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);

  width: 6rem;
  height: 1px;

  background-color: var(--color-primary);
}

.sp-desc .em-text {
  font-size: 2rem;
  font-weight: 700;
}

@media (max-width: 1024px) {
  .sp-desc {
    font-size: 1.9rem;
  }
}

@media (max-width: 960px) {
  .flex-half {
    flex-direction: column;
  }

  .flex-half .flex-left,
  .flex-half .flex-right {
    width: 100%;
  }

  .tel-border-box:lang(en) {
    max-width: none;
  }
}

@media (max-width: 500px) {
  .sp-tit:lang(en) {
    font-size: 3.2rem;
  }

  .bg-doctor,
  .bg-doctor-short {
    background: url("/assets/img/pages/bg_doctor_blue_mo.png") no-repeat 80% 80% / cover;
  }

  .text-grad-box,
  .text-grad-box.sm {
    padding: 0.8em 3em;
  }

  .text-caution-box {
    text-align: left;
    padding: 0.9em 2em 0.9em 1.6em;
    border-radius: 4em;
  }

  .text-caution-box.sm {
    padding: 0.8em 2em 0.8em 1.6em;
  }
}

/* 
therapy-clay-list & therapy-clay-swiper 
=============================================================== 
*/
.therapy-clay-item {
  display: flex;
  flex-direction: row-reverse;

  width: 38rem;
  height: 22.5rem;

  position: relative;

  background: #f7f7f7;
  border-radius: 2.4rem;
  overflow: hidden;
}

.therapy-clay-item a {
  position: relative;

  display: flex;
  flex-direction: row-reverse;

  width: 100%;
  height: 100%;
  overflow: hidden;
}

.therapy-clay-item a:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 2.4rem;
  border: 0px solid var(--color-primary);

  transition: all 0.2s linear;
}

.therapy-clay-item a:hover:before {
  border-width: 0.6rem;
}

.therapy-clay-item .therapy-clay-bg {
  width: 54%;
  height: 100%;
}

.therapy-clay-item .therapy-clay-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.therapy-clay-item .therapy-clay-txt {
  width: 46%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 0 1.5rem 0 2rem;

  font-family: var(--font-arita-buri);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-primary);
}

.therapy-clay-item .therapy-clay-txt strong {
  font-family: var(--font-arita-buri);
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--color-primary);
}

.therapy-clay-item .therapy-clay-txt strong:lang(en) {
  margin-bottom: 6px;
}

.therapy-clay-item .therapy-clay-txt strong .fz16 {
  font-size: 1.6rem;

  margin-top: 1.2rem;
}

.therapy-clay-item .therapy-clay-txt p {
  font-family: var(--font-spoqa-han-sans-neo);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* list */
.therapy-clay-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 3.6rem;
}

.therapy-clay-list.list-col-3 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
}

.therapy-clay-list.list-col-2 {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}

.therapy-clay-list .therapy-clay-item .therapy-clay-txt {
  background: #fff;
}

/* swiper */
.therapy-clay-swiper .swiper-slide {
  width: 38rem;

  filter: grayscale(100%);
  transition: filter 0.8s ease;
}

.therapy-clay-swiper .swiper-slide-active {
  filter: grayscale(0%);
}

.therapy-clay-swiper-btn-prev,
.therapy-clay-swiper-btn-next {
  position: absolute;
  bottom: 50%;
  transform: translate(0, 50%);

  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  border: 1px solid #ccc;

  background: no-repeat 50% 50% / 60%;
  background-color: #fff;

  z-index: 10;
}

.therapy-clay-swiper-btn-prev {
  left: 17%;
  background-image: url("/assets/img/common/icon/btn-prev.svg");
}

.therapy-clay-swiper-btn-next {
  right: 17%;
  background-image: url("/assets/img/common/icon/btn-next.svg");
}

@media (max-width: 1024px) {
  .therapy-clay-item .therapy-clay-txt strong {
    font-size: 2rem;
  }

  .therapy-clay-item .therapy-clay-txt p {
    font-size: 1.7rem;
  }
}

@media (max-width: 500px) {
  .therapy-clay-item {
    width: 100%;
  }

  .therapy-clay-swiper-btn-prev {
    left: 20px;
  }

  .therapy-clay-swiper-btn-next {
    right: 20px;
  }
}

/* 
** parallax-bg
===============================================================
 */
.parallax-wrapper {
  position: relative;
  overflow: hidden;
}

.parallax-bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;

  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}

/* 
** full-width-image
===============================================================
 */
.full-width-image {
  width: 100%;
  height: 42rem;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover;

  margin-top: 6rem;
}

@media (max-width: 768px) {
  .full-width-image {
    height: 36rem;
  }
}

/* 
** what-is section
===============================================================
 */
.sc__what-is {
  background: url("/assets/img/pages/sc_what_is_bg.png") no-repeat 0 100% / 60% 92%;
  background-color: #f7f7f7;
}

.sc__what-is .flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4rem;
}

.sc__what-is .image-wrap {
  width: 50%;
}

.sc__what-is .title-wrap {
  width: 52rem;
  flex-shrink: 0;
}

.sc__what-is .title-wrap:lang(en) {
  width: 54rem;
}

.sc__what-is .title-wrap.lg {
  width: 57rem;
}

.sc__what-is .title-wrap .text-border-box {
  color: var(--color-primary);

  border-radius: 2.4rem;
  border: 1px solid var(--color-primary-light);

  padding: 1rem 2rem;
  margin-top: 2.4rem;
}

.sc__what-is .title-wrap .text-border-box strong {
  display: inline-block;
  margin-bottom: 1rem;

  font-size: 1.8rem;
  font-weight: 700;
}

.sc__what-is .card-list {
  margin-top: 2.4rem;

  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.sc__what-is .card-list .card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;

  padding: 2rem 1rem;

  border-radius: 2rem;
  border: 1px solid #e1e1e1;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 100%);
}

.sc__what-is .card-list.list-col-3 .card-item {
  width: calc(33.33% - 1rem * 2 / 3);
}

.sc__what-is .card-list.list-col-4 .card-item {
  width: calc(25% - 1rem * 3 / 4);
}

.sc__what-is .card-list .card-item .image {
  flex-shrink: 0;

  width: 7rem;
  height: 7.8rem;
}

.sc__what-is .card-list .card-item .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.sc__what-is .card-list .card-item .text {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-align: center;
}

@media (max-width: 960px) {
  .sc__what-is .flex-container {
    flex-direction: column-reverse;
  }

  .sc__what-is .image-wrap {
    width: 100%;
    max-width: 480px;
  }

  .sc__what-is .title-wrap,
  .sc__what-is .title-wrap.lg,
  .sc__what-is .title-wrap:lang(en) {
    width: 100%;
    /* max-width: 600px; */
  }
}

@media (max-width: 500px) {
  .sc__what-is .card-list.list-col-3 .card-item,
  .sc__what-is .card-list.list-col-4 .card-item {
    width: 100%;
  }

  .sc__what-is .card-list .card-item {
    flex-direction: row;
    padding: 1rem 2rem;
  }

  .sc__what-is .card-list .card-item .text {
    font-size: 1.8rem;
  }

  .sc__what-is .card-list .card-item .text:lang(en) {
    text-align: left;
  }
}

/* 
** point-list
===============================================================
 */
.point-list .point-item .sp-tit {
  color: var(--color-text-secondary);
}

.point-list .point-item .sp-eyebrow {
  display: flex;
  align-items: center;
  font-size: 1.8rem;
  font-weight: 400;
  color: #1c1c1c;
}

.point-list .point-item .sp-under-eyebrow {
  font-size: 2.4rem;
  color: var(--color-primary);
}

.point-list .point-item {
  padding: 10rem 0;

  border-radius: 0px 999px 999px 0px;
  background: #fff;
  box-shadow: 0px 0.4rem 6rem 0px rgba(177, 194, 206, 0.25);
}

.point-list .point-item .title-wrap {
  width: 50%;
  min-height: 36rem;
}

.point-list .point-item .image-wrap {
  width: 50%;
  height: 36rem;
}

.point-list .point-item .title-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-right: 10rem;
}

.point-list .point-item.reverse {
  border-radius: 999px 0px 0px 999px;
  box-shadow: -1rem 0.4rem 6rem 0px rgba(177, 194, 206, 0.25);
}

.point-list .point-item.reverse .df-center {
  flex-direction: row-reverse;
}

.point-list .point-item.reverse .title-wrap {
  padding-right: 0;
  padding-left: 10rem;
}

.point-list .point-item {
  transform: translate(-40px, 0);
  opacity: 0;
  transition: all 1s ease;
}

.point-list .point-item.reverse {
  transform: translate(40px, 0);
}

.point-list .point-item.active {
  transform: translate(0, 0);
  opacity: 1;
}

.point-list .point-item .sp-tit .anim-ltr {
  position: relative;
  display: inline-block;
}

@media (max-width: 1440px) {
  .point-list .point-item .title-wrap {
    padding-right: 6rem;
  }

  .point-list .point-item.reverse .title-wrap {
    padding-left: 6rem;
  }

  .point-list .point-item .image-wrap {
    margin-right: 6rem;
  }

  .point-list .point-item.reverse .image-wrap {
    margin-right: 0;
    margin-left: 6rem;
  }
}

@media (max-width: 960px) {
  .point-list .point-item {
    padding: 8rem 0 6rem;
    border-radius: 0 12rem 12rem 0;
  }

  .point-list .point-item.reverse {
    border-radius: 12rem 0 0 12rem;
  }

  .point-list .point-item .df-center,
  .point-list .point-item.reverse .df-center {
    flex-direction: column;
  }

  .point-list .point-item .title-wrap {
    width: 100%;
    height: auto;
    min-height: auto;
    padding-right: 0;
    margin-bottom: 4rem;
  }

  .point-list .point-item.reverse .title-wrap {
    padding-left: 0;
  }

  .point-list .point-item .image-wrap {
    width: 100%;
    max-width: 500px;
    height: auto;
    margin-right: 0;
  }

  .point-list .point-item.reverse .image-wrap {
    margin-left: 0;
  }
}

@media (max-width: 500px) {
  .point-list .point-item {
    border-radius: 0 6rem 6rem 0;
  }

  .point-list .point-item.reverse {
    border-radius: 6rem 0 0 6rem;
  }
}

/* 
** border-circle-list
===============================================================
 */
.border-circle-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.6rem;
}

.border-circle-list.list-col-4 {
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

.border-circle-list.list-col-3 {
  width: 100%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.border-circle-list .border-circle-item {
  position: relative;

  width: 30rem;
  height: 30rem;

  box-shadow: 0px 0.4rem 2rem 0px rgba(74, 102, 123, 0.25);
  border-radius: 50%;
}

.border-circle-list .border-circle-item:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;
  border: 0.6rem solid var(--color-primary);
  border-radius: 50%;
}

.border-circle-list .border-circle-item + .border-circle-item:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-100%, -50%);

  width: 2.6rem;
  height: 2px;
  background: rgba(50, 118, 161, 0.2);
}

.border-circle-list.list-col-4 .border-circle-item:nth-child(4n + 1):after {
  display: none;
}

.border-circle-list.list-col-3 .border-circle-item:nth-child(3n + 1):after {
  display: none;
}

.border-circle-list .border-circle-item .image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}

.border-circle-list .border-circle-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.border-circle-list .border-circle-item .text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
  line-height: 1.4;
}

@media (max-width: 500px) {
  .border-circle-list .border-circle-item + .border-circle-item:after {
    top: 0;
    left: 50%;
    transform: translate(-50%, -100%);

    width: 2px;
    height: 2.6rem;
  }
}

/* 
** grad-check-list
===============================================================
 */
.grad-check-list {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  row-gap: 3rem;
  column-gap: 2.4rem;

  margin: 0 auto 6rem;
}

.grad-check-list .grad-check-item {
  width: calc(50% - 1.2rem);

  border-radius: 2rem;
  background: linear-gradient(90deg, #3276a1 0%, #2c4c9c 100%);
  box-shadow: 0px 4px 4px 0px rgba(28, 34, 56, 0.25);

  font-size: 2.4rem;
  padding: 0.84em 1.6em;

  display: flex;
  align-items: center;
}

.grad-check-list .grad-check-item.col-1 {
  width: 100%;
}

.grad-check-list .grad-check-item .text {
  position: relative;

  font-weight: 700;
  color: #fff;
  text-align: center;

  width: 100%;

  margin-left: 2em;
}

.grad-check-list .grad-check-item .text:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -2em;
  transform: translate(0, -50%);

  width: 1.2em;
  height: 1.2em;

  background: url("/assets/img/common/icon/check-point-wh.svg") no-repeat center center / contain;
}

@media (max-width: 1024px) {
  .grad-check-list .grad-check-item .text {
    font-size: 2.2rem;
  }
}

@media (max-width: 768px) {
  .grad-check-list {
    flex-direction: column;
    align-items: center;

    row-gap: 1.5rem;
  }

  .grad-check-list .grad-check-item {
    width: 100%;
    max-width: 500px;
  }
}

/* 
** fill-circle-list
===============================================================
 */
.fill-circle-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.fill-circle-list.list-col-4 {
  width: 100%;
  max-width: 1360px;
  margin-left: auto;
  margin-right: auto;
}

.fill-circle-list.list-col-3 {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

.fill-circle-list .fill-circle-item {
  width: 32.5rem;
  height: 32.5rem;
  border-radius: 50%;
  background: #e6f0f6;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.fill-circle-list .fill-circle-item .image {
  height: 13rem;
}

.fill-circle-list .fill-circle-item .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fill-circle-list .fill-circle-item .text {
  font-size: 1.8rem;
  color: var(--color-primary);
  text-align: center;

  margin-top: 1rem;
}

.fill-circle-list .fill-circle-item .text .bold {
  display: inline-block;
  margin-bottom: 0.2em;

  font-size: 2rem;
}

/* 
** nametag-list
===============================================================
 */
.nametag-list {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.nametag-list .nametag-item {
  display: flex;
  flex-direction: column;

  width: 32.5rem;

  border-radius: 2rem;
  border: 1px solid #e1e1e1;

  overflow: hidden;
}

.nametag-list .nametag-item .text {
  font-size: 1.6rem;
  text-align: center;
}

.nametag-list .nametag-item .text .name {
  color: #fff;

  padding: 0.6em 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3em;

  background: var(--color-primary);
}

.nametag-list .nametag-item .text .name strong {
  font-size: 2rem;
  font-weight: 700;
}

.nametag-list .nametag-item .text .desc {
  min-height: 7em;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--color-text-secondary);
  padding: 1em 1.4em;
}

.nametag-list .nametag-item .image {
  background: #f5f5f5;
  height: 18rem;
  padding: 1rem 0;
}

.nametag-list .nametag-item .image.h-260 {
  height: 26rem;
  padding: 0;
}

.nametag-list .nametag-item .image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.nametag-list .nametag-item .image.w-full {
  width: 100%;
}

.nametag-list .nametag-item .image.w-full img {
  object-fit: cover;
}

@media (max-width: 1024px) {
  .nametag-list .nametag-item .text {
    font-size: 1.8rem;
  }
}

@media (max-width: 500px) {
  .nametag-list .nametag-item {
    width: 100%;
    max-width: 40rem;
  }
}

/* 
** thumbnail-card-list
===============================================================
 */
.thumbnail-card-list {
  width: 100%;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.thumbnail-card-list.g-20 {
  --gap: 2rem;
  gap: var(--gap);
}

.thumbnail-card-list.g-30 {
  --gap: 3rem;
  gap: var(--gap);
}

.thumbnail-card-list.g-60 {
  --gap: 6rem;
  gap: var(--gap);
}

.thumbnail-card-list .thumbnail-card-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  max-width: 42rem;
  padding: 5rem 4rem;

  background: #fff;
  border-radius: 5rem;
  box-shadow: 0px 4px 16px 0px #a4c2d0;
}

/* .thumbnail-card-list.list-col-3 .thumbnail-card-item {
  flex: 0 1 calc((100% - 2 * var(--gap)) / 3);
}

.thumbnail-card-list.list-col-4 .thumbnail-card-item {
  flex: 0 1 calc((100% - 3 * var(--gap)) / 4);
} */

.thumbnail-card-list.list-col-2 .thumbnail-card-item {
  width: calc((100% - 1 * var(--gap)) / 2);
  max-width: 60rem;
}

.thumbnail-card-list.list-col-3 .thumbnail-card-item {
  width: calc((100% - 2 * var(--gap)) / 3);
}

.thumbnail-card-list.list-col-4 .thumbnail-card-item {
  width: calc((100% - 3 * var(--gap)) / 4);
}

.thumbnail-card-list.blue .thumbnail-card-item {
  background: #e6f0f6;
  box-shadow: none;
}

.thumbnail-card-list .thumbnail-card-item .image {
  height: 13rem;
}

.thumbnail-card-list .thumbnail-card-item .image.h-180 {
  height: 18rem;
}

.thumbnail-card-list .thumbnail-card-item .image.h-160 {
  height: 16rem;
}

.thumbnail-card-list .thumbnail-card-item .image.h-240 {
  height: 24rem;
}

.thumbnail-card-list .thumbnail-card-item .image.w-full {
  width: 100%;
}

.thumbnail-card-list .thumbnail-card-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.thumbnail-card-list .thumbnail-card-item .image.w-full img {
  object-fit: cover;
}

.thumbnail-card-list .thumbnail-card-item .text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;

  font-size: 1.7rem;
  color: var(--color-text-secondary);

  text-align: center;
}

.thumbnail-card-list .thumbnail-card-item strong {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-primary);
}

@media (max-width: 1280px) {
  .thumbnail-card-list.g-60 {
    --gap: 3rem;
  }

  .thumbnail-card-list .thumbnail-card-item .image {
    height: 11.7rem;
  }

  .thumbnail-card-list .thumbnail-card-item .image.h-180 {
    height: 16.2rem;
  }

  .thumbnail-card-list .thumbnail-card-item .image.h-160 {
    height: 14.4rem;
  }

  .thumbnail-card-list .thumbnail-card-item .image.h-240 {
    height: 21.6rem;
  }

  .thumbnail-card-list.list-col-4 .thumbnail-card-item {
    width: calc((100% - 1 * var(--gap)) / 2);
  }
}

@media (max-width: 1024px) {
  .thumbnail-card-list .thumbnail-card-item .text {
    font-size: 1.9rem;
  }
}

@media (max-width: 960px) {
  .thumbnail-card-list.list-col-4 .thumbnail-card-item {
    width: 100%;
    max-width: 480px;
  }

  .thumbnail-card-list.list-col-3 .thumbnail-card-item {
    width: 100%;
    max-width: 480px;
    padding: 3rem 4rem;
  }

  .thumbnail-card-list.list-col-2 .thumbnail-card-item {
    width: 100%;
    max-width: 480px;
    padding: 4rem 4rem;
  }
}

/* 
** process-list
===============================================================
 */
.process-list-wrap {
  display: flex;
  gap: 6rem;
}

.process-list-wrap .left-area {
  width: 42%;
  max-width: 550px;
}

.process-list-wrap .right-area {
  flex: 1;
  width: 100%;
}

.process-list-wrap .process-item {
  position: relative;

  display: flex;
  align-items: flex-start;
  gap: 1rem;

  padding-left: 9rem;

  font-size: 2.4rem;
}

.process-list-wrap .process-item:before {
  content: "";

  position: absolute;
  top: 50%;
  left: 0;

  transform: translate(0, -50%);

  width: 3rem;
  height: 3rem;
  background: url("/assets/img/common/icon/point-circle.svg") no-repeat center center / contain;
}

.process-list-wrap .process-item:after {
  content: "";

  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(1.5rem, 1.5rem);

  width: 1px;
  height: calc(50% + 3rem);
  background: rgba(50, 118, 161, 0.5);
}

.process-list-wrap .process-item .num:after {
  content: "";

  position: absolute;
  bottom: 50%;
  left: 0;
  transform: translate(1.5rem, -1.5rem);

  width: 1px;
  height: 50%;
  background: rgba(50, 118, 161, 0.5);
}

.process-list-wrap .process-item:first-child .num:after {
  display: none;
}

.process-list-wrap .process-item:last-child:after {
  display: none;
}

.process-list-wrap .process-item + .process-item {
  margin-top: 6rem;
}

.process-list-wrap .process-item .num {
  flex-shrink: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 0.4em 0.6em;

  border-radius: 1rem;
  background: var(--color-primary-light);

  font-weight: 700;
  color: #fff;
}

.process-list-wrap .process-item .text {
  flex: 1;
}

.process-list-wrap .process-item .text .subject {
  display: flex;
  align-items: center;

  padding: 0.4em 4rem;
  margin-bottom: 2rem;

  border-radius: 1rem;
  background: rgba(75, 91, 98, 0.1);
  backdrop-filter: blur(4px);

  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-primary-dark);
}

.process-list-wrap .process-item .text .desc {
  font-size: 2rem;
  color: var(--color-text-secondary);

  padding-left: 4rem;
  padding-right: 2rem;
}

@media (max-width: 960px) {
  .process-list-wrap {
    flex-direction: column;
    gap: 4rem;
  }

  .process-list-wrap .left-area {
    width: 100%;
    max-width: none;
  }

  .process-list-wrap .process-item {
    padding-left: 4rem;
  }

  .process-list-wrap .process-item .text .subject {
    padding: 0.4em 2rem;
  }

  .process-list-wrap .process-item .text .desc {
    padding-left: 2rem;
  }
}

/* 
** hoverable-card-list
===============================================================
 */
.hoverable-card-list-wrap {
  background: linear-gradient(90deg, #f6fdff 0%, #deedf6 100%);
  padding: 6rem 0;
}

.hoverable-card-list-wrap .list-caption {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4rem;

  margin-bottom: 4rem;
}

.hoverable-card-list-wrap .list-caption strong {
  flex-shrink: 0;

  font-size: 3.2rem;
  color: var(--color-primary);
  font-weight: 700;

  border-radius: 999px;
  border: 2px solid var(--color-primary);

  padding: 0.8rem 2rem;
}

.hoverable-card-list-wrap .list-caption p {
  max-width: 56rem;
  color: var(--color-text-secondary);
}

.hoverable-card-list {
  display: flex;
  gap: 1rem;
}

.swiper-hoverable-card-list .card-item,
.hoverable-card-list .card-item {
  position: relative;

  border-radius: 2.4rem;
  overflow: hidden;
}

.swiper-hoverable-card-list .card-item .text,
.hoverable-card-list .card-item .text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 90%;

  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  text-align: center;

  z-index: 2;
}

.swiper-hoverable-card-list .card-item .image,
.hoverable-card-list .card-item .image {
  position: relative;
  background: #d9d9d9;

  border-radius: 2.4rem;
  overflow: hidden;

  transition: transform 0.2s linear;
}

.swiper-hoverable-card-list .card-item .image:before,
.hoverable-card-list .card-item .image:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #7cb9df;
  opacity: 0.5;
  transition: opacity 0.3s ease;
}

.swiper-hoverable-card-list .card-item .image img,
.hoverable-card-list .card-item .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;

  opacity: 0.4;
  mix-blend-mode: multiply;
  transition: opacity 0.3s ease;
}

.swiper-hoverable-card-list .swiper-slide-active .card-item .image,
.hoverable-card-list .card-item:hover .image {
  transform: scaleY(1.06);
}

.swiper-hoverable-card-list .swiper-slide-active .card-item .image img,
.hoverable-card-list .card-item:hover .image img {
  opacity: 0.7;
}

.swiper-hoverable-card-list .swiper-slide-active .card-item .image:before,
.hoverable-card-list .card-item:hover .image:before {
  background: #3276a1;
  opacity: 1;
}

/* 
** check-label-list
===============================================================
 */
.check-label-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  flex: 1;
}

.check-label-list .check-label-item {
  position: relative;

  display: flex;
  align-items: center;

  font-size: 1.7rem;
  color: var(--color-text-secondary);

  background: #fff;
  border-radius: 9999px;
  border: 3px solid var(--color-primary);

  padding: 0.7em 1.4em 0.7em 3.4em;
}

.check-label-list .check-label-item:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1em;
  transform: translate(0, -50%);
  width: 1.8em;
  height: 1.8em;

  background: url("/assets/img/common/icon/check-point.svg") no-repeat 50% 50% / contain;
}

.check-label-list .check-label-item strong {
  flex-shrink: 0;

  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;

  width: 11.6em;
  margin-right: 0.6em;

  border-right: 1px solid #e1e1e1;
}

@media (max-width: 1024px) {
  .check-label-list .check-label-item {
    font-size: 1.9rem;
  }

  .check-label-list .check-label-item strong {
    font-size: 2rem;
  }
}

@media (max-width: 960px) {
  .check-label-list .check-label-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;

    padding: 1em 1.4em 0.7em 4em;
  }

  .check-label-list .check-label-item strong {
    flex-shrink: auto;
    width: 100%;
    border-right: none;
    line-height: 1.2;
  }
}

/* 
** numbering-list
===============================================================
 */

.numbering-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.numbering-list .numbering-item {
  display: flex;
  align-items: center;
}

.numbering-list .numbering-item.reverse {
  flex-direction: row-reverse;
}

.numbering-list .numbering-item .image {
  width: 48%;
  flex-shrink: 0;
}

.numbering-list .numbering-item .text {
  flex: 1;
  width: 100%;
  padding-left: 0;
  padding-right: 4rem;
}

.numbering-list .numbering-item.reverse .text {
  padding-left: 4rem;
  padding-right: 0;
}

.numbering-list .numbering-item .text strong {
  display: flex;
  align-items: center;

  font-size: 2.4rem;
  font-weight: 700;
  color: var(--color-primary);

  margin-bottom: 2.4rem;
}

.numbering-list .numbering-item .text strong .num {
  position: relative;

  font-family: var(--font-poppins);
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-primary);

  margin-right: 6rem;
}

.numbering-list .numbering-item .text strong .num:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translate(1rem, -50%);

  width: 4rem;
  height: 1px;
  background-color: var(--color-primary);
}

.numbering-list .numbering-item .text p {
  font-size: 1.7rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.numbering-list .numbering-item .text p + p {
  margin-top: 1.2rem;
}

.sc__sportInjury-process .parallax-bg {
  background: url("/assets/img/pages/sports-injury/sportsInjury_sc3_process_bg.png") no-repeat 50% 50% / cover;
}

@media (max-width: 1024px) {
  .numbering-list .numbering-item.reverse,
  .numbering-list .numbering-item,
  .sc__epiSteroidRisks-explain .flex-container {
    flex-direction: column;
  }

  .numbering-list .numbering-list {
    gap: 6rem;
  }

  .numbering-list .numbering-item .text,
  .sc__epiSteroidRisks-explain .flex-container .title-wrap {
    padding-right: 0;
  }

  .numbering-list .numbering-item.reverse .text {
    padding-left: 0;
  }

  .numbering-list .numbering-item .image,
  .sc__epiSteroidRisks-explain .flex-container .image-wrap {
    width: 100%;
    max-width: 480px;
  }

  .numbering-list .numbering-item .text {
    margin-bottom: 2rem;
  }

  .numbering-list .numbering-item .text strong {
    margin-bottom: 1rem;
  }

  .numbering-list .numbering-item .text p {
    font-size: 1.9rem;
  }
}