272 lines
16 KiB
PHP
272 lines
16 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 case02"> </div>
|
||
|
||
<!--//header-->
|
||
<?php
|
||
include($_SERVER['DOCUMENT_ROOT']."/kr/include/header.php");
|
||
?>
|
||
<!--//header-->
|
||
|
||
<div class="pageTitle">
|
||
<h1>스토어 이용안내</h1>
|
||
</div>
|
||
|
||
<div class="contentWarp">
|
||
<div class="contentsTypeNew caseGuideContents">
|
||
<h2 class="titleCase01">기아 커넥트 스토어 이용 가이드</h2>
|
||
|
||
<div class="storeguideTab swiper caseSelect">
|
||
<div class="swiper-wrapper">
|
||
<a class="swiper-slide" href="../info/buying-Installation-guide-Inquiry">
|
||
<strong>디지털 사양 조회</strong>
|
||
<p>내 차량으로 구매할 수 있는 디지털 사양을 조회해보세요.</p>
|
||
</a>
|
||
<a class="swiper-slide" href="../info/buying-Installation-guide-purchase">
|
||
<strong>디지털 사양 구매</strong>
|
||
<p>주문 및 결제 방법을 확인하세요.</p>
|
||
</a>
|
||
<a class="swiper-slide current" href="../info/buying-Installation-guide-installation">
|
||
<strong>디지털 사양 설치</strong>
|
||
<p>결제 후, 차량에 설치하는 방법을 확인하세요.</p>
|
||
</a>
|
||
<a class="swiper-slide" href="../info/buying-Installation-guide-cancellation">
|
||
<strong>구매 취소</strong>
|
||
<p>결제 완료한 디지털 사양의 구매취소 방법을 확인하세요.</p>
|
||
</a>
|
||
<a class="swiper-slide" href="../info/buying-Installation-guide-refund">
|
||
<strong>구독 해지</strong>
|
||
<p>구독 해지 및 환불방법을 확인하세요.</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
<script>
|
||
$(document).ready(function() {
|
||
const btn = $(".selectInner_new").find(".btn-select");
|
||
const list = $(".selectInner_new").find(".list-member");
|
||
$(document).on("click",".selectInner_new .btn-select",function(){
|
||
$(this).toggleClass("on");
|
||
});
|
||
$(document).on("click",".selectInner_new .list-member",function(event){
|
||
if (event.target.nodeName === "BUTTON") {
|
||
btn.html(event.target.innerText);
|
||
btn.removeClass('on');
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
<div class="selectInner_new">
|
||
<div class="cont-select">
|
||
<button class="btn-select">디지털 사양 설치</button>
|
||
<ul class="list-member">
|
||
<li><a href="../info/buying-Installation-guide-Inquiry">디지털 사양 조회</a></li>
|
||
<li><a href="../info/buying-Installation-guide-purchase">디지털 사양 구매</a></li>
|
||
<li><a href="../info/buying-Installation-guide-installation">디지털 사양 설치</a></li>
|
||
<li><a href="../info/buying-Installation-guide-cancellation">구매 취소</a></li>
|
||
<li><a href="../info/buying-Installation-guide-refund">구독 해지</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 2024-07-04 수정 -->
|
||
<div class="tabWarp">
|
||
<a href="javascript:void(0)" class="tabActive">일반</a>
|
||
<a href="javascript:void(0)">테마형</a>
|
||
<a href="javascript:void(0)" class="">이용권형</a>
|
||
</div>
|
||
|
||
<script>
|
||
$(document).on("click",".tabWarp a",function(event){
|
||
$(".tabWarp a").removeClass('tabActive')
|
||
$(this).addClass('tabActive');
|
||
var tabIndex = $(this).index() +1;
|
||
$('.storeGuideItem:nth-of-type('+tabIndex+')').show().siblings('.storeGuideItem').hide();
|
||
});
|
||
</script>
|
||
<section class="storeGuideItem">
|
||
<header class="mgt30">
|
||
<h3 class="titleCase02">일반 디지털 사양 설치</h3>
|
||
<strong>6 STEP</strong>
|
||
</header>
|
||
|
||
<div class="swiper swiper1">
|
||
<ul class="swiper-wrapper caseWide">
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew01_1.jpg" alt="차량에 탑승해서 시동을 겁니다.">
|
||
<b>STEP 01</b>
|
||
<p class="caseBlack">차량에 탑승해서 시동을 거세요.</p>
|
||
</li>
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew01_2.jpg" alt="설치 진행을 위해 AVNT 안내 메시지 확인 후 시동을 끕니다.">
|
||
<b>STEP 02</b>
|
||
<p class="caseBlack">설치 진행을 위해 인포테인먼트 안내 메시지 확인 후 시동을 꺼주세요.</p>
|
||
</li>
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew01_3.jpg" alt="시동을 끄면 AVNT 안내가 나오면 설치 진행을 위해 '지금 설치'를 클릭해주십시오.">
|
||
<b>STEP 03</b>
|
||
<p class="caseBlack">
|
||
시동을 끄고 인포테인먼트 안내가 나오면 설치 진행을 위해 '지금 설치'를 클릭해주세요.
|
||
</p>
|
||
<p>
|
||
-운전자 도어가 잠겨 있어야 합니다.<br>
|
||
-기어 P단 위치가 유지 되어야 합니다.<br>
|
||
-설치 중에는 주행을 할 수 없습니다.
|
||
</p>
|
||
</li>
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew01_4.jpg" alt="디지털 사양을 설치합니다. 소요시간은 네트워크 환경에 따라 달라질 수 있습니다.">
|
||
<b>STEP 04</b>
|
||
<p class="caseBlack">디지털 사양을 설치합니다. 소요시간은 네트워크 환경에 따라 달라질 수 있습니다.</p>
|
||
</li>
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew01_5.jpg" alt="설치 완료 메시지 확인 후 사양 이용을 위해 시동을 켜주세요.">
|
||
<b>STEP 05</b>
|
||
<p class="caseBlack">설치 완료 메시지 확인 후 사양 이용을 위해 시동을 켜주세요.</p>
|
||
</li>
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew01_6.jpg" alt="이용 안내 메시지 확인하세요.">
|
||
<b>STEP 06</b>
|
||
<p class="caseBlack">이용 안내 메시지 확인하세요.</p>
|
||
</li>
|
||
</ul>
|
||
<div class="swiper-scrollbar"></div>
|
||
<div class="swiper-scrollbar-after-space" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"></div>
|
||
</div>
|
||
<div class="swiper-button-next btnNextSlide1 case"></div>
|
||
<div class="swiper-button-prev btnPrevSlide1 case"></div>
|
||
</section>
|
||
<section class="storeGuideItem" style="display: none;">
|
||
<header class="mgt30">
|
||
<h3 class="titleCase02">테마형 디지털 사양 설치</h3>
|
||
<strong>3 STEP</strong>
|
||
</header>
|
||
|
||
<div class="swiper swiper2">
|
||
<ul class="swiper-wrapper caseWide">
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew02_1.jpg" alt="차량에 탑승해서 시동을 겁니다.">
|
||
<b>STEP 01</b>
|
||
<p class="caseBlack">인포테인먼트 시스템 – 설정 – 화면구성 메뉴에 진입해주세요.</p>
|
||
</li>
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew02_2.jpg" alt="설치 진행을 위해 AVNT 안내 메시지 확인 후 시동을 끕니다.">
|
||
<b>STEP 02</b>
|
||
<p class="caseBlack">구매한 테마 사양 좌측 위 다운로드 버튼을 눌러주세요.</p>
|
||
</li>
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew02_3.jpg" alt="시동을 끄면 AVNT 안내가 나오면 설치 진행을 위해 '지금 설치'를 클릭해주십시오.">
|
||
<b>STEP 03</b>
|
||
<p class="caseBlack">
|
||
약 5분후 설치가 완료되면, 예를 눌러 테마를 적용해주세요.(재시동 필요)
|
||
</p>
|
||
</li>
|
||
</ul>
|
||
<div class="swiper-scrollbar"></div>
|
||
<div class="swiper-scrollbar-after-space" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"></div>
|
||
</div>
|
||
<div class="swiper-button-next btnNextSlide1 case"></div>
|
||
<div class="swiper-button-prev btnPrevSlide1 case"></div>
|
||
</section>
|
||
<section class="storeGuideItem" style="display: none;">
|
||
<header class="mgt30">
|
||
<h3 class="titleCase02">이용권형 디지털 사양 설치</h3>
|
||
<strong>1 STEP</strong>
|
||
</header>
|
||
|
||
<div class="swiper swiper3">
|
||
<ul class="swiper-wrapper caseWide">
|
||
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||
<img class="noBorder" src="/kr/assets/images/kia/contents/guideStoreInstallationNew03_1.jpg" alt="차량에 탑승해서 시동을 겁니다.">
|
||
<b>STEP 01</b>
|
||
<p class="caseBlack">이용권 사양은 별도 설치없이 디지털 사양을 구매하시면 해당 메뉴에 진입 가능합니다.</p>
|
||
</li>
|
||
</ul>
|
||
<div class="swiper-scrollbar"></div>
|
||
<div class="swiper-scrollbar-after-space" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"></div>
|
||
</div>
|
||
<div class="swiper-button-next btnNextSlide1 case"></div>
|
||
<div class="swiper-button-prev btnPrevSlide1 case"></div>
|
||
</section>
|
||
<!--// 2024-07-04 수정 -->
|
||
|
||
<section class="caseService">
|
||
<header>
|
||
<p>궁금하신 점이나<br>문의사항이 있으신가요?</p>
|
||
</header>
|
||
<div>
|
||
<a href="../service/faq">자주하는 질문</a>
|
||
<a href="../service/inquiry-list">문의하러 가기</a>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<!--//footer-->
|
||
<?php
|
||
include($_SERVER['DOCUMENT_ROOT']."/kr/include/footer.php");
|
||
?>
|
||
<!--//footer-->
|
||
<script>
|
||
AOS.init();
|
||
|
||
$(document).on('click','.storeguideTab',function(){
|
||
$(this).toggleClass('on');
|
||
});
|
||
|
||
var swiperTab = new Swiper(".storeguideTab", {
|
||
slidesPerView: "auto",
|
||
freeMode: true,
|
||
});
|
||
|
||
var swiper1 = new Swiper(".swiper1", {
|
||
slidesPerView: "auto",
|
||
//freeMode: true,
|
||
scrollbar: {
|
||
el: ".swiper-scrollbar",
|
||
hide: true,
|
||
},
|
||
navigation: {
|
||
nextEl: ".btnNextSlide1",
|
||
prevEl: ".btnPrevSlide1",
|
||
},
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|
||
|
||
|
||
|
||
|
||
|
||
|