Merge branch 'feature/intro-youtube' into feature/20240912-premium
This commit is contained in:
@@ -287,6 +287,18 @@
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.comp_1x_w_v_s_e1 .bottom .contents_area.reverse {
|
||||
flex-direction: row;
|
||||
}
|
||||
.comp_1x_w_v_s_e1 .bottom .contents_area.reverse .text_area {
|
||||
padding-left: 5rem;
|
||||
padding-right: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.comp_1x_w_v_s_e1 .bottom .contents_area.reverse .text_area {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.comp_1x_w_v_s_e1 .bottom .contents_area {
|
||||
display: block;
|
||||
@@ -842,14 +854,14 @@
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) {
|
||||
.comp_1x_b_h_s_e1 .comp_body:nth-child(even), .comp_1x_b_h_s_e1 .comp_body.reverse {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area {
|
||||
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area, .comp_1x_b_h_s_e1 .comp_body.reverse .text_area {
|
||||
padding-right: 5rem;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area {
|
||||
.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area, .comp_1x_b_h_s_e1 .comp_body.reverse .text_area {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
@@ -3011,7 +3023,7 @@
|
||||
width: 100%;
|
||||
padding-top: 56.25%;
|
||||
z-index: 4;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
@@ -3022,25 +3034,20 @@
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
max-width: 120rem;
|
||||
padding-top: 43.5%;
|
||||
aspect-ratio: 16/9;
|
||||
}
|
||||
.editorWarp .video_wrap .video-area .video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
}
|
||||
.editorWarp .video_wrap .video-area .video video {
|
||||
display: block;
|
||||
.editorWarp .video_wrap .video-area .video .youtube-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: visible;
|
||||
}
|
||||
.editorWarp .video_wrap .video-area .video video[poster] {
|
||||
height: 100%;
|
||||
.editorWarp .video_wrap .video-area .video iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.editorWarp .video_wrap .video-area .video .btn-play {
|
||||
position: absolute;
|
||||
@@ -3104,6 +3111,7 @@
|
||||
position: absolute;
|
||||
top: -4rem;
|
||||
right: -16rem;
|
||||
z-index: 10;
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
background-color: transparent;
|
||||
@@ -3318,4 +3326,59 @@
|
||||
.editorWarp .visualBg .swiper-button-prev {
|
||||
background: url(../images/common/ico_arrow_l.png) no-repeat center/contain;
|
||||
}
|
||||
.editorWarp .bu {
|
||||
display: block;
|
||||
padding-left: 5.4rem;
|
||||
text-indent: -2rem;
|
||||
}
|
||||
@media (max-width: 501px) {
|
||||
.editorWarp .bu {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.boost.comp_1x_w_v_s_e1 .bottom:before {
|
||||
background-color: rgb(5, 20, 31);
|
||||
}
|
||||
.boost.comp_1x_w_v_s_e1 .bottom .contents_area .image_area {
|
||||
margin-top: 0;
|
||||
}
|
||||
.boost.comp_1x_w_v_s_e1 .contents_area {
|
||||
padding-top: 7rem;
|
||||
}
|
||||
@media (max-width: 501px) {
|
||||
.boost.comp_1x_w_v_s_e1 .contents_area {
|
||||
padding-top: 4rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 501px) {
|
||||
.boost.comp_1x_b_h_s_e1 {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 501px) {
|
||||
.boost.comp_1x_w_v_s_e2 {
|
||||
margin-top: 6rem;
|
||||
}
|
||||
}
|
||||
.boost.comp_1x_w_v_s_e2 .comp_body.full {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.boost.comp_1x_w_v_s_e2 .image_area {
|
||||
max-width: 120rem;
|
||||
height: auto;
|
||||
padding-top: 5rem;
|
||||
margin: 0 auto;
|
||||
}
|
||||
@media (max-width: 501px) {
|
||||
.boost.comp_1x_w_v_s_e2 .image_area {
|
||||
padding-top: 3rem;
|
||||
}
|
||||
}
|
||||
.boost.comp_1x_w_v_s_e2 .image_area img {
|
||||
height: auto;
|
||||
-o-object-fit: inherit;
|
||||
object-fit: inherit;
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
/*# sourceMappingURL=pdp_detail.css.map */
|
||||
File diff suppressed because one or more lines are too long
@@ -301,6 +301,19 @@
|
||||
align-items: center;
|
||||
flex-direction: row-reverse;
|
||||
|
||||
&.reverse {
|
||||
flex-direction: row;
|
||||
|
||||
.text_area {
|
||||
padding-left: 5rem;
|
||||
padding-right: 0;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-width: 768px) {
|
||||
display: block;
|
||||
}
|
||||
@@ -916,7 +929,8 @@
|
||||
|
||||
}
|
||||
|
||||
&:nth-child(even) {
|
||||
&:nth-child(even),
|
||||
&.reverse {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.text_area {
|
||||
@@ -3439,7 +3453,7 @@
|
||||
// transform: translateY(-36rem);
|
||||
padding-top: 56.25%;
|
||||
z-index: 4;
|
||||
background: rgba(0, 0, 0, .8);
|
||||
background: rgba(0, 0, 0, .9);
|
||||
opacity: 1;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
@@ -3450,29 +3464,36 @@
|
||||
transform: translate(-50%, -50%);
|
||||
width: 80%;
|
||||
max-width: 120rem;
|
||||
padding-top: 43.5%;
|
||||
aspect-ratio: 16/9;
|
||||
|
||||
.video {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #000;
|
||||
// aspect-ratio: 16/9;
|
||||
|
||||
video {
|
||||
display: block;
|
||||
.youtube-box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
visibility: visible;
|
||||
|
||||
&[poster] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
iframe {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
// video {
|
||||
// display: block;
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// visibility: visible;
|
||||
|
||||
// &[poster] {
|
||||
// height: 100%;
|
||||
// width: 100%;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .video-ctrl {
|
||||
// display: flex;
|
||||
// align-items: center;
|
||||
@@ -3555,6 +3576,7 @@
|
||||
position: absolute;
|
||||
top: -4rem;
|
||||
right: -16rem;
|
||||
z-index: 10;
|
||||
width: 14rem;
|
||||
height: 14rem;
|
||||
background-color: transparent;
|
||||
@@ -3835,4 +3857,72 @@
|
||||
background: url(../images/common/ico_arrow_l.png) no-repeat center / contain;
|
||||
}
|
||||
}
|
||||
|
||||
.bu {
|
||||
display: block;
|
||||
padding-left: 5.4rem;
|
||||
text-indent: -2rem;
|
||||
|
||||
@include maxmobile {
|
||||
padding-left: 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.boost {
|
||||
&.comp_1x_w_v_s_e1 {
|
||||
.bottom {
|
||||
&:before {
|
||||
background-color: rgba(5, 20, 31, 1);
|
||||
}
|
||||
.contents_area {
|
||||
.image_area {
|
||||
margin-top:0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.contents_area {
|
||||
padding-top:7rem;
|
||||
|
||||
@include maxmobile {
|
||||
padding-top:4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.comp_1x_b_h_s_e1 {
|
||||
|
||||
@include maxmobile {
|
||||
margin-top:6rem;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.comp_1x_w_v_s_e2 {
|
||||
|
||||
@include maxmobile {
|
||||
margin-top:6rem;
|
||||
}
|
||||
|
||||
.comp_body {
|
||||
&.full {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
.image_area {
|
||||
max-width: 120rem;
|
||||
height: auto;
|
||||
padding-top:5rem;
|
||||
margin: 0 auto;
|
||||
|
||||
@include maxmobile {
|
||||
padding-top:3rem;
|
||||
}
|
||||
img {
|
||||
height: auto;
|
||||
object-fit: inherit;
|
||||
border-radius: 0.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
assets/images/kia/contents/boost01_1.jpg
Normal file
BIN
assets/images/kia/contents/boost01_1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
BIN
assets/images/kia/contents/boost01_2.jpg
Normal file
BIN
assets/images/kia/contents/boost01_2.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 108 KiB |
BIN
assets/images/kia/contents/boost01_3.jpg
Normal file
BIN
assets/images/kia/contents/boost01_3.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
BIN
assets/images/kia/contents/imgCaseInfo_boost.jpg
Normal file
BIN
assets/images/kia/contents/imgCaseInfo_boost.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 233 KiB |
BIN
assets/images/kia/contents/imgUsageList09.jpg
Normal file
BIN
assets/images/kia/contents/imgUsageList09.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 748 KiB |
BIN
assets/images/kia/contents/rspa2_contents_07.png
Normal file
BIN
assets/images/kia/contents/rspa2_contents_07.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
assets/images/kia/pdp/boost/boost_contents_01_m.png
Normal file
BIN
assets/images/kia/pdp/boost/boost_contents_01_m.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 672 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 114 KiB After Width: | Height: | Size: 1.6 MiB |
Binary file not shown.
|
Before Width: | Height: | Size: 94 KiB After Width: | Height: | Size: 936 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 725 KiB |
BIN
assets/images/kia/pdp/rspa2/rspa2_contents_08.png
Normal file
BIN
assets/images/kia/pdp/rspa2/rspa2_contents_08.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
assets/images/kia/product-img/producy-temp_boost1.png
Normal file
BIN
assets/images/kia/product-img/producy-temp_boost1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 621 KiB |
@@ -712,33 +712,30 @@ $(document).on("click", ".displayTheme .dtthumb", function () {
|
||||
|
||||
function pdpIntro() {
|
||||
// dpThemeVideo 요소가 존재하는지 확인
|
||||
if ($(".video_wrap video").length > 0) {
|
||||
if ($(".video_wrap").length > 0) {
|
||||
// .video_wrap 내 모든 비디오 요소 선택
|
||||
const videoElements = document.querySelectorAll(".video_wrap video");
|
||||
let cookieVal;
|
||||
$(".editorWarp").addClass("playing");
|
||||
|
||||
const videoWrap = $(".editorWarp .video_wrap");
|
||||
|
||||
const youtubeId = $(".youtube-box").attr("value");
|
||||
const youtubeFrame =
|
||||
'<iframe src="https://www.youtube.com/embed/' +
|
||||
youtubeId +
|
||||
'?autoplay=1&controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-black; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
||||
$(".editorWarp .youtube-box").html(youtubeFrame);
|
||||
|
||||
switch (true) {
|
||||
case $(".displayTheme").length > 0:
|
||||
cookieVal = "displayThemeIntro";
|
||||
$(".video_wrap video").attr(
|
||||
"poster",
|
||||
"../assets/images/kia/pdp/display_theme/intro_poster.png"
|
||||
);
|
||||
break;
|
||||
case $(".inCarGame").length > 0:
|
||||
cookieVal = "inCarGameIntro";
|
||||
$(".video_wrap video").attr(
|
||||
"poster",
|
||||
"../assets/images/kia/pdp/in_car_game/intro_poster.png"
|
||||
);
|
||||
break;
|
||||
case $(".srsPlus").length > 0:
|
||||
cookieVal = "srsPlusIntro";
|
||||
$(".video_wrap video").attr(
|
||||
"poster",
|
||||
"../assets/images/kia/pdp/srs_plus/intro_poster.png"
|
||||
);
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -746,27 +743,60 @@ function pdpIntro() {
|
||||
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
|
||||
);
|
||||
|
||||
$(".btn-intro").css("display", "flex");
|
||||
$(".btn-intro")
|
||||
.css({ display: "flex", opacity: "0", marginTop: "2rem" })
|
||||
.animate({ opacity: "1", marginTop: "0" }, 400);
|
||||
if (getCookie(cookieVal)) {
|
||||
$(".editorWarp").removeClass("playing");
|
||||
$(".video_wrap").css("display", "none");
|
||||
|
||||
$(".close-today input").attr("checked", "checked");
|
||||
videoElements[0].pause();
|
||||
videoElements[0].currentTime = 0;
|
||||
// videoElements[0].pause();
|
||||
// videoElements[0].currentTime = 0;
|
||||
|
||||
$(".close-today").html(
|
||||
`<span onclick="deleteCookie('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
|
||||
);
|
||||
$(".editorWarp .youtube-box").html("");
|
||||
} else {
|
||||
$(".video_wrap").css("display", "flex");
|
||||
$(".video_wrap")
|
||||
.css({ display: "flex", opacity: "0" })
|
||||
.animate({ opacity: "1" }, 200);
|
||||
$(".close-today").html(
|
||||
`<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
|
||||
);
|
||||
$(".editorWarp .youtube-box").html(youtubeFrame);
|
||||
}
|
||||
|
||||
// .btn-intro 버튼 클릭 시 비디오 재생
|
||||
$(document).on("click", ".editorWarp .btn-intro", function () {
|
||||
// console.log('intro 다시 실행');
|
||||
$(".editorWarp").addClass("playing");
|
||||
if (getCookie(cookieVal)) {
|
||||
$(".close-today input").attr("checked", "checked");
|
||||
}
|
||||
$(".editorWarp .youtube-box").html(youtubeFrame);
|
||||
$(videoWrap).show();
|
||||
// if (video) {
|
||||
// video.currentTime = 0;
|
||||
// video.play();
|
||||
// }
|
||||
});
|
||||
|
||||
// .btn-close 버튼 클릭 시 비디오 숨기기
|
||||
$(document).on("click", ".video_wrap .btn-close", function () {
|
||||
// console.log("btn close 실행");
|
||||
$(".editorWarp").removeClass("playing");
|
||||
$(videoWrap).hide();
|
||||
$(".editorWarp .youtube-box").empty();
|
||||
// if (video) {
|
||||
// video.currentTime = 0;
|
||||
// video.pause();
|
||||
// }
|
||||
});
|
||||
|
||||
/*
|
||||
videoElements.forEach((video) => {
|
||||
const videoWrap = $(".editorWarp .video_wrap");
|
||||
const btnIntro = $(".editorWarp .btn-intro");
|
||||
const btnClose = $(".video_wrap .btn-close");
|
||||
const btnPlay = $(".video_wrap .btn-play");
|
||||
@@ -806,32 +836,8 @@ function pdpIntro() {
|
||||
videoWrap.removeClass("paused");
|
||||
});
|
||||
}
|
||||
|
||||
// .btn-intro 버튼 클릭 시 비디오 재생
|
||||
$(document).on("click", ".editorWarp .btn-intro", function () {
|
||||
// console.log('intro 다시 실행');
|
||||
$(".editorWarp").addClass("playing");
|
||||
if (getCookie(cookieVal)) {
|
||||
$(".close-today input").attr("checked", "checked");
|
||||
}
|
||||
$(videoWrap).show();
|
||||
if (video) {
|
||||
video.currentTime = 0;
|
||||
video.play();
|
||||
}
|
||||
});
|
||||
|
||||
// .btn-close 버튼 클릭 시 비디오 숨기기
|
||||
$(document).on("click", ".video_wrap .btn-close", function () {
|
||||
// console.log('btn close 실행');
|
||||
$(".editorWarp").removeClass("playing");
|
||||
$(videoWrap).hide();
|
||||
if (video) {
|
||||
video.currentTime = 0;
|
||||
video.pause();
|
||||
}
|
||||
});
|
||||
});
|
||||
*/
|
||||
|
||||
// 주석 처리된 부분: 버튼 클릭 시 비디오 숨기기
|
||||
// $(btnClose).on('click', function() {
|
||||
|
||||
Binary file not shown.
450
info/product-usage-guide-boost.html
Normal file
450
info/product-usage-guide-boost.html
Normal file
@@ -0,0 +1,450 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>제품상세명 > 제품리스트 > 회사명</title>
|
||||
<!--
|
||||
//위에 순서대로 title 이 변경되어야 합니다.
|
||||
-->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="apple-mobile-web-app-title" content="">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-touch-fullscreen" content="yes">
|
||||
<meta name="title" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="description" content="">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta property="og:title" content="Page Title" />
|
||||
<meta property="og:type" content="Page Contens" />
|
||||
<meta property="og:image" content="../assets/images/kia/meta_img.png" />
|
||||
<meta property="og:site_name" content="Page name" />
|
||||
<meta property="og:description" content="Page Coment" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/jquery-ui.min.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/swiper.min.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/aos.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/basic.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/common.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/contents.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/popup.css?v1" type="text/css" />
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1"></script>
|
||||
<!--상품상세 페이지 css 분리-->
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/service.css?v1" type="text/css" />
|
||||
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
|
||||
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
|
||||
<link rel="icon" href="../assets/images/kia/favicon-16x16.png">
|
||||
<link rel="stylesheet" href="../assets/css/kia/kia-font.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" href="../assets/css/kia/kia.css?v1" type="text/css" />
|
||||
</head>
|
||||
<body id="event">
|
||||
<div class="contentHeaderCase case05"> </div>
|
||||
|
||||
<!--//header-->
|
||||
<div class="hederWarp_n hskey">
|
||||
<div class="headerInner">
|
||||
<div class="gnb">
|
||||
<!-- GNB 로고 영역입니다. -->
|
||||
<div class="logoWrap">
|
||||
<a href="">
|
||||
<i class="logoImg"></i>
|
||||
<!-- <span>
|
||||
Connect Store
|
||||
</span> -->
|
||||
</a>
|
||||
</div>
|
||||
<div class="menuWarp">
|
||||
<div class="mobileMenuTop">
|
||||
<!-- 모바일 슬라이드 메뉴의 로고 영역입니다. -->
|
||||
<div class="mobileLogoWrap">
|
||||
<a href="">
|
||||
<i class="logoImg"></i>
|
||||
<!-- <span>
|
||||
Connect store
|
||||
</span> -->
|
||||
</a>
|
||||
</div>
|
||||
<span class="closeBtn" id="closeBtn">
|
||||
<a href="#"></a>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 모바일 전용 USER 관련 링크 영역입니다. -->
|
||||
<div class="mobileFunc">
|
||||
<button>
|
||||
<span>마이페이지</span>
|
||||
<!--<span>로그인</span>-->
|
||||
</button>
|
||||
<!-- <button>
|
||||
|
||||
<span>장바구니</span>
|
||||
|
||||
</button> -->
|
||||
</div>
|
||||
<!-- 모바일 전용 차량 선택 UI입니다. -->
|
||||
<div class="mobileCarlist">
|
||||
<a href="javascript:void(0)" class="mobilecarItem">
|
||||
<div class="item">
|
||||
<span>MV</span>
|
||||
<span>161어 1660</span>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
</a>
|
||||
<div class="carlistItem">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>KMTKEXXBPMU000081</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>SX</span>
|
||||
<span>161어 1660</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>452허 1234</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PC 모바일 공통 메뉴 영역입니다. -->
|
||||
<ul class="menu">
|
||||
<li class="menuDepth1Wrap">
|
||||
<a href="../kia.html#mainProductList" class="menuDepth1">디지털 사양</a>
|
||||
<div class="menuDepth2Wrap info">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li class="menuDepth2"><a href="../kia.html#mainProductList">디지털 사양</a></li>
|
||||
<li class="menuDepth2"><a href="../info/product-usage-guide.html" class="active">사양별 이용안내</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menuDepth1Wrap">
|
||||
<a href="../info/service-info.html" class="menuDepth1 lower" data-url="../info/service-info.html">스토어 소개</a>
|
||||
<div class="menuDepth2Wrap info">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li class="menuDepth2"><a href="../info/service-info.html">스토어 소개</a></li>
|
||||
<li class="menuDepth2"><a href="../info/registration-guide.html" class="active">스토어 가입안내</a></li>
|
||||
<li class="menuDepth2"><a href="../info/buying-Installation-guide.html">스토어 이용안내</a></li>
|
||||
<li class="menuDepth2"><a href="../service/event-list.html">이벤트</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menuDepth1Wrap">
|
||||
<a href="../info/as-guide.html" class="menuDepth1 lower" data-url="../info/as-guide.html">고객지원</a>
|
||||
<div class="menuDepth2Wrap support">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li class="menuDepth2"><a href="../service/faq.html">자주하는 질문</a></li>
|
||||
<li class="menuDepth2"><a href="../service/inquiry-list.html">문의하기</a></li>
|
||||
<li class="menuDepth2"><a href="../info/as-guide.html" class="active">고객센터 및 AS안내</a></li>
|
||||
<li class="menuDepth2"><a href="../service/notice-list.html">공지사항</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 모바일 전용 추가 메뉴 영역입니다. -->
|
||||
<div class="mobileSubMenu">
|
||||
<a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a>
|
||||
<a href="../member/terms.html">이용약관</a>
|
||||
</div>
|
||||
<!-- 모바일 전용 로그아웃 버튼입니다. -->
|
||||
<!-- <div class="loginBtn oneButton">
|
||||
<button><p>로그아웃</p></button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="func">
|
||||
<!-- PC 전용 차량 선택 UI입니다. -->
|
||||
<div class="carlist">
|
||||
<a href="javascript:void(0)" class="carItem">
|
||||
<span>MV</span>
|
||||
<span>161어 1660</span>
|
||||
</a>
|
||||
<div class="carlistItem">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>KMTKEXXBPMU000081</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>SX</span>
|
||||
<span>161어 1660</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>452허 1234</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PC 전용 로그인 버튼입니다. -->
|
||||
<div class="userLogin">
|
||||
<a href="#">로그인/가입</a>
|
||||
</div>
|
||||
|
||||
<!-- PC 전용 USER 관련 링크 영역입니다. -->
|
||||
<div class="user">
|
||||
<a href="../mypage/my-product-list.html"><i class="icon-user"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- PC 모바일 공통 장바구니 버튼입니다. -->
|
||||
<!-- <div class="cart">
|
||||
<a href="" class="login-alrt"><i class="icon-cart"></i></a>
|
||||
</div> -->
|
||||
|
||||
<!-- 모바일 전용 햄버거 메뉴 버튼입니다. -->
|
||||
<div class="moblieMenu burgurBtn">
|
||||
<span class="burgur" id="burgur">
|
||||
<span class="top-line"></span>
|
||||
<span class="bot-line"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--//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_boost.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">
|
||||
부스트는 향상된 가속성능을 제공합니다.<br>
|
||||
구매 및 설치 후 별다른 설정 없이 활성화 됩니다.<br>
|
||||
(클러스터에서 ‘BOOST ON’을 확인할 수 있습니다.)
|
||||
|
||||
<span style="color: #676767; display: block; padding-top: 15px;">
|
||||
※ AWD 차량만 구매할 수 있습니다.
|
||||
</span>
|
||||
</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>2 STEP</strong>
|
||||
</header>
|
||||
|
||||
<div class="swiper swiper1">
|
||||
<ul class="swiper-wrapper caseWide">
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_1.jpg" alt="설정 > 화면구성 > 클러스터 테마 선택을 선택하고, ‘드라이브 모드’ 또는 ‘스타일C’를 선택">
|
||||
<b>STEP 01</b>
|
||||
<p class="caseBlack txtCase01">설정 > 화면구성 > 클러스터 테마를 선택하고, ‘드라이브 모드 연동’ 또는 ‘스타일C’를 선택합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_2.jpg" alt="‘SPORT’모드로 드라이브 모드를 변경">
|
||||
<b>STEP 02</b>
|
||||
<p class="caseBlack txtCase01">‘SPORT’모드로 드라이브 모드를 변경합니다.</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="../info/product-usage-guide"><p>목록</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!--//footer-->
|
||||
<div class="floating_menu">
|
||||
<a href="../service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문"></a>
|
||||
<a href="../service/inquiry-list.html" class="floating_inquiry"><img src="../assets/images/common/floating_faq.png" alt="문의하기"></a>
|
||||
<a href="javascript:;" class="floating_top"><img src="../assets/images/common/floating_top.png" alt="top"></a>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="kiaInner">
|
||||
<div class="tLeft">
|
||||
<div class="logoSEction">
|
||||
<a href="../kia.html"><img src="../assets/images/kia/kia-logo.svg" alt="kia"></a>
|
||||
</div>
|
||||
<div class="companyInfo">
|
||||
<ul>
|
||||
<li><a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a></li>
|
||||
<li><a href="../member/terms.html">이용약관</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>사업자: 기아주식회사, 대표 송호성, 최준영</li>
|
||||
<li>주소: 서울특별시 서초구 현릉로 12 기아</li>
|
||||
<li>사업자등록번호: 119-81-02316</li>
|
||||
<li>통신판매신고: 2006-07935</li>
|
||||
<li>호스팅제공자: 현대오토에버</li>
|
||||
<li>이메일: KiaConnectStore@kia.com</li>
|
||||
<li>개인정보책임자: 기아정보보호센터 이상영 상무, privacy@kia.com / 080-200-2000</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="csTime">
|
||||
<div>
|
||||
<p>
|
||||
<strong>고객센터: 080-200-2000</strong>
|
||||
</p>
|
||||
<p><span>오류문의: 24시간 연중 무휴</span></p>
|
||||
<p>
|
||||
<span>
|
||||
일반 문의: 주중 08:30 ~ 18:00<br><span style="margin-left:64px;">(토·일·공휴일 휴무)</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="familyBoxWarp">
|
||||
<div class="familyBox">
|
||||
<div class="familyInner">
|
||||
<div class="cont-select">
|
||||
<ul class="list-member">
|
||||
<li><a href="https://www.kia.com/kr" target="_balnk">기아</a></li>
|
||||
<li><a href="https://connect.kia.com/kr" target="_balnk">기아 커넥트</a></li>
|
||||
<li><a href="https://worldwide.kia.com/kr" target="_balnk">Worldwide</a></li>
|
||||
<li><a href="https://www.hyundai.co.kr" target="_balnk">현대자동차그룹</a></li>
|
||||
<li><a href="https://members.kia.com" target="_balnk">기아멤버스</a></li>
|
||||
<li><a href="https://drivingexperience.hyundai.co.kr/" target="_balnk">기아 드라이빙 아카데미</a></li>
|
||||
<li><a href="https://worldwide.kia.com/kr/company/ir" target="_balnk">IR</a></li>
|
||||
<li><a href="http://winwin.hyundai.com/" target="_balnk">동반성장</a></li>
|
||||
<li><a href="https://gbic.hyundai.com/" target="_balnk">글로벌경영연구소</a></li>
|
||||
<li><a href="https://tigers.co.kr" target="_balnk">기아타이거즈</a></li>
|
||||
<li><a href="https://special.kia.com" target="_balnk">기아군용</a></li>
|
||||
</ul>
|
||||
<button class="btn-select">Family Site</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="copyRight"><span>Ⓒ</span> Kia CORP. ALL RIGHTS RESERVED.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popupWarp" style="display:none;">
|
||||
<div class="popInner termsPop" style="display:none;">
|
||||
<div class="popContents">
|
||||
<h1>개인정보 수집/이용 및 기타 동의</h1>
|
||||
<div class="termsCon">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. ManyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many </p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="oneButton">
|
||||
<a href=""><p>닫기</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popInner payInfo" style="display:none;">
|
||||
<div class="popContents">
|
||||
<h1>결제 방법 안내</h1>
|
||||
<div class="payInfoCon">
|
||||
<p>
|
||||
<strong>이미 등록된 결제 방법이 있습니다.<br>(지로, 서울특별시 OO구 OOO로 OO길 OO)<br>해당 결제 방법으로 요금을 납부하시겠습니까?</strong>
|
||||
<span>※ 결제 방법을 다른 카드로 변경하실 경우 CCS앱에서 변경 가능합니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="towButton">
|
||||
<button class="cartBtn leftBtn"><p>취소</p></button>
|
||||
<button class="PurchaseBtn rightBtn"><p>확인</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popInner payInfo" style="display:none;">
|
||||
<div class="popContents">
|
||||
<h1>결제 방법 안내</h1>
|
||||
<div class="payInfoCon">
|
||||
<p>
|
||||
<strong>등록된 결제 방법이 없어 요금제 가입 진행이 불가합니다. 결제 카드 등록은 블루링크 App에서 진행해주시길 바랍니다.</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="oneButton">
|
||||
<a href=""><p>닫기</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--//footer-->
|
||||
<script>
|
||||
AOS.init();
|
||||
|
||||
$(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",
|
||||
},
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
152
info/product-usage-guide-boost.php
Normal file
152
info/product-usage-guide-boost.php
Normal file
@@ -0,0 +1,152 @@
|
||||
<?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_boost.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">
|
||||
부스트는 향상된 가속성능을 제공합니다.<br>
|
||||
구매 및 설치 후 별다른 설정 없이 활성화 됩니다.<br>
|
||||
(클러스터에서 ‘BOOST ON’을 확인할 수 있습니다.)
|
||||
|
||||
<span style="color: #676767; display: block; padding-top: 15px;">
|
||||
※ AWD 차량만 구매할 수 있습니다.
|
||||
</span>
|
||||
</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>2 STEP</strong>
|
||||
</header>
|
||||
|
||||
<div class="swiper swiper1">
|
||||
<ul class="swiper-wrapper caseWide">
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_1.jpg" alt="설정 > 화면구성 > 클러스터 테마 선택을 선택하고, ‘드라이브 모드’ 또는 ‘스타일C’를 선택">
|
||||
<b>STEP 01</b>
|
||||
<p class="caseBlack txtCase01">설정 > 화면구성 > 클러스터 테마를 선택하고, ‘드라이브 모드 연동’ 또는 ‘스타일C’를 선택합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_2.jpg" alt="‘SPORT’모드로 드라이브 모드를 변경">
|
||||
<b>STEP 02</b>
|
||||
<p class="caseBlack txtCase01">‘SPORT’모드로 드라이브 모드를 변경합니다.</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="../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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -254,7 +254,9 @@
|
||||
<a href="#" style="background-image: url('../assets/images/kia/contents/imgUsageList08_comingsoon.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스트리밍 프리미엄 (Coming Soon)</b></a>
|
||||
<!-- [D] 스트리밍 프리미엄 오픈시 버전 -->
|
||||
<!-- <a href="../info/product-usage-guide-streamingPremium.html" style="background-image: url('../assets/images/kia/contents/imgUsageList08.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스트리밍 프리미엄</b></a> -->
|
||||
|
||||
<!-- 2024-08-06 추가 -->
|
||||
<a href="../info/product-usage-guide-boost.html" style="background-image: url('../assets/images/kia/contents/imgUsageList09.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>부스트</b></a>
|
||||
<!--// 2024-08-06 추가 -->
|
||||
<a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList02.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>라이팅 패턴<br>이용방법</b></a>
|
||||
<a href="../info/product-usage-guide-rspa2" style="background-image: url('../assets/images/kia/contents/imgUsageList01.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>원격 스마트 주차 보조 2(RSPA 2)<br>이용방법</b></a>
|
||||
<a href="../info/product-usage-guide-streaming" style="background-image: url('../assets/images/kia/contents/imgUsageList03.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스트리밍 플러스<br>이용방법</b></a>
|
||||
|
||||
@@ -56,7 +56,9 @@
|
||||
<!-- [D] 스트리밍 프리미엄 오픈시 버전 -->
|
||||
<!-- <a href="../info/product-usage-guide-streamingPremium.html" style="background-image: url('../assets/images/kia/contents/imgUsageList08.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스트리밍 프리미엄</b></a> -->
|
||||
|
||||
|
||||
<!-- 2024-08-06 추가 -->
|
||||
<a href="../info/product-usage-guide-boost.html" style="background-image: url('../assets/images/kia/contents/imgUsageList09.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>부스트</b></a>
|
||||
<!--// 2024-08-06 추가 -->
|
||||
<a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList02.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>라이팅 패턴<br>이용방법</b></a>
|
||||
<a href="../info/product-usage-guide-rspa2" style="background-image: url('../assets/images/kia/contents/imgUsageList01.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>원격 스마트 주차 보조 2(RSPA 2)<br>이용방법</b></a>
|
||||
<a href="../info/product-usage-guide-streaming" style="background-image: url('../assets/images/kia/contents/imgUsageList03.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스트리밍 플러스<br>이용방법</b></a>
|
||||
|
||||
@@ -33,8 +33,8 @@
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1"></script>
|
||||
<!--상품상세 페이지 css 분리-->
|
||||
<link rel="stylesheet" charset="UTF-8" href="/kr/assets/css/product.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="/kr/assets/css/pdp_detail.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1" type="text/css" />
|
||||
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
|
||||
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
|
||||
@@ -241,14 +241,13 @@
|
||||
<div class="infoStickyInner">
|
||||
<div class="stickyLeft">
|
||||
<p>
|
||||
<strong>Kia Dynamic LED</strong>
|
||||
<span>Light Type-A</span>
|
||||
<strong>부스트</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div class="stickyRight">
|
||||
<dl>
|
||||
<dt>평생 이용권</dt>
|
||||
<dd>₩ 150,000</dd>
|
||||
<dt>평생 이용</dt>
|
||||
<dd>₩ 500,000</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,7 +262,7 @@
|
||||
<div class="productImg">
|
||||
<div class="swiper productSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp1.png" alt="이미지 상품명"></div>
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp_boost1.png" alt="이미지 상품명"></div>
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></div>
|
||||
<div class="swiper-slide withVideo">
|
||||
<p class="productSmallVideo">
|
||||
@@ -282,79 +281,33 @@
|
||||
<div class="productRight">
|
||||
<div class="optionWarp">
|
||||
<div class="producTitle">
|
||||
<span>차량SW</span>
|
||||
<h1>Kia Dynamic LED</h1>
|
||||
<p>특별하고 빛나는 것을 좋아 하시나요? 일상에 기쁨을 더해주는 빛의 변주, 딜라이팅 라이팅이 당신을 기다립니다.</p>
|
||||
</div>
|
||||
<div class="producOption">
|
||||
<h2>원하시는 상품을 선택해주세요</h2>
|
||||
<div class="optionList">
|
||||
<div class="checkBtn withVideo">
|
||||
<input type="checkbox" name="check" id="checkeOne" value="Light Type-A" checked >
|
||||
<label for="checkeOne">
|
||||
<p class="productSmallVideo">
|
||||
<video loop muted playsinline preload="auto" poster="/kr/assets/images/kia/product-img/producy-temp3.png">
|
||||
<source src="../assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명">
|
||||
</p>
|
||||
<div class="optionText">
|
||||
<p>
|
||||
<strong>Light Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-A</strong>
|
||||
<span>파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkBtn">
|
||||
<input type="checkbox" name="check" id="checkeTwo" value="Light Type-B">
|
||||
<label for="checkeTwo">
|
||||
<p><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></p>
|
||||
<div>
|
||||
<p>
|
||||
<strong>Light Type-B</strong>
|
||||
<span>역동적인 사선 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkBtn disabledBtn">
|
||||
<input type="checkbox" name="check" id="checkeThree" value="Light Type-C" disabled>
|
||||
<label for="checkeThree">
|
||||
<p><img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명"></p>
|
||||
<div>
|
||||
<p>
|
||||
<strong>Light Type-C</strong>
|
||||
<span>부드러운 곡선 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <span>차량SW</span> -->
|
||||
<h1>부스트</h1>
|
||||
<p>그 어느때 보다 빠르게, 때론 거칠게</p>
|
||||
</div>
|
||||
<div class="priceOption">
|
||||
<h2>원하시는 결제 옵션을 선택해주세요</h2>
|
||||
<h2>원하시는 구매 옵션을 선택해주세요</h2>
|
||||
<div class="priceList">
|
||||
<div class="radioBtn">
|
||||
<input type="radio" name="radioBtn" id="radioOne" value="평생이용권 150000">
|
||||
<input type="radio" name="radioBtn" id="radioOne" value="평생이용 500000" checked>
|
||||
<label for="radioOne">
|
||||
<span>평생 이용권</span>
|
||||
<strong>₩ 150,000</strong>
|
||||
<span>평생 이용</span>
|
||||
<strong>₩ 500,000</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radioBtn">
|
||||
<input type="radio" name="radioBtn" id="radioTwo" value="일반 정기 구독 150000">
|
||||
<input type="radio" name="radioBtn" id="radioTwo" value="연 구독 150000">
|
||||
<label for="radioTwo">
|
||||
<span>일반 정기 구독</span>
|
||||
<strong>₩ 12,000/월</strong>
|
||||
<span>연 구독</span>
|
||||
<strong>₩ 120,000/월</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radioBtn disabledBtn">
|
||||
<input type="radio" name="radioBtn" id="radioThree" value="1개월 무료 정기구독 150000" disabled>
|
||||
<input type="radio" name="radioBtn" id="radioThree" value="월 구독 150000" disabled>
|
||||
<label for="radioThree">
|
||||
<span>1개월 무료 정기 구독</span>
|
||||
<span>월 구독</span>
|
||||
<strong>₩ 12,000/월</strong>
|
||||
</label>
|
||||
</div>
|
||||
@@ -363,11 +316,10 @@
|
||||
<div class="priceTotal">
|
||||
<dl class="total">
|
||||
<dt>총 결제 금액</dt>
|
||||
<dd>\ 150,000</dd>
|
||||
<dd>₩ 500,000</dd>
|
||||
</dl>
|
||||
<div class="paymentButton towButton">
|
||||
<button class="cartBtn leftBtn"><p>장바구니</p></button>
|
||||
<button class="PurchaseBtn rightBtn"><p>구매하기</p></button>
|
||||
<div class="paymentButton oneButton">
|
||||
<button class="PurchaseBtn rightBtn"><p>바로구매</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -380,65 +332,58 @@
|
||||
<div class="editorWarp">
|
||||
<div class="editorInner">
|
||||
|
||||
<div class="comp_wide comp_1x_w_v_s_e1">
|
||||
<div class="comp_wide comp_1x_w_v_s_e1 boost">
|
||||
<div class="comp_body">
|
||||
<div class="text_area">
|
||||
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
이제껏 경험해보지 못한 즐거움의 부스트
|
||||
모든 순간에도 두려움 없이
|
||||
</h3>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
다양한 주행 환경 어디에서나 다이나믹한 퍼포먼스를 경험해보세요.
|
||||
더 강력해진 토크는 출발 순간의 폭발적인 속도감과 성능을 이끌어냅니다. 역동적인 퍼포먼스를 경험해보세요.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_01.png" alt="부스트 비쥬얼 이미지" style="object-position:90% 50%;">
|
||||
<div class="image_area visualBg">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_01.png" class="web" alt="부스트 비쥬얼 이미지">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_01_m.png" class="mobile" alt="부스트 비쥬얼 이미지">
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="comp_body">
|
||||
<div class="text_area">
|
||||
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
거침없는 스피드
|
||||
강력한 가속력
|
||||
</h3>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
부스트의 폭발적인 속도감과 성능이 즐거운 드라이빙 경험을 선사합니다. 언제 어디서나 짜릿한 드라이빙 퍼포먼스를 만나보세요!
|
||||
더욱 강력해진 엔진의 토크와 제로백 시간 단축으로 자동차의 속도감이 달라집니다. 이제 더욱 빠르고 짜릿한 느낌을 경험해 보실 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
<div class="contents_area">
|
||||
|
||||
<div class="contents_area reverse">
|
||||
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_02.png" alt="주행 중 운전석 장면">
|
||||
</div>
|
||||
<div class="text_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>
|
||||
빨라진 속도감
|
||||
전방 모터 토크 350Nm
|
||||
</h4>
|
||||
<p>
|
||||
더욱 강력해진 엔진의 토크와 줄어든 제로백은 <br>이전보다 강력한 초반 가속력으로 빠른 주행이 가능해졌습니다.
|
||||
부스트 기능은 엔진의 성능을 최대치로 끌어올립니다.
|
||||
토크 출력이 증가하면서 더욱 파워풀하고 과감한 주행 성능을 즐길 수 있습니다.<br><br>
|
||||
|
||||
※ '부스트' 구매 및 설치 시 전륜 모터 최대 토크 증대 연계하여 '터레인 모드' 성능이 일부 개선됩니다"
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_wide comp_1x_b_h_s_e1">
|
||||
<div class="comp_body">
|
||||
<div class="comp_wide comp_1x_b_h_s_e1 boost">
|
||||
<div class="comp_body reverse">
|
||||
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_03.png" alt="차량 주행 이미지">
|
||||
</div>
|
||||
<div class="text_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>
|
||||
전방 모터 토크 350Nm
|
||||
</h4>
|
||||
<p>
|
||||
부스트 기능은 엔진의 성능을 최대치로 끌어올립니다. 토크 출력이 증가하면서 더욱 파워풀하고 과감한 주행 성능을 즐길 수 있습니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp_body">
|
||||
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_04.png" alt="차량 주행 이미지">
|
||||
</div>
|
||||
<div class="text_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>
|
||||
제로백 5.3초
|
||||
@@ -450,28 +395,27 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_wide comp_1x_w_v_s_e2">
|
||||
<div class="comp_body">
|
||||
<div class="comp_wide comp_1x_w_v_s_e2 boost">
|
||||
<div class="comp_body full">
|
||||
<div class="text_area">
|
||||
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
험로 주행 기능 향상
|
||||
부스트 전용 클러스터 테마
|
||||
</h3>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
진흙이나 모래와 같이 까다로운 지형에서도 안전한 주행이 가능합니다. <br>경사로 최대 40%까지의 언덕에서도 스포티한 드라이빙을 만나볼 수 있습니다.
|
||||
가속에 따라 변화하는 디스플레이는 역동적이고 신나는 주행 경험을 선사합니다.<br>
|
||||
아래 2가지 방법 통해 부스트 전용 클러스터 테마를 활성화 할 수 있습니다.<br>
|
||||
<span class="bu">① 차량 클러스터 그래픽 테마 中 'Style C' 선택</span>
|
||||
<span class="bu">② 차량 클러스터 그래픽 테마 中 '드라이브 모드 연동' 선택 후 차량 클러스터 드라이브 모드에서 '스포츠 모드' 선택</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="icon_area">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_05.png" alt="부스트 비쥬얼 이미지" style="object-position:90% 50%;">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_06.png" alt="부스트 비쥬얼 이미지" style="object-position:90% 50%;">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_04.png" alt="부스트 비쥬얼 이미지">
|
||||
</div>
|
||||
</div>
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/boost/boost_contents_07.png" alt="부스트 비쥬얼 이미지" style="object-position:90% 50%;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="comp_wide comp_2x_b_h_s_e2">
|
||||
<div class="comp_wide comp_2x_b_h_s_e2 boost">
|
||||
<div class="comp_body">
|
||||
<div class="item">
|
||||
<div class="image_area">
|
||||
@@ -503,14 +447,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_1x_b_n_n_e1">
|
||||
<div class="comp_body">
|
||||
<h5>
|
||||
상품이용 영상
|
||||
</h5>
|
||||
<div class="youtubeArea">
|
||||
<iframe src="https://www.youtube.com/embed/7d7dOzdCj20?controls=1&rel=0&showsearch=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
<div class="listbtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-boost"><p>사양 이용안내</p></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -708,6 +647,15 @@
|
||||
</div>
|
||||
</div>
|
||||
<!--//footer-->
|
||||
<script>
|
||||
AOS.init();
|
||||
|
||||
if($(".youtubeArea").hasClass("youtubeArea_pdp") === true) {
|
||||
var youtube_id = $('.youtubeArea_pdp').attr('value');
|
||||
var youtube_frame = '<iframe src="https://www.youtube.com/embed/'+youtube_id+'?controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
||||
$('.youtubeArea_pdp').html(youtube_frame);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@@ -436,7 +436,7 @@
|
||||
<div class="comp_body layer_up">
|
||||
<div class="text_area">
|
||||
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
응원하는 NBA팀의 테마를 차량 디스플레이에 적용해보세요
|
||||
다채로운 NBA팀의 테마를 차량 디스플레이에 적용해보세요
|
||||
</h3>
|
||||
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
아래의 로고를 눌러 미리 차량에 적용된 디자인을 확인 할 수 있습니다.
|
||||
@@ -587,16 +587,8 @@
|
||||
<div class="comp_md layer_up video_wrap">
|
||||
<div class="video-area">
|
||||
<div class="video">
|
||||
|
||||
<video playsinline="playsinline" >
|
||||
<source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="youtube-box" value="TZAmmWX7Kwo"></div>
|
||||
<div class="btn-close">닫기</div>
|
||||
<div class="video-ctrl">
|
||||
<div class="btn-sound on">sound</div>
|
||||
<div class="btn-play play">Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-today">
|
||||
@@ -648,7 +640,7 @@
|
||||
<div class="text_area">
|
||||
<h5>Profile</h5>
|
||||
<p>
|
||||
응원하는 NBA팀의 로고와 칼라를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다.<br>
|
||||
NBA팀의 로고와 칼라를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다.<br>
|
||||
운전자 별로 다른 이미지를 골라 보세요.
|
||||
</p>
|
||||
</div>
|
||||
@@ -748,7 +740,7 @@
|
||||
|
||||
<div class="listbtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-lighting"><p>사양 이용안내</p></a>
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-nba"><p>사양 이용안내</p></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -433,16 +433,8 @@
|
||||
<div class="comp_md layer_up video_wrap">
|
||||
<div class="video-area">
|
||||
<div class="video">
|
||||
|
||||
<video playsinline="playsinline">
|
||||
<source src="../assets/images/kia/pdp/in_car_game/intro.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="youtube-box" value="SBMjdXayjVo"></div>
|
||||
<div class="btn-close">닫기</div>
|
||||
<div class="video-ctrl">
|
||||
<div class="btn-sound on">sound</div>
|
||||
<div class="btn-play play">Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-today">
|
||||
@@ -590,7 +582,7 @@
|
||||
ccNC 차량에 한하여 구매 가능
|
||||
</h5>
|
||||
<p>
|
||||
해당 아이템은 12.5인치 ccNC 플랫폼 적용 차량에 한하여 구입 가능합니다.
|
||||
차세대 인포테인먼트 시스템(ccNC) 장착 차량에 한하여 이용 가능합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -609,7 +601,7 @@
|
||||
|
||||
<div class="listbtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-lighting"><p>사양 이용안내</p></a>
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-incargame"><p>사양 이용안내</p></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
710
product/pdp_rspa2_ev9.html
Normal file
710
product/pdp_rspa2_ev9.html
Normal file
@@ -0,0 +1,710 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>제품상세명 > 제품리스트 > 회사명</title>
|
||||
<!--
|
||||
//위에 순서대로 title 이 변경되어야 합니다.
|
||||
-->
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="apple-mobile-web-app-title" content="">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-touch-fullscreen" content="yes">
|
||||
<meta name="title" content="">
|
||||
<meta name="keywords" content="">
|
||||
<meta name="description" content="">
|
||||
<meta name="format-detection" content="telephone=no">
|
||||
<meta property="og:title" content="Page Title" />
|
||||
<meta property="og:type" content="Page Contens" />
|
||||
<meta property="og:image" content="../assets/images/kia/meta_img.png" />
|
||||
<meta property="og:site_name" content="Page name" />
|
||||
<meta property="og:description" content="Page Coment" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/jquery-ui.min.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/swiper.min.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/aos.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/basic.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/common.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/contents.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/popup.css?v1" type="text/css" />
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
|
||||
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v1"></script>
|
||||
<!--상품상세 페이지 css 분리-->
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1" type="text/css" />
|
||||
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
|
||||
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
|
||||
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png">
|
||||
<link rel="icon" href="../assets/images/kia/favicon-16x16.png">
|
||||
<link rel="stylesheet" href="../assets/css/kia/kia-font.css?v1" type="text/css" />
|
||||
<link rel="stylesheet" href="../assets/css/kia/kia.css?v1" type="text/css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!--//header-->
|
||||
<div class="hederWarp_n noBoder">
|
||||
<div class="headerInner">
|
||||
<div class="gnb">
|
||||
<!-- GNB 로고 영역입니다. -->
|
||||
<div class="logoWrap">
|
||||
<a href="">
|
||||
<i class="logoImg"></i>
|
||||
<!-- <span>
|
||||
Connect Store
|
||||
</span> -->
|
||||
</a>
|
||||
</div>
|
||||
<div class="menuWarp">
|
||||
<div class="mobileMenuTop">
|
||||
<!-- 모바일 슬라이드 메뉴의 로고 영역입니다. -->
|
||||
<div class="mobileLogoWrap">
|
||||
<a href="">
|
||||
<i class="logoImg"></i>
|
||||
<!-- <span>
|
||||
Connect store
|
||||
</span> -->
|
||||
</a>
|
||||
</div>
|
||||
<span class="closeBtn" id="closeBtn">
|
||||
<a href="#"></a>
|
||||
</span>
|
||||
</div>
|
||||
<!-- 모바일 전용 USER 관련 링크 영역입니다. -->
|
||||
<div class="mobileFunc">
|
||||
<button>
|
||||
<span>마이페이지</span>
|
||||
<!--<span>로그인</span>-->
|
||||
</button>
|
||||
<!-- <button>
|
||||
|
||||
<span>장바구니</span>
|
||||
|
||||
</button> -->
|
||||
</div>
|
||||
<!-- 모바일 전용 차량 선택 UI입니다. -->
|
||||
<div class="mobileCarlist">
|
||||
<a href="javascript:void(0)" class="mobilecarItem">
|
||||
<div class="item">
|
||||
<span>MV</span>
|
||||
<span>161어 1660</span>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
</a>
|
||||
<div class="carlistItem">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>KMTKEXXBPMU000081</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>SX</span>
|
||||
<span>161어 1660</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>452허 1234</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PC 모바일 공통 메뉴 영역입니다. -->
|
||||
<ul class="menu">
|
||||
<li class="menuDepth1Wrap">
|
||||
<a href="../kia.html#mainProductList" class="menuDepth1">디지털 사양</a>
|
||||
<div class="menuDepth2Wrap info">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li class="menuDepth2"><a href="../kia.html#mainProductList">디지털 사양</a></li>
|
||||
<li class="menuDepth2"><a href="../info/product-usage-guide.html" class="active">사양별 이용안내</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menuDepth1Wrap">
|
||||
<a href="../info/service-info.html" class="menuDepth1 lower" data-url="../info/service-info.html">스토어 소개</a>
|
||||
<div class="menuDepth2Wrap info">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li class="menuDepth2"><a href="../info/service-info.html">스토어 소개</a></li>
|
||||
<li class="menuDepth2"><a href="../info/registration-guide.html" class="active">스토어 가입안내</a></li>
|
||||
<li class="menuDepth2"><a href="../info/buying-Installation-guide.html">스토어 이용안내</a></li>
|
||||
<li class="menuDepth2"><a href="../service/event-list.html">이벤트</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menuDepth1Wrap">
|
||||
<a href="../info/as-guide.html" class="menuDepth1 lower" data-url="../info/as-guide.html">고객지원</a>
|
||||
<div class="menuDepth2Wrap support">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li class="menuDepth2"><a href="../service/faq.html">자주하는 질문</a></li>
|
||||
<li class="menuDepth2"><a href="../service/inquiry-list.html">문의하기</a></li>
|
||||
<li class="menuDepth2"><a href="../info/as-guide.html" class="active">고객센터 및 AS안내</a></li>
|
||||
<li class="menuDepth2"><a href="../service/notice-list.html">공지사항</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<!-- 모바일 전용 추가 메뉴 영역입니다. -->
|
||||
<div class="mobileSubMenu">
|
||||
<a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a>
|
||||
<a href="../member/terms.html">이용약관</a>
|
||||
</div>
|
||||
<!-- 모바일 전용 로그아웃 버튼입니다. -->
|
||||
<!-- <div class="loginBtn oneButton">
|
||||
<button><p>로그아웃</p></button>
|
||||
</div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="func">
|
||||
<!-- PC 전용 차량 선택 UI입니다. -->
|
||||
<div class="carlist">
|
||||
<a href="javascript:void(0)" class="carItem">
|
||||
<span>MV</span>
|
||||
<span>161어 1660</span>
|
||||
</a>
|
||||
<div class="carlistItem">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
<path d="M7 1L1 10H13L7 1Z" fill="white"/>
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE"/>
|
||||
</svg>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>KMTKEXXBPMU000081</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>SX</span>
|
||||
<span>161어 1660</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>452허 1234</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- PC 전용 로그인 버튼입니다. -->
|
||||
<div class="userLogin">
|
||||
<a href="#">로그인/가입</a>
|
||||
</div>
|
||||
|
||||
<!-- PC 전용 USER 관련 링크 영역입니다. -->
|
||||
<div class="user">
|
||||
<a href="../mypage/my-product-list.html"><i class="icon-user"></i></a>
|
||||
</div>
|
||||
|
||||
<!-- PC 모바일 공통 장바구니 버튼입니다. -->
|
||||
<!-- <div class="cart">
|
||||
<a href="" class="login-alrt"><i class="icon-cart"></i></a>
|
||||
</div> -->
|
||||
|
||||
<!-- 모바일 전용 햄버거 메뉴 버튼입니다. -->
|
||||
<div class="moblieMenu burgurBtn">
|
||||
<span class="burgur" id="burgur">
|
||||
<span class="top-line"></span>
|
||||
<span class="bot-line"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--//header-->
|
||||
|
||||
<!--//sticky-->
|
||||
<div class="infoSticky">
|
||||
<div class="infoStickyInner">
|
||||
<div class="stickyLeft">
|
||||
<p>
|
||||
<strong>Kia Dynamic LED</strong>
|
||||
<span>Light Type-A</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="stickyRight">
|
||||
<dl>
|
||||
<dt>평생 이용권</dt>
|
||||
<dd>₩ 150,000</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--//sticky-->
|
||||
|
||||
|
||||
<!--//content-warp-->
|
||||
<div class="contentWarp">
|
||||
<div class="productView">
|
||||
<div class="productLeft">
|
||||
<div class="productImg">
|
||||
<div class="swiper productSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp1.png" alt="이미지 상품명"></div>
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></div>
|
||||
<div class="swiper-slide withVideo">
|
||||
<p class="productSmallVideo">
|
||||
<video loop muted playsinline preload="auto" poster="/kr/assets/images/kia/product-img/producy-temp3.png">
|
||||
<source src="../assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명">
|
||||
</p>
|
||||
</div>
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp4.png" alt="이미지 상품명"></div>
|
||||
</div>
|
||||
<div class="swiper-pagination"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productRight">
|
||||
<div class="optionWarp">
|
||||
<div class="producTitle">
|
||||
<span>차량SW</span>
|
||||
<h1>Kia Dynamic LED</h1>
|
||||
<p>특별하고 빛나는 것을 좋아 하시나요? 일상에 기쁨을 더해주는 빛의 변주, 딜라이팅 라이팅이 당신을 기다립니다.</p>
|
||||
</div>
|
||||
<div class="producOption">
|
||||
<h2>원하시는 상품을 선택해주세요</h2>
|
||||
<div class="optionList">
|
||||
<div class="checkBtn withVideo">
|
||||
<input type="checkbox" name="check" id="checkeOne" value="Light Type-A" checked >
|
||||
<label for="checkeOne">
|
||||
<p class="productSmallVideo">
|
||||
<video loop muted playsinline preload="auto" poster="/kr/assets/images/kia/product-img/producy-temp3.png">
|
||||
<source src="../assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명">
|
||||
</p>
|
||||
<div class="optionText">
|
||||
<p>
|
||||
<strong>Light Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-A</strong>
|
||||
<span>파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkBtn">
|
||||
<input type="checkbox" name="check" id="checkeTwo" value="Light Type-B">
|
||||
<label for="checkeTwo">
|
||||
<p><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></p>
|
||||
<div>
|
||||
<p>
|
||||
<strong>Light Type-B</strong>
|
||||
<span>역동적인 사선 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkBtn disabledBtn">
|
||||
<input type="checkbox" name="check" id="checkeThree" value="Light Type-C" disabled>
|
||||
<label for="checkeThree">
|
||||
<p><img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명"></p>
|
||||
<div>
|
||||
<p>
|
||||
<strong>Light Type-C</strong>
|
||||
<span>부드러운 곡선 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="priceOption">
|
||||
<h2>원하시는 결제 옵션을 선택해주세요</h2>
|
||||
<div class="priceList">
|
||||
<div class="radioBtn">
|
||||
<input type="radio" name="radioBtn" id="radioOne" value="평생이용권 150000">
|
||||
<label for="radioOne">
|
||||
<span>평생 이용권</span>
|
||||
<strong>₩ 150,000</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radioBtn">
|
||||
<input type="radio" name="radioBtn" id="radioTwo" value="일반 정기 구독 150000">
|
||||
<label for="radioTwo">
|
||||
<span>일반 정기 구독</span>
|
||||
<strong>₩ 12,000/월</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radioBtn disabledBtn">
|
||||
<input type="radio" name="radioBtn" id="radioThree" value="1개월 무료 정기구독 150000" disabled>
|
||||
<label for="radioThree">
|
||||
<span>1개월 무료 정기 구독</span>
|
||||
<strong>₩ 12,000/월</strong>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="priceTotal">
|
||||
<dl class="total">
|
||||
<dt>총 결제 금액</dt>
|
||||
<dd>\ 150,000</dd>
|
||||
</dl>
|
||||
<div class="paymentButton towButton">
|
||||
<button class="cartBtn leftBtn"><p>장바구니</p></button>
|
||||
<button class="PurchaseBtn rightBtn"><p>구매하기</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--//content-warp-->
|
||||
|
||||
<!--에디터 영역-->
|
||||
<div class="editorWarp">
|
||||
<div class="editorInner">
|
||||
|
||||
<div class="comp_wide comp_1x_w_v_o_b">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/rspa2/rspa2_contents_01.png" alt="RSPA2 주차 장면 이미지" style="object-position:50% 50%;">
|
||||
</div>
|
||||
<div class="comp_body layer_up">
|
||||
<div class="text_area">
|
||||
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
편리하고 간편한 원격 스마트 주차 보조 2
|
||||
</h3>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
버튼 하나로 이루어지는 쉬운 주차를 경험해보세요.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp_body bottom">
|
||||
<div class="text_area">
|
||||
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
버튼 하나로 간편한 주차
|
||||
</h3>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
그 어떤 주차 공간에서도 주차를 수월하게 도와주는 원격 스마트 주차 보조 2는 <br>간단한 버튼 조작만으로 깔끔하고 안전한 주차를 수행합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="comp_wide comp_2x_b_v_s_e1">
|
||||
<div class="comp_body">
|
||||
<div class="half_area">
|
||||
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<img src="../assets/images/kia/pdp/rspa2/rspa2_contents_02.png" alt="RSPA2 주차 장면 이미지">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
스마트 주차 기능 (원격 포함)
|
||||
</h4>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
스마트키로 간편하게 원격작동이 가능한 최첨단 스마트 주차 기능을 체험해보세요. <br>차량에 탑승하지 않아도 쉬운 주차를 할 수 있도록 도와줍니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="half_area">
|
||||
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<img src="../assets/images/kia/pdp/rspa2/rspa2_contents_03.png" alt="RSPA2 주차 장면 이미지">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
주차선 인식 기능
|
||||
</h4>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
업그레이드 된 주차선 인식 기능은, 전보다 높은 수준의 정확성과 편리성을 갖춘 원격 주차를 가능하게 합니다. <br>차량에 탑재된 광각 카메라와 초음파센서가 주차 공간과 주차선을 탐색하고, 인식된 정보를 활용하여 더욱 정확한 주차를 지원합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="comp_wide comp_1x_b_h_s_e1">
|
||||
<div class="comp_body">
|
||||
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<img src="../assets/images/kia/pdp/rspa2/rspa2_contents_04.png" alt="RSPA2 주차 장면 이미지">
|
||||
</div>
|
||||
<div class="text_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>
|
||||
원격 전후진 기능
|
||||
</h4>
|
||||
<p>
|
||||
주차 공간이 좁아 승하차의 불편함을 겪을 때, 차량 내부와 외부에서 모두 손쉽게 원격 제어로 전/후진이 가능합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="comp_body">
|
||||
<div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<img src="../assets/images/kia/pdp/rspa2/rspa2_contents_05.png" alt="RSPA2 주차 장면 이미지">
|
||||
</div>
|
||||
<div class="text_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>
|
||||
스마트 출차 기능
|
||||
</h4>
|
||||
<p>
|
||||
공간이 협소한 평행 주차 상황에서 스마트 출차 기능을 활용하여
|
||||
쉽고 간편하게 빠져나갈 수 있습니다. <br>출차 기능에 포함된 전방/측방 주차 충돌방지 보조 기능은 주변의
|
||||
충돌 위험을 감지하고 필요시 자동으로 제동하여 충돌을 방지합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_wide comp_2x_b_h_s_e2">
|
||||
<div class="comp_body">
|
||||
<div class="item">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/rspa2/rspa2_contents_08.png" alt="아이콘 이미지">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>
|
||||
The 2025 EV9 차량에 한해서 무료 제공
|
||||
</h5>
|
||||
<p>
|
||||
무료 제공 상품은 평생이용 형태로 제공됩니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="image_area">
|
||||
<img src="../assets/images/kia/pdp/rspa2/rspa2_contents_07.png" alt="아이콘 이미지">
|
||||
</div>
|
||||
<div class="text_area">
|
||||
<h5>
|
||||
GT-Line 기본 포함
|
||||
</h5>
|
||||
<p>
|
||||
GT-Line에는 기본적으로 해당 아이템이 포함되어 있습니다. 참고하시길 바랍니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_1x_b_n_n_e1">
|
||||
<div class="comp_body">
|
||||
<h5>
|
||||
상품이용 영상
|
||||
</h5>
|
||||
<div class="youtubeArea">
|
||||
<iframe src="https://www.youtube.com/embed/wAQbMgXQFvY?controls=1&rel=0&showsearch=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--에디터 영역-->
|
||||
|
||||
|
||||
<!--관련상품-->
|
||||
<div class="relatedProducts">
|
||||
<div class="relatedInnder">
|
||||
<h2>관련상품</h2>
|
||||
<div class="relatedList">
|
||||
<a href="">
|
||||
<div class="relatedListItem">
|
||||
<div class="itemInner">
|
||||
<div class="itemLeft">
|
||||
<p class="img"><img src="../assets/images/kia/product-img/producy-temp5.png" alt="이미지 상품명"></p>
|
||||
<div class="productName">
|
||||
<dl>
|
||||
<dt>Kia Dynamic LEDKia Dynamic LEDKia Dynamic LEDKia Dynamic LEDKia Dynamic LEDLEDKia Dynamic LEDLEDKia Dynamic LED</dt>
|
||||
<dd>더 특별하 게 더 반짝이게더 특별하 게 더 반짝이게더 특별하 게 더 반짝이게더 특별하 게 더 반짝이게더 특별하 게 더 반짝이게더 특별하 게 더 반짝이게특별하 게 더 반짝이게더 특별하 게 더 반짝이게특별하 게 더 반짝이게더 특별하 게 더 반짝이게특별하 게 더 반짝이게더 특별하 게 더 반짝이게</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productPrice">
|
||||
<dl>
|
||||
<dt>평생 이용권</dt>
|
||||
<dd>\520,000</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>일반 정기 구독</dt>
|
||||
<dd>\12,000/월</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a href="">
|
||||
<div class="relatedListItem">
|
||||
<div class="itemInner">
|
||||
<div class="itemLeft">
|
||||
<p class="img"><img src="../assets/images/kia/product-img/producy-temp5.png" alt="이미지 상품명"></p>
|
||||
<div class="productName">
|
||||
<dl>
|
||||
<dt>Kia Dynamic LEDKia Dynamic </dt>
|
||||
<dd>더 특별하 게 더 반짝이게</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
<div class="productPrice">
|
||||
<dl>
|
||||
<dt>평생 이용권</dt>
|
||||
<dd>\520,000</dd>
|
||||
</dl>
|
||||
<dl>
|
||||
<dt>일반 정기 구독</dt>
|
||||
<dd>\12,000/월</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--관련상품-->
|
||||
|
||||
|
||||
|
||||
|
||||
<!--//footer-->
|
||||
<div class="floating_menu">
|
||||
<a href="../service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문"></a>
|
||||
<a href="../service/inquiry-list.html" class="floating_inquiry"><img src="../assets/images/common/floating_faq.png" alt="문의하기"></a>
|
||||
<a href="javascript:;" class="floating_top"><img src="../assets/images/common/floating_top.png" alt="top"></a>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="kiaInner">
|
||||
<div class="tLeft">
|
||||
<div class="logoSEction">
|
||||
<a href="../kia.html"><img src="../assets/images/kia/kia-logo.svg" alt="kia"></a>
|
||||
</div>
|
||||
<div class="companyInfo">
|
||||
<ul>
|
||||
<li><a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a></li>
|
||||
<li><a href="../member/terms.html">이용약관</a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li>사업자: 기아주식회사, 대표 송호성, 최준영</li>
|
||||
<li>주소: 서울특별시 서초구 현릉로 12 기아</li>
|
||||
<li>사업자등록번호: 119-81-02316</li>
|
||||
<li>통신판매신고: 2006-07935</li>
|
||||
<li>호스팅제공자: 현대오토에버</li>
|
||||
<li>이메일: KiaConnectStore@kia.com</li>
|
||||
<li>개인정보책임자: 기아정보보호센터 이상영 상무, privacy@kia.com / 080-200-2000</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="csTime">
|
||||
<div>
|
||||
<p>
|
||||
<strong>고객센터: 080-200-2000</strong>
|
||||
</p>
|
||||
<p><span>오류문의: 24시간 연중 무휴</span></p>
|
||||
<p>
|
||||
<span>
|
||||
일반 문의: 주중 08:30 ~ 18:00<br><span style="margin-left:64px;">(토·일·공휴일 휴무)</span>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
<div class="familyBoxWarp">
|
||||
<div class="familyBox">
|
||||
<div class="familyInner">
|
||||
<div class="cont-select">
|
||||
<ul class="list-member">
|
||||
<li><a href="https://www.kia.com/kr" target="_balnk">기아</a></li>
|
||||
<li><a href="https://connect.kia.com/kr" target="_balnk">기아 커넥트</a></li>
|
||||
<li><a href="https://worldwide.kia.com/kr" target="_balnk">Worldwide</a></li>
|
||||
<li><a href="https://www.hyundai.co.kr" target="_balnk">현대자동차그룹</a></li>
|
||||
<li><a href="https://members.kia.com" target="_balnk">기아멤버스</a></li>
|
||||
<li><a href="https://drivingexperience.hyundai.co.kr/" target="_balnk">기아 드라이빙 아카데미</a></li>
|
||||
<li><a href="https://worldwide.kia.com/kr/company/ir" target="_balnk">IR</a></li>
|
||||
<li><a href="http://winwin.hyundai.com/" target="_balnk">동반성장</a></li>
|
||||
<li><a href="https://gbic.hyundai.com/" target="_balnk">글로벌경영연구소</a></li>
|
||||
<li><a href="https://tigers.co.kr" target="_balnk">기아타이거즈</a></li>
|
||||
<li><a href="https://special.kia.com" target="_balnk">기아군용</a></li>
|
||||
</ul>
|
||||
<button class="btn-select">Family Site</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="copyRight"><span>Ⓒ</span> Kia CORP. ALL RIGHTS RESERVED.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popupWarp" style="display:none;">
|
||||
<div class="popInner termsPop" style="display:none;">
|
||||
<div class="popContents">
|
||||
<h1>개인정보 수집/이용 및 기타 동의</h1>
|
||||
<div class="termsCon">
|
||||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. ManyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many </p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="oneButton">
|
||||
<a href=""><p>닫기</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popInner payInfo" style="display:none;">
|
||||
<div class="popContents">
|
||||
<h1>결제 방법 안내</h1>
|
||||
<div class="payInfoCon">
|
||||
<p>
|
||||
<strong>이미 등록된 결제 방법이 있습니다.<br>(지로, 서울특별시 OO구 OOO로 OO길 OO)<br>해당 결제 방법으로 요금을 납부하시겠습니까?</strong>
|
||||
<span>※ 결제 방법을 다른 카드로 변경하실 경우 CCS앱에서 변경 가능합니다.</span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="towButton">
|
||||
<button class="cartBtn leftBtn"><p>취소</p></button>
|
||||
<button class="PurchaseBtn rightBtn"><p>확인</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="popInner payInfo" style="display:none;">
|
||||
<div class="popContents">
|
||||
<h1>결제 방법 안내</h1>
|
||||
<div class="payInfoCon">
|
||||
<p>
|
||||
<strong>등록된 결제 방법이 없어 요금제 가입 진행이 불가합니다. 결제 카드 등록은 블루링크 App에서 진행해주시길 바랍니다.</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="oneButton">
|
||||
<a href=""><p>닫기</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--//footer-->
|
||||
<script>
|
||||
AOS.init();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -348,16 +348,8 @@
|
||||
<div class="comp_md layer_up video_wrap">
|
||||
<div class="video-area">
|
||||
<div class="video">
|
||||
|
||||
<video playsinline="playsinline">
|
||||
<source src="../assets/images/kia/pdp/srs_plus/intro.mp4" type="video/mp4">
|
||||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||||
</video>
|
||||
<div class="youtube-box" value="QTNIYFnfw_I"></div>
|
||||
<div class="btn-close">닫기</div>
|
||||
<div class="video-ctrl">
|
||||
<div class="btn-sound on">sound</div>
|
||||
<div class="btn-play play">Play</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="close-today">
|
||||
@@ -376,9 +368,9 @@
|
||||
내비게이션 정보를 활용하여 더욱 안전하고 편리해진 EV 주행
|
||||
</h4>
|
||||
<p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800" class="aos-init aos-animate">
|
||||
스마트 회생 시스템 플러스는 기존 스마트 회생 시스템 대비 내비게이션 연동 기능이 확대되었습니다.
|
||||
내비게이션과 연동 된 다양한 주행상황에서 자동으로 회생제동량을 조절하여 적절한 속도로 감속할 수 있으며,
|
||||
교통 체증 및 도심 주행에서의 브레이크 조작을 줄여주어, 주행 중 피로를 덜어드립니다.
|
||||
스마트 회생 시스템 플러스는 기존 스마트 회생 시스템 대비 내비게이션 연동 기능이 확대되었습니다.
|
||||
내비게이션과 연동 된 다양한 주행상황에서 자동으로 회생제동량을 조절하여 적절한 속도로 감속할 수 있으며, 교통 체증 및 도심 주행에서의 브레이크 조작을 줄여주어,
|
||||
주행 중 피로를 덜어드립니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -394,7 +386,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="comp_wide comp_1x_b_h_s_e1 srsPlus">
|
||||
<div class="comp_wide comp_1x_b_h_s_e1 srsPlus" style="margin-top:4rem;">
|
||||
|
||||
<div class="comp_body">
|
||||
<div class="image_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
@@ -403,8 +395,8 @@
|
||||
<div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>교차로 자동 감속</h4>
|
||||
<p>
|
||||
교차로에서 좌/우회전 하는 경우 상황에 맞는 속도로 감속.
|
||||
좌회전의 경우 내비 경로 설정 시, 주행 중인 차선 개수(4차선 도로 등)에 따라 감속 목표 속도가 달라짐
|
||||
교차로에서 좌/우회전 하는 경우 상황에 맞는 속도로 감속합니다. 주행 중인 차선 개수(4차선 도로 등) 및 회전 각도에 따라
|
||||
감속 목표 속도가 달라집니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -415,7 +407,7 @@
|
||||
<div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>회전교차로 감속</h4>
|
||||
<p>
|
||||
회전교차로 진입 직전에 적정 속도에 도달하게끔 자동 감속
|
||||
회전교차로 진입 직전에 적정 속도에 도달하게끔 자동 감속 합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -426,7 +418,7 @@
|
||||
<div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>방지턱 자동 감속 [국내]</h4>
|
||||
<p>
|
||||
방지턱을 넘기 전에 적정 속도로 감속
|
||||
방지턱을 넘기 전에 적정 속도로 감속 합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -437,7 +429,7 @@
|
||||
<div class="text_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<h4>커브 도로 자동 감속</h4>
|
||||
<p>
|
||||
급한 커브 도로에서 적정 속도로 감속
|
||||
급한 커브 도로에서 적정 속도로 감속 합니다.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -467,7 +459,9 @@
|
||||
구매 가능 여부는 차종 별 상이
|
||||
</h5>
|
||||
<p>
|
||||
상품 구매 및 이용가능 여부는 차량 하드웨어 구성 및 제어기의 펌웨어 버전에 따라 상이할 수 있으며, 로그인 후 확인하실 수 있습니다.<br>
|
||||
상품 구매 및 이용가능 여부는 차량 하드웨어 구성 및 제어기의 펌웨어 버전에 따라 상이할 수 있으며, 로그인 후 확인하실 수
|
||||
있습니다.
|
||||
<br>
|
||||
(24년 7월 기준 EV3 차량에 구매 가능합니다.)
|
||||
</p>
|
||||
</div>
|
||||
@@ -488,7 +482,7 @@
|
||||
|
||||
<div class="listbtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-lighting"><p>사양 이용안내</p></a>
|
||||
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-srs"><p>사양 이용안내</p></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user