Update CSS styles for Disney display themes: adjust menu visibility for mobile and tablet views, refine padding in product detail sections, and enhance layout consistency across various components. Update HTML for improved content clarity and fix minor formatting issues.

kr/assets/css/common.css

@@ -1204,7 +1204,12 @@ video::-webkit-media-controls {
   }
 }
 .hederWarp_n .headerInner .gnb .menuWarp .menu .hiddenMenuDepth1Wrap .menuDepth1 {
-  display: none !important;
+  display: block !important;
+}
+@media (min-width: 768px) {
+  .hederWarp_n .headerInner .gnb .menuWarp .menu .hiddenMenuDepth1Wrap .menuDepth1 {
+    display: none !important;
+  }
 }
 .hederWarp_n .headerInner .gnb .menuWarp .mobileSubMenu {
   display: none;

kr/assets/css/common.scss

@@ -1406,7 +1406,11 @@ video::-webkit-media-controls {
 
           .hiddenMenuDepth1Wrap {
             .menuDepth1 {
-              display: none !important;
+              display: block !important;
+
+              @include tablet {
+                display: none !important;
+              }
             }
           }
         }

kr/assets/css/pdp_detail.css

@@ -4363,7 +4363,7 @@
   position: sticky;
   top: 5.6rem;
   z-index: 10;
-  padding: 2.4rem 2rem;
+  padding: 1.6rem 2rem;
   background: transparent;
   -webkit-backdrop-filter: blur(1.2rem);
           backdrop-filter: blur(1.2rem);

kr/assets/css/pdp_detail.scss

@@ -16,9 +16,11 @@
   .text-left {
     text-align: left !important;
   }
+
   .text-center {
     text-align: center !important;
   }
+
   .text-right {
     text-align: right !important;
   }
@@ -1573,7 +1575,7 @@
               }
             }
 
-            .btn-select.on + .list-member {
+            .btn-select.on+.list-member {
               display: block;
             }
 
@@ -1844,7 +1846,7 @@
                 font-size: 1.8rem;
               }
 
-              > p {
+              >p {
                 position: relative;
                 width: 93%;
 
@@ -1920,7 +1922,7 @@
               }
             }
 
-            dt.active + dd {
+            dt.active+dd {
               display: block;
             }
 
@@ -2052,7 +2054,7 @@
                     }
                   }
 
-                  button + button {
+                  button+button {
                     margin-top: 1rem;
 
                     @include tablet {
@@ -2064,7 +2066,7 @@
               }
             }
 
-            > .dd-padding {
+            >.dd-padding {
               padding-left: 6.5rem;
             }
           }
@@ -2085,10 +2087,9 @@
                 content: none;
               }
 
-              &:hover {
-              }
+              &:hover {}
 
-              > p {
+              >p {
                 span {
                   color: #9ea1a2;
                 }
@@ -2096,7 +2097,7 @@
             }
           }
 
-          dl + dl {
+          dl+dl {
             margin-top: 1rem;
           }
         }
