디즈니 전용관 스크롤매직 적용 본

kr/assets/css/promotion.css

@@ -9,6 +9,27 @@
 /*반응형, 브라우저 크기가 1204px 이상일때*/
 /*넓이, 높이 자동 계산함수*/
 /*변수파일 import*/
+html {
+  scroll-behavior: smooth;
+}
+
+.parallax-section .content-item {
+  opacity: 0;
+  transform: translateY(50px);
+  transition: opacity 0.6s ease, transform 0.6s ease;
+}
+
+.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;
+}
+
 @-webkit-keyframes easeInOutQuart {
   0% {
     transform: translateY(0);
@@ -17,6 +38,7 @@
     transform: translateY(0);
   }
 }
+
 @keyframes easeInOutQuart {
   0% {
     transform: translateY(0);
@@ -25,15 +47,447 @@
     transform: translateY(0);
   }
 }
+#promotion .hederWarp_n.sticky {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: #fff;
+  transition: all 0.3s ease;
+}
 #promotion .contentWarp {
   max-width: 100%;
   margin-top: 0;
 }
+#promotion .promotionWrap {
+  width: 100%;
+  position: relative;
+  z-index: 1;
+}
 @media (min-width: 768px) {
-  #promotion .contentWarp {
+  #promotion .promotionWrap {
+    max-width: 192rem;
+    margin: 0 auto;
     margin-bottom: 16rem;
   }
 }
