@charset "utf-8";

@layer reset, form;

:root {
  interpolate-size: allow-keywords;
  --header-height: clamp(60rem, calc(100 / var(--container) * 100vw), 100rem);
  --container-narrow: 1280;
  --container: 1400;
  --container-wide: 1800;
  --cont: 1800;
  --container-scale: 0.92;
  --container-edge-offset: calc((1 - var(--container-scale)) / 2 * 100vw);
  --primary: #487487;
  --secondary: #52c41a;
  --tertiary: #fa8c16;
  --placeholder-bg: #0b2965;
  --white: #fff;
  --black: #000;
  --border-color: #ddd; /* components.css 공유 */
  --hover-border-color: #444; /* components.css 공유 */
  --font-pre: "Outfit", Sans-serif;
  --offcanvas-button-size: 50rem;
}

body {
  font-family: var(--font-pre);
}
/* #region view transition, scroll behavior */
@media (prefers-reduced-motion: no-preference) {
  /* @view-transition { navigation: auto; } */
  html {
    scroll-behavior: smooth;
  }
}
/* #endregion */

/* #region container */
.container {
  position: relative;
  margin: 0 auto;
  max-width: calc(var(--container) * 1rem);
  width: calc(var(--container-scale) * 100%);
}
.container--narrow {
  max-width: calc(var(--container-narrow) * 1rem);
}
.container--wide {
  max-width: calc(var(--container-wide) * 1rem);
}
.container--fluid {
  max-width: none;
  width: 100%;
}
/* #endregion */

