USP인트로 추가

assets/css/pdp_detail.css

@@ -2150,73 +2150,6 @@
 .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {
   border: 2px solid #F8C40C;
 }
-.displayTheme.comp_wide.playing .comp_body.layer_up,
-.displayTheme.comp_wide.playing .thumb-swiper,
-.displayTheme.comp_wide.playing .displayThemeDtl {
-  filter: blur(2px);
-}
-.displayTheme.comp_wide.playing .displayThemeDtl {
-  opacity: 0;
-}
-@media (max-width: 1700px) {
-  .displayTheme.comp_wide.playing .displayThemeDtl {
-    filter: blur(0);
-  }
-}
-.displayTheme.comp_wide .close-today {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  bottom: 8.2rem;
-  width: 100%;
-  font-size: 1.6rem;
-  color: #fff;
-  font-weight: 600;
-  transition: all 0.2s ease;
-}
-.displayTheme.comp_wide .close-today span {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-}
-.displayTheme.comp_wide .close-today span input {
-  margin-right: 0.4rem;
-}
-.displayTheme.comp_wide .close-today span:before {
-  content: "";
-  display: block;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.displayTheme.comp_wide .close-today label {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.displayTheme.comp_wide .close-today label input {
-  margin-right: 0.4rem;
-}
-@media (max-width: 1780px) {
-  .displayTheme.comp_wide .close-today {
-    bottom: 4rem;
-  }
-}
-@media (max-width: 1024px) {
-  .displayTheme.comp_wide .close-today {
-    bottom: 2rem;
-  }
-}
-@media (max-width: 501px) {
-  .displayTheme.comp_wide .close-today {
-    bottom: 4rem;
-    font-size: 1.2rem;
-  }
-}
 .displayTheme .comp_top {
   z-index: 2;
 }
@@ -2242,137 +2175,6 @@
     height: 3rem;
   }
 }
-.displayTheme .comp_md.video_wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  padding-top: 56.25%;
-  z-index: 4;
-  background: rgba(0, 0, 0, 0.5);
-  opacity: 1;
-  transition: all 0.3s ease;
-}
-.displayTheme .comp_md.video_wrap .video-area {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 80%;
-  max-width: 125rem;
-  padding-top: 43.5%;
-}
-.displayTheme .comp_md.video_wrap .video-area .video {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-}
-.displayTheme .comp_md.video_wrap .video-area .video video {
-  display: block;
-  width: 100%;
-  height: 100%;
-  visibility: visible;
-}
-.displayTheme .comp_md.video_wrap .video-area .video .btn-play {
-  display: none;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 8rem;
-  height: 8rem;
-  background: url(../images/kia/contents/ico_play.png) no-repeat center/100% auto;
-  text-indent: -9999em;
-}
-.displayTheme .comp_md.video_wrap .video-area .video .btn-play.pause {
-  display: none;
-  background: url(../images/kia/contents/ico_pause.png) no-repeat center/100% auto;
-}
-.displayTheme .comp_md.video_wrap .video-area .video .btn-play.play {
-  display: block;
-}
-.displayTheme .comp_md.video_wrap .video-area .video:hover .btn-play.pause {
-  display: block;
-}
-@media (max-width: 768px) {
-  .displayTheme .comp_md.video_wrap .video-area {
-    width: 100%;
-  }
-  .displayTheme .comp_md.video_wrap .video-area .video {
-    border: 1.5rem solid #000;
-    border-bottom-width: 1.5rem;
-  }
-}
-.displayTheme .comp_md.video_wrap .btn-close {
-  position: absolute;
-  top: -6rem;
-  right: -16rem;
-  width: 14rem;
-  height: 14rem;
-  background-color: transparent;
-  border: none;
-  text-indent: -9999em;
-  cursor: pointer;
-}
-@media (max-width: 1024px) {
-  .displayTheme .comp_md.video_wrap .btn-close {
-    top: -7rem;
-    right: -12rem;
-    width: 10rem;
-    height: 10rem;
-  }
-}
-@media (max-width: 768px) {
-  .displayTheme .comp_md.video_wrap .btn-close {
-    top: -7rem;
-    right: 0;
-    width: 6rem;
-    height: 6rem;
-  }
-}
-.displayTheme .comp_md.video_wrap .btn-close::before,
-.displayTheme .comp_md.video_wrap .btn-close::after {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 9.2rem;
-  height: 2px;
-  background-color: #fff;
-}
-@media (max-width: 1024px) {
-  .displayTheme .comp_md.video_wrap .btn-close::before,
-.displayTheme .comp_md.video_wrap .btn-close::after {
-    width: 7rem;
-  }
-}
-@media (max-width: 768px) {
-  .displayTheme .comp_md.video_wrap .btn-close::before,
-.displayTheme .comp_md.video_wrap .btn-close::after {
-    width: 4rem;
-  }
-}
-.displayTheme .comp_md.video_wrap .btn-close::before {
-  transform: translate(-50%, -50%) rotate(45deg);
-}
-.displayTheme .comp_md.video_wrap .btn-close::after {
-  transform: translate(-50%, -50%) rotate(-45deg);
-}
-@media (max-width: 768px) {
-  .displayTheme .comp_md.video_wrap {
-    height: 56rem;
-  }
-}
-@media (max-width: 501px) {
-  .displayTheme .comp_md.video_wrap {
-    height: 36rem;
-  }
-}
 .displayTheme.type2 .comp_bottom {
   background-color: transparent;
 }
