gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

겨울왕국 완료료

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-10-19 23:22:51 +09:00
parent 1638fcf693
commit 2e1121c197
29 changed files with 818 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

844
kr/product/pdp_display_theme_disney_frozen.html
View File

@@ -85,12 +85,34 @@
</div>
<!-- 모바일 전용 차량 선택 UI입니다. -->
<div class="mobileCarlist">
<div class="mobilecarItem">
<a href="javascript:void(0)" class="mobilecarItem">
<div class="item">
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</strong>
<span>KMTKEXXBPMU000081</span>
<button class="btn-select" onclick="open_layer_popup('carListPopup')">차량 선택하기 ></button>
<span>MV</span>
<span>161어 1660</span>
</div>
<div class="arrow"></div>
</a>
<div class="carlistItem">
<ul>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>KMTKEXXBPMU000081</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
</a>
</li>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
</a>
</li>
</ul>
</div>
</div>
<!-- PC 모바일 공통 메뉴 영역입니다. -->
@@ -157,10 +179,10 @@
</div>
<div class="func">
<!-- PC 전용 차량 선택 UI입니다. -->
<!-- 2025.08.27 추가 -->
<div class="carlist">
<a href="javascript:void(0)" class="carItem">
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
<span>MV</span>
<span>161어 1660</span>
</a>
<div class="carlistItem">
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
@@ -168,166 +190,32 @@
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
</svg>
<ul>
<!-- [D] 선택 시 selected 클래스 추가 -->
<li class="selected">
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</span>
</button>
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>KMTKEXXBPMU000081</span>
</a>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
</a>
</li>
<li>
<button class="car-name">
<span>스포티지 개조</span>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>스포티지 개조</span>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>스포티지 개조</span>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>스포티지 개조</span>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>스포티지 개조</span>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>스포티지 개조</span>
</button>
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
</a>
</li>
</ul>
</div>
</div>
<!--// 2025.08.27 추가 -->
<!-- PC 전용 로그인 버튼입니다. -->
<!-- <div class="userLogin">
<div class="userLogin">
<a href="#">로그인/가입</a>
</div> -->
</div>
<!-- PC 전용 USER 관련 링크 영역입니다. -->
<div class="user">
@@ -356,7 +244,7 @@
<div class="infoStickyInner">
<div class="stickyLeft">
<p>
<strong>Disney Display Themes</strong>
<strong>Disney Display Theme</strong>
<!-- <span>30개 NBA 팀의 개성있는 디스플레이 테마로 분위기 업업~!!!</span> -->
</p>
</div>
@@ -381,7 +269,7 @@
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명" /></div>
<div class="swiper-slide withVideo">
<p class="productSmallVideo">
<video loop muted playsinline preload="auto" poster="/kr/assets/images/kia/product-img/producy-temp3.png">
<video loop muted playsinline preload="auto" poster="../assets/images/kia/product-img/producy-temp3.png">
<source src="../assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4" />
</video>
<img src="../assets/images/kia/pdp/display_theme_mickeyNBA_Theme_AVNT.jpg" alt="이미지 상품명" />
@@ -398,7 +286,8 @@
<div class="producTitle">
<!-- <span>차량SW</span> -->
<h1>
Disney<br />Display Themes
Disney<br />
Display Theme
<button type="button" class="btn-wish"></button>
</h1>
<p>Special Disney themes add style to your drive</p>
@@ -409,7 +298,7 @@
<div class="checkBtn withVideo">
<input type="checkbox" name="check" id="check1" value="micky" checked />
<label for="check1">
<p><img src="../assets/images/kia/pdp/display_theme_mickey/option1.png" alt="marvel1" /></p>
<p><img src="../assets/images/kia/pdp/display_theme_mickey/option1.png" alt="micky" /></p>
<div class="optionText">
<p>
<strong>Disney Mickey & Friends</strong>
@@ -417,14 +306,14 @@
</div>
</label>
</div>
<div class="optionList">
<div class="checkBtn withVideo">
<input type="checkbox" name="check" id="check2" value="frozen" />
<div class="checkBtn disabledBtn">
<input type="checkbox" name="check" id="check2" value="frozen" disabled />
<label for="check2">
<p><img src="../assets/images/kia/pdp/display_theme_mickey/option2.png" alt="frozen" /></p>
<div class="optionText">
<p>
<strong>Disney Frozen</strong>
<i class="badge">구매완료</i>
</p>
</div>
</label>
@@ -469,60 +358,94 @@
<!--에디터 영역-->
<div class="editorWarp pdpDetail">
<div class="editorInner">
<div class="comp_wide displayThemeDesney mickey">
<div class="image_area visualBg">
<img src="../assets/images/kia/pdp/display_theme_mickey/Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지" />
<img src="../assets/images/kia/pdp/display_theme_mickey/Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지" />
</div>
<div class="comp_body layer_up">
<div class="text_area">
<h3 class="color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 테마와 함께하는 <br class="br-m" />일상 속 특별한 여행</h3>
<div class="info color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 미키와 친구들의 유쾌한 감성이 기아의 디스플레이 테마 속에 담겼습니다.<br />차 안에서 펼쳐지는 또 하나의 즐거운 이야기를 지금 시작하세요.</div>
<div class="comp_wide displayThemeDesney theme-frozen">
<div class="image_area visualBg swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지" />
<img src="../assets/images/kia/pdp/display_theme_mickey/Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지" />
</div>
<div class="comp_body layer_up">
<div class="text_area">
<h3 class="color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 테마와 함께하는 <br class="br-m" />일상 속 특별한 여행</h3>
<div class="info color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 미키와 친구들의 유쾌한 감성이 기아의 디스플레이 테마 속에 담겼습니다.<br />차 안에서 펼쳐지는 또 하나의 즐거운 이야기를 지금 시작하세요.</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-frozen">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지" />
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지" />
</div>
<div class="comp_body layer_up">
<div class="text_area">
<h3 class="color-fff" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">Bring Disney artwork <br class="br-m" />to your Kia!</h3>
<div class="info color-fff" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
Kia and Disney are coming together to launch new display themes for Disney fans.<br />
Transform your in-car experience with delightful artwork of Disney Display Themes.
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-navigation">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="comp_bottom available-theme">
<h3>
<span class="text-center">디즈니 미키와 친구들 테마를 만나보세요!</span>
<span class="text-center">Available Disney Themes</span>
<em class="text-em">
Pick a theme and preview<br class="br-m" />
the fun changes to your screen!
</em>
</h3>
<div class="list">
<ul>
<li>
<a href="#">
<img src="../assets/images/kia/pdp/display_theme_mickey/thumb_theme1.png" alt="MARVEL" />
<a href="#none" onclick="btnTabMenu(0)">
<img src="../assets/images/kia/pdp/display_theme_mickey/thumb_theme1.png" alt="Disney Mickey & Friends" />
<span class="txt">
<strong>디즈니 미키와 친구들</strong>
<span class="hashs"><span>#스티커스타일</span> <span>#유쾌함한스푼</span></span>
<strong>Disney<br />Mickey & Friends</strong>
<span class="hashs"><span>#StickerStyle</span> <span>#Playful</span></span>
</span>
</a>
</li>
<li class="more">
<a href="#">
<strong>
디즈니 테마는 계속됩니다.
<em class="speech-bubble">앞으로 출시될 테마들을 <br class="br-m" />기대해주세요!</em>
</strong>
<img src="../assets/images/kia/pdp/display_theme_mickey/thumb_theme_more.png" alt="MARVEL" />
<span class="hashs">※ 출시 예정 테마는 변경될 수 있습니다.</span>
<li>
<a href="#none" onclick="btnTabMenu(1)">
<img src="../assets/images/kia/pdp/display_theme_mickey/thumb_theme2.png" alt="Disney Frozen" />
<span class="txt">
<strong>Disney Frozen</strong>
<span class="hashs"><span>#Magnificent</span> <span>#Queen</span> <span>#WinterVibes</span></span>
</span>
</a>
</li>
<li class="stay-tuned-item">
<div class="stay-tuned">
<span></span>
<strong>STAY TUNED</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="comp_wide discover-epic-design displayThemeDesney mickey">
<div class="comp_top">
<h3>디즈니 테마, <br class="br-m" />직접 확인해 보세요!</h3>
<p class="info">옵션을 선택하면, 차량에 적용된 테마 디자인을 <br class="br-m" />바로 확인할 수 있어요.</p>
</div>
<div class="comp_body">
<div class="tab-wrap">
<div class="tab-menu blue cont-select">
<div class="inner">
<div class="btn-select">디즈니 미키와 친구들</div>
<div class="btn-select">Disney Mickey & Friends</div>
<ul>
<li class="active">
<span class="tab-btn">디즈니 미키와 친구들</span>
<span class="tab-btn">Disney Mickey & Friends</span>
</li>
<li>
<span class="tab-btn">Disney Frozen</span>
@@ -532,247 +455,272 @@
</div>
<div class="tab-box box1">
<div class="discover">
<div class="index-area">
<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 class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="text_area">
<h4>Welcome & Goodbye Video</h4>
<p>디즈니 미키와 친구들 컨셉의 모션 그래픽 Video가 차량 Sleep 모드 동작 이후 차량을 켤 때, 끌 때 적용 됩니다.</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_mickey/img_Cluster.png" class="themeImg box1-cluster" alt="Cluster" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>
선택한 디즈니 테마가 클러스터 화면에 적용됩니다. 디즈니만의 사랑스럽고 유쾌한 그래픽과 게이지 디자인을 확인해 보세요.
<span class="add">※ 차종에 따라 클러스터 화면 디자인이 상기 이미지와 다를 수 있습니다.</span>
</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_mickey/img_Map.png" class="themeImg box1-navigation" alt="Navigation" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>목적지까지의 길 안내 기능을 이용할 때마다 디즈니의 특별한 아트워크가 현재 위치를 표시해줍니다.</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_mickey/img_Home.png" class="themeImg box1-homecard" alt="Homecard" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>각 메뉴 화면을 넘길 때마다 디즈니 캐릭터와 로고, 다양한 일러스트가 나타납니다.</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_mickey/img_Profile.png" class="themeImg box1-profile" alt="Profile" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>디즈니 캐릭터와 로고를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다. 운전자마다 다른 이미지를 설정해 보세요.</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_index.png" class="web" alt="index" />
<img src="../assets/images/kia/pdp/display_theme_mickey/img_index_m.png" class="mobile" alt="index" />
</div>
</div>
</div>
<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">
<p>디즈니 테마를 놓쳐서는 안될</p>
<h3>세 가지 이유</h3>
<div class="discover-area">
<div class="comp_top">
<h3>Discover <br class="br-m" />Adorable Designs</h3>
</div>
<div class="discover">
<div class="inner">
<div class="item welcome-goodbye aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<div class="image_area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="text_area">
<h4>Welcome &amp; Goodbye Video</h4>
<p>디즈니 미키와 친구들 컨셉의 모션 그래픽 Video가 차량 Sleep 모드 동작 이후 차량을 켤 때, 끌 때 적용 됩니다.</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-duration="400">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Cluster.png" class="themeImg box1-cluster" alt="Cluster" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>선택한 디즈니 테마가 클러스터 화면에 적용됩니다. 디즈니만의 사랑스럽고 유쾌한 그래픽과 게이지 디자인을 확인해 보세요.&nbsp;</p>
<p><span class="add">※ 차종에 따라 클러스터 화면 디자인이 상기 이미지와 다를 수 있습니다.</span></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-duration="400">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Map.png" class="themeImg box1-navigation" alt="Navigation" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>목적지까지의 길 안내 기능을 이용할 때마다 디즈니의 특별한 아트워크가 현재 위치를 표시해줍니다.</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-duration="400">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Home.png" class="themeImg box1-homecard" alt="Homecard" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>각 메뉴 화면을 넘길 때마다 디즈니 캐릭터와 로고, 다양한 일러스트가 나타납니다.</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-duration="400">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Profile.png" class="themeImg box1-profile" alt="Profile" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>디즈니 캐릭터와 로고를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다. 운전자마다 다른 이미지를 설정해 보세요.</p>
</div>
</div>
</div>
</div>
<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>익숙한 공간에 스며드는 특별함</strong>
디즈니 미키와 친구들 테마와 함께, <br class="br-m" />매 순간 드라이브의 즐거움을 느껴보세요.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>취향은 달라도, 즐거움은 함께</strong>
디즈니 프린세스, 미키와 친구들, 겨울왕국 등 <br class="br-m" />디즈니를 사랑하는 팬이라면 <br class="br-m" />더 많은 캐릭터들의 등장을 놓치지 마세요.
<span class="add">※ 출시 예정 테마는 변경될 수 있습니다.</span>
</p>
<div class="img-area">
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reason_mickey.png" alt="" />
<span class="msg">앞으로 출시될 테마들을 <br />기대해주세요!</span>
</span>
</div>
</li>
<li>
<p>
<strong>드라이브가 새로워지는 순간</strong>
기아 오너를 위한 디즈니 디스플레이 테마.<br class="br-m" />지금 바로, 특별한 드라이빙을 시작해보세요.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons3.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons3_m.png" class="mobile" alt="" />
</div>
</li>
</ol>
<div class="copyright">ⓒ Disney</div>
<div class="three-reasons">
<div class="tit-area">
<div class="inner aos-init" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<p>디즈니 테마를 놓쳐서는 안될</p>
<h3>세 가지 이유</h3>
</div>
</div>
<div class="reasons">
<div class="inner aos-init" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<ol>
<li>
<p>
<strong>익숙한 공간에 스며드는 특별함</strong> 디즈니 미키와 친구들 테마와 함께, <br class="br-m" />
매 순간 드라이브의 즐거움을 느껴보세요.
</p>
<div class="img-area"><img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1.png" class="web" alt="" /> <img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1_m.png" class="mobile" alt="" /></div>
</li>
<li>
<p>
<strong>취향은 달라도, 즐거움은 함께</strong> 디즈니 프린세스, 미키와 친구들, 겨울왕국 등 <br class="br-m" />
디즈니를 사랑하는 팬이라면 <br class="br-m" />
더 많은 캐릭터들의 등장을 놓치지 마세요. <span class="add">※ 출시 예정 테마는 변경될 수 있습니다.</span>
</p>
<div class="img-area">
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reason_mickey.png" alt="" />
<span class="msg"
>앞으로 출시될 테마들을 <br />
기대해주세요!</span
>
</span>
</div>
</li>
<li>
<p>
<strong>드라이브가 새로워지는 순간</strong> 기아 오너를 위한 디즈니 디스플레이 테마.<br class="br-m" />
지금 바로, 특별한 드라이빙을 시작해보세요.
</p>
<div class="img-area"><img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons3.png" class="web" alt="" /> <img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons3_m.png" class="mobile" alt="" /></div>
</li>
</ol>
<div class="copyright">ⓒ Disney</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-box box2">
<div class="index-area">
<div class="inner">
<img src="../assets/images/kia/pdp/display_theme_disney/Disney Frozen_Index1.png" alt="Index1" />
</div>
</div>
<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 class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="text_area">
<h4>Welcome & Goodbye Video</h4>
<p>
마블 어벤져스 컨셉의 모션 그래픽 Video가 차량 Sleep <br class="br-m" />모드 동작 이후 차량을 켤 때, 끌 때에 적용 됩니다.<br />
<span class="add">※ 두가지 테마 모두 동일한 모션 그래픽 Video가 적용됩니다. </span>
</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/Avengers_Comics_Cluster.png" class="themeImg" alt="Cluster" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>선택한 마블 테마가 클러스터 화면에 적용됩니다. 마블만의 역동적인 그래픽과 게이지 디자인을 확인해 보세요.</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/Avengers_Comics_Map.png" class="themeImg" alt="Navigation" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>목적지까지의 길 안내 기능을 이용할 때마다 마블의 특별한 아트워크가 현재 위치를 표시해줍니다.</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/Avengers_Comics_Home.png" class="themeImg" alt="Homecard" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>각 메뉴 화면을 넘길 때마다 마블 캐릭터와 로고, 다양한 일러스트가 나타납니다.</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/Avengers_Comics_Profile.png" class="themeImg" alt="Profile" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>마블 캐릭터와 로고를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다. 운전자마다 다른 이미지를 설정해 보세요.</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_index.png" class="web" alt="index" />
<img src="../assets/images/kia/pdp/display_theme_mickey/img_index_m.png" class="mobile" alt="index" />
</div>
</div>
</div>
<div class="discover-area">
<div class="comp_top">
<h3>Discover <br class="br-m" />Adorable Designs</h3>
</div>
<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 class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<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">
<p>마블 테마를 놓쳐서는 안될</p>
<h3>세 가지 이유</h3>
<div class="text_area">
<h4>Welcome & Goodbye Video</h4>
<p>Disney-themed motion graphics play once at <br class="br-m" />start-up (from sleep mode) and shutdown.</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_mickey/frozen/img_Cluster.png" class="themeImg box1-cluster" alt="Cluster" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>The selected Disney 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_mickey/frozen/img_Map.png" class="themeImg box1-navigation" alt="Navigation" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>Disney 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_mickey/frozen/img_Home.png" class="themeImg box1-homecard" alt="Homecard" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>Artwork of Disney 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_mickey/frozen/img_Profile.png" class="themeImg box1-profile" alt="Profile" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>Choose from Disney-themed profile images—choose a unique one for each driver.</p>
</div>
</div>
</div>
</div>
<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>차 안에서 누리는 색다른 경험</strong>
마블 어벤져스 테마와 함께, <br class="br-m" />매 순간 주행의 즐거움을 느껴보세요.
</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>취향에 따라 골라보는 다양한 테마</strong>
어벤져스, 스파이더맨, 엑스맨 등 <br class="br-m" />마블 유니버스를 사랑하는 팬이라면 <br />더 많은 히어로들의 등장을 놓치지 마세요.
<span class="add">※ 출시 예정 테마는 변경될 수 있습니다.</span>
</p>
<div class="img-area">
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reason_marvel.png" alt="" />
<span class="msg">앞으로 출시될 테마들을<br />기대해주세요!</span>
</span>
</div>
</li>
<li>
<p>
<strong>개성 넘치는 드라이빙의 서막</strong>
기아 오너를 위한 마블 디스플레이 테마. <br />지금 바로, 특별한 드라이빙을 시작해보세요.
</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 class="copyright">ⓒ 2025 MARVEL</div>
<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">
<p>Three Reasons</p>
<h3>
Why you won’t want<br class="br-m" />
to miss out
</h3>
</div>
</div>
<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 Delightful <br class="br-m" />In-Car Experience</strong>
Once you transform your display with<br class="br-m" />
Disney Frozen themes,<br class="br-pc" />
you might find it hard to<br class="br-m" />
return to the standard setup.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons1.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons1_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>Themes for Every Taste</strong>
Whether you’re a fan of<br class="br-m" />
Disney’s Frozen,<br class="br-m" />
or Mickey & Friends,<br class="br-pc" />
an even more themes will be available<br class="br-m" />
featuring some of your<br class="br-pc" />
favorite characters.
<span class="add">※ Themes to be released are subject to change.</span>
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons2.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons2_m.png" class="mobile" alt="" />
</div>
<!-- <div class="img-area">
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reason_mickey.png" alt="" />
<span class="msg"
>Our Themes<br />
Are Expanding</span
>
</span>
</div> -->
</li>
<li>
<p>
<strong>Your Distinctive Journey <br class="br-m" />Starts Here</strong>
Kia owners can now get Disney in-car<br class="br-m" />
experiences to customize<br class="br-pc" />
their journey.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons3.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons3_m.png" class="mobile" alt="" />
</div>
</li>
</ol>
<div class="copyright">ⓒ Disney</div>
</div>
</div>
</div>
</div>
@@ -804,7 +752,7 @@
</div>
</div>
<div class="comp_1x_b_n_n_e1 displayTheme displayTheme-kbo">
<div class="comp_1x_b_n_n_e1 displayTheme">
<div class="comp_body">
<h5>사양 이용 영상</h5>
<div class="youtubeArea youtubeArea_pdp" value="lNuSUuf7hYU"></div>
@@ -1076,78 +1024,6 @@
</div>
</div>
<!--//footer-->
<!-- 2025.08.27 추가 -->
<div id="carListPopup" class="popupWarp" style="display: none">
<div class="popContents">
<h2>차량 선택하기 (5)</h2>
<div class="payInfoCon">
<div class="carlistItem">
<ul>
<!-- [D] 선택 시 selected 클래스 추가 -->
<li class="selected">
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>222JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>333JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>444JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>555JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>666JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>444JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>555JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>666JH4TB2H26CC012345</em>
</button>
</li>
</ul>
</div>
</div>
<div class="towButton">
<button class="cartBtn leftBtn" onclick="close_layer_popup('carListPopup')"><p>취소</p></button>
<button class="PurchaseBtn rightBtn" onclick="close_layer_popup('carListPopup')"><p>선택</p></button>
</div>
</div>
</div>
<!--// 2025.08.27 추가 -->
<script>
AOS.init();