/* common */
html {
  position: relative;
  height: 100%;
  font-family: 'Pretendard', sans-serif;
  font-size: 62.5%;
}

body {
  position: relative;
  height: 100%;
  width: 100%;
  letter-spacing: 0;
  line-height: 1.2;
  font-size: var(--font-size-xxs);
  font-weight: var(--font-weight-regular);
  color: var(--color-black);

  &[data-page='main'] {
    position: fixed;
    inset: 0;
    overflow: hidden;
    transition: transform 0.1s;
  }
}

/* 202502131855 진재윤 수정 : 기존 common css 와 겹치기 때문에 sub page를 위한 attribute 추가 */
body[data-page='sub'] {

  /* 202502140524 진재윤 수정 : 메뉴 열릴때 스크롤 lock */
  &.scroll-lock {
    overflow: hidden;
  }

  .header {
    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background: var(--color-white);

        .header-container {
          background: var(--color-white);
        }
      }
    }
    .header-container {
      background: #281138;
    }
  }

  /* 202502211434 진재윤 수정: bottom 값 변경 */
  .fixed-nav {
    bottom: 97px;
    right: 28px;
  }
}

/* common color class */
.color-black {
  color: var(--color-black) !important;
}

/* layout */
.header {
  z-index: 999; /* 202502101819 정세영 수정 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #281138; /* 202502140314 고다솜 수정 : background style 추가 */

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background: var(--color-white);

      .gnb-list {
        .gnb-button {
          color: var(--color-black);
        }
      }

      .util-nav-list {
        .util-nav-button {
          color: var(--color-black);
        }
      }

      .lnb-content-list {
        display: flex;
      }

      .lnb-container {
        display: block;
      }

      .logo {
        .basic-logo {
          display: none;
        }
        .hover-logo {
          display: block;
        }
      }

      .header-container {
        background: var(--color-white);
      }

      .mobile-nav-wrap {
        .mobile-nav-button {
          &.call {
            border-color: var(--color-black);
            .nav-text {
              color: var(--color-black);
            }
          }

          .mobile-nav-button-icon {
            color: var(--color-black);
          }
        }
      }
    }
  }

  .header-container {
    z-index: 200;
    position: relative;
    height: var(--header-height);
    padding-inline: 4rem;
    background: transparent;
    transition: background 0.3s;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 100%;
    }
  }

  .logo {
    flex: 1;

    .hover-logo {
      display: none;
    }
  }

  /* gnb 상단 */
  .gnb {
    height: 100%;
  }

  .gnb-list {
    display: flex;
    height: 100%;

    .gnb-item {
      position: relative;
      display: flex;
      align-items: center;
      min-width: 12.3rem;
      height: 100%;
    }

    .gnb-button {
      width: 100%;
      text-align: center;
      color: var(--color-white);
      font-size: var(--font-size-xxs);
      font-weight: var(--font-weight-bold);
      transition: color 0.3s;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          color: var(--color-yellow-01);
        }
      }

      &:active {
        color: var(--color-yellow-01);
      }
    }
  }

  /* 202502241259 정세영 수정 : .gnb-item:last-child style 삭제 */

  /* 상담문의 nav */
  .util-nav {
    flex: 1;
    height: 100%;
  }

  .util-nav-list {
    display: flex;
    justify-content: flex-end;
    height: 100%;

    .util-nav-item {
      position: relative;
      min-width: 12.3rem;
      height: 100%;

      .lnb-content-list::after {
        display: none;
      }

      &.menu {
        min-width: auto;
        margin-left: 1rem;
      }

      .menu-open-button {
        display: flex;
        align-items: center;
        height: 100%;
        font-size: 3.2rem;
        color: var(--color-white);
      }
    }

    .util-nav-button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 100%;
      color: var(--color-white);
      font-size: var(--font-size-base);
      transition: color 0.3s;

      .util-nav-title {
        font-size: 1.2rem;
      }
    }
  }

  /* lnb  */
  .lnb-content-list {
    position: absolute;
    top: 100%;
    width: 100%;
    height: calc(var(--lnb-background-height) - 4rem);
    display: none;
    flex-direction: column;
    row-gap: 2rem;
    margin-top: 2rem;
    /* 202502241259 정세영 수정 : padding-inline, border-left: 삭제 */

    /* 202502241259 정세영 수정 : &::after style 삭제 */

    &.util {
      .lnb-button {
        width: 100%;
        text-align: center;
        font-size: var(--font-size-xxs);
        font-weight: var(--font-weight-bold);
        color: var(--color-black);

        @media (hover: hover) and (pointer: fine) {
          &:hover {
            color: var(--color-yellow-01);
          }
        }

        &:active {
          color: var(--color-yellow-01);
        }
      }
    }
  }

  .lnb-button {
    display: block;
    text-align: center;
    font-size: var(--font-size-tiny);
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-09);
    transition: color 0.3s;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--color-yellow-01);
      }
    }

    &:active {
      color: var(--color-yellow-01);
    }
  }

  .lnb-container {
    display: none;
    position: fixed;
    top: var(--header-height);
    width: 100%;
    height: var(--lnb-background-height);
    padding-block: 2rem;
    background: var(--color-white);
  }

  /* mobile util nav */
  .mobile-nav-wrap {
    display: flex;
    align-items: center;
    column-gap: 1.5rem;

    .mobile-nav-button {
      display: none;
      cursor: pointer;

      &.call {
        border: 1px solid var(--color-white);
        border-radius: 9999px;
        padding: 0.3rem 1rem;
        .nav-text {
          font-size: var(--font-size-sm);
          color: var(--color-white);
        }
      }

      &:first-child {
        .mobile-nav-button-icon {
          font-size: 2.8rem;
        }
      }

      .mobile-nav-button-icon {
        cursor: pointer;
        font-size: 3.6rem;
        color: var(--color-white);
      }
    }
  }

  .mobile-gnb-container {
    z-index: 200;
    overflow: hidden;
    position: fixed;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.7s ease-in-out;

    &.show {
      transform: translate3d(0, 0, 0);
    }

    .mobile-nav-login-button,
    .mobile-nav-logout-button {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 11.2rem;
      height: 4rem;
      column-gap: 0.3rem;
      border: 1px solid var(--color-black);
      border-radius: 9999px;

      .nav-text {
        font-size: var(--font-size-xxs);
      }
    }

    .mobile-nav-close-button,
    .mobile-nav-login-button,
    .mobile-nav-logout-button {
      .icon-close {
        font-size: 2rem;
        color: var(--color-black);
      }

      .icon-login2,
      .icon-logout {
        font-size: 2.8rem;
        color: var(--color-black);
      }
    }

    .mobile-gnb-wrap {
      position: relative;
      top: 0;
      left: 0;
      width: 100%;
      height: 100dvh;
      background: var(--color-white);

      .mobile-gnb-header {
        display: flex;
        align-items: center;
        column-gap: 1.5rem;
        justify-content: flex-end;
        padding: 1.8rem 1.5rem;
        border-bottom: 1px solid #d9d9d9;
      }
    }

    .mobile-gnb-content {
      width: 100%;
      height: 100%;
    }

    .mobile-gnb {
      overflow-y: auto;
      height: 100%;
      padding: 3rem 3rem 6rem;
      box-sizing: border-box; /* 202502140314 고다솜 수정 : box-sizing style 추가 */

      .mobile-gnb-list {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        padding-bottom: 6rem;
      }

      .gnb-item {
        display: flex;
        flex-direction: column;
        gap: 2rem;
      }

      .gnb-button {
        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-bold);
        color: var(--color-black);
      }

      .mobile-lnb-content-list {
        display: flex;
        flex-wrap: wrap;
        gap: 2rem;

        .mobile-lnb-button {
          min-width: 9.6rem;
          font-size: 1.2rem;
          font-weight: var(--font-weight-medium);
          color: var(--color-gray-09);
        }
      }
    }
  }
}

