인카 디스플레이테마 이미지 추가

assets/css/pdp_detail.css

@@ -2445,8 +2445,48 @@
   }
 }
 .inCarGame + .comp_1x_b_v_s_b .dtlImgs .text_area {
+  display: none;
   margin-top: 3.2rem;
 }
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme0 .text_theme0 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme1 .text_theme1 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme2 .text_theme2 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme3 .text_theme3 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme4 .text_theme4 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme5 .text_theme5 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme6 .text_theme6 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme7 .text_theme7 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme8 .text_theme8 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme9 .text_theme9 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme10 .text_theme10 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme11 .text_theme11 {
+  display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme12 .text_theme12 {
+  display: block;
+}
 .inCarGame .comp_body .text_area h5 {
   font-size: 3rem;
 }

assets/css/pdp_detail.scss

@@ -2368,8 +2368,14 @@
         }
         .dtlImgs {
             .text_area {
+                display: none;
                 margin-top:3.2rem;
             }
+            @for $i from 0 through 12 {
+                &.theme#{$i} {
+                    .text_theme#{$i} {display: block;}
+                }
+            }
         }
     }
 
@@ -2413,4 +2419,8 @@
             }
         }
     }
+
+    
+
+    
 }

assets/js/common.js

@@ -461,13 +461,16 @@ function pdpInCarGameSwiperDtl(){
     
     flagScroll = false;
 }
-$(document).on("click", ".inCarGame .dtthumb", function() {
-                    
+$(document).on("click", ".inCarGame .dtthumb", function(e) {
+    const thumbIdx = e+1;
     const dtlImgPath = $(this).attr("value");
     const dtlImgs = $(".inCarGame .dtlImgs");
     $(".inCarGame .dtthumb").removeClass("active");
     $(this).addClass("active");
 
+    dtlImgs.removeClass();
+    dtlImgs.addClass(`comp_body dtlImgs ${dtlImgPath}`);
+
     $('.inCarGame .dtlImgs .item').addClass('change')
     setTimeout(function() {
         $('.inCarGame .dtlImgs .item').removeClass('change')

product/pdp_in_car_game.html

@@ -379,12 +379,16 @@
                         <p>스펀지밥 런</p>
                     </div>
                     <div class="swiper-slide dtthumb" value="theme6">
-                        <img src="../assets/images/kia/pdp/in_car_game/thumb06.png" alt="마블 미션">
+                        <img src="../assets/images/kia/pdp/in_car_game/thumb06.png" alt="벽돌 깨기 퀘스트">
+                        <p>벽돌 깨기 퀘스트</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="theme7">
+                        <img src="../assets/images/kia/pdp/in_car_game/thumb07.png" alt="마블 미션">
                         <p>마블 미션</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="theme6">
-                        <img src="../assets/images/kia/pdp/in_car_game/thumb07.png" alt="벽돌 깨기 퀘스트">
-                        <p>벽돌 깨기 퀘스트</p>
+                    <div class="swiper-slide dtthumb" value="theme8">
+                        <img src="../assets/images/kia/pdp/in_car_game/thumb08.png" alt="벽돌 깨기 퀘스트">
+                        <p>타워 디펜스 킹</p>
                     </div>
                 </div>
 
@@ -399,7 +403,7 @@
 
 
 <div class="comp_wide comp_1x_b_v_s_b inCarGame">
-    <div class="comp_body dtlImgs">
+    <div class="comp_body dtlImgs theme1">
         <div class="item aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
             <div class="swiper inCarGameDtl">
                 <div class="swiper-wrapper">
@@ -438,7 +442,47 @@
                 </div>
             </div>
             
-            <div class="text_area">
+            <div class="text_area text_theme1">
+                <h5>
+                    퍼즐 자르기
+                </h5>
+                <p>
+                    볼을 발사하여 3개를 만들면 상쇄하고 점수를 획득할 수 있습니다. 마블미션에는 수많은 레벨이 준비되어 있습니다. 모든 레벨에서 세개의 별을 획득해 보세요!
+                </p>
+            </div>
+            <div class="text_area text_theme2">
+                <h5>
+                    마인드 게임
+                </h5>
+                <p>
+                    볼을 발사하여 3개를 만들면 상쇄하고 점수를 획득할 수 있습니다. 마블미션에는 수많은 레벨이 준비되어 있습니다. 모든 레벨에서 세개의 별을 획득해 보세요!
+                </p>
+            </div>
+            <div class="text_area text_theme3">
+                <h5>
+                    다른 그림 찾기
+                </h5>
+                <p>
+                    볼을 발사하여 3개를 만들면 상쇄하고 점수를 획득할 수 있습니다. 마블미션에는 수많은 레벨이 준비되어 있습니다. 모든 레벨에서 세개의 별을 획득해 보세요!
+                </p>
+            </div>
+            <div class="text_area text_theme4">
+                <h5>
+                    우드 벤처
+                </h5>
+                <p>
+                    볼을 발사하여 3개를 만들면 상쇄하고 점수를 획득할 수 있습니다. 마블미션에는 수많은 레벨이 준비되어 있습니다. 모든 레벨에서 세개의 별을 획득해 보세요!
+                </p>
+            </div>
+            <div class="text_area text_theme5">
+                <h5>
+                    스펀지밥 런
+                </h5>
+                <p>
+                    볼을 발사하여 3개를 만들면 상쇄하고 점수를 획득할 수 있습니다. 마블미션에는 수많은 레벨이 준비되어 있습니다. 모든 레벨에서 세개의 별을 획득해 보세요!
+                </p>
+            </div>
+            <div class="text_area text_theme6">
                 <h5>
                     마블 미션
                 </h5>
@@ -446,6 +490,21 @@
                     볼을 발사하여 3개를 만들면 상쇄하고 점수를 획득할 수 있습니다. 마블미션에는 수많은 레벨이 준비되어 있습니다. 모든 레벨에서 세개의 별을 획득해 보세요!
                 </p>
             </div>
+            <div class="text_area text_theme7">
+                <h5>
+                    벽돌 깨기 퀘스트
+                </h5>
+                <p>
+                    볼을 발사하여 3개를 만들면 상쇄하고 점수를 획득할 수 있습니다. 마블미션에는 수많은 레벨이 준비되어 있습니다. 모든 레벨에서 세개의 별을 획득해 보세요!
+                </p>
+            <div class="text_area text_theme8">
+                <h5>
+                    타워 디펜스 킹
+                </h5>
+                <p>
+                    볼을 발사하여 3개를 만들면 상쇄하고 점수를 획득할 수 있습니다. 마블미션에는 수많은 레벨이 준비되어 있습니다. 모든 레벨에서 세개의 별을 획득해 보세요!
+                </p>
+            </div>
         </div>
     </div>
 </div>