스트리밍 프리미엄 수정 완료

assets/css/pdp_detail.css

@@ -3418,7 +3418,7 @@
   left: -65px;
   width: 5rem;
   height: 5rem;
-  border: 1px solid #D3D3D3;
+  border: 1px solid #d3d3d3;
   border-radius: 50%;
   background: rgb(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center/15px auto;
 }
@@ -3455,24 +3455,51 @@
   background-color: #000;
 }
 
-.scroll_area {
+.scroll_area .web {
+  display: block;
+}
+@media (max-width: 768px) {
+  .scroll_area .web {
+    display: none;
+  }
+}
+.scroll_area .mobile {
+  display: none;
+  position: relative;
+  padding-top: 3rem;
+}
+.scroll_area .mobile:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 16px;
+  background: url("../images/kia/pdp/streaming_premium/img_spec_index.png") no-repeat 100% 0/contain;
+}
+.scroll_area .mobile .header {
+  overflow: hidden;
+  flex: none;
+  width: 125px;
+  height: 460px;
+  background: url("../images/kia/pdp/streaming_premium/img_spec_m2.png") no-repeat 0 0/auto 100%;
+}
+.scroll_area .mobile .cont {
   overflow: hidden;
   overflow-x: auto;
+  height: 460px;
 }
-.scroll_area .web {
+.scroll_area .mobile .cont:after {
+  content: "";
   display: block;
-}
-@media (max-width: 768px) {
-  .scroll_area .web {
-    display: none;
-  }
-}
-.scroll_area .mobile {
-  display: none;
+  width: 306px;
+  height: 100%;
+  background: url("../images/kia/pdp/streaming_premium/img_spec_m2.png") no-repeat -126px 0/auto 100%;
 }
 @media (max-width: 768px) {
   .scroll_area .mobile {
-    display: block;
+    display: flex;
   }
 }
 @media (max-width: 768px) {

assets/css/pdp_detail.scss

@@ -2073,7 +2073,8 @@
                                 content: none;
                             }
 
-              &:hover {}
+                            &:hover {
+                            }
 
                             > p {
                                 span {
@@ -2303,7 +2304,6 @@
                     }
 
                     @include maxtablet {
-
                         &:before,
                         &:after {
                             display: none;
@@ -2372,7 +2372,6 @@
         // height: 10rem;
         .comp_body {
             .text_area {
-
                 // display: flex;
                 h3 {
                     font-size: 3rem;
@@ -2751,7 +2750,6 @@
                     }
 
                     @include maxtablet {
-
                         &:before,
                         &:after {
                             display: none;
@@ -2822,7 +2820,6 @@
 
         .comp_body {
             .text_area {
-
                 // display: flex;
                 h3 {
                     margin-bottom: 2rem;
@@ -3329,7 +3326,6 @@
         // }
         .comp_body {
             .text_area {
-
                 // display: flex;
                 h3 {
                     margin-bottom: 2rem;
@@ -3613,7 +3609,6 @@
         }
 
         &.paused {
-
             .btn-play,
             .btn-sound {
                 display: block !important;
@@ -3745,7 +3740,6 @@
     }
 
     &.playing {
-
         .comp_body.layer_up,
         .thumb-swiper,
         .pdpInCarGameSwiper,
@@ -3891,7 +3885,7 @@
             left: -65px;
             width: 5rem;
             height: 5rem;
-      border: 1px solid #D3D3D3;
+            border: 1px solid #d3d3d3;
             border-radius: 50%;
             background: rgba(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center / 15px auto;
 
@@ -3939,8 +3933,8 @@
 }
 
 .scroll_area {
-  overflow: hidden;
-  overflow-x: auto;
+    @include maxtablet {
+    }
 
     .web {
         display: block;
@@ -3952,9 +3946,40 @@
 
     .mobile {
         display: none;
+        position: relative;
+        padding-top: 3rem;
+        &:before {
+            content: "";
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 16px;
+            background: url("../images/kia/pdp/streaming_premium/img_spec_index.png") no-repeat 100% 0 / contain;
+        }
+        .header {
+            overflow: hidden;
+            flex: none;
+            width: 125px;
+            height: 460px;
+            background: url("../images/kia/pdp/streaming_premium/img_spec_m2.png") no-repeat 0 0 / auto 100%;
+        }
+        .cont {
+            overflow: hidden;
+            overflow-x: auto;
+            height: 460px;
+            &:after {
+                content: "";
+                display: block;
+                width: 306px;
+                height: 100%;
+                background: url("../images/kia/pdp/streaming_premium/img_spec_m2.png") no-repeat -126px 0 / auto 100%;
+            }
+        }
 
         @include maxtablet {
-      display: block;
+            display: flex;
         }
     }
 

product/pdp_streaming_premium.html

@@ -40,7 +40,7 @@
     <link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
     <link rel="icon" href="../assets/images/kia/favicon-16x16.png" />
     <link rel="stylesheet" href="../assets/css/kia/kia-font.css?v1" type="text/css" />
-    <link rel="stylesheet" href="https://connectstore.kia.com/kr/assets/css/kia/kia.css?v1" type="text/css" />
+    <link rel="stylesheet" href="../assets/css/kia/kia.css?v1" type="text/css" />
   </head>
   <body>
     <!--//header-->
@@ -368,7 +368,10 @@
             <div class="item aos-init aos-animate spec-area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-offset="9999" data-aos-duration="200">
               <div class="scroll_area">
                 <img src="../assets/images/kia/pdp/streaming_premium/img_spec.png" class="themeImg web" alt="이용 사양" />
-                <img src="../assets/images/kia/pdp/streaming_premium/img_spec_m.png" class="themeImg mobile" alt="이용 사양" />
+                <div class="mobile">
+                  <span class="header"></span>
+                  <span class="cont"></span>
+                </div>
               </div>
             </div>