/* 202502140314 고다솜 수정 : header-gap style 추가 */
.header-gap {
  height: var(--header-height);
}

/* 202502140314 고다솜 수정 : 메인 페이지 전용 header, header-gap style 추가 */
body[data-page='main'] {
  .header {
    background: transparent;
  }

  .header-gap {
    display: none;
  }
}

.main {
  position: relative;
  z-index: 100;
}

/* footer */
.footer {
  z-index: 100;
  position: relative;
  height: auto;
  background-color: #101010;

  .footer-container {
    max-width: 140.8rem;
    margin: 0 auto;
    padding: 8rem 2rem 16rem;
  }

  .sns-area {
    display: flex;
    justify-content: center;
    gap: 2rem;

    .sns-icon {
      font-size: 5rem;
      color: var(--color-white);
    }
  }

  .cs-area {
    max-width: 120rem;
    position: relative;
    margin: 4rem auto 0;

    .cs-tel {
      display: flex;
      align-items: center;
      gap: 1rem;
      font-size: var(--font-size-tiny);
      color: var(--color-white);

      .term {
        font-weight: var(--font-weight-medium);
      }

      .description {
        font-weight: var(--font-weight-regular);
      }
    }

    .rounded-button-area {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
    }

    .rounded-button {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      padding: 1.4rem 1rem;
      border: 1px solid var(--color-white);
      border-radius: 5rem;
      background: #101010;
      color: var(--color-white);
      font-size: var(--font-size-sm);
      font-weight: var(--font-weight-regular);
      transition:
        background 0.3s,
        color 0.3s;

      @media (hover: hover) and (pointer: fine) {
        &:hover {
          background: var(--color-white);
          color: var(--color-purple-dark);
        }
      }

      &:active {
        background: var(--color-white);
        color: var(--color-purple-dark);
      }

      .rounded-info {
        position: absolute;
        bottom: 100%;
        margin-bottom: 0.4rem;
      }
    }
  }

  .footer-lnb {
    margin-top: 3rem;
    display: flex;
    flex-direction: column;
    row-gap: 3rem;

    .link-area {
      display: flex;
      align-items: center;
      justify-content: center;
      column-gap: 4.5rem;

      .link-list {
        display: flex;
        align-items: center;
        column-gap: 0.6rem;
        text-align: center;

        .footer-link {
          padding: 0.3rem 0.6rem;
          border: 1px solid var(--color-white);
          font-size: var(--font-size-tiny);
          font-weight: var(--font-weight-regular);
          color: var(--color-white);
          white-space: nowrap;
          transition:
            color 0.3s,
            background 0.3s;

          @media (hover: hover) and (pointer: fine) {
            &:hover {
              background: var(--color-white);
              color: var(--color-gray-03);
            }
          }

          &:active {
            background: var(--color-white);
            color: var(--color-gray-03);
          }
        }
      }
    }

    .branch-area {
      display: flex;
      flex-direction: column;
      row-gap: 3rem;

      .branch-list {
        margin: 0 auto;
        text-align: center;
        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-regular);
        color: var(--color-white);
      }

      .award-list {
        max-width: 104rem;
        display: grid;
        margin: 0 auto;
        grid-template-columns: repeat(5, 1fr);
        column-gap: 1rem;
      }
    }

    .address-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: 0 auto;
      row-gap: 2rem;

      .address {
        text-align: center;
        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-regular);
        color: var(--alpha-white-50);
      }

      .copyright {
        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-regular);
        color: var(--color-white);
      }

      .footer-logo {
        margin-top: 1rem;
      }
    }
  }
}

