pdp/사양안내 업로드

assets/css/pdp_detail.css

@@ -1940,6 +1940,12 @@
   width: 100%;
   max-width: 192rem;
 }
+@media (max-width: 768px) {
+  .displayTheme .visualBg {
+    overflow: hidden;
+    height: 143vw;
+  }
+}
 .displayTheme .visualBg img {
   width: 100%;
 }
@@ -2255,6 +2261,18 @@
     font-size: 2rem;
   }
 }
+.displayTheme.welcome-goodbye {
+  margin-top: 8rem;
+}
+.displayTheme.welcome-goodbye .comp_body + .comp_body {
+  margin-top: 10rem;
+}
+.displayTheme.welcome-goodbye .comp_body .text_area {
+  margin-bottom: 2rem;
+}
+.displayTheme.welcome-goodbye .comp_body video {
+  width: 100%;
+}
 
 .displayThemeDtl .swiper-navigation > * {
   top: 210px;
@@ -2275,9 +2293,9 @@
 .displayThemeDtl .swiper-pagination {
   top: 46.4rem;
 }
-@media (max-width: 768px) {
+@media (max-width: 1200px) {
   .displayThemeDtl .swiper-pagination {
-    top: 13.4rem;
+    top: 36.4vw;
   }
 }
 .displayThemeDtl .swiper-pagination .swiper-pagination-bullet {
@@ -2550,6 +2568,11 @@
   border-radius: 0.8rem;
   overflow: hidden;
 }
+@media (max-width: 768px) {
+  .inCarGame + .comp_1x_b_v_s_b .image_area video {
+    width: 100%;
+  }
+}
 @media (max-width: 768px) {
   .inCarGame + .comp_1x_b_v_s_b {
     margin-top: 4rem;
@@ -2617,22 +2640,56 @@
   margin-top: 0.7rem;
 }
 .inCarGame .inCarGameDtlThumb .swiper-slide {
+  overflow: hidden;
   position: relative;
+  height: 14.85rem;
   border-radius: 0.8rem;
   cursor: pointer;
 }
+@media (max-width: 768px) {
+  .inCarGame .inCarGameDtlThumb .swiper-slide {
+    height: 4.5rem;
+  }
+}
+.inCarGame .inCarGameDtlThumb .swiper-slide.video-slideThumb:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 2;
+  transform: translate(-50%, -50%);
+  width: 60px;
+  height: 61px;
+  background: url(../images/kia/pdp/in_car_game/btn_play.png) no-repeat center/contain;
+}
+@media (max-width: 768px) {
+  .inCarGame .inCarGameDtlThumb .swiper-slide.video-slideThumb:before {
+    width: 30px;
+    height: 31px;
+    opacity: 0.75;
+  }
+}
 .inCarGame .inCarGameDtlThumb .swiper-slide img {
   display: block;
   max-width: 100%;
   border-radius: 0.8rem;
   overflow: hidden;
 }
+.inCarGame .inCarGameDtlThumb .swiper-slide video {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1;
+  width: 100%;
+}
 .inCarGame .inCarGameDtlThumb .swiper-slide:after {
   content: "";
   display: block;
   position: absolute;
   top: 0;
   left: 0;
+  z-index: 3;
   width: 100%;
   height: 100%;
   border-radius: 0.8rem;

assets/css/pdp_detail.scss

@@ -1843,6 +1843,10 @@
         position: absolute;
         width: 100%;
         max-width: 192rem;
+        @include maxtablet{
+            overflow: hidden;
+            height: 143vw;
+        }
         img {
             width: 100%;
             &.mobile {display: none;}
@@ -2156,6 +2160,21 @@
             font-size: 2rem;
         }
     }
+
+    &.welcome-goodbye {
+        margin-top:8rem;
+        .comp_body {
+            &+.comp_body {
+                margin-top: 10rem;
+            }
+            .text_area {
+                margin-bottom:2rem;
+            }
+            video {
+                width: 100%;
+            }
+        }
+    }
 }
 
 .displayThemeDtl {
@@ -2181,8 +2200,12 @@
 
     .swiper-pagination {
         top:46.4rem;
+        // top:36.4vw;
+        @media(max-width: 1200px){
+            top:36.4vw;
+        }
         @include maxtablet{
-            top: 13.4rem;
+            // top: 14.4rem;
         }
         .swiper-pagination-bullet {
             opacity: 1;
@@ -2468,6 +2491,11 @@
                 border-radius: 0.8rem;
                 overflow: hidden;
             }
+            @include maxtablet{
+                video {
+                    width: 100%;
+                }
+            }
         }
         @include maxtablet{
             margin-top:4rem;
@@ -2502,21 +2530,53 @@
     .inCarGameDtlThumb {
         margin-top: .7rem;
         .swiper-slide {
+            overflow: hidden;
             position: relative;
+            height: 14.85rem;
             border-radius: 0.8rem;
+            @include maxtablet{
+                height: 4.5rem;
+            }
             cursor: pointer;
+            &.video-slideThumb {
+                &:before {
+                    content:"";
+                    display: block;
+                    position: absolute;
+                    top:50%;left:50%;
+                    z-index: 2;
+                    transform: translate(-50%, -50%);
+                    width: 60px;
+                    height: 61px;
+                    background: url(../images/kia/pdp/in_car_game/btn_play.png) no-repeat center / contain;
+
+                    @include maxtablet{
+                        width: 30px;
+                        height: 31px;
+                        opacity: .75;
+                    }
+                }
+            }
             img {
                 display: block;
                 max-width: 100%;
                 border-radius: 0.8rem;
                 overflow: hidden;
             }
+            video {
+                position: absolute;
+                top:50%;
+                transform: translateY(-50%);
+                z-index: 1;
+                width: 100%;
+            }
             &:after {
                 content:"";
                 display: block;
                 position: absolute;
                 top:0;
                 left:0;
+                z-index: 3;
                 width: 100%;
                 height: 100%;
                 border-radius: .8rem;

assets/js/common.js

@@ -267,6 +267,7 @@ $(document).ready(function() {
                 pdpInCarGameSwiper()
                 pdpInCarGameSwiperDtl();
                 pdpIntro();
+                
                 flagScroll = false;
             }
         }
@@ -447,7 +448,7 @@ function pdpInCarGameSwiper(){
             // },
             on: {
                 init: function () {
-                    console.log('pdpInCarGameSwiper 실행한다')
+                    // console.log('pdpInCarGameSwiper 실행한다')
                 },
             },
         });
@@ -463,9 +464,10 @@ function pdpInCarGameSwiper(){
             }
         });
     }
-    
     flagScroll = false;
 }
+
+let inCarGameSwiper;
 function pdpInCarGameSwiperDtl(){
     if ($('.inCarGameDtl').length > 0) {
         var inCarGameSwiper = new Swiper(".inCarGameDtlThumb", {
@@ -483,9 +485,16 @@ function pdpInCarGameSwiperDtl(){
             thumbs: {
                 swiper: inCarGameSwiper,
             },
+            on: {
+                init: function () {
+                    $(document).on("click", ".inCarGame .dtthumb", function() {
+                        inCarGameSwiper.slideTo(0);
+                        inCarGameSwiper2.slideTo(0);
+                    });
+                },
+            },
         });
     }
-    
     flagScroll = false;
 }
 $(document).on("click", ".inCarGame .dtthumb", function(e) {
@@ -504,15 +513,42 @@ $(document).on("click", ".inCarGame .dtthumb", function(e) {
     }, 200);
 
     $(".inCarGame .themeImg").each(function(e){
-        const idx = e+1;
+        const idx = e+2;
         const src = $(this).attr("src");
         const lastIndex = src.lastIndexOf("/");
         const pathWithoutFileName = src.substring(0, lastIndex);
-
         $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
     });
-    $(".inCarGame .themeImgThumb").each(function(e){
+    $(".inCarGame .video-slide").each(function(e){
         const idx = e+1;
+        const src = $(this).find(".themeVideo").attr("src");
+        const lastIndex = src.lastIndexOf("/");
+        const pathWithoutFileName = src.substring(0, lastIndex);
+        const videoEle = `
+            <video loop="" muted="" playsinline="" autoplay="" poster="${pathWithoutFileName}/${dtlImgPath}-1.png">
+                <source src="${pathWithoutFileName}/${dtlImgPath}-1.mp4" type="video/mp4" class="themeVideo">
+            </video>
+        `;
+        $(this).html(videoEle);
+
+        // $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`);
+    });
+    $(".inCarGame .video-slideThumb").each(function(e){
+        const idx = e+1;
+        const src = $(this).find(".themeVideo").attr("src");
+        const lastIndex = src.lastIndexOf("/");
+        const pathWithoutFileName = src.substring(0, lastIndex);
+        const videoEle = `
+            <video loop="" muted="" playsinline="" poster="${pathWithoutFileName}/${dtlImgPath}-1.png">
+                <source src="${pathWithoutFileName}/${dtlImgPath}-1.mp4" type="video/mp4" class="themeVideo">
+            </video>
+        `;
+        $(this).html(videoEle);
+
+        // $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.mp4`);
+    });
+    $(".inCarGame .themeImgThumb").each(function(e){
+        const idx = e+2;
         const src = $(this).attr("src");
         const lastIndex = src.lastIndexOf("/");
         const pathWithoutFileName = src.substring(0, lastIndex);
@@ -589,6 +625,7 @@ $(document).on("click", ".displayTheme .dtthumb", function() {
 });
 
 function pdpIntro(){
+    if($('#dpThemeVideo').length > 0){
         const videoElement = document.getElementById('dpThemeVideo');
         const videoWrap = $('.displayTheme .video_wrap');
         const btnIntro = $('.displayTheme .btn-intro');
@@ -615,6 +652,7 @@ function pdpIntro(){
 
         });
     }
+}
 
 
 

info/product-usage-guide-incargame.html

@@ -267,12 +267,12 @@
                                 <li class="swiper-slide">
                                     <img class="noBorder" src="../assets/images/kia/contents/incar_game01_1.jpg" alt="사양 구매 후, 게임 카드에 재진입. 홈 화면 > 메뉴 > 게임">
                                     <b>STEP 01</b>
-                                    <p class="caseBlack txtCase01">사양 구매 후, 게임 카드에 재진입 합니다. 홈 화면 > 메뉴 > 게임 <br>(별도의 설치과정이 필요하지 않습니다)</p>
+                                    <p class="caseBlack txtCase01">사양 구매 후, 게임 카드에 재진입 합니다. <br>홈 화면 > 메뉴 > 게임 <br>(별도의 설치과정이 필요하지 않습니다)</p>
                                 </li>
                                 <li class="swiper-slide">
                                     <img class="noBorder" src="../assets/images/kia/contents/incar_game01_2.jpg" alt="'좌우로 스크롤링하여 게임을 탐색/선택">
                                     <b>STEP 02</b>
-                                    <p class="caseBlack txtCase01">좌우로 스크롤링하여 게임을 탐색/선택합니다. 가장 최근에 실행한 게임이 가장 왼쪽에 나타납니다.</p>
+                                    <p class="caseBlack txtCase01">좌우로 스크롤링하여 게임을 탐색/선택합니다. <br>가장 최근에 실행한 게임이 가장 왼쪽에 나타납니다.</p>
                                 </li>
                                 <li class="swiper-slide">
                                     <img class="noBorder" src="../assets/images/kia/contents/incar_game01_3.jpg" alt="게임에 대한 설명을 참고한 후 게임을 실행">

info/product-usage-guide.html

@@ -248,10 +248,10 @@
                 <section>
                     <h2 class="titleCase01">기아 커넥트 스토어 디지털 사양 이용안내</h2>
                     <div class="listType01">
-                        <a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList05.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>NBA 디스플레이 테마</b></a>
+                        <a href="../info/product-usage-guide-incargame.html" style="background-image: url('../assets/images/kia/contents/imgUsageList05.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>NBA 디스플레이 테마</b></a>
-                        <a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList06.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>아케이드 게임</b></a>
+                        <a href="../info/product-usage-guide-incargame.html" style="background-image: url('../assets/images/kia/contents/imgUsageList06.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>아케이드 게임</b></a>
-                        <a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList07.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스마트 회생 시스템 플러스</b></a>
+                        <a href="../info/product-usage-guide-incargame.html" style="background-image: url('../assets/images/kia/contents/imgUsageList07.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스마트 회생 시스템 플러스</b></a>
-                        <a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList08.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스마트 회생 시스템 플러스</b></a>
+                        <a href="../info/product-usage-guide-incargame.html" style="background-image: url('../assets/images/kia/contents/imgUsageList08.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>스트리밍 프리미엄</b></a>
 
                         <a href="../info/product-usage-guide-lighting" style="background-image: url('../assets/images/kia/contents/imgUsageList02.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>라이팅 패턴<br>이용방법</b></a>
                         <a href="../info/product-usage-guide-rspa2" style="background-image: url('../assets/images/kia/contents/imgUsageList01.jpg');" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"><b>원격 스마트 주차 보조 2(RSPA 2)<br>이용방법</b></a>

product/pdp_display_theme_0429.html

@@ -31,10 +31,10 @@
         <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.1"></script>
+        <script type="text/javascript"  charset="UTF-8"  src="../assets/js/common.js?v55"></script>
         <!--상품상세 페이지 css 분리-->
         <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
-        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v1.1" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v55" 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">
@@ -263,7 +263,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/pdp/display_theme/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">
@@ -573,7 +573,7 @@
     <div class="comp_md layer_up video_wrap">
         <button type="button" class="btn-close">닫기</button>
         <video id="dpThemeVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" controls>
-            <source src="https://connectstore.kia.com/kr/ux_data/content/20231214/10f7f9bebf774965907b716d80e510ca.mp4" type="video/mp4">
+            <source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
             이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
         </video>
     </div>
@@ -641,6 +641,44 @@
     </div>
 </div>
 
+
+<div class="comp_wide displayTheme welcome-goodbye">
+    <div class="comp_body">
+        <div class="text_area">
+            <h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
+                Welcome Video
+            </h4>
+            <p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
+                NBA팀별 로고와 캐릭터가 반영된 Video가 차량 Sleep 모드 동작 이후 차량 시동을 켤 때에 1회 실행됩니다.
+            </p>
+        </div>
+        <div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
+            
+            <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
+                <source src="../assets/images/kia/pdp/display_theme/lakers_welcome.mp4" type="video/mp4">
+                이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
+            </video>
+        </div>
+    </div>
+    <div class="comp_body">
+        <div class="text_area">
+            <h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
+                Goodbye Video
+            </h4>
+            <p data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
+                NBA팀별 로고와 컨셉이 반영된 Video가 차량 시동이 꺼질 때 마다 실행됩니다.
+            </p>
+        </div>
+        <div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
+            
+            <video playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
+                <source src="../assets/images/kia/pdp/display_theme/lakers_goodbye.mp4" type="video/mp4">
+                이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
+            </video>
+        </div>
+    </div>
+</div>
+
 <div class="comp_wide comp_2x_b_h_s_e2 displayTheme">
     <div class="comp_body">
         <div class="item">

product/pdp_in_car_game.html

@@ -31,10 +31,10 @@
         <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.1"></script>
+        <script type="text/javascript"  charset="UTF-8"  src="../assets/js/common.js?v43"></script>
         <!--상품상세 페이지 css 분리-->
         <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
-        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v4" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v8" 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">
@@ -408,8 +408,12 @@
             <div class="swiper inCarGameDtl">
                 <div class="swiper-wrapper">
                     <div class="swiper-slide">
-                        <div class="image_area">
+                        <div class="image_area video-slide">
-                            <img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImg" alt="디스플레이 테마1">
+                            <!-- <img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImg" alt="디스플레이 테마1"> -->
+
+                            <video loop muted playsinline preload="auto" autoplay poster="/kr/assets/images/kia/pdp/in_car_game/thumb02.png">
+                                <source src="../assets/images/kia/pdp/in_car_game/theme2-1.mp4" type="video/mp4" class="themeVideo">
+                            </video>
                         </div>
                     </div>
                     <div class="swiper-slide">
@@ -430,8 +434,11 @@
             </div>
             <div thumbsSlider="" class="swiper inCarGameDtlThumb">
                 <div class="swiper-wrapper">
-                  <div class="swiper-slide">
+                  <div class="swiper-slide video-slideThumb">
-                    <img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImgThumb" alt="" />
+                    <!-- <img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImgThumb" alt="" /> -->
+                    <video loop muted playsinline preload="auto" poster="../assets/images/kia/pdp/in_car_game/thumb02.png">
+                        <source src="../assets/images/kia/pdp/in_car_game/theme2-1.mp4" type="video/mp4" class="themeVideo">
+                    </video>
                   </div>
                   <div class="swiper-slide">
                     <img src="../assets/images/kia/pdp/in_car_game/theme1-2.png" class="themeImgThumb" alt="" />

product/pdp_srs_plus.html

@@ -34,7 +34,7 @@
         <script type="text/javascript"  charset="UTF-8"  src="../assets/js/common.js?v1.1"></script>
         <!--상품상세 페이지 css 분리-->
         <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
-        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v5" type="text/css" />
+        <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v6" 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">