@charset "utf-8";

/*
 * Renewal v3 공통 페이지 헤더
 * 신규 화면은 화면별 제목 스타일을 추가하지 않고 아래 네 클래스를 조합한다.
 * .renewal-page-hero > .container > .renewal-page-heading
 *   > .renewal-page-eyebrow + .renewal-page-title
 */
.renewal-page.layout-variant-v3 .renewal-page-hero {
  position: relative;
  padding: 42px 0 34px;
  background: transparent;
}

.renewal-page.layout-variant-v3 .renewal-page-heading {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  text-align: center;
}

.renewal-page.layout-variant-v3 .renewal-page-eyebrow {
  display: block;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  color: #7461ef;
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .16em;
}

.renewal-page.layout-variant-v3 .renewal-page-title {
  margin: 0;
  color: #171820;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.055em;
}

.renewal-page.layout-variant-v3 .renewal-page-heading::after {
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #7461ef, #83d8dc);
  content: "";
}

.renewal-page.layout-variant-v3 .renewal-page-eyebrow::after,
.renewal-page.layout-variant-v3 .renewal-page-title::after,
.renewal-page.layout-variant-v3 .renewal-page-heading > i {
  display: none;
}

body.renewal-page.layout-variant-v3.renewal-product-detail-page .renewal-hybrid-detail-main {
  padding-top: 0;
}

body.renewal-page.layout-variant-v3.customer-center-page .customer-center-main {
  background: radial-gradient(circle at 10% 3%, rgba(118, 98, 242, .07), transparent 24%), linear-gradient(180deg, #fbfbff 0%, #fff 620px);
}

@media (max-width: 767px) {
  .renewal-page.layout-variant-v3 .renewal-page-hero {
    padding: 28px 0 28px;
  }

  .renewal-page.layout-variant-v3 .renewal-page-heading {
    gap: 7px;
  }

  .renewal-page.layout-variant-v3 .renewal-page-title {
    font-size: 28px;
  }

  .renewal-page.layout-variant-v3 .renewal-page-heading::after {
    width: 42px;
    height: 3px;
    margin-top: 4px;
  }
}