/* fixed nav */
.fixed-nav {
  position: fixed;
  /* 202502140314 고다솜 수정 : bottom, right style 수정 */
  bottom: 97px; /* 202502241255 정세영 수정 : bottom style 수정 */
  right: 3rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  row-gap: 10px; /* 202502141756 고다솜 수정 : row-gap style 수정 */
  z-index: 300;

  .fixed-nav-button-area {
    display: flex;
    flex-direction: column;
    row-gap: 1rem;
  }

  .fixed-nav-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.8rem;
    height: 4.8rem;
    border-radius: 50%;
    background: var(--alpha-black-30);
    color: var(--color-white);
    font-size: 2.8rem;
    line-height: 0;
    transition:
      background 0.3s,
      color 0.3s;

    &.top-button {
      opacity: 0;
      visibility: hidden;
      transition:
        opacity 0.3s,
        visibility 0.3s;

      &.show {
        opacity: 1;
        visibility: visible;
      }
    }

    &.text {
      width: 13.2rem;
      height: 4rem;
      column-gap: 0.8rem;
      border-radius: 9999px;

      .nav-text {
        font-size: var(--font-size-tiny);
        font-weight: var(--font-weight-bold);
        color: var(--color-white);
        transition: color 0.3s;
      }
    }

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background: var(--color-white);
        color: var(--color-purple-dark);

        .nav-text {
          color: var(--color-purple-dark);
        }
      }
    }
  }
}

