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

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

.con02 {
  padding-top: 8.7vw;
  padding-bottom: 3.5vw;
  background-image: url(/images/jcon02_01.png);
  background-position: top center;
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.con02 .head_title {
  font-size: calc(var(--px) * 46);
  font-weight: 500;
  color: #282828;
  line-height: 1.152;
}
.con02 .head_desc {
  margin-top: 2.8vw;
}
.con02 .con02_body {
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 11.2vw;
}
.con02 .con02_left {
  width: 50.3%;
  background-color: #555555;
  background-image: url(/images/jcon02_02.png);
}
.con02 .jcon02_03 {
  width: 44.4677%;
  aspect-ratio: 426/583;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.con02 .con02_right {
  width: 30%;
  margin-left: 8.2%;
  margin-top: 4vw;
  background: transparent;
}
.con02 .right_title {
  margin-top: 1.4vw;
  color: #282828;
}
.con02 .right_desc {
  color: #282828;
  text-transform: uppercase;
}
.con02 .body_03 {
  font-weight: 800;
  margin-top: 3vw;
}
.con02 .jcon02_bigtxt {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 3.3vw;
  margin-left: 0;
  width: calc(var(--px) * 784);
  aspect-ratio: 784/247;
}

.gcon03_left {
  background-color: #130e0e;
  background-image: url(/images/jcon03_01.png);
}

.gcon03_right {
  background-color: #f9efec;
  background-image: url(/images/jcon03_03.png);
}

.gcon03_right .gcon03_title {
  color: #fff;
}

.gcon03_right .gcon03_desc {
  color: #fff;
}

.gcon03_left,
.gcon03_right {
  padding-top: 25.24vw;
}

.icon04 {
  background-color: #2B271A;
}

.c4_dis {
  color: #947E59;
}

.gcon04_card04_img_wrap {
  width: 55.1437%;
  aspect-ratio: 386/185;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.gcon04_card06 .gcon04_card_row01 {
  background-image: url(/images/jcon04_02.png);
  background-size: cover;
}

.gcon04_card07 .gcon04_card_row01 {
  background-image: url(/images/jcon04_04.png);
  background-size: cover;
}

.icon04_03 {
  width: 15.5718%;
  aspect-ratio: 109/23;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.icon04_08 {
  width: 16.0003%;
  aspect-ratio: 112/23;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.jcon05 {
  background-color: #FFFAF8;
}

.icon06_line_img {
  filter: brightness(0) saturate(100%) invert(31%) sepia(82%) saturate(1411%) hue-rotate(355deg) brightness(106%) contrast(97%);
}

.jcon06_row {
  width: 50%;
  height: calc(var(--px) * 999);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
}

.jcon06_row01 {
  background-color: #301F17;
}

.jcon06_row02 {
  background-color: #EA510E;
}

.jcon06_02 {
  width: 14.061%;
  aspect-ratio: 134/669;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 10.3vw;
  right: 0%;
}

.jcon06_03 {
  width: 13.7462%;
  aspect-ratio: 131/667;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 10.3vw;
  left: 0%;
}

.jcon06_txt01 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  top: 10.7vw;
  left: 25.1697%;
  letter-spacing: -0.025em;
}

.jcon06_txt02 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-end;
  top: 33.9948vw;
  right: 24.9608%;
  letter-spacing: -0.025em;
  text-align: right;
}

.jcon06_tit {
  font-size: calc(var(--px) * 28);
  font-weight: 800;
  line-height: 1.036;
}

.jcon06_desc {
  margin-top: 0.6vw;
  font-size: calc(var(--px) * 18);
  font-weight: 500;
  line-height: 1.611;
}

.jcon06_desc02 {
  margin-top: 1.5vw;
}

.jcon06_core {
  width: calc(var(--px) * 544);
  aspect-ratio: 544/207;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: 21.0966vw;
  right: 24.5431%;
}

.jcon09 {
  background-color: #FFF7EC;
}

.gcon05_num,
.gcon07_eyebrow,
.gcon07_num {
  color: #EA510E;
}

@media (max-width: 599px) {
  /* ----- jcon02 — 올리디아 365란? ----- */
  .con02 {
    padding-top: 16vw;
    padding-bottom: 14vw;
  }
  .con02 .con02_body {
    flex-direction: column;
    align-items: center;
    margin-top: 10vw;
  }
  .con02 .head_title {
    font-size: 5.5vw;
    line-height: 1.4;
  }
  .con02 .head_desc {
    margin-top: 3.5vw;
    font-size: 3.3vw;
    line-height: 1.65;
    box-sizing: border-box;
  }
  .con02 .con02_left {
    width: 100%;
    height: auto;
    aspect-ratio: 959/830;
  }
  .con02 .con02_right {
    width: 100%;
    align-items: center;
    text-align: center;
    margin-left: 0;
    margin-top: 10vw;
    padding: 0 3%;
  }
  .con02 .right_title {
    margin-top: 3vw;
    font-size: 6vw;
    line-height: 1.3;
  }
  .con02 .right_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.65;
    text-align: center;
  }
  .con02 .right_desc2 {
    margin-top: 3vw;
  }
  .con02 .jcon02_bigtxt {
    margin-top: 7vw;
    width: 85vw;
  }
  /* ----- jcon03 (gcon03) — 배경 사진 비율 보정 (960×832) ----- */
  .gcon03_left,
  .gcon03_right {
    aspect-ratio: 960/832;
    padding-bottom: 0vw;
    /* padding-top: 41.24vw; */
    background-position: bottom;
  }
  /* ----- jcon04 (gcon04) — Key point 카드 06/07 세로 스택 ----- */
  .gcon04_card06,
  .gcon04_card07 {
    flex-direction: column;
  }
  .gcon04_card06 .gcon04_card_row01,
  .gcon04_card07 .gcon04_card_row01 {
    aspect-ratio: 780/624;
    background-size: cover;
  }
  .gcon04_card06 .gcon04_card_row02,
  .gcon04_card07 .gcon04_card_row02 {
    padding: 10vw 6%;
    box-sizing: border-box;
    align-items: center;
    text-align: center;
    order: 1;
  }
  .icon04_03,
  .icon04_08 {
    width: 16vw;
  }
  /* ----- jcon07 (gcon05) — 추천대상 5번 보강 + 1~5 순서 정렬 ----- */
  .gcon05_row {
    display: contents;
  }
  .gcon05_item_l {
    order: 1;
  }
  .gcon05_item_r {
    order: 2;
  }
  /* ----- jcon06 — 기존 HA필러 vs 올리디아 비교 ----- */
  .jcon06_main {
    flex-direction: column;
  }
  .jcon06_row {
    width: 100%;
    height: auto;
    padding: 14vw 6%;
    box-sizing: border-box;
  }
  .jcon06_02,
  .jcon06_03 {
    display: none;
  }
  .jcon06_core {
    position: relative;
    top: auto;
    right: auto;
    width: 82vw;
  }
  .jcon06_txt01,
  .jcon06_txt02 {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    align-items: center;
    text-align: center;
  }
  .jcon06_txt02 {
    margin-top: 8vw;
  }
  .jcon06_tit {
    font-size: 5vw;
    line-height: 1.3;
  }
  .jcon06_desc {
    margin-top: 3vw;
    font-size: 3.3vw;
    line-height: 1.6;
  }
  .jcon06_desc02 {
    margin-top: 3vw;
  }
}