@@ -3012,37 +2814,6 @@
   cursor: pointer;
 }
 
-.displayTheme .btn-intro {
-  display: flex;
-  align-items: center;
-  position: absolute;
-  top: 5rem;
-  right: 3rem;
-  z-index: 3;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: #000;
-  cursor: pointer;
-}
-@media (max-width: 768px) {
-  .displayTheme .btn-intro {
-    top: 2rem;
-    right: 1.6rem;
-  }
-}
-.displayTheme .btn-intro:before {
-  content: "";
-  display: block;
-  width: 2.8rem;
-  height: 2.8rem;
-  margin-right: 0.5rem;
-  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-  border-radius: 50%;
-  background: #fff url("../images/kia/pdp/display_theme/ico_media.png") no-repeat center/1.6rem auto;
-  text-indent: -9999em;
-  cursor: pointer;
-}
-
 .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type=checkbox] + label {
   height: auto;
   padding: 2rem 2rem 2rem 0;
@@ -3161,4 +2932,266 @@
 .comp_wide.title-only + .comp_wide {
   margin-top: 4rem;
 }
+
+.editorWarp .visualBg img {
+  width: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  -o-object-position: center;
+     object-position: center;
+}
+@media (max-width: 1025px) {
+  .editorWarp .visualBg img {
+    width: 100%;
+    -o-object-fit: initial;
+       object-fit: initial;
+    -o-object-position: initial;
+       object-position: initial;
+  }
+}
+.editorWarp .visualBg img.mobile {
+  display: none;
+}
+@media (max-width: 1025px) {
+  .editorWarp .visualBg img.web {
+    display: none;
+  }
+  .editorWarp .visualBg img.mobile {
+    display: block;
+    -o-object-fit: initial;
+       object-fit: initial;
+    height: auto;
+  }
+}
+.editorWarp .video_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding-top: 56.25%;
+  z-index: 4;
+  background: rgba(0, 0, 0, 0.5);
+  opacity: 1;
+  transition: all 0.3s ease;
+}
+.editorWarp .video_wrap .video-area {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 80%;
+  max-width: 125rem;
+  padding-top: 43.5%;
+}
+.editorWarp .video_wrap .video-area .video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  aspect-ratio: 16/9;
+}
+.editorWarp .video_wrap .video-area .video video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  visibility: visible;
+}
+.editorWarp .video_wrap .video-area .video .btn-play {
+  display: none;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 8rem;
+  height: 8rem;
+  background: url(../images/kia/contents/ico_play.png) no-repeat center/100% auto;
+  text-indent: -9999em;
+}
+.editorWarp .video_wrap .video-area .video .btn-play.pause {
+  display: none;
+  background: url(../images/kia/contents/ico_pause.png) no-repeat center/100% auto;
+}
+.editorWarp .video_wrap .video-area .video .btn-play.play {
+  display: block;
+}
+.editorWarp .video_wrap .video-area .video:hover .btn-play.pause {
+  display: block;
+}
+@media (max-width: 768px) {
+  .editorWarp .video_wrap .video-area {
+    width: 100%;
+  }
+  .editorWarp .video_wrap .video-area .video {
+    border: 1.5rem solid #000;
+    border-bottom-width: 1.5rem;
+  }
+}
+.editorWarp .video_wrap .btn-close {
+  position: absolute;
+  top: -6rem;
+  right: -16rem;
+  width: 14rem;
+  height: 14rem;
+  background-color: transparent;
+  border: none;
+  text-indent: -9999em;
+  cursor: pointer;
+}
+@media (max-width: 1024px) {
+  .editorWarp .video_wrap .btn-close {
+    top: -7rem;
+    right: -12rem;
+    width: 10rem;
+    height: 10rem;
+  }
+}
+@media (max-width: 768px) {
+  .editorWarp .video_wrap .btn-close {
+    top: -7rem;
+    right: 0;
+    width: 6rem;
+    height: 6rem;
+  }
+}
+.editorWarp .video_wrap .btn-close::before,
+.editorWarp .video_wrap .btn-close::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 9.2rem;
+  height: 2px;
+  background-color: #fff;
+}
+@media (max-width: 1024px) {
+  .editorWarp .video_wrap .btn-close::before,
+.editorWarp .video_wrap .btn-close::after {
+    width: 7rem;
+  }
+}
+@media (max-width: 768px) {
+  .editorWarp .video_wrap .btn-close::before,
+.editorWarp .video_wrap .btn-close::after {
+    width: 4rem;
+  }
+}
+.editorWarp .video_wrap .btn-close::before {
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+.editorWarp .video_wrap .btn-close::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+@media (max-width: 768px) {
+  .editorWarp .video_wrap {
+    height: 56rem;
+  }
+}
+@media (max-width: 501px) {
+  .editorWarp .video_wrap {
+    height: 36rem;
+  }
+}
+.editorWarp .close-today {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  bottom: 8.2rem;
+  width: 100%;
+  font-size: 1.6rem;
+  color: #fff;
+  font-weight: 600;
+  transition: all 0.2s ease;
+}
+.editorWarp .close-today span {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}
+.editorWarp .close-today span input {
+  margin-right: 0.4rem;
+}
+.editorWarp .close-today span:before {
+  content: "";
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+.editorWarp .close-today label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.editorWarp .close-today label input {
+  margin-right: 0.4rem;
+}
+@media (max-width: 1780px) {
+  .editorWarp .close-today {
+    bottom: 4rem;
+  }
+}
+@media (max-width: 1024px) {
+  .editorWarp .close-today {
+    bottom: 2rem;
+  }
+}
+@media (max-width: 501px) {
+  .editorWarp .close-today {
+    bottom: 4rem;
+    font-size: 1.2rem;
+  }
+}
+.editorWarp .btn-intro {
+  display: flex;
+  align-items: center;
+  position: absolute;
+  top: 5rem;
+  right: 3rem;
+  z-index: 3;
+  font-size: 1.4rem;
+  font-weight: 600;
+  color: #000;
+  cursor: pointer;
+}
+@media (max-width: 768px) {
+  .editorWarp .btn-intro {
+    top: 2rem;
+    right: 1.6rem;
+  }
+}
+.editorWarp .btn-intro:before {
+  content: "";
+  display: block;
+  width: 2.8rem;
+  height: 2.8rem;
+  margin-right: 0.5rem;
+  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+  border-radius: 50%;
+  background: #fff url("../images/kia/pdp/display_theme/ico_media.png") no-repeat center/1.6rem auto;
+  text-indent: -9999em;
+  cursor: pointer;
+}
+.editorWarp.playing .comp_body.layer_up,
+.editorWarp.playing .thumb-swiper,
+.editorWarp.playing .displayThemeDtl,
+.editorWarp.playing .inCarGameDtl {
+  filter: blur(2px);
+}
+.editorWarp.playing .displayThemeDtl,
+.editorWarp.playing .inCarGameDtl {
+  opacity: 0;
+}
+@media (max-width: 1700px) {
+  .editorWarp.playing .displayThemeDtl {
+    filter: blur(0);
+  }
+}
 /*# sourceMappingURL=pdp_detail.css.map */

assets/css/pdp_detail.scss

@@ -2393,84 +2393,6 @@
             }
         }
 
