@charset "utf-8";
/* ============================================================
   LG U+ 인터넷 제휴 배너 (상단 배너 + 하단 배너 공통)
   - meta.html 에서 전 페이지 공통 로드
   - 이미지 경로는 CSS 파일 기준이 아닌 사이트 루트 기준(/assets/...)
   ============================================================ */

/* ===== LG U+ 인터넷 제휴 배너 ===== */
.lgu-banner {
  background-color: #ffffff;
  /* main-section 기본 7.5em 보다 좁게 */
  padding: 2.5em 0;
}

.lgu-banner__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  font-size: 21px;
  text-align: center;
  letter-spacing: -0.04em;
}

/* 1) LG U+ 로고 + 본사 공식 제휴 */
.lgu-banner__logo {
  width: 17%;
  max-width: 210px;
  margin: 0 auto;
  overflow: hidden;
}

/* 이미지 자체 상하 여백 크롭 */
.lgu-banner__logo img {
  display: block;
  width: 100%;
  height: auto;
  margin: -9% 0 -12%;
}

/* 2) 헤드라인 */
.lgu-banner__title {
  position: relative;
  display: inline-block;
  max-width: 100%;
  font-size: 2em;
  line-height: 1.35;
  font-weight: 800;
  color: #111;
  margin: 0.2em 0 0.5em;
}

.lgu-banner__title .point {
  position: relative;
  color: #e60a2e;
}

/* 3) 서브 카피 */
.lgu-banner__sub {
  font-size: 1.0625em;
  line-height: 1.4;
  font-weight: 700;
  color: #111;
  margin: 0;
}

.lgu-banner__sub .point {
  position: relative;
  color: #111;
}

/* 혜택은 더 많이 밑줄(손글씨 이미지) */
/* PNG 실측: 1080x1080 중 내용은 가로 84.4%, 세로 14.7% (상단 40.9% 지점부터) */
.lgu-banner__sub .point::after {
  content: '';
  position: absolute;
  left: -3%;
  right: -25%;
  bottom: -0.6em;
  height: 0;
  /* 박스 비율 유지용(부모 폭 기준) */
  padding-bottom: 18%;
  background: url('/assets/images/main/LG/PC_LG_line.png') no-repeat center 48% / 100% auto;
}

/* 4) 메인 비주얼(이사지원금 71만원)
   LG_middle.png(1000x914)은 거의 정사각이라 55% 로 두면 세로가 과하게 커진다.
   쿠폰 줄(가로 100%) 대비 40% 정도가 균형이 맞다. */
.lgu-banner__visual {
  width: 40%;
  max-width: 480px;
  margin: 0.4em auto 0;
}

/* 이 이미지는 자체 여백이 거의 없어 크롭하지 않는다 */
.lgu-banner__visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* 5) 쿠폰 3종 */
.lgu-banner__coupon {
  position: relative;
  width: 100%;
  /* PC_LG_bottom.png(857x205) 실측 투명 여백 : 상 1.87% / 하 1.98% (가로 기준)
     구 이미지(1400x486, 상 7.4% / 하 7.7%) 기준값(0% / -7.5%)을 그대로 두면
     위 여백이 5.5% 만큼 사라지고 아래가 5.5% 만큼 과하게 딸려 올라간다. */
  margin: 5.5% auto -1.8%;
}

/* 말풍선 img 는 제외 */
.lgu-banner__coupon > img:not(.lgu-banner__only) {
  display: block;
  width: 100%;
  height: auto;
}

/* 오이사 단독! 말풍선(이미지)
   교체된 PC_LG_bottom.png 는 3번 티켓의 검정 배지가 가로 70.6~94.2% 를 차지해
   티켓 안에 말풍선이 들어갈 자리가 없다. 티켓 상단 모서리에 걸치도록 위로 뺀다.
   폭을 em 이 아닌 % 로 두어야 컨테이너가 줄어도 위치가 같이 따라간다
   (em + 고정 font-size 였을 때는 좁은 PC 폭에서 배지를 덮었다). */
