227 lines
11 KiB
PHP
227 lines
11 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 current" 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" 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">연동된 차량이 있는 경우</h3>
|
|
<strong>3 STEP</strong>
|
|
</header>
|
|
|
|
<div class="swiper swiper2">
|
|
<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/guideStoreInquiry02_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/guideStoreInquiry02_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/guideStoreInquiry02_3.jpg" alt="차량 변경 완료 후 조회">
|
|
<b>STEP 03</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"></div>
|
|
<div class="swiper-button-prev btnPrevSlide1"></div>
|
|
</section>
|
|
|
|
<section class="storeGuideItem">
|
|
<header>
|
|
<h3 class="titleCase02">연동된 차량이 없는 경우</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/guideStoreInquiry01_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/guideStoreInquiry01_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/guideStoreInquiry01_3.jpg" alt="상품 상세 정보 조회">
|
|
<b>STEP 03</b>
|
|
<strong>세부 기능, 구매 옵션, 가격 등을 확인할 수 있습니다.</strong>
|
|
<p class="caseBlack">단, 구매를 위해서는 Kia Connect 앱을 통해 연동된 차량이 존재해야합니다.</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="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 swiper2 = new Swiper(".swiper2", {
|
|
slidesPerView: "auto",
|
|
//freeMode: true,
|
|
scrollbar: {
|
|
el: ".swiper-scrollbar",
|
|
hide: true,
|
|
},
|
|
navigation: {
|
|
nextEl: ".btnNextSlide2",
|
|
prevEl: ".btnPrevSlide2",
|
|
},
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|