@charset "UTF-8";
.sub__title h2 span::after {
  background: url(../img/melasma-program/title-icon.svg) center/contain no-repeat;
}

.equip__wrapper .equip__list {
  color: var(--point-color);
}

.equip__wrapper .equip__hd {
  padding-top: 4em;
}

/* ========================= 솔루션 ========================= */
.sub__solution .sol__group.--01 {
  background: url(../img/melasma-program/solution/01.png) center/cover no-repeat;
  color: #9a2d03;
}
.sub__solution .sol__group.--02 {
  background: url(../img/melasma-program/solution/02.png) center/cover no-repeat;
}

/* ========================= 포인트 ========================= */
.sub__point .swiper-slide.--01::before {
  background: url(../img/melasma-program/point/01.png) center/contain no-repeat;
}
.sub__point .swiper-slide.--02::before {
  background: url(../img/melasma-program/point/02.png) center/contain no-repeat;
}
.sub__point .swiper-slide.--03::before {
  background: url(../img/melasma-program/point/03.png) center/contain no-repeat;
}

/* ========================= 설명 박스 A ========================= */
.sub__A {
  background-image: url(../img/melasma-program/sub_A/bg.webp);
}
.sub__A .desc__wrapper {
  color: #7f665d;
}
.sub__A .desc__wrapper .desc__img {
  background: url(../img/melasma-program/sub_A/cost.png) left center/contain no-repeat;
}
.sub__A .desc__wrapper h4 {
  color: #21140f;
}
.sub__A .desc__wrapper h5 {
  color: #593f35;
}

/* ========================= 설명 박스 B ========================= */
.sub__B .title__img {
  max-width: 462px;
  aspect-ratio: 462/460;
  background: url(../img/melasma-program/sub_B/left.png) center/cover no-repeat;
}
.sub__B .B__img {
  background: url(../img/melasma-program/sub_B/right.png) left center/cover no-repeat;
}

/* ==================== 서브 레이어 ==================== */
.sub__layer .layer__wrapper {
  width: 90%;
  max-width: 540px;
  aspect-ratio: 540/640;
  background: url(../img/melasma-program/layer/layer.svg) center/contain no-repeat;
}
.sub__layer .layer__img {
  width: 516px;
  aspect-ratio: 516/371;
}
.sub__layer .layer__group dl {
  position: relative;
  z-index: 2;
  padding: 18px 22px;
  border-radius: 0 0 16px 16px;
  background: rgba(255, 250, 242, 0.92);
  border: 1px solid rgba(145, 85, 30, 0.12);
  box-shadow: 0 10px 30px rgba(80, 45, 20, 0.08);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.sub__layer .layer__group dl dt {
  margin-bottom: 8px;
  font-weight: 600;
}
.sub__layer .layer__group dl dd {
  line-height: 1.7;
}
.sub__layer .layer__group[data-label=side-effect] {
  top: 22%;
  left: 2%;
}
.sub__layer .layer__group[data-label=side-effect] .layer__img {
  background: url(../img/melasma-program/layer/side-effect.png) center/contain no-repeat;
}
.sub__layer .layer__group[data-label=side-effect] .group__inner {
  top: -3em;
}
.sub__layer .layer__group[data-label=combining] {
  top: 40.5%;
  left: 63%;
}
.sub__layer .layer__group[data-label=combining] .layer__img {
  background: url(../img/melasma-program/layer/combining.png) center/contain no-repeat;
}
.sub__layer .layer__group[data-label=combining] .group__inner {
  left: -1em;
}
.sub__layer .layer__group[data-label=curve] {
  top: 10%;
  right: 5%;
}
.sub__layer .layer__group[data-label=curve] .layer__img {
  background: url(../img/melasma-program/layer/curve.png) center/contain no-repeat;
}

@media (max-width: 1024px) {
  .sub__layer .layer__group[data-label=side-effect] .layer__toggle {
    top: 22%;
    left: 2%;
  }
  .sub__layer .layer__group[data-label=combining] .layer__toggle {
    top: 40.5%;
    left: 63%;
  }
  .sub__layer .layer__group[data-label=curve] .layer__toggle {
    top: 10%;
    right: 5%;
  }
}
/* ========================= 플로우 ========================= */
.sub__flow {
  padding-top: 1em;
}

.sub__flow .swiper-slide {
  width: 13em;
}

/* ========================= 스텝 ========================= */
.sub__step {
  padding-top: 2em;
}
.sub__step .swiper-slide.--01::before {
  background: url(../img/melasma-program/step/01.png) center/contain no-repeat;
}
.sub__step .swiper-slide.--02::before {
  background: url(../img/melasma-program/step/02.png) center/contain no-repeat;
}
.sub__step .swiper-slide.--03::before {
  background: url(../img/melasma-program/step/03.png) center/contain no-repeat;
}

/* ========================= 스텝 ========================= */
.sub__exp .exp__group.--01 .exp__img {
  background: url(../img/melasma-program/exp/01.png) center/cover no-repeat;
}
.sub__exp .exp__group.--02 .exp__img {
  background: url(../img/melasma-program/exp/02.png) center/cover no-repeat;
}
.sub__exp .exp__group.--03 .exp__img {
  background: url(../img/melasma-program/exp/03.png) center/cover no-repeat;
}
.sub__exp .exp__group.--04 .exp__img {
  background: url(../img/melasma-program/exp/04.png) center/cover no-repeat;
}
.sub__exp .exp__group.--05 .exp__img {
  background: url(../img/melasma-program/exp/05.png) center/cover no-repeat;
}
.sub__exp .exp__group.--06 .exp__img {
  background: url(../img/melasma-program/exp/06.png) center/cover no-repeat;
}

/* ========================= 단계 ========================= */
.sub__proc {
  background-image: url(../img/melasma-program/proc/bg.webp);
}/*# sourceMappingURL=melasma-program.min.css.map */