작업 중

kr/assets/images/kia/promotion/ico_arrow_forward.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.33268 13.333L10.666 7.99967L5.33268 2.66634" stroke="white" stroke-width="1.2" stroke-linecap="square" stroke-linejoin="round"/>
+</svg>

kr/assets/images/kia/promotion/ico_stay_tuned.svg

@@ -0,0 +1,6 @@
+<svg width="18" height="12" viewBox="0 0 18 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="18" height="12" rx="6" fill="#B2B8BD"/>
+<circle cx="4.83398" cy="6" r="1.25" fill="white"/>
+<circle cx="9" cy="6" r="1.25" fill="white"/>
+<circle cx="13.168" cy="6" r="1.25" fill="white"/>
+</svg>

kr/promotion/disney_promotion.html

@@ -356,8 +356,11 @@
       <div class="promotionHeader">
         <div class="promotionHeaderInner">
           <div class="pageTitle">
-            <h1>Hello, Disney!</h1>
+            <h1>Inspired Together</h1>
-            <p>Disney and Kia brings imagination, color and emotion to your screen</p>
+            <p>
+              Disney and Kia bring<br class="br-m" />
+              imagination, color and emotion to your screen.
+            </p>
           </div>
         </div>
       </div>
@@ -370,13 +373,13 @@
               <a href="#overview" class="tabLink">Overview</a>
             </li>
             <li class="tabItem">
-              <a href="#available-cars" class="tabLink">Available Cars</a>
+              <a href="#availableCars" class="tabLink">Available Cars</a>
             </li>
             <li class="tabItem">
-              <a href="#select-guide" class="tabLink">Select Guide</a>
+              <a href="#themeSelectGuide" class="tabLink">Select Guide</a>
             </li>
             <li class="tabItem">
-              <a href="#more-features" class="tabLink">More Features</a>
+              <a href="#moreFeatures" class="tabLink">More Features</a>
             </li>
             <li class="tabItem">
               <a href="#information" class="tabLink">Information</a>
@@ -389,16 +392,18 @@
       <div class="tabContentArea">
         <div class="tabContentInner">
           <!-- Overview 탭 -->
-          <div id="overview" class="tabContent active">
+          <div id="overview" class="tabContent overview active">
             <div class="contentSection">
               <div class="contentSectionInner">
-                <h2>Disney Display Themes</h2>
+                <div class="title-area">
+                  <h2>New Display Themes</h2>
                   <p>
                     Where innovation meets timeless storytelling.<br /><br />
                     Kia and The Walt Disney Company present stunning display themes - each a canvas of imagination and story, infused with the innovation of Kia. <br />
                     From your morning commute to weekend escapes, every drive becomes an unforgettable chapter.
                   </p>
                 </div>
+              </div>
               <!-- Disney 테마 스와이퍼 -->
               <div class="disneySwiperContainer">
                 <div class="swiper disneySwiper">
@@ -406,28 +411,28 @@
                     <div class="swiper-slide">
                       <div class="themeCard frozen">
                         <div class="themeIcon">
-                          <img src="../assets/images/kia/promotion/img_feature01.png" alt="Frozen Theme" />
+                          <img src="../assets/images/kia/promotion/img_overview01.png" alt="Frozen Theme" />
                         </div>
                       </div>
                     </div>
                     <div class="swiper-slide">
                       <div class="themeCard mickey">
                         <div class="themeIcon">
-                          <img src="../assets/images/kia/promotion/img_feature02.png" alt="Mickey Mouse Theme" />
+                          <img src="../assets/images/kia/promotion/img_overview02.png" alt="Mickey Mouse Theme" />
                         </div>
                       </div>
                     </div>
                     <div class="swiper-slide">
                       <div class="themeCard toyStory">
                         <div class="themeIcon">
-                          <img src="../assets/images/kia/promotion/img_feature03.png" alt="Toy Story Theme" />
+                          <img src="../assets/images/kia/promotion/img_overview03.png" alt="Toy Story Theme" />
                         </div>
                       </div>
                     </div>
                     <div class="swiper-slide">
                       <div class="themeCard moana">
                         <div class="themeIcon">
