NEW_GIL_HOME\hyeon
2b9d51aea5
- Added a note in the Kia HTML file to remind users to check available digital specifications for each vehicle. - Updated common CSS files to include a new background image for enhanced visual appeal. - Adjusted various HTML files to ensure consistent links to the customer service and notice sections across multiple pages.
1825 lines
105 KiB
HTML
1825 lines
105 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<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="/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="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 lower">디지털 사양</a>
|
|
<div class="menuDepth2Wrap info">
|
|
<h3>디지털 사양</h3>
|
|
<ul>
|
|
<li class="menuDepth2"><a href="#">KBO 디스플레이 테마</a></li>
|
|
<li class="menuDepth2"><a href="#">NBA 디스플레이 테마</a></li>
|
|
<li class="menuDepth2"><a href="#">아케이드 게임</a></li>
|
|
<li class="menuDepth2"><a href="#">원격 스마트 주차 보조(RSPA 2)</a></li>
|
|
<li class="menuDepth2"><a href="#">부스트(The 2025 EV9)</a></li>
|
|
<li class="menuDepth2"><a href="#">라이팅 패턴</a></li>
|
|
<li class="menuDepth2"><a href="#">스마트 회생 시스템 플러스</a></li>
|
|
<li class="menuDepth2"><a href="#">스트리밍 프리미엄</a></li>
|
|
<li class="menuDepth2"><a href="#">스트리밍 플러스</a></li>
|
|
</ul>
|
|
</div>
|
|
</li>
|
|
<li class="menuDepth1Wrap">
|
|
<a href="../info/product-usage-guide.html" class="menuDepth1" data-url="../info/product-usage-guide.html">사양별 이용 안내</a>
|
|
<div class="menuDepth2Wrap info">
|
|
<h3>사양별 이용 안내</h3>
|
|
</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">
|
|
<h3>스토어 소개</h3>
|
|
<ul>
|
|
<li class="menuDepth2"><a href="../info/service-info.html">스토어 소개</a></li>
|
|
<li class="menuDepth2"><a href="../info/registration-guide.html">스토어 가입안내</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">
|
|
<h3>고객지원</h3>
|
|
<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">고객센터 및 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="../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>
|
|
<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">
|
|
<ul>
|
|
<!-- [S] 스트리밍 요금제 리스트 영역 -->
|
|
<li>
|
|
<input type="radio" name="radioBtn" id="radioOne" value="지니뮤직 프로모션 데이터 요금제">
|
|
<label for="radioOne">
|
|
<dl>
|
|
<dt>지니뮤직 프로모션 데이터 요금제</dt>
|
|
<dd>
|
|
<p>2개월간 무료로 뮤직 스트리밍 서비스를 이용하실 수 있으며, 본 요금제는 차량당 1회만 가입이 가능합니다. 무료 기간 종료 후에는 ‘일반 스트리밍 데이터 요금제’로 자동 변경되어 요금이 청구됩니다. 2개월간 무료 이후 3,300원/월 (VAT 포함)</p>
|
|
<strong>기간 2022년 4월 25일 ~ 9999년 12월 31일</strong>
|
|
</dd>
|
|
<dd>\ 0/월</dd>
|
|
</dl>
|
|
</label>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<input type="radio" name="radioBtn" id="radioTwo" value="고음질 스트리밍 데이터 요금제">
|
|
<label for="radioTwo">
|
|
<dl>
|
|
<dt>고음질 스트리밍 데이터 요금제</dt>
|
|
<dd>
|
|
<p>차량에서 원하시는 음질로 뮤직 스트리밍 서비스 이용이 가능합니다. (VAT 포함)</p>
|
|
</dd>
|
|
<dd>\ 9,900/월</dd>
|
|
</dl>
|
|
</label>
|
|
</li>
|
|
|
|
|
|
<li>
|
|
<input type="radio" name="radioBtn" id="radioThree" value="일반 스트리밍 데이터 요금제">
|
|
<label for="radioThree">
|
|
<dl>
|
|
<dt>일반 스트리밍 데이터 요금제</dt>
|
|
<dd>
|
|
<p>차량에서 원하시는 음질로 뮤직 스트리밍 서비스 이용이 가능합니다. (VAT 포함)</p>
|
|
</dd>
|
|
<dd>\ 9,900/월</dd>
|
|
</dl>
|
|
</label>
|
|
</li>
|
|
<!-- [E] 스트리밍 요금제 리스트 영역 -->
|
|
|
|
<!-- [S] 뮤직 스트리밍 서비스 가입 상태인 경우 해당 요금제 노출 영역 -->
|
|
<!-- <li>
|
|
<input type="radio" name="" id="radioues" value="고음질 스트리밍 데이터 요금제" checked>
|
|
<label for="radioues">
|
|
<dl>
|
|
<dt>고음질 스트리밍 데이터 요금제</dt>
|
|
<dd>
|
|
<p>차량에서 원하시는 음질로 뮤직 스트리밍 서비스 이용이 가능합니다. (VAT 포함)</p>
|
|
</dd>
|
|
<dd>이용중</dd>
|
|
</dl>
|
|
</label>
|
|
</li> -->
|
|
<!-- [E] 뮤직 스트리밍 서비스 가입 상태인 경우 해당 요금제 노출 영역 -->
|
|
|
|
</ul>
|
|
</div>
|
|
<div class="producInfoLogOut">
|
|
<p>본 요금제는 스트리밍 이용 시 사용하는 데이터에 대한 이용권이며, 스트리밍 서비스에 대한 이용권 및 무료 쿠폰은 별도 등록이 필요합니다.</p>
|
|
<span>※ 모바일 기기 전용 스트리밍 이용권을 이용하실 경우 차량에서 스트리밍 서비스를 이용하실 수 없으며, FLAC과 같은 특정 음질을 이용하시기 위해서는 별도의 스트리밍 이용권이 필요할 수 있습니다.</span>
|
|
</div>
|
|
<!-- [E] 요금제 정상케이스 -->
|
|
|
|
<!-- [S] 스트리밍 불가 차종인 경우 -->
|
|
<div class="noStreaming">
|
|
<p>스트리밍 서비스 이용이 불가능한 차종입니다.</p>
|
|
<span>차종 및 네비게이션에 따라 서비스가 제공되지 않을 수 있습니다.</span>
|
|
</div>
|
|
<!-- [E] 스트리밍 불가 차종인 경우 -->
|
|
|
|
|
|
<!-- [S] 보유 차량 정보가 없는 경우 -->
|
|
<div class="noStreaming">
|
|
<p>보유하신 차량정보가 없습니다. </p>
|
|
<span>Kia Connect 앱에서 챠량 등록 후 이용해 주시기 바랍니다.</span>
|
|
</div>
|
|
<!-- [E] 보유 차량 정보가 없는 경우-->
|
|
|
|
|
|
<!-- [S] 차량 공유자인 경우 -->
|
|
<div class="noStreaming">
|
|
<p>Kia Connect를 통해 차량을 공유받은 고객은<br> 스트리밍플러스 서비스 가입 및 변경을 하실 수 없습니다.</p>
|
|
</div>
|
|
<!-- [E] 차량 공유자인 경우-->
|
|
|
|
|
|
|
|
</div>
|
|
|
|
<div class="priceTotal">
|
|
<!-- 로그아웃 상태에서 노출되는 버튼 -->
|
|
<!-- <div class="paymentButton oneButtonBlack">
|
|
<a href=""><p>구매가능한지 확인하기</p></a>
|
|
</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="../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="../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="../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="../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="../assets/images/sample_pdp/sample_icon_01.png" alt="샘플 아이콘">
|
|
<img src="../assets/images/sample_pdp/sample_icon_02.png" alt="샘플 아이콘">
|
|
<img src="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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="../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>
|
|
<!--관련상품-->
|
|
|
|
|
|
|
|
|
|
<!--알럿팝업-->
|
|
|
|
<!-- [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="../assets/images/common/icon-add_image.png" class="inquiryImg" alt="image_file">
|
|
</label>
|
|
|
|
</div>
|
|
<button class="delImg">
|
|
<img src="../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="../assets/images/common/icon-add_image.png" class="inquiryImg" alt="image_file">
|
|
</label>
|
|
</div>
|
|
<button class="delImg">
|
|
<img src="../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="../assets/images/common/icon-add_image.png" class="inquiryImg" alt="image_file">
|
|
</label>
|
|
</div>
|
|
<button class="delImg">
|
|
<img src="../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] 문의 등록 레이어 팝업 -->
|
|
<!--알럿팝업-->
|
|
|
|
|
|
<div class="pdpListBtn">
|
|
<div class="inner">
|
|
<a href="#none">
|
|
<img src="../assets/images/common/icon-goback.svg" alt="goback icon;">
|
|
<span>
|
|
상품목록으로 이동하기
|
|
</span>
|
|
</a>
|
|
</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-->
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|