.lgu-banner__only {
  position: absolute;
  z-index: 2;
  /* 이미지 원본이 161x161(꼬리 포함), 붉은 원은 그중 약 87% */
  width: 8.9%;
  height: auto;
  right: -1.5%;
  /* 꼬리 끝이 티켓 상단 테두리(가로 1.87% 지점)를 물고, 말풍선 아래끝이
     검정 배지 위(가로 3.38% 지점)보다 위에 오도록. 세로% 는 가로 기준으로
     환산(컨테이너 높이 = 가로 x 0.2392)해서 계산한 값. */
  top: -23.8%;
}

@media screen and (max-width: 1024px) {
  /* main-section 기본 4em 보다 좁게 */
  .lgu-banner {
    padding: 1.5em 0;
  }

  .lgu-banner__inner {
    max-width: 500px;
    font-size: 3.6vw;
  }

  .lgu-banner__logo {
    width: 35%;
    max-width: none;
  }

  .lgu-banner__title {
    font-size: 1.6em;
  }

  .lgu-banner__sub .point::after {
    background-image: url('/assets/images/main/LG/MO_LG_line.png');
  }

  /* 모바일도 정사각 이미지라 95% 는 세로가 너무 길어진다 */
  .lgu-banner__visual {
    width: 78%;
    max-width: none;
  }

  /* MO_LG_coupon.png(564x997) 실측 투명 여백 : 상 3.55% / 하 3.37% (가로 기준)
     구 이미지(700x1244, 상 3.0% / 하 12.2%) 기준값(-1% / -12%)을 그대로 두면
     아래가 8.8% 만큼 과하게 딸려 올라가 다음 섹션과 겹친다.
     모바일은 쿠폰이 세로로 3장 쌓여 100% 면 너무 커서 70% 로 줄인다.
     margin % 는 부모(inner) 폭 기준이라 이미지 여백 보정값도 0.7 배로 환산. */
  .lgu-banner__coupon {
    width: 70%;
    margin: -0.45% auto -2.2%;
  }

  /* 쿠폰이 세로로 쌓이므로 3번 티켓(세로 68.2% 지점) 상단 모서리에 건다.
     63% 로 두면 2번 티켓 아래끝(65.2%)을 침범해 사이에 뜬 것처럼 보이므로
     66.5% 로 내려 2번 티켓을 피하고 3번 티켓에만 걸치게 한다.
     3번 티켓 검정 배지가 가로 21.5~78.4% 라 오른쪽 끝에 붙여야 글자를 안 가린다. */
  .lgu-banner__only {
    width: 24%;
    top: 59.5%;
    left: 87.5%;
  }
}

@media screen and (min-width: 640px) and (max-width: 1024px) {
  .lgu-banner__inner {
    font-size: 18px;
  }
}

/* ===== LG U+ 하단 배너 ===== */
/* 이미지 한 장(917x231, 크림 배경 포함)을 통으로 사용 */
.lgu-bottom {
  display: block;
  /* 배너 전체가 링크 */
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  margin-top: 1rem;
  /* 이미지 모서리가 각져 있어 여기서 둥글게 처리 */
  border-radius: 20px;
  overflow: hidden;
}

.lgu-bottom img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 1024px) {
  .lgu-bottom {
    /* margin-top: 3rem; */
    border-radius: 12px;
  }
}

/* ===== LG U+ 하단 배너 (통이미지 → 텍스트 + 쿠폰이미지 분리판) =====
   .lgu-bottom--flat 만 적용. 기존 통이미지 버전(main.html)은 영향 없음.

   [기준] 피그마 '신청페이지 하단 배너' 프레임 1346x339
     - 배경 #fef8e8 / 노란 배지 #fec509(W466 H48 X80 Y253 R17) / 강조 #c8011d
     - 헤드라인 50px, 텍스트 박스 769x123 (2줄 → 줄간 61.5px = 1.23)
   [스케일] 시안 1px = 0.04334em (컨테이너 최대 내용폭 1400px, 기준 24px)
     모든 치수를 em/% 로 두고 .lgu-bottom__inner 의 font-size 만 컨테이너 폭에
     비례시켜 PC 에서 시안과 같은 비율로 축소/확대되게 한다.
     .container = min(1440px,100vw) - 좌우 20px → 내용폭 = 100vw - 40px
     font-size = 내용폭 / 58.33 ≈ 1.70vw - 0.68px (1440px 이상은 24px 고정)
   [주의] 위쪽 .lgu-bottom img { width:100% } 가 로고까지 잡아먹으므로
     이 블록의 선택자는 .lgu-bottom--flat 을 붙여 우선순위를 올린다.
   ============================================================ */