-                          <img src="../assets/images/kia/promotion/img_feature04.png" alt="Moana Theme" />
+                          <img src="../assets/images/kia/promotion/img_overview04.png" alt="Moana Theme" />
                         </div>
                       </div>
                     </div>
@@ -438,20 +443,22 @@
           </div>
 
           <!-- Available Cars 탭 -->
-          <div id="available-cars" class="tabContent">
+          <div id="availableCars" class="tabContent available-cars">
             <div class="contentSection">
-              <div class="contentSectionInner">
+              <div class="title-area">
-                <h2>Available Cars</h2>
+                <h3>Available Cars</h3>
-                <p>Introducing cars that are available with Disney Display Themes. Look forward to more updates!</p>
+                <p>Introducing cars that are available with Disney Display Themes for purchase. Look forward to more updates in the future!</p>
+              </div>
 
               <!-- 차량 목록 -->
               <div class="carList">
-                  <img src="../assets/images/kia/promotion/img_available_cars.png" alt="Available Cars" />
+                <img src="../assets/images/kia/promotion/img_available_cars_m.png" class="img-m" alt="Available Cars" />
+                <img src="../assets/images/kia/promotion/img_available_cars.png" class="img-pc" alt="Available Cars" />
               </div>
 
               <!-- Notice 박스 -->
               <div class="noticeBox">
-                  <h3>Notice</h3>
+                <h4>Notice</h4>
                 <ul>
                   <li>It can be purchased only for users of the Kia Connect service.</li>
                   <li>It is only available for vehicles with a 12.3-inch cluster among the ccNC infotainment platforms.</li>
@@ -460,101 +467,318 @@
               </div>
             </div>
           </div>
-          </div>
 
           <!-- Select Guide 탭 -->
-          <div id="select-guide" class="tabContent">
+          <div id="themeSelectGuide" class="tabContent theme-select-guide">
             <div class="contentSection">
-              <h2>선택 가이드</h2>
+              <div class="title-area">
-              <p>Disney 디스플레이 테마를 선택하고 설치하는 방법을 안내해드립니다.</p>
+                <h3>Feel like you are driving into the Disney Universe</h3>
-              <div class="guideSteps">
+                <h2>Theme Select Guide</h2>
-                <div class="stepItem">
+                <p>
-                  <div class="stepNumber">1</div>
+                  From timeless classics to heroic adventures, discover a colorful lineup of Disney Display Themes. <br />
-                  <div class="stepContent">
+                  Explore them all, find your favorite, and make your ride feel more magical.
-                    <h3>차량 확인</h3>
+                </p>
-                    <p>귀하의 차량이 지원되는지 확인하세요.</p>
+              </div>
+              <div class="guides-wrap">
+                <!-- Start Disney 테마 -->
+                <div class="guides-section disney-theme">
+                  <h4>Disney Display Themes</h4>
+                  <div class="guides-header">
+                    <div class="logo">
+                      <img src="../assets/images/kia/promotion/logo_disney_white.png" alt="Disney" />
+                    </div>
+                    <div class="copyright">
+                      <span>&copy; Disney</span>
+                    </div>
+                    <a href="#" class="btn-viewAll">
+                      <span>View all</span>
+                      <span class="arrow-icon"></span>
+                    </a>
+                  </div>
+
+                  <div class="guides-content">
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/disney_mickey.png" class="img-pc" alt="Disney Mickey & Friends" />
+                        <img src="../assets/images/kia/promotion/disney_mickey_m.png" class="img-m" alt="Disney Mickey & Friends" />
+                      </span>
+                      <strong>Disney Mickey & Friends</strong>
+                    </div>
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/disney_frozen.png" class="img-pc" alt="Disney Frozen" />
+                        <img src="../assets/images/kia/promotion/disney_frozen_m.png" class="img-m" alt="Disney Frozen" />
+                      </span>
+                      <strong>Disney Frozen</strong>
+                    </div>
+
+                    <div class="item stay-tuned-item">
+                      <div class="stay-tuned">
+                        <span></span>
+                        <strong>STAY TUNED</strong>
                       </div>
                     </div>
