/* Shared Contact content follows the homepage; route CSS owns section spacing. */
.upper-contact > .upper-red {
  font-size: 18px;
  font-weight: 600;
  line-height: 2;
}
.upper-contact h2 {
  font-size: 32px;
  font-weight: 400;
  line-height: 1.35;
  margin: 18px 0 29px;
}
.upper-contact .upper-contact-options {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.upper-contact .upper-contact-options a {
  display: block;
  border: 0;
  border-radius: 30px;
  padding-inline: 24px;
  background: transparent;
  color: #8e8e8e;
  font-size: 18px;
  line-height: 3.7;
  text-decoration: none;
}
@media (min-width: 1200px) {
  .upper-contact h2 {
    margin: 18px auto 0;
  }
  .upper-contact .upper-contact-options {
    width: 356.063px;
    max-width: 100%;
    margin: 48px auto 0;
    gap: 4.84px;
  }
  .upper-contact .upper-contact-options a {
    box-sizing: border-box;
    display: flex;
    width: 379.956px;
    max-width: none;
    height: 59.16px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    white-space: nowrap;
  }
}
@media (max-width: 767px), (pointer: coarse) and (min-width: 768px) and (max-width: 1199px) {
  .upper-contact > .upper-red {
    font-size: 15px !important;
    line-height: 2;
  }
  .upper-contact h2 {
    width: 356px;
    max-width: 100%;
    margin: 5px auto 0;
    font-size: 25px;
    line-height: 1.35;
  }
  .upper-contact h2 .iel-copy-contact-title {
    display: block;
    width: 356px;
    max-width: 100%;
    font-size: 25px;
    line-height: 1.35;
    white-space: nowrap !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
  .upper-contact .iel-copy-contact-title :where(.iel-copy-mobile) {
    font-size: inherit !important;
    line-height: inherit;
  }
  .upper-contact .upper-contact-options {
    width: min(310px, 100%);
    max-width: 100%;
    margin: 30px auto 0;
    gap: 4px;
  }
  .upper-contact .upper-contact-options a {
    box-sizing: border-box;
    display: block;
    width: min(310px, 100%);
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 47px;
    padding: 12px 20px;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
  .upper-contact .upper-contact-options .upper-contact-option--settlement {
    font-family: Pretendard, sans-serif;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0;
  }
}
/* A wide WebView can still contain a genuinely narrow route shell. */
@container route-shell (max-width: 767px) {
  .upper-contact .upper-contact-options {
    width: min(310px, 100%);
    max-width: 100%;
    margin-inline: auto;
  }
  .upper-contact .upper-contact-options a {
    box-sizing: border-box;
    display: block;
    width: min(310px, 100%);
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 47px;
    padding: 12px 20px;
    font-size: 15px;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}
.upper-contact
  .upper-contact-options:where(:not(.has-last-hovered))
  a:where(:first-child:not(:hover):not(:focus-visible)),
.upper-contact .upper-contact-options:where(:not(.has-last-hovered)) a:where(:hover, :focus-visible),
.upper-contact .upper-contact-options:where(.has-last-hovered) a:where(.is-last-hovered) {
  background: #ff5959;
  color: #fff;
}