한글 디즈니 작업 중

kr/assets/css/pdp_detail.css

@@ -3954,6 +3954,9 @@
     font-size: 1.6rem;
   }
 }
+.displayThemeDesney .available-theme .list ul li a .txt .hashs > * {
+  display: inline-block;
+}
 .displayThemeDesney .available-theme .list ul li.more {
   width: 32rem;
   height: 19.4rem;
@@ -3987,6 +3990,7 @@
 .displayThemeDesney .available-theme .list ul li.more strong {
   display: flex;
   align-items: center;
+  position: relative;
   margin-bottom: 1.2rem;
   font-size: 1.8rem;
   color: #000;
@@ -3998,6 +4002,48 @@
     margin-bottom: 3.6rem;
   }
 }
+.displayThemeDesney .available-theme .list ul li.more strong .speech-bubble {
+  display: inline-block;
+  position: absolute;
+  top: -1.5rem;
+  left: 77%;
+  background-color: #fbc707;
+  padding: 0.8rem 0.9rem;
+  border-radius: 0.4rem;
+  font-size: 1.2rem;
+  color: #000;
+  line-height: 1.3;
+  font-weight: 600;
+  text-align: center;
+  white-space: nowrap;
+}
+@media (min-width: 768px) {
+  .displayThemeDesney .available-theme .list ul li.more strong .speech-bubble {
+    top: -7rem;
+    left: 50%;
+    transform: translateX(-70%);
+    padding: 1.2rem 1.2rem 1rem;
+    border-radius: 0.4rem;
+    font-size: 1.6rem;
+  }
+}
+.displayThemeDesney .available-theme .list ul li.more strong .speech-bubble::after {
+  content: "";
+  display: block;
+  position: absolute;
+  bottom: -1rem;
+  left: 1.65rem;
+  transform: 0;
+  border-left: 1rem solid transparent;
+  border-right: 1rem solid transparent;
+  border-top: 1rem solid #fbc707;
+}
+@media (min-width: 768px) {
+  .displayThemeDesney .available-theme .list ul li.more strong .speech-bubble::after {
+    left: 50%;
+    transform: translateX(-50%);
+  }
+}
 .displayThemeDesney .available-theme .list ul li.more .arrow {
   display: inline-block;
   position: relative;

kr/assets/css/pdp_detail.scss

@@ -1563,7 +1563,7 @@
               }
             }
 
-            .btn-select.on+.list-member {
+            .btn-select.on + .list-member {
               display: block;
             }
 
@@ -1834,7 +1834,7 @@
                 font-size: 1.8rem;
               }
 
-              >p {
+              > p {
                 position: relative;
                 width: 93%;
 
@@ -1910,7 +1910,7 @@
               }
             }
 
-            dt.active+dd {
+            dt.active + dd {
               display: block;
             }
 
@@ -2042,7 +2042,7 @@
                     }
                   }
 
-                  button+button {
+                  button + button {
                     margin-top: 1rem;
 
                     @include tablet {
@@ -2054,7 +2054,7 @@
               }
             }
 
-            >.dd-padding {
+            > .dd-padding {
               padding-left: 6.5rem;
             }
           }
@@ -2075,9 +2075,10 @@
                 content: none;
               }
 
-              &:hover {}
+              &:hover {
+              }
 
-              >p {
+              > p {
                 span {
                   color: #9ea1a2;
                 }
@@ -2085,7 +2086,7 @@
             }
           }
 
-          dl+dl {
+          dl + dl {
             margin-top: 1rem;
           }
         }