.cont {
  position: relative;
  margin: 0 auto;
  max-width: calc(var(--cont) * 1px);
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.hero > cont {
  display: block;
}

#header {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
  display: flex;
  align-items: stretch;
  height: var(--header-height);

  .logo {
    justify-self: start;
  }
  .logo-image {
    display: block;
    width: auto;
    height: clamp(24rem, calc(30 / var(--container) * 100vw), 30rem);
  }
  .main-nav {
    position: absolute;
    right: 65rem;
    display: flex;
    justify-content: center;
    justify-self: center;
    height: 100%;
    align-items: center;
    .main-menu {
      display: flex;
    }
    .main-menu > li {
      position: relative;
    }
    [data-nav-level="1"] {
      display: flex;
      align-items: center;
      padding: 0 clamp(10rem, calc(40 / 1920 * 100vw), 40rem);
      font: 18rem var(--font-pre);
      font-weight: 400;
      color: var(--black);
      transition: 0.4s;
      letter-spacing: 1rem;
    }
    [data-nav-level="1"]:hover {
      color: var(--primary);
    }
    .sub-menu {
      visibility: hidden;
      position: absolute;
      top: 75%;
      left: 50%;
      transform: translateX(-50%);
      min-width: 120px;
      width: -webkit-max-content;
      width: -moz-max-content;
      width: max-content;
      background: #fff;
      border: 1px solid #ddd;
      opacity: 0;
    }
    li:hover .sub-menu {
      visibility: visible;
      top: 80%;
      opacity: 1;
    }
    [data-nav-level="2"] {
      display: block;
      padding: 14px;
      color: #333;
      font-size: 14px;
      text-align: center;
    }
    [data-nav-level="2"]:hover {
      background: var(--primary);
      color: #fff;
    }
    .sub-menu li + li {
      border-top: 1px solid #ddd;
    }
    .nav-search {
      display: inline-grid;
      place-items: center;
      justify-self: end;
      width: 40rem;
      aspect-ratio: 1;
      border: 0;
      background: transparent;
      color: #333;
      cursor: pointer;
    }
    .nav-search:hover {
      color: var(--primary);
    }
  }
  .offcanvas-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    align-items: flex-end;
    width: var(--offcanvas-button-size);
    aspect-ratio: 1;
    cursor: pointer;
    .bar {
      height: 3px;
      background: var(--black);
      border-radius: 3px;
      width: 100%;
      transition: 0.4s;
    }
    .bar-1 {
      width: 50%;
    }
    .bar-3 {
      translate: 0 8rem;
    }
  }
  .offcanvas-toggle:hover {
    .bar {
      width: 50%;
    }
    .bar-1 {
      width: 100%;
    }
  }
  @media (prefers-reduced-motion: no-preference) {
    .sub-menu {
      transition: 0.4s;
    }
    .menu-bar {
      transition: 0.4s;
    }
  }
  @media (min-width: 1280px) {
    .main-nav {
      display: flex;
    }
    .nav-search {
      display: inline-grid;
    }
    .offcanvas-toggle {
      display: none;
    }
  }
  @media (max-width: 1279px) {
    .container {
      grid-template-columns: 1fr auto;
    }
    .main-nav {
      display: none;
    }
    .nav-search {
      display: none;
    }
    .offcanvas-toggle {
      display: flex;
    }
  }

  .offcanvas {
    --border-color: #eaeaea;
    --padding-block: 15rem;
    --padding-inline: 16rem;
    left: auto;
    z-index: 12;
    max-width: 280rem;
    width: 100%;
    height: 100dvh;
    padding: 0;
    background: #fff;
    border: 0;
    color: #000;
    &::-webkit-backdrop {
      background: #000;
    }
    &::backdrop {
      background: #000;
    }
    .offcanvas-header {
      display: grid;
      align-items: center;
      justify-content: flex-end;
      height: var(--header-height);
    }
    .offcanvas-close {
      position: relative;
      margin-right: 16px;
      display: block;
      width: var(--offcanvas-button-size);
      aspect-ratio: 1;
      background: 0;
      &::before,
      &::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
        transform: translateY(-50%) rotate(45deg);
      }
      &::after {
        transform: translateY(-50%) rotate(-45deg);
      }
    }
    .main-menu {
      & > li {
        border-top: 1px solid var(--border-color);
      }
      & > li:last-child {
        border-bottom: 1px solid var(--border-color);
      }
      [data-nav-level="1"] {
        position: relative;
        display: block;
        width: 100%;
        padding: var(--padding-block) 30rem var(--padding-block)
          var(--padding-inline);
        text-align: left;
        font-size: 16rem;
      }
      summary[data-nav-level="1"]::before {
        content: "";
        position: absolute;
        inset: 0;
        margin: auto 16rem auto auto;
        display: block;
        width: 8rem;
        aspect-ratio: 1;
        border: solid currentColor;
        border-width: 0 1px 1px 0;
        transform: rotate(45deg) translateY(-75%);
      }
      [open] summary[data-nav-level="1"]::before {
        scale: 1 -1;
        translate: 0 -50%;
      }
      ::details-content {
        overflow: clip;
        height: 0;
      }
      [open]::details-content {
        height: auto;
      }
      .sub-menu {
        background: #f8f8f8;
      }
      .sub-menu > li {
        border-top: 1px solid var(--border-color);
      }
      [data-nav-level="2"] {
        position: relative;
        display: block;
        padding: var(--padding-block) var(--padding-inline);
        font-size: 14px;
      }
    }
    @media (prefers-reduced-motion: no-preference) {
      & {
        transition: 0.4s allow-discrete;
        translate: 100%;
      }
      &::-webkit-backdrop {
        opacity: 0;
        -webkit-transition: 0.4s allow-discrete;
        transition: 0.4s allow-discrete;
      }
      &::backdrop {
        opacity: 0;
        transition: 0.4s allow-discrete;
      }
      &:popover-open {
        translate: 0;
        &::-webkit-backdrop {
          opacity: 0.6;
        }
        &::backdrop {
          opacity: 0.6;
        }
        @starting-style {
          translate: 100%;
          &::-webkit-backdrop {
            opacity: 0;
          }
          &::backdrop {
            opacity: 0;
          }
        }
      }
      .main-menu {
        [data-nav-level="1"],
        summary::before,
        ::details-content {
          transition: 0.4s allow-discrete;
        }
        ::details-content {
          overflow: clip;
          height: 0;
        }
        [open]::details-content {
          height: auto;
        }
      }
    }
  }
}