@@ -2316,6 +2317,7 @@
           }
 
           @include maxtablet {
+
             &:before,
             &:after {
               display: none;
@@ -2384,6 +2386,7 @@
     // height: 10rem;
     .comp_body {
       .text_area {
+
         // display: flex;
         h3 {
           font-size: 3rem;
@@ -2394,7 +2397,7 @@
           font-size: 1.6rem;
         }
 
-        > * {
+        >* {
           flex: 1;
         }
       }
@@ -2470,7 +2473,7 @@
         }
       }
 
-      & + .item {
+      &+.item {
         margin-top: 8rem;
 
         @include maxtablet {
@@ -2484,7 +2487,7 @@
     }
   }
 
-  & + .comp_1x_b_v_s_b {
+  &+.comp_1x_b_v_s_b {
     position: relative;
     z-index: 2;
     margin-top: 0;
@@ -2510,7 +2513,7 @@
     margin-top: 8rem;
 
     .comp_body {
-      & + .comp_body {
+      &+.comp_body {
         margin-top: 10rem;
       }
 
@@ -2527,7 +2530,7 @@
 
 .displayThemeDtl {
   .swiper-navigation {
-    > * {
+    >* {
       top: 210px;
       left: -65px;
       width: 5rem;
@@ -2762,6 +2765,7 @@
           }
 
           @include maxtablet {
+
             &:before,
             &:after {
               display: none;
@@ -2832,12 +2836,13 @@
 
     .comp_body {
       .text_area {
+
         // display: flex;
         h3 {
           margin-bottom: 2rem;
         }
 
-        > * {
+        >* {
           flex: 1;
         }
       }
@@ -2906,7 +2911,7 @@
         }
       }
 
-      & + .item {
+      &+.item {
         margin-top: 8rem;
 
         @include maxtablet {
@@ -2920,7 +2925,7 @@
     }
   }
 
-  & + .comp_1x_b_v_s_b {
+  &+.comp_1x_b_v_s_b {
     position: relative;
     z-index: 2;
     margin-top: 2rem;
@@ -3193,7 +3198,7 @@
   }
 }
 
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type="checkbox"] + label {
+.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type="checkbox"]+label {
   height: auto;
   padding: 2rem 2rem 2rem 0;
 
@@ -3389,12 +3394,13 @@
     // }
     .comp_body {
       .text_area {
+
         // display: flex;
         h3 {
           margin-bottom: 2rem;
         }
 
-        > * {
+        >* {
           flex: 1;
         }
       }
@@ -3424,7 +3430,7 @@
 
 .comp_wide {
   &.title-only {
-    & + .comp_wide {
+    &+.comp_wide {
       margin-top: 4rem;
     }
   }
@@ -3672,6 +3678,7 @@
     }
 
     &.paused {
+
       .btn-play,
       .btn-sound {
         display: block !important;
@@ -3803,6 +3810,7 @@
   }
 
   &.playing {
+
     .comp_body.layer_up,
     .thumb-swiper,
     .pdpInCarGameSwiper,
@@ -3943,7 +3951,7 @@
 
 .pdpDtl {
   .swiper-navigation {
-    > * {
+    >* {
       top: 210px;
       left: -65px;
       width: 5rem;
@@ -3992,8 +4000,7 @@
 }
 
 .scroll_area {
-  @include maxtablet {
-  }
+  @include maxtablet {}
 
   .web {
     display: block;
@@ -4287,7 +4294,7 @@
         display: block;
 
         .swiper-slide {
-          & + .swiper-slide {
+          &+.swiper-slide {
             margin-top: 5rem;
           }
         }
@@ -4295,7 +4302,7 @@
     }
 
     .swiper-navigation {
-      > * {
+      >* {
         top: 210px;
         left: -65px;
         width: 5rem;
@@ -4459,6 +4466,7 @@
           text-align: center;
         }
       }
+
       em {
         display: block;
         width: 100%;
@@ -4466,6 +4474,7 @@
         font-size: 1.4rem;
         font-weight: 400;
         text-align: center;
+
         @include tablet {
           margin-top: 2.4rem;
           font-size: 1.6rem;
@@ -4565,7 +4574,7 @@
                   font-size: 1.6rem;
                 }
 
-                > * {
+                >* {
                   display: inline-block;
                 }
               }
@@ -4761,13 +4770,16 @@
               }
             }
           }
+
           &.stay-tuned-item {
             width: 100%;
             height: 4.8rem;
+
             @include tablet {
               width: 20rem;
               height: 100%;
             }
+
             .stay-tuned {
               display: flex;
               align-items: center;
@@ -4780,6 +4792,7 @@
               background-color: #f2f4f6;
               border-radius: 0.6rem;
               letter-spacing: -0.05em;
+
               span {
                 display: block;
                 width: 1.8rem;
@@ -4787,12 +4800,15 @@
                 margin-right: 0.6rem;
                 background: url("../images/kia/promotion/ico_stay_tuned.svg") no-repeat center / contain;
               }
+
               strong {
                 padding: 0.2rem 0 0;
                 line-height: 1;
               }
+
               @include tablet {
                 flex-direction: column;
+
                 span {
                   position: relative;
                   width: 7.2rem;
@@ -4802,6 +4818,7 @@
                   background: none;
                   border: 1px solid #b2b8bd;
                   border-radius: 0.8rem;
+
                   &:before {
                     content: "";
                     display: block;
@@ -4815,6 +4832,7 @@
                     border-radius: 0.5rem;
                   }
                 }
+
                 strong {
                   padding: 0;
                   font-size: 1.6rem;
@@ -4846,8 +4864,10 @@
     &.mickey {
       padding-top: 0;
       background: #fff;
+
       .tab-box {
         padding-top: 0;
+
         .discover-area {
           padding: 4rem 0 0;
           background: url(../images/kia/pdp/display_theme_mickey/bg_design_m.jpg) no-repeat center top / 100% auto;
@@ -4856,10 +4876,13 @@
             padding: 12rem 0;
             background: url(../images/kia/pdp/display_theme_mickey/bg_design.jpg) no-repeat center top / 192rem auto;
           }
-          > .comp_top {
+
+          >.comp_top {
             padding-bottom: 0;
+
             h3 {
               margin-bottom: 4.8rem;
+
               @include tablet {
                 margin-bottom: 8rem;
               }
@@ -4868,11 +4891,14 @@
         }
       }
     }
+
     &.pixar {
       padding-top: 0;
       background: #fff;
+
       .tab-box {
         padding-top: 0;
+
         .discover-area {
           padding: 4rem 0 0;
           background: url(../images/kia/pdp/display_theme_mickey/pixar/bg_design_m.jpg) no-repeat center top / 100% auto;
@@ -4881,13 +4907,17 @@
             padding: 12rem 0;
             background: url(../images/kia/pdp/display_theme_mickey/pixar/bg_design.jpg) no-repeat center top / 192rem auto;
           }
-          > .comp_top {
+
+          >.comp_top {
             padding-bottom: 0;
+
             h3 {
               margin-bottom: 4.8rem;
+
               @include tablet {
                 margin-bottom: 8rem;
               }
+
               &.color-000 {
                 color: #000;
               }
@@ -4939,7 +4969,7 @@
         position: sticky;
         top: 5.6rem;
         z-index: 10;
-        padding: 2.4rem 2rem;
+        padding: 1.6rem 2rem;
         background: transparent;
         backdrop-filter: blur(1.2rem);
 
@@ -5072,6 +5102,7 @@
                   }
                 }
               }
+
               &.active {
                 .tab-btn {
                   @include tablet {
@@ -5108,6 +5139,7 @@
 
         .index-area {
           padding: 0 2rem 6rem;
+
           @include tablet {
             padding: 0 0 10rem;
           }
@@ -5165,9 +5197,11 @@
         font-weight: 600;
         color: #fff;
         line-height: 1.25;
+
         &.color-000 {
           color: #000;
         }
+
         @include tablet {
           font-size: 2.4rem;
         }
@@ -5179,9 +5213,11 @@
         color: #fff;
         line-height: 1.55;
         letter-spacing: -0.025em;
+
         &.color-000 {
           color: #000;
         }
+
         @include tablet {
           margin-top: 1.4rem;
           font-size: 1.6rem;
@@ -5206,30 +5242,36 @@
       &.comp_body {
         .text_area {
           margin-top: 11.4rem;
+
           @include tablet {
             margin-top: 13.7rem;
           }
         }
       }
     }
+
     .comp_body {
       .text_area {
         margin-top: 11.4rem;
+
         @include tablet {
           margin-top: 13.7rem;
         }
       }
     }
+
     .available-theme {
       @include tablet {
         min-height: auto;
       }
+
       .list {
         padding: 0.6rem 2rem 5.6rem;
 
         @include tablet {
           padding-top: 4.8rem;
         }
+
         ul {
           li {
             aspect-ratio: 156 / 184;
@@ -5239,11 +5281,13 @@
               height: 31.2rem;
               aspect-ratio: inherit;
             }
+
             &.more {
               strong {
                 .speech-bubble {
                   top: -5.4rem;
                   transform: translateX(35%);
+
                   @include tablet {
                     top: -7.8rem;
                     transform: translateX(-20%);
@@ -5257,6 +5301,7 @@
                 width: 20rem;
                 height: 100%;
               }
+
               strong {
                 @include tablet {
                   text-align: center;
@@ -5267,23 +5312,28 @@
         }
       }
     }
+
     &.discover-epic-design {
       .tab-wrap {
         @include tablet {
           padding-top: 6.4rem;
         }
+
         .tab-box {
           padding-top: 0;
           margin-top: 0;
+
           @include tablet {
             margin-top: 6.4rem;
           }
         }
+
         .tab-menu {
           @include tablet {
             // padding: 8rem 2rem 6.4rem;
             padding: 1.6rem 2rem 1.6rem;
           }
+
           .btn-select {
             overflow: hidden;
             display: flex;
@@ -5325,9 +5375,11 @@
 
           ul {
             background-color: #f2f4f6;
+
             @include tablet {
               background-color: transparent;
             }
+
             li {
               .tab-btn {
                 display: flex;
@@ -5351,9 +5403,11 @@
                   border: 0;
                 }
               }
+
               &.active {
                 .tab-btn {
                   color: #05141f;
+
                   @include tablet {
                     color: #fff;
                   }
@@ -5362,10 +5416,12 @@
             }
           }
         }
+
         .text_area {
           margin-top: 1.6rem;
           text-align: left;
         }
+
         p {
           .add {
             color: #acacac;
@@ -5393,7 +5449,7 @@
 
   .welcome-goodbye {
     .image_area {
-      & + .image_area {
+      &+.image_area {
         margin-top: 0.4rem;
 
         @include tablet {
@@ -5454,12 +5510,15 @@
           display: none;
         }
       }
+
       .inner {
         position: relative;
         padding-left: 1.8rem;
+
         @include tablet {
           padding-left: 3.6rem;
         }
+
         &:before {
           content: "";
           display: block;
@@ -5471,6 +5530,7 @@
           width: 0.6rem;
           // height: 5rem;
           background: #ea0029;
+
           @include tablet {
             width: 1.2rem;
             height: 10rem;
@@ -5525,7 +5585,7 @@
           align-items: center;
         }
 
-        & + li {
+        &+li {
           margin-top: 3.7rem;
 
           @include tablet {
@@ -5610,10 +5670,12 @@
               background-size: 5.1rem auto;
               text-align: left;
             }
+
             &::before {
               content: "2";
               left: auto;
               right: 0;
+
               @include tablet {
                 left: 0;
                 right: auto;
@@ -5644,6 +5706,7 @@
               background-position: 0 0;
               background-size: 4.9rem auto;
             }
+
             &::before {
               content: "3";
             }
@@ -5893,34 +5956,42 @@
       .list {
         padding: 3rem 2rem 3.8rem;
         background: url(../images/kia/pdp/display_theme_mickey/union-top.png) no-repeat center bottom / auto 1.46rem;
+
         @include tablet {
           padding: 7.2rem 2rem 9.9rem;
           background-size: 100% auto;
         }
       }
+
       h3 {
         padding: 4rem 2rem;
         background: #fff;
         box-shadow: 0px 0px 16px 0px #0000001f;
+
         @include tablet {
           height: 23.4rem;
         }
       }
     }
   }
+
   .swiper-navigation {
     display: none !important;
+
     @include tablet {
       display: block !important;
     }
   }
+
   .swiper-button-next,
   .swiper-button-prev {
     position: absolute !important;
   }
+
   .swiper-slide-frozen {
     .text_area {
       margin-top: 7.2rem;
+
       @include tablet {
         margin-top: 14rem;
       }
@@ -6028,4 +6099,4 @@
   text-indent: -9999em;
   background: url(../images/kia/pdp/display_theme_disney/btn_zoom_close.png) no-repeat 0 0 / 100% auto;
   cursor: pointer;
-}
+}

kr/product/pdp_display_theme_disney_frozen.html

@@ -495,11 +495,11 @@
                 </div>
                 <div class="comp_body layer_up">
                   <div class="text_area">
-                    <h3 class="color-fff" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
+                    <h3 class="color-fff"">
                       디즈니 테마와 함께하는<br class="br-m" />
                       일상 속 특별한 여행
                     </h3>
-                    <div class="info color-fff" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
+                    <div class="info color-fff"">
                       기아와 디즈니가 만나<br class="br-m" />
                       새로운 디스플레이 테마를 선보입니다.<br />
                       디즈니 디스플레이 테마와 함께<br class="br-m" />
@@ -515,8 +515,8 @@
                 </div>
                 <div class="comp_body layer_up">
                   <div class="text_area">
-                    <h3 class="color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 테마와 함께하는 <br class="br-m" />일상 속 특별한 여행</h3>
-                    <div class="info color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 미키와 친구들의 유쾌한 감성이 기아의 디스플레이 테마 속에 담겼습니다.<br />차 안에서 펼쳐지는 또 하나의 즐거운 이야기를 지금 시작하세요.</div>
+                    <h3 class="color-000">디즈니 테마와 함께하는 <br class="br-m" />일상 속 특별한 여행</h3>
+                    <div class="info color-000">디즈니 미키와 친구들의 유쾌한 감성이 기아의 디스플레이 테마 속에 담겼습니다.<br />차 안에서 펼쳐지는 또 하나의 즐거운 이야기를 지금 시작하세요.</div>
                   </div>
                 </div>
               </div>
@@ -704,8 +704,7 @@
                               <span class="add">※ 출시 예정 테마는 변경될 수 있습니다.</span>
                             </p>
                             <div class="img-area">
-                              <img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons2.png" class="web" alt="" />
-                              <img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons2_m.png" class="mobile" alt="" />
+                              <img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons2.png" alt="" />
                             </div>
                             <!-- <div class="img-area">
                               <span class="img-msg">
@@ -829,8 +828,8 @@
                               매 순간 드라이브의 즐거움을 느껴보세요.
                             </p>
                             <div class="img-area">
-                              <img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons1.png" class="web" alt="" />
-                              <img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons1_m.png" class="mobile" alt="" />
+                              <img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1.png" class="web" alt="" />
+                              <img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1_m.png" class="mobile" alt="" />
                             </div>
                           </li>
                           <li>

kr/product/pdp_display_theme_disney_pixar.html

@@ -632,8 +632,7 @@
                   <div class="three-reasons">
                     <div class="tit-area">
                       <div class="inner aos-init" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
-                        <p>디즈니 픽사 테마를 놓쳐서는 안 될</p>
-                        <h3>세 가지 이유</h3>
+                        <p>디즈니 픽사 테마를<br class="br-m" /> 놓쳐서는 안 될<br class="br-pc"> 세 가지 이유</p>
                       </div>
                     </div>
                     <div class="reasons">
@@ -672,7 +671,7 @@
                             <div class="img-area"><img src="../assets/images/kia/pdp/display_theme_mickey/pixar/img_reasons3.png" class="web" alt="" /> <img src="../assets/images/kia/pdp/display_theme_mickey/pixar/img_reasons3_m.png" class="mobile" alt="" /></div>
                           </li>
                         </ol>
-                        <div class="copyright">ⓒ Disney</div>
+                        <div class="copyright">ⓒ Disney/Pixar</div>
                       </div>
                     </div>
                   </div>