232 lines
12 KiB
PHP
232 lines
12 KiB
PHP
<?php $bland_code = "kia"; ?>
|
|
<!--
|
|
//메타의 각 브랜드 별 코드는 hyundai,genesis 입니다.
|
|
//브랜드 별 경로에 따라 해당 코드를 변경해주세요.
|
|
-->
|
|
<?php $gnbStyleCode = "hskey"; ?>
|
|
<!--
|
|
페이지 별 붙박이 코드입니다. 해당 변수는 JSP로만 변경해주시고, 값은 그대로 유지만 시켜주시면 됩니다.
|
|
-->
|
|
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>제품상세명 > 제품리스트 > 회사명</title>
|
|
<!--
|
|
//위에 순서대로 title 이 변경되어야 합니다.
|
|
-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/meta.php");
|
|
?>
|
|
<!--상품상세 페이지 css 분리-->
|
|
<link rel="stylesheet" charset="UTF-8" href="/kr/assets/css/service.css?v1" type="text/css" />
|
|
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/style.php");
|
|
?>
|
|
|
|
|
|
</head>
|
|
<body id="event">
|
|
<div class="contentHeaderCase case05"> </div>
|
|
|
|
<!--//header-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/header.php");
|
|
?>
|
|
<!--//header-->
|
|
|
|
<div class="pageTitle">
|
|
<h1>사양별 이용안내</h1>
|
|
</div>
|
|
|
|
<div class="contentWarp">
|
|
<div class="contentsTypeNew caseUsageDetail">
|
|
<section class="caseInfoWrap">
|
|
<h2 class="titleCase01">라이팅 패턴 이용 방법</h2>
|
|
<img src="../assets/images/kia/contents/imgUsageList02.jpg" alt="Lighting pattern 이용 방법" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<div>
|
|
<h3 class="titleCase02" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">라이팅 패턴</h3>
|
|
<p class="txtCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
라이팅 패턴은 디지털 패턴 라이팅 그릴에 다양한 패턴 디자인을 제공합니다. 사양 구매 시, 앱/차량에서 구매한 패턴을 선택/설정하실 수 있습니다. <br>패턴 선택 후 재시동시 선택한 패턴이 차량에 적용 됩니다.
|
|
<span style="color: #676767; display: block; padding-top: 15px;">※ 디지털 패턴 라이팅 그릴이 장착된 차량만 구매할 수 있습니다.</span>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="caseFunction">
|
|
<h2 class="titleCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">패턴 설정 방법</h2>
|
|
|
|
<div class="functionTab" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<ul>
|
|
<li class="active"><button><b>차량</b></button></li>
|
|
<li><button><b>Kia Connect 앱</b></button></li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function() {
|
|
const btn = $(".selectInner_new2").find(".btn-select");
|
|
const list = $(".selectInner_new2").find(".list-member");
|
|
$(document).on("click",".selectInner_new2 .btn-select",function(){
|
|
$(this).toggleClass("on");
|
|
});
|
|
$(document).on("click",".selectInner_new2 .list-member li button",function(event){
|
|
if (event.target.nodeName === "BUTTON") {
|
|
btn.html(event.target.innerText);
|
|
btn.removeClass('on');
|
|
var tabIndex = $(this).parent().index() +1;
|
|
$('.caseFunction>section:nth-of-type('+tabIndex+')').show().siblings('section').hide();
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<div class="selectInner_new2">
|
|
<div class="cont-select">
|
|
<button class="btn-select">차량</button>
|
|
<ul class="list-member">
|
|
<li><button>차량</button></li>
|
|
<li><button>Kia Connect 앱</button></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="storeGuideItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<header class="case">
|
|
<h3 class="titleCase03">차량에서 패턴변경</h3>
|
|
<strong>3 STEP</strong>
|
|
</header>
|
|
|
|
<div class="swiper swiper1">
|
|
<ul class="swiper-wrapper caseWide">
|
|
<li class="swiper-slide">
|
|
<img class="noBorder" src="../assets/images/kia/contents/lighting01_1.jpg" alt="상품 설치후, 차량내 인포테인먼트 화면에서 '라이트' 메뉴를 선택">
|
|
<b>STEP 01</b>
|
|
<p class="caseBlack txtCase01">상품 설치 후, 차량 내 인포테인먼트 화면에서 '라이트' 메뉴를 선택하세요.</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img class="noBorder" src="../assets/images/kia/contents/lighting01_2.jpg" alt="'라이트'메뉴 하위에 화면을 아래로 스크롤하여 '라이팅 패턴' 메뉴 선택">
|
|
<b>STEP 02</b>
|
|
<p class="caseBlack txtCase01">'라이트'메뉴 하위에 화면을 아래로 스크롤하여 '라이팅 패턴' 메뉴 선택하세요.</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img class="noBorder" src="../assets/images/kia/contents/lighting01_3.jpg" alt="'라이팅 패턴' 메뉴에 들어가면 구매한 패턴을 선택하여 헤드램프에 패턴 ON/OFF 가 가능">
|
|
<b>STEP 03</b>
|
|
<p class="caseBlack txtCase01">'라이팅 패턴' 메뉴에서 원하시는 패턴을 선택해주세요.</p>
|
|
<b>※ 선택된 패턴은 다음번 시동 시 변경됩니다.</b>
|
|
</li>
|
|
</ul>
|
|
<div class="swiper-scrollbar"></div>
|
|
<div class="swiper-scrollbar-after-space"></div>
|
|
</div>
|
|
<div class="swiper-button-next btnNextSlide1"></div>
|
|
<div class="swiper-button-prev btnPrevSlide1"></div>
|
|
</section>
|
|
|
|
<section class="storeGuideItem" style="display: none;" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<header class="case">
|
|
<h3 class="titleCase03">Kia Connect 앱에서 패턴변경</h3>
|
|
<strong>6 STEP</strong>
|
|
</header>
|
|
|
|
<div class="swiper swiper2">
|
|
<ul class="swiper-wrapper">
|
|
<li class="swiper-slide">
|
|
<img src="../assets/images/kia/contents/lighting02_1.jpg" alt="Kia Connect 앱에서 '더보기' 화면 내 '차량 및 서비스 설정'을 선택하세요.">
|
|
<b>STEP 01</b>
|
|
<p class="caseBlack txtCase01">Kia Connect 앱에서 '더보기' 화면 내 '차량 및 서비스 설정'을 선택하세요.</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img src="../assets/images/kia/contents/lighting02_2.jpg" alt="'차량 및 서비스 설정'을 클릭합니다.">
|
|
<b>STEP 02</b>
|
|
<p class="caseBlack txtCase01">'차량 설정' 메뉴를 선택하세요.</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img src="../assets/images/kia/contents/lighting02_3.jpg" alt="'차랑 설정 메뉴'를 클릭합니다.">
|
|
<b>STEP 03</b>
|
|
<p class="caseBlack txtCase01">'차량 설정 변경'을 선택하세요.</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img src="../assets/images/kia/contents/lighting02_4.jpg" alt="'차랑 설정 변경'을 클릭합니다.">
|
|
<b>STEP 04</b>
|
|
<p class="caseBlack txtCase01">'차량 설정' 버튼을 선택하세요.</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img src="../assets/images/kia/contents/lighting02_5.jpg" alt="'차랑 설정 버튼'을 클릭합니다.">
|
|
<b>STEP 05</b>
|
|
<p class="caseBlack txtCase01">'라이트 메뉴'를 선택하세요.</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img src="../assets/images/kia/contents/lighting02_6.jpg" alt="'라이팅 패턴'에서 원하시는 패턴을 선택해주세요.">
|
|
<b>STEP 06</b>
|
|
<p class="caseBlack txtCase01">'라이팅 패턴'에서 원하시는 패턴을 선택해주세요.</p>
|
|
<b>※ 선택된 패턴은 다음번 시동 시 변경됩니다.</b>
|
|
</li>
|
|
</ul>
|
|
<div class="swiper-scrollbar"></div>
|
|
<div class="swiper-scrollbar-after-space"></div>
|
|
</div>
|
|
<div class="swiper-button-next btnNextSlide2"></div>
|
|
<div class="swiper-button-prev btnPrevSlide2"></div>
|
|
</section>
|
|
</section>
|
|
|
|
<div class="contentsBtnWarp">
|
|
<div class="oneButton">
|
|
<a href="/kr/info/product-usage-guide"><p>목록</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!--//footer-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/footer.php");
|
|
?>
|
|
<!--//footer-->
|
|
<script>
|
|
$(document).on('click','.functionTab button',function(){
|
|
var tabIndex = $(this).parent().index() +1;
|
|
$(this).parent('li').addClass('active').siblings('li').removeClass('active');
|
|
$('.caseFunction>section:nth-of-type('+tabIndex+')').show().siblings('section').hide();
|
|
});
|
|
|
|
var swiper1 = new Swiper(".swiper1", {
|
|
slidesPerView: "auto",
|
|
roundLengths: true,
|
|
//freeMode: true,
|
|
scrollbar: {
|
|
el: ".swiper-scrollbar",
|
|
hide: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".btnNextSlide1",
|
|
prevEl: ".btnPrevSlide1",
|
|
},
|
|
});
|
|
|
|
var swiper2 = new Swiper(".swiper2", {
|
|
slidesPerView: "auto",
|
|
roundLengths: true,
|
|
//freeMode: true,
|
|
scrollbar: {
|
|
el: ".swiper-scrollbar",
|
|
hide: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".btnNextSlide2",
|
|
prevEl: ".btnPrevSlide2",
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|