/* 202502140314 고다솜 수정 : floating-nav style 추가 */
/* floating-nav */
.floating-nav {
  position: fixed;
  left: 50%;
  bottom: 3rem;
  width: 99.9rem;
  transform: translate3d(-50%, 0, 0);
  z-index: 100;

  .floating-list {
    display: flex;
    column-gap: 4%;
    justify-content: center;

    /* 202502141700 정세영 추가 */
    .link-mobile{
      display: none; 
    }
  }

  .floating-item {
    display: flex;
    flex-grow: 1;
    width: 100%;
  }

  .floating-link {
    display: flex;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    column-gap: 0.8rem;
    padding: 1.4rem 2.6rem;
    border-radius: 1.5rem;
    background: var(--color-white);
    box-shadow: 0 0.4rem 1rem 0 var(--alpha-black-35);
    color: var(--color-purple-dark);
    font-size: var(--font-size-xs);
    transition:
      color 0.3s,
      background 0.3s;

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        background: var(--color-brown-light);
        color: var(--color-white);
      }
    }

    &:active {
      background: var(--color-brown-light);
      color: var(--color-white);
    }
  }

  .floating-text {
    text-align: center;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;

    & > br {
      display: none;
    }
  }
}

/* modal */
.modals {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
}

.modal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--alpha-black-50);
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: var(--container-inline-padding);
  opacity: 0;
  transition: opacity 0.3s;

  .iframe {
    display: none;
  }

  &.open {
    pointer-events: all;
    opacity: 1;

    .iframe {
      display: block;
    }
  }

  .modal-container {
    width: 100%;
    max-width: 80rem;
    max-height: 60%;
  }

  &.x-large {
    .modal-container {
      max-width: 120rem;
    }
  }

  &.large {
    .modal-container {
      max-width: 100rem;
    }
  }

  &.small {
    .modal-container {
      max-width: 40rem;
    }
  }

  .modal-close {
    &.video {
      display: flex;
      justify-content: flex-end;
      width: 100%;
      margin-bottom: 1.4rem;
      font-size: var(--font-size-base);
      color: var(--color-white);
    }
  }
}

/* 계열사 전체보가 */
.modal-affiliate {
  .modal-container {
    display: flex;
  }

  .affiliate-area {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 3rem;
    background-color: var(--alpha-black-80);

    .affiliate-header {
      flex-shrink: 0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .affiliate-title {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-regular);
        color: var(--color-white);
      }
      .affiliate-close-button {
        .icon-close {
          font-size: var(--font-size-md);
          color: var(--color-white);
        }
      }
    }

    .affiliate-content {
      overflow-y: auto;
      flex-grow: 1;
      margin-top: 3rem;

      &::-webkit-scrollbar {
        width: 0.6rem;
      }

      &::-webkit-scrollbar-thumb {
        background-color: var(--color-gray-04);
        border-radius: 0.3rem;
      }

      &::-webkit-scrollbar-track {
        background-color: rgba(0, 0, 0, 0);
      }

      .affiliate-content-inner {
        display: grid;
        grid-template-columns: 1fr 3fr 1fr;
        gap: 2rem;
      }

      .site-area {
        display: flex;
        flex-direction: column;
      }

      .title {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        height: 7rem;
        background: var(--color-black);
        font-size: var(--font-size-xs);
        font-weight: var(--font-weight-regular);
        color: var(--color-white);
      }

      .link-site-area {
        flex-grow: 1;
        padding: 3.5rem 2rem;
        background: var(--color-gray-025);

        .link-site-list {
          display: grid;
          grid-auto-flow: column;
          grid-template-rows: repeat(5, min-content);
          gap: 2rem 4rem;
        }

        .affiliate-link {
          font-size: var(--font-size-xxs);
          font-weight: var(--font-weight-regular);
          color: var(--color-gray-08);

          @media (hover: hover) and (pointer: fine) {
            &:hover {
              color: var(--color-purple-light);
            }
          }

          &:active {
            color: var(--color-purple-light);
          }
        }
      }
    }
  }
}