.lgu-bottom--flat {
  background-color: #fef8e8;
}

.lgu-bottom--flat .lgu-bottom__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* 상 43.9px / 우 39.1px / 하 39px / 좌 76.5px (시안 1346 기준) */
  padding: 1.902em 2.905% 1.690em 5.684%;
  font-size: calc(1.7vw - 0.68px);
  line-height: 1.3;
  letter-spacing: -0.04em;
  color: #020202;
  text-align: left;
}

@media screen and (min-width: 1440px) {
  .lgu-bottom--flat .lgu-bottom__inner {
    font-size: 24px;
  }
}

/* --- 좌측 텍스트 --- */
.lgu-bottom--flat .lgu-bottom__text {
  flex: 1 1 auto;
  min-width: 0;
}

/* 1) LG U+ 로고 + 본사 공식 제휴 */
.lgu-bottom--flat .lgu-bottom__head {
  display: flex;
  align-items: center;
}

/* lgu_logo.png(800x241)는 사방 2% 투명 여백 포함 → 시안 로고폭 152px = 이미지 158.3px */
.lgu-bottom--flat .lgu-bottom__logo {
  display: block;
  flex: 0 0 auto;
  width: 6.862em;
  height: auto;
}

/* 시안 168x36, 글자 20px */
.lgu-bottom--flat .lgu-bottom__tag {
  display: inline-block;
  margin-left: 0.646em;
  padding: 0.25em 1.06em;
  border-radius: 2em;
  background: #fed206;
  color: #020202;
  font-size: 0.867em;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

/* 2) 헤드라인 : 시안 50px / 줄간 61.5px */
.lgu-bottom--flat .lgu-bottom__tit {
  margin: 0.093em 0 0.685em;
  font-size: 2.167em;
  font-weight: 800;
  line-height: 1.23;
  letter-spacing: -0.04em;
  color: #020202;
  white-space: nowrap;
}

.lgu-bottom--flat .lgu-bottom__tit strong {
  font-weight: 800;
  color: #c8011d;
}

/* 3) 오이사 단독 노란 배지 : 시안 466x48 / R17 / 글자 22px */
.lgu-bottom--flat .lgu-bottom__point {
  display: inline-block;
  padding: 0.44em 1.7em;
  border-radius: 0.773em;
  background: #fec509;
  color: #020202;
  font-size: 0.953em;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
}

/* --- 우측 쿠폰 이미지 --- */
/* bottom_banner_coupon.png(973x323)에 그림자용 투명 여백 포함 */
.lgu-bottom--flat .lgu-bottom__visual {
  flex: 0 0 49.48%;
  margin-top: 0.442em;
}

.lgu-bottom--flat .lgu-bottom__visual img {
  display: block;
  width: 100%;
  height: auto;
}

/* --- 모바일(767px 이하) : 세로로 쌓지 않고 가로 한 줄 유지 ---
   아래 협력사 배너(624x200 가로형 통이미지)와 포맷을 맞추기 위해 한 줄로 둔다.
   시안 비율 그대로 줄이면 375px 에서 헤드라인이 12px 까지 떨어지므로
   ① 쿠폰 폭을 49.48% → 38% 로 줄여 텍스트 칸을 넓히고
   ② 기준 font-size 에 하한(+7.6px)을 둬서 좁은 폭에서 덜 작아지게 한다.
     font-size = 0.64vw + 7.6px  (375px→10px / 767px→12.5px, 768px 지점 연속)
   375px 기준 결과 : 헤드라인 15px / 노란 문구 9.5px / 배너 높이 약 100px */
@media screen and (max-width: 767px) {
  .lgu-bottom--flat .lgu-bottom__inner {
    padding: 4.3% 2.5% 4.3% 4%;
    font-size: calc(0.64vw + 7.6px);
  }

  .lgu-bottom--flat .lgu-bottom__logo {
    width: 4.8em;
  }

  .lgu-bottom--flat .lgu-bottom__tag {
    margin-left: 0.55em;
    padding: 0.22em 0.8em;
    font-size: 0.85em;
  }

  .lgu-bottom--flat .lgu-bottom__tit {
    margin: 0.18em 0 0.42em;
    font-size: 1.42em;
    line-height: 1.25;
  }

  .lgu-bottom--flat .lgu-bottom__point {
    padding: 0.35em 0.7em;
    border-radius: 0.6em;
    font-size: 0.92em;
  }

  /* 쿠폰 이미지는 키우고, 그만큼 좌우 여백·헤드라인을 조금씩 줄여 자리를 만든다 */
  .lgu-bottom--flat .lgu-bottom__visual {
    flex: 0 0 43%;
    margin-top: 0.25em;
  }
}

/* ===== LG U+ 인터넷 가입 신청 (견적 폼) =====
   행/체크박스 스타일은 폼의 기존 '견적가능 일시' 행과 동일한 마크업
   (.inquiry-item.side-by-side + .radio_type2_txt + scale(1.2))을 그대로 쓰므로
   여기서는 라벨의 '(선택)' 표기만 정의한다. */
/* 라벨 컬럼이 100px 고정이라 라벨은 '추가 서비스' 로 짧게 두어
   체크박스와 여백이 옆 행들과 같아지도록 한다. */
.lgu-apply__opt {
  /* 100px 라벨 컬럼을 가로로 넘치지 않도록 항상 아래 줄로 */
  display: block;
  margin-top: 5px;
  font-size: 0.72em;
  font-weight: 400;
  color: #666;
  letter-spacing: -0.02em;
}

/* ===== 추가 서비스(LG 인터넷) 강조 박스 - 견적 폼 =====
   마크업/정렬은 위 '견적가능 일시' 행과 동일하게 두고
   박스만 음수 마진으로 바깥으로 넓혀 라벨/체크박스 위치가 어긋나지 않게 한다.
   체크박스는 사이트 공통 스타일(input 숨김 + label:before)을 그대로 사용. */
#signform .inquiry-item.lgbox {
  align-items: center !important;
  flex-wrap: nowrap;
  /* .row(flex) 의 직계 자식인 페이지(magotgan 등)에서 행이 줄어들지 않도록 폭 고정 */
  flex: 0 0 auto;
  width: calc(100% + 32px);
  margin: 8px -16px 12px !important;
  padding: 14px 16px !important;
  border: 2px solid #ffc220 !important;
  border-radius: 14px;
  background: #fff;
}
#signform .lgbox .th { padding-top: 0 !important; }
#signform .lgbox .td { min-width: 0; }