-                <div class="stepItem">
-                  <div class="stepNumber">2</div>
-                  <div class="stepContent">
-                    <h3>테마 선택</h3>
-                    <p>원하는 Disney 테마를 선택하세요.</p>
                   </div>
                 </div>
-                <div class="stepItem">
+                <!-- End Disney 테마 -->
-                  <div class="stepNumber">3</div>
+                <!-- Start Pixar 테마 -->
-                  <div class="stepContent">
+                <div class="guides-section disney-pixar-theme">
-                    <h3>설치 및 활성화</h3>
+                  <h4>Disney Pixar Display Themes</h4>
-                    <p>선택한 테마를 다운로드하고 활성화하세요.</p>
+                  <div class="guides-header">
+                    <div class="logo">
+                      <img src="../assets/images/kia/promotion/logo_disney_pixar.png" alt="Disney" />
+                    </div>
+                    <div class="copyright">
+                      <span>&copy; Disney/Pixar</span>
+                    </div>
+                    <a href="#" class="btn-viewAll">
+                      <span>View all</span>
+                      <span class="arrow-icon"></span>
+                    </a>
+                  </div>
+
+                  <div class="guides-content">
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/disney_pixar_toy.png" class="img-pc" alt="Pixar Toy Story" />
+                        <img src="../assets/images/kia/promotion/disney_pixar_toy_m.png" class="img-m" alt="Pixar Toy Story" />
+                      </span>
+                      <strong>Pixar Toy Story</strong>
+                    </div>
+
+                    <div class="item stay-tuned-item">
+                      <div class="stay-tuned">
+                        <span></span>
+                        <strong>STAY TUNED</strong>
                       </div>
                     </div>
                   </div>
                 </div>