.page-header {
  position: relative;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(400rem, calc(500 / var(--container) * 100vw), 500rem);
  isolation: isolate;
  &.misc :is(.breadcrumb, .local-nav) {
    display: none;
  }
  .bg {
    contain: content;
    position: absolute;
    inset: 0;
    z-index: -1;
    &::before {
      content: "";
      position: absolute;
      inset: 0;
      background: no-repeat 50% / cover;
    }
    .about &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    .business &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    .housing-area &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    .disclosure &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    .community &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    .misc &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    .program &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    .product &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    .board &::before {
      background-image: url("/assets/images/pages/page-header-1.webp");
    }
    @media (prefers-reduced-motion: no-preference) {
      &::before {
        -webkit-animation: page-header-bg 1.8s both;
        animation: page-header-bg 1.8s both;
      }
    }
  }

  .page-header-container {
    display: grid;
  }
  .heading-ko {
    font: var(--fs50) var(--font-hanam);
  }
  .heading-en {
    margin-top: 0.5em;
    font: var(--fs20) var(--font-pre);
  }
  @media (prefers-reduced-motion: no-preference) {
    .heading-ko {
      -webkit-animation: slide-up 0.6s 0.2s both;
      animation: slide-up 0.6s 0.2s both;
      opacity: 0;
    }
    .heading-en {
      -webkit-animation: slide-up 0.6s 0.35s both;
      animation: slide-up 0.6s 0.35s both;
      opacity: 0;
    }
  }

  .breadcrumb {
    font: var(--fs16) var(--font-pre);
    .list {
      display: flex;
      align-items: center;
      justify-content: end;
      gap: 0.5625em;
    }
    .home {
      display: block;
      width: 1em;
      height: auto;
      fill: currentColor;
    }
    .gt {
      stroke: currentColor;
      fill: none;
    }
    .item:last-child {
      font-weight: 700;
    }
    .item:empty {
      display: none;
    }
    @media (prefers-reduced-motion: no-preference) {
      & {
        -webkit-animation: slide-up 0.6s 0.6s both;
        animation: slide-up 0.6s 0.6s both;
        opacity: 0;
      }
    }
    @media (min-width: 767px) {
      & {
        grid-area: 1/2/3/3;
        align-self: center;
      }
    }
    @media (max-width: 767px) {
      & {
        display: none;
      }
    }
  }
}

.local-nav {
  position: relative;
  z-index: 7;
  font: var(--fs18-14) var(--font-pre);
  .container {
    display: flex;
    height: 3.88888889em;
  }
  .home {
    display: grid;
    place-items: center;
    width: auto;
    height: 100%;
    aspect-ratio: 1;
    background: var(--black);
  }
  .home-icon {
    display: block;
    width: 1.05555556em;
    height: auto;
    fill: white;
  }
  :where(.level-1, .level-2) {
    position: relative;
  }
  .toggle-button {
    position: relative;
    height: 100%;
    padding-inline: 1.66666667em 3.83333333em;
    background: lightgray;
    color: var(--black);
    text-align: left;
  }
  .level-2 .toggle-button {
    font-weight: 700;
  }
  .toggle-button::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto 29rem auto auto;
    width: 0.55555556em;
    aspect-ratio: 10/7;
    background: url("/assets/images/pages/sub-nav-arrow.svg") no-repeat 50% /
      contain;
  }
  .toggle-button[aria-expanded="true"]::after {
    scale: 1 -1;
  }
  :where(.main-menu, .sub-menu) {
    position: absolute;
    inset: 100% -1px auto;
    background: #fff;
    border: 1px solid var(--border-color);
    box-shadow: 0 10rem 30rem #0000000d;
    color: var(--black);
    visibility: hidden;
  }
  :where(.main-menu, .sub-menu).is-expanded {
    visibility: visible;
  }
  [data-nav-level] {
    display: block;
    padding: 1.11111111em 1.61111111em;
  }
  @media (prefers-reduced-motion: no-preference) {
    .toggle-button::after {
      transition: 0.4s;
    }
    :where(.main-menu, .sub-menu) {
      transition: 0.4s;
      -webkit-clip-path: inset(0 -40rem 100%);
      clip-path: inset(0 -40rem 100%);
    }
    :where(.main-menu, .sub-menu).is-expanded {
      -webkit-clip-path: inset(0 -40rem -50rem);
      clip-path: inset(0 -40rem -50rem);
    }
  }
  @media (any-hover) {
    [data-nav-level]:hover {
      background: #f4f4f4;
    }
  }
  @media (max-width: 767px) {
    .level-1 {
      display: none;
    }
    .level-2 {
      flex: 1;
    }
    .toggle-button {
      width: 100%;
    }
  }
}

