디스플레이테마 인트로 영상 영역 수정
This commit is contained in:
@@ -2148,6 +2148,52 @@
|
||||
.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {
|
||||
border: 2px solid #F8C40C;
|
||||
}
|
||||
.displayTheme.comp_wide.playing .comp_body.layer_up,
|
||||
.displayTheme.comp_wide.playing .thumb-swiper,
|
||||
.displayTheme.comp_wide.playing .displayThemeDtl {
|
||||
filter: blur(2px);
|
||||
}
|
||||
@media (max-width: 1700px) {
|
||||
.displayTheme.comp_wide.playing .displayThemeDtl {
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
.displayTheme.comp_wide .close-today {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom: 8.2rem;
|
||||
width: 100%;
|
||||
font-size: 1.6rem;
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.displayTheme.comp_wide .close-today label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.displayTheme.comp_wide .close-today label input {
|
||||
margin-right: 0.4rem;
|
||||
}
|
||||
@media (max-width: 1780px) {
|
||||
.displayTheme.comp_wide .close-today {
|
||||
bottom: 4rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.displayTheme.comp_wide .close-today {
|
||||
bottom: 2rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 501px) {
|
||||
.displayTheme.comp_wide .close-today {
|
||||
bottom: 4rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.displayTheme .comp_top {
|
||||
z-index: 2;
|
||||
}
|
||||
@@ -2183,39 +2229,96 @@
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
z-index: 4;
|
||||
background: #000;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
.displayTheme .comp_md.video_wrap video {
|
||||
.displayTheme .comp_md.video_wrap .video-area {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
max-width: 125rem;
|
||||
padding-top: 43.5%;
|
||||
}
|
||||
.displayTheme .comp_md.video_wrap .video-area .video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
max-width: 160rem;
|
||||
background-color: #000;
|
||||
border: 2.5rem solid #000;
|
||||
border-bottom-width: 5.65rem;
|
||||
}
|
||||
.displayTheme .comp_md.video_wrap .video-area .video video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-height: 90rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.displayTheme .comp_md.video_wrap .video-area {
|
||||
width: 100%;
|
||||
}
|
||||
.displayTheme .comp_md.video_wrap .video-area .video {
|
||||
border: 1.5rem solid #000;
|
||||
border-bottom-width: 1.5rem;
|
||||
}
|
||||
}
|
||||
.displayTheme .comp_md.video_wrap .btn-close {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 1;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center/contain;
|
||||
top: -6rem;
|
||||
right: -16rem;
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-indent: -9999em;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.displayTheme .comp_md.video_wrap .btn-close {
|
||||
top: -7rem;
|
||||
right: -12rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.displayTheme .comp_md.video_wrap .btn-close {
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
top: -7rem;
|
||||
right: 0;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
}
|
||||
.displayTheme .comp_md.video_wrap .btn-close::before,
|
||||
.displayTheme .comp_md.video_wrap .btn-close::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 9.2rem;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
.displayTheme .comp_md.video_wrap .btn-close::before,
|
||||
.displayTheme .comp_md.video_wrap .btn-close::after {
|
||||
width: 7rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.displayTheme .comp_md.video_wrap .btn-close::before,
|
||||
.displayTheme .comp_md.video_wrap .btn-close::after {
|
||||
width: 4rem;
|
||||
}
|
||||
}
|
||||
.displayTheme .comp_md.video_wrap .btn-close::before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
.displayTheme .comp_md.video_wrap .btn-close::after {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.displayTheme .comp_md.video_wrap {
|
||||
height: 56rem;
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2030,6 +2030,53 @@
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.playing {
|
||||
.comp_body.layer_up,
|
||||
.thumb-swiper,
|
||||
.displayThemeDtl {
|
||||
filter: blur(2px);
|
||||
}
|
||||
|
||||
@media (max-width: 1700px){
|
||||
|
||||
.displayThemeDtl {
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.close-today {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
bottom:8.2rem;
|
||||
width: 100%;
|
||||
font-size: 1.6rem;
|
||||
color:#fff;
|
||||
font-weight: 600;
|
||||
transition: all .2s ease;
|
||||
label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
input {
|
||||
margin-right: .4rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1780px){
|
||||
bottom:4rem;
|
||||
}
|
||||
@media (max-width: 1024px){
|
||||
bottom:2rem;
|
||||
}
|
||||
|
||||
@include maxmobile{
|
||||
bottom:4rem;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.comp_top {
|
||||
z-index: 2;
|
||||
@@ -2072,36 +2119,112 @@
|
||||
// transform: translateY(-36rem);
|
||||
padding-top: 56.25%;
|
||||
z-index: 4;
|
||||
background: #000;
|
||||
background: rgba(0,0,0,.5);
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
video {
|
||||
.video-area {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
max-width: 160rem;
|
||||
height: 100%;
|
||||
max-height: 90rem;
|
||||
width: 80%;
|
||||
max-width: 125rem;
|
||||
padding-top:43.5%;
|
||||
.video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
border:2.5rem solid #000;
|
||||
border-bottom-width:5.65rem;
|
||||
video {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include maxtablet{
|
||||
width: 100%;
|
||||
.video {
|
||||
border:1.5rem solid #000;
|
||||
border-bottom-width:1.5rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
top: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 1;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center / contain;
|
||||
top:-6rem;
|
||||
right:-16rem;
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
text-indent: -9999em;
|
||||
@media (max-width: 1024px){
|
||||
top: -7rem;
|
||||
right: -12rem;
|
||||
width: 10rem;
|
||||
height: 10rem;
|
||||
}
|
||||
@include maxtablet{
|
||||
top: -7rem;
|
||||
right: 0;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
}
|
||||
// @include maxmobile{
|
||||
// top:-6rem;
|
||||
// right:-16rem;
|
||||
// width: 14rem;
|
||||
// height: 14rem;
|
||||
// }
|
||||
}
|
||||
|
||||
.btn-close::before,
|
||||
.btn-close::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 9.2rem;
|
||||
height: 2px;
|
||||
background-color: #fff;
|
||||
@media (max-width: 1024px){
|
||||
width: 7rem;
|
||||
}
|
||||
@include maxtablet{
|
||||
top: 1rem;
|
||||
right: 1rem;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-close::before {
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
}
|
||||
|
||||
.btn-close::after {
|
||||
transform: translate(-50%, -50%) rotate(-45deg);
|
||||
}
|
||||
|
||||
// .btn-close {
|
||||
// position: absolute;
|
||||
// top: 2rem;
|
||||
// right: 2rem;
|
||||
// z-index: 1;
|
||||
// width: 6rem;
|
||||
// height: 6rem;
|
||||
// background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center / contain;
|
||||
// cursor: pointer;
|
||||
// text-indent: -9999em;
|
||||
// @include maxtablet{
|
||||
// top: 1rem;
|
||||
// right: 1rem;
|
||||
// width: 4rem;
|
||||
// height: 4rem;
|
||||
// }
|
||||
// }
|
||||
@include maxtablet{
|
||||
height: 56rem;
|
||||
}
|
||||
|
||||
@@ -640,8 +640,15 @@ $(document).on("click", ".displayTheme .dtthumb", function() {
|
||||
function pdpIntro() {
|
||||
// dpThemeVideo 요소가 존재하는지 확인
|
||||
if ($('.video_wrap video').length > 0) {
|
||||
$(".displayTheme").addClass('playing')
|
||||
if (getCookie('hideIntroPopup')) {
|
||||
$(".displayTheme").removeClass('playing')
|
||||
$(".video_wrap").hide();
|
||||
}
|
||||
|
||||
// .video_wrap 내 모든 비디오 요소 선택
|
||||
const videoElements = document.querySelectorAll('.video_wrap video');
|
||||
|
||||
videoElements.forEach(video => {
|
||||
|
||||
const videoWrap = $('.displayTheme .video_wrap');
|
||||
@@ -654,6 +661,7 @@ function pdpIntro() {
|
||||
// 비디오 재생이 끝났을 때 이벤트 리스너 추가
|
||||
video.addEventListener('ended', function() {
|
||||
// console.log("addEventListener ended 실행");
|
||||
$(".displayTheme").removeClass('playing')
|
||||
$(videoWrap).hide();
|
||||
// 비디오 재생이 끝나면 비디오 숨기기
|
||||
// $(videoWrap).fadeOut('fast',function(){
|
||||
@@ -667,6 +675,7 @@ function pdpIntro() {
|
||||
// .btn-intro 버튼 클릭 시 비디오 재생
|
||||
$(document).on("click", ".displayTheme .btn-intro", function() {
|
||||
// console.log('intro 다시 실행');
|
||||
$(".displayTheme").addClass('playing')
|
||||
$(videoWrap).show();
|
||||
if (video) {
|
||||
video.currentTime = 0;
|
||||
@@ -677,6 +686,7 @@ function pdpIntro() {
|
||||
// .btn-close 버튼 클릭 시 비디오 숨기기
|
||||
$(document).on("click", ".video_wrap .btn-close", function() {
|
||||
// console.log('btn close 실행');
|
||||
$(".displayTheme").removeClass('playing');
|
||||
$(videoWrap).hide();
|
||||
if (video) {
|
||||
video.currentTime = 0;
|
||||
@@ -902,12 +912,31 @@ $.fn.clearForm = function () {
|
||||
}
|
||||
});
|
||||
};
|
||||
// 쿠키 설정 함수
|
||||
function setCookie(name, value, days) {
|
||||
var expires = "";
|
||||
if (days) {
|
||||
var date = new Date();
|
||||
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
|
||||
expires = "; expires=" + date.toUTCString();
|
||||
}
|
||||
document.cookie = name + "=" + (value || "") + expires + "; path=/";
|
||||
}
|
||||
|
||||
|
||||
// $(document).on("click", ".video_wrap .btn-close", function() {
|
||||
// alert("클릭")
|
||||
// $(".video_wrap").fadeOut('fast',function(){
|
||||
// videoElements.currentTime = 0;
|
||||
// videoElements.pause();
|
||||
// });
|
||||
// })
|
||||
// 쿠키 가져오는 함수
|
||||
function getCookie(name) {
|
||||
var nameEQ = name + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0;i < ca.length;i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0) == ' ') c = c.substring(1,c.length);
|
||||
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
|
||||
}
|
||||
return null;
|
||||
}
|
||||
// 팝업을 숨기는 함수
|
||||
function hideTodayIntroPopup() {
|
||||
$(".video_wrap").hide();
|
||||
$(".displayTheme").removeClass('playing');
|
||||
setCookie('hideIntroPopup', 'true', 1);
|
||||
}
|
||||
@@ -585,11 +585,21 @@
|
||||
</div>
|
||||
|
||||
<div class="comp_md layer_up video_wrap">
|
||||
<button type="button" class="btn-close">닫기</button>
|
||||
<video id="dpThemeVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" controls>
|
||||
<source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="video-area">
|
||||
<div class="video">
|
||||
<button type="button" class="btn-close">닫기</button>
|
||||
<video id="dpThemeVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" controls>
|
||||
<source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-today">
|
||||
<label onclick="hideTodayIntroPopup()">
|
||||
<input type="checkbox" name="" id="">
|
||||
오늘 하루 재생하지 않기
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -246,7 +246,7 @@
|
||||
|
||||
<li class="menuDepth1Wrap">
|
||||
|
||||
<button class=" btn-data">데이터 호출</button>
|
||||
<button class=" btn-data" style="color:#fff;font-size:16px;cursor:pointer;">데이터 호출</button>
|
||||
</li>
|
||||
</p>
|
||||
</div>
|
||||
@@ -697,317 +697,328 @@
|
||||
const dataHtml = `
|
||||
|
||||
<div class="comp_wide comp_1x_w_v_o_b displayTheme">
|
||||
<div class="image_area visualBg">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
|
||||
</div>
|
||||
<div class="comp_top">
|
||||
<div class="comp_body layer_up">
|
||||
<div class="text_area">
|
||||
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
드라이빙 라이프에 스타일을 더 하는 특별한 테마
|
||||
</h3>
|
||||
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
운전자가 다가가면 다이나믹하게 반응하는 라이팅 패턴으로 내 차만의 특별한 존재감을 확인해 보세요.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_bottom thumb-swiper">
|
||||
|
||||
<div class="image_area visualBg">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지">
|
||||
</div>
|
||||
<div class="comp_top">
|
||||
<div class="comp_body layer_up">
|
||||
<div class="text_area">
|
||||
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
응원하는 NBA팀의 테마를 차량 디스플레이에 적용해보세요
|
||||
</h3>
|
||||
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
아래의 로고를 눌러 미리 차량에 적용된 디자인을 확인 할 수 있습니다.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_bottom thumb-swiper">
|
||||
|
||||
|
||||
<a class="btn-intro">
|
||||
Intro영상 다시보기
|
||||
</a>
|
||||
<div class="com_bottm_inner">
|
||||
<div class="swiper pdpDisplayThemeSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme1">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme01.png" alt="Atlanta Hawks">
|
||||
<p>Atlanta <br>Hawks</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme2">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme02.png" alt="Boston Celtics">
|
||||
<p>Boston <br>Celtics</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme3">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme03.png" alt="brooklyn nets">
|
||||
<p>brooklyn <br>nets</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme5">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme04.png" alt="CHICAGO BULLS">
|
||||
<p>CHICAGO <br>BULLS</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme4">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme05.png" alt="Charlotte hornets">
|
||||
<p>Charlotte <br>hornets</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme6">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme06.png" alt="cleveland cavaliers">
|
||||
<p>cleveland <br>cavaliers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme7">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme07.png" alt="dallas mavericks">
|
||||
<p>dallas <br>mavericks</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme8">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme08.png" alt="Denver Nuggets">
|
||||
<p>Denver <br>Nuggets</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme9">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme09.png" alt="Detroit Pistons">
|
||||
<p>Detroit <br>Pistons</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme10">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme10.png" alt="Golden State Warriors">
|
||||
<p>Golden State <br>Warriors</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme11">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme11.png" alt="Houston Rockets">
|
||||
<p>Houston <br>Rockets</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme12">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme12.png" alt="Indiana Pacers">
|
||||
<p>Indiana <br>Pacers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme13">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme13.png" alt="Los Angeles Clippers">
|
||||
<p>Los Angeles <br>Clippers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme14">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme14.png" alt="Los Angeles Lakers">
|
||||
<p>Los Angeles <br>Lakers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme15">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme15.png" alt="Memphis Grizzlies">
|
||||
<p>Memphis <br>Grizzlies</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme16">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme16.png" alt="Miami Heat">
|
||||
<p>Miami <br>Heat</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme17">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme17.png" alt="Milwaukee Bucks">
|
||||
<p>Milwaukee <br>Bucks</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme18">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme18.png" alt="Minnesota Timberwolves">
|
||||
<p>Minnesota <br>Timberwolves</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme19">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme19.png" alt="New Orleans Pelicans">
|
||||
<p>New Orleans <br>Pelicans</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme20">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme20.png" alt="New York Knicks">
|
||||
<p>New York <br>Knicks</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme21">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme21.png" alt="Oklahoma City Thunder">
|
||||
<p>Oklahoma City <br>Thunder</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme22">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme22.png" alt="Orlando Magic">
|
||||
<p>Orlando <br>Magic</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme23">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme23.png" alt="philadelphia 76ers">
|
||||
<p>philadelphia <br>76ers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme24">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme24.png" alt="Phoenix Suns">
|
||||
<p>Phoenix <br>Suns</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme25">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme25.png" alt="Portland Trailblazers">
|
||||
<p>Portland <br>Trailblazers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme26">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme26.png" alt="Sacramento Kings">
|
||||
<p>Sacramento <br>Kings</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme27">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme27.png" alt="San Antonio Spurs">
|
||||
<p>San Antonio <br>Spurs</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme28">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme28.png" alt="Toronto Raptors">
|
||||
<p>Toronto <br>Raptors</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme29">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme29.png" alt="Utah Jazz">
|
||||
<p>Utah <br>Jazz</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme30">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme30.png" alt="Washington Wizards">
|
||||
<p>Washington <br>Wizards</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="swiper-navigation">
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_md layer_up video_wrap" style=:display:none>
|
||||
<a class="btn-close">닫기</a>
|
||||
<video playsinline="playsinline" autoplay="autoplay" muted="muted" controls>
|
||||
<source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
<button type="button" class="btn-intro">
|
||||
Intro영상 다시보기
|
||||
</button>
|
||||
<div class="com_bottm_inner">
|
||||
<div class="swiper pdpDisplayThemeSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme1">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme01.png" alt="Atlanta Hawks">
|
||||
<p>Atlanta <br>Hawks</p>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="comp_wide comp_1x_b_v_s_b displayTheme">
|
||||
|
||||
<div class="comp_body dtlImgs">
|
||||
|
||||
<div class="theme-story">
|
||||
|
||||
</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="displayThemeDtl">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-1.png" class="themeImg" alt="디스플레이 테마1">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>Cluster</h5>
|
||||
<p>
|
||||
해당 사양은 디지털 패턴 라이팅 그릴이 적용된 차량에 한해서 구매할 수 있습니다. 참고하시길 바랍니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-2.png" class="themeImg" alt="디스플레이 테마2">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>Navigation</h5>
|
||||
<p>
|
||||
나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
|
||||
미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-3.png" class="themeImg" alt="디스플레이 테마3">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>Profile</h5>
|
||||
<p>
|
||||
나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
|
||||
미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="swiper-navigation">
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme2">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme02.png" alt="Boston Celtics">
|
||||
<p>Boston <br>Celtics</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme3">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme03.png" alt="brooklyn nets">
|
||||
<p>brooklyn <br>nets</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme5">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme04.png" alt="CHICAGO BULLS">
|
||||
<p>CHICAGO <br>BULLS</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme4">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme05.png" alt="Charlotte hornets">
|
||||
<p>Charlotte <br>hornets</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme6">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme06.png" alt="cleveland cavaliers">
|
||||
<p>cleveland <br>cavaliers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme7">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme07.png" alt="dallas mavericks">
|
||||
<p>dallas <br>mavericks</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme8">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme08.png" alt="Denver Nuggets">
|
||||
<p>Denver <br>Nuggets</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme9">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme09.png" alt="Detroit Pistons">
|
||||
<p>Detroit <br>Pistons</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme10">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme10.png" alt="Golden State Warriors">
|
||||
<p>Golden State <br>Warriors</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme11">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme11.png" alt="Houston Rockets">
|
||||
<p>Houston <br>Rockets</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme12">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme12.png" alt="Indiana Pacers">
|
||||
<p>Indiana <br>Pacers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme13">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme13.png" alt="Los Angeles Clippers">
|
||||
<p>Los Angeles <br>Clippers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme14">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme14.png" alt="Los Angeles Lakers">
|
||||
<p>Los Angeles <br>Lakers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme15">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme15.png" alt="Memphis Grizzlies">
|
||||
<p>Memphis <br>Grizzlies</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme16">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme16.png" alt="Miami Heat">
|
||||
<p>Miami <br>Heat</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme17">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme17.png" alt="Milwaukee Bucks">
|
||||
<p>Milwaukee <br>Bucks</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme18">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme18.png" alt="Minnesota Timberwolves">
|
||||
<p>Minnesota <br>Timberwolves</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme19">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme19.png" alt="New Orleans Pelicans">
|
||||
<p>New Orleans <br>Pelicans</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme20">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme20.png" alt="New York Knicks">
|
||||
<p>New York <br>Knicks</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme21">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme21.png" alt="Oklahoma City Thunder">
|
||||
<p>Oklahoma City <br>Thunder</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme22">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme22.png" alt="Orlando Magic">
|
||||
<p>Orlando <br>Magic</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme23">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme23.png" alt="philadelphia 76ers">
|
||||
<p>philadelphia <br>76ers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme24">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme24.png" alt="Phoenix Suns">
|
||||
<p>Phoenix <br>Suns</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme25">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme25.png" alt="Portland Trailblazers">
|
||||
<p>Portland <br>Trailblazers</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme26">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme26.png" alt="Sacramento Kings">
|
||||
<p>Sacramento <br>Kings</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme27">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme27.png" alt="San Antonio Spurs">
|
||||
<p>San Antonio <br>Spurs</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme28">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme28.png" alt="Toronto Raptors">
|
||||
<p>Toronto <br>Raptors</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme29">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme29.png" alt="Utah Jazz">
|
||||
<p>Utah <br>Jazz</p>
|
||||
</div>
|
||||
<div class="swiper-slide dtthumb" value="NBA_Theme30">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme30.png" alt="Washington Wizards">
|
||||
<p>Washington <br>Wizards</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <div class="swiper-navigation">
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_md layer_up video_wrap">
|
||||
<div class="video-area">
|
||||
<div class="video">
|
||||
<button type="button" class="btn-close">닫기</button>
|
||||
<video id="dpThemeVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" controls>
|
||||
<source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-today">
|
||||
<label onclick="hideTodayIntroPopup()">
|
||||
<input type="checkbox" name="" id="">
|
||||
오늘 하루 재생하지 않기
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="comp_wide displayTheme welcome-goodbye">
|
||||
<div class="comp_body">
|
||||
<div class="comp_wide comp_1x_b_v_s_b displayTheme">
|
||||
|
||||
<div class="comp_body dtlImgs">
|
||||
|
||||
<div class="theme-story">
|
||||
|
||||
</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="displayThemeDtl">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-1.png" class="themeImg" alt="디스플레이 테마1">
|
||||
</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 Video
|
||||
</h4>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
NBA팀별 로고와 캐릭터가 반영된 Video가 차량 Sleep 모드 동작 이후 차량 시동을 켤 때에 1회 실행됩니다.
|
||||
<h5>Cluster</h5>
|
||||
<p>
|
||||
클러스터 화면에 응원하는 NBA팀의 로고와 팀 칼라가 적용됩니다.<br>
|
||||
게이지와 함께 차 오르는 팀 정신을 느껴 보세요.
|
||||
</p>
|
||||
</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/lakers_welcome.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp_body">
|
||||
<div class="swiper-slide">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-2.png" class="themeImg" alt="디스플레이 테마2">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
Goodbye Video
|
||||
</h4>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
NBA팀별 로고와 컨셉이 반영된 Video가 차량 시동이 꺼질 때 마다 실행됩니다.
|
||||
<h5>Navigation</h5>
|
||||
<p>
|
||||
내비게이션의 각 메뉴 화면을 넘길 때 마다 특별한 NBA 팀 아이콘과 팀 칼라가 적용된 것을 확인할 수 있습니다.<br>
|
||||
스타일리쉬하고 특별한 운전 경험을 완성합니다.
|
||||
</p>
|
||||
</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/lakers_goodbye.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
<div class="swiper-slide">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-3.png" class="themeImg" alt="디스플레이 테마3">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>Profile</h5>
|
||||
<p>
|
||||
응원하는 NBA팀의 로고와 칼라를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다.<br>
|
||||
운전자 별로 다른 이미지를 골라 보세요.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="swiper-navigation">
|
||||
<div class="swiper-button-next"></div>
|
||||
<div class="swiper-button-prev"></div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_wide comp_2x_b_h_s_e2 displayTheme">
|
||||
<div class="comp_body">
|
||||
<div class="item">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_04.png" alt="아이콘 이미지">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>
|
||||
CCNC 차량에 한하여 구매가능
|
||||
</h5>
|
||||
<p>
|
||||
기아 ccNC 인포테인먼트 플폼이 적용된 차량에만 선택 가능합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_05.png" alt="아이콘 이미지">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>
|
||||
고객 맞춤형 설정 기능
|
||||
</h5>
|
||||
<p>
|
||||
여러 개의 테마를 구입하여 운전자 별로 다르게 설정할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_1x_b_n_n_e1 displayTheme">
|
||||
<div class="comp_body">
|
||||
<h5>
|
||||
사양 이용 영상
|
||||
</h5>
|
||||
<div class="youtubeArea youtubeArea_pdp" value="6Z8r6-qXwoo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp_wide displayTheme welcome-goodbye">
|
||||
<div class="comp_body">
|
||||
<div class="text_area">
|
||||
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
Welcome Video
|
||||
</h4>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
NBA팀별 로고와 캐릭터가 반영된 Video가 차량 Sleep 모드 동작 이후 차량 시동을 켤 때에 1회 실행됩니다.
|
||||
</p>
|
||||
</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/lakers_welcome.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp_body">
|
||||
<div class="text_area">
|
||||
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
Goodbye Video
|
||||
</h4>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
NBA팀별 로고와 컨셉이 반영된 Video가 차량 시동이 꺼질 때 마다 실행됩니다.
|
||||
</p>
|
||||
</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/lakers_goodbye.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="listbtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-lighting"><p>사양 이용안내</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp_wide comp_2x_b_h_s_e2 displayTheme">
|
||||
<div class="comp_body">
|
||||
<div class="item">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_04.png" alt="아이콘 이미지">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>
|
||||
ccNC 차량에서 선택적 구매 가능
|
||||
</h5>
|
||||
<p>
|
||||
기아 ccNC 인포테인먼트 플랫폼이 적용된 차량에만 선택 가능합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_05.png" alt="아이콘 이미지">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>
|
||||
고객 맞춤형 설정 기능
|
||||
</h5>
|
||||
<p>
|
||||
여러 개의 테마를 구입하여 운전자 별로 다르게 설정할 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_1x_b_n_n_e1 displayTheme">
|
||||
<div class="comp_body">
|
||||
<h5>
|
||||
사양 이용 영상
|
||||
</h5>
|
||||
<div class="youtubeArea youtubeArea_pdp" value="6Z8r6-qXwoo">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="listbtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-lighting"><p>사양 이용안내</p></a>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
|
||||
$(".editorInner").html(dataHtml);
|
||||
|
||||
Reference in New Issue
Block a user