+                <!-- End Pixar 테마 -->
+                <!-- Start Marvel 테마 -->
+                <div class="guides-section marvel-theme">
+                  <h4>Marvel Display Themes</h4>
+                  <div class="guides-header">
+                    <div class="logo">
+                      <img src="../assets/images/kia/promotion/logo_marvel.png" alt="marvel" />
+                    </div>
+                    <div class="copyright">
+                      <span>&copy; 2025 Marvel</span>
+                    </div>
+                    <a href="#" class="btn-viewAll">
+                      <span>View all</span>
+                      <span class="arrow-icon"></span>
+                    </a>
+                  </div>
+
+                  <div class="guides-content">
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/marvel_logo1.png" class="img-pc" alt="Marvel’s Avengers Assemble" />
+                        <img src="../assets/images/kia/promotion/marvel_logo1_m.png" class="img-m" alt="Marvel’s Avengers Assemble" />
+                      </span>
+                      <strong>Marvel’s Avengers Assemble</strong>
+                    </div>
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/marvel_logo2.png" class="img-pc" alt="Marvel’s Avengers Comics" />
+                        <img src="../assets/images/kia/promotion/marvel_logo2_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
+                      </span>
+                      <strong>Marvel’s Avengers Comics</strong>
+                    </div>
+
+                    <div class="item stay-tuned-item">
+                      <div class="stay-tuned">
+                        <span></span>
+                        <strong>STAY TUNED</strong>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- End Marvel 테마 -->
+                <!-- Start Star Wars 테마 -->
+                <div class="guides-section starwars-theme">
+                  <h4>Star Wars Display Themes</h4>
+                  <div class="guides-header">
+                    <div class="logo">
+                      <img src="../assets/images/kia/promotion/logo_starwars.png" alt="Star Wars" />
+                    </div>
+                    <div class="copyright">
+                      <span>&copy; Lucasfilm</span>
+                    </div>
+                    <!-- <a href="#" class="btn-viewAll">
+                      <span>View all</span>
+                      <span class="arrow-icon"></span>
+                    </a> -->
+                  </div>
+
+                  <div class="guides-content">
+                    <!-- <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/disney_mickey.png" alt="Disney" />
+                      </span>
+                      <strong>Disney Mickey & Friends</strong>
+                    </div>
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/disney_frozen.png" alt="Disney" />
+                      </span>
+                      <strong>Disney Frozen</strong>
+                    </div> -->
+
+                    <div class="item stay-tuned-item">
+                      <div class="stay-tuned">
+                        <span></span>
+                        <strong>STAY TUNED</strong>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <!-- End Marvel 테마 -->
+                <!-- Start National Geographic 테마 -->
+                <div class="guides-section national-geographic-theme">
+                  <h4>National Geographic Display Themes</h4>
+                  <div class="guides-header">
+                    <div class="logo">
+                      <img src="../assets/images/kia/promotion/logo_national_gaeographic.png" alt="National Geographic" />
+                    </div>
+                    <div class="copyright">
+                      <span>&copy; National Geographic</span>
+                    </div>
+                    <a href="#" class="btn-viewAll">
+                      <span>View all</span>
+                      <span class="arrow-icon"></span>
+                    </a>
+                  </div>
+
+                  <div class="guides-content">
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/national_logo1.png" alt="National Geographic Baby Animals" />
+                      </span>
+                      <strong>National Geographic Baby Animals</strong>
+                    </div>
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/national_logo2.png" alt="National Geographic Space Wonder" />
+                      </span>
+                      <strong>National Geographic Space Wonder</strong>
+                    </div>
+                    <div class="item">
+                      <span class="logo">
+                        <img src="../assets/images/kia/promotion/national_logo3.png" alt="National Geographic Landscapes" />
+                      </span>
+                      <strong>National Geographic Landscapes</strong>
+                    </div>
+
+                    <!-- <div class="item stay-tuned-item">
+                      <div class="stay-tuned">
+                        <span></span>
+                        <strong>STAY TUNED</strong>
+                      </div>
+                    </div> -->
+                  </div>
+                </div>
+                <!-- End National Geographic 테마 -->
+              </div>
+            </div>
           </div>
 
           <!-- More Features 탭 -->
-          <div id="more-features" class="tabContent">
+          <div id="moreFeatures" class="tabContent more-features">
             <div class="contentSection">
-              <h2>추가 기능</h2>
+              <div class="title-area">
-              <p>Disney 디스플레이 테마의 다양한 기능들을 확인해보세요.</p>
+                <h2>More Digital Features</h2>
-              <div class="featuresList">
+                <p>Check out more available digital features</p>
-                <div class="featureCard">
-                  <h3>음성 인식</h3>
-                  <p>"헤이 미키"라고 말하면 미키마우스가 응답합니다.</p>
               </div>
-                <div class="featureCard">
+
-                  <h3>날씨 연동</h3>
+              <div class="features-list">
-                  <p>날씨에 따라 캐릭터의 의상이 바뀝니다.</p>
+                <div class="swiper features-list-swiper">
+                  <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                      <div class="feature-card">
+                        <div class="img">
+                          <img src="../assets/images/kia/promotion/img_features01.jpg" alt="Features" />
                         </div>
-                <div class="featureCard">
+                        <div class="txt">
-                  <h3>시간대별 테마</h3>
+                          <strong>Lighting Patterns</strong>
-                  <p>아침, 점심, 저녁에 맞는 테마가 자동으로 변경됩니다.</p>
+                          <p>₩ 180,000</p>
                         </div>