-        &.playing {
-
-            .comp_body.layer_up,
-            .thumb-swiper,
-            .displayThemeDtl {
-                filter: blur(2px);
-            }
-
-            .displayThemeDtl {
-                opacity: 0;
-            }
-
-            @media (max-width: 1700px) {
-
-                .displayThemeDtl {
-                    filter: blur(0);
-                }
-            }
-
-        }
-
-        .close-today {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            bottom: 8.2rem;
-            width: 100%;
-            font-size: 1.6rem;
-            color: #fff;
-            font-weight: 600;
-            transition: all .2s ease;
-
-            span {
-                display: inline-flex;
-                align-items: center;
-                justify-content: center;
-                position: relative;
-
-                input {
-                    margin-right: .4rem;
-                }
-
-                &:before {
-                    content: "";
-                    display: block;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    width: 100%;
-                    height: 100%;
-                }
-            }
-
-            label {
-                display: flex;
-                align-items: center;
-                justify-content: center;
-
-                input {
-                    margin-right: .4rem;
-                }
-            }
-
-            @media (max-width: 1780px) {
-                bottom: 4rem;
-            }
-
-            @media (max-width: 1024px) {
-                bottom: 2rem;
-            }
-
-            @include maxmobile {
-                bottom: 4rem;
-                font-size: 1.2rem;
-            }
-        }
-
     }
 
     .comp_top {
@@ -2507,171 +2429,6 @@
         @include maxtablet {
             height: 3rem;
         }
-
-        &.video_wrap {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            // height: 108rem;
-            // transform: translateY(-36rem);
-            padding-top: 56.25%;
-            z-index: 4;
-            background: rgba(0, 0, 0, .5);
-            opacity: 1;
-            transition: all 0.3s ease;
-
-            .video-area {
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                width: 80%;
-                max-width: 125rem;
-                padding-top: 43.5%;
-
-                .video {
-                    position: absolute;
-                    top: 50%;
-                    left: 50%;
-                    transform: translate(-50%, -50%);
-                    width: 100%;
-
-                    video {
-                        display: block;
-                        width: 100%;
-                        height: 100%;
-                        visibility: visible;
-                    }
-
-                    .btn-play {
-                        display: none;
-                        position: absolute;
-                        top: 50%;
-                        left: 50%;
-                        transform: translate(-50%, -50%);
-                        width: 8rem;
-                        height: 8rem;
-                        background: url(../images/kia/contents/ico_play.png) no-repeat center / 100% auto;
-                        text-indent: -9999em;
-
-                        &.pause {
-                            display: none;
-                            background: url(../images/kia/contents/ico_pause.png) no-repeat center / 100% auto;
-                        }
-
-                        &.play {
-                            display: block;
-                        }
-
-                    }
-
-                    &:hover {
-                        .btn-play.pause {
-                            display: block;
-                        }
-                    }
-                }
-
-
-                @include maxtablet {
-                    width: 100%;
-
-                    .video {
-                        border: 1.5rem solid #000;
-                        border-bottom-width: 1.5rem;
-                    }
-                }
-            }
-
-            .btn-close {
-                position: absolute;
-                top: -6rem;
-                right: -16rem;
-                width: 14rem;
-                height: 14rem;
-                background-color: transparent;
-                border: none;
-                text-indent: -9999em;
-                cursor: pointer;
-
-                @media (max-width: 1024px) {
-                    top: -7rem;
-                    right: -12rem;
-                    width: 10rem;
-                    height: 10rem;
-                }
-
-                @include maxtablet {
-                    top: -7rem;
-                    right: 0;
-                    width: 6rem;
-                    height: 6rem;
-                }
-
-                // @include maxmobile{
-                //     top:-6rem;
-                //     right:-16rem;
-                //     width: 14rem;
-                //     height: 14rem;
-                // }
-            }
-
-            .btn-close::before,
-            .btn-close::after {
-                content: '';
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                width: 9.2rem;
-                height: 2px;
-                background-color: #fff;
-
-                @media (max-width: 1024px) {
-                    width: 7rem;
-                }
-
-                @include maxtablet {
-                    width: 4rem;
-                }
-            }
-
-            .btn-close::before {
-                transform: translate(-50%, -50%) rotate(45deg);
-            }
-
-            .btn-close::after {
-                transform: translate(-50%, -50%) rotate(-45deg);
-            }
-
-            // .btn-close {
-            //     position: absolute;
-            //     top: 2rem;
-            //     right: 2rem;
-            //     z-index: 1;
-            //     width: 6rem;
-            //     height: 6rem;
-            //     background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center / contain;
-            //     cursor: pointer;
-            //     text-indent: -9999em;
-            //     @include maxtablet{
-            //         top: 1rem;
-            //         right: 1rem;
-            //         width: 4rem;
-            //         height: 4rem;
-            //     }
-            // }
-            @include maxtablet {
-                height: 56rem;
-            }
-
-            @include maxmobile {
-                height: 36rem;
-            }
-        }
     }
 
     &.type2 {
@@ -3413,40 +3170,6 @@
     }
 }
 