+#promotion .promotionWrap .copy {
+  position: absolute;
+  left: 50%;
+  bottom: 4rem;
+  transform: translate(-50%, 0);
+  font-size: 1rem;
+  font-weight: 400;
+  color: #777;
+  text-align: center;
+}
+@media (min-width: 768px) {
+  #promotion .promotionWrap .copy {
+    bottom: 10rem;
+    font-size: 1.4rem;
+  }
+}
+#promotion .promotionWrap .copy.web {
+  display: none;
+}
+@media (min-width: 768px) {
+  #promotion .promotionWrap .copy.web {
+    display: block;
+  }
+}
+#promotion .promotionWrap .copy.mobile {
+  display: block;
+}
+@media (min-width: 768px) {
+  #promotion .promotionWrap .copy.mobile {
+    display: none;
+  }
+}
+#promotion .parallax-section {
+  position: relative;
+  width: 100%;
+}
+#promotion .parallax-section.section1 {
+  height: calc(100vh - 5.6rem);
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section.section1 {
+    height: calc(100vh - 8rem);
+  }
+}
+#promotion .parallax-section.section1 .parallax-bg {
+  position: relative;
+  height: 100%;
+  background-size: cover;
+}
+#promotion .parallax-section.section1 .logo-kia {
+  position: absolute;
+  left: 2rem;
+  bottom: 4rem;
+  z-index: 1;
+}
+#promotion .parallax-section.section1 .logo-kia img {
+  display: block;
+  height: 3.6rem;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section.section1 .logo-kia img {
+    height: 6.4rem;
+  }
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section.section1 .logo-kia {
+    left: 4rem;
+    bottom: 6.6rem;
+  }
+}
+#promotion .parallax-section.section1 .logo-disney {
+  position: absolute;
+  right: 2rem;
+  bottom: 4rem;
+  z-index: 1;
+}
+#promotion .parallax-section.section1 .logo-disney img {
+  display: block;
+  height: 2.8rem;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section.section1 .logo-disney img {
+    height: 5rem;
+  }
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section.section1 .logo-disney {
+    right: 4rem;
+    bottom: 6.6rem;
+  }
+}
+#promotion .parallax-section .parallax-bg {
+  position: static;
+  top: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1;
+  opacity: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+#promotion .parallax-section .parallax-bg.active {
+  opacity: 1;
+}
+#promotion .parallax-section .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;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .section-content {
+    padding: 20rem 0 0;
+  }
+}
+#promotion .parallax-section .section-content .theme-header {
+  display: flex;
+  justify-content: flex-start;
+  padding-bottom: 8rem;
+  text-align: left;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .section-content .theme-header {
+    padding-bottom: 12rem;
+    text-align: center;
+  }
+}
+#promotion .parallax-section .section-content .theme-header .theme-logo {
+  display: block;
+  height: 2.8rem;
+  margin-bottom: 1.6rem;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .section-content .theme-header .theme-logo {
+    height: 4.8rem;
+  }
+}
+#promotion .parallax-section .section-content .theme-header h2 {
+  font-size: 2.8rem;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.5;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .section-content .theme-header h2 {
+    font-size: 4.8rem;
+  }
+}
+#promotion .parallax-section.section1 .section-content {
+  position: absolute;
+}
+#promotion .parallax-section .tabContentArea .section-content {
+  position: relative;
+}
+#promotion .parallax-section .content-item {
+  width: 100%;
+}
+#promotion .parallax-section .content-item .theme-showcase {
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-direction: column;
+  text-align: left;
+}
+#promotion .parallax-section .content-item .theme-showcase.right {
+  align-items: flex-end;
+  text-align: right;
+}
+#promotion .parallax-section .content-item .theme-showcase + .theme-showcase {
+  margin-top: 8rem;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .content-item .theme-showcase + .theme-showcase {
+    margin-top: 12rem;
+  }
+}
+#promotion .parallax-section .content-item .theme-showcase 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;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .content-item .theme-showcase h3 {
+    margin-bottom: 6rem;
+    font-size: 3.2rem;
+  }
+}
+#promotion .parallax-section .content-item .theme-showcase h3 em {
+  font-style: normal;
+}
+#promotion .parallax-section .content-item .theme-showcase h3:before {
+  content: "";
+  display: block;
+  width: 2rem;
+  height: 0.2rem;
+  background-color: #fff;
+  margin-bottom: 1.2rem;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .content-item .theme-showcase h3:before {
+    width: 4rem;
+    height: 0.4rem;
+  }
+}
+#promotion .parallax-section .content-item .theme-showcase.right h3 {
+  align-items: flex-end;
+}
+#promotion .parallax-section .content-item .theme-showcase .img-area + .img-area {
+  margin-top: 1.2rem;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .content-item .theme-showcase .img-area + .img-area {
+    margin-top: 4.8rem;
+  }
+}
+#promotion .parallax-section .content-item .theme-showcase .img-area img {
+  width: 100%;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .content-item .theme-showcase .img-area img {
+    max-width: 1000px;
+  }
+}
+#promotion .parallax-section .content-item .theme-showcase video {
+  width: 100%;
+  max-width: 100%;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .content-item .theme-showcase video {
+    max-width: 1000px;
+  }
+}
+#promotion .parallax-section.text-black .section-content .theme-header h2 {
+  color: #05141f;
+}
+#promotion .parallax-section.text-black .content-item .theme-showcase h3 {
+  color: #05141f;
+}
+#promotion .parallax-section.text-black .content-item .theme-showcase h3:before {
+  background-color: #05141f;
+}
+#promotion .parallax-section .main-title {
+  font-size: 3.2rem;
+  font-weight: 600;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .main-title {
+    font-size: 6.4rem;
+  }
+}
+#promotion .parallax-section .sub-title {
+  margin-top: 0.8rem;
+  font-size: 1.8rem;
+  font-weight: 600;
+  line-height: 1.5;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .sub-title {
+    font-size: 2.8rem;
+  }
+}
+#promotion .parallax-section .main-description {
+  text-align: left;
+}
+#promotion .parallax-section .coming-title {
+  font-size: 2rem;
+  color: #fff;
+  line-height: 1.5;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section .coming-title {
+    font-size: 4.8rem;
+  }
+}
+#promotion .section1 .parallax-bg {
+  height: 100vh;
+  background: url("../images/kia/promotion/section1_m.jpg") no-repeat center bottom/cover;
+}
+@media (min-width: 768px) {
+  #promotion .section1 .parallax-bg {
+    height: 108rem;
+    aspect-ratio: 1920/1080;
+    background: url("../images/kia/promotion/section1.jpg") no-repeat center top/cover;
+  }
+}
+#promotion .section1 .section-content {
+  padding-top: 22.1rem;
+}
+@media (min-width: 768px) {
+  #promotion .section1 .section-content {
+    padding-top: 12.5vw;
+  }
+}
+#promotion .section1 .section-content .content-item {
+  position: absolute;
+  top: 40vw;
+  padding: 0 2rem;
+  font-size: 1.8rem;
+  font-weight: 400;
+  color: #fff;
+}
+@media (min-width: 768px) {
+  #promotion .section1 .section-content .content-item {
+    position: static;
+    padding: 0;
+    font-size: 2.8rem;
+  }
+}
+#promotion .parallax-bg-wrap {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+#promotion .parallax-bg-wrap .parallax-bg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  z-index: 1;
+  transition: opacity 0.5s ease-in-out;
+}
+#promotion .parallax-bg-wrap .parallax-bg.bg1 {
+  background: url("../images/kia/promotion/section2.jpg") no-repeat center top/cover;
+}
+#promotion .parallax-bg-wrap .parallax-bg.bg2 {
+  background: url("../images/kia/promotion/section3.jpg") no-repeat center top/cover;
+}
+#promotion .parallax-bg-wrap .parallax-bg.bg3 {
+  background: url("../images/kia/promotion/section4.jpg") no-repeat center top/cover;
+}
+#promotion .parallax-bg-wrap .parallax-bg.bg4 {
+  background: url("../images/kia/promotion/section5.jpg") no-repeat center top/cover;
+}
+#promotion .parallax-bg-wrap .parallax-bg.bg5 {
+  background: url("../images/kia/promotion/section6.jpg") no-repeat center top/cover;
+}
+#promotion .section6 .section-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: 100%;
+  height: 100vh;
+  padding: 0;
+}
+#promotion .timeline {
+  display: flex;
+  justify-content: center;
+  gap: 20rem;
+  flex-wrap: wrap;
+  position: relative;
+}
+#promotion .timeline:before {
+  content: "";
+  display: block;
+  width: 100%;
+  height: 0.2rem;
+  background: linear-gradient(180deg, #fff 0%, #7a7e85 100%);
+  position: absolute;
+  top: 12.7rem;
+  left: 0;
+}
+#promotion .timeline .timeline-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  position: relative;
+}
+#promotion .timeline .timeline-item .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;
+}
+#promotion .timeline .timeline-item span {
+  font-size: 2rem;
+  color: rgba(255, 255, 255, 0.4);
+  font-weight: 400;
+  line-height: 1.5;
+}
+#promotion .timeline .timeline-item span::before {
+  content: "";
+  display: block;
+  width: 1.2rem;
+  height: 1.2rem;
+  margin: 0 auto;
+  margin-bottom: 0.5rem;
+  background: #7c8087;
+  border-radius: 50%;
+}
+#promotion .timeline .timeline-item.open .timeline-icon {
+  background: url("../images/kia/promotion/ico_open.png") no-repeat center bottom/auto 100%;
+}
+#promotion .timeline .timeline-item.open span {
+  color: #fff;
+}
+#promotion .timeline .timeline-item.open span::before {
+  background: #fff;
+}
 #promotion .promotionHeader {
   width: 100%;
   aspect-ratio: 360/550;
