292 lines
16 KiB
PHP
292 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" href="../info/buying-Installation-guide-installation">
|
|
<strong>디지털 사양 설치</strong>
|
|
<p>결제 후, 차량에 설치하는 방법을 확인하세요.</p>
|
|
</a>
|
|
<a class="swiper-slide current" 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>
|
|
|
|
<section class="storeGuideItem">
|
|
<header>
|
|
<h3 class="titleCase02">1단계. 구매 사양 조회</h3>
|
|
<strong>3 STEP</strong>
|
|
</header>
|
|
|
|
<div class="swiper swiper1">
|
|
<ul class="swiper-wrapper">
|
|
<li class="swiper-slide" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<img src="../assets/images/kia/contents/guideStoreCancel01_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 src="../assets/images/kia/contents/guideStoreCancel01_2.jpg" alt="이용중인 사양을 조회하세요.">
|
|
<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 src="../assets/images/kia/contents/guideStoreCancel01_3.jpg" alt="상세 조회를 원하는 사양을 선택하세요.">
|
|
<b>STEP 03</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 src="../assets/images/kia/contents/guideStoreCancel01_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 src="../assets/images/kia/contents/guideStoreCancel01_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 src="../assets/images/kia/contents/guideStoreCancel01_6.jpg" alt="구매 취소 신청이 완료되었음을 확인하세요.">
|
|
<b>STEP 06</b>
|
|
<p class="caseBlack">구매 취소 신청이 완료되었음을 확인하세요.</p>
|
|
<p>(차량에서 사양이 삭제된 후, 환불처리가 완료됩니다.)</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"></div>
|
|
<div class="swiper-button-prev btnPrevSlide1"></div>
|
|
</section>
|
|
|
|
<section class="storeGuideItem">
|
|
<header>
|
|
<h3 class="titleCase02">2단계. 디지털 사양 삭제</h3>
|
|
<strong>5 STEP</strong>
|
|
</header>
|
|
|
|
<div class="swiper swiper4">
|
|
<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="../assets/images/kia/contents/guideStoreCancelNew_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="../assets/images/kia/contents/guideStoreCancelNew_2.jpg" alt="삭제 진행을 위해 인포테인먼트 안내 메시지 확인 후 시동을 꺼주세요.">
|
|
<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="../assets/images/kia/contents/guideStoreCancelNew_3.jpg" alt="디지털 사양을 삭제합니다. 소요시간은 네트워크 환경에 따라 달라질 수 있습니다.">
|
|
<b>STEP 03</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="../assets/images/kia/contents/guideStoreCancelNew_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="../assets/images/kia/contents/guideStoreCancelNew_5.jpg" alt="시동을 키고 이용 종료 안내 메시지를 확인하세요.">
|
|
<b>STEP 05</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 btnNextSlide4 case"></div>
|
|
<div class="swiper-button-prev btnPrevSlide4 case"></div>
|
|
</section>
|
|
|
|
|
|
<section class="storeGuideItem swiper">
|
|
<header>
|
|
<h3 class="titleCase02">3단계. 취소 이력 조회</h3>
|
|
<strong>2 STEP</strong>
|
|
</header>
|
|
|
|
<div class="swiper swiper3">
|
|
<ul class="swiper-wrapper" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<li class="swiper-slide">
|
|
<img src="../assets/images/kia/contents/guideStoreCancel03_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 src="../assets/images/kia/contents/guideStoreCancel03_2.jpg" alt="결제 상세 내역에서 구매 취소가 완료된 것을 확인할 수 있습니다.">
|
|
<b>STEP 02</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 btnNextSlide3"></div>
|
|
<div class="swiper-button-prev btnPrevSlide3"></div>
|
|
</section>
|
|
|
|
|
|
|
|
<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>
|
|
$(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",
|
|
},
|
|
});
|
|
|
|
var swiper3 = new Swiper(".swiper3", {
|
|
slidesPerView: "auto",
|
|
//freeMode: true,
|
|
scrollbar: {
|
|
el: ".swiper-scrollbar",
|
|
hide: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".btnNextSlide3",
|
|
prevEl: ".btnPrevSlide3",
|
|
},
|
|
});
|
|
|
|
var swiper4 = new Swiper(".swiper4", {
|
|
slidesPerView: "auto",
|
|
//freeMode: true,
|
|
scrollbar: {
|
|
el: ".swiper-scrollbar",
|
|
hide: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".btnNextSlide4",
|
|
prevEl: ".btnPrevSlide4",
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|