@charset "UTF-8";
.sub_tt01 {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #4090c0;
}

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

.con02 .con02_head {
  padding-top: 7.5vw;
  padding-bottom: 10.8vw;
  background-image: url(/images/mcon02_01.png);
  background-size: 100%;
  background-position: top center;
  background-repeat: no-repeat;
}
.con02 .con02_left {
  background-image: url(/images/mcon02_02.png);
}
.con02 .con02_right {
  width: 42.5%;
  padding-top: 9.8vw;
}
.con02 .right_eyebrow {
  color: #4394c3;
}

.mcon02_skinbooster {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 1356);
  aspect-ratio: 1356/204;
  margin-top: 6.8vw;
}

.gcon03 {
  padding-top: 6.8vw;
}

.gcon03_left {
  background-color: #080000;
  background-image: url(/images/mcon03_01.png);
  padding-top: 11.3vw;
}

.gcon03_right {
  background-color: #1b3458;
  background-image: url(/images/mcon03_03.png);
  padding-top: 11.3vw;
}

.gcon03_right .gcon03_title {
  color: #fff;
}

.gcon03_right .gcon03_desc {
  color: #fff;
}

.mcon03_banner {
  padding-top: 7.6vw;
  padding-bottom: 6.5vw;
  background-color: #0d1b2f;
  background-image: url(/images/mcon03_05.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.mcon03_banner_tt01 {
  font-size: calc(var(--px) * 24);
  font-weight: 800;
  line-height: 1.21;
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
}

.mcon03_banner_tt02 {
  margin-top: 1.5vw;
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  line-height: 1.61;
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
}

.mcon04 {
  background-color: #182a43;
}
.mcon04 .lconCommon_row_top_tt01 {
  color: #3f90c3;
}
.mcon04 .lconCommon_row_bot_tt01 {
  color: #c2d0e3;
}
.mcon04 .lconCommon_row02 {
  background-color: #46698f;
  background-image: url(/images/mcon04_04.png);
  background-size: cover;
  background-position: center;
}

.mcon04_vial {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34.4%;
  aspect-ratio: 331/535;
  left: 31.7%;
  top: 20.1%;
  animation: float_y 3s ease-in-out infinite;
}

.mcon04_badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 22.2%;
  aspect-ratio: 214/214;
  right: 4.9%;
  top: 6.8%;
}

.mcon05 {
  background-color: #0d1c1c;
}
.mcon05 .lconCommon_row_top_tt01 {
  color: #448383;
}
.mcon05 .lconCommon_row_bot_tt01 {
  color: #86a5a5;
}
.mcon05 .lconCommon_row02 {
  background-color: #46698f;
  background-image: url(/images/mcon05_03.png);
  background-size: cover;
  background-position: center;
}

.gcon04.mcon05_bot {
  background-color: #172a2a;
  padding-top: 5.48vw;
  padding-bottom: 10.5vw;
}

.mcon05_bot_kp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 196);
  aspect-ratio: 196/30;
}

/* .mcon05_bot .c4b override 제거 — 공통 .c4b 그대로 사용 */
.mcon05_bot_card {
  align-items: stretch;
}

.mcon05_bot_row_photo {
  background-color: #f4fdfd;
}

.mcon05_bot_row_text {
  padding-top: 8.72vw;
  padding-left: 5.1%;
}

.mcon05_bot_card01 .mcon05_bot_eye {
  width: calc(var(--px) * 88);
  aspect-ratio: 88/18;
}

.mcon05_bot_card02 .mcon05_bot_eye {
  width: calc(var(--px) * 155);
  aspect-ratio: 155/23;
}

.mcon05_bot_card03 .mcon05_bot_eye {
  width: calc(var(--px) * 95);
  aspect-ratio: 95/18;
}

/* mcon05_bot title/body — c4a_title / c4a_body 공통 + delta 만 */
.mcon05_bot_title {
  font-size: calc(var(--px) * 44); /* c4a_title px(38) override */
  font-weight: 800; /* c4a_title 500 override */
  line-height: 1.27; /* c4a_title 1.211 override */
}

.mcon05_bot_card02 .mcon05_bot_title {
  margin-top: 0.7vw; /* c4a_title 0.9vw override (Card02 정밀) */
}

.mcon05_bot_body {
  margin-top: 6.6vw; /* c4a_body 기본 margin-top override */
}

.mcon05_bot_card03 .mcon05_bot_body + .mcon05_bot_body {
  margin-top: 1.5vw;
}

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

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

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

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

