149 lines
6.6 KiB
PHP
149 lines
6.6 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/imgCaseInfo_game.jpg" alt="아케이드 게임 이용 방법" 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">
|
|
디스플레이 터치 기반의 아케이드 게임 8종을 경험하실 수 있습니다.<br>사양 구매후 별도 다운로드 및 설치 없이 차량 인포테인먼트 시스템 내 “게임”메뉴를 통해 이용 가능합니다.
|
|
</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>
|
|
|
|
<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/incar_game01_1.jpg" alt="사양 구매 후, 게임 카드에 재진입. 홈 화면 > 메뉴 > 게임">
|
|
<b>STEP 01</b>
|
|
<p class="caseBlack txtCase01">사양 구매 후, 게임 카드에 재진입 합니다. <br>홈 화면 > 메뉴 > 게임 <br>(별도의 설치과정이 필요하지 않습니다)</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img class="noBorder" src="../assets/images/kia/contents/incar_game01_2.jpg" alt="'좌우로 스크롤링하여 게임을 탐색/선택">
|
|
<b>STEP 02</b>
|
|
<p class="caseBlack txtCase01">좌우로 스크롤링하여 게임을 탐색/선택합니다. <br>가장 최근에 실행한 게임이 가장 왼쪽에 나타납니다.</p>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<img class="noBorder" src="../assets/images/kia/contents/incar_game01_3.jpg" alt="게임에 대한 설명을 참고한 후 게임을 실행">
|
|
<b>STEP 03</b>
|
|
<p class="caseBlack txtCase01">게임에 대한 설명을 참고한 후 게임을 실행합니다.</p>
|
|
</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>
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|