-.displayTheme {
-    .btn-intro {
-        display: flex;
-        align-items: center;
-        position: absolute;
-        top: 5rem;
-        right: 3rem;
-        z-index: 3;
-        font-size: 1.4rem;
-        font-weight: 600;
-        color: #000;
-        cursor: pointer;
-
-        @include maxtablet {
-            top: 2rem;
-            right: 1.6rem;
-
-        }
-
-        &:before {
-            content: "";
-            display: block;
-            width: 2.8rem;
-            height: 2.8rem;
-            margin-right: .5rem;
-            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
-            border-radius: 50%;
-            background: #fff url("../images/kia/pdp/display_theme/ico_media.png") no-repeat center / 1.6rem auto;
-            text-indent: -9999em;
-            cursor: pointer;
-        }
-    }
-}
-
 .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn.type2 input[type=checkbox]+label {
     height: auto;
     padding: 2rem 2rem 2rem 0;
@@ -3614,3 +3337,319 @@
         }
     }
 }
+
+
+
+.editorWarp {
+
+    .visualBg {
+        img {
+            width: 100%;
+            object-fit: cover;
+            object-position: center;
+
+            @include maxdesktop {
+                width: 100%;
+                object-fit: initial;
+                object-position: initial;
+            }
+
+            &.mobile {
+                display: none;
+            }
+
+            @include maxdesktop {
+                &.web {
+                    display: none;
+                }
+
+                &.mobile {
+                    display: block;
+                    object-fit: initial;
+                    height: auto;
+                }
+            }
+
+        }
+    }
+
+    .video_wrap {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        // height: 108rem;
+        // transform: translateY(-36rem);
+        padding-top: 56.25%;
+        z-index: 4;
+        background: rgba(0, 0, 0, .5);
+        opacity: 1;
+        transition: all 0.3s ease;
+
+        .video-area {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            width: 80%;
+            max-width: 125rem;
+            padding-top: 43.5%;
+
+            .video {
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 100%;
+                aspect-ratio: 16/9;
+
+                video {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                    visibility: visible;
+                }
+
+                .btn-play {
+                    display: none;
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    transform: translate(-50%, -50%);
+                    width: 8rem;
+                    height: 8rem;
+                    background: url(../images/kia/contents/ico_play.png) no-repeat center / 100% auto;
+                    text-indent: -9999em;
+
+                    &.pause {
+                        display: none;
+                        background: url(../images/kia/contents/ico_pause.png) no-repeat center / 100% auto;
+                    }
+
+                    &.play {
+                        display: block;
+                    }
+
+                }
+
+                &:hover {
+                    .btn-play.pause {
+                        display: block;
+                    }
+                }
+            }
+
+
+            @include maxtablet {
+                width: 100%;
+
+                .video {
+                    border: 1.5rem solid #000;
+                    border-bottom-width: 1.5rem;
+                }
+            }
+        }
+
+        .btn-close {
+            position: absolute;
+            top: -6rem;
+            right: -16rem;
+            width: 14rem;
+            height: 14rem;
+            background-color: transparent;
+            border: none;
+            text-indent: -9999em;
+            cursor: pointer;
+
+            @media (max-width: 1024px) {
+                top: -7rem;
+                right: -12rem;
+                width: 10rem;
+                height: 10rem;
+            }
+
+            @include maxtablet {
+                top: -7rem;
+                right: 0;
+                width: 6rem;
+                height: 6rem;
+            }
+
+            // @include maxmobile{
+            //     top:-6rem;
+            //     right:-16rem;
+            //     width: 14rem;
+            //     height: 14rem;
+            // }
+        }
+
+        .btn-close::before,
+        .btn-close::after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            width: 9.2rem;
+            height: 2px;
+            background-color: #fff;
+
+            @media (max-width: 1024px) {
+                width: 7rem;
+            }
+
+            @include maxtablet {
+                width: 4rem;
+            }
+        }
+
+        .btn-close::before {
+            transform: translate(-50%, -50%) rotate(45deg);
+        }
+
+        .btn-close::after {
+            transform: translate(-50%, -50%) rotate(-45deg);
+        }
+
+        // .btn-close {
+        //     position: absolute;
+        //     top: 2rem;
+        //     right: 2rem;
+        //     z-index: 1;
+        //     width: 6rem;
+        //     height: 6rem;
+        //     background: url(../images/kia/pdp/display_theme/btn_video_close.png) no-repeat center / contain;
+        //     cursor: pointer;
+        //     text-indent: -9999em;
+        //     @include maxtablet{
+        //         top: 1rem;
+        //         right: 1rem;
+        //         width: 4rem;
+        //         height: 4rem;
+        //     }
+        // }
+        @include maxtablet {
+            height: 56rem;
+        }
+
+        @include maxmobile {
+            height: 36rem;
+        }
+    }
+
+    .close-today {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: absolute;
+        bottom: 8.2rem;
+        width: 100%;
+        font-size: 1.6rem;
+        color: #fff;
+        font-weight: 600;
+        transition: all .2s ease;
+
+        span {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+
+            input {
+                margin-right: .4rem;
+            }
+
+            &:before {
+                content: "";
+                display: block;
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        label {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            input {
+                margin-right: .4rem;
+            }
+        }
+
+        @media (max-width: 1780px) {
+            bottom: 4rem;
+        }
+
+        @media (max-width: 1024px) {
+            bottom: 2rem;
+        }
+
+        @include maxmobile {
+            bottom: 4rem;
+            font-size: 1.2rem;
+        }
+    }
+
+
+    .btn-intro {
+        display: flex;
+        align-items: center;
+        position: absolute;
+        top: 5rem;
+        right: 3rem;
+        z-index: 3;
+        font-size: 1.4rem;
+        font-weight: 600;
+        color: #000;
+        cursor: pointer;
+
+        @include maxtablet {
+            top: 2rem;
+            right: 1.6rem;
+
+        }
+
+        &:before {
+            content: "";
+            display: block;
+            width: 2.8rem;
+            height: 2.8rem;
+            margin-right: .5rem;
+            box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
+            border-radius: 50%;
+            background: #fff url("../images/kia/pdp/display_theme/ico_media.png") no-repeat center / 1.6rem auto;
+            text-indent: -9999em;
+            cursor: pointer;
+        }
+    }
+
+
+    &.playing {
+
+        .comp_body.layer_up,
+        .thumb-swiper,
+        .displayThemeDtl,
+        .inCarGameDtl {
+            filter: blur(2px);
+        }
+
+        .displayThemeDtl,
+        .inCarGameDtl {
+            opacity: 0;
+        }
+
+        @media (max-width: 1700px) {
+
+            .displayThemeDtl {
+                filter: blur(0);
+            }
+        }
+
+    }
+}

assets/js/common.js

@@ -536,6 +536,12 @@ function pdpInCarGameSwiperDtl() {
             inCarGameSwiper.slideTo(0);
             inCarGameSwiper2.slideTo(0);
           });
