@charset "UTF-8";
.sub {
  background-position: top;
  background-repeat: no-repeat;
}

.sub_tt01 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #5090a0;
}

.sub_arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  filter: none;
}

.con02.qcon02 {
  padding-bottom: 6.2vw;
}
.con02.qcon02 .con02_head {
  padding-top: 7.5vw;
  padding-bottom: 6.8vw;
  background-image: url(/images/qcon02_03.png);
}
.con02.qcon02 .head_desc {
  color: #282828;
}
.con02.qcon02 .con02_body {
  margin-top: 2vw;
}
.con02.qcon02 .con02_left {
  width: 50.3%;
  height: 43.5vw;
  background-color: #0e1220;
  background-image: url(/images/qcon02_01.png);
  background-size: cover;
  background-position: center;
}
.con02.qcon02 .con02_right {
  width: 42.5%;
  padding-top: 6.7vw;
}
.con02.qcon02 .right_eyebrow {
  color: #183436;
}
.con02.qcon02 .right_desc {
  color: #282828;
}
.con02.qcon02 .right_desc b {
  font-weight: 800;
}
.con02.qcon02 .right_desc + .right_desc {
  margin-top: 1.2vw;
}

.qcon02_clarity_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1165); /* qcon02_02.png 원본 */
  aspect-ratio: 1165/278;
  left: 0;
  bottom: -0.5vw;
}

.gcon03.qcon03 {
  padding-top: 6.8vw;
}

.qcon03 .gcon03_left {
  background-color: #000000;
  background-image: url(/images/qcon03_01.png);
  padding-top: 25vw; /* (2974-2495)/1915 — card top → num top */
}

.qcon03 .gcon03_right {
  background-color: #13262a;
  background-image: url(/images/qcon03_03.png);
  padding-top: 25vw;
}

.qcon03 .gcon03_left .gcon03_title,
.qcon03 .gcon03_right .gcon03_title {
  color: #fff;
}

.qcon03 .gcon03_left .gcon03_desc,
.qcon03 .gcon03_right .gcon03_desc {
  color: #fff;
}

.qcon03_banner {
  padding-top: 8.7vw;
  padding-bottom: 8.7vw;
  background-color: #0e1220;
  background-image: url(/images/qcon03_05.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.banner_tt01 {
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  line-height: 1.61;
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
  font-family: "Pretendard Variable", sans-serif;
}
.banner_tt01 b {
  font-weight: 800;
}

.gcon04.qcon04 {
  background-color: #183436;
  padding-top: 5.5vw;
  padding-bottom: 8.7vw;
}

.qcon04_kp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 270); /* qcon04_01.png 원본 */
  aspect-ratio: 270/30;
}

.qcon04 .c4b {
  margin-top: 4.65vw;
}

.qcon04_card {
  background-color: #ffffff;
}

.qcon04_card .gcon04_card_row01 {
  background-color: #f0f7f7;
  overflow: hidden;
}

.qcon04_card .gcon04_card_row02 {
  padding-top: 8.5vw;
  padding-left: 4.5vw;
}

