486 lines
24 KiB
PHP
486 lines
24 KiB
PHP
<?php $bland_code = "kia"; ?>
|
|
<!--
|
|
//메타의 각 브랜드 별 코드는 hyundai,genesis 입니다.
|
|
//브랜드 별 경로에 따라 해당 코드를 변경해주세요.
|
|
-->
|
|
<?php $gnbStyleCode = "noBoder"; ?>
|
|
<!--
|
|
페이지 별 붙박이 코드입니다. 해당 변수는 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/product.css?v1" type="text/css" />
|
|
<link rel="stylesheet" charset="UTF-8" href="/kr/assets/css/pdp_detail.css?v1" type="text/css" />
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/style.php");
|
|
?>
|
|
</head>
|
|
<body>
|
|
|
|
<!--//header-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/header_new.php");
|
|
?>
|
|
<!--//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="/kr/assets/images/kia/product-img/producy-temp1.png" alt="이미지 상품명"></div>
|
|
<div class="swiper-slide"><img src="/kr/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="/kr/assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
|
|
</video>
|
|
<img src="/kr/assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명">
|
|
</p>
|
|
</div>
|
|
<div class="swiper-slide"><img src="/kr/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="/kr/assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
|
|
</video>
|
|
<img src="/kr/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="/kr/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="/kr/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_s_eS">
|
|
<div class="comp_top">
|
|
<div class="comp_body">
|
|
<div class="text_area">
|
|
<h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
누구보다 돋보이게 빛나고, <br>차별화 된 라이팅 패턴
|
|
</h4>
|
|
<div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
운전자가 다가가면 다이나믹하게 반응하는 라이팅 패턴으로 <br>내 차만의 특별한 존재감을 확인해 보세요.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="movieArea">
|
|
<video class="lighting_pattern_movie" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height:100%;position: absolute;left:0; top:0;object-fit: cover; background-color:#000000;">
|
|
<source id="pdp_lighting_pattern_movie" src="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_01.mp4" type="video/mp4"> <!-- pc mp4 -->
|
|
</video>
|
|
</div>
|
|
<div class="comp_bottom">
|
|
<div class="com_bottm_inner">
|
|
<div class="swiper pdpLightingSwiper">
|
|
<ul class="swiper-wrapper">
|
|
<li class="swiper-slide lpthumb lp_efficient active" value="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_01.mp4">
|
|
<img src="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_thumb_01.png" alt="EFFICIENT">
|
|
<p>EFFICIENT</p>
|
|
</li>
|
|
<li class="swiper-slide lpthumb lp_active" value="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_02.mp4">
|
|
<img src="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_thumb_02.png" alt="ACTIVE">
|
|
<p>ACTIVE</p>
|
|
</li>
|
|
<li class="swiper-slide lpthumb lp_technical" value="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_03.mp4">
|
|
<img src="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_thumb_03.png" alt="TECHNICAL">
|
|
<p>TECHNICAL</p>
|
|
</li>
|
|
<li class="swiper-slide lpthumb lp_solid" value="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_04.mp4">
|
|
<img src="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_thumb_04.png" alt="SOLID">
|
|
<p>SOLID</p>
|
|
</li>
|
|
<li class="swiper-slide lpthumb lp_elegant" value="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_05.mp4">
|
|
<img src="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_thumb_05.png" alt="ELEGANT">
|
|
<p>ELEGANT</p>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_1x_b_v_s_b">
|
|
<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="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_01.png" alt="Lighting Pattern 비쥬얼 이미지">
|
|
</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 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="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_02.png" alt="EV9 비쥬얼 이미지">
|
|
</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 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="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_03.png" alt="EV9 비쥬얼 이미지">
|
|
</div>
|
|
<div class="text_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<h4>
|
|
역동적이며 차별화된 EV9
|
|
</h4>
|
|
<p>
|
|
스타일리시하고 다이나믹한 디지털 패턴 라이팅 그릴의 라이팅 패턴은 EV9 오너들에게 차별화된 특별한 존재감을 선사함으로써 자부심을 더해줍니다.
|
|
</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="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_04.png" alt="아이콘 이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
디지털 패턴 라이팅 그릴 적용 한해서 구매가능
|
|
</h5>
|
|
<p>
|
|
해당 사양은 디지털 패턴 라이팅 그릴이 적용된 차량에 한해서 구매할 수 있습니다. 참고하시길 바랍니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/kia/pdp/lighting_pattern/lighting_pattern_contents_05.png" alt="아이콘 이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
고객 맞춤형 설정 기능
|
|
</h5>
|
|
<p>
|
|
고객 취향과 선호도에 따라 앱 또는 차량 내에서 패턴 설정을 커스터마이징할 수 있습니다.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comp_1x_b_n_n_e1">
|
|
<div class="comp_body">
|
|
<h5>
|
|
사양 이용 영상
|
|
</h5>
|
|
<div class="youtubeArea youtubeArea_pdp" value="i76z7IQ2Mhk">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="listbtnWarp">
|
|
<div class="oneButton">
|
|
<a href="https://connectstore.kia.com/kr/info/product-usage-guide-lighting"><p>사양 이용안내</p></a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
<!--에디터 영역-->
|
|
|
|
<!-- [S] [2차]정보고시 -->
|
|
|
|
<div class="editorWarp disclaimerWrap">
|
|
<!-- [S]관리자에서 에디터로 등록되는 영역입니다. -->
|
|
<div class="comp_wide disclaimerArea">
|
|
<div class="comp_body disclaimerInner">
|
|
<h2>정보고시</h2>
|
|
<div class="disclaimerList">
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
이용조건
|
|
</div>
|
|
<div class="bar"></div>
|
|
<ul class="contents">
|
|
<li>상품 구매 및 이용가능 여부는 차량에 설치된 하드웨어 구성 및 OTA펌웨어 버전에 따라 다르기에 로그인하시면 확인하실 수 있습니다.</li>
|
|
<li>상품 이용을 위해 구입 후 가이드에 따라 차량에 설치를 완료하셔야 합니다.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
이용기간
|
|
</div>
|
|
<div class="bar"></div>
|
|
<ul class="contents">
|
|
<li>평생 이용 선택 시 기간 제한 없이 이용이 가능합니다.</li>
|
|
<li>월/연 구독 선택 시 명기된 기간동안 이용이 가능합니다.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
청약철회
|
|
</div>
|
|
<div class="bar"></div>
|
|
<ul class="contents">
|
|
<li>평생 이용은 결제 후 7일 내 구매 취소가 가능합니다.</li>
|
|
<li>월/연 구독은 언제든지 취소할 수 있으며<br>
|
|
- 기능을 한번도 이용하지 않은 고객이 7일 이내에 구독 취소를 한 경우에는 구독 비용이 전액 환불됩니다.<br>
|
|
- 7일 이내 기능을 이용하거나 7일 이후에 구독 취소를 한 경우에는 중도 해지 및 이에 따른 환불이 가능합니다.<br></li>
|
|
<li>구매 취소는 차량 내 설치된 상품이 삭제완료 된 후에 진행됩니다.</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
취소/해지/반품/환불 안내
|
|
</div>
|
|
<div class="bar"></div>
|
|
<ul class="contents">
|
|
<li>고객님의 상품 이용 현황에 따라 정기 결제를 취소하거나 바로 해지하실 수 있습니다.</li>
|
|
<li>상품별 해지/환불 정책은 이용 안내 또는 상품 상세 설명을 참고해 주시기 바랍니다.</li>
|
|
<li>정기 결제를 취소하시면 구독 종료일까지 상품을 정상적으로 이용하실 수 있으며, 다음 정기 결제일에 해지됩니다.</li>
|
|
<li>구독 할인쿠폰이 적용된 상품을 해지하시면 쿠폰 사용 기간이 남아 있더라도 쿠폰은 소멸됩니다.</li>
|
|
<li>구독 할인쿠폰이 적용된 상품을 변경하셔도 쿠폰이 소멸될 수 있으니, 변경 신청 전 안내 내용을 꼼꼼히 확인해 주시기 바랍니다.</li>
|
|
<li>상품을 즉시 해지하는 경우, 재가입 및 혜택 이용이 제한될 수 있습니다.</li>
|
|
<li>정기 결제 당일에는 상품 해지가 불가 합니다. (정기 결제가 완료된 이후에는 결제 취소 가능하며, 재결제 기간 종료 후 자동으로 해지 됩니다.)</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
고객센터
|
|
</div>
|
|
<div class="bar"></div>
|
|
<ul class="contents">
|
|
<li>기타 문의는 고객센터(080-200-2000)나 1:1문의로 신청바랍니다.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E]관리자에서 에디터로 등록되는 영역입니다. -->
|
|
</div>
|
|
<!-- [E] [2차]정보고시 -->
|
|
|
|
|
|
|
|
<!--관련상품-->
|
|
<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="/kr/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="/kr/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-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/footer.php");
|
|
?>
|
|
<!--//footer-->
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|