수정 중2

kr/assets/css/pdp_detail.css

@@ -3940,6 +3940,7 @@
 .displayThemeDesney .available-theme .list ul li a {
   display: flex;
   flex-direction: column;
+  position: relative;
   width: 100%;
   height: 100%;
 }
@@ -3987,13 +3988,30 @@
 }
 .displayThemeDesney .available-theme .list ul li.more {
   overflow: visible;
+  position: relative;
   width: 100%;
-  aspect-ratio: 320/194;
+  aspect-ratio: 320/190;
   padding: 6.6666666667vw 5.5555555556vw;
   margin: 0;
-  background: url(../images/kia/pdp/display_theme_disney/box_more_m.png) no-repeat center/auto 100%;
-  border-radius: 7.2222222222vw 0.8rem 7.2222222222vw 0.8rem;
-  box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.1215686275);
+  background-color: transparent;
+  border-radius: 0;
+  box-shadow: none;
+}
+.displayThemeDesney .available-theme .list ul li.more:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 94.4444444444vw;
+  height: 58.3333333333vw;
+  background: url(../images/kia/pdp/display_theme_disney/box_more_m2.png) no-repeat center/auto 100%;
+}
+@media (min-width: 768px) {
+  .displayThemeDesney .available-theme .list ul li.more:before {
+    display: none;
+  }
 }
 @media (min-width: 768px) {
   .displayThemeDesney .available-theme .list ul li.more {

kr/assets/css/pdp_detail.scss

@@ -2075,8 +2075,7 @@
                 content: none;
               }
 
-              &:hover {
-              }
+              &:hover {}
 
               >p {
                 span {
@@ -2306,6 +2305,7 @@
           }
 
           @include maxtablet {
+
             &:before,
             &:after {
               display: none;
@@ -2374,6 +2374,7 @@
     // height: 10rem;
     .comp_body {
       .text_area {
+
         // display: flex;
         h3 {
           font-size: 3rem;
@@ -2752,6 +2753,7 @@
           }
 
           @include maxtablet {
+
             &:before,
             &:after {
               display: none;
@@ -2822,6 +2824,7 @@
 
     .comp_body {
       .text_area {
+
         // display: flex;
         h3 {
           margin-bottom: 2rem;
@@ -3379,6 +3382,7 @@
     // }
     .comp_body {
       .text_area {
+
         // display: flex;
         h3 {
           margin-bottom: 2rem;
@@ -3662,6 +3666,7 @@
     }
 
     &.paused {
+
       .btn-play,
       .btn-sound {
         display: block !important;
@@ -3793,6 +3798,7 @@
   }
 
   &.playing {
+
     .comp_body.layer_up,
     .thumb-swiper,
     .pdpInCarGameSwiper,
@@ -3982,8 +3988,7 @@
 }
 
 .scroll_area {
-  @include maxtablet {
-  }
+  @include maxtablet {}
 
   .web {
     display: block;
@@ -4382,6 +4387,7 @@
 
         br {
           display: none;
+
           &.br-m {
             display: block;
 
@@ -4462,6 +4468,7 @@
         justify-content: space-between;
         width: 100%;
         gap: 5.6rem 0;
+
         @include tablet {
           justify-content: center;
           gap: 2.4rem;
@@ -4488,6 +4495,7 @@
           a {
             display: flex;
             flex-direction: column;
+            position: relative;
             width: 100%;
             height: 100%;
 
@@ -4528,6 +4536,7 @@
                   margin-top: 2.4rem;
                   font-size: 1.6rem;
                 }
+
                 >* {
                   display: inline-block;
                 }
@@ -4537,18 +4546,35 @@
 
           &.more {
             overflow: visible;
+            position: relative;
             // width: 32rem;
             // height: 19.4rem;
             width: 100%;
             // height: vw(194);
-            aspect-ratio: 320 / 194;
+            aspect-ratio: 320 / 190;
             // padding: 2.4rem 2rem;
             padding: vw(24) vw(20);
             margin: 0;
-            background: url(../images/kia/pdp/display_theme_disney/box_more_m.png) no-repeat center / auto 100%;
             // border-radius: 2rem 0.8rem 2rem 0.8rem;
-            border-radius: vw(26) 0.8rem vw(26) 0.8rem;
-            box-shadow: 0px 0px 1rem 0px #0000001f;
+            background-color: transparent;
+            border-radius: 0;
+            box-shadow: none;
+
+            &:before {
+              content: "";
+              display: block;
+              position: absolute;
+              top: 50%;
+              left: 50%;
+              transform: translate(-50%, -50%);
+              width: vw(340);
+              height: vw(210);
+              background: url(../images/kia/pdp/display_theme_disney/box_more_m2.png) no-repeat center / auto 100%;
+
+              @include tablet {
+                display: none;
+              }
+            }
 
             @include tablet {
               width: 61rem;
@@ -4617,8 +4643,7 @@
                   border-right: 1rem solid transparent;
                   border-top: 1rem solid #fbc707;
 
-                  @include tablet {
-                  }
+                  @include tablet {}
                 }
               }
             }
@@ -4909,6 +4934,7 @@
           @include tablet {
             margin-bottom: 6.4rem;
           }
+
           &:not(.welcome-goodbye) {
             .image_area {
               overflow: hidden;
@@ -4941,9 +4967,11 @@
           margin-top: 1.4rem;
           font-size: 1.6rem;
         }
+
         .add {
           font-size: 1rem;
           color: #969696;
+
           @include tablet {
             display: block;
             font-size: 1.6rem;
@@ -4995,6 +5023,7 @@
     @include tablet {
       // padding: 9.6rem 0 0;
     }
+
     .inner {
       position: relative;
       z-index: 1;
@@ -5020,11 +5049,13 @@
         height: 20rem;
         background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
       }
+
       @include desktopMax {
         &::after {
           display: none;
         }
       }
+
       h3 {
         display: inline-flex;
         align-items: center;
@@ -5108,6 +5139,7 @@
             }
           }
         }
+
         &:nth-child(1) {
           p {
             @include tablet {
@@ -5191,6 +5223,7 @@
           img {
             display: block;
             max-width: 100%;
+
             &.web {
               display: none;
             }
@@ -5199,6 +5232,7 @@
               &.web {
                 display: block;
               }
+
               &.mobile {
                 display: none;
               }
@@ -5208,15 +5242,19 @@
           .img-msg {
             display: flex;
             gap: 1rem;
+
             @include tablet {
               gap: 1.9rem;
             }
+
             img {
               width: 18rem;
+
               @include tablet {
                 width: 25.6rem;
               }
             }
+
             .msg {
               display: flex;
               justify-content: flex-end;
@@ -5237,6 +5275,7 @@
                 padding: 2rem;
                 font-size: 1.4rem;
               }
+
               &:before {
                 content: "";
                 display: block;
@@ -5261,6 +5300,7 @@
         color: #fff;
         font-size: 1.2rem;
         text-align: center;
+
         @include tablet {
           margin-top: 16rem;
         }
@@ -5366,6 +5406,7 @@
     .text_area {
       text-align: left;
     }
+
     .comp_body {
       .item {
         @include tablet {