전용관 수정 중

kr/assets/css/promotion.css

@@ -127,7 +127,7 @@ html {
   position: absolute;
   left: 2rem;
   bottom: 4rem;
-  z-index: 1;
+  z-index: 10;
 }
 #promotion .parallax-section.section1 .logo-kia img {
   display: block;
@@ -148,7 +148,7 @@ html {
   position: absolute;
   right: 2rem;
   bottom: 4rem;
-  z-index: 1;
+  z-index: 10;
 }
 #promotion .parallax-section.section1 .logo-disney img {
   display: block;
@@ -362,6 +362,22 @@ html {
   height: 100vh;
   background: url("../images/kia/promotion/section1_m.jpg") no-repeat center bottom/cover;
 }
+#promotion .section1 .parallax-bg: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;
+}
+@media (min-width: 768px) {
+  #promotion .section1 .parallax-bg:after {
+    background: url("../images/kia/promotion/section1_board.png") no-repeat center bottom/cover;
+  }
+}
 @media (min-width: 768px) {
   #promotion .section1 .parallax-bg {
     height: 108rem;
@@ -369,6 +385,17 @@ html {
     background: url("../images/kia/promotion/section1.jpg") no-repeat center top/cover;
   }
 }
+#promotion .section1 .parallax-bg.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;
+}
 #promotion .section1 .section-content {
   padding-top: 22.1rem;
 }
@@ -380,6 +407,8 @@ html {
 #promotion .section1 .section-content .content-item {
   position: absolute;
   top: 40vw;
+  left: 0;
+  width: 100%;
   padding: 0 2rem;
   font-size: 1.8rem;
   font-weight: 400;
@@ -387,7 +416,8 @@ html {
 }
 @media (min-width: 768px) {
   #promotion .section1 .section-content .content-item {
-    position: static;
+    position: absolute;
+    top: 11vw;
     padding: 0;
     font-size: 2.8rem;
   }
@@ -425,6 +455,12 @@ 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 {
+  position: static;
+  margin-top: 20rem;
+  transform: none;
+  text-align: center;
+}
 #promotion .section6 .section-content {
   display: flex;
   align-items: center;
@@ -1185,6 +1221,7 @@ html {
   #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned strong {
     padding: 0;
     font-size: 1.6rem;
+    font-weight: normal;
   }
 }
 #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned-same {

kr/assets/css/promotion.scss

