디즈니 작업 중

This commit is contained in:
2025-07-06 21:13:47 +09:00
parent e929eecf54
commit f8cbf12b77
21 changed files with 7770 additions and 6613 deletions

View File

@@ -284,7 +284,10 @@
<div class="optionWarp">
<div class="producTitle">
<!-- <span>차량SW</span> -->
<h1>Marvels Avengers Display Themes</h1>
<h1>
Marvels Avengers Display Themes
<button type="button" class="btn-wish"></button>
</h1>
<p>Marvel's Avengers Special Themes that add style to your drive</p>
</div>
<div class="producOption scroll">
@@ -361,7 +364,7 @@
<!--에디터 영역-->
<div class="editorWarp pdpDetail">
<div class="editorInner">
<div class="comp_wide comp_1x_w_v_o_b displayThemeDesney">
<div class="comp_wide displayThemeDesney">
<div class="image_area visualBg">
<img src="../assets/images/kia/pdp/display_theme_disney/Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지" />
<img src="../assets/images/kia/pdp/display_theme_disney/Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지" />
@@ -410,82 +413,282 @@
</div>
</div>
<div class="comp_content displayThemeDesney">
<div class="comp_wide">
<div class="comp_top">
<h3>Discover Epic Designs</h3>
<p class="info">Pick a theme and preview the exciting changes to your screen!</p>
</div>
<div class="comp_body">
<div class="tab-wrap">
<div class="tab-menu">
<div class="comp_wide discover-epic-design displayThemeDesney">
<div class="comp_top">
<h3>Discover Epic Designs</h3>
<p class="info">Pick a theme and preview the exciting changes to your screen!</p>
</div>
<div class="comp_body">
<div class="tab-wrap">
<div class="tab-menu cont-select">
<div class="inner">
<button class="btn-select" onclick="pdpDisplayTabMobile()">Marvels Avengers Comics</button>
<ul>
<li class="active">
<button>Marvels Avengers Comics</button>
<button type="button" onclick="pdpDisplayTab(this, '.box1')">Marvels Avengers Comics</button>
</li>
<li>
<button>Marvels Avengers Assemble</button>
<button type="button" onclick="pdpDisplayTab(this, '.box2')">Marvels Avengers Assemble</button>
</li>
</ul>
</div>
<div class="tab-box box1">
<div class="item welcome-goodbye">
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/welcome.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/goodbye.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="tab-box box1">
<div class="discover">
<div class="inner">
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/welcome.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/goodbye.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="text_area">
<h4>Welcome & Goodbye Video</h4>
<p>Marvel-themed motion graphics are displayed upon vehicle start-up and shutdown.</p>
</div>
</div>
<div class="text_area">
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">Welcome & Goodbye Video</h4>
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">Marvel-themed motion graphics are displayed upon vehicle start-up and shutdown.</p>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont3.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>The selected Marvel theme appears on the cluster with themed graphics and gauges.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont4.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>Marvel artwork highlights your current location during navigation.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont5.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>Artwork of Marvel characters and logos appear across various menu screens.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont6.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>Choose from Marvel-themed profile images—set a unique one for each driver.</p>
</div>
</div>
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont3.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>The selected Marvel theme appears on the cluster with themed graphics and gauges.</p>
<div class="three-reasons">
<div class="tit-area">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h3>Three Reasons</h3>
<p>Why you can't miss out</p>
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont4.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>Marvel artwork highlights your current location during navigation.</p>
<div class="reasons">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<ol>
<li>
<p>
<strong>A Wonderful In-Car Experience</strong>
Once you transform your display with Marvel themes, <br />
you might find it hard to return to the standard setup.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons1.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons1_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>Themes for Every Taste</strong>
Whether you're a fan of Spider-Man, Deadpool, or Wolverine, <br />
a variety of Marvel themes will soon be available to match your favorite character.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons2.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons2_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>Your One-of-a-kind Journey Starts Here</strong>
Marvel in-car experience offers something you wont see anywhere else - made uniquely for Kia owners.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons3.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons3_m.png" class="mobile" alt="" />
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont5.png" class="themeImg" alt="디스플레이 테마1" />
<div class="coming-next">
<div class="inner">
<div class="tit-area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h3>
Whats <br />Coming Up <br />
<span class="next"
>Next<i class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</i></span
>?
</h3>
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>Artwork of Marvel characters and logos appear across various menu screens.</p>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_next.png" class="web" alt="Whats Coming Up Next?" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_next_m.png" class="mobile" alt="Whats Coming Up Next?" />
</div>
</div>
</div>
</div>
<div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont6.png" class="themeImg" alt="디스플레이 테마1" />
<div class="tab-box box2">
<div class="discover">
<div class="inner">
<div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/lakers_welcome.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/lakers_goodbye.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="text_area">
<h4>Welcome & Goodbye Video</h4>
<p>Marvel-themed motion graphics are displayed upon vehicle start-up and shutdown.</p>
</div>
</div>
<div class="text_area">
<h4>Profile</h4>
<p>Choose from Marvel-themed profile images—set a unique one for each driver.</p>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont3.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>The selected Marvel theme appears on the cluster with themed graphics and gauges.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont4.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>Marvel artwork highlights your current location during navigation.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont5.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>Artwork of Marvel characters and logos appear across various menu screens.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_cont6.png" class="themeImg" alt="디스플레이 테마1" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>Choose from Marvel-themed profile images—set a unique one for each driver.</p>
</div>
</div>
</div>
</div>
<div class="three-reasons" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="tit-area">
<div class="inner">
<h3>Three Reasons</h3>
<p>Why you can't miss out</p>
</div>
</div>
<div class="reasons">
<div class="inner">
<ol>
<li>
<p>
<strong>A Wonderful In-Car Experience</strong>
Once you transform your display with Marvel themes, <br />
you might find it hard to return to the standard setup.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons1.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons1_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>Themes for Every Taste</strong>
Whether you're a fan of Spider-Man, Deadpool, or Wolverine, <br />
a variety of Marvel themes will soon be available to match your favorite character.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons2.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons2_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>Your One-of-a-kind Journey Starts Here</strong>
Marvel in-car experience offers something you wont see anywhere else - made uniquely for Kia owners.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons3.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons3_m.png" class="mobile" alt="" />
</div>
</li>
</ol>
</div>
</div>
</div>
<div class="coming-next">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="tit-area">
<h3>
Whats <br />Coming Up <br />
<span class="next"
>Next<i class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</i></span
>?
</h3>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_next.png" class="web" alt="Whats Coming Up Next?" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_next_m.png" class="mobile" alt="Whats Coming Up Next?" />
</div>
</div>
</div>
@@ -494,89 +697,7 @@
</div>
</div>
<div class="comp_wide displayThemeDesney">
<div class="three-reasons">
<div class="inner">
<div class="tit-area">
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">Three Reasons</h3>
<p>Why you can't miss out</p>
</div>
<ol>
<li>
<em>1</em>
<div class="text_area">
<strong>A Wonderful In-Car Experience</strong>
<p>Once you transform your display with Marvel themes, you might find it hard to return to the standard setup.</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons1.png" alt="A Wonderful In-Car Experience" />
</div>
</li>
<li>
<em>2</em>
<div class="text_area">
<strong>Themes for Every Taste</strong>
<p>Whether you're a fan of Spider-Man, Deadpool, or Wolverine, a variety of Marvel themes will soon be available to match your favorite character.</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons2.png" alt="Themes for Every Taste" />
</div>
</li>
<li>
<em>3</em>
<div class="text_area">
<strong>Your One-of-a-kind Journey Starts Here</strong>
<p>Marvel in-car experience offers something you wont see anywhere else - made uniquely for Kia owners.</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons3.png" alt="Your One-of-a-kind Journey Starts Here" />
</div>
</li>
</ol>
</div>
<div class="reasons">
<div class="inner">
<ol>
<li>
<p>
<strong>A Wonderful In-Car Experience</strong>
Once you transform your display with Marvel themes, you might find it hard to return to the standard setup.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons1.png" alt="" />
</div>
</li>
<li>
<p>
<strong>Themes for Every Taste</strong>
Whether you're a fan of Spider-Man, Deadpool, or Wolverine, a variety of Marvel themes will soon be available to match your favorite character.
</p>
</li>
<li>
<p>
<strong>Your One-of-a-kind Journey Starts Here</strong>
Marvel in-car experience offers something you wont see anywhere else - made uniquely for Kia owners.
</p>
</li>
</ol>
</div>
</div>
</div>
</div>
<div class="comp_wide">
<div class="coming-next">
<div class="tit-area">
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">Whats Coming Up Next?</h3>
<p>Stay tuned for the next Marvel Display Themes!</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_next.png" alt="Whats Coming Up Next?" />
</div>
</div>
</div>
<div class="comp_wide">
<div class="comp_wide comp_2x_b_h_s_e2 displayThemeDesney">
<div class="comp_body">
<div class="item">
<div class="image_area">