.mcon06 {
  background-color: #0c334c;
}
.mcon06 .lconCommon_row_top_tt01 {
  color: #3f90c3;
}
.mcon06 .lconCommon_row_bot_tt01 {
  color: #c2d0e3;
}
.mcon06 .lconCommon_row02 {
  background-color: #46698f;
  background-image: url(/images/mcon06_03.png);
  background-size: cover;
  background-position: center;
  overflow: visible;
}

/* 무한 둥둥 keyframes — 공통(-0.5vw) + mcon06용(-0.8vw 조금 더 크게) */
@keyframes float_y {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.5vw);
  }
}
@keyframes float_y_lg {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.8vw);
  }
}
.mcon06_04 {
  width: 32.8126%;
  aspect-ratio: 315/315;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  left: -2%;
  bottom: 1%;
  animation: float_y_lg 3.2s ease-in-out infinite;
}

.mcon06_05 {
  width: 27.6043%;
  aspect-ratio: 265/265;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  right: -2%;
  top: -7%;
  animation: float_y_lg 2.8s ease-in-out infinite;
  animation-delay: -0.8s;
}

.mcon07 {
  background-color: #1f1504;
}
.mcon07 .lconCommon_row_top_tt01 {
  color: #e2b977;
}
.mcon07 .lconCommon_row_bot_tt01 {
  color: #e2d8c8;
}
.mcon07 .lconCommon_row02 {
  background-color: #fefaf3;
  background-image: url(/images/mcon07_03.png);
  background-size: cover;
  background-position: center;
}

.mcon07_04 {
  width: 26.5626%;
  aspect-ratio: 255/436;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: float_y 3s ease-in-out infinite;
}

.mcon08 .gcon05_num {
  color: #337dac;
}

.mcon09 {
  background: #f4fdfd;
}
.mcon09 .gcon07_eyebrow {
  color: #337dac;
}
.mcon09 .gcon07_num {
  color: #337dac;
}

.gcon04.mcon06Bot {
  background: #052437; /* "Rectangle 1 copy 2 복사" y9429 종류복사 그룹 배경 */
  padding-top: 5.43vw; /* (9533-9429)/1915 */
  padding-bottom: 9.3vw; /* (11762-11584)/1915 */
}

.mcon06Bot_kp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 226); /* mcon06_06.png 원본 — "tulienne Key point" */
  aspect-ratio: 226/29;
}

/* .mcon06Bot .c4b override 제거 — 공통 .c4b 그대로 사용 */
.mcon06Bot_card01,
.mcon06Bot_card02,
.mcon06Bot_card03 {
  align-items: stretch; /* 텍스트 row 가 사진 높이만큼 stretch */
}

.mcon06Bot_card {
  background-color: #ffffff;
}

/* ----- 카드 row 폭은 공통 gcon04_card_row / row02 (50%/50%) 사용 ----- */
/* ----- text row padding (Card별 padding-left 분기) ----- */
.mcon06Bot_card01 .mcon06Bot_row_text,
.mcon06Bot_card03 .mcon06Bot_row_text {
  padding-top: 8.15vw; /* (eye y - card y)/1915 = 156/1915 */
  padding-left: 5.1%; /* 70/780 (eye x - photo right edge) */
}

.mcon06Bot_card02 .mcon06Bot_row_text {
  padding-top: 8.15vw; /* 156/1915 */
  padding-left: 5.1%; /* 88/780 (eye x - card left) */
}

/* ----- eyebrow — Card01(109) / Card02·03(112) ----- */
.mcon06Bot_card01 .mcon06Bot_eye {
  width: calc(var(--px) * 109);
  aspect-ratio: 109/23;
}

.mcon06Bot_card02 .mcon06Bot_eye,
.mcon06Bot_card03 .mcon06Bot_eye {
  width: calc(var(--px) * 112);
  aspect-ratio: 112/23;
}

/* ----- 타이틀 (공통 c4a_title + delta) ----- */
.mcon06Bot_title {
  margin-top: 0.94vw; /* c4a_title 0.9vw override (Card02·03 정밀: 18/1915) */
}

.mcon06Bot_card01 .mcon06Bot_title {
  margin-top: 0.89vw; /* Card01 정밀: 17/1915 */
}

