업로드

assets/css/pdp_detail.css

@@ -1934,4 +1934,75 @@
 .pdpDisplayThemeSwiper .swiper-wrapper {
   transition-timing-function: linear;
 }
+
+.displayTheme .visualBg {
+  position: absolute;
+  width: 100%;
+  max-width: 192rem;
+}
+.displayTheme .visualBg img {
+  width: 100%;
+}
+.displayTheme .visualBg:after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+  width: 100%;
+  height: 60%;
+  background: rgb(255, 255, 255);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 43%, rgb(255, 255, 255) 100%);
+}
+.displayTheme.comp_wide .comp_bottom {
+  display: flex;
+  align-items: center;
+  position: relative;
+  z-index: 2;
+  height: 44rem;
+  background-color: rgba(0, 0, 0, 0.8);
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner {
+  position: relative;
+  max-width: 100%;
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner:before, .displayTheme.comp_wide .comp_bottom .com_bottm_inner:after {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 2;
+  width: 10rem;
+  height: 100%;
+  background: rgb(0, 0, 0);
+  background: linear-gradient(270deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner:after {
+  left: auto;
+  right: 0;
+  background: linear-gradient(90deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
+}
+.displayTheme .comp_top {
+  z-index: 2;
+  height: 32.7rem;
+}
+.displayTheme .comp_md {
+  position: relative;
+  z-index: 2;
+  height: 52rem;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+.displayTheme .dtlImgs .item .text_area {
+  margin-top: 3rem;
+}
+.displayTheme .dtlImgs .item + .item {
+  margin-top: 7.5rem;
+}
+.displayTheme + .comp_1x_b_v_s_b {
+  position: relative;
+  z-index: 2;
+  margin-top: 21.6rem;
+}
 /*# sourceMappingURL=pdp_detail.css.map */

assets/css/pdp_detail.scss

@@ -1837,3 +1837,81 @@
         transition-timing-function: linear  ;
     }
 }
+.displayTheme {
+    .visualBg {
+        position: absolute;
+        width: 100%;
+        max-width: 192rem;
+        img {
+            width: 100%;
+        }
+        &:after {
+            content:"";
+            display: block;
+            position: absolute;
+            bottom:0;
+            left:0;
+            z-index: 2;
+            width: 100%;
+            height: 60%;
+            background: rgb(255,255,255);
+            background: linear-gradient(180deg, rgba(255,255,255,0) 43%, rgba(255,255,255,1) 100%);
+        }
+    }
+    &.comp_wide {
+        .comp_bottom {
+            display: flex;
+            align-items: center;
+            position: relative;
+            z-index: 2;
+            height: 44rem;
+            background-color: rgba(0,0,0,.8);
+            .com_bottm_inner {
+                position: relative;
+                max-width:100%;
+                &:before,&:after {
+                    content:"";
+                    display: block;
+                    position: absolute;
+                    top:0;
+                    left:0;
+                    z-index: 2;
+                    width: 10rem;
+                    height: 100%;
+                    background: rgb(0,0,0);
+                    background: linear-gradient(270deg, rgba(0,0,0,0) 43%, rgba(0,0,0,1) 100%);
+                }
+                &:after {
+                    left: auto;
+                    right:0;
+                    background: linear-gradient(90deg, rgba(0,0,0,0) 43%, rgba(0,0,0,1) 100%);
+                }
+            }
+        }
+    }
+    .comp_top {
+        z-index: 2;
+        height: 32.7rem;
+    }
+    .comp_md {
+        position: relative;
+        z-index: 2;
+        height: 52rem;
+        background-color: rgba(0,0,0,.5);
+    }
+    .dtlImgs {
+        .item {
+            .text_area {
+                margin-top:3rem;
+            }
+            &+.item {
+                margin-top:7.5rem;
+            }
+        }
+    }
+    &+.comp_1x_b_v_s_b {
+        position: relative;
+        z-index: 2;
+        margin-top:21.6rem;
+    }
+}

assets/js/common.js

@@ -181,11 +181,12 @@ $(document).ready(function() {
         freeMode: true,
         autoplay: {
             delay:1,
-            disableOnInteraction:false,
+            disableOnInteraction: false,
         },
         speed: 4000,
 
     }); 
+
     $('.pdpDisplayThemeSwiper').on('mouseleave', function() {
         console.log("시작")
         swiperTheme.autoplay.start();
@@ -432,16 +433,21 @@ $(document).on("click", ".dtthumb", function() {
     $(this).parent().find("li").removeClass("active");
     $(this).addClass("active");
 
-    let imgHtml = `
-        <div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
-            <img src="${dtlImgPath}-1.png" alt="디스플레이 테마1">
-        </div>
-        <div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="600">
-            <img src="${dtlImgPath}-2.png" alt="디스플레이 테마2">
-        </div>
-        <div class="image_area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="1000">
-            <img src="${dtlImgPath}-3.png" alt="디스플레이 테마3">
-        </div>
-    `;
-    dtlImgs.html(imgHtml);
+    $(".themeImg").each(function(e){
+        const idx = e+1;
+        const src = $(this).attr("src");
+        const lastIndex = src.lastIndexOf("/");
+        const pathWithoutFileName = src.substring(0, lastIndex);
+
+        $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
+
+    });
+    const visualBgSrc = $(".visualBg img").attr("src");
+    console.log(visualBgSrc)
+    const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
+    const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
+
+    $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);
+
+
 });

product/pdp_display_theme.html

@@ -270,7 +270,7 @@
                                         <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="이미지 상품명">
+                                        <img src="../assets/images/kia/pdp/display_themeNBA_Theme_AVNT.jpg" alt="이미지 상품명">
                                     </p>
                                 </div>
                                 <div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp4.png" alt="이미지 상품명"></div>
@@ -290,94 +290,77 @@
                             <h2>구성 상품</h2>
                             <div class="optionList">
                                 <div class="checkBtn withVideo">
-                                    <input type="checkbox" name="check" id="checkeOne" value="Light Type-A"  checked >
+                                    <input type="checkbox" name="check" id="checkeOne" value="Atlanta Hawks"  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>
+                                         <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme1.png" alt="Atlanta Hawks"></p>
                                         <div class="optionText">
                                             <p>
-                                                <strong>Light Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-ALight Type-A</strong>
-                                                <span>파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴파도 물결 패턴</span>
+                                                <strong>Atlanta Hawks</strong>
+                                                <span>애틀란타 호크스</span>
                                             </p>
                                         </div>
                                     </label>
                                 </div>
                                 <div class="checkBtn">
-                                    <input type="checkbox" name="check" id="checkeTwo"  value="Light Type-B">
+                                    <input type="checkbox" name="check" id="checkeTwo"  value="Boston Celtics">
                                     <label for="checkeTwo">
-                                        <p><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></p>
+                                        <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme2.png" alt="Boston Celtics"></p>
                                         <div>
                                             <p>
-                                                <strong>Light Type-B</strong>
-                                                <span>역동적인 사선 패턴</span>
+                                                <strong>Boston Celtics</strong>
+                                                <span>역동적인 느낌을 표현</span>
                                             </p>
                                         </div>
                                     </label>
                                 </div>
                                 <div class="checkBtn disabledBtn">
-                                   <input type="checkbox" name="check"  id="checkeThree" value="Light Type-C" disabled>
+                                   <input type="checkbox" name="check"  id="checkeThree" value="Chicago Bulls" disabled>
                                    <label for="checkeThree">
-                                        <p><img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명"></p>
+                                        <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls"></p>
                                         <div>
                                             <p>
-                                                <strong>Light Type-C</strong>
-                                                <span>부드러운 곡선 패턴</span>
+                                                <strong>Chicago Bulls</strong>
+                                                <span>하이테크적인 미래 감성을 표현</span>
                                             </p>
                                         </div>
                                     </label>
                                 </div>
                                 <div class="checkBtn">
-                                    <input type="checkbox" name="check" id="checkeTwo"  value="Light Type-B">
+                                    <input type="checkbox" name="check" id="checkeTwo"  value="Brooklyn Nets">
                                     <label for="checkeTwo">
-                                        <p><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></p>
+                                        <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets"></p>
                                         <div>
                                             <p>
-                                                <strong>Light Type-B</strong>
-                                                <span>역동적인 사선 패턴</span>
+                                                <strong>Brooklyn Nets</strong>
+                                                <span>강인하고 견고한 느낌을 표현</span>
                                             </p>
                                         </div>
                                     </label>
                                 </div>
                                 <div class="checkBtn disabledBtn">
-                                   <input type="checkbox" name="check"  id="checkeThree" value="Light Type-C" disabled>
+                                   <input type="checkbox" name="check"  id="checkeThree" value="Charlotte Hornets" disabled>
                                    <label for="checkeThree">
-                                        <p><img src="../assets/images/kia/product-img/producy-temp3.png" alt="이미지 상품명"></p>
+                                        <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets"></p>
                                         <div>
                                             <p>
-                                                <strong>Light Type-C</strong>
-                                                <span>부드러운 곡선 패턴</span>
+                                                <strong>Charlotte Hornets</strong>
+                                                <span>세련된 패턴으로 품격을 표현</span>
                                             </p>
                                         </div>
                                     </label>
                                 </div>
                                 <div class="checkBtn">
-                                    <input type="checkbox" name="check" id="checkeTwo"  value="Light Type-B">
+                                    <input type="checkbox" name="check" id="checkeTwo"  value="ELEGANT">
                                     <label for="checkeTwo">
-                                        <p><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></p>
+                                        <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="ELEGANT"></p>
                                         <div>
                                             <p>
-                                                <strong>Light Type-B</strong>
+                                                <strong>ELEGANT</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>
                         </div>
                         <!-- <div class="producOption">
@@ -476,7 +459,10 @@
                 
 
 
-<div class="comp_wide comp_1x_w_v_s_eS">
+<div class="comp_wide comp_1x_w_v_s_eS displayTheme">
+    <div class="visualBg">
+        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1_screen.jpg" alt="디스플레이 테마 이미지">
+    </div>
     <div class="comp_top">
         <div class="comp_body">
             <div class="text_area">
@@ -489,41 +475,37 @@
             </div>
         </div>
     </div>
-    <div class="visualBg">
-        <!-- <img src="../assets/images/kia/pdp/display_theme/KIA_EV9-Concept_light_Default.jpg" alt="디스플레이 테마 이미지"> -->
+    <div class="comp_md">
+        
     </div>
     <div class="comp_bottom">
         <div class="com_bottm_inner">
             <div class="swiper pdpDisplayThemeSwiper">
                 <ul class="swiper-wrapper">
-                    <li class="swiper-slide dtthumb active" value="../assets/images/kia/pdp/display_theme/NBA_Theme_A">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_AVNT.jpg" alt="EFFICIENT">
+                    <li class="swiper-slide dtthumb active" value="NBA_Theme1">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1.png" alt="Atlanta Hawks">
                         <p>Atlanta Hawks</p>
                     </li>
-                    <li class="swiper-slide dtthumb" value="../assets/images/kia/pdp/display_theme/NBA_Theme_B">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_AVNT-1.jpg" alt="ACTIVE">
+                    <li class="swiper-slide dtthumb" value="NBA_Theme2">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme2.png" alt="Boston Celtics">
                         <p>Boston Celtics</p>
                     </li>
-                    <li class="swiper-slide dtthumb" value="../assets/images/kia/pdp/display_theme/NBA_Theme_C">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_AVNT-2.jpg" alt="TECHNICAL">
+                    <li class="swiper-slide dtthumb" value="NBA_Theme3">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls">
                         <p>Chicago Bulls</p>
                     </li>
-                    <li class="swiper-slide dtthumb" value="../assets/images/kia/pdp/display_theme/NBA_Theme_A">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_AVNT-3.jpg" alt="SOLID">
+                    <li class="swiper-slide dtthumb" value="NBA_Theme4">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets">
                         <p>Brooklyn Nets</p>
                     </li>
-                    <li class="swiper-slide dtthumb" value="../assets/images/kia/pdp/display_theme/NBA_Theme_A">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_AVNT-4.jpg" alt="ELEGANT">
+                    <li class="swiper-slide dtthumb" value="NBA_Theme5">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets">
                         <p>Charlotte Hornets</p>
                     </li>
-                    <li class="swiper-slide dtthumb" value="../assets/images/kia/pdp/display_theme/NBA_Theme_A">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_AVNT-5.jpg" alt="ELEGANT">
+                    <li class="swiper-slide dtthumb" value="NBA_Theme6">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
                         <p>Atlanta</p>
                     </li>
-                    <li class="swiper-slide dtthumb" value="../assets/images/kia/pdp/display_theme/NBA_Theme_A">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_AVNT-6.jpg" alt="ELEGANT">
-                        <p>ELEGANT</p>
-                    </li>
                 </ul>
             </div>
         </div>
@@ -531,21 +513,47 @@
 </div>
 
 
-<div class="comp_wide comp_1x_b_v_s_b">
+<div class="comp_wide comp_1x_b_v_s_b displayTheme">
     <div class="comp_body dtlImgs">
-        <div class="image_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
-            <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_A-1.png" alt="디스플레이 테마1">
+        <div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
+            <div class="image_area">
+                <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-1.png" class="themeImg" alt="디스플레이 테마1">
+            </div>
+            <div class="text_area">
+                <h5>Cluster</h5>
+                <p>
+                    해당 사양은 디지털 패턴 라이팅 그릴이 적용된 차량에 한해서 구매할 수 있습니다. 참고하시길 바랍니다.
+                </p>
+            </div>
         </div>
-        <div class="image_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="600">
-            <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_A-2.png" alt="디스플레이 테마2">
+        <div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
+            <div class="image_area">
+                <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-2.png" class="themeImg" alt="디스플레이 테마1">
+            </div>
+            <div class="text_area">
+                <h5>Navigation</h5>
+                <p>
+                    나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
+                    미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
+                </p>
+            </div>
         </div>
-        <div class="image_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="1000">
-            <img src="../assets/images/kia/pdp/display_theme/NBA_Theme_A-3.png" alt="디스플레이 테마3">
+        <div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="200">
+            <div class="image_area">
+                <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-3.png" class="themeImg" alt="디스플레이 테마1">
+            </div>
+            <div class="text_area">
+                <h5>Profile</h5>
+                <p>
+                    나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
+                    미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
+                </p>
+            </div>
         </div>
     </div>
 </div>
 
-<div class="comp_wide comp_2x_b_h_s_e2">
+<div class="comp_wide comp_2x_b_h_s_e2 displayTheme">
     <div class="comp_body">
         <div class="item">
             <div class="image_area">
@@ -576,7 +584,7 @@
     </div>
 </div>
 
-<div class="comp_1x_b_n_n_e1">
+<div class="comp_1x_b_n_n_e1 displayTheme">
     <div class="comp_body">
         <h5>
             사양 이용 영상