@charset "UTF-8";
.sub {
  display: flex;
  background-color: #000;
}

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

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

.con02 .con02_head {
  padding-top: 8.67vw;
  padding-bottom: 11.7vw;
  background-image: url(/images/gcon02_01.png);
  background-size: 100%;
  background-position: top center;
}
.con02 .con02_left {
  background-image: url(/images/gcon02_02.png);
}
.con02 .gcon02_03 {
  width: 106.702%;
  aspect-ratio: 1019/1682;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  top: -47%;
  left: -15%;
}
.con02 .con02_right {
  width: 49.87%;
  padding-left: 9.4vw;
}
.con02 .right_eyebrow {
  margin-top: 10.54vw;
}
.con02 .right_desc {
  width: 55.35%;
}
.con02 .gcon02_xerf {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc(var(--px) * 604);
  aspect-ratio: 604/208;
  order: 3;
  margin-left: -3%;
  margin-top: 2%;
}

@media (max-width: 599px) {
  /* ----- gcon02 — XERF intro ----- */
  .con02 .con02_head {
    padding-top: 14vw;
    padding-bottom: 16vw;
    background-size: cover;
  }
  .con02 .con02_body {
    flex-direction: column;
    align-items: center;
  }
  .con02 .head_title {
    font-size: 5.5vw;
    line-height: 1.3;
  }
  .con02 .head_desc {
    margin-top: 3vw;
    font-size: 3.3vw;
    line-height: 1.6;
    box-sizing: border-box;
    padding: 0 20%;
  }
  .con02 .con02_left {
    width: 100%;
    height: auto;
    aspect-ratio: 961/600;
  }
  .con02 .gcon02_03 {
    width: 100%;
    aspect-ratio: auto;
    top: auto;
    left: auto;
  }
  .con02 .con02_right {
    width: 100%;
    align-items: center;
    text-align: center;
    padding: 10vw 5%;
  }
  .con02 .right_eyebrow {
    margin-top: 0;
    font-size: 3.5vw;
  }
  .con02 .right_title {
    margin-top: 3vw;
    font-size: 5.5vw;
    line-height: 1.2;
  }
  .con02 .right_desc {
    margin-top: 4vw;
    font-size: 3.3vw;
    line-height: 1.6;
    text-align: center;
    width: 100%;
  }
  .con02 .right_desc2 {
    margin-top: 3vw;
  }
  .con02 .gcon02_xerf {
    width: 60vw;
    aspect-ratio: 604/208;
    margin-left: 0;
    margin-top: 5vw;
  }
  /* ----- gcon05 — 추천대상 모바일 순서 재배치 -----
     PC 는 2-col 이라 DOM 이 01/03 → 02/04 순서. 그대로 stack 하면 모바일에서 01·03·02·04 으로 나옴.
     row 래퍼를 display:contents 로 펼친 뒤 item 별 order 지정 → 모바일 01→02→03→04 */
  .gcon05 .gcon05_row,
  .gcon05 .gcon05_row_2 {
    display: contents;
  }
  .gcon05 .gcon05_item:has(.gcon05_num_01) {
    order: 1;
  }
  .gcon05 .gcon05_item:has(.gcon05_num_02) {
    order: 2;
  }
  .gcon05 .gcon05_item:has(.gcon05_num_03) {
    order: 3;
  }
  .gcon05 .gcon05_item:has(.gcon05_num_04) {
    order: 4;
  }
}