/* 라벨 강조 + 체크박스 확대 (공통 label:before 방식 유지) */
.lgbox__chk input[type="checkbox"] + label {
  padding-left: 1.65rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: -0.04em;
}
.lgbox__chk input[type="checkbox"] + label:before {
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.525rem;
  border: 1.5px solid #d5d5d5;
  border-radius: 4px;
  line-height: 1.05rem;
  font-size: 0.85rem;
}
.lgbox__chk input[type="checkbox"]:checked + label:before {
  background-color: #ffc220;
  border-color: #ffc220;
}

/* 오른쪽 안내 문구 + 이미지 */
.lgbox__promo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 6px;
  margin-left: auto;
  padding-left: 24px;
  border-left: 1px solid #f2e2b0;
}
.lgbox__promo-txt {
  color: #6b6b6b;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.045em;
  white-space: nowrap;
}
.lgbox__promo-txt b {
  display: block;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 17px;
}
.lgbox__img {
  width: 120px;
  height: auto;
  margin: -24px -6px -12px 0;
}
@media (max-width: 900px) {
  #signform .inquiry-item.lgbox {
    flex-wrap: wrap !important;
    width: calc(100% + 28px);
    margin: 8px -14px 12px !important;
    padding: 14px 14px !important;
  }
  .lgbox__chk input[type="checkbox"] + label { font-size: 0.9rem; }
  .lgbox__promo {
    flex: 0 0 100%;
    width: 100%;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px solid #f2e2b0;
    justify-content: space-between;
  }
  .lgbox__promo-txt { font-size: 12.5px; white-space: normal; }
  .lgbox__img { width: 88px; margin: -14px -2px -6px 0; }
}