204 lines
11 KiB
PHP
204 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 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/imgUsageList03.jpg" alt="Streaming plus 이용 방법" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<div data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<h3 class="titleCase02">스트리밍 플러스</h3>
|
|
<p class="txtCase01 case">
|
|
차량 내 화면을 통해 방대한 영상 및 음악 콘텐츠 라이브러리를 즐길 수 있는 서비스 입니다.
|
|
<span style="color: #676767; display: block; padding-top: 15px;">※ 스트리밍 서비스의 유료계정이 필요하며, 서비스 이용을 위해 외부 통신사로부터 별도의 통신상품을 구매할 필요가 없습니다.</span>
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="caseUsage">
|
|
<h2 class="titleCase01">이용 방법</h2>
|
|
|
|
<section class="storeGuideItem">
|
|
<header class="case2">
|
|
<h3 class="titleCase03">
|
|
1. Kia Connect 앱 및 내비게이션에서 운전자 - 계정 연동하기
|
|
<a href="https://connect.kia.com/kr/02_guide/profile_non.html" target="_blank">바로가기</a>
|
|
</h3>
|
|
</header>
|
|
</section>
|
|
|
|
<section class="storeGuideItem">
|
|
<header class="case2">
|
|
<h3 class="titleCase03">2. [고음질 스트리밍] 음원 콘텐츠 플랫폼 계정과 연동하기</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/streaming01_1.jpg" alt="Kia Connect 앱에서 '더보기' 화면 내 '연동 서비스'를 선택하세요.">
|
|
<b>STEP 01</b>
|
|
<p class="caseBlack txtCase01">Kia Connect 앱에서 '더보기' 화면 내 '연동 서비스'를 선택하세요.</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/streaming01_2.jpg" alt="'뮤직 스트리밍 서비스'를 클릭합니다.">
|
|
<b>STEP 02</b>
|
|
<p class="caseBlack txtCase01">'뮤직 스트리밍 서비스'를 클릭합니다.</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/streaming01_3.jpg" alt="'추가'를 클릭합니다.">
|
|
<b>STEP 03</b>
|
|
<p class="caseBlack txtCase01">'추가'를 클릭합니다.</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/streaming01_4.jpg" alt="스트리밍 서비스에 로그인합니다.">
|
|
<b>STEP 04</b>
|
|
<p class="caseBlack txtCase01">스트리밍 서비스에 로그인합니다.</p>
|
|
<p>※ 서비스를 이용하려면 음원 서비스의 유료 구독이 필요합니다</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/streaming01_5.jpg" alt="음원 서비스를 이용합니다.">
|
|
<b>STEP 05</b>
|
|
<p class="caseBlack txtCase01">음원 서비스를 이용합니다.</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 class="case2">
|
|
<h3 class="titleCase03">3. [비디오 스트리밍] OTT 콘텐츠 플랫폼 계정과 연동하기</h3>
|
|
<strong>4 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="caseBorder" src="../assets/images/kia/contents/streaming02_1.jpg" alt="내비게이션 홈 화면에서 > '시네마' 카드를 클릭합니다.">
|
|
<b>STEP 01</b>
|
|
<p class="caseBlack txtCase01">내비게이션 홈 화면에서 > '시네마' 카드를 클릭합니다.</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="caseBorder" src="../assets/images/kia/contents/streaming02_2.jpg" alt="계정 연동이 필요한 OTT 플랫폼을 선택합니다.">
|
|
<b>STEP 02</b>
|
|
<p class="caseBlack txtCase01">계정 연동이 필요한 OTT 플랫폼을 선택합니다.</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="caseBorder" src="../assets/images/kia/contents/streaming02_3.jpg" alt="OTT 계정에 로그인합니다.">
|
|
<b>STEP 03</b>
|
|
<p class="caseBlack txtCase01">OTT 계정에 로그인합니다.</p>
|
|
<p>※ 서비스를 이용하려면 OTT 서비스의 유료 구독이 필요합니다.</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="caseBorder" src="../assets/images/kia/contents/streaming02_4.jpg" alt="OTT 플랫폼을 이용합니다.">
|
|
<b>STEP 04</b>
|
|
<p class="caseBlack txtCase01">OTT 플랫폼을 이용합니다.</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 btnNextSlide2"></div>
|
|
<div class="swiper-button-prev btnPrevSlide2"></div>
|
|
|
|
|
|
<div class="swiper-button-next btnNextSlide2"></div>
|
|
<div class="swiper-button-prev btnPrevSlide2"></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>
|
|
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>
|
|
|
|
|
|
|
|
|
|
|
|
|