@@ -93,12 +547,21 @@
   position: sticky;
   top: 0;
   width: 100%;
-  height: 4rem;
-  padding: 1rem 2rem;
-  background-color: #fff;
+  height: 4.8rem;
+  padding: 0 2rem;
+  margin-bottom: -5.4rem;
+  background: rgba(255, 255, 255, 0.1);
+  -webkit-backdrop-filter: blur(8px);
+          backdrop-filter: blur(8px);
   z-index: 100;
   /* Webkit browsers (Chrome, Safari, etc.) */
 }
+@media (min-width: 768px) {
+  #promotion .tabNavigation {
+    height: 4rem;
+    padding: 1rem 2rem;
+  }
+}
 #promotion .tabNavigation::-webkit-scrollbar {
   display: none;
 }
@@ -107,16 +570,6 @@
     height: 5.4rem;
     padding: 0;
   }
-  #promotion .tabNavigation:after {
-    content: "";
-    display: block;
-    width: 100%;
-    height: 2px;
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    background-color: #e7e9ec;
-  }
 }
 #promotion .tabNavigation .tabNavigationInner {
   max-width: 120rem;
@@ -141,13 +594,14 @@
   align-items: center;
   justify-content: center;
   position: relative;
-  height: 3rem;
+  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;
 }
 @media (min-width: 768px) {
   #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink {
@@ -167,22 +621,30 @@
   background-color: transparent;
 }
 #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink:hover {
