테마 버전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;
-                            padding:8px;
+                            width: 13.6rem !important;
+                            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: {
-          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
-          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
-        },
+        // navigation: {
+        //   nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+        //   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: {
-          nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
-          prevEl: ".pdpDisplayThemeSwiper .swiper-button-prev",
-        },
+        // navigation: {
+        //   nextEl: ".pdpDisplayThemeSwiper .swiper-button-next",
+        //   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() {