/* button */
.arrow-button {
  width: max-content;
  display: flex;
  align-items: center;
  column-gap: 1.2rem;
  padding: 0.7rem 2.4rem;
  border-radius: 5rem;
  border: 1px solid var(--color-black);
  font-size: var(--font-size-sm);
  color: var(--color-black);
  transition:
    color 0.3s,
    background 0.3s;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      color: var(--color-white);
      background: var(--color-purple-dark);
      border-color: var(--color-purple-dark);
    }
  }

  &:active {
    background: var(--color-white);
    color: var(--color-purple-dark);
  }

  .icon-arrow_right {
    font-size: var(--font-size-base);
  }

  &.black {
    border: 1px solid var(--color-black);
    color: var(--color-black);

    @media (hover: hover) and (pointer: fine) {
      &:hover {
        color: var(--color-white);
        background: var(--color-purple-dark);
        border-color: var(--color-purple-dark);
      }
    }

    &:active {
      border-color: var(--color-purple-light);
      background: var(--color-purple-light);
      color: var(--color-white);
    }
  }
}

.filled-button {
  width: 100%;
  padding: 1.5rem;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-purple-dark);
  background: var(--color-white);
  transition:
    background 0.3s,
    color 0.3s;

  @media (hover: hover) and (pointer: fine) {
    &:hover {
      background: var(--color-purple-light);
      color: var(--color-white);
    }
  }

  &:active {
    background: var(--color-purple-light);
    color: var(--color-white);
  }

  &.small {
    width: auto;
    padding: 0.8rem 6rem;
  }
}

/* drag-scroll-x */
.drag-scroll-x {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-x: auto;

  &::-webkit-scrollbar {
    display: none;
  }
}

/* image overlay */
.image-overlays {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;

  .image-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--alpha-black-50);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;

    &.open {
      opacity: 1;
    }
  }
}

/* responsive */
@media screen and (max-width: 1920px) {
  html {
    font-size: calc(10 * 100vw / 1920);
  }
}

@media screen and (max-width: 1440px) {
  html {
    font-size: calc(10 * 100vw / 1440);
  }

  /* header */
  .header {
    .logo {
      flex: auto;
    }

    .util-nav {
      flex: auto;
    }

    .header-container {
      padding-inline: 2rem;
    }

    /* gnb */
    .gnb-list {
      .gnb-item {
        min-width: 10rem;
      }
    }
  }

  /* footer */
  .footer {
    .footer-container {
      max-width: 108rem;
    }

    .cs-area {
      max-width: 96rem;
      margin-top: 2.6rem;

      .rounded-button-area {
        gap: 3rem;
      }
    }

    .footer-lnb {
      .branch-list {
        max-width: 96.4rem;
      }

      .address-area {
        max-width: 96rem;
      }
    }
  }
}