-  color: #05141f;
+  color: #fff;
 }
 #promotion .tabNavigation .tabNavigationInner .tabList .tabItem:last-child .tabLink {
   margin-right: 2rem;
 }
 #promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink {
-  color: #05141f;
+  color: #fff;
   font-weight: 600;
-  border-bottom-color: #05141f;
+  border-bottom-color: #fff;
 }
 #promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink:after {
+  background-color: #fff;
+}
+#promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem .tabLink {
+  color: rgba(5, 20, 31, 0.5);
+}
+#promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem.active .tabLink {
+  color: #05141f;
+}
+#promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem.active .tabLink::after {
   background-color: #05141f;
 }
 #promotion .tabContentArea {
   width: 100%;
-  background: #fff;
   min-height: 60rem;
   position: relative;
 }
@@ -420,6 +882,8 @@
   margin-bottom: 0;
 }
 #promotion .theme-select-guide {
+  position: relative;
+  z-index: 1;
   background: linear-gradient(180deg, #ffffff 0%, #e8eaeb 60%);
 }
 @media (min-width: 768px) {
@@ -434,15 +898,15 @@
   #promotion .theme-select-guide .contentSection {
     max-width: 120rem;
     margin: 0 auto;
-    padding: 16.8rem 2rem;
+    padding: 16.8rem 2rem 20rem;
   }
 }
 #promotion .theme-select-guide .contentSection .title-area {
-  margin-bottom: 6.4rem;
+  margin-bottom: 4.8rem;
 }
 @media (min-width: 768px) {
   #promotion .theme-select-guide .contentSection .title-area {
-    margin-bottom: 5.2rem;
+    margin-bottom: 5.6rem;
   }
 }
 @media (min-width: 768px) {
@@ -632,6 +1096,22 @@
     line-height: 2.6rem;
   }
 }
+#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item strong.soon {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+}
+#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item strong.soon: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 #05141f;
+}
 #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item.stay-tuned-item {
   box-shadow: none;
 }
@@ -801,6 +1281,74 @@
 #promotion .theme-select-guide .guides-wrap .guides-section.national-geographic-theme .guides-header {
   background: url("../images/kia/promotion/bg_national_pattern.png") no-repeat center top/100% auto;
 }