.mcon06Bot_body {
  display: flex;
  flex-direction: column;
  gap: 1.5vw; /* 단락 간격 — br br 대신 p 분리 */
  margin-top: 3.24vw; /* title→body 62/1915 */
  font-size: calc(var(--px) * 18);
  line-height: 1.611;
  font-weight: 500;
  color: #585858;
  font-family: "Pretendard Variable", sans-serif;
  letter-spacing: -0.025em;
}

/* ----- Card01 사진 위 absol — 라벨 합성 & 캡션 텍스트 & 캡션 가로선 ----- */
.mcon06Bot_labels_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  aspect-ratio: 470/200;
  left: 19.5%;
  top: 21%;
}

.mcon06Bot_caption_img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26.7%; /* 209/783 자연사이즈 */
  aspect-ratio: 209/19;
  left: 36.5%; /* 286/783 (PSD 텍스트 x470-179=291, 중앙 보정) */
  top: 77.2%; /* 484/627 ((10135-9651)/627) */
}

.mcon06Bot_caption_line {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 34.5%;
  aspect-ratio: 270/19;
  left: 32.6%;
  top: 80.2%;
}

.gcon04.mcon07Bot {
  background: #2e210b; /* "Rectangle 1 copy 2 복사" y12820 종류복사 그룹 배경 */
  padding-top: 5.43vw; /* (12924-12820)/1915 */
  padding-bottom: 8.51vw; /* (14485-(13695+627))/1915 */
}

.mcon07Bot_kp {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 266); /* mcon07_05.png 원본 — "Porzellan Key point" */
  aspect-ratio: 266/29;
}

/* .mcon07Bot .c4b override 제거 — 공통 .c4b 그대로 사용 */
.mcon07Bot_card01,
.mcon07Bot_card02 {
  align-items: stretch;
}

.mcon07Bot_card {
  background-color: #ffffff;
}

/* ----- 카드 row 폭은 공통 gcon04_card_row / row02 (50%/50%) 사용 ----- */
/* ----- text row padding (Card01·02 공통) ----- */
.mcon07Bot_card01 .mcon07Bot_row_text,
.mcon07Bot_card02 .mcon07Bot_row_text {
  padding-top: 8.15vw; /* 156/1915 */
  padding-left: 5.1%; /* mcon06Bot 동일 (유저 통일) */
}

/* ----- eyebrow — Card01(109) / Card02(112) ----- */
.mcon07Bot_card01 .mcon07Bot_eye {
  width: calc(var(--px) * 109);
  aspect-ratio: 109/23;
}

.mcon07Bot_card02 .mcon07Bot_eye {
  width: calc(var(--px) * 112);
  aspect-ratio: 112/23;
}

/* ----- 타이틀 (공통 c4a_title + delta) ----- */
.mcon07Bot_title {
  margin-top: 0.89vw; /* c4a_title 0.9vw override (정밀: 17/1915) */
}

.mcon07Bot_body {
  display: flex;
  flex-direction: column;
  gap: 1.5vw; /* 단락 간격 — br br 대신 p 분리 */
  margin-top: 3.24vw; /* title→body 62/1915 */
  font-size: calc(var(--px) * 18);
  line-height: 1.611;
  font-weight: 500;
  color: #585858;
  font-family: "Pretendard Variable", sans-serif;
  letter-spacing: -0.025em;
}