-                <div class="featureCard">
+                      </div>
-                  <h3>특별 이벤트</h3>
+                    </div>
-                  <p>디즈니 영화 개봉 시 특별 테마가 제공됩니다.</p>
+                    <div class="swiper-slide">
+                      <div class="feature-card">
+                        <div class="img">
+                          <img src="../assets/images/kia/promotion/img_features02.jpg" alt="Features" />
+                        </div>
+                        <div class="txt">
+                          <strong>Lighting Patterns</strong>
+                          <p>₩ 180,000</p>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="feature-card">
+                        <div class="img">
+                          <img src="../assets/images/kia/promotion/img_features03.jpg" alt="Features" />
+                        </div>
+                        <div class="txt">
+                          <strong>Lighting Patterns</strong>
+                          <p>₩ 180,000</p>
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="feature-card">
+                        <div class="img">
+                          <img src="../assets/images/kia/promotion/img_features04.jpg" alt="Features" />
+                        </div>
+                        <div class="txt">
+                          <strong>Lighting Patterns</strong>
+                          <p>₩ 180,000</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="btn-area">
+                <div class="oneButton">
+                  <a href="/kr/info/registration-guide"><p>Go to the list</p></a>
                 </div>
               </div>
             </div>
           </div>
 
           <!-- Information 탭 -->
-          <div id="information" class="tabContent">
+          <div id="information" class="tabContent information">
             <div class="contentSection">
-              <h2>상세 정보</h2>
+              <div class="title-area">
-              <div class="infoGrid">
+                <h2>Information</h2>
-                <div class="infoSection">
+              </div>
-                  <h3>가격 정보</h3>
+              <div class="info-section">
+                <!-- Target Models 섹션 -->
+                <div class="item">
+                  <h3>Target models</h3>
                   <ul>
-                    <li>기본 테마: 무료</li>
+                    <li>EV5, EV3, EV4, EV6, Tasman, Sorento, Sportage, Carnival, K5, K8</li>
-                    <li>프리미엄 테마: 월 9,900원</li>
-                    <li>패밀리 패키지: 월 19,900원</li>
                   </ul>
                 </div>
-                <div class="infoSection">
+
-                  <h3>시스템 요구사항</h3>
+                <!-- Available Period 섹션 -->
+                <div class="item">
+                  <h3>Available Period</h3>
                   <ul>
-                    <li>기아 커넥트 3.0 이상</li>
+                    <li>If you choose to use it for a lifetime, you can use it without a period limit. If you choose a monthly/annual subscription, you can use it for the specified period.</li>
-                    <li>최소 2GB 저장공간</li>
-                    <li>인터넷 연결 필요</li>
                   </ul>
                 </div>
-                <div class="infoSection">
+
-                  <h3>지원 언어</h3>
+                <!-- Legal Notice 섹션 -->
+                <div class="item">
+                  <h3>Legal Notice</h3>
                   <ul>
-                    <li>한국어</li>
+                    <li class="bu-none">© Disney © Disney/Pixar © 2025 MARVEL © Lucasfilm © National Geographic</li>
-                    <li>영어</li>
-                    <li>일본어</li>
-                    <li>중국어</li>
-                  </ul>
-                </div>
-                <div class="infoSection">
-                  <h3>업데이트</h3>
-                  <ul>
-                    <li>월 1회 새로운 테마 추가</li>
-                    <li>자동 업데이트 지원</li>
-                    <li>사용자 피드백 반영</li>
                   </ul>
                 </div>
               </div>