@media screen and (max-width: 1280px) {
  html {
    font-size: calc(10 * 100vw / 1280);
  }

  /* header */
  .header {
    .logo {
      flex: unset;
      width: 13rem;
    }

    &:hover {
      .lnb-container {
        display: none;
      }
    }

    .gnb {
      display: none;
    }

    .util-nav {
      display: none;
    }

    .mobile-nav-wrap {
      .mobile-nav-button {
        display: block;

        &.call {
          display: flex;
          align-items: center;
          column-gap: 0.5rem;
          .nav-text {
            font-size: var(--font-size-sm);
            color: var(--color-white);
          }
        }
      }
    }
  }

  /* 202502140314 고다솜 수정 : fixed-nav style 삭제 */

  /* 202502140314 고다솜 수정 : floating-nav style 추가 */
  /* floating-nav */
  .floating-nav {
    width: calc(100% - 28rem);
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: calc(10 * 100vw / 1024);
  }

  /* 202502140314 고다솜 수정 : floating-nav style 추가 */
  /* floating-nav */
  .floating-nav {
    width: calc(100% - 24.4rem);

    .floating-list {
      column-gap: 2.564%;
    }

    .floating-link {
      padding-inline: 1.6rem;
      column-gap: 0.4rem;
      border-radius: 1rem;
    }
  }

  /* modal */
  .modal {
    .modal-container {
      max-width: 72rem;
    }

    &.x-large {
      .modal-container {
        max-width: 80rem;
      }
    }

    &.large {
      .modal-container {
        max-width: 80rem;
      }
    }
  }

  /* footer */
  .footer {
    .footer-container {
      max-width: 100%;
      padding: 8rem 3.5rem 16rem;
    }

    .cs-area {
      max-width: 88rem;
    }

    .footer-lnb {
      .award-list {
        max-width: 84rem;
      }

      .branch-list {
        max-width: 52.5rem;
      }

      .address-area {
        max-width: 65.8rem;
      }
    }
  }

  /* 계열사 전체보가 */
  .modal-affiliate {
    .affiliate-area {
      .affiliate-content {
        .affiliate-content-inner {
          display: grid;
          grid-template-columns: 1fr;
          gap: 2rem;
        }

        .site-area {
          display: flex;
          flex-direction: column;

          &:first-child {
            .link-site-list {
              grid-template-rows: repeat(2, min-content);
            }
          }

          &:last-child {
            .link-site-list {
              grid-template-rows: repeat(3, min-content);
            }
          }
        }

        .title {
          height: 5.4rem;
        }

        .link-site-area {
          padding: 2rem;

          .link-site-list {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: repeat(6, min-content);
            gap: 2rem 4rem;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 780px) {
  html {
    font-size: calc(10 * 100vw / 780);
  }

  /* header */
  .header {
    .header-container {
      padding-inline: 1.5rem;
    }
    .mobile-nav-wrap {
      .mobile-nav-button {
        &:first-child {
          .mobile-nav-button-icon {
            font-size: 2.4rem;
          }
        }

        .mobile-nav-button-icon {
          font-size: 2.4rem;
        }
      }
    }
  }
  .floating-nav {
    width: calc(100% - 12rem);
    bottom: 2rem;

    .floating-list {
      column-gap: 3.03%;

      .link-desktop{
        display: none; 
      }
      .link-mobile{
        display: flex; 
      }
    }

    .floating-link {
      padding-inline: 1.2rem;
    }

    .floating-icon {
      display: none;
    }
  }

  /* modal */
  .modal {
    .modal-container {
      max-width: 60rem;
    }

    &.large {
      .modal-container {
        max-width: 64rem;
      }
    }
  }

  /* footer */
  .footer {
    .sns-area {
      .sns-icon {
        font-size: 4rem;
      }
    }

    .cs-area {
      margin-top: 4.6rem;

      .rounded-button-area {
        grid-template-columns: repeat(1, 1fr);
        justify-self: center;
        gap: 1rem;
      }

      .rounded-button {
        min-width: 48rem;
        width: 100%;
      }
    }

    .footer-lnb {
      .link-area {
        max-width: 47.8rem;
        margin: 0 auto;

        .link-list {
          justify-content: center;
          flex-wrap: wrap;
          gap: 0.6rem;

          .footer-link {
            width: max-content;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 600px) {
  html {
    font-size: calc(10 * 100vw / 600);
  }

  /* 202502140314 고다솜 수정 : fixed-nav style 삭제 */

  /* 202502140314 고다솜 수정 : floating-nav style 추가 */
  /* floating-nav */
  .floating-nav {
    width: calc(100% - 6rem);

    .floating-list {
      column-gap: 2.2222%;
    }

    .floating-link {
      padding: 1rem 0.8rem;
    }
  }

  /* modal */
  .modal {
    .modal-container {
      max-width: 48rem;
    }

    &.large {
      .modal-container {
        max-width: 48rem;
      }
    }
  }

  /* footer */
  .footer {
    .footer-lnb {
      .branch-area {
        .award-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          max-width: 38rem;
          gap: 1rem;

          .award-image {
            max-width: 12rem;
          }
        }
      }

      .address-area {
        .address {
          max-width: 33.9rem;
        }
      }
    }
  }
}

@media screen and (max-width: 480px) {
  html {
    font-size: calc(10 * 100vw / 480);
  }

  /* header */
  .header {
    .mobile-nav-wrap {
      .mobile-nav-button {
        &:first-child {
          .mobile-nav-button-icon {
            font-size: 2.2rem;
          }
        }
      }
    }

    .mobile-gnb-container {
      .mobile-nav-login-button,
      .mobile-nav-logout-button {
        height: 3.4rem;

        .icon-login2,
        .icon-logout {
          font-size: 2rem;
        }
      }
    }
  }

  /* 202502140314 고다솜 수정 : floating-nav style 추가 */
  /* floating-nav */
  .floating-nav {
    bottom: 2rem;
    width: calc(100% - 5rem);

    .floating-list {
      column-gap: 2.3255%;
    }

    .floating-link {
      padding-inline: 1.6rem;
    }

    .floating-text > br {
      display: block;
    }
  }

  /* modal */
  .modal {
    .modal-container {
      max-width: 36rem;
    }

    &.large {
      padding-inline: 0;
    }

    .modal-close {
      &.video {
        padding-right: 1.4rem;
      }
    }
  }

  /* fixed nav */
  .fixed-nav {
    /* 202502251820 정세영 추가 : fixed-nav style */
    bottom: 13rem; 
    right: 1.5rem;

    .fixed-nav-button {
      width: 4rem;
      height: 4rem;
      font-size: 2.6rem;
      &.text {
        width: 10rem;
        height: 3rem;
        font-size: 2rem;
      }
    }
  }

  /* button */
  .arrow-button {
    padding: 0.6rem 1.2rem;
    column-gap: 0.6rem;
  }

  .filled-button {
    padding: 1.2rem;

    &.small {
      padding: 0.8rem 5rem;
    }
  }

  /* drag-scroll-x */
  .drag-scroll-x {
    cursor: grab;

    &.dragging {
      cursor: grabbing;
    }
  }

  /* footer */
  .footer {
    .cs-area {
      .rounded-button {
        min-width: 36rem;
        padding: 0.8rem 1rem;
      }
    }

    .footer-logo {
      max-width: 14.3rem;
    }
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 62.5%;
  }

  /* header */
  .header {
    .logo {
      width: 10rem;
    }

    .mobile-nav-wrap {
      column-gap: 1rem;
      .mobile-nav-button {
        &:first-child {
          .mobile-nav-button-icon {
            font-size: 1.5rem;
          }
        }
      }
    }

    .mobile-gnb-container {
      .mobile-nav-login-button,
      .mobile-nav-logout-button {
        width: 7.5rem;
        height: 2.4rem;
      }
    }
  }

  /* fixed nav */
  .fixed-nav {
    /* 202502140314 고다솜 수정 : fixed-nav style 삭제 */

    .fixed-nav-button-area {
      row-gap: 0.6rem;
    }

    .fixed-nav-button {
      width: 3.2rem;
      height: 3.2rem;
      font-size: 2.4rem;
      &.text {
        width: 8.4rem;
        height: 2.4rem;
        font-size: 1.6rem;
      }
    }
  }

  /* 202502140314 고다솜 수정 : floating-nav style 추가 */
  /* floating-nav */
  .floating-nav {
    bottom: 1.5rem;
    width: calc(100% - 2.6rem);

    .floating-list {
      column-gap: 3.4013%;
    }

    .floating-link {
      padding: 0.6rem 0.8rem;
    }
  }

  /* footer */
  .footer {
    .footer-container {
      padding: 6rem 1.9rem 12rem;
    }

    .sns-area {
      .sns-icon {
        font-size: 3.2rem;
      }
    }

    .cs-area {
      .rounded-button {
        min-width: 27rem;
      }
    }

    .footer-lnb {
      margin-top: 2rem;
      row-gap: 2rem;

      .branch-area {
        row-gap: 2rem;
        .award-list {
          gap: 0.6rem;

          .award-image {
            max-width: 9rem;
          }
        }
      }

      .address-area {
        row-gap: 1rem;
      }
    }
  }

  /* modal */
  .modal {
    .modal-container {
      max-width: 24rem;
    }
  }

  /* button */
  .filled-button {
    padding: 1rem;

    &.small {
      padding: 0.6rem 3rem;
    }
  }

  /* 계열사 전체보가 */
  .modal-affiliate {
    .affiliate-area {
      padding: 1.6rem;

      .affiliate-content {
        .affiliate-content-inner {
          gap: 1rem;
        }

        .title {
          height: 3rem;
        }

        .link-site-area {
          padding: 1rem;

          .link-site-list {
            gap: 1rem 1.5rem;
          }
        }
      }
    }
  }
}

/* animation */
.move-up-container,
.scale-down-container,
.scale-up-container {
  overflow: hidden;
}

.fade-in,
.fade-in-target {
  opacity: 0;
}

.fade-in {
  animation: fadeIn 1s ease-in-out forwards;
}

.fade-up,
.fade-up-target {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.fade-up {
  animation: fadeUpShow 1s ease-in-out forwards;
}

.fade-up-in-and-out,
.fade-up-in-and-out-target {
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.fade-up-in-and-out {
  &:nth-child(1) {
    animation:
      fadeUpShow 1s ease-in-out forwards 0.5s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(2) {
    animation:
      fadeUpShow 1s ease-in-out forwards 1s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(3) {
    animation:
      fadeUpShow 1s ease-in-out forwards 1.5s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(4) {
    animation:
      fadeUpShow 1s ease-in-out forwards 2s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(5) {
    animation:
      fadeUpShow 1s ease-in-out forwards 2.5s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
  &:nth-child(6) {
    animation:
      fadeUpShow 1s ease-in-out forwards 3s,
      fadeUpHide 1s ease-in-out forwards 9s;
  }
}

.move-up-content,
.move-up-content-target {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.move-up-content {
  animation: 1s ease-out moveUpShow forwards;
}

.move-up-in-and-out-container {
  overflow: hidden;

  &:nth-child(1) .move-up-in-and-out-content {
    animation:
      moveUpShow 1s ease-in-out forwards 1s,
      moveUpHide 1s ease-in-out forwards 6s;
  }
  &:nth-child(2) .move-up-in-and-out-content {
    animation:
      moveUpShow 1s ease-in-out forwards 1.5s,
      moveUpHide 1s ease-in-out forwards 6s;
  }
  &:nth-child(3) .move-up-in-and-out-content {
    animation:
      moveUpShow 1s ease-in-out forwards 2s,
      moveUpHide 1s ease-in-out forwards 6s;
  }
}

.move-up-in-and-out-content,
.move-up-in-and-out-content-target {
  display: inline-block;
  transform: translate3d(0, 100%, 0);
  opacity: 0;
}

.scale-down-content,
.scale-down-content-target {
  transform: scale(1.1);
}

.scale-down-content {
  animation: scaleDown 2s ease-in-out forwards;
}

.scale-up-content {
  animation: scaleUp 2s ease-in-out forwards;
}

.move-rtl,
.move-rtl-target {
  width: calc(100% + 20rem) !important;
  transform: translate3d(0, 0, 0);
}

.move-rtl {
  animation: moveRtl 10s ease-in-out forwards;
}

.move-ltr,
.move-ltr-target {
  width: calc(100% + 20rem) !important;
  transform: translate3d(-20rem, 0, 0);
}

.move-ltr {
  animation: moveLtr 10s ease-in-out forwards;
}

.x-scale-ltr,
.x-scale-ltr-target {
  transform: scale3d(0, 1, 1);
  transform-origin: left;
}

.x-scale-ltr {
  animation: xScaleUp 1s ease-in-out forwards;
}

.x-scale-rtl,
.x-scale-rtl-target {
  transform: scale3d(0, 1, 1);
  transform-origin: right;
}

.x-scale-rtl {
  animation: xScaleUp 1s ease-in-out forwards;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeUpShow {
  0% {
    transform: translate3d(0, 2rem, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes fadeUpHide {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -2rem, 0);
    opacity: 0;
  }
}

@keyframes moveUpShow {
  0% {
    transform: translate3d(0, 100%, 0);
    opacity: 0;
  }
  100% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes moveUpHide {
  0% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  100% {
    transform: translate3d(0, -100%, 0);
    opacity: 0;
  }
}

@keyframes scaleDown {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes scaleUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

@keyframes scaleUpLarge {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.3);
  }
}

@keyframes moveRtl {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-10rem, 0, 0);
  }
}

@keyframes moveLtr {
  0% {
    transform: translate3d(-20rem, 0, 0);
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes xScaleUp {
  0% {
    transform: scale3d(0, 1, 1);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}