이미지 추가

assets/css/pdp_detail.css

@@ -1943,6 +1943,20 @@
 .displayTheme .visualBg img {
   width: 100%;
 }
+.displayTheme .visualBg img.mobile {
+  display: none;
+}
+@media (max-width: 768px) {
+  .displayTheme .visualBg img.web {
+    display: none;
+  }
+  .displayTheme .visualBg img.mobile {
+    display: block;
+    -o-object-fit: initial;
+       object-fit: initial;
+    height: auto;
+  }
+}
 .displayTheme .visualBg:after {
   content: "";
   display: block;
@@ -2038,16 +2052,18 @@
 }
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper {
   width: 100%;
+  transition-timing-function: linear;
 }
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
-  width: 13.6rem !important;
+  width: 16.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;
+    width: 18rem !important;
+    padding: 0.8rem;
   }
 }
 @media (max-width: 1240px) {
@@ -2056,7 +2072,7 @@
   }
 }
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide img {
-  width: 100%;
+  max-width: 100%;
 }
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
   margin-top: 0.3rem;
@@ -2068,7 +2084,7 @@
 }
 @media (max-width: 768px) {
   .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
-    margin-top: 2rem;
+    margin-top: 0.5rem;
   }
 }
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {

assets/css/pdp_detail.scss

@@ -1845,6 +1845,17 @@
         max-width: 192rem;
         img {
             width: 100%;
+            &.mobile {display: none;}
+
+            @include maxtablet{
+                &.web {display: none;}
+                &.mobile {
+                    display: block;
+                    object-fit: initial;
+                    height: auto;
+                }
+            }
+
         }
         &:after {
             content:"";
@@ -1939,13 +1950,15 @@
                     }
                     .swiper-wrapper {
                         width: 100%;
+                        transition-timing-function : linear;
                         .swiper-slide {
-                            width: 13.6rem !important;
+                            width: 16.6rem !important;
                             padding:6px;
                             border:2px solid transparent;
                             cursor: pointer;
                             @include maxtablet{
-                                width: 8rem !important;
+                                width: 18rem !important;
+                                padding:.8rem;
                             }
                             &:first-child {
                                 @media(max-width: 1240px){
@@ -1953,7 +1966,7 @@
                                 }
                             }
                             img{
-                                width: 100%;
+                                max-width: 100%;
                             }
                             p {
                                 margin-top: 0.3rem;
@@ -1963,7 +1976,7 @@
                                 text-transform: uppercase;
                                 text-align: left;
                                 @media(max-width: 768px){
-                                    margin-top: 2rem;
+                                    margin-top: .5rem;
                                 }
                             }
                             &.active {

product/pdp_display_theme.html

@@ -415,7 +415,8 @@
 
 <div class="comp_wide comp_1x_w_v_o_b displayTheme">
     <div class="image_area visualBg">
-        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1_screen.jpg" alt="디스플레이 테마 이미지">
+        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1_screen.png" class="web" alt="디스플레이 테마 이미지">
+        <img src="../assets/images/kia/pdp/display_theme/NBA_Theme1_screen_m.png" class="mobile" alt="디스플레이 테마 이미지">
     </div>
     <div class="comp_top">
         <div class="comp_body layer_up">