@charset "UTF-8";
@import "utils.scss";
/*변수파일 import*/

$KiaBlack: #05141f;

// ScrollMagic 애니메이션을 위한 기본 설정
html {
  scroll-behavior: smooth;
}

// ScrollMagic 애니메이션 초기 상태
.parallax-section .content-item {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

// section1의 data-reveal="2" 요소는 처음에 숨김
.section1 .content-item[data-reveal="2"] {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.parallax-section .parallax-bg {
  transform: translateY(0);
  transition: transform 0.1s ease-out;
}

// jQuery easing 함수를 위한 CSS 애니메이션
@keyframes easeInOutQuart {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}

#promotion {
  .hederWarp_n {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
    background-color: #fff;
    transition: all 0.3s ease;
  }
  // .hederWarp_n.sticky {
  //   position: sticky;
  //   top: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 100%;
  //   z-index: 100;
  //   background-color: #fff;
  //   transition: all 0.3s ease;
  // }
  .contentWarp {
    max-width: 100%;
    margin-top: 0;
  }
  .promotionWrap {
    width: 100%;
    position: relative;
    z-index: 1;
    @include tablet {
      max-width: 192rem;
      margin: 0 auto;
      margin-bottom: 16rem;
    }

    .copy {
      position: absolute;
      left: 50%;
      bottom: 4rem;
      transform: translate(-50%, 0);
      font-size: 1rem;
      font-weight: 400;
      color: #777;
      text-align: center;
      @include tablet {
        bottom: 10rem;
        font-size: 1.4rem;
      }
      &.web {
        display: none;
        @include tablet {
          display: block;
        }
      }
      &.mobile {
        display: block;
        @include tablet {
          display: none;
        }
      }
    }
    .util-area {
      margin-bottom: 2.4rem;
      @include tablet {
        margin-bottom: 2.8rem;
      }
    }
  }

  // Parallax 섹션 스타일
  .parallax-section {
    position: relative;
    width: 100%;

    &.section1 {
      height: 100vh;
      @include tablet {
        height: 100vh;
      }
      .parallax-bg {
        position: relative;
        height: 100%;
        background-size: cover;
      }
      .logo-kia {
        position: absolute;
        left: 2rem;
        bottom: 4rem;
        z-index: 10;
        img {
          display: block;
          height: 3.6rem;
          @include tablet {
            height: 6.4rem;
          }
        }
        @include tablet {
          left: 4rem;
          bottom: 6.6rem;
        }
      }
      .logo-disney {
        position: absolute;
        right: 2rem;
        bottom: 4rem;
        z-index: 10;
        img {
          display: block;
          height: 2.8rem;
          @include tablet {
            height: 5rem;
          }
        }
        .copy {
          display: block;
          top: auto;
          bottom: -2.4rem;
          left: auto;
          right: 0;
          white-space: nowrap;
          transform: none;
          @include tablet {
            bottom: -5.4rem;
          }
        }
        @include tablet {
          right: 4rem;
          bottom: 6.6rem;
        }
      }
    }

    .parallax-bg {
      position: static;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      opacity: 1;
      transition: opacity 0.5s ease-in-out;

      &.active {
        opacity: 1;
      }
    }

    .section-content {
      position: relative;
      top: 0;
      left: 50%;
      transform: translate(-50%, 0);
      z-index: 2;
      width: 100%;
      max-width: 120rem;
      padding: 12rem 2rem 0;
      text-align: center;
      @include tablet {
        padding: 20rem 0 0;
      }
      .theme-header {
        display: flex;
        justify-content: flex-start;
        padding-bottom: 8rem;
        text-align: left;
        @include tablet {
          padding-bottom: 12rem;
          text-align: center;
        }
        .theme-logo {
          display: block;
          height: 2.8rem;
          margin-bottom: 1.6rem;
          @include tablet {
            height: 4.8rem;
          }
        }
        h2 {
          font-size: 2.8rem;
          font-weight: 600;
          color: #fff;
          line-height: 1.5;
          @include tablet {
            font-size: 4.8rem;
          }
        }
      }
    }

    &.section1 {
      .section-content {
        position: absolute;
      }
    }

    .tabContentArea {
      .section-content {
        position: relative;
      }
    }

    .content-item {
      width: 100%;

      .theme-showcase {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        flex-direction: column;
        text-align: left;
        &.right {
          align-items: flex-end;
          text-align: right;
        }
        & + .theme-showcase {
          margin-top: 8rem;
          @include tablet {
            margin-top: 12rem;
          }
        }
        h3 {
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
          flex-direction: column;
          font-size: 2rem;
          font-weight: 600;
          color: #fff;
          margin-bottom: 2rem;
          text-align: left;
          @include tablet {
            margin-bottom: 6rem;
            font-size: 3.2rem;
          }
          em {
            font-style: normal;
          }
          &:before {
            content: "";
            display: block;
            width: 2rem;
            height: 0.2rem;
            background-color: #fff;
            margin-bottom: 1.2rem;
            @include tablet {
              width: 4rem;
              height: 0.4rem;
            }
          }
        }
        &.right {
          h3 {
            align-items: flex-end;
          }
        }

        .img-area {
          & + .img-area {
            margin-top: 1.2rem;
            @include tablet {
              margin-top: 4.8rem;
            }
          }
          img {
            width: 100%;
            @include tablet {
              max-width: 1000px;
            }
          }
        }

        .video-area {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 100rem;
          // height: 19.667rem;
          aspect-ratio: 1000 / 196.67;
          padding: 1.7999999999999998vw;
          background: url("../images/kia/promotion/video_frame.png") no-repeat center center / contain;
          @media (min-width: 1000px) {
            padding: 1.8rem;
          }
          & + .video-area {
            margin-top: 1.2rem;
            @include tablet {
              margin-top: 1.6rem;
            }
          }
        }

        video {
          width: 100%;
          max-width: 100rem;
        }
      }
    }

    &.text-black {
      .section-content {
        .theme-header {
          h2 {
            color: $KiaBlack;
          }
        }
      }
      .content-item {
        .theme-showcase {
          h3 {
            color: $KiaBlack;
            &:before {
              background-color: $KiaBlack;
            }
          }
        }
      }
    }

    .main-title {
      font-size: 3.2rem;
      font-weight: 600;
      @include tablet {
        font-size: 6.4rem;
      }
    }
    .sub-title {
      margin-top: 0.8rem;
      font-size: 1.8rem;
      font-weight: 600;
      line-height: 1.5;
      @include tablet {
        font-size: 2.8rem;
      }
    }
    .main-description {
      text-align: left;
    }
    .coming-title {
      font-size: 2rem;
      color: #fff;
      line-height: 1.5;
      @include tablet {
        font-size: 4.8rem;
      }
    }
  }

  // 섹션별 배경 이미지
  .section1 {
    .parallax-bg {
      height: 100vh;
      background: url("../images/kia/promotion/section1_m.jpg") no-repeat center bottom / cover;

      &:after {
        content: "";
        display: block;
        position: absolute;
        top: 1px;
        left: 0;
        z-index: 3;
        width: 100%;
        height: 100%;
        background: url("../images/kia/promotion/section1_m_board.png") no-repeat center bottom / cover;
        @include tablet {
          background: url("../images/kia/promotion/section1_board.webp") no-repeat center bottom / cover;
        }
      }
      @include tablet {
        height: 108rem;
        aspect-ratio: 1920 / 1080;
        background: url("../images/kia/promotion/section1.jpg") no-repeat center top / cover;
      }
      &.reveal2 {
        &:before {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 1;
          width: 100%;
          height: 100%;
          background: url("../images/kia/promotion/section1_dim.png") no-repeat center / cover;
        }
      }
    }
    .section-content {
      padding-top: 22.1rem;
      @include tablet {
        padding-top: 12.5vw;
      }
      .content-item {
        position: absolute;
        top: 55vw;
        left: 0;
        width: 100%;
        padding: 0 2rem;
        font-size: 1.8rem;
        font-weight: 400;
        color: #fff;
        @include tablet {
          position: absolute;
          top: 32rem;
          padding: 0;
          font-size: 2.8rem;
        }
      }
    }
  }

  .parallax-bg-wrap {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    .parallax-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      z-index: 1;
      transition: opacity 0.5s ease-in-out;
    }
    .parallax-bg.bg1 {
      // height: 317.4rem;
      background: url("../images/kia/promotion/section2.jpg") no-repeat center top / cover;
    }
    .parallax-bg.bg2 {
      // height: 191.4rem;
      background: url("../images/kia/promotion/section3.jpg") no-repeat center top / cover;
    }
    .parallax-bg.bg3 {
      // height: 317.7rem;
      background: url("../images/kia/promotion/section4.jpg") no-repeat center top / cover;
    }
    .parallax-bg.bg4 {
      // height: 443.6rem;
      background: url("../images/kia/promotion/section5.jpg") no-repeat center top / cover;
    }
    .parallax-bg.bg5 {
      // height: 108rem;
      background: url("../images/kia/promotion/section6.jpg") no-repeat center top / cover;
    }
    .parallax-bg.bg7 {
      // height: 108rem;
      background: url("../images/kia/promotion/section7.jpg") no-repeat center top / cover;
    }
  }

  .parallax-section {
    .section-content {
      .content-item {
        .copy {
          position: static;
          margin-top: 20rem;
          transform: none;
          text-align: center;
        }
      }
    }
  }

  .section3 {
    .section-content {
    }
  }

  .section4 {
  }

  .section5 {
  }

  .section6 {
    .section-content {
      display: flex;
      align-items: center;
      justify-content: center;
      max-width: 100%;
      height: 100vh;
      padding: 0;
    }
  }

  .timeline {
    display: flex;
    justify-content: center;
    gap: 20rem;
    flex-wrap: wrap;
    position: relative;

    &:before {
      content: "";
      display: block;
      width: 100%;
      height: 0.2rem;
      background: linear-gradient(180deg, #fff 0%, #7a7e85 100%);
      position: absolute;
      top: 12.7rem;
      left: 0;
    }

    .timeline-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;

      .timeline-icon {
        width: 7.7rem;
        height: 9.9rem;
        margin-bottom: 2.3rem;
        background: url("../images/kia/promotion/ico_coming.png") no-repeat center bottom / auto 6.9rem;
      }

      span {
        font-size: 2rem;
        color: rgba(255, 255, 255, 0.4);
        font-weight: 400;
        line-height: 1.5;
        &::before {
          content: "";
          display: block;
          width: 1.2rem;
          height: 1.2rem;
          margin: 0 auto;
          margin-bottom: 0.5rem;
          background: #7c8087;
          border-radius: 50%;
        }
      }

      &.open {
        .timeline-icon {
          background: url("../images/kia/promotion/ico_open.png") no-repeat center bottom / auto 100%;
        }
        span {
          color: #fff;
          &::before {
            background: #fff;
          }
        }
      }
    }
  }

  .promotionHeader {
    width: 100%;
    // height: 55rem;
    aspect-ratio: 360 / 550;
    background: url("../images/kia/promotion/kv_promotion_m.jpg") no-repeat center center / cover;
    @include tablet {
      height: 95rem;
      background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center / auto 100%;
    }
    .promotionHeaderInner {
      width: 100%;
      max-width: 120rem;
      margin: 0 auto;
      padding-top: 86vw;
      @include tablet {
        padding-top: 76.4rem;
      }
      .pageTitle {
        text-align: center;
        @include tablet {
          text-align: left;
        }
        h1 {
          font-size: 3rem;
          font-weight: 600;
          color: #fff;
          margin-bottom: 1.2rem;
          @include tablet {
            font-size: 4.8rem;
            margin-bottom: 2.4rem;
          }
        }
        p {
          font-size: 1.4rem;
          font-weight: 400;
          color: #fff;
          @include tablet {
            font-size: 1.6rem;
          }
        }
      }
    }
  }
  // 탭 네비게이션 스타일
  .tabNavigation {
    overflow: hidden;
    overflow-x: auto;
    position: sticky;
    top: 0;
    width: 100%;
    height: 4.8rem;
    padding: 0 2rem;
    margin-bottom: -5.4rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    z-index: 100;
    transition: top 0.3s ease-in-out;
    @include tablet {
      height: 4rem;
      padding: 1rem 2rem;
    }

    /* Webkit browsers (Chrome, Safari, etc.) */
    &::-webkit-scrollbar {
      display: none;
    }
    @include tablet {
      height: 5.4rem;
      padding: 0;
      // &:after {
      //   content: "";
      //   display: block;
      //   width: 100%;
      //   height: 2px;
      //   position: absolute;
      //   bottom: 0;
      //   left: 0;
      //   background-color: #e7e9ec;
      // }
    }
    .tabNavigationInner {
      max-width: 120rem;
      @include tablet {
        margin: 0 auto;
      }

      .tabList {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 1.4rem;
        .tabItem {
          position: relative;
          .tabLink {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            height: 4.8rem;
            text-decoration: none;
            color: #9ba2a9;
            font-size: 1.6rem;
            font-weight: 400;
            text-align: center;
            white-space: nowrap;
            transition: color 0.2s ease;
            @include tablet {
              height: 5.4rem;
              padding: 0 1.6rem;
            }
            &:after {
              content: "";
              display: block;
              width: 100%;
              height: 2px;
              position: absolute;
              bottom: 0;
              left: 0;
              z-index: 10;
              background-color: transparent;
            }
            &:hover {
              color: #fff;
            }
          }
          &:last-child {
            .tabLink {
              margin-right: 2rem;
            }
          }
          &.active {
            .tabLink {
              color: #fff;
              font-weight: 600;
              border-bottom-color: #fff;
              &:after {
                background-color: #fff;
              }
            }
          }
        }
      }
    }

    &.is_black {
      .tabNavigationInner {
        .tabList {
          .tabItem {
            .tabLink {
              color: rgba(5, 20, 31, 0.5);
            }
            &.active {
              .tabLink {
                color: $KiaBlack;
                &::after {
                  background-color: $KiaBlack;
                }
              }
            }
          }
        }
      }
    }
  }

  // 탭 콘텐츠 영역 스타일
  .tabContentArea {
    width: 100%;
    // background: #d8c0c0;
    min-height: 60rem;
    position: relative;
    .tabContentInner {
      // max-width: 120rem;
      margin: 0 auto;
      position: relative;
      .tabContent {
        display: block;
        opacity: 1;
        visibility: visible;
        transform: none;
        position: relative;
      }
    }
  }

  .contentSection {
    .contentSectionInner {
      max-width: 120rem;
      margin: 0 auto;
      @include tablet {
        padding: 0;
      }
    }

    .title-area {
      margin-bottom: 3.2rem;
      @include tablet {
        margin-bottom: 6rem;
      }
    }

    h2 {
      font-size: 3rem;
      font-weight: 600;
      color: $KiaBlack;
      margin-bottom: 2.8rem;
      line-height: 1.2;
      @include tablet {
        font-size: 4.8rem;
        margin-bottom: 4.2rem;
      }
    }
    p {
      font-size: 1.4rem;
      color: $KiaBlack;
      line-height: 1.5;
      @include tablet {
        font-size: 1.6rem;
      }
    }
    img {
      max-width: 100%;
    }
    .img-m {
      display: block;
      @include tablet {
        display: none;
      }
    }
    .img-pc {
      display: none;
      @include tablet {
        display: block;
      }
    }
  }

  .overview {
    .contentSectionInner {
      padding: 5.4rem 2rem 0;
      @include tablet {
        padding: 8rem 2rem 0;
      }
    }
    // Disney 스와이퍼 스타일
    .disneySwiperContainer {
      width: 100%;
      overflow: hidden;
      @include tablet {
        padding: 0 0 8rem;
      }

      .disneySwiper {
        width: 100%;
        padding: 0;
        @include tablet {
          padding: 2rem 0 0;
        }

        .swiper-slide {
          overflow: hidden;
          width: 25.6rem !important;
          height: 16rem;
          flex-shrink: 0;
          border-radius: 0.8rem;
          @include tablet {
            width: 58rem !important;
            height: 36rem;
            border-radius: 1.6rem;
          }
          img {
            max-width: 100%;
          }
        }

        // 네비게이션 버튼 스타일
        .swiper-button-next,
        .swiper-button-prev {
          display: none;
          color: $KiaBlack;
          background: rgba(255, 255, 255, 0.9);
          width: 5rem;
          height: 5rem;
          border-radius: 50%;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

          &:after {
            font-size: 1.8rem;
            font-weight: bold;
          }

          &:hover {
            background: #fff;
            transform: scale(1.1);
          }
        }

        // 페이지네이션 스타일
        .swiper-pagination {
          bottom: 0;

          .swiper-pagination-bullet {
            background: #ddd;
            opacity: 1;
            width: 1.2rem;
            height: 1.2rem;
            margin: 0 0.5rem;

            &.swiper-pagination-bullet-active {
              background: $KiaBlack;
              transform: scale(1.2);
            }
          }
        }
      }
    }
  }

  .available-cars {
    padding: 7rem 2rem 0;
    @include tablet {
      padding: 12rem 2rem 3.2rem;
    }
    .contentSection {
      max-width: 120rem;
      margin: 0 auto;
      .title-area {
        margin-bottom: 3.2rem;
        h3 {
          font-size: 2.4rem;
          font-weight: 600;
          color: $KiaBlack;
          margin-bottom: 1rem;
          @include tablet {
            font-size: 3.2rem;
            margin-bottom: 1.6rem;
          }
        }
      }
    }
    // Notice 박스 스타일
    .noticeBox {
      background: #fff;
      padding: 1.6rem;
      margin: 3rem 0 0;
      border: 1px solid #dedede;
      border-radius: 0.8rem;
      @include tablet {
        padding: 2rem;
        border-radius: 1rem;
      }

      h4 {
        font-size: 1.2rem;
        font-weight: 600;
        color: $KiaBlack;
        margin-bottom: 1.2rem;
        padding-bottom: 1.2rem;
        border-bottom: 1px solid #dedede;
        @include tablet {
          font-size: 1.4rem;
        }
      }

      ul {
        list-style: none;
        padding: 0;
        margin: 0;

        li {
          position: relative;
          padding-left: 1rem;
          font-size: 1.2rem;
          color: $KiaBlack;
          line-height: 1.5;
          @include tablet {
            font-size: 1.6rem;
          }

          &:before {
            content: "•";
            position: absolute;
            top: 0.35rem;
            left: 0;
            font-size: 0.8rem;
            color: $KiaBlack;
            @include tablet {
              top: 0.4rem;
            }
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  // Select Guide
  .theme-select-guide {
    position: relative;
    z-index: 1;
    background: linear-gradient(180deg, #ffffff 0%, #e8eaeb 60%);
    @include tablet {
      background: #fff;
    }
    .contentSection {
      padding: 8rem 2rem;
      @include tablet {
        max-width: 120rem;
        margin: 0 auto;
        padding: 16.8rem 2rem 20rem;
      }
      .title-area {
        margin-bottom: 4.8rem;
        @include tablet {
          margin-bottom: 5.6rem;
        }
        h2 {
          @include tablet {
            margin-bottom: 2.3rem;
          }
        }
        h3 {
          font-size: 1.8rem;
          margin-bottom: 0.8rem;
          @include tablet {
            font-size: 2.4rem;
          }
        }
      }
    }
    .guides-wrap {
      margin-top: 4rem;
      @include tablet {
        margin-top: 0;
      }

      .guides-section {
        position: relative;

        @include tablet {
          display: flex;
          width: 100%;
          padding-top: 5.8rem;
        }

        h4 {
          display: none;
          position: absolute;
          left: 0;
          top: 0;
          font-size: 3.2rem;
          font-weight: 600;
          @include tablet {
            display: block;
          }
        }

        & + .guides-section {
          margin-top: 2.4rem;
          @include tablet {
            margin-top: 8rem;
          }
        }

        .guides-header {
          display: flex;
          align-items: flex-end;
          justify-content: space-between;
          overflow: hidden;
          position: relative;
          height: 10rem;
          padding: 1.6rem;
          background: url("../images/kia/promotion/bg_disney_pattern.png") no-repeat center top / 100% auto;
          border-radius: 0.8rem 0.8rem 0 0;
          @include tablet {
            flex: 0 0 auto;
            width: 46.8rem;
            height: 27.6rem;
            padding: 2rem;
            border-radius: 0.8rem 0 0 0.8rem;
          }

          .logo {
            flex: 1;
            height: 3rem;
            // background: url("../images/kia/promotion/logo_disney_white.png") no-repeat left center / auto 100%;
            // text-indent: -9999px;
            @include tablet {
              height: 4rem;
            }
            img {
              max-height: 100%;
            }
          }

          .btn-viewAll {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            width: 9.9rem;
            height: 2.8rem;
            padding: 0.3rem 0 0;
            font-size: 1.2rem;
            font-weight: 600;
            color: #fff;
            border: 1px solid #fff;
            border-radius: 0.4rem;
            line-height: 1;

            @include tablet {
              width: 12.3rem;
              height: 4rem;
              padding: 0 2rem;
              font-size: 1.4rem;
            }

            .arrow-icon {
              width: 1.6rem;
              height: 1.6rem;
              margin-left: 0.6rem;
              -webkit-mask: url("../images/kia/promotion/ico_arrow_forward.svg") no-repeat center / contain;
              mask: url("../images/kia/promotion/ico_arrow_forward.svg") no-repeat center / contain;
              background-color: #fff;

              // Filter 사용
              // background: url("../images/kia/promotion/ico_arrow_forward.svg") no-repeat center / contain;
              // filter: brightness(0) saturate(100%);
            }
          }

          .copyright {
            position: absolute;
            top: 1.6rem;
            right: 1.6rem;
            font-size: 1rem;
            color: #d1d1d1;
          }
        }

        .guides-content {
          position: relative;
          z-index: 2;
          display: flex;
          flex-direction: column;
          gap: 1.6rem;
          padding: 1.6rem;
          background-color: #fff;
          border-radius: 0 0 0.8rem 0.8rem;

          @include tablet {
            flex-direction: row;
            padding: 2rem;
            background-color: #f2f4f6;
            border: 1px solid #dedede;
            border-radius: 0 0.8rem 0.8rem 0;
          }
          .item {
            overflow: hidden;
            display: flex;
            align-items: center;
            background-color: #fff;
            border-radius: 0.6rem;
            box-shadow: 0px 0px 8.33px 0px #0000001f;
            @include tablet {
              flex-direction: column;
              width: 22rem;
            }

            .logo {
              width: 7.2rem;
              height: 7.2rem;
              img {
                width: 100%;
                height: 100%;
                object-fit: cover;
              }
              @include tablet {
                width: 22rem;
                height: 12.6rem;
              }
            }

            strong {
              display: flex;
              align-items: center;
              padding: 1.2rem;
              font-size: 1.4rem;
              letter-spacing: -0.05em;
              @include tablet {
                width: 100%;
                font-size: 1.8rem;
                padding: 1.6rem;
                line-height: 2.6rem;
              }

              &.soon {
                display: flex;
                align-items: flex-start;
                flex-direction: column;
                &:before {
                  content: "COMMING SOON";
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  height: 2rem;
                  padding: 0.35rem 0.5rem 0;
                  margin-bottom: 0.3rem;
                  font-size: 1rem;
                  border: 1px solid $KiaBlack;
                }
              }
            }

            &.stay-tuned-item {
              box-shadow: none;
              @include tablet {
                display: flex;
                align-items: center;
                justify-content: center;
                flex-direction: column;
                width: 22rem;
                background: none;
              }
            }
          }

          .stay-tuned {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 4rem;
            padding: 1.2rem;
            font-size: 1.2rem;
            font-weight: 400;
            color: $KiaBlack;
            background-color: #f2f4f6;
            border-radius: 0.6rem;
            letter-spacing: -0.05em;
            span {
              display: block;
              width: 1.8rem;
              height: 1.2rem;
              margin-right: 0.6rem;
              background: url("../images/kia/promotion/ico_stay_tuned.svg") no-repeat center / contain;
            }
            strong {
              padding: 0.2rem 0 0;
              line-height: 1;
            }
            @include tablet {
              display: block;
              width: auto;
              height: auto;
              padding: 0;
              margin-bottom: 0;
              font-size: 1.2rem;
              color: #b2b8bd;
              span {
                position: relative;
                width: 7.2rem;
                height: 1.6rem;
                margin: 0 auto;
                margin-bottom: 0.8rem;
                background: none;
                border: 1px solid #b2b8bd;
                border-radius: 0.8rem;
                &:before {
                  content: "";
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 0.3rem;
                  width: 4.8rem;
                  height: 1rem;
                  transform: translateY(-50%);
                  background-color: #b2b8bd;
                  border-radius: 0.5rem;
                }
              }
              strong {
                padding: 0;
                font-size: 1.6rem;
                font-weight: normal;
              }
            }
          }

          .stay-tuned-same {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            width: 100%;
            padding: 1.2rem;
            font-size: 1.2rem;
            font-weight: 400;
            color: #b2b8bd;
            border-radius: 0;
            letter-spacing: -0.05em;
            span {
              position: relative;
              width: 7.2rem;
              height: 1.6rem;
              margin: 0 auto;
              margin-bottom: 0.5rem;
              background: none;
              border: 1px solid #b2b8bd;
              border-radius: 0.8rem;
              &:before {
                content: "";
                display: block;
                position: absolute;
                top: 50%;
                left: 0.3rem;
                width: 4.8rem;
                height: 1rem;
                transform: translateY(-50%);
                background-color: #b2b8bd;
                border-radius: 0.5rem;
              }
            }
            strong {
              display: block;
              padding: 0.2rem 0 0;
              line-height: 1;
            }
            @include tablet {
              font-size: 1.2rem;
              span {
                position: relative;
                width: 7.2rem;
                height: 1.6rem;
                margin: 0 auto;
                margin-bottom: 0.8rem;
                background: none;
                border: 1px solid #b2b8bd;
                border-radius: 0.8rem;
                &:before {
                  content: "";
                  display: block;
                  position: absolute;
                  top: 50%;
                  left: 0.3rem;
                  width: 4.8rem;
                  height: 1rem;
                  transform: translateY(-50%);
                  background-color: #b2b8bd;
                  border-radius: 0.5rem;
                }
              }
              strong {
                padding: 0;
                font-size: 1.6rem;
                text-align: center;
              }
            }
          }
        }

        &.disney-pixar-theme {
          .guides-header {
            background: url("../images/kia/promotion/bg_disney_pixar_pattern.png") no-repeat center top / 100% auto;

            .copyright {
              color: #666;
            }

            .btn-viewAll {
              color: $KiaBlack;
              border-color: $KiaBlack;
              .arrow-icon {
                background-color: $KiaBlack;
              }
            }
          }
        }
        &.marvel-theme {
          .guides-header {
            background: url("../images/kia/promotion/bg_marvel_pattern.png") no-repeat center top / 100% auto;
          }
        }
        &.starwars-theme {
          .guides-header {
            background: url("../images/kia/promotion/bg_starwars_pattern.png") no-repeat center top / 100% auto;
          }
        }
        &.national-geographic-theme {
          .guides-header {
            background: url("../images/kia/promotion/bg_national_pattern.png") no-repeat center top / 100% auto;
          }
        }
      }
    }
  }

  .recent-theme {
    padding-bottom: 8rem;
    .contentSection {
      max-width: 120rem;
      margin: 0 auto;
      padding: 8rem 0;
      @include tablet {
        padding: 0;
      }
      .title-area {
        margin: 0;
      }
      h2 {
        font-size: 3rem;
        font-weight: 600;
        color: $KiaBlack;
        margin-bottom: 2.4rem;
        padding: 0 2rem;
        @include tablet {
          font-size: 3.2rem;
          margin-bottom: 3.2rem;
          padding: 0;
        }
      }
      .media-area {
        position: relative;
        aspect-ratio: 16 / 9;
        .youtubeThumb {
          overflow: hidden;
          position: relative;
          border-radius: 0;
          img {
            border-radius: 0;
            @include tablet {
              border-radius: 0.6rem;
              aspect-ratio: 1200 / 675;
            }
          }
          .btn-play {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 6.4rem;
            height: 6.4rem;
            background: url("../images/kia/promotion/btn_play.png") no-repeat center / contain;
            cursor: pointer;
          }
        }
        .youtubeArea {
          display: block;
          overflow: hidden;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border-radius: 0.6rem;
          iframe {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }

  // More Features 탭 스타일
  .more-features {
    .contentSection {
      overflow: hidden;
      padding: 7.9rem 0;
      @include tablet {
        overflow: visible;
        max-width: 120rem;
        margin: 0 auto;
        padding: 7rem 0 12rem;
      }
      .title-area {
        padding: 0 2rem;
        margin-bottom: 2.4rem;
        @include tablet {
          margin-bottom: 8rem;
          padding: 0;
        }
        h2 {
          margin-bottom: 0.8rem;
          font-size: 2.4rem;
          @include tablet {
            margin-bottom: 2.4rem;
            font-size: 4.8rem;
          }
        }
      }
    }
    .features-list {
      margin-bottom: 2rem;
      @include tablet {
        margin-bottom: 8rem;
      }
      .swiper {
        overflow: visible;
        padding: 0 2rem;
        @include tablet {
          padding: 0;
        }
        .swiper-wrapper {
          // gap: 1.6rem;
        }
      }
      .swiper-slide {
        width: 14.6rem !important;
        @include tablet {
          width: 28.8rem !important;
        }
      }
      .feature-card {
        .img {
          overflow: hidden;
          width: 14.6rem;
          height: 14.6rem;
          margin-bottom: 1.2rem;
          border-radius: 0.8rem;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          @include tablet {
            width: 28.8rem;
            height: 18rem;
            margin-bottom: 2.2rem;
            border-radius: 1.2rem;
          }
        }

        .txt {
          strong {
            display: block;
            margin-bottom: 0.6rem;
            font-size: 1.6rem;
            @include tablet {
              font-size: 2rem;
            }
          }
          p {
            font-size: 1.4rem;
            @include tablet {
              font-size: 1.6rem;
            }
          }
        }
      }
    }

    .btn-area {
      padding: 0 2rem;
      @include tablet {
        padding: 0;
      }
    }
    .oneButton {
      a {
        p {
          font-size: 1.6rem;
        }
      }
      @include tablet {
        width: 25rem;
        margin: 0 auto;
      }
    }
  }

  // Information 탭 스타일
  .information {
    border-top: 1px solid #dedede;
    .contentSection {
      padding: 7.8rem 2rem;
      @include tablet {
        padding: 11.5rem 2rem 8rem;
        max-width: 120rem;
        margin: 0 auto;
      }
      .title-area {
        margin-bottom: 2.7rem;
        @include tablet {
          margin-bottom: 3.5rem;
        }
        h2 {
          font-size: 2rem;
          @include tablet {
            margin-bottom: 1.6rem;
            font-size: 3rem;
          }
        }
      }
    }

    .info-section {
      border-top: 1px solid #999;
      @include tablet {
        border-top-color: #dedede;
      }
      .item {
        padding: 2rem 0;
        border-bottom: 1px solid #dedede;
        @include tablet {
          display: flex;
          align-items: center;
        }

        h3 {
          font-size: 1.4rem;
          font-weight: 600;
          color: $KiaBlack;
          margin-bottom: 1rem;

          @include tablet {
            flex: 0 0 auto;
            position: relative;
            width: 16rem;
            margin-right: 2rem;
            margin-bottom: 0;
            font-size: 1.6rem;
            &:after {
              content: "";
              display: block;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 0;
              width: 0.1rem;
              height: 1.5rem;
              background-color: #dedede;
            }
          }
        }

        ul {
          list-style: none;
          padding: 0;
          margin: 0;

          li {
            position: relative;
            padding-left: 1.2rem;
            font-size: 1.4rem;
            color: #676767;
            line-height: 1.6;

            @include tablet {
              padding-left: 1rem;
              font-size: 1.4rem;
            }

            &:before {
              content: "•";
              position: absolute;
              top: 0.5rem;
              left: 0;
              color: #676767;
              font-weight: bold;
              font-size: 0.8rem;

              @include tablet {
                top: 0.6rem;
              }
            }

            &.bu-none {
              &:before {
                display: none;
              }
            }
          }
        }
      }
    }
  }

  .goto-area {
    display: none;
    background-color: #f3f3f3;
    @include tablet {
      display: block;
    }
    .contentSection {
      @include tablet {
        display: flex;
        align-items: center;
        max-width: 120rem;
        height: 10rem;
        padding: 0 2rem;
        margin: 0 auto;
      }

      .btn-goto {
        @include tablet {
          display: flex;
          align-items: center;
          font-size: 1.6rem;
          font-weight: 600;
          color: $KiaBlack;
          &:before {
            content: "";
            display: block;
            width: 3.2rem;
            height: 1.5rem;
            margin-right: 1.3rem;
            background: url("../images/kia/promotion/ico_goto.svg") no-repeat center / auto 100%;
          }
        }
      }
    }
  }
}

body#promotion {
  &.scroll-up {
    .tabNavigation {
      top: 10.6rem;
    }
  }
}