/* =================================================================
<ito-citytour/current.css>
- 이토시티투어 현재 스타일
- 순서 및 분류에 따라 그룹화
- SCSS 중첩 구조로 재작성
================================================================= */

@charset "UTF-8";

/* ========== 1. 전역 변수 ========== */
:root {
  /* Colors */
  --green-color: #009944;
  --main-color: #f05151;
  --main: #f05151;
  --main-light: #ffc82f;
  --main-deep: #9a2407;
  --mint-blue: #00c2d5;
  --blue: #0068ac;
  --main-gra: linear-gradient(to left, #f05151, #ffc82f);
  --main-gra-rev: linear-gradient(to right, #f05151, #ffc82f);

  --main2: #db471d;
  --main3: #0068ac;

  /* Course Types */
  --type3: #0068ac;
  --type4: #44316c;
  --type5: #009944;
  --type1: var(--main-color);
  --type2: var(--orange);
  --type6: #00b3b3;
  --type7: #a400a1;

  /* Layout */
}

@font-face {
  font-family: "Sweet";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Light.woff2")
    format("woff2");
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "Sweet";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Regular.woff2")
    format("woff2");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Sweet";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Medium.woff2")
    format("woff2");
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Sweet";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-SemiBold.woff2")
    format("woff2");
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Sweet";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Bold.woff2")
    format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Sweet";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-ExtraBold.woff2")
    format("woff2");
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Sweet";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/SUITE-Heavy.woff2")
    format("woff2");
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: "Cafe24SurroundAir";
  src: url("https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff")
    format("woff");
  font-weight: normal;
  font-display: swap;
}
body,
input,
textarea,
table,
button,
select,
optgroup,
option {
  font-family: "Sweet";
  letter-spacing: 0;
  letter-spacing: -0.04em;
}
.gnb,
.head {
  letter-spacing: -0.05em;
}
h1,
h2,
h3,
h4 {
  letter-spacing: -0.04em;
}
.material-symbols-sharp {
  font-family: "Material Symbols Rounded";
}
.ms-icon {
  &.sharp {
    font-family: "Material Symbols Rounded";
  }
}
html,
body {
  margin: 0;
  padding: 0;
  letter-spacing: -0.05em;
}
.main {
  background-color: #000;
  overflow: hidden;
  position: static;
  background-color: transparent;
  min-height: 100dvh;
  height: 100%;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  .gnb {
    position: sticky;
  }
  .visual.contents {
    flex-grow: 1;
    padding-top: 0;
    height: auto;
    --gap: 30px;
    overflow: visible;
    width: 100%;
    max-width: 100%;
    margin: 0;
    min-height: 0;
    .text {
      height: 100%;
      justify-content: center;
      align-items: center;
      width: 100%;
      min-height: 0;
    }

    .links {
      .btn {
        &:first-child {
          background-color: var(--gray-dark);
        }
        &.secondary {
          color: #000;
        }
      }
      &.card {
        height: calc(50% - var(--gap) / 2);
        gap: var(--gap);
        display: flex;
        .btn {
          display: flex;
          flex-direction: column;
          .icon {
            margin: 0;
            margin-bottom: 20px;
            height: auto;
            max-height: 200px;
            flex-grow: 1;
            flex-shrink: 1;
          }
        }

        a {
          padding: 1.5em;
          border-radius: 20px;
          display: flex;
          flex-direction: column;
          border: 0;
          position: relative;
          overflow: hidden;
          width: auto;
          width: calc(100% / 3 - 15px);
          transition:
            box-shadow 0.25s ease,
            transform 0.25s ease;
          > * {
            position: relative;
            z-index: 1;
            min-height: 0;
            flex-shrink: 0;
          }
          h4 {
            font-size: 1.6em;
          }
          &::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 0;
            background: rgba(255, 255, 255, 0.3);
            opacity: 1;
            transition: opacity 0.25s ease;
          }
          &:hover::before {
            opacity: 0;
          }
          &:active::before {
            opacity: 0.18;
          }
          p {
            font-size: 1rem;
          }
          &:nth-child(1) {
            background: var(--pastel-blue-gra);
            box-shadow: 0 14px 30px var(--pastel-blue-shadow);
            color: #0d2a4b;
            &:hover {
              box-shadow: 0 18px 34px var(--pastel-blue-shadow-hover);
            }
          }
          &:nth-child(2) {
            background: var(--pastel-pink-gra);
            box-shadow: 0 14px 30px var(--pastel-pink-shadow);
            color: #4a0f1f;
            &:hover {
              box-shadow: 0 18px 34px var(--pastel-pink-shadow-hover);
            }
          }
          &:nth-child(3) {
            background: var(--pastel-yellow-gra);
            box-shadow: 0 14px 30px var(--pastel-yellow-shadow);
            color: #4f3600;
            &:hover {
              box-shadow: 0 18px 34px var(--pastel-yellow-shadow-hover);
            }
          }
        }
      }
    }
    .set {
      height: 100%;
      gap: var(--gap);
      min-height: 0;
      width: 100%;
      max-width: var(--width);
      margin: auto;
      display: flex;
      flex-wrap: wrap;
      align-content: center;
      .popupzone_box,
      .right-bottom {
        max-height: 400px;
      }

      .links {
        width: 100%;
        margin-top: 0;
      }
      .second {
        max-height: calc(50% - var(--gap) / 2);
        display: flex;
        width: 100%;
        gap: var(--gap);
      }
      .right-bottom {
        flex-grow: 1;
        flex-direction: column;
        display: flex;
        gap: 0;
        overflow: visible;
        align-items: center;
        align-content: baseline;
        justify-content: baseline;
        position: relative;
        .title-area {
          display: flex;
          justify-content: space-between;
          width: 100%;
          padding: 20px 0;
          .sns {
            position: static;
            display: flex;
            flex-direction: row;
            gap: 10px;
            top: 20px;
            right: 10px;
            padding: 0;
            z-index: 10;
            li {
              a {
                width: 40px;
                height: 40px;
              }
              &:hover {
                animation: pulse 0.2s ease-in-out;
              }
            }
          }
          .title {
            flex-grow: 0;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: left;
            padding-left: 10px;
            width: 100%;
            height: fit-content;

            h3 {
              font-size: 1.4em;
              display: flex;
              align-items: center;
              gap: 8px;
            }
            h4 {
              font-size: 1em;
            }
            .btn-more {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 28px;
              height: 28px;
              min-width: 28px;
              border-radius: 50%;
              border: none;
              background: var(--main-color, #f05151);
              color: #fff;
              text-decoration: none;
              transition: transform 0.2s, box-shadow 0.2s;
              box-shadow: 0 2px 8px rgba(240, 81, 81, 0.35);
              flex-shrink: 0;
              .material-symbols-sharp {
                font-size: 18px;
                font-weight: 700;
              }
              &:hover {
                transform: scale(1.15);
                box-shadow: 0 4px 12px rgba(240, 81, 81, 0.5);
              }
            }
          }
        }

        .list.horizon.single {
          width: 100%;
          &::before {
            display: none;
          }
          li {
            border: 0;
            &::before {
              left: 5px;
            }
            .infos {
              .info {
                padding-right: 0;
              }
              p {
                font-size: 15px;
                text-align: left;
              }
              .date {
                font-size: 12px;
              }
            }
            justify-content: flex-start;
          }
          display: flex;
          flex-direction: column;
          gap: 10px;
          flex-grow: 1;
          justify-content: flex-start;
          > li {
            flex-grow: 1;
            max-height: 90px;
            background: color-mix(in srgb, #ffffff 92%, rgba(255, 255, 255, 0));
            border-radius: 14px;
            padding: 0 16px;
            box-shadow: 0 10px 18px rgba(0, 0, 0, 0.05);
            transition:
              transform 0.2s ease,
              box-shadow 0.2s ease,
              background-color 0.2s ease;
            cursor: pointer;
            .category {
              font-weight: 700;
              color: var(--main);
              font-size: 0.9rem;
            }
            .title {
              font-weight: 400;
              margin: 4px 0;
              color: #1c1c1c;
            }
            .date {
              color: #6b7a90;
              font-size: 0.9rem;
            }
            &:hover {
              transform: translateY(-3px);
              box-shadow: 0 14px 26px rgba(0, 0, 0, 0.08);
              background: #ffffff;
            }
          }
        }
      }
      .popupzone_box {
        position: relative;
        border-radius: 18px;
        aspect-ratio: 12.8 / 8;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
        background: #f9fbff;
        .control {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: -19px;
          z-index: 2;
          width: calc(100% + 38px);

          ul {
            display: flex;
            justify-content: space-between;
            gap: 8px;
            margin: 0;
            padding: 0;
            list-style: none;
          }
          li {
            &.is-paused {
              .is-pause {
                display: none;
              }
              .is-play {
                display: inline-flex;
              }
            }
            button {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              width: 38px;
              height: 38px;
              border: none;
              border-radius: 50%;
              background: rgba(255, 255, 255, 0.6);
              backdrop-filter: blur(10px);
              box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
              cursor: pointer;
              transition:
                background-color 0.2s ease,
                transform 0.2s ease;
              color: #1c1c1c;
              .material-symbols-sharp {
                font-size: 1.4em;
                &.is-play {
                  display: none;
                }
              }
              .text {
                font-size: 0;
              }
              &:hover {
                background: rgba(255, 255, 255, 0.95);
                transform: translateY(-1px);
              }
              &:active {
                transform: translateY(0);
              }
            }
          }
        }
        .pzone-bar {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 14px;
          padding: 10px;
          position: absolute;
          bottom: 0;
          z-index: 2;
          width: fit-content;
          height: 100%;
          right: 0;
          .pagination.progress {
            width: auto;
            height: 1px;
            background: #e9eef6;
            border-radius: 999px;
            overflow: hidden;
            position: static;
            flex-grow: 1;
            opacity: 0;
            .swiper-pagination-progressbar-fill {
              height: 1px;
              background: linear-gradient(90deg, #6aa6ff, #6dd5ed);
              border-radius: inherit;
            }
          }
          .counter {
            font-weight: 700;
            color: #0d2a4b;
            font-size: 12px;
            padding: 5px;
            .current {
              color: #245fa6;
              margin-right: 2px;
            }
            .total {
              color: #6b7a90;
            }
          }
          .controls {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            gap: 8px;

            li {
              .is-pause {
                display: inline-block;
              }
              .is-play {
                display: none;
              }
              &.is-paused {
                .is-pause {
                  display: none;
                }
                .is-play {
                  display: inline-flex;
                }
              }
              button {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                width: 36px;
                height: 36px;
                border: none;
                border-radius: 10em;
                background: transparent;
                color: #0d2a4b;

                cursor: pointer;
                background: rgba(255, 255, 255, 0.6);
                backdrop-filter: blur(10px);
                box-shadow: 0 8px 16px rgba(0, 0, 0, 0.06);
                transition:
                  background-color 0.2s ease,
                  transform 0.2s ease,
                  box-shadow 0.2s ease;
                .material-symbols-sharp {
                  font-size: 1.4em;
                }
                .text {
                  font-size: 0;
                  display: none;
                }
                &:hover {
                  background: #d8e8ff;
                  transform: translateY(-1px);
                  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.07);
                }
                &:active {
                  transform: translateY(0);
                }
              }
            }
          }
        }
        .popupzone {
          width: 100%;
          height: 100%;
          aspect-ratio: 1.6/1;
          border-radius: inherit;
          overflow: hidden;
          .swiper-wrapper,
          .swiper-slide {
            height: 100%;
          }
          .swiper-wrapper {
            align-items: stretch;
          }
          .swiper-slide {
            display: flex;
            a {
              display: block;
              width: 100%;
              height: 100%;
            }
            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              object-position: left top;
              display: block;
            }
          }
        }
      }
    }

    &.construct {
      .gnb,
      .footer {
        --width: 100%;
        padding-left: 30px;
        padding-right: 30px;
      }
      .gnb {
        .menu {
          .menu-n {
            pointer-events: none;
            li {
              display: none;
            }
          }
          .right-menu {
            font-size: 1em;
            .member-menu {
              gap: 24px;
              font-size: 1em;
            }
          }
        }
      }
    }
  }

  .gnb {
    color: var(--gray-dark);
    background-color: transparent;
    overflow: initial;
    .scrolled & {
      box-shadow: none;
      background: linear-gradient(
        180deg,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 1) 30%,
        rgba(255, 255, 255, 0)
      );
    }
    .menu {
      .logo {
        img {
          &.logo-ori {
            display: block;
          }
          &.logo-w {
            display: none;
          }
        }
      }
      .character {
        display: none;
      }
      .menu-n {
        li {
          display: none;
        }
      }
    }
  }
  .footer {
    border: 0;
    .sns {
      li {
        a:hover {
          color: #fff;
        }
      }
    }
  }
  .contents {
    padding-top: 0;
    padding-bottom: var(--safe-bottom);
  }
}
.gnb {
  transition: border-radius 0.3s;
  .menu .logo img {
    max-height: 40px;
  }
  .menu .menu-n {
    --menu-space: 40px;
  }
  .character {
    left: 0;
    position: absolute;
    width: var(--width);
    left: 50%;
    transform: translateX(-50%);
    margin: auto;
    bottom: 30px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    opacity: 0;
    pointer-events: none;
    img {
      width: 100px;
    }
  }
}

