부스트 이용안내 수정 스텝02
This commit is contained in:
hyeonggil
BIN
assets/images/kia/product-img/producy-temp_boost1.png
Normal file
BIN
assets/images/kia/product-img/producy-temp_boost1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 621 KiB |
@@ -276,7 +276,7 @@
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_1.jpg" alt="설정 > 화면구성 > 클러스터 테마 선택을 선택하고, ‘드라이브 모드’ 또는 ‘스타일C’를 선택">
|
||||
<b>STEP 01</b>
|
||||
<p class="caseBlack txtCase01">설정 > 화면구성 > 클러스터 테마 선택을 선택하고, ‘드라이브 모드’ 또는 ‘스타일C’를 선택합니다.</p>
|
||||
<p class="caseBlack txtCase01">설정 > 화면구성 > 클러스터 테마를 선택하고, ‘드라이브 모드 연동’ 또는 ‘스타일C’를 선택합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_2.jpg" alt="‘SPORT’모드로 드라이브 모드를 변경">
|
||||
|
||||
@@ -42,69 +42,64 @@
|
||||
</div>
|
||||
|
||||
<div class="contentWarp">
|
||||
<div class="contentsTypeNew caseUsageDetail">
|
||||
<section class="caseInfoWrap">
|
||||
<h2 class="titleCase01">부스트 이용 방법</h2>
|
||||
<img src="../assets/images/kia/contents/imgCaseInfo_boost.jpg" alt="부스트 이용 방법" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<div>
|
||||
<h3 class="titleCase02" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
부스트
|
||||
</h3>
|
||||
<p class="txtCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
부스트는 향상된 가속성능을 제공합니다.<br>
|
||||
구매 및 설치 후 별다른 설정 없이 활성화 됩니다.<br>
|
||||
(클러스터에서 ‘BOOST ON’을 확인할 수 있습니다.)
|
||||
|
||||
<span style="color: #676767; display: block; padding-top: 15px;">
|
||||
※ AWD 차량만 구매할 수 있습니다.
|
||||
</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
<div class="contentsTypeNew caseUsageDetail">
|
||||
<section class="caseInfoWrap">
|
||||
<h2 class="titleCase01">부스트 이용 방법</h2>
|
||||
<img src="../assets/images/kia/contents/imgCaseInfo_boost.jpg" alt="부스트 이용 방법" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<div>
|
||||
<h3 class="titleCase02" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
부스트
|
||||
</h3>
|
||||
<p class="txtCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
부스트는 향상된 가속성능을 제공합니다.<br>
|
||||
구매 및 설치 후 별다른 설정 없이 활성화 됩니다.<br>
|
||||
(클러스터에서 ‘BOOST ON’을 확인할 수 있습니다.)
|
||||
|
||||
<span style="color: #676767; display: block; padding-top: 15px;">
|
||||
※ AWD 차량만 구매할 수 있습니다.
|
||||
</span>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="caseFunction">
|
||||
<h2 class="titleCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">클러스터 테마 변경 방법</h2>
|
||||
<section class="caseFunction">
|
||||
<h2 class="titleCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">클러스터 테마 변경 방법</h2>
|
||||
|
||||
<section class="storeGuideItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<header class="case">
|
||||
<h3 class="titleCase03">차량</h3>
|
||||
<strong>3 STEP</strong>
|
||||
</header>
|
||||
<section class="storeGuideItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||
<header class="case">
|
||||
<h3 class="titleCase03">차량</h3>
|
||||
<strong>2 STEP</strong>
|
||||
</header>
|
||||
|
||||
<div class="swiper swiper1">
|
||||
<ul class="swiper-wrapper caseWide">
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_1.jpg" alt="설정 > 화면구성>클러스터 테마 선택을 선택하고, ‘드라이브 모드’를 선택">
|
||||
<b>STEP 01</b>
|
||||
<p class="caseBlack txtCase01">설정 > 화면구성 > 클러스터 테마 선택을 선택하고, ‘드라이브 모드’를 선택합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_2.jpg" alt="‘SPORT’모드로 드라이브 모드를 변경">
|
||||
<b>STEP 02</b>
|
||||
<p class="caseBlack txtCase01">‘SPORT’모드로 드라이브 모드를 변경합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_3.jpg" alt="또는 설정 > 화면구성>클러스터 테마 선택을 선택하고, ‘스타일 C’를 선택">
|
||||
<b>STEP 03</b>
|
||||
<p class="caseBlack txtCase01">또는 설정 > 화면구성 > 클러스터 테마 선택을 선택하고, ‘스타일 C’를 선택합니다.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="swiper-scrollbar"></div>
|
||||
<div class="swiper-scrollbar-after-space"></div>
|
||||
<div class="swiper swiper1">
|
||||
<ul class="swiper-wrapper caseWide">
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_1.jpg" alt="설정 > 화면구성 > 클러스터 테마 선택을 선택하고, ‘드라이브 모드’ 또는 ‘스타일C’를 선택">
|
||||
<b>STEP 01</b>
|
||||
<p class="caseBlack txtCase01">설정 > 화면구성 > 클러스터 테마를 선택하고, ‘드라이브 모드 연동’ 또는 ‘스타일C’를 선택합니다.</p>
|
||||
</li>
|
||||
<li class="swiper-slide">
|
||||
<img class="noBorder" src="../assets/images/kia/contents/boost01_2.jpg" alt="‘SPORT’모드로 드라이브 모드를 변경">
|
||||
<b>STEP 02</b>
|
||||
<p class="caseBlack txtCase01">‘SPORT’모드로 드라이브 모드를 변경합니다.</p>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="swiper-scrollbar"></div>
|
||||
<div class="swiper-scrollbar-after-space"></div>
|
||||
</div>
|
||||
<div class="swiper-button-next btnNextSlide1"></div>
|
||||
<div class="swiper-button-prev btnPrevSlide1"></div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div class="contentsBtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="../info/product-usage-guide"><p>목록</p></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="swiper-button-next btnNextSlide1"></div>
|
||||
<div class="swiper-button-prev btnPrevSlide1"></div>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
<div class="contentsBtnWarp">
|
||||
<div class="oneButton">
|
||||
<a href="../info/product-usage-guide"><p>목록</p></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!--//footer-->
|
||||
|
||||
@@ -241,14 +241,13 @@
|
||||
<div class="infoStickyInner">
|
||||
<div class="stickyLeft">
|
||||
<p>
|
||||
<strong>Kia Dynamic LED</strong>
|
||||
<span>Light Type-A</span>
|
||||
<strong>부스트</strong>
|
||||
</p>
|
||||
</div>
|
||||
<div class="stickyRight">
|
||||
<dl>
|
||||
<dt>평생 이용권</dt>
|
||||
<dd>₩ 150,000</dd>
|
||||
<dt>평생 이용</dt>
|
||||
<dd>₩ 500,000</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
@@ -263,7 +262,7 @@
|
||||
<div class="productImg">
|
||||
<div class="swiper productSwiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp1.png" alt="이미지 상품명"></div>
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp_boost1.png" alt="이미지 상품명"></div>
|
||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></div>
|
||||
<div class="swiper-slide withVideo">
|
||||
<p class="productSmallVideo">
|
||||
@@ -282,79 +281,33 @@
|
||||
<div class="productRight">
|
||||
<div class="optionWarp">
|
||||
<div class="producTitle">
|
||||
<span>차량SW</span>
|
||||
<h1>Kia Dynamic LED</h1>
|
||||
<p>특별하고 빛나는 것을 좋아 하시나요? 일상에 기쁨을 더해주는 빛의 변주, 딜라이팅 라이팅이 당신을 기다립니다.</p>
|
||||
</div>
|
||||
<div class="producOption">
|
||||
<h2>원하시는 상품을 선택해주세요</h2>
|
||||
<div class="optionList">
|
||||
<div class="checkBtn withVideo">
|
||||
<input type="checkbox" name="check" id="checkeOne" value="Light Type-A" checked >
|
||||
<label for="checkeOne">
|
||||
<p class="productSmallVideo">
|
||||
<video loop muted playsinline preload="auto" poster="/kr/assets/images/kia/product-img/producy-temp3.png">
|
||||
<source src="../assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명">
|
||||
</p>
|
||||
<div class="optionText">
|
||||
<p>
|
||||
<strong>Light Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-A</strong>
|
||||
<span>파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkBtn">
|
||||
<input type="checkbox" name="check" id="checkeTwo" value="Light Type-B">
|
||||
<label for="checkeTwo">
|
||||
<p><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></p>
|
||||
<div>
|
||||
<p>
|
||||
<strong>Light Type-B</strong>
|
||||
<span>역동적인 사선 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkBtn disabledBtn">
|
||||
<input type="checkbox" name="check" id="checkeThree" value="Light Type-C" disabled>
|
||||
<label for="checkeThree">
|
||||
<p><img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명"></p>
|
||||
<div>
|
||||
<p>
|
||||
<strong>Light Type-C</strong>
|
||||
<span>부드러운 곡선 패턴</span>
|
||||
</p>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <span>차량SW</span> -->
|
||||
<h1>부스트</h1>
|
||||
<p>그 어느때 보다 빠르게, 때론 거칠게</p>
|
||||
</div>
|
||||
<div class="priceOption">
|
||||
<h2>원하시는 결제 옵션을 선택해주세요</h2>
|
||||
<h2>원하시는 구매 옵션을 선택해주세요</h2>
|
||||
<div class="priceList">
|
||||
<div class="radioBtn">
|
||||
<input type="radio" name="radioBtn" id="radioOne" value="평생이용권 150000">
|
||||
<input type="radio" name="radioBtn" id="radioOne" value="평생이용 500000" checked>
|
||||
<label for="radioOne">
|
||||
<span>평생 이용권</span>
|
||||
<strong>₩ 150,000</strong>
|
||||
<span>평생 이용</span>
|
||||
<strong>₩ 500,000</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radioBtn">
|
||||
<input type="radio" name="radioBtn" id="radioTwo" value="일반 정기 구독 150000">
|
||||
<input type="radio" name="radioBtn" id="radioTwo" value="연 구독 150000">
|
||||
<label for="radioTwo">
|
||||
<span>일반 정기 구독</span>
|
||||
<strong>₩ 12,000/월</strong>
|
||||
<span>연 구독</span>
|
||||
<strong>₩ 120,000/월</strong>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="radioBtn disabledBtn">
|
||||
<input type="radio" name="radioBtn" id="radioThree" value="1개월 무료 정기구독 150000" disabled>
|
||||
<input type="radio" name="radioBtn" id="radioThree" value="월 구독 150000" disabled>
|
||||
<label for="radioThree">
|
||||
<span>1개월 무료 정기 구독</span>
|
||||
<span>월 구독</span>
|
||||
<strong>₩ 12,000/월</strong>
|
||||
</label>
|
||||
</div>
|
||||
@@ -363,11 +316,10 @@
|
||||
<div class="priceTotal">
|
||||
<dl class="total">
|
||||
<dt>총 결제 금액</dt>
|
||||
<dd>\ 150,000</dd>
|
||||
<dd>₩ 500,000</dd>
|
||||
</dl>
|
||||
<div class="paymentButton towButton">
|
||||
<button class="cartBtn leftBtn"><p>장바구니</p></button>
|
||||
<button class="PurchaseBtn rightBtn"><p>구매하기</p></button>
|
||||
<div class="paymentButton oneButton">
|
||||
<button class="PurchaseBtn rightBtn"><p>바로구매</p></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user