+#promotion .recent-theme .contentSection {
+  max-width: 120rem;
+  margin: 0 auto;
+  padding: 8rem 0;
+}
+@media (min-width: 768px) {
+  #promotion .recent-theme .contentSection {
+    padding: 0;
+  }
+}
+#promotion .recent-theme .contentSection .title-area {
+  margin: 0;
+}
+#promotion .recent-theme .contentSection h2 {
+  font-size: 3rem;
+  font-weight: 600;
+  color: #05141f;
+  margin-bottom: 2.4rem;
+  padding: 0 2rem;
+}
+@media (min-width: 768px) {
+  #promotion .recent-theme .contentSection h2 {
+    font-size: 3.2rem;
+    margin-bottom: 3.2rem;
+    padding: 0;
+  }
+}
+#promotion .recent-theme .contentSection .media-area {
+  position: relative;
+  aspect-ratio: 16/9;
+}
+#promotion .recent-theme .contentSection .media-area .youtubeThumb {
+  overflow: hidden;
+  position: relative;
+  border-radius: 0;
+}
+#promotion .recent-theme .contentSection .media-area .youtubeThumb img {
+  border-radius: 0;
+}
+@media (min-width: 768px) {
+  #promotion .recent-theme .contentSection .media-area .youtubeThumb img {
+    border-radius: 0.6rem;
+  }
+}
+#promotion .recent-theme .contentSection .media-area .youtubeThumb .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;
+}
+#promotion .recent-theme .contentSection .media-area .youtubeArea {
+  display: none;
+  overflow: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.6rem;
+}
+#promotion .recent-theme .contentSection .media-area .youtubeArea iframe {
+  width: 100%;
+  height: 100%;
+}
 #promotion .more-features .contentSection {
   padding: 7.9rem 0;
 }
@@ -808,7 +1356,7 @@
   #promotion .more-features .contentSection {
     max-width: 120rem;
     margin: 0 auto;
-    padding: 7rem 2rem 12rem;
+    padding: 7rem 0 12rem;
   }
 }
 #promotion .more-features .contentSection .title-area {

kr/assets/css/promotion.scss

@@ -4,10 +4,29 @@
 
 $KiaBlack: #05141f;
 
-// 부드러운 스크롤 애니메이션을 위한 기본 설정
-// html {
-//   scroll-behavior: smooth;
-// }
+// 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 {
@@ -20,13 +39,464 @@ $KiaBlack: #05141f;
 }
 
 #promotion {
+  .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;
+        }
+      }
+    }
   }