@@ -110,7 +110,7 @@ html {
         position: absolute;
         left: 2rem;
         bottom: 4rem;
-        z-index: 1;
+        z-index: 10;
         img {
           display: block;
           height: 3.6rem;
@@ -127,7 +127,7 @@ html {
         position: absolute;
         right: 2rem;
         bottom: 4rem;
-        z-index: 1;
+        z-index: 10;
         img {
           display: block;
           height: 2.8rem;
@@ -344,11 +344,39 @@ html {
     .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.png") 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;
@@ -358,12 +386,15 @@ html {
       .content-item {
         position: absolute;
         top: 40vw;
+        left: 0;
+        width: 100%;
         padding: 0 2rem;
         font-size: 1.8rem;
         font-weight: 400;
         color: #fff;
         @include tablet {
-          position: static;
+          position: absolute;
+          top: 11vw;
           padding: 0;
           font-size: 2.8rem;
         }
@@ -410,6 +441,16 @@ html {
   }
 
   .section2 {
+    .section-content {
+      .content-item {
+        .copy {
+          position: static;
+          margin-top: 20rem;
+          transform: none;
+          text-align: center;
+        }
+      }
+    }
   }
 
   .section3 {
@@ -1185,6 +1226,7 @@ html {
               strong {
                 padding: 0;
                 font-size: 1.6rem;
+                font-weight: normal;
               }
             }
           }

kr/promotion/disney_promotion_new.html

@@ -425,6 +425,9 @@
             <li class="tabItem">
               <a href="#moreFeatures" class="tabLink">추천 디지털 사양</a>
             </li>
+            <li class="tabItem">
+              <a href="#information" class="tabLink">정보고시</a>
+            </li>
           </ul>
         </div>
       </div>
@@ -434,20 +437,20 @@
           <div class="parallax-bg-wrap">
             <div class="parallax-bg bg5" data-rellax-speed="-1"></div>
             <div class="parallax-bg bg4" data-rellax-speed="-1">
-              <div class="copy web">
+              <!-- <div class="copy web">
                 ⓒ National Geographic Partners LLC. All rights reserved.<br />
                 NATIONAL GEOGRAPHIC and Yellow Border Design are trademarks of National Geographic Society, used under license.
-              </div>
+              </div> -->
-              <div class="copy mobile">ⓒ National Geographic Partners LLC.</div>
+              <!-- <div class="copy mobile">ⓒ National Geographic Partners LLC.</div> -->
             </div>
             <div class="parallax-bg bg3" data-rellax-speed="-1">
-              <div class="copy">ⓒ 2025 Marvel</div>
+              <!-- <div class="copy">ⓒ 2025 Marvel</div> -->
             </div>
             <div class="parallax-bg bg2" data-rellax-speed="-1">
-              <div class="copy">ⓒ Disney/Pixar</div>
+              <!-- <div class="copy">ⓒ Disney/Pixar</div> -->
             </div>
             <div class="parallax-bg bg1" data-rellax-speed="-1">
-              <div class="copy">ⓒ Disney</div>
+              <!-- <div class="copy">ⓒ Disney</div> -->
             </div>
           </div>
           <!-- Section 2: Disney Display Theme -->
@@ -503,6 +506,7 @@
                     </div>
                   </div>
                 </div>
+                <div class="copy">ⓒ Disney</div>
               </div>
             </div>
           </section>
@@ -540,6 +544,7 @@
                     </div>
                   </div>
                 </div>
+                <div class="copy">ⓒ Disney/Pixar</div>
               </div>
             </div>
           </section>
@@ -597,6 +602,7 @@
                     </div>
                   </div>
                 </div>
+                <div class="copy">ⓒ 2025 Marvel</div>
               </div>
             </div>
           </section>
@@ -673,6 +679,12 @@
                     </div> -->
                   </div>
                 </div>
+
+                <div class="copy web">
+                  ⓒ National Geographic Partners LLC. All rights reserved.<br />
+                  NATIONAL GEOGRAPHIC and Yellow Border Design are trademarks of National Geographic Society, used under license.
+                </div>
+                <div class="copy mobile">ⓒ National Geographic Partners LLC.</div>
               </div>
             </div>
           </section>
@@ -833,7 +845,7 @@
                       <img src="../assets/images/kia/promotion/marvel_logo3.png" class="img-pc" alt="Marvel’s Avengers Comics" />
                       <img src="../assets/images/kia/promotion/marvel_logo3_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
                     </span>
-                    <strong class="soon">마블 스파이더맨</strong>
+                    <strong class="soon">마블 스파이더맨 레트로</strong>
                   </div>
 
                   <!-- <div class="item stay-tuned-item">
@@ -896,10 +908,10 @@
                   <div class="copyright">
                     <span>&copy; National Geographic Partners LLC.</span>
                   </div>
-                  <a href="#" class="btn-viewAll">
+                  <!-- <a href="#" class="btn-viewAll">
                     <span>보러가기</span>
                     <span class="arrow-icon"></span>
-                  </a>
+                  </a> -->
                 </div>
 
                 <div class="guides-content">
@@ -1401,7 +1413,7 @@
         // ScrollMagic 컨트롤러 초기화
         var controller = new ScrollMagic.Controller({
           globalSceneOptions: {
-            triggerHook: 0.75,
+            triggerHook: 50,
             reverse: true,
           },
         });
@@ -1523,14 +1535,38 @@
         // 모든 씬에 인디케이터 추가
         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" });
+            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%",
               offset: 0,
             })
-              .setTween(gsap.fromTo(section.class + " .content-item[data-reveal='1']", { y: 50, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, ease: "power2.out" }))
+              .setTween(
+                TweenMax.fromTo(
+                  section.class + " .content-item[data-reveal='1']",
+                  { y: 50, opacity: 0 },
+                  {
+                    y: 0,
+                    opacity: 1,
+                    duration: 0.8,
+                    ease: "power2.out",
+                  }
+                )
+              )
               // .addIndicators({ name: "Section1 - Title" })
               .addTo(controller);
 
@@ -1559,7 +1595,7 @@
             // 다른 섹션들의 씬에 인디케이터 추가
             var scene = new ScrollMagic.Scene({
               triggerElement: section.id,
-              duration: "200%",
+              duration: "100%",
               offset: 0,
             })
               .on("enter", function () {
@@ -1608,7 +1644,7 @@
               })
 
               .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({