테마 버전 2

assets/css/pdp_detail.css

@@ -1959,13 +1959,9 @@
   .displayTheme.comp_wide .comp_body .text_area {
     margin-top: 4rem !important;
   }
-}
-@media (max-width: 768px) {
   .displayTheme.comp_wide .comp_body .text_area h3 {
     font-size: 3rem;
   }
-}
-@media (max-width: 768px) {
   .displayTheme.comp_wide .comp_body .text_area .info {
     font-size: 1.4rem;
   }
@@ -1975,22 +1971,42 @@
   align-items: center;
   position: relative;
   z-index: 2;
-  height: 26rem;
+  padding: 4rem 0;
   background-color: rgba(0, 0, 0, 0.8);
 }
+@media (max-width: 1025px) {
+  .displayTheme.comp_wide .comp_bottom {
+    padding: 3rem 0;
+  }
+}
 @media (max-width: 768px) {
   .displayTheme.comp_wide .comp_bottom {
-    height: 22rem;
+    padding: 2rem 0;
   }
 }
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner {
   display: flex;
+  justify-content: center;
   align-items: center;
   position: relative;
-  max-width: 100%;
+  width: 100%;
   height: 100%;
 }
-.displayTheme.comp_wide .comp_bottom .com_bottm_inner:before, .displayTheme.comp_wide .comp_bottom .com_bottm_inner:after {
+@media (max-width: 1025px) {
+  .displayTheme.comp_wide .comp_bottom .com_bottm_inner {
+    padding: 3rem 0;
+  }
+}
+@media (max-width: 768px) {
+  .displayTheme.comp_wide .comp_bottom .com_bottm_inner {
+    padding: 2.5rem 0;
+  }
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper {
+  width: 100%;
+  padding: 0 10rem;
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:before, .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
   content: "";
   display: block;
   position: absolute;
@@ -2002,55 +2018,59 @@
   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 {
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
   left: auto;
   right: 0;
   background: linear-gradient(90deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
 }
+@media (max-width: 768px) {
+  .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:before, .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
+    display: none;
+  }
+}
 @media (max-width: 1200px) {
   .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper {
     padding-right: 2rem;
   }
 }
-.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li {
-  width: 16rem !important;
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper {
+  width: 100%;
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
+  padding: 8px;
+  border: 2px solid transparent;
   cursor: pointer;
 }
-@media (max-width: 768px) {
-  .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li {
-    width: 14rem !important;
-  }
-}
 @media (max-width: 1240px) {
-  .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li:first-child {
+  .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide:first-child {
     margin-left: 2rem;
   }
 }
-.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li img {
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide img {
   width: 100%;
   border-radius: 0.6rem;
 }
-.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li p {
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
   margin-top: 0.3rem;
   font-size: 1.4rem;
   font-weight: 400;
-  color: #FFFFFF;
-  text-align: center;
+  color: #fff;
+  text-align: left;
 }
 @media (max-width: 768px) {
-  .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li p {
+  .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
     margin-top: 2rem;
   }
 }
-.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper ul li.active img {
-  border: 1px solid #FFFFFF;
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {
+  border-color: #fff;
 }
 .displayTheme .comp_top {
   z-index: 2;
   height: 48rem;
 }
-.displayTheme .comp_top .comp_body .text_area {
-  display: flex;
+.displayTheme .comp_top .comp_body .text_area h3 {
+  margin-bottom: 2rem;
 }
 .displayTheme .comp_top .comp_body .text_area > * {
   flex: 1;
@@ -2067,6 +2087,35 @@
     height: 3rem;
   }
 }
+.displayTheme.type2 .comp_bottom {
+  background-color: transparent;
+}
+.displayTheme.type2 .comp_bottom .com_bottm_inner .thumb-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.4rem 2rem;
+  width: 100%;
+  max-width: 118rem;
+  margin: 0 auto;
+}
+.displayTheme.type2 .comp_bottom .com_bottm_inner .thumb-wrap .dtthumb {
+  width: 13rem;
+}
+.displayTheme.type2 .comp_bottom .com_bottm_inner .thumb-wrap .img-area {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 13rem;
+  height: 12rem;
+  background-color: #fff;
+  border-radius: 0.8rem;
+}
+.displayTheme.type2 .comp_bottom .com_bottm_inner .thumb-wrap p {
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #fff;
+  text-transform: uppercase;
+}
 .displayTheme .dtlImgs .item {
   transition: opacity 0.2s;
 }

assets/css/pdp_detail.scss

@@ -1865,14 +1865,10 @@
             .text_area {
                 @include maxtablet{
                     margin-top: 4rem !important;
-                }
-                h3 {
-                    @include maxtablet{
+                    h3 {
                         font-size: 3rem;
                     }
-                }
-                .info {
-                    @include maxtablet{
+                    .info {
                         font-size: 1.4rem;
                     }
                 }
@@ -1884,44 +1880,67 @@
             align-items: center;
             position: relative;
             z-index: 2;
-            height: 26rem;
+            // max-height: 26rem;
+            padding:4rem 0;
             background-color: rgba(0,0,0,.8);
+            @include maxdesktop{
+                // max-height: 22rem;
+                padding:3rem 0;
+            }
             @include maxtablet{
-                height: 22rem;
+                // max-height: 22rem;
+                padding:2rem 0;
             }
             .com_bottm_inner {
                 display: flex;
+                justify-content: center;
                 align-items: center;
                 position: relative;
-                max-width:100%;
+                width:100%;
                 height: 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%);
+                @include maxdesktop{
+                    padding:3rem 0;
                 }
-                &:after {
-                    left: auto;
-                    right:0;
-                    background: linear-gradient(90deg, rgba(0,0,0,0) 43%, rgba(0,0,0,1) 100%);
+                @include maxtablet{
+                    padding:2.5rem 0;
                 }
                 .swiper {
+                    width: 100%;
+                    padding:0 10rem;
+                    &: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%);
+                    }
+                    @include maxtablet{
+                        &:before,&:after {
+                            display: none;
+                        }
+                    }
                     @media(max-width: 1200px){
                         padding-right: 2rem;
                     }
-                    ul{
-                        li{
-                            width: 16rem !important;
+                    .swiper-wrapper {
+                        width: 100%;
+                        .swiper-slide {
+                            // width: 16rem !important;
+                            padding:8px;
+                            border:2px solid transparent;
                             cursor: pointer;
                             @include maxtablet{
-                                width: 14rem !important;
+                                // width: 14rem !important;
                             }
                             &:first-child {
                                 @media(max-width: 1240px){
@@ -1936,16 +1955,14 @@
                                 margin-top: 0.3rem;
                                 font-size: 1.4rem;
                                 font-weight: 400;
-                                color: #FFFFFF;
-                                text-align: center;
+                                color: #fff;
+                                text-align: left;
                                 @media(max-width: 768px){
                                     margin-top: 2rem;
                                 }
                             }
                             &.active {
-                                img {
-                                    border: 1px solid #FFFFFF;
-                                }
+                                border-color: #fff;
                             }
                         }
                     }
@@ -1958,7 +1975,10 @@
         height: 48rem;
         .comp_body  {
             .text_area {
-                display: flex;
+                // display: flex;
+                h3 {
+                    margin-bottom:2rem;
+                }
                 > * {
                     flex:1;
                 }
@@ -1975,6 +1995,43 @@
             height: 3rem;
         }
     }
+
+    &.type2 {
+        .comp_bottom {
+            background-color: transparent;
+            .com_bottm_inner {
+
+                .thumb-wrap {
+                    display: flex;
+                    flex-wrap: wrap;
+                    gap:1.4rem 2rem;
+                    width: 100%;
+                    max-width: 118rem;
+                    margin: 0 auto;
+                    .dtthumb {
+                        width: 13rem;
+                    }
+                    .img-area {
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        width: 13rem;
+                        height: 12rem;
+                        background-color: #fff;
+                        border-radius: .8rem;
+                    }
+                    p {
+                        font-size: 1.4rem;
+                        font-weight: 600;
+                        color:#fff;
+                        text-transform: uppercase;
+                    }
+                }
+
+            }
+        }
+    }
+
     .dtlImgs {
         .item {
             transition: opacity 0.2s;

assets/js/common.js

@@ -176,8 +176,8 @@ $(document).ready(function() {
 
     //PDP Display Theme
     let flagAutoPlay = true;
-    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
-        slidesPerView: "auto",
+    let swiperThemeOption = {
+        slidesPerView: 8,
         loop:true,  
         freeMode: true,
         autoplay: {
@@ -185,6 +185,10 @@ $(document).ready(function() {
             disableOnInteraction: false,
         },
         speed: 3000,
+        navigation: {
+          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
+        },
         breakpoints: {
             // when window width is >= 320px
             320: {
@@ -200,25 +204,88 @@ $(document).ready(function() {
         },
         on: {
             init: function () {
+                $('.pdpDisplayThemeSwiper').hover(function(){
+                    if(flagAutoPlay==true){
+                        swiperTheme.autoplay.stop();
+                        console.log("이게 타냐")
+                    }
+                }, function(){
+                    if(flagAutoPlay==true){
+                        swiperTheme.autoplay.start();
+                        console.log("이게 타냐22222")
+                    }
+                });
             },
-          },
-    });
-    $('.pdpDisplayThemeSwiper').hover(function(){
-        if(flagAutoPlay==true){
-            swiperTheme.autoplay.stop();
-        }
-    }, function(){
-        if(flagAutoPlay==true){
-            swiperTheme.autoplay.start();
-        }
-    });
+        },
+    }
+    let swiperThemeNavOption = {
+        slidesPerView: 3,
+        slidesPerGroup: 3,
+        spaceBetween: 14,
+        loop: true,
+        freeMode: true,
+        centeredSlides: true,
+        // speed: 1000,
+        // autoplay: {
+        //     delay: 0,
+        //     disableOnInteraction: false
+        // },
+        navigation: {
+          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
+        },
+        breakpoints: {
+            '@0.75': {
+                slidesPerView: 5,
+                slidesPerGroup: 5,
+                spaceBetween: 10,
+            },
+            '@1.00': {
+                slidesPerView: 6,
+                slidesPerGroup: 6,
+                spaceBetween: 14,
+            },
+            '@1.50': {
+                slidesPerView: 8,
+                slidesPerGroup: 8,
+                spaceBetween: 14,
+            }
+        },
+        on: {
+            init: function (slide) {
+
+                console.log(slide)
+                $('.pdpDisplayThemeSwiper').hover(function(){
+                    if(flagAutoPlay==true){
+                        swiperTheme.autoplay.stop();
+                        console.log("333 타냐")
+                    }
+                }, function(){
+                    if(flagAutoPlay==true){
+                        swiperTheme.autoplay.stop();
+                        console.log("3333이게 타냐22222")
+                    }
+                });
+            },
+        },
+    }
+    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", swiperThemeNavOption);
     
+
+    // $(document).on("click", ".swiper-navigation .swiper-button-next", function() {
+    //     // swiperTheme.autoplay.stop();
+    //     flagAutoPlay==false
+    //     swiperTheme.destroy();
+    //     console.log('d')
+    //     swiperTheme = new Swiper(".pdpDisplayThemeSwiper", swiperThemeNavOption);
+    //     swiperTheme.autoplay.stop();
+    // });
                 
     $(document).on("click", ".dtthumb", function() {
                     
         const dtlImgPath = $(this).attr("value");
         const dtlImgs = $(".dtlImgs");
-        $(this).parent().find("li").removeClass("active");
+        $(this).parent().find(".dtthumb").removeClass("active");
         $(this).addClass("active");
 
         $('.dtlImgs .item').addClass('change')

product/pdp_display_theme.html

@@ -421,10 +421,10 @@
         <div class="comp_body layer_up">
             <div class="text_area">
                 <h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
-                    누구보다 돋보이게 빛나고, <br>차별화 된 라이팅 패턴
+                    누구보다 돋보이게 빛나고, 차별화 된 라이팅 패턴
                 </h3>
                 <div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
-                    운전자가 다가가면 다이나믹하게 반응하는 라이팅 패턴으로 <br>내 차만의 특별한 존재감을 확인해 보세요. 
+                    운전자가 다가가면 다이나믹하게 반응하는 라이팅 패턴으로 내 차만의 특별한 존재감을 확인해 보세요. 
                 </div>
             </div>
         </div>
@@ -433,36 +433,109 @@
     <div class="comp_bottom">
         <div class="com_bottm_inner">
             <div class="swiper pdpDisplayThemeSwiper">
-                <ul class="swiper-wrapper">
-                    <li class="swiper-slide dtthumb active" value="NBA_Theme1">
+                <div class="swiper-wrapper">
+                    <div 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="NBA_Theme2">
+                    </div>
+                    <div 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="NBA_Theme3">
+                    </div>
+                    <div 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="NBA_Theme4">
+                    </div>
+                    <div 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="NBA_Theme5">
+                    </div>
+                    <div 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="NBA_Theme6">
+                    </div>
+                    <div 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="NBA_Theme7">
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme7">
                         <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
                         <p>Cleveland Cavaliers</p>
-                    </li>
-                </ul>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme6">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
+                        <p>Atlanta</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme7">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <p>Cleveland Cavaliers</p>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme6">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
+                        <p>Atlanta</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme7">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <p>Cleveland Cavaliers</p>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div 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>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme6">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
+                        <p>Atlanta</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme7">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <p>Cleveland Cavaliers</p>
+                    </div>
+                </div>
+
+                <div class="swiper-navigation">
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                </div>
             </div>
         </div>
     </div>

product/pdp_display_theme2.html

@@ -290,7 +290,8 @@
                             <h2>구성 상품</h2>
                             <div class="optionList">
                                 <div class="checkBtn withVideo">
-                                    <input type="checkbox" name="check" id="check1" value="Atlanta Hawks"  checked >
+                                    <input type="checkbox" name="check" id="check1" value="washington 
+wizards"  checked >
                                     <label for="check1">
                                          <p><img src="../assets/images/kia/pdp/display_theme/NBA_Theme1.png" alt="Atlanta Hawks"></p>
                                         <div class="optionText">
@@ -377,7 +378,7 @@
             <div class="editorInner">
                 
 
-<div class="comp_wide comp_1x_w_v_o_b displayTheme">
+<div class="comp_wide comp_1x_w_v_o_b displayTheme type2">
     <div class="image_area visualBg">
         <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1_screen.jpg" alt="디스플레이 테마 이미지">
     </div>
@@ -396,37 +397,127 @@
     <div class="comp_md layer_up"></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="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="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="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="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="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="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="NBA_Theme7">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
-                        <p>Cleveland Cavaliers</p>
-                    </li>
-                </ul>
+            <div class="thumb-wrap">
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme01.png" alt="Atlanta Hawks"></span>
+                    <p>Atlanta <br>Hawks</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme02.png" alt="Atlanta Hawks"></span>
+                    <p>boston <br>celtics</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme03.png" alt="Atlanta Hawks"></span>
+                    <p>brooklyn <br>nets</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme04.png" alt="Atlanta Hawks"></span>
+                    <p>Charlotte <br>hornets</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme05.png" alt="Charlotte hornets"></span>
+                    <p>chicago <br>bulls</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme06.png" alt="chicago bulls"></span>
+                    <p>cleveland <br>cavaliers</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme07.png" alt="cleveland cavaliers"></span>
+                    <p>dallas <br>mavericks</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme08.png" alt="dallas mavericks"></span>
+                    <p>denver <br>nuggets</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme09.png" alt="denver nuggets"></span>
+                    <p>detroit <br>pistons</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme10.png" alt="detroit pistons"></span>
+                    <p>golden state <br>warriors</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme11.png" alt="golden state warriors"></span>
+                    <p>houston <br>rockets</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme12.png" alt="houston rockets"></span>
+                    <p>indiana <br>pacers</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme13.png" alt="indiana pacers"></span>
+                    <p>los angeles <br>clippers</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme14.png" alt="los angeles clippers"></span>
+                    <p>los angeles <br>lakers</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme15.png" alt="los angeles lakers"></span>
+                    <p>memphis <br>grizzlies</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme16.png" alt="memphis grizzlies"></span>
+                    <p>miami <br>heat</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme17.png" alt="miami heat"></span>
+                    <p>milwaukee <br>bucks</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme18.png" alt="milwaukee bucks"></span>
+                    <p>minnesota <br>timberwolves</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme19.png" alt="minnesota timberwolves"></span>
+                    <p>new orleans <br>pelicans</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme20.png" alt="new orleans pelicans"></span>
+                    <p>new york <br>knicks</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme21.png" alt="new york knicks"></span>
+                    <p>oklahoma city <br>thunder</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme22.png" alt="oklahoma city thunder"></span>
+                    <p>orlando <br>magic</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme23.png" alt="orlando magic"></span>
+                    <p>philadelphia <br>76ers</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme24.png" alt="philadelphia 76ers"></span>
+                    <p>phoenix <br>suns</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme25.png" alt="phoenix suns"></span>
+                    <p>portland <br>trailblazers</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme26.png" alt="portland trailblazers"></span>
+                    <p>sacramento <br>kings</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme27.png" alt="sacramento kings"></span>
+                    <p>san antonio <br>spurs</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme28.png" alt="san antonio spurs"></span>
+                    <p>toronto <br>raptors</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme29.png" alt="toronto raptors"></span>
+                    <p>utah <br>jazz</p>
+                </div>
+                <div class="dtthumb">
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme30.png" alt="utah jazz"></span>
+                    <p>washington <br>wizards</p>
+                </div>
             </div>
         </div>
     </div>