341 lines
17 KiB
PHP
341 lines
17 KiB
PHP
<?php $bland_code = "kia"; ?>
|
|
<!--
|
|
//메타의 각 브랜드 별 코드는 hyundai,genesis 입니다.
|
|
//브랜드 별 경로에 따라 해당 코드를 변경해주세요.
|
|
-->
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>제품상세명 > 제품리스트 > 회사명</title>
|
|
<!--
|
|
//위에 순서대로 title 이 변경되어야 합니다.
|
|
-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/meta.php");
|
|
?>
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/style.php");
|
|
?>
|
|
<!--상품상세 페이지 css 분리-->
|
|
<link rel="stylesheet" charset="UTF-8" href="/kr/assets/css/kia/kiamain.css?v1" type="text/css" />
|
|
|
|
|
|
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<!--//header-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/header.php");
|
|
?>
|
|
<!--//header-->
|
|
<div class="mainTopKey">
|
|
<div class="swiper mainSwiper">
|
|
<ul class="swiper-wrapper">
|
|
<li class="swiper-slide">
|
|
<video class="mainKvMoviePc" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height:100%;position: absolute;left:0; top:0;object-fit: cover; ">
|
|
<source src="https://worldwide.kia.com/kr/image/video/ev9/premiere/ev9-wp-discover-hero-d.mp4" type="video/mp4"> <!-- pc mp4 -->
|
|
</video>
|
|
<video class="mainKvMovieMo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height:100%;position: absolute;left:0; top:0;object-fit: cover; ">
|
|
<source src="https://www.kia.com//content/dam/kwp/kr/ko/main-kv-contents/202210/kv_Kia_FIFAWC_221024.mp4" type="video/mp4"> <!-- pc mp4 -->
|
|
</video>
|
|
|
|
<div class="mainText">
|
|
<p>
|
|
<strong>Kia Connect Store</strong>
|
|
<span>Software Defined Vehicle.<br>소프트웨어로 여는 새로운 모빌리티 시대로</span>
|
|
</p>
|
|
<div class="oneButton">
|
|
<a href=""><p>자세히 보기</p></a>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li class="swiper-slide" style="background-image: url(/kr/assets/images/kia/kia-keyb.png);">
|
|
<div class="mainText">
|
|
<p>
|
|
<strong>Kia Connect Store</strong>
|
|
<span>Software Defined Vehicle.<br>소프트웨어로 여는 새로운 모빌리티 시대로</span>
|
|
</p>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
|
|
<!-- [추가] KV 좌우버튼 추가되었습니다. -->
|
|
<div class="kvSwiperBtnArea">
|
|
<div class="swiper-button-next kvNextBtn"></div>
|
|
<div class="swiper-button-prev kvPrevBtn"></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!--//content-warp-->
|
|
<div class="mainContentsWrap">
|
|
<div class="mainTopCopy">
|
|
<div class="title" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
당신의 일상에 딱 맞는 <br>새로운 기술과 서비스를 간편하게 경험해보세요.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="mainProductList" class="mainProductListWrap">
|
|
<div class="mainProductListTop">
|
|
|
|
<!-- [S] Ajax 호출 전 디폴트 영역 -->
|
|
<div class="mainProductItem">
|
|
<div class="item defualt" style="background-color:#dedede;">
|
|
<div class="defaultLogo">
|
|
<img src="/kr/assets/images/common/default_image_logo.png" alt="logo">
|
|
</div>
|
|
<div class="infoArea defualt" style="background-image:url('/kr/assets/images/common/default_image_600x845.png');">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mainProductItem">
|
|
<div class="item defualt" style="background-color:#dedede;">
|
|
<div class="defaultLogo">
|
|
<img src="/kr/assets/images/common/default_image_logo.png" alt="logo">
|
|
</div>
|
|
<div class="infoArea defualt" style="background-image:url('/kr/assets/images/common/default_image_600x845.png');">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E] Ajax 호출 전 디폴트 영역 -->
|
|
|
|
<div class="mainProductItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<div class="item">
|
|
<a href="" class="imageArea withVideo">
|
|
<p class="productSmallVideo">
|
|
<video loop muted playsinline preload="auto" poster="/kr/assets/images/sample_pdp/sample_main_product_pc_01.png">
|
|
<source src="/kr/assets/images/sample_pdp/sample_main_product_01.mp4" type="video/mp4">
|
|
</video>
|
|
<img src="/kr/assets/images/sample_pdp/sample_main_product_pc_01.png" alt="이미지 상품명">
|
|
</p>
|
|
</a>
|
|
<div class="infoArea" style="background-image:url('/kr/assets/images/sample_pdp/sample_main_product_mo_01.png');">
|
|
<div class="infoTop">
|
|
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
|
|
<div class="tag">
|
|
<!-- 신상품 설정된 상태에 표시되는 Badge 입니다. -->
|
|
<span>NEW</span>
|
|
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
|
<span>Promotion</span>
|
|
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
|
<span>구매가능</span>
|
|
</div>
|
|
<h2>Lighting Pattern Lighting Pattern Lighting Pattern Lighting Pattern Lighting Pattern Lighting Pattern Lighting Pattern Lighting Pattern Lighting Pattern Lighting Pattern</h2>
|
|
<p class="descript">디지털 라이팅 그릴의 다이나믹한 패턴은 운전자에 반응하여 역동적이고 마법같은 빛의 경험을 만들어 냅니다. 라이팅 패턴을 통해 내 차 만의 딜라이트한 디지털 라이팅의 경험을 느껴보세요.디지털 라이팅 그릴의 다이나믹한 패턴은 운전자에 반응하여 역동적이고 마법같은 빛의 경험을 만들어 냅니다. 라이팅 패턴을 통해 내 차 만의 딜라이트한 디지털 라이팅의 경험을 느껴보세요.디지털 라이팅 그릴의 다이나믹한 패턴은 운전자에 반응하여 역동적이고 마법같은 빛의 경험을 만들어 냅니다. 라이팅 패턴을 통해 내 차 만의 딜라이트한 디지털 라이팅의 경험을 느껴보세요.</p>
|
|
</div>
|
|
<div class="infoBottom">
|
|
<div class="listOtionPrice">
|
|
<dl>
|
|
<dt>평생 이용권</dt>
|
|
<dd>\520,000</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt>일반 정기 구독</dt>
|
|
<dd>\12,000/월</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="listImgBtn">
|
|
<div class="oneButton">
|
|
<a href="#"><p>자세히 보기</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="" class="mobileLinker"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mainProductItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<div class="item">
|
|
<a href="" class="imageArea">
|
|
<p class="productSmallVideo">
|
|
<img src="/kr/assets/images/sample_pdp/sample_main_product_pc_02.png" alt="이미지 상품명">
|
|
</p>
|
|
</a>
|
|
<div class="infoArea" style="background-image:url('/kr/assets/images/sample_pdp/sample_main_product_mo_02.png');">
|
|
<div class="infoTop">
|
|
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
|
|
<div class="tag">
|
|
<!-- 신상품 설정된 상태에 표시되는 Badge 입니다. -->
|
|
<span>NEW</span>
|
|
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
|
<span>Promotion</span>
|
|
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
|
<span>구매가능</span>
|
|
</div>
|
|
<h2>RSPA2</h2>
|
|
<p class="descript">피곤했던 드라이브를 깔끔하게 마무리하고 싶으신가요?<br>버튼 하나만 누르면 쉽게 주차해주는 RSPA 2가 여러분을 기다립니다.</p>
|
|
</div>
|
|
<div class="infoBottom">
|
|
<div class="listOtionPrice">
|
|
<dl>
|
|
<dt>평생 이용권</dt>
|
|
<dd>\520,000</dd>
|
|
</dl>
|
|
</div>
|
|
<div class="listImgBtn">
|
|
<div class="oneButton">
|
|
<a href="#"><p>자세히 보기</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="" class="mobileLinker"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 리스트 중 마지막에 스트리밍 상품 정보가 노출됩니다. -->
|
|
<div class="mainProductItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
|
<div class="item">
|
|
<a href="" class="imageArea">
|
|
<p class="productSmallVideo">
|
|
<img src="/kr/assets/images/sample_pdp/sample_main_product_pc_03.png" alt="이미지 상품명">
|
|
</p>
|
|
</a>
|
|
<div class="infoArea" style="background-image:url('/kr/assets/images/sample_pdp/sample_main_product_mo_03.png');">
|
|
<div class="infoTop">
|
|
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
|
|
<div class="tag">
|
|
<!-- 신상품 설정된 상태에 표시되는 Badge 입니다. -->
|
|
<span>NEW</span>
|
|
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
|
<span>Promotion</span>
|
|
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
|
<span>구매가능</span>
|
|
</div>
|
|
<h2>Streaming Plus</h2>
|
|
<p class="descript">AVNT를 통한 제어를 통해 유명 음악 스트리밍을 보다 쉽고 빠르게 할 수 있습니다.<br>
|
|
블루투스로 전화를 연결하는 번거로움과 낮은 음질은 문제가 되지않습니다.</p>
|
|
</div>
|
|
<div class="infoBottom">
|
|
<!-- <div class="listOtionPrice">
|
|
<dl>
|
|
<dt></dt>
|
|
<dd></dd>
|
|
</dl>
|
|
</div> -->
|
|
<div class="listImgBtn">
|
|
<div class="oneButton">
|
|
<a href="#"><p>자세히 보기</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<a href="" class="mobileLinker"></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<!--//content-warp-->
|
|
|
|
<div class="mainSevice">
|
|
<div class="left">
|
|
<span>Service</span>
|
|
<h2>궁금하신 점이나<br> 문의사항이 있으신가요?</h2>
|
|
</div>
|
|
<div class="right">
|
|
<a href=""><p class="faq"><span>자주 찾는 질문 FAQ</span></p></a>
|
|
<a href=""><p class="cs"><span>문의하러 가기</span></p></a>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- [S] 배너 영역 -->
|
|
<div class="mainBannerArea">
|
|
<div class="mainBannerImageArea">
|
|
<!-- 배너 PC 이미지 입니다. -->
|
|
<img src="/kr/assets/images/sample_pdp/sample_main_banner_01_PC.png" alt="이미지 상품명" class="mainBannerPC">
|
|
|
|
<!-- 배너 모바일 이미지 입니다. -->
|
|
<img src="/kr/assets/images/sample_pdp/sample_main_banner_01_PC.jpg" alt="이미지 상품명" class="mainBannerMO">
|
|
</div>
|
|
<div class="mainBannerInfo">
|
|
<div class="mainBannerInfoInner">
|
|
<div class="textArea">
|
|
<div class="title">
|
|
RSAP2
|
|
</div>
|
|
<div class="text">
|
|
피곤했던 드라이브를 간편하게 마무리하고 싶으신가요?<br>
|
|
버튼 하나로 쉽게 주차를 도와주는 RSPA 2가 여러분을 기다립니다.
|
|
</div>
|
|
</div>
|
|
<div class="listImgBtn">
|
|
<div class="oneButton">
|
|
<a href="#"><p>자세히 보기</p></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- [E] 배너 영역 -->
|
|
|
|
<!--//mainNotice-->
|
|
<div class="mainNotice">
|
|
<div class="noticInnerWarp">
|
|
<div class="noticeInner">
|
|
<h2>공지사항</h2>
|
|
<div class="mainNiticeList">
|
|
<ul class="swiper-wrapper">
|
|
<li class="swiper-slide">
|
|
<a href="">
|
|
<dl>
|
|
<dt>2023.03.09</dt>
|
|
<dd>OTA Version Update Guide</dd>
|
|
</dl>
|
|
</a>
|
|
</li>
|
|
<li class="swiper-slide">
|
|
<a href="">
|
|
<dl>
|
|
<dt>2023.03.11</dt>
|
|
<dd>OTA Version Update Guide</dd>
|
|
</dl>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<div class="swiperButtonWarp">
|
|
<div class="swiper-button-next"></div>
|
|
<div class="swiper-button-prev"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--//mainNotice-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--//footer-->
|
|
<?php
|
|
include($_SERVER['DOCUMENT_ROOT']."/kr/include/footer.php");
|
|
?>
|
|
<!--//footer-->
|
|
</body>
|
|
</html>
|
|
|
|
|
|
|
|
|
|
|
|
|