190 lines
9.4 KiB
PHP
190 lines
9.4 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="/kr/info/buying-Installation-guide-Inquiry">
|
|
<strong>디지털 사양 조회</strong>
|
|
<p>내 차량으로 구매할 수 있는 디지털 사양을 조회해보세요.</p>
|
|
</a>
|
|
<a class="swiper-slide current" href="/kr/info/buying-Installation-guide-purchase">
|
|
<strong>디지털 사양 구매</strong>
|
|
<p>주문 및 결제 방법을 확인하세요.</p>
|
|
</a>
|
|
<a class="swiper-slide" href="/kr/info/buying-Installation-guide-installation">
|
|
<strong>디지털 사양 설치</strong>
|
|
<p>결제 후, 차량에 설치하는 방법을 확인하세요.</p>
|
|
</a>
|
|
<a class="swiper-slide" href="/kr/info/buying-Installation-guide-cancellation">
|
|
<strong>구매 취소</strong>
|
|
<p>결제 완료한 디지털 사양의 구매취소 방법을 확인하세요.</p>
|
|
</a>
|
|
<a class="swiper-slide" href="/kr/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="/kr/info/buying-Installation-guide-Inquiry">디지털 사양 조회</a></li>
|
|
<li><a href="/kr/info/buying-Installation-guide-purchase">디지털 사양 구매</a></li>
|
|
<li><a href="/kr/info/buying-Installation-guide-installation">디지털 사양 설치</a></li>
|
|
<li><a href="/kr/info/buying-Installation-guide-cancellation">구매 취소</a></li>
|
|
<li><a href="/kr/info/buying-Installation-guide-refund">구독 해지</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<section class="storeGuideItem">
|
|
<header>
|
|
<h3 class="titleCase02">주문 결제</h3>
|
|
<strong>5 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/guideStorePurchase01_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/guideStorePurchase01_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/guideStorePurchase01_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/guideStorePurchase01_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/guideStorePurchase01_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 btnNextSlide1"></div>
|
|
<div class="swiper-button-prev btnPrevSlide1"></div>
|
|
</section>
|
|
<section class="caseService">
|
|
<header>
|
|
<p>궁금하신 점이나<br>문의사항이 있으신가요?</p>
|
|
</header>
|
|
<div>
|
|
<a href="/kr/service/faq">자주하는 질문</a>
|
|
<a href="/kr/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",
|
|
},
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|