작업 중
BIN
kr/assets/images/kia/pdp/display_theme_disney/매출전표.pdf
Normal file
BIN
kr/assets/images/kia/promotion/bg_disney_pattern.png
Normal file
|
After Width: | Height: | Size: 186 KiB |
BIN
kr/assets/images/kia/promotion/bg_disney_pattern_m.png
Normal file
|
After Width: | Height: | Size: 159 KiB |
BIN
kr/assets/images/kia/promotion/bg_disney_pixar_pattern.png
Normal file
|
After Width: | Height: | Size: 75 KiB |
BIN
kr/assets/images/kia/promotion/bg_disney_pixar_pattern_m.png
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
kr/assets/images/kia/promotion/bg_marvel_pattern.png
Normal file
|
After Width: | Height: | Size: 223 KiB |
BIN
kr/assets/images/kia/promotion/bg_marvel_pattern_m.png
Normal file
|
After Width: | Height: | Size: 225 KiB |
BIN
kr/assets/images/kia/promotion/bg_national_pattern.png
Normal file
|
After Width: | Height: | Size: 198 KiB |
BIN
kr/assets/images/kia/promotion/bg_national_pattern_m.png
Normal file
|
After Width: | Height: | Size: 197 KiB |
BIN
kr/assets/images/kia/promotion/bg_starwars_pattern.png
Normal file
|
After Width: | Height: | Size: 57 KiB |
BIN
kr/assets/images/kia/promotion/bg_starwars_pattern_m.png
Normal file
|
After Width: | Height: | Size: 94 KiB |
BIN
kr/assets/images/kia/promotion/disney_frozen.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
kr/assets/images/kia/promotion/disney_frozen_m.png
Normal file
|
After Width: | Height: | Size: 28 KiB |
BIN
kr/assets/images/kia/promotion/disney_mickey.png
Normal file
|
After Width: | Height: | Size: 7.0 KiB |
BIN
kr/assets/images/kia/promotion/disney_mickey_m.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
kr/assets/images/kia/promotion/disney_pixar_toy.png
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
kr/assets/images/kia/promotion/disney_pixar_toy_m.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
3
kr/assets/images/kia/promotion/ico_arrow_forward.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 244 B |
6
kr/assets/images/kia/promotion/ico_stay_tuned.svg
Normal file
@@ -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>
|
||||
|
After Width: | Height: | Size: 305 B |
BIN
kr/assets/images/kia/promotion/img_available_cars_m.png
Normal file
|
After Width: | Height: | Size: 193 KiB |
BIN
kr/assets/images/kia/promotion/img_features01.jpg
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
kr/assets/images/kia/promotion/img_features02.jpg
Normal file
|
After Width: | Height: | Size: 222 KiB |
BIN
kr/assets/images/kia/promotion/img_features03.jpg
Normal file
|
After Width: | Height: | Size: 190 KiB |
BIN
kr/assets/images/kia/promotion/img_features04.jpg
Normal file
|
After Width: | Height: | Size: 184 KiB |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 113 KiB |
|
Before Width: | Height: | Size: 382 KiB After Width: | Height: | Size: 382 KiB |
|
Before Width: | Height: | Size: 382 KiB After Width: | Height: | Size: 382 KiB |
|
Before Width: | Height: | Size: 113 KiB After Width: | Height: | Size: 113 KiB |
BIN
kr/assets/images/kia/promotion/kv_promotion_m.jpg
Normal file
|
After Width: | Height: | Size: 460 KiB |
BIN
kr/assets/images/kia/promotion/logo_disney_pixar.png
Normal file
|
After Width: | Height: | Size: 5.9 KiB |
BIN
kr/assets/images/kia/promotion/logo_disney_white.png
Normal file
|
After Width: | Height: | Size: 6.4 KiB |
BIN
kr/assets/images/kia/promotion/logo_marvel.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
kr/assets/images/kia/promotion/logo_national_gaeographic.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
kr/assets/images/kia/promotion/logo_starwars.png
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
BIN
kr/assets/images/kia/promotion/marvel_logo1.png
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
kr/assets/images/kia/promotion/marvel_logo2.png
Normal file
|
After Width: | Height: | Size: 49 KiB |
BIN
kr/assets/images/kia/promotion/national_logo1.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
kr/assets/images/kia/promotion/national_logo2.png
Normal file
|
After Width: | Height: | Size: 8.7 KiB |
BIN
kr/assets/images/kia/promotion/national_logo3.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
@@ -356,8 +356,11 @@
|
||||
<div class="promotionHeader">
|
||||
<div class="promotionHeaderInner">
|
||||
<div class="pageTitle">
|
||||
<h1>Hello, Disney!</h1>
|
||||
<p>Disney and Kia brings imagination, color and emotion to your screen</p>
|
||||
<h1>Inspired Together</h1>
|
||||
<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,15 +392,17 @@
|
||||
<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>
|
||||
<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 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">
|
||||
@@ -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,123 +443,342 @@
|
||||
</div>
|
||||
|
||||
<!-- Available Cars 탭 -->
|
||||
<div id="available-cars" class="tabContent">
|
||||
<div id="availableCars" class="tabContent available-cars">
|
||||
<div class="contentSection">
|
||||
<div class="contentSectionInner">
|
||||
<h2>Available Cars</h2>
|
||||
<p>Introducing cars that are available with Disney Display Themes. Look forward to more updates!</p>
|
||||
<div class="title-area">
|
||||
<h3>Available Cars</h3>
|
||||
<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" />
|
||||
</div>
|
||||
<!-- 차량 목록 -->
|
||||
<div class="carList">
|
||||
<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>
|
||||
<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>
|
||||
<li>Purchase availability can be found on the detailed page of each product.</li>
|
||||
</ul>
|
||||
</div>
|
||||
<!-- Notice 박스 -->
|
||||
<div class="noticeBox">
|
||||
<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>
|
||||
<li>Purchase availability can be found on the detailed page of each product.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Select Guide 탭 -->
|
||||
<div id="select-guide" class="tabContent">
|
||||
<div id="themeSelectGuide" class="tabContent theme-select-guide">
|
||||
<div class="contentSection">
|
||||
<h2>선택 가이드</h2>
|
||||
<p>Disney 디스플레이 테마를 선택하고 설치하는 방법을 안내해드립니다.</p>
|
||||
<div class="guideSteps">
|
||||
<div class="stepItem">
|
||||
<div class="stepNumber">1</div>
|
||||
<div class="stepContent">
|
||||
<h3>차량 확인</h3>
|
||||
<p>귀하의 차량이 지원되는지 확인하세요.</p>
|
||||
<div class="title-area">
|
||||
<h3>Feel like you are driving into the Disney Universe</h3>
|
||||
<h2>Theme Select Guide</h2>
|
||||
<p>
|
||||
From timeless classics to heroic adventures, discover a colorful lineup of Disney Display Themes. <br />
|
||||
Explore them all, find your favorite, and make your ride feel more magical.
|
||||
</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>© 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>
|
||||
</div>
|
||||
<div class="stepItem">
|
||||
<div class="stepNumber">2</div>
|
||||
<div class="stepContent">
|
||||
<h3>테마 선택</h3>
|
||||
<p>원하는 Disney 테마를 선택하세요.</p>
|
||||
<!-- End Disney 테마 -->
|
||||
<!-- Start Pixar 테마 -->
|
||||
<div class="guides-section disney-pixar-theme">
|
||||
<h4>Disney Pixar Display Themes</h4>
|
||||
<div class="guides-header">
|
||||
<div class="logo">
|
||||
<img src="../assets/images/kia/promotion/logo_disney_pixar.png" alt="Disney" />
|
||||
</div>
|
||||
<div class="copyright">
|
||||
<span>© 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>
|
||||
<div class="stepItem">
|
||||
<div class="stepNumber">3</div>
|
||||
<div class="stepContent">
|
||||
<h3>설치 및 활성화</h3>
|
||||
<p>선택한 테마를 다운로드하고 활성화하세요.</p>
|
||||
<!-- 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>© 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>© 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>© 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>
|
||||
<p>Disney 디스플레이 테마의 다양한 기능들을 확인해보세요.</p>
|
||||
<div class="featuresList">
|
||||
<div class="featureCard">
|
||||
<h3>음성 인식</h3>
|
||||
<p>"헤이 미키"라고 말하면 미키마우스가 응답합니다.</p>
|
||||
<div class="title-area">
|
||||
<h2>More Digital Features</h2>
|
||||
<p>Check out more available digital features</p>
|
||||
</div>
|
||||
|
||||
<div class="features-list">
|
||||
<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="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_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 class="featureCard">
|
||||
<h3>날씨 연동</h3>
|
||||
<p>날씨에 따라 캐릭터의 의상이 바뀝니다.</p>
|
||||
</div>
|
||||
<div class="featureCard">
|
||||
<h3>시간대별 테마</h3>
|
||||
<p>아침, 점심, 저녁에 맞는 테마가 자동으로 변경됩니다.</p>
|
||||
</div>
|
||||
<div class="featureCard">
|
||||
<h3>특별 이벤트</h3>
|
||||
<p>디즈니 영화 개봉 시 특별 테마가 제공됩니다.</p>
|
||||
</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="infoGrid">
|
||||
<div class="infoSection">
|
||||
<h3>가격 정보</h3>
|
||||
<div class="title-area">
|
||||
<h2>Information</h2>
|
||||
</div>
|
||||
<div class="info-section">
|
||||
<!-- Target Models 섹션 -->
|
||||
<div class="item">
|
||||
<h3>Target models</h3>
|
||||
<ul>
|
||||
<li>기본 테마: 무료</li>
|
||||
<li>프리미엄 테마: 월 9,900원</li>
|
||||
<li>패밀리 패키지: 월 19,900원</li>
|
||||
<li>EV5, EV3, EV4, EV6, Tasman, Sorento, Sportage, Carnival, K5, K8</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="infoSection">
|
||||
<h3>시스템 요구사항</h3>
|
||||
|
||||
<!-- Available Period 섹션 -->
|
||||
<div class="item">
|
||||
<h3>Available Period</h3>
|
||||
<ul>
|
||||
<li>기아 커넥트 3.0 이상</li>
|
||||
<li>최소 2GB 저장공간</li>
|
||||
<li>인터넷 연결 필요</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>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="infoSection">
|
||||
<h3>지원 언어</h3>
|
||||
|
||||
<!-- Legal Notice 섹션 -->
|
||||
<div class="item">
|
||||
<h3>Legal Notice</h3>
|
||||
<ul>
|
||||
<li>한국어</li>
|
||||
<li>영어</li>
|
||||
<li>일본어</li>
|
||||
<li>중국어</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="infoSection">
|
||||
<h3>업데이트</h3>
|
||||
<ul>
|
||||
<li>월 1회 새로운 테마 추가</li>
|
||||
<li>자동 업데이트 지원</li>
|
||||
<li>사용자 피드백 반영</li>
|
||||
<li class="bu-none">© Disney © Disney/Pixar © 2025 MARVEL © Lucasfilm © National Geographic</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,
|
||||
spaceBetween: 20,
|
||||
slidesPerView: 1,
|
||||
spaceBetween: 0,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 30,
|
||||
spaceBetween: 24,
|
||||
},
|
||||
1024: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 30,
|
||||
slidesPerView: 4.5,
|
||||
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,
|
||||
|
||||