1457 lines
80 KiB
PHP
1457 lines
80 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.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>
|
|
<div class="title">
|
|
<h1>뮤직 스트리밍</h1>
|
|
<a href="javascript:;" class="wishlistBtn"></a>
|
|
</div>
|
|
<p>특별하고 빛나는 것을 좋아 하시나요? 일상에 기쁨을 더해주는 빛의 변주, 딜라이팅 라이팅이 당신을 기다립니다.</p>
|
|
</div>
|
|
<script>
|
|
// 퍼블 확인 상 적용한 스크립트입니다.
|
|
// 개발 편의에 변경하셔도 무방합니다.
|
|
$(document).on("click",".wishlistBtn",function(){
|
|
var temp_num = Number($(this).find(".goodNum").text());
|
|
if($(this).hasClass("active")){
|
|
alert("이미 위시리스트에 포함된 상품입니다.");
|
|
}else{
|
|
if (!confirm("해당 상품을 위시리스트에 담으시겠습니까?")) {
|
|
|
|
} else {
|
|
alert("위시리스트에 담겼습니다.");
|
|
$(this).addClass("active");
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<div class="producInfoWarp">
|
|
<!-- [S] 요금제 정상케이스 -->
|
|
<h2>요금제</h2>
|
|
<div class="producInfoLogIn">
|
|
</div>
|
|
<!-- 로그아웃 케이스 -->
|
|
<div class="producInfoLogOut">
|
|
<p>본 요금제는 스트리밍 이용 시 사용하는 데이터에 대한 이용권이며, 스트리밍 서비스에 대한 이용권 및 무료 쿠폰은 별도 등록이 필요합니다.</p>
|
|
<span>※ 모바일 기기 전용 스트리밍 이용권을 이용하실 경우 차량에서 스트리밍 서비스를 이용하실 수 없으며, FLAC과 같은 특정 음질을 이용하시기 위해서는 별도의 스트리밍 이용권이 필요할 수 있습니다.</span>
|
|
</div>
|
|
<!-- //로그아웃 케이스 -->
|
|
<!-- [E] 요금제 정상케이스 -->
|
|
|
|
|
|
</div>
|
|
|
|
<div class="priceTotal">
|
|
<!-- 로그아웃 상태에서 노출되는 버튼 -->
|
|
<div class="paymentButton oneButtonBlack">
|
|
<button href="" onClick="javascript:open_layer_popup('streaming_notice')"><p>구매가능한지 확인하기</p></button>
|
|
</div>
|
|
|
|
<!-- 로그인 상태이며, 서비스 가입 상태가 아닌 경우 노출되는 버튼 -->
|
|
<!-- <div class="paymentButton towButton">
|
|
<button class="cartBtn leftBtn"><p>뮤직 스트리밍 서비스 연동</p></button>
|
|
<button class="PurchaseBtn rightBtn" onClick="javascript:open_layer_popup('payment_method');"><p>요금제 가입하기</p></button>
|
|
</div> -->
|
|
|
|
<!-- 서비스 가입중인 상태인 경우 노출되는 버튼 -->
|
|
<!-- <div class="paymentButton towButton">
|
|
<button class="cartBtn leftBtn"><p>뮤직 스트리밍 서비스 연동</p></button>
|
|
<button class="PurchaseBtn rightBtn"><p>마이페이지</p></button>
|
|
</div> -->
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
</script>
|
|
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--//content-warp-->
|
|
|
|
|
|
<!--에디터 영역-->
|
|
<div class="editorWarp">
|
|
<!--
|
|
프로모션 배너 영역
|
|
등록된 프로모션 배너 내용이 있다면 div editorInner 영역이 노출됩니다.
|
|
-->
|
|
<div class="editorInner">
|
|
프로모션 에디터 내용이 노출되는 영역
|
|
</div>
|
|
|
|
<!-- 상품 상세 내용 노출 영역 -->
|
|
<div class="editorInner">
|
|
<div class="comp_wide comp_1x_w_v_s_b">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_01.png" alt="pdp 샘플이미지" style="object-position:70% 50%;">
|
|
</div>
|
|
<div class="comp_body">
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum <br>
|
|
has been the industry's standard dummy text ever since the 1500s, <br>
|
|
when an unknown printer took a galley of type and scrambled it to make a type specimen book. <br>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_1x_w_v_c_e1">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_02.png" alt="pdp 샘플이미지" style="object-position:45% 50%;">
|
|
</div>
|
|
<div class="comp_body layer_up">
|
|
<div class="text_area">
|
|
<h3>
|
|
Product Detail Title 1
|
|
</h3>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="comp_body no_layer">
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
|
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
|
|
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_1x_w_v_o_b">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_03.png" alt="pdp 샘플이미지" style="object-position:70% 50%;">
|
|
</div>
|
|
<div class="comp_body layer_up">
|
|
<div class="text_area">
|
|
<h3>
|
|
Product Detail Title 1
|
|
</h3>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
|
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
|
|
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="comp_wide comp_1x_w_v_c_b">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_04.png" alt="pdp 샘플이미지" style="object-position:70% 50%;">
|
|
</div>
|
|
<div class="comp_body layer_up">
|
|
<div class="text_area">
|
|
<h3>
|
|
Product Detail Title 1
|
|
</h3>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="comp_body no_layer">
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
|
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
|
|
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
|
|
</p>
|
|
</div>
|
|
<div class="icon_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_01.png" alt="샘플 아이콘">
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_02.png" alt="샘플 아이콘">
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_03.png" alt="샘플 아이콘">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_1x_b_v_s_b">
|
|
<div class="comp_body">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_05.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
|
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
|
|
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_1x_b_v_s_e1">
|
|
<div class="comp_body">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_06.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_wrap">
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title Text 3
|
|
</h5>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_1x_w_v_c_e2">
|
|
<div class="comp_body">
|
|
<div class="text_wrap">
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title Text 3
|
|
</h5>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_07.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comp_wide comp_1x_b_v_o_b">
|
|
<div class="comp_body">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_08.png" alt="pdp 샘플이미지" style="object-position:25% 50%;">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
|
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comp_wide comp_1x_b_h_s_b">
|
|
<div class="comp_body">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_09.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
|
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
|
|
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_1x_b_h_s_e1">
|
|
<div class="comp_body">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_10.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
|
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
|
|
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="comp_body">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_11.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>
|
|
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <br>
|
|
when an unknown printer took a galley of type and scrambled it to make a type specimen book.
|
|
</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">
|
|
<img src="/kr/assets/images/sample_pdp/sample_12.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="half_area">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_13.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_2x_b_v_s_b">
|
|
<div class="comp_body">
|
|
<div class="half_area">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_14.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="half_area">
|
|
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_15.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="comp_wide comp_1x_b_h_s_e2">
|
|
<div class="comp_body">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_16.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h4>
|
|
Product Detail Title Text 2
|
|
</h4>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
|
|
</p>
|
|
<ul>
|
|
<li>
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_04.png" alt="pdp 샘플아이콘">
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_05.png" alt="pdp 샘플아이콘">
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
|
|
</p>
|
|
</li>
|
|
<li>
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_06.png" alt="pdp 샘플아이콘">
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy
|
|
</p>
|
|
</li>
|
|
</ul>
|
|
</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/sample_pdp/sample_icon_07.png" alt="pdp 샘플아이콘">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title 3
|
|
</h5>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_08.png" alt="pdp 샘플아이콘">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title 3
|
|
</h5>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_09.png" alt="pdp 샘플아이콘">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title 3
|
|
</h5>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_icon_10.png" alt="pdp 샘플아이콘">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title 3
|
|
</h5>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="comp_wide comp_3x_b_v_s_b">
|
|
<div class="comp_body">
|
|
<div class="item">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_17.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title Text 3
|
|
</h5>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_18.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title Text 3
|
|
</h5>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="image_area">
|
|
<img src="/kr/assets/images/sample_pdp/sample_19.png" alt="pdp 샘플이미지">
|
|
</div>
|
|
<div class="text_area">
|
|
<h5>
|
|
Product Detail Title Text 3
|
|
</h5>
|
|
<p>
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<!--에디터 영역-->
|
|
|
|
<!-- [S] [2차]정보고시 -->
|
|
|
|
<div class="editorWarp">
|
|
<!-- [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>
|
|
<div class="contents">
|
|
EV6 (2021 이후, EV6 GT, Niro (2022), Sportage (2021 이후), K3 (2022), K9 (2021 이후)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
상품고시 및 이용안내
|
|
</div>
|
|
<div class="bar"></div>
|
|
<div class="contents">
|
|
품명 및 모델명 : 상품 설명 및 상품 이미지 참조<br>
|
|
구성품 : 상품 설명 및 상품 이미지 참조<br>
|
|
품질보증기준 : 관련 법 소비자 분쟁해결 규정에 따름<br>
|
|
제조사/수입자 : 상품 설명 및 상품 이미지 참조<br>
|
|
유의사항<br>
|
|
※ 해당 내용은 전자상거래 등에서의 상품정보제공 고시에 따라 작성되었습니다.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
A/S 안내
|
|
</div>
|
|
<div class="bar"></div>
|
|
<div class="contents">
|
|
무상 A/S 정책<br>
|
|
품질 보증 기간: 활성화 일 부터 3개월 (구매 증빙 필요)<br>
|
|
품질보증기간 내 정상 사용 상태에서 기능이나 성능상 하자가 발생한 경우 무상으로 서비스 신청이 가능합니다.<br>
|
|
품질보증기간 내 제품 하자가 맞을 경우, 전국 Kia 정비센터에 방문하셔서 수리를 받을 수 있습니다.<br>
|
|
제품하자/고장이 아닌 경우, 고객 과실 및 취급부주의에 의한 고장일 경우, 제품 시리얼 넘버가 식별이 불가 시, 품질 보증 기간 이후에는 유상 서비스가 제공됩니다.
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
취소/해지/반품/환불 안내
|
|
</div>
|
|
<div class="bar"></div>
|
|
<div class="contents">
|
|
고객님의 상품 이용 현황에 따라 정기 결제를 취소하거나 바로 해지하실 수 있습니다.<br>
|
|
상품별 해지/환불 정책은 이용 안내 또는 상품 상세 설명을 참고해 주시기 바랍니다.<br>
|
|
정기 결제를 취소하시면 구독 종료일까지 상품을 정상적으로 이용하실 수 있으며, 다음 정기 결제일에 해지됩니다.<br>
|
|
구독 할인쿠폰이 적용된 상품을 해지하시면 쿠폰 사용 기간이 남아 있더라도 쿠폰은 소멸됩니다.<br>
|
|
구독 할인쿠폰이 적용된 상품을 변경하셔도 쿠폰이 소멸될 수 있으니, 변경 신청 전 안내 내용을 꼼꼼히 확인해 주시기 바랍니다.<br>
|
|
상품을 즉시 해지하는 경우, 재가입 및 혜택 이용이 제한될 수 있습니다.<br>
|
|
정기 결제 당일에는 상품 해지가 불가 합니다. (정기 결제가 완료된 이후에는 결제 취소 가능하며, 재결제 기간 종료 후 자동으로 해지 됩니다.)
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item">
|
|
<div class="title">
|
|
기타 유의사항
|
|
</div>
|
|
<div class="bar"></div>
|
|
<div class="contents">
|
|
구독 서비스를 해지하시면 해지한 다음달부터 결제가 진행되지 않습니다.<br>
|
|
만약 이미 결제된 서비스에 대해 결제 취소를 원하시는 경우, 결제 7일 이내에 홈페이지 또는 고객센터를 통해 결제 취소 신청을 해 주셔야 합니다. <br>
|
|
단, 구독 상품과 쿠폰 등을 이미 사용/등록하신 경우에는 결제취소가 불가합니다. (예시: 5월 구독 해지 신청 시, 6월부터 결제되지 않음 / 5월 결제 건에 대해 취소가 필요한 경우, 별도 결제 취소 신청) <br>
|
|
모든 가격은 부가가치세가 포함된 가격이며, 추가로 결제되는 금액은 없습니다.<br>
|
|
서비스 구매한 날짜에 매월 정기결제 됩니다. 결제한 날짜가 다음 달에 없다면 마지막일로 정기결제일이 변경 됩니다.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E]관리자에서 에디터로 등록되는 영역입니다. -->
|
|
</div>
|
|
<!-- [E] [2차]정보고시 -->
|
|
|
|
|
|
<!-- [S] [2차]리뷰 -->
|
|
<div class="comp_wide reviewArea">
|
|
<div class="comp_body reviewInner">
|
|
<div class="titleArea">
|
|
<h2>리뷰 (14)</h2>
|
|
<div class="searchBox">
|
|
<script>
|
|
$(document).ready(function() {
|
|
const btn = $(".selectInner").find(".btn-select");
|
|
const list = $(".selectInner").find(".list-member");
|
|
$(document).on("click",".selectInner .btn-select",function(){
|
|
$(this).toggleClass("on");
|
|
});
|
|
$(document).on("click",".selectInner .list-member",function(event){
|
|
if (event.target.nodeName === "BUTTON") {
|
|
btn.html(event.target.innerText);
|
|
btn.removeClass('on');
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
<div class="selectInner">
|
|
<div class="cont-select">
|
|
<button class="btn-select">최근순</button>
|
|
<ul class="list-member">
|
|
<li><button type="button">최근순</button></li>
|
|
<li><button type="button">인기순</button></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="reviewList">
|
|
|
|
<div class="item reviewItem">
|
|
<div class="textArea">
|
|
<div class="title">
|
|
<div class="name">
|
|
김*동
|
|
</div>
|
|
<div class="date">
|
|
2022.03.09
|
|
</div>
|
|
</div>
|
|
<div class="contents">
|
|
사용해보니 너무 좋아요. 가격도 적당한 것 같고요.<br>
|
|
계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요.
|
|
</div>
|
|
<button class="contentMoreBtn">더보기</button>
|
|
</div>
|
|
<div class="reviewBtnArea">
|
|
<a href="javascript:;" class="reviewBtn active">
|
|
<i class="icon-good"></i>
|
|
<span class="goodNum">25</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item reviewItem">
|
|
<div class="textArea">
|
|
<div class="title">
|
|
<div class="name">
|
|
김*동
|
|
</div>
|
|
<div class="date">
|
|
2022.03.09
|
|
</div>
|
|
</div>
|
|
<div class="contents">
|
|
사용해보니 너무 좋아요. 가격도 적당한 것 같고요.<br>
|
|
계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요.
|
|
</div>
|
|
<button class="contentMoreBtn">더보기</button>
|
|
</div>
|
|
<div class="reviewBtnArea">
|
|
<a href="javascript:;" class="reviewBtn">
|
|
<i class="icon-good"></i>
|
|
<span class="goodNum">9999+</span>
|
|
</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="item reviewItem">
|
|
<div class="textArea">
|
|
<div class="title">
|
|
<div class="name">
|
|
김*동
|
|
</div>
|
|
<div class="date">
|
|
2022.03.09
|
|
</div>
|
|
</div>
|
|
<div class="contents">
|
|
사용해보니 너무 좋아요. 가격도 적당한 것 같고요.<br>
|
|
계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요.
|
|
</div>
|
|
<button class="contentMoreBtn">더보기</button>
|
|
</div>
|
|
<div class="reviewBtnArea">
|
|
<a href="javascript:;" class="reviewBtn">
|
|
<i class="icon-good"></i>
|
|
<span class="goodNum">0</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item reviewItem">
|
|
<div class="textArea">
|
|
<div class="title">
|
|
<div class="name">
|
|
김*동
|
|
</div>
|
|
<div class="date">
|
|
2022.03.09
|
|
</div>
|
|
</div>
|
|
<div class="contents">
|
|
사용해보니 너무 좋아요. 가격도 적당한 것 같고요.<br>
|
|
계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요.
|
|
</div>
|
|
<button class="contentMoreBtn">더보기</button>
|
|
</div>
|
|
<div class="reviewBtnArea">
|
|
<a href="javascript:;" class="reviewBtn">
|
|
<i class="icon-good"></i>
|
|
<span class="goodNum">0</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="item reviewItem">
|
|
<div class="textArea">
|
|
<div class="title">
|
|
<div class="name">
|
|
김*동
|
|
</div>
|
|
<div class="date">
|
|
2022.03.09
|
|
</div>
|
|
</div>
|
|
<div class="contents">
|
|
사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요. 계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요. 가격도 적당한 것 같고요. 계속 좋은 상품 개발해 주세요. 계속 좋은 상품 개발해 주세요. 사용해보니 너무 좋아요. 가격도 적당한 것 같고요.
|
|
</div>
|
|
<button class="contentMoreBtn">더보기</button>
|
|
</div>
|
|
<div class="reviewBtnArea">
|
|
<a href="javascript:;" class="reviewBtn">
|
|
<i class="icon-good"></i>
|
|
<span class="goodNum">0</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- [S] 개발시 삭제 해주세요. -->
|
|
<!-- 더보기 스크립트가 Ajax 호출에도 영향이 없는지 테스트 하기 위해 사용된 임시 버튼입니다. 개발시에 삭제해주세요. -->
|
|
<a href="javascript:;" class="test_temp_btn" onClick="callContent();">Ajax 호출 테스트</a>
|
|
<!-- [E] 개발시 삭제 해주세요. -->
|
|
|
|
<div class="noList">
|
|
리뷰가 없습니다.
|
|
</div>
|
|
<div class="paging">
|
|
<div class="pagingInner">
|
|
<a href=""><i class="pre"></i></a>
|
|
<a href="">1</a>
|
|
<a href="" class="active">2</a>
|
|
<a href="">3</a>
|
|
<a href="">4</a>
|
|
<a href="">5</a>
|
|
<a href=""><i class="next"></i></a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
//아래 함수는 리뷰 글자가 반응형 관계없이 3줄이 넘어가는 경우 "더보기" 기능이 작동하도록 구성된 함수입니다. 해당 위치에 유지해주시면 됩니다.
|
|
more_contents_chk();
|
|
|
|
//아래 함수는 Ajax 호출로 더보기 기능이 바인딩 되는지 확인 용도의 코드입니다.
|
|
//삭제하셔도 되지만, "success" 인 경우에 꼭 more_contents_chk(); 함수 호출해주세요. more_contents_chk(); 함수는 common.js에 반영되어 있습니다.
|
|
function callContent(){
|
|
var url = "test_ajax.php";
|
|
$.ajax({
|
|
type:"POST",
|
|
url:url,
|
|
dataType : "html",
|
|
success: function(html){
|
|
$(".reviewList").html(html);
|
|
more_contents_chk();
|
|
},
|
|
error: function(xhr, status, error) {
|
|
alert(error);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
// active 클래스 보유 여부에 따른 분기 처리 스크립트입니다.
|
|
// 개발 편의에 변경하셔도 무방합니다.
|
|
// 카운트는 퍼블 확인상 넣어 둔것이고, 실제는 DB데이터를 참조한다고 합니다.(기획팀 의견)
|
|
$(document).on("click",".reviewBtn",function(){
|
|
var temp_num = $(this).find(".goodNum").text();
|
|
if(temp_num == "9999+"){
|
|
if($(this).hasClass("active")){
|
|
alert("해당 리뷰에 '좋아요'를 해제 하셨습니다.");
|
|
$(this).removeClass("active");
|
|
}else{
|
|
alert("해당 리뷰에 '좋아요'를 하셨습니다.");
|
|
$(this).addClass("active");
|
|
}
|
|
}else{
|
|
temp_num = Number($(this).find(".goodNum").text());
|
|
if($(this).hasClass("active")){
|
|
alert("해당 리뷰에 '좋아요'를 해제 하셨습니다.");
|
|
$(this).removeClass("active");
|
|
if(temp_num > 0){
|
|
temp_num = temp_num-1;
|
|
}
|
|
}else{
|
|
alert("해당 리뷰에 '좋아요'를 하셨습니다.");
|
|
$(this).addClass("active");
|
|
temp_num = temp_num+1;
|
|
}
|
|
|
|
$(this).find(".goodNum").text(temp_num);
|
|
}
|
|
|
|
});
|
|
</script>
|
|
<!-- [E] [2차]리뷰 -->
|
|
|
|
<!-- [S] [2차]Q&A -->
|
|
<div class="comp_wide qnaArea">
|
|
<div class="comp_body qnaInner">
|
|
<div class="titleArea">
|
|
<h2>Q&A (14)</h2>
|
|
<div class="qnaBtn">
|
|
<div class="oneButton">
|
|
<button class="" onClick="javascript:open_layer_popup('inquiry_popup');"><p>문의하기</p></button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="qnaList">
|
|
<div class="qnaAccodion">
|
|
<div class="accordion">
|
|
<!--반복-->
|
|
<dl>
|
|
<dt class="q">
|
|
<p>
|
|
<em class="subTitle">
|
|
<!--
|
|
미답변은 an 클래스를 가지고 있으며,
|
|
답변완료는 ay 클래스를 가지고 있습니다.
|
|
-->
|
|
<!-- <span class="badge an">미답변</span> -->
|
|
<span class="badge ay">답변완료</span>
|
|
김*동 | 2023.03.09
|
|
</em>
|
|
<span>차량 화면에서 계속 에러가 발생합니다.</span>
|
|
</p>
|
|
</dt>
|
|
<dd class="a">
|
|
<p>
|
|
어제까지 정상적으로 라이트가 작동 했었는데요.<br>
|
|
오늘 아침 시동키고나서 작동을 하지 않고 있습니다.<br>
|
|
차량 디스플레이에서도 해당 라이트가 보이지 않고요. 어떻게 처리하면 되나요?
|
|
</p>
|
|
|
|
<!-- [S]등록된 이미지가 있는 경우 노출되는 영역입니다. -->
|
|
<div class="imageArea">
|
|
<!-- 최대 3개 이미지로 이미지가 없는 경우는 item 영역이 노출되지 않습니다. -->
|
|
<div class="item">
|
|
<div class="box" style="background-image: url(/kr/assets/images/sample_pdp/sample_qna_01.png);">
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="box" style="background-image: url(/kr/assets/images/sample_pdp/sample_qna_02.png);">
|
|
</div>
|
|
</div>
|
|
<div class="item">
|
|
<div class="box" style="background-image: url(/kr/assets/images/sample_pdp/sample_qna_03.png);">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E]등록된 이미지가 있는 경우 노출되는 영역입니다. -->
|
|
|
|
<!-- [S]관리자 답변 노출 영역입니다. 답변이 없는 경우 노출되지 않습니다. -->
|
|
<div class="adminAnswer">
|
|
<p>
|
|
<em class="subTitle">
|
|
관리자 | 2023.03.09
|
|
</em>
|
|
</p>
|
|
<p class="answer">
|
|
안녕하세요. 고객님.<br>
|
|
문의 주신 오류 사항은 OTA 업데이트와 관련된 사항입니다.<br>
|
|
AVNT에서 시스템 > OTA 버전 메뉴에서 최신 업데이트 버튼을 눌러 업데이트를 진행해주시기 바랍니다.
|
|
</p>
|
|
<!-- [S]첨부파일이 있는 경우 노출되는 영역입니다. -->
|
|
<div class="downloadArea">
|
|
<a href="javascript:;" class="downloadItem">
|
|
FoD 상품 업데이트.pdf
|
|
<i class="icon"></i>
|
|
</a>
|
|
|
|
<a href="javascript:;" class="downloadItem">
|
|
FoD 상품 업데이트.pdf
|
|
<i class="icon"></i>
|
|
</a>
|
|
|
|
<a href="javascript:;" class="downloadItem">
|
|
FoD 상품 업데이트.pdf
|
|
<i class="icon"></i>
|
|
</a>
|
|
</div>
|
|
<!-- [E]첨부파일이 있는 경우 노출되는 영역입니다. -->
|
|
</div>
|
|
<!-- [E]관리자 답변 노출 영역입니다. 답변이 없는 경우 노출되지 않습니다. -->
|
|
|
|
<div class="csBtn">
|
|
<div class="oneButton">
|
|
<button class="inquiryDel"><p>문의 삭제</p></button>
|
|
</div>
|
|
<!-- <div class="towButton">
|
|
<button class="cartBtn leftBtn inquiryEdit"><p>수정</p></button>
|
|
<button class="PurchaseBtn rightBtn inquiryDel"><p>삭제</p></button>
|
|
</div> -->
|
|
</div>
|
|
</dd>
|
|
|
|
</dl>
|
|
<!--반복-->
|
|
<!--반복-->
|
|
<dl>
|
|
<dt class="q">
|
|
<p>
|
|
<em class="subTitle">
|
|
<span class="badge an">미답변</span>
|
|
김*동 | 2023.03.09
|
|
</em>
|
|
<span>FoD 상품 구매 후 업데이트 방법은 어떻게 되나요?</span>
|
|
</p>
|
|
</dt>
|
|
<dd class="a">
|
|
<p>묻힌 써 잠, 봅니다. 없이 같이 내일 소학교 위에도 그리워 봅니다. 가슴속에 마리아 별 불러 사랑과 무성할 프랑시스 별 까닭입니다. 때 위에 경, 둘 하나에 프랑시스 잔디가 버리었습니다. 노루, 무성할 경, 봅니다. 멀리 하나의 마디씩 아직 아무 어머님, 있습니다. 가을 까닭이요, 딴은 자랑처럼 있습니다. 어머니, 어머니, 무성할 못 오는 옥 계십니다. 언덕 무엇인지 둘 새겨지는 별에도 추억과 나의 있습니다. 우는 별 소녀들의 시와 쉬이 다하지 계십니다. 다 벌레는 토끼, 이름자 봅니다.</p>
|
|
<div class="csBtn">
|
|
<!-- <div class="oneButton">
|
|
<button class="inquiryDel"><p>문의 삭제</p></button>
|
|
</div> -->
|
|
<div class="towButton">
|
|
<button class="cartBtn leftBtn inquiryEdit"><p>수정</p></button>
|
|
<button class="PurchaseBtn rightBtn inquiryDel"><p>삭제</p></button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
<!--반복-->
|
|
<!--반복-->
|
|
<dl>
|
|
<dt class="q">
|
|
<p>
|
|
<em class="subTitle">
|
|
<span class="badge an">미답변</span>
|
|
김*동 | 2023.03.09
|
|
</em>
|
|
<span>FoD 상품 구매 후 업데이트 방법은 어떻게 되나요?</span>
|
|
</p>
|
|
</dt>
|
|
<dd class="a">
|
|
<p>묻힌 써 잠, 봅니다. 없이 같이 내일 소학교 위에도 그리워 봅니다. 가슴속에 마리아 별 불러 사랑과 무성할 프랑시스 별 까닭입니다. 때 위에 경, 둘 하나에 프랑시스 잔디가 버리었습니다. 노루, 무성할 경, 봅니다. 멀리 하나의 마디씩 아직 아무 어머님, 있습니다. 가을 까닭이요, 딴은 자랑처럼 있습니다. 어머니, 어머니, 무성할 못 오는 옥 계십니다. 언덕 무엇인지 둘 새겨지는 별에도 추억과 나의 있습니다. 우는 별 소녀들의 시와 쉬이 다하지 계십니다. 다 벌레는 토끼, 이름자 봅니다.</p>
|
|
<div class="csBtn">
|
|
<!-- <div class="oneButton">
|
|
<button class="inquiryDel"><p>문의 삭제</p></button>
|
|
</div> -->
|
|
<div class="towButton">
|
|
<button class="cartBtn leftBtn inquiryEdit"><p>수정</p></button>
|
|
<button class="PurchaseBtn rightBtn inquiryDel"><p>삭제</p></button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
<!--반복-->
|
|
<!--반복-->
|
|
<dl>
|
|
<dt class="q">
|
|
<p>
|
|
<em class="subTitle">
|
|
<span class="badge an">미답변</span>
|
|
김*동 | 2023.03.09
|
|
</em>
|
|
<span>FoD 상품 구매 후 업데이트 방법은 어떻게 되나요?</span>
|
|
</p>
|
|
</dt>
|
|
<dd class="a">
|
|
<p>묻힌 써 잠, 봅니다. 없이 같이 내일 소학교 위에도 그리워 봅니다. 가슴속에 마리아 별 불러 사랑과 무성할 프랑시스 별 까닭입니다. 때 위에 경, 둘 하나에 프랑시스 잔디가 버리었습니다. 노루, 무성할 경, 봅니다. 멀리 하나의 마디씩 아직 아무 어머님, 있습니다. 가을 까닭이요, 딴은 자랑처럼 있습니다. 어머니, 어머니, 무성할 못 오는 옥 계십니다. 언덕 무엇인지 둘 새겨지는 별에도 추억과 나의 있습니다. 우는 별 소녀들의 시와 쉬이 다하지 계십니다. 다 벌레는 토끼, 이름자 봅니다.</p>
|
|
<div class="csBtn">
|
|
<!-- <div class="oneButton">
|
|
<button class="inquiryDel"><p>문의 삭제</p></button>
|
|
</div> -->
|
|
<div class="towButton">
|
|
<button class="cartBtn leftBtn inquiryEdit"><p>수정</p></button>
|
|
<button class="PurchaseBtn rightBtn inquiryDel"><p>삭제</p></button>
|
|
</div>
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
<!--반복-->
|
|
</div>
|
|
|
|
<div class="noList">
|
|
Q&A가 없습니다.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
<div class="paging">
|
|
<div class="pagingInner">
|
|
<a href=""><i class="pre"></i></a>
|
|
<a href="">1</a>
|
|
<a href="" class="active">2</a>
|
|
<a href="">3</a>
|
|
<a href="">4</a>
|
|
<a href="">5</a>
|
|
<a href=""><i class="next"></i></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
|
|
// 아코디언 UI 내 버튼은 이벤트 버블링 이슈가 있어 아래와 같이 처리 했습니다.
|
|
// 첨부파일 다운로드 버튼의 경우도 이벤트 버블링 이슈가 있으니,
|
|
// 아래 참조 부탁드려요.
|
|
// inquiryEdit, inquiryDel 클래스는 CSS와 무관한 클래스 입니다.
|
|
$(document).on("click", ".inquiryEdit", function(e) {
|
|
e.stopPropagation();
|
|
open_layer_popup('inquiry_popup');
|
|
});
|
|
|
|
$(document).on("click", ".inquiryDel", function(e) {
|
|
e.stopPropagation();
|
|
if (!confirm("문의를 삭제하시겠습니까?")) {
|
|
|
|
} else {
|
|
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<!-- [E] [2차]Q&A -->
|
|
|
|
|
|
<!--관련상품-->
|
|
<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>
|
|
<!--관련상품-->
|
|
|
|
|
|
|
|
|
|
<!--알럿팝업-->
|
|
|
|
<!-- [S] CCS에서 이미 결제 수단이 등록된 경우(1.계좌, 2.카드, 3.지로) -->
|
|
<div id="payment_method" class="alertPopup" style="display:none; opacity:0;">
|
|
<div class="popInner">
|
|
<div class="content">
|
|
<p>
|
|
<strong>결제 방법 안내</strong>
|
|
</p>
|
|
<p>
|
|
<span>
|
|
CCS에 이미 등록된 결제 방법이 있습니다.<br>
|
|
<!-- 해당 결제 수단 정보가 노출됩니다. -->
|
|
(지로, 서울특별시 OO구 OOO로 OO길 OO)<br>
|
|
해당 결제 방법으로 요금을 납부하시겠습니까?
|
|
</span>
|
|
</p>
|
|
<p>
|
|
<span class="info">
|
|
※ 결제 방법을 변경하실 경우 CCS 고객센터를 통해 변경 가능합니다.
|
|
</span>
|
|
</p>
|
|
<div class="carswBtn">
|
|
<div class="towButton">
|
|
<a href="javascript:;" class="cartBtn leftBtn" onClick="javascript:close_layer_popup('payment_method');"><p>취소</p></a>
|
|
<a href="javascript:;" class="PurchaseBtn rightBtn"><p>확인</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E] CCS에서 이미 결제 수단이 등록된 경우(1.계좌, 2.카드, 3.지로) -->
|
|
|
|
|
|
|
|
<!-- [S] 등록된 결제수단이 전혀 없는 경우 -->
|
|
<div id="payment_method_not" class="alertPopup" style="display:none; opacity:0;">
|
|
<div class="popInner">
|
|
<div class="content">
|
|
<p>
|
|
<strong>결제 방법 안내</strong>
|
|
</p>
|
|
<p>
|
|
<span>
|
|
등록된 결제 방법이 없습니다.<br>
|
|
기아페이로 결제 방법을 등록하시겠습니까?
|
|
</span>
|
|
</p>
|
|
<p>
|
|
<span class="info">
|
|
※ 계좌, 카드, 지로로 결제 수단을 설정하실 경우, CCS 고객센터를 통해 등록 가능합니다.
|
|
</span>
|
|
</p>
|
|
<div class="carswBtn">
|
|
<div class="towButton">
|
|
<a href="javascript:;" class="cartBtn leftBtn" onClick="javascript:close_layer_popup('payment_method_not');"><p>취소</p></a>
|
|
<a href="javascript:;" class="PurchaseBtn rightBtn"><p>기아페이 등록</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E] 등록된 결제수단이 전혀 없는 경우 -->
|
|
|
|
<!-- [S] 문의 등록 레이어 팝업 -->
|
|
<div id="inquiry_popup" class="inquiryPopup" style="display:none; opacity:0;">
|
|
<div class="popInner">
|
|
<div class="content">
|
|
<p class="title">
|
|
<strong>문의 하기</strong>
|
|
</p>
|
|
<div class="inquiryType">
|
|
<div class="radioArea">
|
|
<label class="radioItem">
|
|
<input type="radio" id="qna" name="inquiryType" value="" />
|
|
<span>Q&A</span>
|
|
</label>
|
|
<label class="radioItem">
|
|
<input type="radio" id="inquiry" name="inquiryType" value="" />
|
|
<span>1:1문의</span>
|
|
</label>
|
|
</div>
|
|
<div class="info">
|
|
1:1로 문의 시 답변은 [마이페이지 > 문의 내역] 에서 확인하실 수 있으며, 해당 글은 목록에 게시되지 않습니다.
|
|
</div>
|
|
</div>
|
|
<div class="csWarp">
|
|
<div class="csInner">
|
|
<div class="formBox">
|
|
|
|
<dl class="important">
|
|
<dt>문의 제목</dt>
|
|
<dd>
|
|
<input type="text" placeholder="문의 제목을 입력해주세요.">
|
|
</dd>
|
|
</dl>
|
|
<dl class="important">
|
|
<dt>문의 내용</dt>
|
|
<dd class="contentsWrap">
|
|
<textarea class="inquiryContents" name="" id="" cols="30" rows="10" placeholder="문의 내용을 입력해주세요. 연락처, 이메일 등 개인정보가 포함된 문의는 1:1로 문의해주세요.비방/욕설/홍보/명예훼손성 등 상품과 무관하거나 부적절한 내용을 등록 시 글쓰기 제한 및 통보 없이 삭제될 수 있습니다."></textarea>
|
|
<div class="wordCounter textCount">
|
|
0/1000
|
|
</div>
|
|
</dd>
|
|
</dl>
|
|
<dl class="insertFile">
|
|
<dt>사진 첨부</dt>
|
|
<dd class="flieWarp">
|
|
<div class="fileList">
|
|
<ul>
|
|
<li class="imgItem">
|
|
<div class="itemWrap">
|
|
<input type="file" accept="image/*" name="inquiryImgFile" id="inquiryImgFile1" class="imgInput">
|
|
<label for="inquiryImgFile1" class="contents">
|
|
<img src="/kr/assets/images/common/icon-add_image.png" class="inquiryImg" alt="image_file">
|
|
</label>
|
|
|
|
</div>
|
|
<button class="delImg">
|
|
<img src="/kr/assets/images/common/icon-img_del.svg" alt="이미지 삭제">
|
|
</button>
|
|
</li>
|
|
<li class="imgItem">
|
|
<div class="itemWrap">
|
|
<input type="file" accept="image/*" name="inquiryImgFile" id="inquiryImgFile2" class="imgInput">
|
|
<label for="inquiryImgFile2" class="contents">
|
|
<img src="/kr/assets/images/common/icon-add_image.png" class="inquiryImg" alt="image_file">
|
|
</label>
|
|
</div>
|
|
<button class="delImg">
|
|
<img src="/kr/assets/images/common/icon-img_del.svg" alt="이미지 삭제">
|
|
</button>
|
|
</li>
|
|
<li class="imgItem">
|
|
<div class="itemWrap">
|
|
<input type="file" accept="image/*" name="inquiryImgFile" id="inquiryImgFile3" class="imgInput">
|
|
<label for="inquiryImgFile3" class="contents">
|
|
<img src="/kr/assets/images/common/icon-add_image.png" class="inquiryImg" alt="image_file">
|
|
</label>
|
|
</div>
|
|
<button class="delImg">
|
|
<img src="/kr/assets/images/common/icon-img_del.svg" alt="이미지 삭제">
|
|
</button>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
<p class="textInfo">*사진 첨부는 최대 3개까지 가능하며, 5mb 이하의 jpg, jpeg, png, gif의 이미지 파일만 업로드 가능합니다.
|
|
</p>
|
|
</dd>
|
|
</dl>
|
|
<script>
|
|
|
|
// 이미지 삭제 스크립트
|
|
// 이미 DB에 등록되어 있는 경우는 별도 처리가 필요해 보입니다.
|
|
// IE는 고려하지 않았습니다.
|
|
$(document).on("click", ".delImg", function() {
|
|
$(this).prev().find(".imgInput").val("");
|
|
$(this).prev().find(".inquiryImg").attr('src', '/kr/assets/images/common/icon-add_image.png');
|
|
$(this).css("display","none");
|
|
});
|
|
</script>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="carswBtn">
|
|
<div class="towButton">
|
|
<a href="javascript:;" class="cartBtn leftBtn" onClick="javascript:close_layer_popup('inquiry_popup');"><p>취소</p></a>
|
|
<a href="javascript:;" class="PurchaseBtn rightBtn"><p>문의하기</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E] 문의 등록 레이어 팝업 -->
|
|
|
|
<!-- [S] 스트리밍 가입/해지 불가 안내 -->
|
|
<div id="streaming_notice" class="streamingNoticePopup" style="display:none; opacity:0;">
|
|
<div class="popInner">
|
|
<div class="content">
|
|
<p class="title">
|
|
스트리밍 플러스 가입/변경/해지 중단안내
|
|
</p>
|
|
<p class="main-info">
|
|
<span>통신사 LG U+ 시스템 개선 작업으로 스트리밍 플러스 가입/변경/해지가 불가능합니다.</span>
|
|
</p>
|
|
<p class="period">
|
|
<span class="fc-emphas">기간 : 8/25(금) 22:00 ~ 8/27(일) 22:00</span>
|
|
</p>
|
|
<p class="info-more">
|
|
<span>자세한 내용은 공지사항을 참고해주세요</span>
|
|
</p>
|
|
<div class="linkToBoard">
|
|
<a href="https://connectstore.kia.com/kr/service/notice-view?noticeView=BLB0000284" class="kiaBoardLink">공지사항 바로가기</a>
|
|
</div>
|
|
<div class="carswBtn">
|
|
<div class="oneButton">
|
|
<a href="javascript:;" class="cartBtn leftBtn" onClick="javascript:close_layer_popup('streaming_notice');"><p>닫기</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E] 스트리밍 가입/해지 불가 안내 -->
|
|
<!--알럿팝업-->
|
|
|
|
|
|
<div class="pdpListBtn">
|
|
<div class="inner">
|
|
<a href="#none">
|
|
<img src="/kr/assets/images/common/icon-goback.svg" alt="goback icon;">
|
|
<span>
|
|
상품목록으로 이동하기
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<!--//footer-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/footer.php");
|
|
?>
|
|
<!--//footer-->
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|