테마 버전3

assets/css/pdp_detail.css

@@ -1955,6 +1955,9 @@
   background: rgb(255, 255, 255);
   background: linear-gradient(180deg, rgba(255, 255, 255, 0) 43%, rgb(255, 255, 255) 100%);
 }
+.displayTheme.comp_wide .comp_body.layer_up .text_area {
+  margin-top: 7rem;
+}
 @media (max-width: 768px) {
   .displayTheme.comp_wide .comp_body .text_area {
     margin-top: 4rem !important;
@@ -2037,10 +2040,16 @@
   width: 100%;
 }
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
-  padding: 8px;
+  width: 13.6rem !important;
+  padding: 6px;
   border: 2px solid transparent;
   cursor: pointer;
 }
+@media (max-width: 768px) {
+  .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
+    width: 8rem !important;
+  }
+}
 @media (max-width: 1240px) {
   .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide:first-child {
     margin-left: 2rem;
@@ -2048,13 +2057,13 @@
 }
 .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 .swiper-wrapper .swiper-slide p {
   margin-top: 0.3rem;
   font-size: 1.4rem;
   font-weight: 400;
   color: #fff;
+  text-transform: uppercase;
   text-align: left;
 }
 @media (max-width: 768px) {
@@ -2067,7 +2076,7 @@
 }
 .displayTheme .comp_top {
   z-index: 2;
-  height: 48rem;
+  height: 36rem;
 }
 .displayTheme .comp_top .comp_body .text_area h3 {
   margin-bottom: 2rem;

assets/css/pdp_detail.scss

@@ -1862,6 +1862,11 @@
 
     &.comp_wide {
         .comp_body {
+            &.layer_up {
+                .text_area {
+                    margin-top:7rem;
+                }
+            }
             .text_area {
                 @include maxtablet{
                     margin-top: 4rem !important;
@@ -1935,12 +1940,12 @@
                     .swiper-wrapper {
                         width: 100%;
                         .swiper-slide {
-                            // width: 16rem !important;
+                            width: 13.6rem !important;
-                            padding:8px;
+                            padding:6px;
                             border:2px solid transparent;
                             cursor: pointer;
                             @include maxtablet{
-                                // width: 14rem !important;
+                                width: 8rem !important;
                             }
                             &:first-child {
                                 @media(max-width: 1240px){
@@ -1949,13 +1954,13 @@
                             }
                             img{
                                 width: 100%;
-                                border-radius: 0.6rem;
                             }
                             p {
                                 margin-top: 0.3rem;
                                 font-size: 1.4rem;
                                 font-weight: 400;
                                 color: #fff;
+                                text-transform: uppercase;
                                 text-align: left;
                                 @media(max-width: 768px){
                                     margin-top: 2rem;
@@ -1972,7 +1977,7 @@
     }
     .comp_top {
         z-index: 2;
-        height: 48rem;
+        height: 36rem;
         .comp_body  {
             .text_area {
                 // display: flex;

assets/js/common.js

@@ -172,12 +172,12 @@ $(document).ready(function() {
         slidesPerView: "auto",
         spaceBetween: 20,
         freeMode: true,
-    }); 
+    });
 
     //PDP Display Theme
     let flagAutoPlay = true;
     let swiperThemeOption = {
-        slidesPerView: 8,
+        slidesPerView: 'auto',
         loop:true,  
         freeMode: true,
         autoplay: {
@@ -185,21 +185,21 @@ $(document).ready(function() {
             disableOnInteraction: false,
         },
         speed: 3000,
-        navigation: {
+        // navigation: {
-          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+        //   nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
-          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
+        //   prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
-        },
+        // },
         breakpoints: {
             // when window width is >= 320px
             320: {
-                spaceBetween: 20,
+                spaceBetween: 10,
             },
             // when window width is >= 480px
             480: {
             },
             // when window width is >= 640px
             640: {
-                spaceBetween: 40,
+                spaceBetween: 14,
             }
         },
         on: {
@@ -230,10 +230,10 @@ $(document).ready(function() {
         //     delay: 0,
         //     disableOnInteraction: false
         // },
-        navigation: {
+        // navigation: {
-          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+        //   nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
-          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
+        //   prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
-        },
+        // },
         breakpoints: {
             '@0.75': {
                 slidesPerView: 5,
@@ -269,7 +269,15 @@ $(document).ready(function() {
             },
         },
     }
-    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", swiperThemeNavOption);
+    var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", swiperThemeOption); 
+    
+    var swiperThemeDtl = new Swiper(".displayThemeDtl", {
+        slidesPerView: 1,
+        navigation: {
+          nextEl: ".displayThemeDtl .swiper-button-next",
+          prevEl: ".displayThemeDtl .swiper-button-prev",
+        },
+    });
     
 
     // $(document).on("click", ".swiper-navigation .swiper-button-next", function() {

product/pdp_display_theme.html

@@ -434,108 +434,132 @@
         <div class="com_bottm_inner">
             <div class="swiper pdpDisplayThemeSwiper">
                 <div class="swiper-wrapper">
-                    <div class="swiper-slide dtthumb active" value="NBA_Theme1">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme1">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1.png" alt="Atlanta Hawks">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme01.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">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme02.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">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme03.png" alt="brooklyn nets">
-                        <p>Chicago Bulls</p>
+                        <p>brooklyn nets</p>
                     </div>
                     <div class="swiper-slide dtthumb" value="NBA_Theme4">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme04.png" alt="CHICAGO BULLS">
-                        <p>Brooklyn Nets</p>
+                        <p>CHICAGO BULLS</p>
                     </div>
                     <div class="swiper-slide dtthumb" value="NBA_Theme5">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme05.png" alt="Charlotte hornets">
-                        <p>Charlotte Hornets</p>
+                        <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">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme06.png" alt="cleveland cavaliers">
-                        <p>Atlanta</p>
+                        <p>cleveland cavaliers</p>
                     </div>
                     <div class="swiper-slide dtthumb" value="NBA_Theme7">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme07.png" alt="dallas mavericks">
-                        <p>Cleveland Cavaliers</p>
+                        <p>dallas mavericks</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme3">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme8">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme08.png" alt="Denver Nuggets">
-                        <p>Chicago Bulls</p>
+                        <p>Denver Nuggets</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme4">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme9">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme09.png" alt="Detroit Pistons">
-                        <p>Brooklyn Nets</p>
+                        <p>Detroit Pistons</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme5">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme10">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme10.png" alt="Golden State Warriors">
-                        <p>Charlotte Hornets</p>
+                        <p>Golden State Warriors</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme6">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme11">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme11.png" alt="Houston Rockets">
-                        <p>Atlanta</p>
+                        <p>Houston Rockets</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme7">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme12">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme12.png" alt="Indiana Pacers">
-                        <p>Cleveland Cavaliers</p>
+                        <p>Indiana Pacers</p>
                     </div>
-                    <div class="swiper-slide dtthumb active" value="NBA_Theme1">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme13">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1.png" alt="Atlanta Hawks">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme13.png" alt="Los Angeles Clippers">
-                        <p>Atlanta Hawks</p>
+                        <p>Los Angeles Clippers</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme2">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme14">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme2.png" alt="Boston Celtics">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme14.png" alt="Los Angeles Lakers">
-                        <p>Boston Celtics</p>
+                        <p>Los Angeles Lakers</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme3">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme15">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme15.png" alt="Memphis Grizzlies">
-                        <p>Chicago Bulls</p>
+                        <p>Memphis Grizzlies</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme4">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme16">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme16.png" alt="Miami Heat">
-                        <p>Brooklyn Nets</p>
+                        <p>Miami Heat</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme5">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme17">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme17.png" alt="Milwaukee Bucks">
-                        <p>Charlotte Hornets</p>
+                        <p>Milwaukee Bucks</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme6">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme18">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme18.png" alt="Minnesota Timberwolves">
-                        <p>Atlanta</p>
+                        <p>Minnesota Timberwolves</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme7">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme19">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme19.png" alt="New Orleans Pelicans">
-                        <p>Cleveland Cavaliers</p>
+                        <p>New Orleans Pelicans</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme3">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme20">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme20.png" alt="New York Knicks">
-                        <p>Chicago Bulls</p>
+                        <p>New York Knicks</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme4">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme21">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme21.png" alt="Oklahoma City Thunder">
-                        <p>Brooklyn Nets</p>
+                        <p>Oklahoma City Thunder</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme5">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme22">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme22.png" alt="Orlando Magic">
-                        <p>Charlotte Hornets</p>
+                        <p>Orlando Magic</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme6">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme23">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme23.png" alt="philadelphia 76ers">
-                        <p>Atlanta</p>
+                        <p>philadelphia 76ers</p>
                     </div>
-                    <div class="swiper-slide dtthumb" value="NBA_Theme7">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme24">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme24.png" alt="Phoenix Suns">
-                        <p>Cleveland Cavaliers</p>
+                        <p>Phoenix Suns</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme25">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme25.png" alt="Portland Trailblazers">
+                        <p>Portland Trailblazers</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme26">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme26.png" alt="Sacramento Kings">
+                        <p>Sacramento Kings</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme27">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme27.png" alt="San Antonio Spurs">
+                        <p>San Antonio Spurs</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme28">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme28.png" alt="Toronto Raptors">
+                        <p>Toronto Raptors</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme29">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme29.png" alt="Utah Jazz">
+                        <p>Utah Jazz</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme30">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme30.png" alt="Washington Wizards">
+                        <p>Washington Wizards</p>
                     </div>
                 </div>
 
-                <div class="swiper-navigation">
+                <!-- <div class="swiper-navigation">
                     <div class="swiper-button-next"></div>
                     <div class="swiper-button-prev"></div>
-                </div>
+                </div> -->
             </div>
         </div>
     </div>

product/pdp_display_theme2.html

@@ -399,123 +399,123 @@ wizards"  checked >
         <div class="com_bottm_inner">
             <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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/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>
+                    <span class="img-area"><img src="../assets/images/kia/pdp/display_theme/NBA_logo/logo_theme30.png" alt="utah jazz"></span>
                     <p>washington <br>wizards</p>
                 </div>
             </div>

product/pdp_display_theme3.html

@@ -288,7 +288,7 @@
                         </div>
                         <div class="producOption scroll">
                             <h2>구성 상품</h2>
-                            <div class="optionList noBox">
+                            <div class="optionList">
                                 <div class="checkBtn withVideo">
                                     <input type="checkbox" name="check" id="check1" value="Atlanta Hawks"  checked >
                                     <label for="check1">
@@ -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,133 @@
     <div class="comp_bottom">
         <div class="com_bottm_inner">
             <div class="swiper pdpDisplayThemeSwiper">
-                <ul class="swiper-wrapper">
+                <div class="swiper-wrapper">
-                    <li class="swiper-slide dtthumb active" value="NBA_Theme1">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme1">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1.png" alt="Atlanta Hawks">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme01.png" alt="Atlanta Hawks">
                         <p>Atlanta Hawks</p>
-                    </li>
+                    </div>
-                    <li class="swiper-slide dtthumb" value="NBA_Theme2">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme2">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme2.png" alt="Boston Celtics">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme02.png" alt="Boston Celtics">
                         <p>Boston Celtics</p>
-                    </li>
+                    </div>
-                    <li class="swiper-slide dtthumb" value="NBA_Theme3">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme3">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme3.png" alt="Chicago Bulls">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme03.png" alt="brooklyn nets">
-                        <p>Chicago Bulls</p>
+                        <p>brooklyn nets</p>
-                    </li>
+                    </div>
-                    <li class="swiper-slide dtthumb" value="NBA_Theme4">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme4">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme4.png" alt="Brooklyn Nets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme04.png" alt="CHICAGO BULLS">
-                        <p>Brooklyn Nets</p>
+                        <p>CHICAGO BULLS</p>
-                    </li>
+                    </div>
-                    <li class="swiper-slide dtthumb" value="NBA_Theme5">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme5">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme5.png" alt="Charlotte Hornets">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme05.png" alt="Charlotte hornets">
-                        <p>Charlotte Hornets</p>
+                        <p>Charlotte hornets</p>
-                    </li>
+                    </div>
-                    <li class="swiper-slide dtthumb" value="NBA_Theme6">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme6">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme6.png" alt="Atlanta">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme06.png" alt="cleveland cavaliers">
-                        <p>Atlanta</p>
+                        <p>cleveland cavaliers</p>
-                    </li>
+                    </div>
-                    <li class="swiper-slide dtthumb" value="NBA_Theme7">
+                    <div class="swiper-slide dtthumb" value="NBA_Theme7">
-                        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme7.png" alt="Cleveland Cavaliers">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme07.png" alt="dallas mavericks">
-                        <p>Cleveland Cavaliers</p>
+                        <p>dallas mavericks</p>
-                    </li>
+                    </div>
-                </ul>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme8">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme08.png" alt="Denver Nuggets">
+                        <p>Denver Nuggets</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme9">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme09.png" alt="Detroit Pistons">
+                        <p>Detroit Pistons</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme10">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme10.png" alt="Golden State Warriors">
+                        <p>Golden State Warriors</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme11">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme11.png" alt="Houston Rockets">
+                        <p>Houston Rockets</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme12">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme12.png" alt="Indiana Pacers">
+                        <p>Indiana Pacers</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme13">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme13.png" alt="Los Angeles Clippers">
+                        <p>Los Angeles Clippers</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme14">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme14.png" alt="Los Angeles Lakers">
+                        <p>Los Angeles Lakers</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme15">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme15.png" alt="Memphis Grizzlies">
+                        <p>Memphis Grizzlies</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme16">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme16.png" alt="Miami Heat">
+                        <p>Miami Heat</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme17">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme17.png" alt="Milwaukee Bucks">
+                        <p>Milwaukee Bucks</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme18">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme18.png" alt="Minnesota Timberwolves">
+                        <p>Minnesota Timberwolves</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme19">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme19.png" alt="New Orleans Pelicans">
+                        <p>New Orleans Pelicans</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme20">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme20.png" alt="New York Knicks">
+                        <p>New York Knicks</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme21">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme21.png" alt="Oklahoma City Thunder">
+                        <p>Oklahoma City Thunder</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme22">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme22.png" alt="Orlando Magic">
+                        <p>Orlando Magic</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme23">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme23.png" alt="philadelphia 76ers">
+                        <p>philadelphia 76ers</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme24">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme24.png" alt="Phoenix Suns">
+                        <p>Phoenix Suns</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme25">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme25.png" alt="Portland Trailblazers">
+                        <p>Portland Trailblazers</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme26">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme26.png" alt="Sacramento Kings">
+                        <p>Sacramento Kings</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme27">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme27.png" alt="San Antonio Spurs">
+                        <p>San Antonio Spurs</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme28">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme28.png" alt="Toronto Raptors">
+                        <p>Toronto Raptors</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme29">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme29.png" alt="Utah Jazz">
+                        <p>Utah Jazz</p>
+                    </div>
+                    <div class="swiper-slide dtthumb" value="NBA_Theme30">
+                        <img src="../assets/images/kia/pdp/display_theme/NBA/logo_theme30.png" alt="Washington Wizards">
+                        <p>Washington Wizards</p>
+                    </div>
+                </div>
+
+                <!-- <div class="swiper-navigation">
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                </div> -->
             </div>
         </div>
     </div>
@@ -472,39 +569,50 @@
 <div class="comp_wide comp_1x_b_v_s_b displayTheme">
     <div class="comp_body dtlImgs">
         <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="image_area">
+            <div class="swiper displayThemeDtl">
-                <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-1.png" class="themeImg" alt="디스플레이 테마1">
+                <div class="swiper-wrapper">
-            </div>
+                    <div class="swiper-slide">
-            <div class="text_area">
+                        <div class="image_area">
-                <h5>Cluster</h5>
+                            <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-1.png" class="themeImg" alt="디스플레이 테마1">
-                <p>
+                        </div>
-                    해당 사양은 디지털 패턴 라이팅 그릴이 적용된 차량에 한해서 구매할 수 있습니다. 참고하시길 바랍니다.
+                        <div class="text_area">
-                </p>
+                            <h5>Cluster</h5>
-            </div>
+                            <p>
-        </div>
+                                해당 사양은 디지털 패턴 라이팅 그릴이 적용된 차량에 한해서 구매할 수 있습니다. 참고하시길 바랍니다.
-        <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">
+                            </p>
-            <div class="image_area">
+                        </div>
-                <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-2.png" class="themeImg" alt="디스플레이 테마1">
+                    </div>
-            </div>
+                    <div class="swiper-slide">
-            <div class="text_area">
+                        <div class="image_area">
-                <h5>Navigation</h5>
+                            <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-2.png" class="themeImg" alt="디스플레이 테마2">
-                <p>
+                        </div>
-                    나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
+                        <div class="text_area">
-                    미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
+                            <h5>Navigation</h5>
-                </p>
+                            <p>
-            </div>
+                                나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
-        </div>
+                                미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
-        <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">
+                            </p>
-            <div class="image_area">
+                        </div>
-                <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-3.png" class="themeImg" alt="디스플레이 테마1">
+                    </div>
-            </div>
+                    <div class="swiper-slide">
-            <div class="text_area">
+                        <div class="image_area">
-                <h5>Profile</h5>
+                            <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1-3.png" class="themeImg" alt="디스플레이 테마3">
-                <p>
+                        </div>
-                    나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
+                        <div class="text_area">
-                    미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
+                            <h5>Profile</h5>
-                </p>
+                            <p>
+                                나만의 취향과 선호도에 맞게 앱 또는 차량 내에서 자유롭게 원하는 패턴을 선택할 수 있습니다.<br>
+                                미래지향적인 디자인으로 차량을 더욱 세련되게 스타일링 할 수 있습니다.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+                <div class="swiper-navigation">
+                    <div class="swiper-button-next"></div>
+                    <div class="swiper-button-prev"></div>
+                </div>
             </div>
+            
         </div>
     </div>
 </div>
@@ -823,9 +931,3 @@
         <!--//footer-->
     </body>
 </html>
-
-
-
-
-
-