@@ -778,7 +1002,7 @@
       $(document).ready(function () {
         // Disney 스와이퍼 초기화
         var disneySwiper = new Swiper(".disneySwiper", {
-          slidesPerView: 2,
+          slidesPerView: 4.2,
           spaceBetween: 24,
           loop: true,
           autoplay: {
@@ -795,37 +1019,115 @@
           // },
           breakpoints: {
             640: {
-              slidesPerView: 2,
+              slidesPerView: 1,
-              spaceBetween: 20,
+              spaceBetween: 0,
             },
             768: {
               slidesPerView: 3,
-              spaceBetween: 30,
+              spaceBetween: 24,
             },
             1024: {
-              slidesPerView: 4,
+              slidesPerView: 4.5,
-              spaceBetween: 30,
+              spaceBetween: 24,
             },
           },
         });
+
+        var disneyFeaturesSwiper = new Swiper(".features-list-swiper", {
+          slidesPerView: 2.15,
+          spaceBetween: 16,
+          loop: true,
+          autoplay: {
+            delay: 1500,
+            disableOnInteraction: false,
+          },
+          // pagination: {
+          //   el: ".swiper-pagination",
+          //   clickable: true,
+          // },
+          // navigation: {
+          //   nextEl: ".swiper-button-next",
+          //   prevEl: ".swiper-button-prev",
+          // },
+          breakpoints: {
+            768: {
+              slidesPerView: 3,
+            },
+            1024: {
+              slidesPerView: 4,
+              spaceBetween: 16,
+            },
+          },
+        });
+
         // 탭 클릭 이벤트
         $(".tabLink").on("click", function (e) {
           e.preventDefault();
 
           var targetTab = $(this).attr("href");
+          console.log("🚀 ~ 111 targetTab:", targetTab);
           var $targetContent = $(targetTab);
+          var $clickedTab = $(this).parent();
 
           // 모든 탭에서 active 클래스 제거
           $(".tabItem").removeClass("active");
           $(".tabContent").removeClass("active");
 
           // 클릭한 탭에 active 클래스 추가
-          $(this).parent().addClass("active");
+          $clickedTab.addClass("active");
           $targetContent.addClass("active");
 
+          // 탭 가로스크롤 중앙 정렬
+          var $tabNavigation = $(".tabNavigation");
+          var $tabList = $(".tabList");
+          var tabNavigationWidth = $tabNavigation.width();
+
+          // 탭 리스트의 실제 너비 계산 (여러 방법 시도)
+          var tabListWidth = $tabList[0].scrollWidth; // 스크롤 가능한 전체 너비
+          var tabListOffsetWidth = $tabList[0].offsetWidth; // 현재 보이는 너비
+          var tabListOuterWidth = $tabList.outerWidth(); // jQuery outerWidth
+
+          console.log("탭 네비게이션 너비:", tabNavigationWidth);
+          console.log("탭 리스트 scrollWidth:", tabListWidth);
+          console.log("탭 리스트 offsetWidth:", tabListOffsetWidth);
+          console.log("탭 리스트 outerWidth:", tabListOuterWidth);
+
+          // 탭 리스트가 네비게이션보다 넓을 때만 스크롤 조정
+          if (tabListWidth > tabNavigationWidth) {
+            // 탭의 절대 위치 계산 (부모 컨테이너 기준)
+            var tabOffsetLeft = $clickedTab.offset().left;
+            var tabNavigationOffsetLeft = $tabNavigation.offset().left;
+            var relativeTabOffset = tabOffsetLeft - tabNavigationOffsetLeft;
+            var tabWidth = $clickedTab.outerWidth();
+            var tabCenter = relativeTabOffset + tabWidth / 2;
+            var navigationCenter = tabNavigationWidth / 2;
+            var scrollLeft = tabCenter - navigationCenter;
+
+            // 스크롤 범위 제한
+            var maxScrollLeft = tabListWidth - tabNavigationWidth;
+            scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft));
+
+            // 부드러운 스크롤 애니메이션
+            $tabNavigation.animate(
+              {
+                scrollLeft: scrollLeft,
+              },
+              300,
+              "easeInOutQuart"
+            );
+
+            // 대안 방법: scrollTo 사용
+            setTimeout(function () {
+              $tabNavigation[0].scrollTo({
+                left: scrollLeft,
+                behavior: "smooth",
+              });
+            }, 50);
+          }
+
           // 해당 탭 콘텐츠로 스크롤 이동
           if ($targetContent.length) {
-            var scrollTop = $targetContent.offset().top - 100; // 헤더 높이만큼 여백
+            var scrollTop = $targetContent.offset().top; // 헤더 높이만큼 여백
             $("html, body").animate(
               {
                 scrollTop: scrollTop,