.qcon04_eye {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qcon04_card01 .qcon04_eye {
  width: calc(var(--px) * 87);
  aspect-ratio: 87/24;
}

.qcon04_card02 .qcon04_eye {
  width: calc(var(--px) * 74);
  aspect-ratio: 74/24;
}

.qcon04_card03 .qcon04_eye {
  width: calc(var(--px) * 68);
  aspect-ratio: 68/21;
}

.qcon04_title {
  margin-top: 1.4vw;
  font-weight: 800; /* PSD card title 800, 공통 c4a_title 기본 500 override */
  text-align: left !important;
}

.qcon04_desc {
  margin-top: 2.5vw;
  text-align: left !important;
}

.qcon04_desc + .qcon04_desc {
  margin-top: 1.2vw;
}

.qcon04_photo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qcon04_card01 .qcon04_photo {
  width: 50.1%;
  aspect-ratio: 392/884;
  top: -11.3%;
  left: 25.8%;
}

.qcon04_card02 .qcon04_photo {
  width: 51%;
  aspect-ratio: 399/713;
  top: -6.4%;
  left: 23.6%;
}

.qcon04_card03 .qcon04_photo {
  width: 71%;
  aspect-ratio: 556/1194;
  top: 10.7%;
  left: 14.4%;
}

.qcon04_num {
  display: flex;
  justify-content: center;
  align-items: center;
}

.qcon04_card01 .qcon04_num {
  width: 13.2%;
  aspect-ratio: 206/164;
  left: 82.7%;
  top: 3.45vw;
}

.qcon04_card02 .qcon04_num {
  width: 15%;
  aspect-ratio: 234/163;
  left: 81.8%;
  top: 3.5vw;
}

.qcon04_card03 .qcon04_num {
  width: 16.5%;
  aspect-ratio: 258/177;
  left: 80.8%;
  top: 2.77vw;
}

.gcon05.qcon05 .gcon05_num {
  color: #558386; /* 실제 이미지(qcon05_02~07) 추출 색 — 다크 청록 */
}

.gcon07.qcon06 {
  background: #f0f7f7;
  padding-top: 5.7vw;
  padding-bottom: 6vw;
}
.gcon07.qcon06 .gcon07_eyebrow {
  color: #558386;
}
.gcon07.qcon06 .gcon07_num {
  color: #558386;
}

@media (max-width: 599px) {
  .sub::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    top: 0%;
    background-color: rgba(0, 0, 0, 0.2823529412);
  }
  .con02.qcon02 {
    padding-bottom: 14vw;
  }
  .con02.qcon02 .con02_head {
    padding-top: 16vw;
    padding-bottom: 14vw;
  }
  .con02.qcon02 .head_title {
    font-size: 5.5vw;
    line-height: 1.4;
  }
  .con02.qcon02 .head_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.65;
    padding: 0 6%;
    box-sizing: border-box;
  }
  .con02.qcon02 .con02_body {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
  }
  .con02.qcon02 .con02_left {
    width: 100%;
    height: 86.6vw;
  }
  .con02.qcon02 .con02_right {
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 12vw 6% 0;
    box-sizing: border-box;
  }
  .con02.qcon02 .right_eyebrow {
    font-size: 3.5vw;
    line-height: 1.5;
    text-align: center;
  }
  .con02.qcon02 .right_title {
    margin-top: 3vw;
    font-size: 6.5vw;
    line-height: 1.3;
  }
  .con02.qcon02 .right_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.65;
    text-align: center;
  }
  .con02.qcon02 .right_desc + .right_desc {
    margin-top: 3vw;
  }
  .qcon02_clarity_img {
    position: static;
    width: 90vw;
    margin-top: 6vw;
    bottom: auto;
    left: auto;
  }
  br.mobile-pc {
    display: block;
  }
  /* ----- qcon03 — 2-col → 세로 스택 ----- */
  .gcon03.qcon03 {
    padding-top: 0;
  }
  .qcon03 .gcon03_left,
  .qcon03 .gcon03_right {
    padding-top: 15vw;
  }
  /* 배경 이미지 위 어두운 반투명 오버레이 (배경 ↔ 텍스트 가독성) — sub11 mcon03 동일 패턴 */
  .qcon03 .gcon03_left::before,
  .qcon03 .gcon03_right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }
  /* 텍스트/num 은 오버레이 위로 (title/desc 는 rltv 없어 static → ::before 아래 깔리는 문제 해결) */
  .qcon03 .gcon03_num,
  .qcon03 .gcon03_title,
  .qcon03 .gcon03_desc {
    position: relative;
    z-index: 1;
  }
  /* ----- qcon03_banner ----- */
  .qcon03_banner {
    padding-top: 14vw;
    padding-bottom: 14vw;
  }
  .banner_tt01 {
    font-size: 3.3vw;
    line-height: 1.65;
    padding: 0 6%;
    box-sizing: border-box;
  }
  /* ----- qcon04 — Brightening Program ----- */
  .gcon04.qcon04 {
    padding-top: 14vw;
    padding-bottom: 14vw;
  }
  .qcon04_kp {
    width: 50vw;
    aspect-ratio: 270/30;
  }
  .qcon04_card {
    flex-direction: column;
    align-items: stretch;
  }
  .qcon04_card .gcon04_card_row {
    width: 100%;
  }
  .qcon04_card .gcon04_card_row02 {
    width: 100%;
    padding: 8vw 6%;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
  }
  .qcon04_eye {
    justify-content: center;
  }
  /* 자연 비율 유지 — card01(87) 기준 18vw, 나머지 동일 비례 */
  .qcon04_card01 .qcon04_eye {
    width: 18vw;
  } /* 87 기준 */
  .qcon04_card02 .qcon04_eye {
    width: 15.3vw;
  } /* 74 × 18/87 */
  .qcon04_card03 .qcon04_eye {
    width: 14.1vw;
  } /* 68 × 18/87 */
  .qcon04_title {
    margin-top: 3vw;
    text-align: center !important;
  }
  .qcon04_desc {
    margin-top: 4vw;
    text-align: center !important;
  }
  .qcon04_desc + .qcon04_desc {
    margin-top: 3vw;
  }
  .qcon04_card01 .qcon04_num,
  .qcon04_card02 .qcon04_num,
  .qcon04_card03 .qcon04_num {
    width: 22vw;
    left: auto;
    right: 4%;
    top: 4vw;
  }
  /* ----- qcon05 — 추천대상 순서 재배치 ----- */
  .qcon05 .gcon05_row,
  .qcon05 .gcon05_row_2 {
    display: contents;
  }
  .qcon05 .gcon05_item:has(.gcon05_num_01) {
    order: 1;
  }
  .qcon05 .gcon05_item:has(.gcon05_num_02) {
    order: 2;
  }
  .qcon05 .gcon05_item:has(.gcon05_num_03) {
    order: 3;
  }
  .qcon05 .gcon05_item:has(.gcon05_num_04) {
    order: 4;
  }
  .qcon05 .gcon05_item:has(.gcon05_num_05) {
    order: 5;
  }
  .qcon05 .gcon05_item:has(.gcon05_num_06) {
    order: 6;
  }
  /* ----- qcon06 — 시술 후 주의사항 ----- */
  .qcon06 .gcon07_text {
    white-space: normal;
  }
}