#footer {
  padding-block: 30rem 38rem;
  background: #222222;
  color: #b8b8b8;
  margin-bottom: 150px;
  .footer-logo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }
  .footer-logo a {
    font-size: var(--font-size-32);
    font-weight: 900;
    color: #fff;
  }
  .info {
    display: flex;
    justify-content: space-between;
  }
  .info-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 10px;
    width: 60%;
    margin-top: 40px;
  }
  .info-list .info-item {
    display: flex;
    gap: 10px;
  }
  .info-list dt {
    font-weight: 700;
  }
  .link-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    top: -30px;
  }
  .link-list li {
    display: flex;
    align-items: center;
  }
  .link-list li a {
    background: rgba(255, 255, 255, 0.07);
    padding: 15px 20px;
    min-width: 180px;
    text-align: center;
    transition: all 0.4s;
  }
  .link-list li a:hover {
    background: rgba(255, 255, 255, 0.2);
  }
  .copyright {
    margin-top: 26rem;
  }
  @media (max-width: 767px) {
    margin-bottom: 400px;
    .info {
      flex-direction: column-reverse;
    }
    .info-list {
      flex-direction: column;
      width: 100%;
    }
    .link-list {
      top: 20px;
    }
    .info-list .info-item {
      flex-direction: column;
      gap: 0;
    }
  }
}
.inquiry {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #222222;
  color: #fff;
  height: 150px;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 25;
  .inquiry-box {
    display: grid;
    grid-template-columns: 550px 1fr;
  }
  .phone {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
  }
  .phone .icon {
    width: 24px;
    position: relative;
    top: 3px;
  }
  .phone .text {
    font-size: var(--fs30);
    font-weight: 700;
  }
  .inquiry-form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .inquiry-form form {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
  }
  .inquiry-form form .form-box {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }
  .inquiry-form form .form-box input,
  .inquiry-form form .form-box select {
    display: flex;
    align-items: center;
    flex-grow: 1;
    border-radius: 5px;
    border: 1px solid var(--border-color);
    padding: 10px;
    color: #333;
  }
  .inquiry-form form .form-box select {
    min-width: 200px;
  }
  .inquiry-form form .form-box input[type="submit"] {
    background: var(--primary);
    border: 0;
    color: #fff;
    cursor: pointer;
    min-width: 200px;
    padding: 13px 20px;
  }
  @media (max-width: 767px) {
    height: auto;
    padding-block: 20px;
    .phone {
      justify-content: center;
      margin-bottom: 20px;
    }
    .inquiry-box {
      grid-template-columns: 1fr;
    }
    .inquiry-form form .form-box {
      flex-direction: column;
    }
  }
}
@-webkit-keyframes page-header-bg {
  0% {
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}
@keyframes page-header-bg {
  0% {
    scale: 1.05;
  }
  100% {
    scale: 1;
  }
}
@-webkit-keyframes slide-up {
  0% {
    translate: 0 40rem;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}
@keyframes slide-up {
  0% {
    translate: 0 40rem;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}
@-webkit-keyframes slide-right {
  0% {
    translate: -40rem;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}
@keyframes slide-right {
  0% {
    translate: -40rem;
    opacity: 0;
  }
  100% {
    translate: 0;
    opacity: 1;
  }
}
@-webkit-keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes pulseUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes pulseUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.el3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.el2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.el1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.col2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Laptop */
@media screen and (min-device-width: 1024px) and (max-device-width: 1800px) {
  .cont {
    position: relative;
    margin: 0 auto;
    max-width: calc(var(--container) * 1rem);
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .city-sim .city-sim-map {
    width: 100%;
    height: auto;
  }
}

/* =========================================================
   Footer
   ========================================================= */
.site-footer {
  background: #222;
  color: rgb(184, 184, 184);
  padding-block: 47px 115px;
}
.site-footer .footer-grid {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.site-footer .footer-left > a {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.site-footer .footer-left .footer-logo {
  display: block;
  width: auto;
  max-width: 100%;
  margin-bottom: 32px;
}
.site-footer .meta {
  margin: 0 0 6px;
  color: #b8b8b8;
  font-size: 16px;
  font-weight: 600;
}
.site-footer .meta .dot {
  margin: 0 10px;
  opacity: 0.5;
}
.site-footer a {
  color: #b8b8b8;
  text-decoration: none;
}
.site-footer .copy {
  margin-top: 10px;
  color: #b8b8b8;
  font-size: 16px;
}
.site-footer .policy-btn {
  display: flex;
  justify-content: center;
  width: 180px;
  padding: 15px 20px;
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
  white-space: nowrap;
  transition: background 0.2s, transform 0.2s, border-color 0.2s;
}
.site-footer .policy-btn:hover {
  background: rgba(255, 255, 255, 0.24);
  transform: translateY(-1px);
}
.site-footer .policy-btn:focus-visible {
  outline: 2px solid var(--primary, #6aa3ff);
  outline-offset: 2px;
}
@media (max-width: 767px) {
  .site-footer {
    padding-block: 44px;
  }
  .site-footer .footer-grid {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .site-footer .footer-left {
    width: 100%;
  }
  .site-footer .footer-left .footer-logo {
    max-width: 160px;
    height: auto;
    margin-bottom: 16px;
  }
  .site-footer .meta,
  .site-footer .copy {
    font-size: clamp(13px, 3.6vw, 14px);
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .site-footer .policy-btn {
    width: 100%;
    height: auto;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
  }
}