+
+  // Parallax 섹션 스타일
+  .parallax-section {
+    position: relative;
+    width: 100%;
+
+    &.section1 {
+      height: calc(100vh - 5.6rem);
+      @include tablet {
+        height: calc(100vh - 8rem);
+      }
+      .parallax-bg {
+        position: relative;
+        height: 100%;
+        background-size: cover;
+      }
+      .logo-kia {
+        position: absolute;
+        left: 2rem;
+        bottom: 4rem;
+        z-index: 1;
+        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: 1;
+        img {
+          display: block;
+          height: 2.8rem;
+          @include tablet {
+            height: 5rem;
+          }
+        }
+        @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 {
+          width: 100%;
+          max-width: 100%;
+          @include tablet {
+            max-width: 1000px;
+          }
+        }
+      }
+    }
+
+    &.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;
+      @include tablet {
+        height: 108rem;
+        aspect-ratio: 1920 / 1080;
+        background: url("../images/kia/promotion/section1.jpg") no-repeat center top / cover;
+      }
+    }
+    .section-content {
+      padding-top: 22.1rem;
+      @include tablet {
+        padding-top: 12.5vw;
+      }
+      .content-item {
+        position: absolute;
+        top: 40vw;
+        padding: 0 2rem;
+        font-size: 1.8rem;
+        font-weight: 400;
+        color: #fff;
+        @include tablet {
+          position: static;
+          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;
+    }
+  }
+
+  .section2 {
+  }
+
+  .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;
@@ -78,10 +548,16 @@ $KiaBlack: #05141f;
     position: sticky;
     top: 0;
     width: 100%;
-    height: 4rem;
-    padding: 1rem 2rem;
-    background-color: #fff;
+    height: 4.8rem;
+    padding: 0 2rem;
+    margin-bottom: -5.4rem;
+    background: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(8px);
     z-index: 100;
+    @include tablet {
+      height: 4rem;
+      padding: 1rem 2rem;
+    }
 
     /* Webkit browsers (Chrome, Safari, etc.) */
     &::-webkit-scrollbar {
@@ -90,16 +566,16 @@ $KiaBlack: #05141f;
     @include tablet {
       height: 5.4rem;
       padding: 0;
-      &:after {
-        content: "";
-        display: block;
-        width: 100%;
-        height: 2px;
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        background-color: #e7e9ec;
-      }
+      // &:after {
+      //   content: "";
+      //   display: block;
+      //   width: 100%;
+      //   height: 2px;
+      //   position: absolute;
+      //   bottom: 0;
+      //   left: 0;
+      //   background-color: #e7e9ec;
+      // }
     }
     .tabNavigationInner {
       max-width: 120rem;
@@ -120,13 +596,14 @@ $KiaBlack: #05141f;
             align-items: center;
             justify-content: center;
             position: relative;
-            height: 3rem;
+            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;
@@ -143,7 +620,7 @@ $KiaBlack: #05141f;
               background-color: transparent;
             }
             &:hover {
-              color: $KiaBlack;
+              color: #fff;
             }
           }
           &:last-child {
@@ -153,11 +630,31 @@ $KiaBlack: #05141f;
           }
           &.active {
             .tabLink {
-              color: $KiaBlack;
+              color: #fff;
               font-weight: 600;
-              border-bottom-color: $KiaBlack;
+              border-bottom-color: #fff;
               &:after {
-                background-color: $KiaBlack;
+                background-color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &.is_black {
+      .tabNavigationInner {
+        .tabList {
+          .tabItem {
+            .tabLink {
+              color: rgba(5, 20, 31, 0.5);
+            }
+            &.active {
+              .tabLink {
+                color: $KiaBlack;
+                &::after {
+                  background-color: $KiaBlack;
+                }
               }
             }
           }
@@ -169,7 +666,7 @@ $KiaBlack: #05141f;
   // 탭 콘텐츠 영역 스타일
   .tabContentArea {
     width: 100%;
-    background: #fff;
+    // background: #d8c0c0;
     min-height: 60rem;
     position: relative;
     .tabContentInner {
@@ -402,6 +899,8 @@ $KiaBlack: #05141f;
 
   // Select Guide
   .theme-select-guide {
+    position: relative;
+    z-index: 1;
     background: linear-gradient(180deg, #ffffff 0%, #e8eaeb 60%);
     @include tablet {
       background: #fff;
@@ -411,12 +910,12 @@ $KiaBlack: #05141f;
       @include tablet {
         max-width: 120rem;
         margin: 0 auto;
-        padding: 16.8rem 2rem;
+        padding: 16.8rem 2rem 20rem;
       }
       .title-area {
-        margin-bottom: 6.4rem;
+        margin-bottom: 4.8rem;
         @include tablet {
-          margin-bottom: 5.2rem;
+          margin-bottom: 5.6rem;
         }
         h2 {
           @include tablet {
@@ -597,6 +1096,23 @@ $KiaBlack: #05141f;
                 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 {
@@ -781,6 +1297,71 @@ $KiaBlack: #05141f;
     }
   }
 
+  .recent-theme {
+    .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;
+            }
+          }
+          .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: none;
+          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 {
@@ -788,7 +1369,7 @@ $KiaBlack: #05141f;
       @include tablet {
         max-width: 120rem;
         margin: 0 auto;
-        padding: 7rem 2rem 12rem;
+        padding: 7rem 0 12rem;
       }
       .title-area {
         padding: 0 2rem;
@@ -818,6 +1399,9 @@ $KiaBlack: #05141f;
         @include tablet {
           padding: 0;
         }
+        .swiper-wrapper {
+          // gap: 1.6rem;
+        }
       }
       .swiper-slide {
         width: 14.6rem !important;