+          // const videoEle = `
+          //   <video muted="" playsinline poster="../assets/images/kia/pdp/in_car_game/theme1-1.png">
+          //     <source src="/kr/assets/images/kia/pdp/in_car_game/theme1-1.mp4" type="video/mp4" class="themeVideo">
+          //   </video>
+          // `;
+          // $(".inCarGameDtlThumb .swiper-slide").eq(0).html(videoEle);
         },
       },
     });
@@ -595,7 +601,7 @@ $(document).on("click", ".inCarGame .dtthumb", function (e) {
         `;
 
     $(this).addClass(`${dtlImgPath}`);
-
+    console.log("videoEle===", videoEle);
     beforeDtlImgPath = dtlImgPath;
     $(this).html(videoEle);
 
@@ -690,13 +696,26 @@ function pdpIntro() {
   if ($(".video_wrap video").length > 0) {
     // .video_wrap 내 모든 비디오 요소 선택
     const videoElements = document.querySelectorAll(".video_wrap video");
-    $(".displayTheme").addClass("playing");
+    let cookieVal;
+    $(".editorWarp").addClass("playing");
+
+    switch (true) {
+      case $(".displayTheme").length > 0:
+        cookieVal = "displayThemeIntro";
+        break;
+      case $(".inCarGame").length > 0:
+        cookieVal = "inCarGameIntro";
+        break;
+      case $(".srsPlus").length > 0:
+        cookieVal = "srsPlusIntro";
+        break;
+    }
 
     $(".close-today").html(
-      `<span onclick="hideTodayIntroPopup()" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
+      `<span onclick="hideTodayIntroPopup('${cookieVal}')" style="cursor:pointer"><input type="checkbox"> 오늘 하루 재생하지 않기</span>`
     );
-    if (getCookie("hideIntroPopup")) {
+    if (getCookie(cookieVal)) {
-      $(".displayTheme").removeClass("playing");
+      $(".editorWarp").removeClass("playing");
 
       $(".close-today input").attr("checked", "checked");
       videoElements[0].pause();
@@ -705,8 +724,8 @@ function pdpIntro() {
     }
 
     videoElements.forEach((video) => {
-      const videoWrap = $(".displayTheme .video_wrap");
+      const videoWrap = $(".editorWarp .video_wrap");
-      const btnIntro = $(".displayTheme .btn-intro");
+      const btnIntro = $(".editorWarp .btn-intro");
       const btnClose = $(".video_wrap .btn-close");
       const btnPlay = $(".video_wrap .btn-play");
       // console.log("Intro 실행");
@@ -716,7 +735,7 @@ function pdpIntro() {
         // 비디오 재생이 끝났을 때 이벤트 리스너 추가
         video.addEventListener("ended", function () {
           // console.log("addEventListener ended 실행");
-          $(".displayTheme").removeClass("playing");
+          $(".editorWarp").removeClass("playing");
           video.currentTime = 0;
           video.pause();
           $(videoWrap).hide();
@@ -747,10 +766,10 @@ function pdpIntro() {
       }
 
       // .btn-intro 버튼 클릭 시 비디오 재생
-      $(document).on("click", ".displayTheme .btn-intro", function () {
+      $(document).on("click", ".editorWarp .btn-intro", function () {
         // console.log('intro 다시 실행');
-        $(".displayTheme").addClass("playing");
+        $(".editorWarp").addClass("playing");
-        if (getCookie("hideIntroPopup")) {
+        if (getCookie(cookieVal)) {
           $(".close-today input").attr("checked", "checked");
         }
         $(videoWrap).show();
@@ -763,7 +782,7 @@ function pdpIntro() {
       // .btn-close 버튼 클릭 시 비디오 숨기기
       $(document).on("click", ".video_wrap .btn-close", function () {
         // console.log('btn close 실행');
-        $(".displayTheme").removeClass("playing");
+        $(".editorWarp").removeClass("playing");
         $(videoWrap).hide();
         if (video) {
           video.currentTime = 0;
@@ -783,7 +802,7 @@ function pdpIntro() {
   }
 }
 
-$(document).on("click", ".displayTheme .btn-play.play", function () {
+$(document).on("click", ".video_wrap .btn-play.play", function () {
   console.log("intro 플레이");
   const btnPlay = $(".video_wrap .btn-play");
   const videoElements = document.querySelectorAll(".video_wrap video");
@@ -794,7 +813,7 @@ $(document).on("click", ".displayTheme .btn-play.play", function () {
     videoElements[0].play();
   }
 });
-$(document).on("click", ".displayTheme .btn-play.pause", function () {
+$(document).on("click", ".video_wrap .btn-play.pause", function () {
   console.log("intro 정지");
   const btnPlay = $(".video_wrap .btn-play");
   const videoElements = document.querySelectorAll(".video_wrap video");
@@ -1088,11 +1107,15 @@ function getCookie(name) {
   return null;
 }
 // 팝업을 숨기는 함수
-function hideTodayIntroPopup() {
+function hideTodayIntroPopup(target) {
   const videoElements = document.querySelectorAll(".video_wrap video");
   videoElements[0].pause();
   videoElements[0].currentTime = 0;
   $(".video_wrap").hide();
-  $(".displayTheme").removeClass("playing");
+  $(".editorWarp").removeClass("playing");
+  if (target) {
+    setCookie(target, "true", 1);
+  } else {
     setCookie("hideIntroPopup", "true", 1);
   }
+}

info/product-usage-guide-nba.html

@@ -248,7 +248,7 @@
                     <div>
                         <h3 class="titleCase02" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">NBA 디스플레이 테마</h3>
                         <p class="txtCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
-                            계기판/인포테인먼트 시스템 디자인을 NBA 30개 팀 테마로 변경하여 운전자의 특별한 개성을 표현할 수 있습니다. 테마 다운로드에는 약 5분(환경에 따라 상이)이 소요되며 적용을 위해  재시동이 필요합니다.
+                            클러스터/인포테인먼트 시스템 디자인을 NBA 30개 팀 테마로 변경하여 운전자의 특별한 개성을 표현할 수 있습니다. 테마 다운로드에는 약 5분(환경에 따라 상이)이 소요되며 적용을 위해  재시동이 필요합니다.
                             <span style="color: #676767; display: block; padding-top: 15px;">※ 테마는 최대 3개만 다운로드하여 저장 가능하며, 삭제 / 재설치가 가능합니다.</span>
                         </p>
                     </div>

info/product-usage-guide-nba.php

@@ -49,7 +49,7 @@
                     <div>
                         <h3 class="titleCase02" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">NBA 디스플레이 테마</h3>
                         <p class="txtCase01" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
-                            계기판/인포테인먼트 시스템 디자인을 NBA 30개 팀 테마로 변경하여 운전자의 특별한 개성을 표현할 수 있습니다. 테마 다운로드에는 약 5분(환경에 따라 상이)이 소요되며 적용을 위해  재시동이 필요합니다.
+                            클러스터/인포테인먼트 시스템 디자인을 NBA 30개 팀 테마로 변경하여 운전자의 특별한 개성을 표현할 수 있습니다. 테마 다운로드에는 약 5분(환경에 따라 상이)이 소요되며 적용을 위해  재시동이 필요합니다.
                             <span style="color: #676767; display: block; padding-top: 15px;">※ 테마는 최대 3개만 다운로드하여 저장 가능하며, 삭제 / 재설치가 가능합니다.</span>
                         </p>
                     </div>

product/pdp_in_car_game.html

@@ -351,9 +351,13 @@
                 </div>
             </div>
         </div>
+        <div class="btn-intro">
+            Intro영상 다시보기
+        </div>
     </div>
     <div class="comp_md layer_up"></div>
     <div class="comp_bottom">
+
         <div class="com_bottm_inner">
             <div class="swiper pdpInCarGameSwiper">
                 <div class="swiper-wrapper">
@@ -398,6 +402,22 @@
             </div>
         </div>
     </div>
+    
+    <div class="comp_md layer_up video_wrap">
+        <div class="video-area">
+            <div class="video">
+               
+                <video playsinline="playsinline" controls>
+                    <source src="../assets/images/kia/pdp/in_car_game/intro.mp4" type="video/mp4">
+                    이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
+                </video>
+                <div class="btn-close">닫기</div>
+                <div class="btn-play play">Play</div>
+            </div>
+        </div>
+        <div class="close-today">
+        </div>
+    </div>
 </div>
 
 
@@ -434,8 +454,8 @@
             <div thumbsSlider="" class="swiper inCarGameDtlThumb">
                 <div class="swiper-wrapper">
                   <div class="swiper-slide video-slideThumb">
-                    <!-- <img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImgThumb" alt="" /> -->
+                    <img src="../assets/images/kia/pdp/in_car_game/theme1-1.png" class="themeImgThumb" style="position: absolute;top:0;left:0;z-index:1" alt="" />
-                    <video loop muted playsinline preload="auto" poster="../assets/images/kia/pdp/in_car_game/theme1-1.png">
+                    <video loop muted playsinline preload="auto" style="z-index:0">
                         <source src="../assets/images/kia/pdp/in_car_game/theme1-1.mp4" type="video/mp4" class="themeVideo">
                     </video>
                   </div>

product/pdp_srs_plus.html

@@ -322,7 +322,7 @@
             <div class="editorInner">
                 
 
-<div class="comp_wide comp_1x_w_v_o_b streamingPremium">
+<div class="comp_wide comp_1x_w_v_o_b srsPlus">
     <div class="image_area visualBg">
         <img src="../assets/images/kia/pdp/srs_plus/srs_plus_bg.png" class="web" alt="스마트 회생시스템 플러스">
         <img src="../assets/images/kia/pdp/srs_plus/srs_plus_bg_m.png" class="mobile" alt="스마트 회생시스템 플러스">
@@ -341,9 +341,30 @@
     </div>
     <div class="comp_md layer_up"></div>
 
+
+    <div class="btn-intro" style="color:#fff;">
+        Intro영상 다시보기
     </div>
     
-<div class="comp_wide comp_1x_b_v_s_b"> 
+    <div class="comp_md layer_up video_wrap">
+        <div class="video-area">
+            <div class="video">
+               
+                <video playsinline="playsinline" controls>
+                    <source src="../assets/images/kia/pdp/display_theme/NBA_Display_Theme_Intro.mp4" type="video/mp4">
+                    이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
+                </video>
+                <div class="btn-close">닫기</div>
+                <div class="btn-play play">Play</div>
+            </div>
+        </div>
+        <div class="close-today">
+        </div>
+    </div>
+
+</div>
+
+<div class="comp_wide comp_1x_b_v_s_b srsPlus"> 
     <div class="comp_body"> 
         <div class="image_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> 
             <img src="../assets/images/kia/pdp/srs_plus/srs_plus_contents_01.png" alt="내비게이션 정보를 활용하여 더욱 안전하고 편리해진 EV 주행 이미지"> 
@@ -361,7 +382,7 @@
     </div> 
 </div>
 
-<div class="comp_wide title-only"> 
+<div class="comp_wide title-only srsPlus"> 
     <div class="comp_body"> 
         <div class="text_area"> 
             <h4 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800" class="aos-init aos-animate">
@@ -371,7 +392,7 @@
     </div> 
 </div>
 
-<div class="comp_wide comp_1x_b_h_s_e1">
+<div class="comp_wide comp_1x_b_h_s_e1 srsPlus">
     
     <div class="comp_body"> 
         <div class="image_area aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> 
@@ -420,7 +441,7 @@
     </div> 
 </div>
 
-<div class="comp_wide comp_2x_b_h_s_e2">
+<div class="comp_wide comp_2x_b_h_s_e2 srsPlus">
     <div class="comp_body">
         <div class="item">
             <div class="image_area">
@@ -453,7 +474,7 @@
 </div>
 
 
-<div class="comp_1x_b_n_n_e1 displayTheme">
+<div class="comp_1x_b_n_n_e1 srsPlus">
     <div class="comp_body">
         <h5>
             사양 이용 영상