@@ -2305,7 +2306,6 @@
           }
 
           @include maxtablet {
-
             &:before,
             &:after {
               display: none;
@@ -2374,7 +2374,6 @@
     // height: 10rem;
     .comp_body {
       .text_area {
-
         // display: flex;
         h3 {
           font-size: 3rem;
@@ -2385,7 +2384,7 @@
           font-size: 1.6rem;
         }
 
-        >* {
+        > * {
           flex: 1;
         }
       }
@@ -2461,7 +2460,7 @@
         }
       }
 
-      &+.item {
+      & + .item {
         margin-top: 8rem;
 
         @include maxtablet {
@@ -2475,7 +2474,7 @@
     }
   }
 
-  &+.comp_1x_b_v_s_b {
+  & + .comp_1x_b_v_s_b {
     position: relative;
     z-index: 2;
     margin-top: 0;
@@ -2501,7 +2500,7 @@
     margin-top: 8rem;
 
     .comp_body {
-      &+.comp_body {
+      & + .comp_body {
         margin-top: 10rem;
       }
 
@@ -2518,7 +2517,7 @@
 
 .displayThemeDtl {
   .swiper-navigation {
-    >* {
+    > * {
       top: 210px;
       left: -65px;
       width: 5rem;
@@ -2753,7 +2752,6 @@
           }
 
           @include maxtablet {
-
             &:before,
             &:after {
               display: none;
@@ -2824,13 +2822,12 @@
 
     .comp_body {
       .text_area {
-
         // display: flex;
         h3 {
           margin-bottom: 2rem;
         }
 
-        >* {
+        > * {
           flex: 1;
         }
       }
@@ -2899,7 +2896,7 @@
         }
       }
 
-      &+.item {
+      & + .item {
         margin-top: 8rem;
 
         @include maxtablet {
@@ -2913,7 +2910,7 @@
     }
   }
 
-  &+.comp_1x_b_v_s_b {
+  & + .comp_1x_b_v_s_b {
     position: relative;
     z-index: 2;
     margin-top: 2rem;
@@ -3186,7 +3183,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;
 
@@ -3382,13 +3379,12 @@
     // }
     .comp_body {
       .text_area {
-
         // display: flex;
         h3 {
           margin-bottom: 2rem;
         }
 
-        >* {
+        > * {
           flex: 1;
         }
       }
@@ -3418,7 +3414,7 @@
 
 .comp_wide {
   &.title-only {
-    &+.comp_wide {
+    & + .comp_wide {
       margin-top: 4rem;
     }
   }
@@ -3666,7 +3662,6 @@
     }
 
     &.paused {
-
       .btn-play,
       .btn-sound {
         display: block !important;
@@ -3798,7 +3793,6 @@
   }
 
   &.playing {
-
     .comp_body.layer_up,
     .thumb-swiper,
     .pdpInCarGameSwiper,
@@ -3939,7 +3933,7 @@
 
 .pdpDtl {
   .swiper-navigation {
-    >* {
+    > * {
       top: 210px;
       left: -65px;
       width: 5rem;
@@ -3988,7 +3982,8 @@
 }
 
 .scroll_area {
-  @include maxtablet {}
+  @include maxtablet {
+  }
 
   .web {
     display: block;
@@ -4282,7 +4277,7 @@
         display: block;
 
         .swiper-slide {
-          &+.swiper-slide {
+          & + .swiper-slide {
             margin-top: 5rem;
           }
         }
@@ -4290,7 +4285,7 @@
     }
 
     .swiper-navigation {
-      >* {
+      > * {
         top: 210px;
         left: -65px;
         width: 5rem;
@@ -4504,6 +4499,9 @@
                   margin-top: 2.4rem;
                   font-size: 1.6rem;
                 }
+                > * {
+                  display: inline-block;
+                }
               }
             }
           }
@@ -4538,6 +4536,7 @@
             strong {
               display: flex;
               align-items: center;
+              position: relative;
               margin-bottom: 1.2rem;
               font-size: 1.8rem;
               color: #000;
@@ -4547,6 +4546,48 @@
                 font-size: 3rem;
                 margin-bottom: 3.6rem;
               }
+
+              .speech-bubble {
+                display: inline-block;
+                position: absolute;
+                top: -1.5rem;
+                left: 77%;
+                background-color: #fbc707;
+                padding: 0.8rem 0.9rem;
+                border-radius: 0.4rem;
+                font-size: 1.2rem;
+                color: #000;
+                line-height: 1.3;
+                font-weight: 600;
+                text-align: center;
+                white-space: nowrap;
+
+                @include tablet {
+                  top: -7rem;
+                  left: 50%;
+                  transform: translateX(-70%);
+                  padding: 1.2rem 1.2rem 1rem;
+                  border-radius: 0.4rem;
+                  font-size: 1.6rem;
+                }
+
+                &::after {
+                  content: "";
+                  display: block;
+                  position: absolute;
+                  bottom: -1rem;
+                  left: 1.65rem;
+                  transform: 0;
+                  border-left: 1rem solid transparent;
+                  border-right: 1rem solid transparent;
+                  border-top: 1rem solid #fbc707;
+
+                  @include tablet {
+                    left: 50%;
+                    transform: translateX(-50%);
+                  }
+                }
+              }
             }
 
             .arrow {
@@ -4873,7 +4914,7 @@
 
   .welcome-goodbye {
     .image_area {
-      &+.image_area {
+      & + .image_area {
         margin-top: 0.8rem;
 
         @include tablet {
@@ -4975,7 +5016,7 @@
           flex-wrap: wrap;
         }
 
-        &+li {
+        & + li {
           margin-top: 2.4rem;
 
           @include tablet {

kr/assets/css/product.css

@@ -152,6 +152,11 @@
   position: relative;
   padding-right: 4rem;
 }
+@media (min-width: 768px) {
+  .contentWarp .productView .productRight .optionWarp .producTitle h1 {
+    font-size: 4.5rem;
+  }
+}
 .contentWarp .productView .productRight .optionWarp .producTitle h1 .btn-wish {
   position: absolute;
   top: 50%;

kr/assets/css/product.scss

@@ -129,6 +129,9 @@
           h1 {
             position: relative;
             padding-right: 4rem;
+            @include tablet {
+              font-size: 4.5rem;
+            }
             .btn-wish {
               position: absolute;
               top: 50%;

kr/product/pdp_display_theme_disney.html

@@ -286,13 +286,13 @@
             <div class="producTitle">
               <!-- <span>차량SW</span> -->
               <h1>
-                Marvel’s Avengers Display Themes
+                마블 어벤져스 <br />디스플레이 테마
                 <button type="button" class="btn-wish"></button>
               </h1>
-              <p>Marvel's Avengers Special Themes that add style to your drive</p>
+              <p>마블 어벤져스와 함께 차량에 특별한 감성을 더해보세요!</p>
             </div>
             <div class="producOption scroll">
-              <h2>Select product option you want.</h2>
+              <h2>원하시는 상품을 선택해주세요.</h2>
               <div class="optionList">
                 <div class="checkBtn withVideo">
                   <input type="checkbox" name="check" id="check1" value="kia" checked />
@@ -300,7 +300,7 @@
                     <p><img src="../assets/images/kia/pdp/display_theme_disney/marvel_logo1.png" alt="marvel1" /></p>
                     <div class="optionText">
                       <p>
-                        <strong>Marvel’s Avengers Comics</strong>
+                        <strong>마블 어벤져스 어셈블</strong>
                       </p>
                     </div>
                   </label>
@@ -311,7 +311,7 @@
                     <p><img src="../assets/images/kia/pdp/display_theme_disney/marvel_logo2.png" alt="marvel2" /></p>
                     <div class="optionText">
                       <p>
-                        <strong>Marvel’s Avengers Assemble</strong>
+                        <strong>마블 어벤져스 코믹스</strong>
                       </p>
                     </div>
                   </label>
@@ -322,7 +322,7 @@
                     <p><img src="../assets/images/kia/pdp/display_theme_disney/marvel_logo2.png" alt="marvel2" /></p>
                     <div class="optionText">
                       <p>
-                        <strong>Marvel’s Avengers Assemble</strong>
+                        <strong>마블 어벤져스 코믹스</strong>
                         <i class="badge">구매완료</i>
                       </p>
                     </div>
@@ -332,15 +332,18 @@
             </div>
 
             <div class="priceOption">
-              <h2>원하시는 결제 옵션을 선택해주세요</h2>
+              <h2>원하시는 구매 옵션을 선택해주세요.</h2>
               <div class="priceList">
                 <div class="radioBtn">
                   <input type="radio" name="radioBtn" id="radioOne" value="평생이용권 150000" />
                   <label for="radioOne">
                     <span>평생 이용</span>
                     <span>
-                      <span class="discount"><i>₩ 29,900</i></span>
-                      <span class="price"><b class="dc">16%</b><strong>₩ 5,000</strong></span>
+                      <!-- <span class="discount"><i>₩ 29,900</i></span> -->
+                      <span class="price">
+                        <!-- <b class="dc">16%</b> -->
+                        <strong>₩ 29,000</strong>
+                      </span>
                     </span>
                   </label>
                 </div>
@@ -376,20 +379,23 @@
                 <img src="../assets/images/kia/pdp/display_theme_disney/logo_marvel.png" width="89" class="web" alt="MARVEL" />
                 <img src="../assets/images/kia/pdp/display_theme_disney/logo_marvel.png" width="53" class="mobile" alt="MARVEL" />
               </h2>
-              <h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">Bring artwork from the Marvel Universe to your Kia!</h3>
-              <div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">Kia and Marvel's Avengers come together to present a unique in-car experience like no other. <br />Starting with the Marvel's Avengers display themes, Make every drive special with a unique onboard experience.</div>
+              <h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">마블 유니버스를 차량에서 경험해 보세요.</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>
           <div class="comp_bottom available-theme">
-            <h3>Available Marvel Themes</h3>
+            <h3>내 드라이브에 더 어울리는 마블 테마는?</h3>
             <div class="list">
               <ul>
                 <li>
                   <a href="#">
                     <img src="../assets/images/kia/pdp/display_theme_disney/thumb_theme1.png" alt="MARVEL" />
                     <span class="txt">
-                      <strong>Marvel’s Avengers Comics</strong>
-                      <span class="hashs">#TheOriginal #ComicVibes #Vibrant</span>
+                      <strong>마블 어벤져스 어셈블</strong>
+                      <span class="hashs"><span>#어벤져스본부</span> <span>#홀로그램스타일</span> <span>#시크한무드</span></span>
                     </span>
                   </a>
                 </li>
@@ -397,16 +403,19 @@
                   <a href="#">
                     <img src="../assets/images/kia/pdp/display_theme_disney/thumb_theme2.png" alt="MARVEL" />
                     <span class="txt">
-                      <strong>Marvel’s Avengers Comics</strong>
-                      <span class="hashs">#AvengersHeadquaters #Holographic #Chic</span>
+                      <strong>마블 어벤져스 코믹스</strong>
+                      <span class="hashs"><span>#오리지널</span> <span>#코믹북감성</span> <span>#다이나믹무드</span></span>
                     </span>
                   </a>
                 </li>
                 <li class="more">
                   <a href="#">
-                    <strong>More to Come <span class="arrow"></span></strong>
+                    <strong>
+                      마블 테마는 계속 됩니다.
+                      <em class="speech-bubble">앞으로 출시될 테마들을 기대해주세요!</em>
+                    </strong>
                     <img src="../assets/images/kia/pdp/display_theme_disney/thumb_theme_more.png" alt="MARVEL" />
-                    <span class="hashs">※ Availability may change.</span>
+                    <span class="hashs">※ 출시 예정 테마는 변경될 수 있습니다.</span>
                   </a>
                 </li>
               </ul>