.filter-control {
  button {
    .scrolled .filter-fixed .filter-targets & {
      padding: 10px 12px;
    }
  }
}
.overview {
  &.small {
    gap: 100px;
  }
}
ul.notification {
  &.vertical {
    .notion & {
      --cell: 5;
      li {
        flex-grow: 1;
      }
    }
    &.card {
      --cell: 4;
      & > li {
        flex-grow: 1;
        .icon {
          font-size: 2.4em;
        }
        p {
          font-size: 0.9em;
        }
      }
    }
    &.progress {
      > li {
        .icon {
          font-size: 3em;
        }
        .noti-con {
          p {
            font-size: 0.95em;
          }
        }
      }
    }
  }
}
.visual {
  text-align: center;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  top: 0;
  left: 0;
  /* position: absolute; */
  /* height: 100%; */
  width: 100%;
  min-width: auto;
  min-height: auto;
  max-width: var(--width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  overflow: visible;
  padding: 0;
  flex-grow: 1;
  overflow: hidden;
  flex: 1;
  position: relative;
  height: auto;
  min-height: initial;
  align-content: flex-start;

  .video-player {
    animation: fade 2s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: calc(constant(safe-area-inset-top) * -1);
    margin-top: calc(env(safe-area-inset-top) * -1);
    margin-bottom: calc(constant(safe-area-inset-bottom) * -1);
    margin-bottom: calc(env(safe-area-inset-bottom) * -1);
    flex-grow: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none; /* 클릭 비활성화 */
    background: #000; /* 영상 로딩 전 배경 */
    .background-video {
      object-fit: cover;
      object-position: center;
      width: 100%;
      height: 100%;
    }
  }
  .text {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-grow: 1;
    background-color: transparent;
    width: 100%;
    position: relative;
    z-index: 1;

    word-break: keep-all;
    padding: 0;
    color: var(--gray-dark);
    gap: 1em;

    h2 {
      font-size: 3em;
    }
    p {
      color: var(--gray-dark);
      opacity: 0.85;
      font-size: 1.2em;
      line-height: 1.4;
      font-weight: 300;
    }
  }

  .tel {
    p {
      font-size: 0.8rem;
    }
    .number {
      margin-bottom: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      .material-symbols-rounded {
        font-family: "material symbols rounded";
        font-size: 1.2em;
      }
    }
  }
  .number {
    &,
    * {
      font-family: "Cafe24SurroundAir";
    }
  }
}
.sns {
  display: flex;
  justify-content: center;
  li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    border-radius: 50%;
    overflow: hidden;
    a {
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: 0.2s;
      width: 60px;
      border-radius: 6px;
      img {
        display: block;
        width: 100%;
      }
    }
    &:hover {
      animation: pulse 0.3s ease-in-out;
    }
  }

  .right-bottom & {
    position: static;
    flex-direction: row;
    transform: initial;
    padding: 10px;
    gap: 10px;
    align-items: center;
  }
}
.floating-banner {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  z-index: 10;
  .sns {
    flex-direction: column;
    gap: 10px;
    padding: 5px;
    background-color: color-mix(in srgb, var(--white) 50%, transparent);
    backdrop-filter: blur(5px);
    border-radius: 8em;
    margin-top: 10px;
    box-shadow: -5px 0 10px rgba(0, 0, 0, 0.07);
    > li {
      width: 40px;
      height: 40px;
      background-color: var(--gray-pale);
      border-radius: 8em;
      overflow: hidden;
      a {
        width: 100%;
        &.youtube {
          background-color: var(--gray-pale);
        }
      }
    }
  }
}
.contents {
  & .static {
    & .irregular {
      &.straight {
        > div.end {
          --col: 2;
        }
      }

      & > div {
        & .img {
          aspect-ratio: 1/1;
          img {
            border-radius: 16px;
          }
        }
      }
    }
  }
}
.ui-item {
  &.prices {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 10px;
    row-gap: 10px;
    .ui-sect & {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    > li {
      padding: 24px;
    }
    &.rentPrice {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      > li:first-child {
        grid-column: 1 / -1;
      }
      > li {
        flex-grow: 1;
        background-color: var(--gray-pale);
        .price-set {
          display: flex;
          flex-direction: column;
          gap: 5px;
        }
        .item-name {
          .price-multi {
            margin-top: 1em;
            row-gap: 5px;
            h5 {
              width: 100%;
            }
          }
        }
      }
    }
  }
}

.time-clock {
  .clock-frame {
    --size: 100px;
  }
}
/* .contents {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Pretendard', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
    sans-serif;
} */
.list.horizon.prices.program {
  li {
    .infos {
      align-items: center;
      .info {
        flex-grow: 0;
        h2 {
          .now:not(.soldout) &::before {
            content: "접수중";
          }
        }
      }
    }
    .subinfo {
      > li {
        p {
          display: flex;
          flex-wrap: wrap;
        }
        flex-shrink: 0;
        &[data-label="정원"] {
          width: 70px;
        }
        &.key-date {
          width: 110px;
        }
        &.key-target {
          width: 90px;
        }
        &.key-time {
          width: 110px;
        }
      }
    }
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* 비전 및 전략 카드 */
.stragedy {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;

  .card {
    border: 2px solid var(--main-color-light, #f7a156);
    border-radius: 18px;
    padding: 24px 22px 20px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.04);

    h4 {
      font-size: 20px;
      font-weight: 800;
      margin-bottom: 18px;
    }

    .steps {
      display: flex;
      flex-direction: column;
      gap: 12px;

      li {
        display: flex;
        align-items: center;
        gap: 10px;
        line-height: 1.4;

        .num {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          color: #fff;
          font-weight: 800;
          font-size: 16px;
          flex-shrink: 0;
        }
      }
    }

    &.tone-orange {
      border-color: #f6a54b;
      h4 {
        color: #f28322;
      }
      .num {
        background: linear-gradient(180deg, #fbbf7e 0%, #f28322 100%);
      }
    }

    &.tone-red {
      border-color: #f26b8f;
      h4 {
        color: #ed3d5f;
      }
      .num {
        background: linear-gradient(180deg, #f89aab 0%, #ed3d5f 100%);
      }
    }

    &.tone-coral {
      border-color: #f07e7e;
      h4 {
        color: #e75b5b;
      }
      .num {
        background: linear-gradient(180deg, #f7a7a7 0%, #e75b5b 100%);
      }
    }
  }
}

.sect {
    .outlinks & {
        align-items: center;
        padding: 30px 0;
        gap: 1em;

        .head {
            gap: 10px;
            display: flex;
            flex-direction: column;
            padding: 0;
            margin-bottom: 10px;
        }

        .outlink-corp-card {
            display: flex;
            align-items: center;
            flex-direction: column;
            gap: 2em;
            width: 100%;
            color: inherit;
            text-decoration: none;
        }

        .outlink-corp-logo {
            padding: 0;
            border: 0;

            > a {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 200px;
                margin: auto;
            }
        }

        .outlink-corp-info {
            margin: 0;
            padding: 0;
            list-style: none;

            li {
                display: flex;
                gap: 14px;
                padding: 10px 0;
                font-size: 14px;
                border-bottom: 1px solid rgba(0, 0, 0, 0.06);

                &:last-child {
                    border-bottom: 0;
                    padding-bottom: 0;
                }

                strong {
                    flex: 0 0 52px;
                }

                p {
                    margin: 0;
                    color: var(--gray-mid);
                    word-break: keep-all;
                }

                a {
                    text-decoration: underline;
                }
            }
        }

        .info {
            text-align: center;

            display: flex;
            flex-direction: column;
            gap: 4px;

            h4,
            h5 {
                font-weight: normal;

                a {
                    text-decoration: underline;
                }
            }

            h3 {
                font-weight: 900;
            }

            p {
                color: var(--gray-mid);
                line-height: 1.4;
            }
        }

        .outlink-logo-grid {
            margin: 0;
            padding: 0;
            list-style: none;
            display: grid;
            grid-template-columns: repeat(4, minmax(0, 1fr));
            gap: 18px;
        }

        .outlink-logo-item {
            display: flex;
            flex-direction: column;
            justify-content: center;
            min-height: 160px;
            padding: 30px;
            border: 1px solid var(--gray-border);
            border-radius: 20px;
            background: var(--white);
            transition: transform 0.2s ease,
            box-shadow 0.2s ease,
            border-color 0.2s ease;

            p {
                margin: 0;
                font-size: 0.98rem;
                line-height: 1.35;
                text-align: center;
                font-weight: 400;
                color: var(--gray-dark);
                word-break: keep-all;
            }

            a {
                display: flex;
                flex-direction: column;
                justify-content: center;
                height: 100%;
                color: inherit;
                text-decoration: none;
            }

            &:hover {
                transform: translateY(-6px);
                border-color: rgba(240, 81, 81, 0.28);
                box-shadow: 0 18px 30px rgba(240, 81, 81, 0.12);
            }
        }

        .outlink-logo-thumb {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 84px;
            margin-bottom: 10px;

            img {
                width: auto;
                max-width: 100%;
                max-height: 72px;
                height: auto;
            }
        }

        @media (max-width: 1024px) {
            .outlink-logo-grid {
                grid-template-columns: repeat(3, minmax(0, 1fr));
            }
        }

        @media (max-width: 812px) {
            gap: 24px;
            padding: 24px;
            &.flex.horizon {
                flex-direction: column;
                align-items: stretch;

                .head {
                    width: 100%;
                }
            }

            .outlink-corp-card {
                flex-direction: column;
                align-items: stretch;
                padding: 0;

                > a {
                    flex-direction: column;
                    align-items: stretch;
                    gap: 18px;
                }
            }

            .outlink-corp-logo {
                min-height: 110px;
            }

            .outlink-logo-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
                gap: 14px;
            }

            .outlink-logo-item {
                padding: 16px 14px;

                p {
                    font-size: 0.9rem;
                    word-break: break-all;
                }
            }

            .outlink-logo-thumb {
                min-height: 72px;

                img {
                    max-height: 60px;
                }
            }
        }

        @media (max-width: 520px) {
            .outlink-logo-grid {
                grid-template-columns: repeat(2, minmax(0, 1fr));
            }
        }
    }

    &.over {
        .head.copy.s0101 {
            width: 60%;
        }

        .head {
            gap: 12px;

            .excl {
                font-weight: normal;

                h4 {
                    font-weight: normal;
                    color: var(--gray-mid);
                }

                & + .btn.underline {
                    margin-top: 20px;
                }
            }
        }
    }
}
/* 비전 */
.vision {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: var(--padding);
  .copy {
    background: var(--main-gra);
    color: #fff;
    padding: 1.4em 3rem;
    text-align: center;
    border-radius: 20em;
    display: flex;
    flex-direction: column;
    gap: 10px;
    h4 {
      letter-spacing: 0;
      color: yellow;
      font-weight: 900;
    }
    h3 {
      font-size: 2em;
      font-weight: 300;
      span {
        font-weight: bold;
      }
    }
  }
}
.allborder {
  table {
    tbody {
      th {
        vertical-align: middle;
      }
    }
  }
}
/* 조직도 */
.table.org {
  th,
  td {
    padding-left: 20px;
    border-left: 1px solid var(--gray-border);
  }
  thead {
    th:first-child {
      padding-left: 0;
      border-left: 0;
    }
  }
  tbody {
    th {
      &:first-child {
        width: 1%;
        white-space: nowrap;
        padding-left: 0;
        border-left: 0;
      }
    }
  }
}
.org-re {
  --n: 3;
  --padd: 2rem;
  margin-bottom: 30px;
  padding: 0 2rem;
}
/* ========== Responsive ========== */
@media (min-width: 813px) {
  /* pc전용 */
  .gnb {
    border-radius: 0 0 30px 30px;
    .scrolled & {
      border-radius: 0 0 30px 30px;
      overflow: hidden;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      &::after {
        display: none;
      }
    }
  }
  /* GNB 메뉴에 마우스 호버 시 배경 스타일 적용 */
  .gnb:has(.menu-n li:hover) {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
  }
  .gnb:has(.menu-n li:hover) {
    .character {
      opacity: 1;
    }
  }
  .contents {
    .static {
      .irregular {
        &.straight {
          > div.end {
            .col {
              margin-top: 100px;
              &:nth-child(n + 2) {
                margin-top: 100px;
              }
              .img {
                aspect-ratio: 16/9;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {
  .main {
    .visual.contents {
      .set {
        .right-bottom {
          .list.horizon.single {
            > li {
              padding: 12px;
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1000px) {
  .main {
    & .visual.contents {
      --gap: 20px;
      .set {
        height: auto;
        .popupzone_box {
          max-width: 520px;
          background: transparent;
          height: auto;
          align-self: self-start;
          .popupzone {
            height: auto;
          }
        }
        & .right-bottom {
          height: auto;
          max-height: 320px;
          .title-area {
            padding: 12px 0;
          }
          & .sns {
            & li {
              a {
                width: 34px;
                height: 34px;
              }
            }
          }
          & .list.horizon.single {
            > li {
            }
          }
        }
      }
    }
  }
}
@media (min-width: 813px) and (max-width: 999px) {
  .main {
    font-size: 14px;
    .footer {
      padding: 20px 0;
    }
    & .visual.contents {
      --gap: 20px;
      .set {
        height: 100%;
        .popupzone_box {
          max-width: 460px;
          background: transparent;
          height: auto;
          align-self: self-start;
          .popupzone {
            height: auto;
          }
        }
        & .right-bottom {
          height: auto;
          max-height: 320px;
          flex-shrink: 1;
          min-width: 0;
          .title-area {
            padding: 12px 0;
            & .sns {
              & li {
                a {
                  width: 34px;
                  height: 34px;
                }
              }
            }
          }

          & .list.horizon.single {
            > li {
              padding: 8px 12px;
            }
          }
        }
      }
    }
  }
}
@media (min-width: 1000px) and (max-height: 768px) {
  .main {
    font-size: 14px;
    .footer {
      padding: 20px 0;
    }
  }
}
@media (max-width: 1000px) and (max-height: 1000px) {
  .main {
    & .visual.contents {
      --gap: 20px;
      .set {
      }
    }
  }
}
@media (min-width: 1000px) and (max-width: 1100px) {
  .main {
    & .visual.contents {
      --gap: 20px;
      .set {
        .popupzone_box {
          max-width: 550px;
        }
        & .right-bottom {
          .title-area {
            .sns {
              gap: 5px;
              li a {
                width: 32px;
                height: 32px;
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 812px) {
  body,
  html {
    padding: 0;
  }
  :root {
    --padding: 20px;
  }
  .gnb {
    .character {
      display: none;
    }
    & .menu {
      & > li.logo {
        img {
          max-height: 50%;
        }
      }
    }
  }
  .main {
    height: auto;
    .gnb {
      position: fixed;
      background-color: var(--white);
      &.active {
        .coll {
          color: initial;
          background-color: transparent;
        }
      }
      .menu {
        .menu-n {
          li {
            display: block;
          }
        }
      }
    }
    .footer {
      background-color: transparent;
    }

    .visual.contents {
      padding-top: var(--top-h);
      overscroll-behavior-y: contain; /* iOS에서 아래로 당겨 새로고침 방지 */
      overscroll-behavior-x: none;
      padding-bottom: 0;

      &::before,
      &::after {
        display: none;
      }
      &::after {
        top: initial;
        bottom: 0;
        background: linear-gradient(
          180deg,
          rgba(0, 0, 0, 0) 0%,
          rgba(0, 0, 0, 1)
        );
      }
      .text {
        height: auto;
      }
      .set {
        height: auto;
        flex-direction: column;
        flex-wrap: nowrap;
        width: 100%;
        padding: 0 20px;
        .second {
          flex-direction: column;
          .popupzone_box {
            max-width: 100%;
            max-height: initial;
          }
          > div {
            width: 100%;
          }
        }
        .links {
          gap: 20px;
          &.card {
            flex-direction: column;
            a {
              width: 100%;
              justify-content: center;
              align-items: flex-start;
              text-align: left;
              height: 160px;

              p {
                text-align: left;
                width: 70%;
                font-size: 14px;
              }
              &.primary {
                .icon {
                  right: 5px;
                }
              }
              .icon {
                position: absolute;
                top: 0;
                right: 20px;
                margin: 0;
                height: 100%;
                display: flex;
                align-items: center;
                img {
                  max-height: 70%;
                }
              }
            }
          }
        }
        .right-bottom {
          width: 100%;
          gap: 10px;
          padding: 0;
          position: relative;
          padding-bottom: 60px;
          max-height: initial;
          .title-area {
            padding: 0;
            position: static;
            .title {
              padding-left: 10px;
              width: 100%;
              h4 {
                font-size: 1rem;
                color: var(--gray-mid);
              }
              h3 {
                font-size: 1.3rem;
              }
            }
            .sns {
              position: absolute;
              height: fit-content;
              bottom: 0;
              top: initial;
              right: initial;

              width: 100%;
              justify-content: center;
            }
          }

          .list.horizon.single {
            gap: 10px;
            li {
              padding: 15px;
            }
          }
        }
        .popupzone_box {
          max-width: 100%;
          width: 100%;
          border-radius: 14px;
          .swiper-slide {
            min-height: initial;
          }
          .pzone-bar {
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            gap: 10px;
            .pagination.progress {
              grid-column: 1 / 3;
            }
            .counter {
              order: 2;
            }
          }
        }
      }
    }
    .gnb {
      padding-left: 0px;
      padding-right: 0px;
      .construct & {
        padding-left: 0;
        padding-right: 0;
      }
      .logo {
        justify-content: flex-start;
      }
      .menu-n {
        color: var(--gray-dark);
      }
    }
    .footer {
      font-size: 0.9em;
      padding: var(--padding);
      padding-bottom: 20px;
      .sns {
        > li a:hover {
          color: #fff;
        }
      }
    }
    .gnb .menu .logo img {
      max-height: 30px;
    }

    &.construct {
      .gnb {
        & .menu {
          flex-wrap: nowrap;
          justify-content: space-between;
          flex-direction: row;
          align-items: center;
          .logo {
            width: 40%;
            padding-right: 0;
          }
          .menu-all {
            width: fit-content;
            padding-right: var(--padding);
            position: static;
            height: auto;
            display: flex;
            align-items: flex-end;
            background-color: transparent;
            backdrop-filter: initial;
            box-shadow: none;
            justify-content: flex-end;
            .menu-n {
              display: none;
            }
          }
          .right-menu {
            gap: 10px;
            width: auto;
            padding: 0;
            background-color: transparent;
          }
        }
      }
    }
  }
  .ui-item {
    &.prices {
      display: flex;
    }
  }
  .list.vertical {
    &.program > li {
      --cell: 2;
      .thumb {
        --ratio: 4/3;
      }
    }
  }
  .contents {
    .static {
      .irregular {
        & > div {
          &:nth-child(even),
          &:nth-child(odd) {
            --sp: 28px;
            .col {
              padding: 0 var(--sp);
              .head,
              .img {
                padding-left: 0;
                padding-right: 0;
              }
            }
          }
        }
      }
    }
  }
  .static .sect {
    .head.copy {
      h4 {
        font-size: 1.15em;
        br {
          display: block;
          line-height: 1.4;
        }
      }
    }
  }
  .list.horizon.prices.program {
    li {
      .go-btn-area {
        position: absolute;
        bottom: 20px;
        right: 20px;
      }
      a.go-btn {
        padding: 10px 12px;
        line-height: 1;
        right: var(--padding);
      }
    }
  }
  .overview {
    &.small {
      gap: 3em;
      justify-content: space-between;
      li {
        display: flex;
        flex-direction: column;
        h4 {
          flex-grow: 1;
        }
      }
    }
  }
  .sns {
    .set {
      .popupzone_box,
      .right-bottom {
        width: 100%;
      }
      .swiper-slide {
        min-height: initial;
      }
    }
  }
  .floating-banner {
    top: initial;
    transform: initial;
    bottom: calc(var(--safe-bottom) + 10px);
    right: 10px;
    .sns {
      flex-direction: row;
      > li {
        width: 24px;
        height: 24px;
      }
    }
  }
  .reservation:has(.reserv-ui) {
    .floating-banner {
      bottom: calc(var(--safe-bottom) + 80px);
    }
    &:has(.reserv-btns .submit) {
      .floating-banner {
        display: none;
      }
    }
  }
  .sect.over {
    .head.copy.s0101 {
      width: 100%;
    }
  }
  .table.org {
    th,
    td {
      padding: 15px 10px;
      word-break: keep-all;
      border-left: 0;
    }
    tbody {
      th {
        background: linear-gradient(to right, #fff 50%, var(--gray-pale) 100%);
        padding-right: 10px;
      }
    }
    thead {
      th:nth-child(1) {
        background: linear-gradient(to right, #fff 50%, var(--gray-pale) 100%);
      }
    }
  }
  /* 동영상 좌우 스크롤 애니메이션 */
  /* .visual .video-player video.background-video {
    animation: pan-video 60s ease-in-out infinite alternate;
  }

  @keyframes pan-video {
    from {
      object-position: center center;
    }
    to {
      object-position: right center;
    }
  } */
  .visual {
    .text {
      h2 {
        font-size: 3.2em;
        line-height: 1.2;
      }
      p {
        font-size: 1em;
      }
    }
  }
  .stragedy {
    grid-template-columns: 1fr;
  }
  .org-re {
    --padd: 4px;
    padding: 0;
  }
  .table.allborder {
    overflow-x: auto;
    table {
      th,
      td {
        word-break: keep-all;
      }
    }
  }
}

@media (orientation: portrait) {
  /* 세로가 가로보다 긴 화면(세로형) 대응 */
}

/* Custom */
/* ========== Calendar Loading ========== */
.calendar-loading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 300px;
  padding: 40px 20px;
}

.calendar-loading dotlottie-player {
  width: 300px;
  height: 200px;
}

.calendar-loading .ment {
  text-align: center;
  margin-top: 16px;
}

.calendar-loading .ment h1 {
  color: #ff7100;
}

.calendar-loading .ment p {
  opacity: 0.6;
}