@media (max-width: 599px) {
  /* ----- con02 — 스킨·콜라겐부스터란? ----- */
  .con02 {
    padding-bottom: 14vw;
  }
  .con02 .con02_head {
    padding-top: 16vw;
    padding-bottom: 14vw;
  }
  .con02 .head_title {
    font-size: 5.5vw;
    line-height: 1.4;
  }
  .con02 .head_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.65;
    padding: 0 6%;
    box-sizing: border-box;
  }
  .con02 .con02_body {
    flex-direction: column;
    align-items: center;
  }
  .con02 .con02_left {
    width: 100%;
    height: 86.6vw;
  }
  .con02 .con02_right {
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 12vw 6% 0;
    box-sizing: border-box;
  }
  .con02 .right_eyebrow {
    font-size: 3.5vw;
    line-height: 1.5;
    text-align: center;
  }
  .con02 .right_title {
    margin-top: 3vw;
    font-size: 6.5vw;
    line-height: 1.3;
  }
  .con02 .right_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.65;
    text-align: center;
  }
  .mcon02_skinbooster {
    width: 90vw;
    margin-top: 8vw;
  }
  /* ----- gcon03 — 01/02 2-col (PC override → 모바일값 재지정, cascade 함정 방지) ----- */
  .gcon03 {
    padding-top: 0;
  }
  .gcon03_left,
  .gcon03_right {
    padding-top: 15vw;
  }
  /* 배경 이미지 위 어두운 반투명 오버레이 (배경 ↔ 텍스트 사이) */
  .mcon03 .gcon03_left::before,
  .mcon03 .gcon03_right::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
  }
  /* 텍스트/num 은 오버레이 위로 (title/desc 는 rltv 가 없어 static → ::before 아래 깔리는 문제 해결) */
  .mcon03 .gcon03_num,
  .mcon03 .gcon03_title,
  .mcon03 .gcon03_desc {
    position: relative;
    z-index: 1;
  }
  /* ----- mcon03 하단 배너 ----- */
  .mcon03_banner {
    padding-top: 14vw;
    padding-bottom: 14vw;
  }
  .mcon03_banner_tt01 {
    font-size: 4.2vw;
    line-height: 1.4;
    padding: 0 6%;
    box-sizing: border-box;
  }
  .mcon03_banner_tt02 {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.65;
    padding: 0 6%;
    box-sizing: border-box;
  }
  /* br.mobile-pc 전역 override — vweb-common 의 display:flex 는 br 줄바꿈 못 만듦 → block 강제 */
  br.mobile-pc {
    display: block;
  }
  /* ----- lconCommon — mcon04 (row02 absol 이미지) ----- */
  .mcon04_vial {
    width: 42vw;
    left: 29%;
    top: 16%;
  }
  .mcon04_badge {
    width: 26vw;
    right: 5%;
    top: 5%;
  }
  /* ----- mcon05_bot — Broomy program 리쥬란 3종 (gcon04 패턴, 세로 스택) ----- */
  .gcon04.mcon05_bot {
    padding-top: 14vw;
    padding-bottom: 14vw;
  }
  .mcon05_bot_kp {
    width: 38vw;
    aspect-ratio: 196/30;
  }
  /* .mcon05_bot .c4b mobile override 제거 — 공통 mobile .c4b 사용 */
  .mcon05_bot_card {
    flex-direction: column;
    align-items: stretch;
  }
  .mcon05_bot_row_photo {
    width: 100%;
  }
  .mcon05_bot_row_text {
    width: 100%;
    padding: 8vw 6%;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
  }
  /* gcon04 카드 eyebrow 공통 — sub10 패턴 (mobile 가운데 정렬) */
  .gcon04 .c4a_eye {
    width: 23vw;
    margin: 0 auto;
  }
  /* mcon05_bot_title PC delta(px(44)/800/1.27) → mobile c4a_title mobile (5vw/1.3) 로 리셋. font-weight 800 은 mobile 도 유지 */
  .mcon05_bot_title {
    font-size: 5vw;
    line-height: 1.3;
  }
  /* Card02 title margin-top 0.7vw 리셋 → c4a_title mobile 3vw */
  .mcon05_bot_card02 .mcon05_bot_title {
    margin-top: 3vw;
  }
  /* body margin-top 6.6vw → 4vw. font-size/line-height 는 c4a_body mobile 사용 */
  .mcon05_bot_body {
    margin-top: 4vw;
  }
  .mcon05_bot_card03 .mcon05_bot_body + .mcon05_bot_body {
    margin-top: 3vw;
  }
  /* 카드 우측 상단 01/02/03 num (photo row 위 absol 유지) */
  .mcon05_bot_card01 .mcon05_bot_num,
  .mcon05_bot_card02 .mcon05_bot_num,
  .mcon05_bot_card03 .mcon05_bot_num {
    width: 22vw;
    left: auto;
    right: 4%;
    top: 4vw;
  }
  /* ----- mcon06 — Skin Booster 03 튤리엔 (row02 decoration) — 모바일 숨김 ----- */
  .mcon06_04,
  .mcon06_05 {
    display: none;
  }
  /* ----- mcon06Bot — tulienne Key point (gcon04 + 3카드 지그재그) ----- */
  .gcon04.mcon06Bot {
    padding-top: 14vw;
    padding-bottom: 14vw;
  }
  .mcon06Bot_kp {
    width: 42vw;
    aspect-ratio: 226/29;
  }
  /* .mcon06Bot .c4b mobile override 제거 — 공통 mobile .c4b 사용 */
  /* Card01·03 사진 左 / 텍스트 右 → 세로 스택 */
  .mcon06Bot_card01,
  .mcon06Bot_card03 {
    flex-direction: column;
    align-items: stretch;
  }
  /* Card02 텍스트 左 / 사진 右 (지그재그) → 사진 위 텍스트 아래 */
  .mcon06Bot_card02 {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .mcon06Bot_row_photo {
    width: 100%;
  }
  .mcon06Bot_row_text {
    width: 100%;
    padding: 8vw 6%;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
  }
  .mcon06Bot_card01 .mcon06Bot_row_text,
  .mcon06Bot_card02 .mcon06Bot_row_text,
  .mcon06Bot_card03 .mcon06Bot_row_text {
    padding-top: 8vw;
    padding-left: 6%;
  }
  /* mcon06Bot_title 은 PC margin-top 0.94vw 만 override → mobile c4a_title mobile (3vw) 로 리셋 */
  .mcon06Bot_title {
    margin-top: 3vw;
  }
  /* Card01 title margin-top 0.89vw 리셋 */
  .mcon06Bot_card01 .mcon06Bot_title {
    margin-top: 3vw;
  }
  .mcon06Bot_body {
    margin-top: 4vw;
    gap: 3vw;
    font-size: 3.3vw;
    line-height: 1.6;
  }
  /* Card01 사진 위 absol — 라벨 & 캡션 & 캡션 라인 (PC 비율 유지하되 모바일 폭 보정) */
  .mcon06Bot_labels_img {
    width: 80%;
    left: 10%;
    top: 16%;
  }
  .mcon06Bot_caption_img {
    width: 36%;
    left: 32%;
    top: 77.2%;
  }
  .mcon06Bot_caption_line {
    width: 46%;
    left: 27%;
    top: 81.2%;
  }
  /* ----- mcon07 — Skin Booster 03 포젤란 (row02 decoration) ----- */
  /* ----- mcon07Bot — Porzellan Key point (gcon04 + 2카드 지그재그) ----- */
  .gcon04.mcon07Bot {
    padding-top: 14vw;
    padding-bottom: 14vw;
  }
  .mcon07Bot_kp {
    width: 50vw;
    aspect-ratio: 266/29;
  }
  /* .mcon07Bot .c4b mobile override 제거 — 공통 mobile .c4b 사용 */
  /* Card01 사진 左 / 텍스트 右 → 세로 스택 */
  .mcon07Bot_card01 {
    flex-direction: column;
    align-items: stretch;
  }
  /* Card02 텍스트 左 / 사진 右 → 사진 위 텍스트 아래 */
  .mcon07Bot_card02 {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .mcon07Bot_row_photo {
    width: 100%;
  }
  .mcon07Bot_row_text {
    width: 100%;
    padding: 8vw 6%;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
  }
  .mcon07Bot_card01 .mcon07Bot_row_text,
  .mcon07Bot_card02 .mcon07Bot_row_text {
    padding-top: 8vw;
    padding-left: 6%;
  }
  /* mcon07Bot_title 은 PC margin-top 0.89vw 만 override → mobile c4a_title mobile (3vw) 로 리셋 */
  .mcon07Bot_title {
    margin-top: 3vw;
  }
  .mcon07Bot_body {
    margin-top: 4vw;
    gap: 3vw;
    font-size: 3.3vw;
    line-height: 1.6;
  }
  /* ----- mcon08 gcon05_list — mobile 순서 재배치 -----
     PC 는 2-col 이라 DOM 이 01/04 → 02/05 → 03 순서. 그대로 stack 하면 모바일에서 01·04·02·05·03 으로 나옴.
     row 래퍼를 display:contents 로 펼친 뒤 item 별 order 지정 → 모바일 01→02→03→04→05 */
  .mcon08 .gcon05_row,
  .mcon08 .gcon05_row_2 {
    display: contents;
  }
  .mcon08 .gcon05_item:has(.gcon05_num_01) {
    order: 1;
  }
  .mcon08 .gcon05_item:has(.gcon05_num_02) {
    order: 2;
  }
  .mcon08 .gcon05_item:has(.gcon05_num_03) {
    order: 3;
  }
  .mcon08 .gcon05_item:has(.gcon05_num_04) {
    order: 4;
  }
  .mcon08 .gcon05_item:has(.gcon05_num_05) {
    order: 5;
  }
  /* ----- mcon09 — 시술 후 주의사항 (공통 gcon07 PC override 재지정) ----- */
  .mcon09 .gcon07_text {
    white-space: normal;
  }
}