쿠키 삭제 스크립트 추가, 인트로 사운드, 아케이드게임 캐러셀

assets/css/pdp_detail.css

@@ -2312,7 +2312,6 @@
 @media (max-width: 768px) {
   .inCarGame.comp_1x_w_v_o_b .image_area {
     overflow: hidden;
-    height: 80rem;
   }
 }
 .inCarGame .comp_top.title-area {
@@ -2344,10 +2343,20 @@
   }
 }
 .inCarGame .visualBg.swiper {
-  position: static;
+  position: relative;
 }
-.inCarGame .visualBg.swiper .image_area {
+.inCarGame .visualBg.swiper .swiper-pagination {
-  height: 70rem;
+  bottom: 3rem;
+}
+.inCarGame .visualBg.swiper .swiper-pagination .swiper-pagination-bullet {
+  opacity: 1;
+  width: 5.6rem;
+  height: 0.4rem;
+  border-radius: 0;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+.inCarGame .visualBg.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+  background-color: rgb(255, 255, 255);
 }
 .inCarGame .visualBg.swiper .image_area img {
   -o-object-fit: cover;
@@ -2385,7 +2394,8 @@
   position: relative;
   z-index: 2;
   padding: 4rem 0;
-  background-color: rgba(0, 0, 0, 0.8);
+  margin-top: 8rem;
+  background-color: rgb(0, 0, 0);
 }
 @media (max-width: 1025px) {
   .inCarGame.comp_wide .comp_bottom {
@@ -2395,6 +2405,7 @@
 @media (max-width: 768px) {
   .inCarGame.comp_wide .comp_bottom {
     padding: 0;
+    margin-top: 4rem;
   }
 }
 .inCarGame.comp_wide .comp_bottom .com_bottm_inner {
@@ -2488,13 +2499,6 @@
 }
 .inCarGame .comp_top {
   z-index: 2;
-  height: 340px;
-  max-height: 529px;
-}
-@media (max-width: 768px) {
-  .inCarGame .comp_top {
-    height: 43.9rem;
-  }
 }
 .inCarGame .comp_top .comp_body .text_area h3 {
   margin-bottom: 2rem;
@@ -2568,7 +2572,7 @@
 .inCarGame + .comp_1x_b_v_s_b {
   position: relative;
   z-index: 2;
-  margin-top: 8rem;
+  margin-top: 2rem;
 }
 @media (max-width: 768px) {
   .inCarGame + .comp_1x_b_v_s_b {
@@ -2591,7 +2595,7 @@
 }
 @media (max-width: 768px) {
   .inCarGame + .comp_1x_b_v_s_b {
-    margin-top: 4rem;
+    margin-top: 3rem;
   }
 }
 .inCarGame + .comp_1x_b_v_s_b .dtlImgs .text_area {
@@ -2637,6 +2641,17 @@
 .inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme12 .text_theme12 {
   display: block;
 }
+.inCarGame.comp_2x_b_h_s_e2 .comp_body .item .text_area {
+  margin-top: 0;
+}
+.inCarGame.comp_wide.comp_2x_b_h_s_e2 {
+  margin-top: 20rem;
+}
+@media (max-width: 768px) {
+  .inCarGame.comp_wide.comp_2x_b_h_s_e2 {
+    margin-top: 10rem;
+  }
+}
 .inCarGame .comp_body .swiper-slide .text_area h5 {
   font-size: 3rem;
 }
@@ -2665,6 +2680,7 @@
 @media (max-width: 768px) {
   .inCarGame .inCarGameDtlThumb .swiper-slide {
     height: 4.5rem;
+    border-radius: 0.4rem;
   }
 }
 .inCarGame .inCarGameDtlThumb .swiper-slide.video-slideThumb:before {
@@ -2692,7 +2708,6 @@
 .inCarGame .inCarGameDtlThumb .swiper-slide img {
   display: block;
   max-width: 100%;
-  border-radius: 0.8rem;
   overflow: hidden;
 }
 .inCarGame .inCarGameDtlThumb .swiper-slide video {
@@ -2989,7 +3004,7 @@
   width: 100%;
   padding-top: 56.25%;
   z-index: 4;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.8);
   opacity: 1;
   transition: all 0.3s ease;
 }
@@ -3081,7 +3096,7 @@
 }
 .editorWarp .video_wrap .btn-close {
   position: absolute;
-  top: -6rem;
+  top: -4rem;
   right: -16rem;
   width: 14rem;
   height: 14rem;
@@ -3134,22 +3149,22 @@
 .editorWarp .video_wrap .btn-close::after {
   transform: translate(-50%, -50%) rotate(-45deg);
 }
-.editorWarp .video_wrap.played:hover .video-ctrl {
+.editorWarp .video_wrap.played .video:hover .video-ctrl {
   display: flex;
 }
-.editorWarp .video_wrap.played:hover .video-ctrl .btn-play,
+.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-play,
-.editorWarp .video_wrap.played:hover .video-ctrl .btn-sound {
+.editorWarp .video_wrap.played .video:hover .video-ctrl .btn-sound {
   display: block;
 }
 .editorWarp .video_wrap.paused .btn-play,
 .editorWarp .video_wrap.paused .btn-sound {
   display: block !important;
 }
-.editorWarp .video_wrap.paused:hover .video-ctrl {
+.editorWarp .video_wrap.paused .video:hover .video-ctrl {
   display: flex;
 }
-.editorWarp .video_wrap.paused:hover .video-ctrl .btn-play,
+.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-play,
-.editorWarp .video_wrap.paused:hover .video-ctrl .btn-sound {
+.editorWarp .video_wrap.paused .video:hover .video-ctrl .btn-sound {
   display: block;
 }
 @media (max-width: 768px) {
@@ -3254,8 +3269,7 @@
 .editorWarp.playing .srsPlus .visualBg {
   filter: blur(2px);
 }
-.editorWarp.playing .displayThemeDtl,
+.editorWarp.playing .displayThemeDtl {
-.editorWarp.playing .inCarGameDtl {
   opacity: 0;
 }
 @media (max-width: 1700px) {
@@ -3271,4 +3285,34 @@
     bottom: 2vw;
   }
 }
+.editorWarp .visualBg .swiper-navigation {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  z-index: 10;
+  width: 100%;
+  max-width: 140rem;
+  height: 0;
+  transform: translate(-50%, -50%);
+}
+@media (max-width: 501px) {
+  .editorWarp .visualBg .swiper-navigation {
+    max-width: 92%;
+  }
+}
+.editorWarp .visualBg .swiper-button-next, .editorWarp .visualBg .swiper-button-prev {
+  position: static;
+  width: 1.8rem;
+  height: 3.6rem;
+  margin: 0;
+  background: url(../images/common/ico_arrow_r.png) no-repeat center/contain;
+}
+.editorWarp .visualBg .swiper-button-next:after, .editorWarp .visualBg .swiper-button-prev:after {
+  display: none;
+}
+.editorWarp .visualBg .swiper-button-prev {
+  background: url(../images/common/ico_arrow_l.png) no-repeat center/contain;
+}
 /*# sourceMappingURL=pdp_detail.css.map */

assets/css/pdp_detail.scss

@@ -2604,7 +2604,7 @@
         .image_area {
             @include maxtablet {
                 overflow: hidden;
-                height: 80rem;
+                // height: 80rem;
             }
         }
     }
@@ -2643,10 +2643,23 @@
         }
 
         &.swiper {
-            position: static;
+            position: relative;
+            .swiper-pagination {
+                bottom:3rem;
+                .swiper-pagination-bullet {
+                    opacity: 1;
+                    width: 5.6rem;
+                    height: .4rem;
+                    border-radius: 0;
+                    background-color: rgba(255, 255, 255, 0.5);
+        
+                    &.swiper-pagination-bullet-active {
+                        background-color: rgba(255, 255, 255, 1);
+                    }
+                }
+            }
 
             .image_area {
-                height: 70rem;
 
                 img {
                     object-fit: cover;
@@ -2713,7 +2726,8 @@
             z-index: 2;
             // max-height: 26rem;
             padding: 4rem 0;
-            background-color: rgba(0, 0, 0, .8);
+            margin-top: 8rem;
+            background-color: rgba(0, 0, 0, 1);
 
             @include maxdesktop {
                 // max-height: 22rem;
@@ -2723,6 +2737,7 @@
             @include maxtablet {
                 // max-height: 22rem;
                 padding: 0;
+                margin-top: 4rem;
             }
 
             .com_bottm_inner {
@@ -2828,12 +2843,12 @@
     .comp_top {
         z-index: 2;
         // height: 46rem;
-        height: 340px;
+        // height: 340px;
-        max-height: 529px;
+        // max-height: 529px;
 
-        @include maxtablet {
+        // @include maxtablet {
-            height: 43.9rem;
+        //     height: 43.9rem;
-        }
+        // }
 
         .comp_body {
             .text_area {
@@ -2931,7 +2946,7 @@
     &+.comp_1x_b_v_s_b {
         position: relative;
         z-index: 2;
-        margin-top: 8rem;
+        margin-top: 2rem;
 
         @include maxtablet {
             margin-top: 7.5rem;
@@ -2955,7 +2970,7 @@
         }
 
         @include maxtablet {
-            margin-top: 4rem;
+            margin-top: 3rem;
         }
 
         .dtlImgs {
@@ -2974,6 +2989,18 @@
         }
     }
 
+    &.comp_2x_b_h_s_e2 .comp_body .item .text_area {
+        margin-top: 0;
+    }
+
+    &.comp_wide.comp_2x_b_h_s_e2 {
+        margin-top:20rem;
+
+        @include maxtablet {
+            margin-top: 10rem;
+        }
+    }
+
     .comp_body .swiper-slide .text_area h5 {
         font-size: 3rem;
 
@@ -3002,6 +3029,7 @@
 
             @include maxtablet {
                 height: 4.5rem;
+                border-radius: 0.4rem;
             }
 
             cursor: pointer;
@@ -3036,7 +3064,6 @@
             img {
                 display: block;
                 max-width: 100%;
-                border-radius: 0.8rem;
                 overflow: hidden;
             }
 
@@ -3405,7 +3432,7 @@
         // transform: translateY(-36rem);
         padding-top: 56.25%;
         z-index: 4;
-        background: rgba(0, 0, 0, .5);
+        background: rgba(0, 0, 0, .8);
         opacity: 1;
         transition: all 0.3s ease;
 
@@ -3510,7 +3537,7 @@
 
         .btn-close {
             position: absolute;
-            top: -6rem;
+            top: -4rem;
             right: -16rem;
             width: 14rem;
             height: 14rem;
@@ -3569,14 +3596,15 @@
         }
 
         &.played {
+            .video {
+                &:hover {
+                    .video-ctrl {
+                        display: flex;
     
-            &:hover {
+                        .btn-play,
-                .video-ctrl {
+                        .btn-sound {
-                    display: flex;
+                            display: block;
-
+                        }
-                    .btn-play,
-                    .btn-sound {
-                        display: block;
                     }
                 }
             }
@@ -3588,14 +3616,15 @@
             .btn-sound {
                 display: block !important;
             }
+            .video {
+                &:hover {
+                    .video-ctrl {
+                        display: flex;
     
-            &:hover {
+                        .btn-play,
-                .video-ctrl {
+                        .btn-sound {
-                    display: flex;
+                            display: block;
-
+                        }
-                    .btn-play,
-                    .btn-sound {
-                        display: block;
                     }
                 }
             }
@@ -3729,8 +3758,7 @@
             filter: blur(2px);
         }
 
-        .displayThemeDtl,
+        .displayThemeDtl {
-        .inCarGameDtl {
             opacity: 0;
         }
 
@@ -3754,4 +3782,34 @@
             }
         }
     }
+
+    .visualBg {
+        .swiper-navigation {
+            display: flex;
+            justify-content: space-between;
+            position: absolute;
+            top:50%;
+            left: 50%;
+            z-index: 10;
+            width: 100%;
+            max-width: 140rem;
+            height: 0;
+            transform: translate(-50%, -50%);
+        
+            @include maxmobile {
+                max-width: 92%;
+            }
+        }
+        .swiper-button-next, .swiper-button-prev {
+            position: static;
+            width:1.8rem;
+            height: 3.6rem;
+            margin: 0;
+            background: url(../images/common/ico_arrow_r.png) no-repeat center / contain;
+            &:after {display: none;}
+        }
+        .swiper-button-prev {
+            background: url(../images/common/ico_arrow_l.png) no-repeat center / contain;
+        }
+    } 
 }

assets/js/common.js

@@ -463,8 +463,25 @@ function pdpDisplayThemeSwiperDtl() {
   flagScroll = false;
 }
 function pdpInCarGameSwiper() {
-  if ($(".pdpInCarGameSwiper").length > 0) {
+  if ($(".inCarGame .visualBg").length > 0) {
   }
+  var swiperTheme = new Swiper(".visualBg", {
+    slidesPerView: 1,
+    loop: true,
+    freeMode: false,
+    navigation: {
+      nextEl: ".inCarGame .visualBg .swiper-button-next",
+      prevEl: ".inCarGame .visualBg .swiper-button-prev",
+    },
+    pagination: {
+      el: ".inCarGame .visualBg .swiper-pagination",
+    },
+    on: {
+      init: function () {
+        // console.log('pdpInCarGameSwiper 실행한다')
+      },
+    },
+  });
   if ($(".pdpInCarGameSwiper").length > 0) {
     var swiperTheme = new Swiper(".pdpInCarGameSwiper", {
       slidesPerView: "auto",
@@ -603,7 +620,7 @@ $(document).on("click", ".inCarGame .dtthumb", function (e) {
         `;
 
     $(this).addClass(`${dtlImgPath}`);
-    console.log("videoEle===", videoEle);
+    // console.log("videoEle===", videoEle);
     beforeDtlImgPath = dtlImgPath;
     $(this).html(videoEle);
 
@@ -824,7 +841,7 @@ function pdpIntro() {
 }
 
 $(document).on("click", ".video_wrap .btn-play.play", function () {
-  console.log("intro 플레이");
+  // console.log("intro 플레이");
   const btnPlay = $(".video_wrap .btn-play");
   const videoElements = document.querySelectorAll(".video_wrap video");
 
@@ -835,7 +852,7 @@ $(document).on("click", ".video_wrap .btn-play.play", function () {
   }
 });
 $(document).on("click", ".video_wrap .btn-play.pause", function () {
-  console.log("intro 정지");
+  // console.log("intro 정지");
   const btnPlay = $(".video_wrap .btn-play");
   const videoElements = document.querySelectorAll(".video_wrap video");
 

product/pdp_in_car_game.html

@@ -358,9 +358,12 @@
                 </div>
             </div>
         </div>
+        
+        <div class="swiper-pagination"></div>
+
         <div class="swiper-navigation">
-            <div class="swiper-button-next"></div>
             <div class="swiper-button-prev"></div>
+            <div class="swiper-button-next"></div>
         </div>
 
     </div>
@@ -380,7 +383,7 @@
         </div>
     </div>
     <div class="comp_md layer_up"></div>
-    <div class="comp_bottom">
+    <div class="comp_bottom comp_body">
 
         <div class="com_bottm_inner">
             <div class="swiper pdpInCarGameSwiper">