전용관 수정 완료

kr/assets/css/promotion.css

@@ -47,13 +47,10 @@ html {
     transform: translateY(0);
   }
 }
-#promotion .hederWarp_n.sticky {
+#promotion .hederWarp_n {
-  position: -webkit-sticky;
+  position: absolute;
-  position: sticky;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
   z-index: 100;
   background-color: #fff;
   transition: all 0.3s ease;
@@ -111,11 +108,11 @@ html {
   width: 100%;
 }
 #promotion .parallax-section.section1 {
-  height: calc(100vh - 5.6rem);
+  height: 100vh;
 }
 @media (min-width: 768px) {
   #promotion .parallax-section.section1 {
-    height: calc(100vh - 8rem);
+    height: 100vh;
   }
 }
 #promotion .parallax-section.section1 .parallax-bg {
@@ -159,6 +156,20 @@ html {
     height: 5rem;
   }
 }
+#promotion .parallax-section.section1 .logo-disney .copy {
+  display: block;
+  top: auto;
+  bottom: -2.4rem;
+  left: auto;
+  right: 0;
+  white-space: nowrap;
+  transform: none;
+}
+@media (min-width: 768px) {
+  #promotion .parallax-section.section1 .logo-disney .copy {
+    bottom: -5.4rem;
+  }
+}
 @media (min-width: 768px) {
   #promotion .parallax-section.section1 .logo-disney {
     right: 4rem;
@@ -406,7 +417,7 @@ html {
 }
 #promotion .section1 .section-content .content-item {
   position: absolute;
-  top: 40vw;
+  top: 44vw;
   left: 0;
   width: 100%;
   padding: 0 2rem;
@@ -417,7 +428,7 @@ html {
 @media (min-width: 768px) {
   #promotion .section1 .section-content .content-item {
     position: absolute;
-    top: 11vw;
+    top: 32rem;
     padding: 0;
     font-size: 2.8rem;
   }
@@ -455,7 +466,7 @@ html {
 #promotion .parallax-bg-wrap .parallax-bg.bg5 {
   background: url("../images/kia/promotion/section6.jpg") no-repeat center top/cover;
 }
-#promotion .section2 .section-content .content-item .copy {
+#promotion .parallax-section .section-content .content-item .copy {
   position: static;
   margin-top: 20rem;
   transform: none;
@@ -1387,10 +1398,12 @@ html {
   height: 100%;
 }
 #promotion .more-features .contentSection {
+  overflow: hidden;
   padding: 7.9rem 0;
 }
 @media (min-width: 768px) {
   #promotion .more-features .contentSection {
+    overflow: visible;
     max-width: 120rem;
     margin: 0 auto;
     padding: 7rem 0 12rem;

kr/assets/css/promotion.scss

@@ -39,16 +39,24 @@ html {
 }
 
 #promotion {
-  .hederWarp_n.sticky {
+  .hederWarp_n {
-    position: sticky;
+    position: absolute;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
     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;
@@ -97,9 +105,9 @@ html {
     width: 100%;
 
     &.section1 {
-      height: calc(100vh - 5.6rem);
+      height: 100vh;
       @include tablet {
-        height: calc(100vh - 8rem);
+        height: 100vh;
       }
       .parallax-bg {
         position: relative;
@@ -135,6 +143,18 @@ html {
             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;
@@ -385,7 +405,7 @@ html {
       }
       .content-item {
         position: absolute;
-        top: 40vw;
+        top: 44vw;
         left: 0;
         width: 100%;
         padding: 0 2rem;
@@ -394,7 +414,7 @@ html {
         color: #fff;
         @include tablet {
           position: absolute;
-          top: 11vw;
+          top: 32rem;
           padding: 0;
           font-size: 2.8rem;
         }
@@ -440,7 +460,7 @@ html {
     }
   }
 
-  .section2 {
+  .parallax-section {
     .section-content {
       .content-item {
         .copy {
@@ -1407,8 +1427,10 @@ html {
   // 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;

kr/promotion/disney_promotion_new.html

@@ -386,6 +386,7 @@
           </div>
           <div class="logo-disney">
             <img src="../assets/images/kia/promotion/logo_disney_w.png" alt="Disney" />
+            <div class="copy">&copy; Disney</div>
           </div>
         </div>
         <div class="section-content">
@@ -744,7 +745,7 @@
                   <div class="copyright">
                     <span>&copy; Disney</span>
                   </div>
-                  <a href="../product/pdp_display_theme_disney_frozen.html" class="btn-viewAll">
+                  <a href="https://connectstore.kia.com/kr/product/displaythemes-disney" class="btn-viewAll">
                     <span>보러가기</span>
                     <span class="arrow-icon"></span>
                   </a>
@@ -785,7 +786,7 @@
                   <div class="copyright">
                     <span>&copy; Disney/Pixar</span>
                   </div>
-                  <a href="#" class="btn-viewAll">
+                  <a href="https://connectstore.kia.com/kr/product/displaythemes-pixar" class="btn-viewAll">
                     <span>보러가기</span>
                     <span class="arrow-icon"></span>
                   </a>
@@ -819,7 +820,7 @@
                   <div class="copyright">
                     <span>&copy; 2025 Marvel</span>
                   </div>
-                  <a href="../product/pdp_display_theme_marverl.html" class="btn-viewAll">
+                  <a href="https://connectstore.kia.com/kr/product/displaythemes-marvel" class="btn-viewAll">
                     <span>보러가기</span>
                     <span class="arrow-icon"></span>
                   </a>
@@ -1231,11 +1232,6 @@
             100,
             "easeInOutQuart"
           );
-
-          // 대안 방법: scrollTo 사용
-          // setTimeout(function () {
-          //   $tabNavigation[0].scrollTo();
-          // }, 50);
         }
       }
 
@@ -1336,6 +1332,10 @@
         var handleScroll = throttle(function () {
           var scrollTop = $(window).scrollTop();
 
+          if (scrollTop <= 50) {
+            $("#overview .parallax-bg").removeClass("reveal2");
+          }
+
           // 각 탭 콘텐츠의 위치 확인
           $(".tabContent").each(function () {
             var $this = $(this);
@@ -1391,10 +1391,8 @@
             // 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
             setTimeout(function () {
               var $targetContent = $(hashTab);
-              console.log("🚀 ~ 88888 $targetContent:", $targetContent);
               if ($targetContent.length) {
                 var scrollTop = $targetContent.offset().top;
-                console.log("🚀 ~ 99999999878787878 scrollTop:", scrollTop);
                 window.scrollTo(0, scrollTop);
               }
             }, 10);
@@ -1413,7 +1411,7 @@
         // ScrollMagic 컨트롤러 초기화
         var controller = new ScrollMagic.Controller({
           globalSceneOptions: {
-            triggerHook: 50,
+            triggerHook: 0.4, // 화면 중간에서 트리거 (0 = 상단, 0.5 = 중간, 1 = 하단)
             reverse: true,
           },
         });
@@ -1431,24 +1429,6 @@
           // { id: "#information", class: ".section9" },
         ];
 
-        // 섹션 배경 패럴랙스 효과 (section1 제외)
-        // sections.forEach(function (section, index) {
-        // if (section.id !== "#overview") {
-        //   var tween2 = gsap.to(section.class + " .parallax-bg", {
-        //     y: "-50%",
-        //     duration: 1,
-        //     ease: "none",
-        //   });
-        //   var parallaxScene = new ScrollMagic.Scene({
-        //     triggerElement: section.id,
-        //     duration: "200%",
-        //     offset: -200,
-        //   })
-        //     .setTween(tween2)
-        //     .addTo(controller);
-        // }
-        // });
-
         // 네비게이션 탭 클릭 시 즉시 스크롤 이동
         $(".tabLink").on("click", function (e) {
           e.preventDefault();
@@ -1478,21 +1458,9 @@
             .on("enter", function () {
               $(".tabLink").removeClass("active");
               $('.tabLink[href="' + section.id + '"]').addClass("active");
-
-              // 현재 섹션에 따른 네비게이션 색상 변경
-              // var $tabNav = $(".tabNavigation");
-              // if (index >= 1) {
-              //   $tabNav.addClass("is_black");
-              // } else {
-              //   $tabNav.removeClass("is_black");
-              // }
             })
             .on("leave", function () {
               // console.log("🚀 ~ NAV LEAVE", section.id);
-
-              if (section.id == "#DisneyTheme") {
-                // $(".hederWarp_n").addClass("sticky");
-              }
             })
             .on("end", function (event) {
               // console.log("🚀 ~ NAV END", section.id, "scrollTop:", $(window).scrollTop());
@@ -1502,57 +1470,22 @@
           navScenes.push(navScene);
         });
 
-        // 섹션 간 전환 시 페이드 효과
-        // sections.forEach(function (section, index) {
-        //   // var fadeTween = gsap.fromTo(section.class, { opacity: 0.8, scale: 0.95 }, { opacity: 1, scale: 1, duration: 0.6, ease: "power2.out" });
-
-        //   console.log("🚀 ~ 333 section", section);
-
-        //   var fadeScene = new ScrollMagic.Scene({
-        //     triggerElement: section.id,
-        //     duration: "80%",
-        //     offset: -50,
-        //   })
-        //     // .setTween(fadeTween)
-        //     .addTo(controller);
-        // });
-
         // 디버그 모드 - 트리거 인디케이터 표시
         controller.addScene(navScenes);
 
         var startpin = new ScrollMagic.Scene({
-          duration: 700,
+          duration: 100,
         })
           .setPin("section#overview")
-          .on("enter", function () {
-            $(".hederWarp_n").addClass("sticky");
-          })
-          .on("leave", function () {
-            $(".hederWarp_n").removeClass("sticky");
-          })
           .addTo(controller);
 
         // 모든 씬에 인디케이터 추가
         sections.forEach(function (section, index) {
           if (section.id === "#overview") {
-            var abracadabra = TweenMax.fromTo(
-              section.class + " .content-item[data-reveal='2']",
-              1,
-              { y: 30, opacity: 0 },
-              {
-                y: 0,
-                opacity: 1,
-                duration: 0.8,
-                ease: "power2.out",
-                onStart: function () {
-                  $("#overview .parallax-bg").addClass("reveal2");
-                },
-              }
-            );
             // section1의 씬들에 인디케이터 추가
             var scene1 = new ScrollMagic.Scene({
               triggerElement: section.id,
-              duration: "50%",
+              duration: "10%",
               offset: 0,
             })
               .setTween(
@@ -1579,17 +1512,31 @@
 
             var scene2 = new ScrollMagic.Scene({
               triggerElement: section.id,
-              duration: "100%",
+              duration: "0",
               offset: 0,
             })
               // .addIndicators({ name: "Section1 - Description" })
               .addTo(controller);
 
             new ScrollMagic.Scene({
-              offset: 20,
+              offset: 0,
-              duration: 180,
+              duration: 0.2,
             })
-              .setTween(abracadabra)
+              .setTween(
+                TweenMax.fromTo(
+                  section.class + " .content-item[data-reveal='2']",
+                  { y: 30, opacity: 0 },
+                  {
+                    y: 0,
+                    opacity: 1,
+                    duration: 0.2,
+                    ease: "power2.out",
+                    onStart: function () {
+                      $("#overview .parallax-bg").addClass("reveal2");
+                    },
+                  }
+                )
+              )
               .addTo(controller);
           } else {
             // 다른 섹션들의 씬에 인디케이터 추가
@@ -1599,33 +1546,20 @@
               offset: 0,
             })
               .on("enter", function () {
-                $(".hederWarp_n").removeClass("sticky");
+                var bgMap = {
+                  "#DisneyTheme": "bg1",
+                  "#DisneyPixarTheme": "bg2",
+                  "#MarvelTheme": "bg3",
+                  "#NationalGeographicTheme": "bg4",
+                  "#ComingSoon": "bg5",
+                };
 
-                switch (section.id) {
+                var targetBg = bgMap[section.id];
-                  case "#DisneyTheme":
+                if (targetBg) {
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
+                  TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, duration: 0.2, ease: "power2.out", zIndex: 0 });
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg1", { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
+                  TweenMax.to(".parallax-bg-wrap .parallax-bg." + targetBg, { opacity: 1, duration: 0.2, ease: "power2.out" });
-                    break;
+                } else {
-                  case "#DisneyPixarTheme":
+                  TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, ease: "power2.out" });
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg2", { opacity: 1 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
-                    break;
-                  case "#MarvelTheme":
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg3", { opacity: 1 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
-                    break;
-                  case "#NationalGeographicTheme":
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg4", { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
-                    break;
-                  case "#ComingSoon":
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg", { opacity: 1 }, { opacity: 0, duration: 0.3, ease: "power2.out" });
-                    TweenMax.fromTo(".parallax-bg-wrap .parallax-bg.bg5", { opacity: 0 }, { opacity: 1, duration: 0.3, ease: "power2.out" });
-                    break;
-                  default:
-                    // 해당하지 않는 경우 모든 parallax-bg의 opacity를 0으로 설정
-                    TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, ease: "power2.out" });
-                    break;
                 }
               })
               .on("leave", function () {
@@ -1644,14 +1578,8 @@
               })
 
               .setTween(gsap.fromTo(section.class + " .content-item", { y: 50, opacity: 1 }, { y: 0, opacity: 1, duration: 0.2, ease: "power2.out" }))
-              .addIndicators({ name: "Section" + section.id + (index + 1) })
+              // .addIndicators({ name: "Section" + section.id + (index + 1) })
               .addTo(controller);
-
-            // var scene = new ScrollMagic.Scene({
-            //   triggerElement: "#ComingSoon",
-            //   duration: "0",
-            //   offset: 0,
-            // });
           }
         });
       });