Implement share functionality and UI updates: Add share button to various pages, create share popup with URL input, and enhance CSS styles for better layout and responsiveness. Update JavaScript for clipboard functionality and navigator share API support.

kr/assets/css/contents.css

@@ -1,4 +1,5 @@
 @charset "UTF-8";
+@import "utils.scss";
 /*변수*/
 /*반응형 화면 크기*/
 /*css 디폴트는 모바일이 기준*/
@@ -136,7 +137,7 @@
 .contentsTypeNew.caseAs ul.case01 li {
   position: relative;
   padding: 80px 30px 25px;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 6px;
   background-repeat: no-repeat;
   background-position: 30px 24px;
@@ -210,7 +211,7 @@
   justify-content: center;
   align-items: center;
   width: 100%;
-  background-color: #EEEEEE;
+  background-color: #eeeeee;
   font-size: 1.4rem;
   font-weight: 400;
   color: #666666;
@@ -246,7 +247,7 @@
   background-position: 40px 5px;
 }
 .contentsTypeNew.caseAs ul.case02 li + li {
-  border-left: 1px solid #DEDEDE;
+  border-left: 1px solid #dedede;
 }
 @media (max-width: 768px) {
   .contentsTypeNew.caseAs ul.case02 li {
@@ -329,7 +330,7 @@
   width: calc(50% - 10px);
   height: 120px;
   padding-left: 110px;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 6px;
   background: url("/kr/assets/images/kia/contents/icon06.svg") no-repeat 30px center;
   line-height: 118px;
@@ -474,7 +475,7 @@
   width: calc(33.3333333333% - 12px);
 }
 .contentsTypeNew.caseRegist .connectStore ul li:first-child img {
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
 }
 .contentsTypeNew.caseRegist .connectStore ul li img {
   display: block;
@@ -542,7 +543,7 @@
   flex-direction: row;
   align-items: center;
   justify-content: flex-start;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 6px;
   font-size: 20px;
   line-height: 1.5;
@@ -628,7 +629,8 @@
   line-height: 54px;
   color: #000;
 }
-.contentsTypeNew.caseUsageDetail .caseBtnWrap a::before, .contentsTypeNew.caseUsageDetail .caseBtnWrap a::after {
+.contentsTypeNew.caseUsageDetail .caseBtnWrap a::before,
+.contentsTypeNew.caseUsageDetail .caseBtnWrap a::after {
   content: "";
   position: absolute;
   top: 0;
@@ -647,8 +649,8 @@
   position: absolute;
   left: 40px;
   right: 40px;
-  border-top: 1px solid #9BA1A5;
+  border-top: 1px solid #9ba1a5;
-  border-bottom: 1px solid #9BA1A5;
+  border-bottom: 1px solid #9ba1a5;
 }
 .contentsTypeNew.caseUsageDetail .caseVideo a {
   display: block;
@@ -668,7 +670,7 @@
   top: 50px;
   width: 51px;
   height: 57px;
-  background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
+  background: linear-gradient(270deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
 }
 .contentsTypeNew.caseUsageDetail .caseFunction .functionTab {
   overflow-x: auto;
@@ -702,7 +704,7 @@
 .contentsTypeNew.caseUsageDetail .caseFunction .functionTab > ul button {
   margin-right: 20px;
   font-size: 18px;
-  color: #9EA1A2;
+  color: #9ea1a2;
   cursor: pointer;
 }
 .contentsTypeNew.caseUsageDetail .caseFunction .functionTab > ul li.active button {
@@ -739,7 +741,7 @@
 }
 .contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .item img {
   max-width: 100%;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 6px;
   box-sizing: border-box;
 }
@@ -798,13 +800,14 @@
 .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2) h3 {
   width: 100px;
 }
-.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before, .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
+.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before,
+.contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   width: 1px;
-  background: #DEDEDE;
+  background: #dedede;
 }
 .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before {
   left: calc((100% - 100px) / 4);
@@ -842,7 +845,7 @@
   overflow: hidden;
 }
 .contentsTypeNew.caseUsageDetail .caseStreaming > section > div a.caseBorder {
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
 }
 .contentsTypeNew.caseUsageDetail .caseStreaming > section > div a + a {
   margin-left: 15px;
@@ -863,14 +866,15 @@
     margin-top: 40px;
     width: unset;
   }
-  .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before, .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
+  .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::before,
+  .contentsTypeNew.caseUsageDetail .caseStreaming > section:nth-of-type(2)::after {
     display: none;
   }
   .contentsTypeNew.caseUsageDetail .caseStreaming > section:last-of-type {
     margin-top: 40px;
     margin-left: 50px;
     padding-left: 50px;
-    border-left: 1px solid #DEDEDE;
+    border-left: 1px solid #dedede;
   }
 }
 @media (max-width: 680px) {
@@ -945,7 +949,7 @@
 }
 @media (max-width: 680px) {
   .contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap .item,
-.contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap p {
+  .contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap p {
     width: 100%;
   }
   .contentsTypeNew.caseUsageDetail .caseFunction .functionDetail .itemWrap .item + .item {
@@ -1026,7 +1030,7 @@
 .contentsTypeNew.caseRspa2 .info ul li img {
   display: block;
   width: 100%;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 6px;
 }
 @media (min-width: 641px) and (max-width: 1024px) {
@@ -1036,7 +1040,7 @@
   .contentsTypeNew.caseRspa2 .info ul li + li + li + li {
     margin-top: 15px;
   }
-  .contentsTypeNew.caseRspa2 .info ul li:nth-of-type(3n+1) {
+  .contentsTypeNew.caseRspa2 .info ul li:nth-of-type(3n + 1) {
     margin-left: 0;
   }
 }
@@ -1050,7 +1054,7 @@
   .contentsTypeNew.caseRspa2 .info ul li + li + li {
     margin-top: 15px;
   }
-  .contentsTypeNew.caseRspa2 .info ul li:nth-of-type(2n+1) {
+  .contentsTypeNew.caseRspa2 .info ul li:nth-of-type(2n + 1) {
     margin-left: 0;
   }
   .contentsTypeNew.caseRspa2 .info ul li strong {
@@ -1085,7 +1089,7 @@
   position: relative;
   width: calc(33.3333333333% - 8px);
   padding: 30px 30px 110px;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 6px;
   background-repeat: no-repeat;
   background-position: left 30px bottom 30px;
@@ -1101,7 +1105,7 @@
 }
 .contentsTypeNew.caseRspa2 .howtobuy > div > * b:first-child {
   font-size: 14px;
-  color: #9EA1A2;
+  color: #9ea1a2;
 }
 .contentsTypeNew.caseRspa2 .howtobuy > div > * strong {
   display: block;
@@ -1177,11 +1181,13 @@
   width: calc(20% - 15px);
   height: unset;
   padding: 20px;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 6px;
   font-size: 16px;
 }
-.contentsTypeNew .storeguideTab a:hover, .contentsTypeNew .storeguideTab a:focus, .contentsTypeNew .storeguideTab a.current {
+.contentsTypeNew .storeguideTab a:hover,
+.contentsTypeNew .storeguideTab a:focus,
+.contentsTypeNew .storeguideTab a.current {
   border-color: #000;
 }
 .contentsTypeNew .storeguideTab a strong {
@@ -1295,7 +1301,7 @@
 .contentsTypeNew .storeGuideItem > header strong {
   padding: 0 0 13px 5px;
   font-size: 12px;
-  color: #FF0000;
+  color: #ff0000;
 }
 @media (max-width: 500px) {
   .contentsTypeNew .storeGuideItem > header strong {
@@ -1324,16 +1330,16 @@
   image-rendering: crisp-edges;
   transform: translateZ(0);
   -webkit-backface-visibility: hidden;
-          backface-visibility: hidden;
+  backface-visibility: hidden;
 }
 .contentsTypeNew .storeGuideItem ul li img:not(.noBorder) {
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
 }
 .contentsTypeNew .storeGuideItem ul li > b {
   display: block;
   margin: 20px 0 8px;
   font-size: 14px;
-  color: #9EA1A2;
+  color: #9ea1a2;
 }
 .contentsTypeNew .storeGuideItem ul li strong {
   font-size: 16px;
@@ -1373,13 +1379,13 @@
   width: 400px;
   height: 4px;
   border-radius: 0;
-  background: #C3C6C8;
+  background: #c3c6c8;
   opacity: 1 !important;
 }
 .contentsTypeNew .storeGuideItem .swiper-horizontal > .swiper-scrollbar .swiper-scrollbar-drag,
 .contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal .swiper-scrollbar-drag {
   border-radius: 0;
-  background: #05141F;
+  background: #05141f;
 }
 .contentsTypeNew .storeGuideItem .swiper-scrollbar-after-space {
   height: 68px;
@@ -1395,7 +1401,8 @@
   height: 55px;
   background: url("/kr/assets/images/kia/contents/arrowSwipe.svg") no-repeat center;
 }
-.contentsTypeNew .storeGuideItem .swiper-button-next::after, .contentsTypeNew .storeGuideItem .swiper-button-next.swiper-button-disabled,
+.contentsTypeNew .storeGuideItem .swiper-button-next::after,
+.contentsTypeNew .storeGuideItem .swiper-button-next.swiper-button-disabled,
 .contentsTypeNew .storeGuideItem .swiper-button-prev::after,
 .contentsTypeNew .storeGuideItem .swiper-button-prev.swiper-button-disabled {
   display: none;
@@ -1406,7 +1413,7 @@
 }
 @media (max-width: 1400px) {
   .contentsTypeNew .storeGuideItem .swiper-button-next,
-.contentsTypeNew .storeGuideItem .swiper-button-prev {
+  .contentsTypeNew .storeGuideItem .swiper-button-prev {
     display: none;
   }
 }
@@ -1437,7 +1444,8 @@
     padding-left: 24px !important;
     margin-right: 0 !important;
   }
-  .contentsTypeNew .storeGuideItem ul.caseWide li, .contentsTypeNew .storeGuideItem ul.caseWide2 li {
+  .contentsTypeNew .storeGuideItem ul.caseWide li,
+  .contentsTypeNew .storeGuideItem ul.caseWide2 li {
     width: 480px;
     padding-left: 2rem !important;
   }
@@ -1459,11 +1467,12 @@
   .contentsTypeNew .storeGuideItem ul li b {
     margin-top: 15px;
   }
-  .contentsTypeNew .storeGuideItem ul.caseWide li, .contentsTypeNew .storeGuideItem ul.caseWide2 li {
+  .contentsTypeNew .storeGuideItem ul.caseWide li,
+  .contentsTypeNew .storeGuideItem ul.caseWide2 li {
     width: 100%;
   }
   .contentsTypeNew .storeGuideItem .swiper-horizontal > .swiper-scrollbar,
-.contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal {
+  .contentsTypeNew .storeGuideItem .swiper-scrollbar.swiper-scrollbar-horizontal {
     width: calc(100% - 40px);
   }
   .contentsTypeNew .storeGuideItem .swiper-scrollbar-after-space {
@@ -1601,7 +1610,7 @@
 }
 @media (max-width: 640px) {
   .contentsTypeNew .caseMagazineView > div,
-.contentsTypeNew .caseMagazineView img {
+  .contentsTypeNew .caseMagazineView img {
     width: 100%;
     padding-right: 0 !important;
     padding-left: 0 !important;
@@ -1646,7 +1655,7 @@
   width: 100%;
   top: 0;
   height: 1px;
-  background: #DEDEDE;
+  background: #dedede;
 }
 .contentsTypeNew .caseService header h2 {
   font-size: 16px;
@@ -1692,7 +1701,7 @@
   position: relative;
   width: calc(50% - 5px);
   padding: 120px 50px 30px 30px;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   border-radius: 6px;
   background-repeat: no-repeat;
   background-position: 30px 30px;
@@ -1715,7 +1724,8 @@
   height: 16px;
   background: url("/kr/assets/images/kia/contents/arrow.svg") no-repeat center;
 }
-.contentsTypeNew .caseService div a:hover, .contentsTypeNew .caseService div a:focus {
+.contentsTypeNew .caseService div a:hover,
+.contentsTypeNew .caseService div a:focus {
   border-color: #000;
 }
 @media screen and (max-width: 500px) {
@@ -1931,7 +1941,7 @@
   font-size: 1.4rem;
   padding: 1.4rem 2rem;
   background-color: #fff;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   box-sizing: border-box;
   cursor: pointer;
   text-align: left;
@@ -1955,7 +1965,7 @@
   transform: translate(-50%, 0);
   width: 1.4rem;
   height: 0.8rem;
-  displaY: block;
+  display: block;
   background: url("/kr/assets/images/common/icon-notice.svg");
   background-size: contain;
   background-repeat: no-repeat;
@@ -1968,7 +1978,7 @@
   width: 100%;
   top: 4.4rem;
   left: 0;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   box-sizing: border-box;
   background-color: #fff;
   z-index: 1;
@@ -2028,7 +2038,7 @@
   font-size: 1.4rem;
   padding: 1.4rem 2rem;
   background-color: #fff;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   box-sizing: border-box;
   cursor: pointer;
   text-align: left;
@@ -2052,7 +2062,7 @@
   transform: translate(-50%, 0);
   width: 1.4rem;
   height: 0.8rem;
-  displaY: block;
+  display: block;
   background: url("/kr/assets/images/common/icon-notice.svg");
   background-size: contain;
   background-repeat: no-repeat;
@@ -2065,7 +2075,7 @@
   width: 100%;
   top: 4.4rem;
   left: 0;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   box-sizing: border-box;
   background-color: #fff;
   z-index: 1;
@@ -2126,7 +2136,7 @@
   font-size: 1.4rem;
   padding: 1.4rem 2rem;
   background-color: #fff;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   box-sizing: border-box;
   cursor: pointer;
   text-align: left;
@@ -2150,7 +2160,7 @@
   transform: translate(-50%, 0);
   width: 1.4rem;
   height: 0.8rem;
-  displaY: block;
+  display: block;
   background: url("/kr/assets/images/common/icon-notice.svg");
   background-size: contain;
   background-repeat: no-repeat;
@@ -2163,7 +2173,7 @@
   width: 100%;
   top: 4.4rem;
   left: 0;
-  border: 1px solid #DEDEDE;
+  border: 1px solid #dedede;
   box-sizing: border-box;
   background-color: #fff;
   z-index: 1;
@@ -2193,4 +2203,39 @@
   text-overflow: ellipsis;
   overflow: hidden;
 }
-/*# sourceMappingURL=contents.css.map */
+/*# sourceMappingURL=contents.css.map */
+
+.util-area {
+  position: relative;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 1.6rem;
+  margin-bottom: 1.6rem;
+  @media (min-width: 768px) {
+    gap: 2rem;
+    margin-bottom: 2rem;
+  }
+  .btn-wish {
+    width: 2.4rem;
+    height: 2.4rem;
+    background: url(../images/common/icon_heart.png) no-repeat center / 100% auto;
+    text-indent: -9999px;
+    cursor: pointer;
+    @media (min-width: 768px) {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+  .btn-share {
+    width: 2.4rem;
+    height: 2.4rem;
+    background: url(../images/common/icon_share.png) no-repeat center / 100% auto;
+    text-indent: -9999px;
+    cursor: pointer;
+    @media (min-width: 768px) {
+      width: 3rem;
+      height: 3rem;
+    }
+  }
+}

kr/assets/css/popup.css

@@ -39,7 +39,7 @@
   width: 8px;
 }
 .popupWarp .popInner .termsCon::-webkit-scrollbar-thumb {
-  background-color: #DEDEDE;
+  background-color: #dedede;
   border-radius: 10px;
   background-clip: padding-box;
   border: 2px solid transparent;
@@ -127,8 +127,8 @@
   font-size: 1.4rem;
   line-height: 2.2rem;
   color: #676767;
-  border-top: 1px solid #DEDEDE;
+  border-top: 1px solid #dedede;
-  border-bottom: 1px solid #DEDEDE;
+  border-bottom: 1px solid #dedede;
 }
 .popupWarp .marketingAgree.popInner .towButton {
   width: 100%;
@@ -197,7 +197,7 @@
 .popupWarp .inquiryCaseEtc .inquiryCaseEtcCon .linkBox {
   margin-top: 2rem;
   padding: 2.8rem;
-  background-color: #F3F3F3;
+  background-color: #f3f3f3;
   text-align: center;
 }
 .popupWarp .inquiryCaseEtc .inquiryCaseEtcCon .linkBox a {
@@ -224,6 +224,19 @@
   margin-left: 1rem;
   background-position: center;
 }
+.popupWarp .sharePop {
+  max-width: 54rem;
+}
+.popupWarp .sharePop .shareCon .shareUrlBox input {
+  width: 100%;
+  height: 4rem;
+  padding: 0 2.4rem;
+  border: 1px solid #dedede;
+  border-radius: 0.6rem;
+  font-size: 1.6rem;
+  line-height: 2.4rem;
+  color: #000;
+}
 
 .payComplete {
   position: fixed;

kr/assets/css/popup.css.map

@@ -1 +1 @@
-{"version":3,"sources":["popup.css","_utils.scss","popup.scss"],"names":[],"mappings":"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","file":"popup.css"}
+{"version":3,"sources":["popup.css","_utils.scss","popup.scss"],"names":[],"mappings":"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","file":"popup.css"}

kr/assets/css/popup.scss

@@ -1,409 +1,422 @@
 @charset "UTF-8";
-@import 'utils.scss';
+@import "utils.scss";
 /*변수파일 import*/
 
 .popupWarp {
-    position: fixed;
+  position: fixed;
-    top: 0;
+  top: 0;
-    left: 0;
+  left: 0;
-    width: 100%;
+  width: 100%;
-    height: 100%;
+  height: 100%;
-    overflow: hidden;
+  overflow: hidden;
-    background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0.4);
-    z-index: 1000;
+  z-index: 1000;
 
-    .popInner {
+  .popInner {
-        background-color: #fff;
+    background-color: #fff;
-        padding: 5rem;
+    padding: 5rem;
-        border-radius: 0.6rem;
+    border-radius: 0.6rem;
 
-        h1 {
+    h1 {
-            font-size: 2.4rem;
+      font-size: 2.4rem;
-            font-weight: bold;
+      font-weight: bold;
-            text-align: center;
+      text-align: center;
-            margin-bottom: 3rem;
+      margin-bottom: 3rem;
+    }
+
+    .termsCon {
+      height: 29rem;
+      overflow-y: auto;
+      overflow-x: hidden;
+
+      &::-webkit-scrollbar {
+        width: 8px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #dedede;
+        border-radius: 10px;
+        background-clip: padding-box;
+        border: 2px solid transparent;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+        border-radius: 10px;
+        box-shadow: inset 0px 0px 5px white;
+      }
+
+      p {
+        line-height: 2.4rem;
+        color: #676767;
+      }
+    }
+
+    .oneButton {
+      width: 16rem;
+      margin: 0 auto;
+      margin-top: 5rem;
+    }
+
+    .towButton {
+      margin: 0 auto;
+      margin-top: 5rem;
+    }
+
+    @include maxtablet {
+      padding: 3rem;
+    }
+  }
+
+  .popInner {
+    position: absolute;
+    width: 92%;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+
+    @include desktopMax {
+      width: fit-content;
+      width: 100%;
+    }
+  }
+
+  .termsPop {
+    max-width: 90rem;
+  }
+
+  .payInfo {
+    max-width: 54rem;
+
+    .payInfoCon {
+      p {
+        strong {
+          display: block;
+          font-size: 1.6rem;
+          line-height: 2.4rem;
+          text-align: center;
         }
 
-        .termsCon {
+        span {
-            height: 29rem;
+          text-align: center;
-            overflow-y: auto;
+          display: block;
-            overflow-x: hidden;
+          font-size: 1.6rem;
+          color: #676767;
+          margin-top: 1.5rem;
+          line-height: 2.4rem;
+        }
+      }
+    }
+  }
 
-            &::-webkit-scrollbar {
+  .marketingAgree {
-                width: 8px;
+    max-width: 54rem;
-            }
 
-            &::-webkit-scrollbar-thumb {
+    .payInfoCon {
-                background-color: #DEDEDE;
+      p {
-                border-radius: 10px;
+        text-align: center;
-                background-clip: padding-box;
-                border: 2px solid transparent;
-            }
 
-            &::-webkit-scrollbar-track {
+        strong {
-                background-color: transparent;
+          display: block;
-                border-radius: 10px;
+          font-size: 1.6rem;
-                box-shadow: inset 0px 0px 5px white;
+          line-height: 2.4rem;
-            }
-
-            p {
-                line-height: 2.4rem;
-                color: #676767;
-            }
         }
 
-        .oneButton {
+        span {
-            width: 16rem;
+          text-align: center;
-            margin: 0 auto;
+          display: block;
-            margin-top: 5rem;
+          font-size: 1.6rem;
+          color: #676767;
+          margin-top: 1.5rem;
+          line-height: 2.4rem;
         }
 
+        &.borderWrap {
+          margin-top: 30px;
+          padding: 24px;
+          font-size: 1.4rem;
+          line-height: 2.2rem;
+          color: #676767;
+          border-top: 1px solid #dedede;
+          border-bottom: 1px solid #dedede;
+        }
+      }
+    }
+
+    &.popInner {
+      .towButton {
+        width: 100%;
+      }
+    }
+
+    .hideAdCheck {
+      text-align: center;
+      margin-top: 5rem;
+
+      label {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        align-items: center;
+        text-align: center;
+        font-size: 1.6rem;
+        color: #676767;
+        cursor: pointer;
+
+        span {
+          margin-left: 1rem;
+        }
+      }
+    }
+
+    @include maxtablet {
+      h1 {
+        font-size: 1.8rem;
+        margin-bottom: 1.5rem;
+      }
+
+      .payInfoCon {
+        p {
+          font-size: 1.4rem;
+
+          &.borderWrap {
+            padding: 2rem 1rem;
+          }
+        }
+      }
+
+      &.popInner {
+        padding: 3rem 3rem 4rem;
+
         .towButton {
-            margin: 0 auto;
+          margin-top: 4rem;
-            margin-top: 5rem;
+          flex-wrap: wrap;
-        }
 
-        @include maxtablet {
+          button + button {
-            padding: 3rem;
+            margin-top: 1rem;
+          }
         }
+      }
+
+      .hideAdCheck {
+        margin-top: 4rem;
+
+        label {
+          font-size: 1.4rem;
+        }
+      }
     }
+  }
 
-    .popInner {
+  .inquiryCaseEtc {
-        position: absolute;
+    max-width: 54rem;
-        width: 92%;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%, -50%);
 
-        @include desktopMax {
+    .inquiryCaseEtcCon {
-            width: fit-content;
+      p {
-            width: 100%;
+        font-size: 1.6rem;
+        line-height: 2.4rem;
+        text-align: center;
+
+        span {
+          text-align: center;
+          display: block;
+          font-size: 1.6rem;
+          color: #676767;
+          margin-top: 1.5rem;
+          line-height: 2.4rem;
         }
+      }
+
+      .linkBox {
+        margin-top: 2rem;
+        padding: 2.8rem;
+        background-color: #f3f3f3;
+        text-align: center;
+
+        a {
+          position: relative;
+          display: inline;
+          border-bottom: 1px solid #676767;
+          margin-right: 2rem;
+          font-size: 1.4rem;
+          font-weight: 400;
+          line-height: 2.2;
+          color: #676767;
+
+          &:after {
+            content: "";
+            display: inline-block;
+            position: absolute;
+            right: -2rem;
+            bottom: 0;
+            width: 2rem;
+            height: 2rem;
+            background-image: url(/kr/assets/images/kia/svg/icon-link-arrow.svg);
+            background-repeat: no-repeat;
+            background-size: 0.6rem 1.2rem;
+            margin-left: 1rem;
+            background-position: center;
+          }
+        }
+      }
     }
+  }
 
-    .termsPop {
+  .sharePop {
-        max-width: 90rem;
+    max-width: 54rem;
+    .shareCon {
+      .shareUrlBox {
+        input {
+          width: 100%;
+          height: 4rem;
+          padding: 0 2.4rem;
+          border: 1px solid #dedede;
+          border-radius: 0.6rem;
+          font-size: 1.6rem;
+          line-height: 2.4rem;
+          color: #000;
+        }
+      }
     }
-
+  }
-    .payInfo {
-        max-width: 54rem;
-
-        .payInfoCon {
-            p {
-                strong {
-                    display: block;
-                    font-size: 1.6rem;
-                    line-height: 2.4rem;
-                    text-align: center;
-                }
-
-                span {
-                    text-align: center;
-                    display: block;
-                    font-size: 1.6rem;
-                    color: #676767;
-                    margin-top: 1.5rem;
-                    line-height: 2.4rem;
-                }
-            }
-        }
-    }
-
-    .marketingAgree {
-        max-width: 54rem;
-
-        .payInfoCon {
-            p {
-                text-align: center;
-
-                strong {
-                    display: block;
-                    font-size: 1.6rem;
-                    line-height: 2.4rem;
-                }
-
-                span {
-                    text-align: center;
-                    display: block;
-                    font-size: 1.6rem;
-                    color: #676767;
-                    margin-top: 1.5rem;
-                    line-height: 2.4rem;
-                }
-
-                &.borderWrap {
-                    margin-top: 30px;
-                    padding: 24px;
-                    font-size: 1.4rem;
-                    line-height: 2.2rem;
-                    color: #676767;
-                    border-top: 1px solid #DEDEDE;
-                    border-bottom: 1px solid #DEDEDE;
-                }
-            }
-        }
-
-        &.popInner {
-            .towButton {
-                width: 100%;
-            }
-        }
-
-        .hideAdCheck {
-            text-align: center;
-            margin-top: 5rem;
-
-            label {
-                display: flex;
-                width: 100%;
-                justify-content: center;
-                align-items: center;
-                text-align: center;
-                font-size: 1.6rem;
-                color: #676767;
-                cursor: pointer;
-
-                span {
-                    margin-left: 1rem;
-                }
-            }
-        }
-
-        @include maxtablet {
-            h1 {
-                font-size: 1.8rem;
-                margin-bottom: 1.5rem;
-            }
-
-            .payInfoCon {
-                p {
-                    font-size: 1.4rem;
-
-                    &.borderWrap {
-                        padding: 2rem 1rem;
-                    }
-                }
-            }
-
-            &.popInner {
-                padding: 3rem 3rem 4rem;
-
-                .towButton {
-                    margin-top: 4rem;
-                    flex-wrap: wrap;
-
-                    button+button {
-                        margin-top: 1rem;
-                    }
-                }
-            }
-
-            .hideAdCheck {
-                margin-top: 4rem;
-
-                label {
-                    font-size: 1.4rem;
-                }
-            }
-        }
-    }
-
-    .inquiryCaseEtc {
-        max-width: 54rem;
-
-        .inquiryCaseEtcCon {
-            p {
-                font-size: 1.6rem;
-                line-height: 2.4rem;
-                text-align: center;
-
-                span {
-                    text-align: center;
-                    display: block;
-                    font-size: 1.6rem;
-                    color: #676767;
-                    margin-top: 1.5rem;
-                    line-height: 2.4rem;
-                }
-            }
-
-            .linkBox {
-                margin-top: 2rem;
-                padding: 2.8rem;
-                background-color: #F3F3F3;
-                text-align: center;
-
-                a {
-                    position: relative;
-                    display: inline;
-                    border-bottom: 1px solid #676767;
-                    margin-right: 2rem;
-                    font-size: 1.4rem;
-                    font-weight: 400;
-                    line-height: 2.2;
-                    color: #676767;
-
-                    &:after {
-                        content: '';
-                        display: inline-block;
-                        position: absolute;
-                        right: -2rem;
-                        bottom: 0;
-                        width: 2rem;
-                        height: 2rem;
-                        background-image: url(/kr/assets/images/kia/svg/icon-link-arrow.svg);
-                        background-repeat: no-repeat;
-                        background-size: 0.6rem 1.2rem;
-                        margin-left: 1rem;
-                        background-position: center;
-                    }
-                }
-            }
-        }
-    }
-
 }
 
 //설치안내 팝업
 .payComplete {
-    position: fixed;
+  position: fixed;
-    overflow: hidden;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.4);
+  top: 0;
+  left: 0;
+  z-index: 500;
+
+  .popInner {
+    position: absolute;
+    top: 55%;
+    left: 50%;
     width: 100%;
-    height: 100%;
+    max-width: 120rem;
-    display: flex;
+    height: 90rem;
-    background-color: rgba(0, 0, 0, 0.4);
+    transform: translateX(-50%);
-    top: 0;
+    margin-top: -45rem;
-    left: 0;
+    padding: 0;
-    z-index: 500;
+    border-radius: 0;
+    background: url(../images/kia/contents/poup_complete.jpg) no-repeat center / cover;
 
-    .popInner {
+    .popContents {
-        position: absolute;
+      position: absolute;
-        top: 55%;
+      bottom: 10%;
-        left: 50%;
+      right: 8.333%;
-        width: 100%;
+      width: 44rem;
-        max-width: 120rem;
+      height: 45.5rem;
-        height: 90rem;
-        transform: translateX(-50%);
-        margin-top: -45rem;
-        padding: 0;
-        border-radius: 0;
-        background: url(../images/kia/contents/poup_complete.jpg) no-repeat center / cover;
 
-        .popContents {
+      .logo {
-            position: absolute;
+        display: block;
-            bottom: 10%;
+        height: 1.6rem;
-            right: 8.333%;
+        margin-bottom: 1.9rem;
-            width: 44rem;
+        background-image: url(../images/kia/kia-logo-n.svg);
-            height: 45.5rem;
+        background-repeat: no-repeat;
+        background-size: auto 100%;
+        text-indent: -9999em;
+      }
 
-            .logo {
+      .payInfoCon {
-                display: block;
+        display: flex;
-                height: 1.6rem;
+        justify-content: center;
-                margin-bottom: 1.9rem;
+        flex-direction: column;
-                background-image: url(../images/kia/kia-logo-n.svg);
+        width: 44rem;
-                background-repeat: no-repeat;
+        height: 42rem;
-                background-size: auto 100%;
+        background-color: #fff;
-                text-indent: -9999em;
-            }
 
-            .payInfoCon {
+        & > p {
-                display: flex;
+          strong {
-                justify-content: center;
+            display: block;
-                flex-direction: column;
+            font-size: 2.8rem;
-                width: 44rem;
+            line-height: 3.4rem;
-                height: 42rem;
+            margin-bottom: 3rem;
-                background-color: #fff;
+            text-align: center;
+          }
 
-                &>p {
+          span {
-                    strong {
+            display: block;
-                        display: block;
+            font-size: 1.6rem;
-                        font-size: 2.8rem;
+            color: #676767;
-                        line-height: 3.4rem;
+            line-height: 2.4rem;
-                        margin-bottom: 3rem;
+            text-align: center;
-                        text-align: center;
+          }
-                    }
-
-                    span {
-                        display: block;
-                        font-size: 1.6rem;
-                        color: #676767;
-                        line-height: 2.4rem;
-                        text-align: center;
-                    }
-                }
-            }
         }
-
+      }
-
-        @include maxtablet {
-            max-height: 64rem;
-            width: calc(100% - 4rem);
-            background: url(../images/kia/contents/poup_complete_m.jpg) no-repeat center / cover;
-
-            transform: translate(-50%, -50%);
-            margin-top: 0;
-
-            .popContents {
-                position: absolute;
-                bottom: 3rem;
-                right: auto;
-                width: 100%;
-                height: auto;
-
-                .logo {
-                    display: block;
-                    width: 81.25%;
-                    height: 1.2rem;
-                    margin: 0 auto;
-                    margin-bottom: 1.2rem;
-                }
-
-                .payInfoCon {
-                    width: 81.25%;
-                    height: 27.7rem;
-                    margin: 0 auto;
-
-                    &>p {
-                        padding: 0 3rem;
-
-                        strong {
-                            font-size: 1.8rem;
-                            line-height: 2.16rem;
-                            margin-bottom: 1.6rem;
-                        }
-
-                        span {
-                            font-size: 1.4rem;
-                            line-height: 1.68rem;
-
-                            em {
-                                display: block;
-                            }
-
-                            br {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-
-                .oneButton {
-                    margin-top: 3rem;
-                }
-
-            }
-        }
-
-        @media(max-width: 320px) {
-            .popContents {
-                .payInfoCon {
-                    &>p {
-                        padding: 0 1rem;
-                    }
-                }
-            }
-        }
-
-
     }
-}
+
+    @include maxtablet {
+      max-height: 64rem;
+      width: calc(100% - 4rem);
+      background: url(../images/kia/contents/poup_complete_m.jpg) no-repeat center / cover;
+
+      transform: translate(-50%, -50%);
+      margin-top: 0;
+
+      .popContents {
+        position: absolute;
+        bottom: 3rem;
+        right: auto;
+        width: 100%;
+        height: auto;
+
+        .logo {
+          display: block;
+          width: 81.25%;
+          height: 1.2rem;
+          margin: 0 auto;
+          margin-bottom: 1.2rem;
+        }
+
+        .payInfoCon {
+          width: 81.25%;
+          height: 27.7rem;
+          margin: 0 auto;
+
+          & > p {
+            padding: 0 3rem;
+
+            strong {
+              font-size: 1.8rem;
+              line-height: 2.16rem;
+              margin-bottom: 1.6rem;
+            }
+
+            span {
+              font-size: 1.4rem;
+              line-height: 1.68rem;
+
+              em {
+                display: block;
+              }
+
+              br {
+                display: none;
+              }
+            }
+          }
+        }
+
+        .oneButton {
+          margin-top: 3rem;
+        }
+      }
+    }
+
+    @media (max-width: 320px) {
+      .popContents {
+        .payInfoCon {
+          & > p {
+            padding: 0 1rem;
+          }
+        }
+      }
+    }
+  }
+}

kr/assets/css/product.css

@@ -157,15 +157,6 @@
     font-size: 4.5rem;
   }
 }
-.contentWarp .productView .productRight .optionWarp .producTitle h1 .btn-wish {
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  width: 3rem;
-  height: 3rem;
-  background: url(../images/kia/pdp/display_theme_disney/Icon_heart.png) no-repeat center/100% auto;
-}
 .contentWarp .productView .productRight .optionWarp .producTitle span {
   color: #676767;
   font-size: 1.5rem;

kr/assets/css/product.scss

@@ -132,15 +132,6 @@
             @include tablet {
               font-size: 4.5rem;
             }
-            .btn-wish {
-              position: absolute;
-              top: 50%;
-              right: 0;
-              transform: translateY(-50%);
-              width: 3rem;
-              height: 3rem;
-              background: url(../images/kia/pdp/display_theme_disney/Icon_heart.png) no-repeat center / 100% auto;
-            }
           }
           span {
             color: #676767;

kr/assets/css/promotion.css

@@ -103,6 +103,14 @@ html {
     display: none;
   }
 }
+#promotion .promotionWrap .util-area {
+  margin-bottom: 2.4rem;
+}
+@media (min-width: 768px) {
+  #promotion .promotionWrap .util-area {
+    margin-bottom: 2.8rem;
+  }
+}
 #promotion .parallax-section {
   position: relative;
   width: 100%;

kr/assets/css/promotion.scss

@@ -97,6 +97,12 @@ html {
         }
       }
     }
+    .util-area {
+      margin-bottom: 2.4rem;
+      @include tablet {
+        margin-bottom: 2.8rem;
+      }
+    }
   }
 
   // Parallax 섹션 스타일

kr/assets/js/common.js

@@ -1567,3 +1567,57 @@ function btnTabMenu(tabBtnNumber) {
     $(".tab-menu .btn-select").text($tabBtnText);
   }
 }
+
+// 공유하기 팝업 열릴 때 URL 설정
+function openSharePopup() {
+  var currentUrl = window.location.href;
+  currentUrl = currentUrl.split("?")[0];
+  currentUrl = currentUrl.split("#")[0];
+  document.getElementById("shareUrl").value = currentUrl;
+
+  // 모바일이고 navigator.share API가 지원되는 경우
+  if (navigator.share) {
+    const shareData = {
+      title: document.title,
+      url: currentUrl,
+    };
+
+    const btn = document.querySelector(".btn-share");
+
+    // Share must be triggered by "user activation"
+    btn.addEventListener("click", async () => {
+      try {
+        await navigator.share(shareData);
+        console.log("MDN shared successfully");
+      } catch (err) {
+        console.log(`Error: ${err}`);
+      }
+    });
+  } else {
+    console.log("navigator.share is not supported");
+    open_layer_popup("sharePopup");
+  }
+}
+
+// 링크 복사 함수
+function copyShareLink() {
+  var urlInput = document.getElementById("shareUrl");
+  urlInput.select();
+  urlInput.setSelectionRange(0, 99999); // 모바일 지원
+
+  try {
+    document.execCommand("copy");
+    alert("링크가 복사되었습니다.");
+    close_layer_popup("sharePopup");
+  } catch (err) {
+    // execCommand가 실패한 경우 (최신 브라우저)
+    if (navigator.clipboard && navigator.clipboard.writeText) {
+      navigator.clipboard.writeText(urlInput.value).then(function () {
+        alert("링크가 복사되었습니다.");
+        close_layer_popup("sharePopup");
+      });
+    } else {
+      alert("링크 복사에 실패했습니다. 수동으로 복사해주세요.");
+    }
+  }
+}

kr/info/service-info.html

@@ -248,6 +248,9 @@
       <div class="comp_body">
         <div class="text_wrap">
           <div class="text_area">
+            <div class="util-area">
+              <button type="button" class="btn-share" onclick="openSharePopup()">공유하기</button>
+            </div>
             <div class="title_area">
               <span> 미래를 향한 새로운 경험, 기아만의 디지털 사양을 기아 커넥트 스토어에서 만나보세요. </span>
               <div class="oneButton">
@@ -408,6 +411,26 @@
       </div>
     </div>
     <!--//footer-->
+
+    <div id="sharePopup" class="popupWarp" style="display: none">
+      <div class="popInner sharePop">
+        <div class="popContents">
+          <h1>공유하기</h1>
+          <div class="shareCon">
+            <div class="shareUrlBox">
+              <input type="text" id="shareUrl" class="shareUrlInput" value="" readonly />
+            </div>
+          </div>
+          <div>
+            <div class="towButton">
+              <button type="button" class="cartBtn leftBtn" onclick="close_layer_popup('sharePopup')"><p>닫기</p></button>
+              <button type="button" class="PurchaseBtn rightBtn" onclick="copyShareLink()"><p>링크복사</p></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script>
       AOS.init();
     </script>

kr/product/pdp_display_theme_disney_frozen.html

@@ -413,9 +413,12 @@
           <div class="optionWarp">
             <div class="producTitle">
               <!-- <span>차량SW</span> -->
+              <div class="util-area">
+                <button type="button" class="btn-share" onclick="openSharePopup()">공유하기</button>
+                <button type="button" class="btn-wish">좋아요</button>
+              </div>
               <h1>
                 디즈니 디스플레이 테마
-                <button type="button" class="btn-wish"></button>
               </h1>
               <p>디즈니 디스플레이 테마와 함께 차량에 특별한 감성을 더해보세요.</p>
             </div>
@@ -609,6 +612,7 @@
                     <div class="inner">
                       <div class="item welcome-goodbye aos-init aos-animate" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
                         <div class="image_area">
+                          <!-- 20251113 수정 -->
                           <div class="video-area">
                             <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                               <source src="../assets/images/kia/promotion/micky/Welcome.mp4" type="video/mp4" />
@@ -621,6 +625,7 @@
                               이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                             </video>
                           </div>
+                          <!--// 20251113 수정 -->
                         </div>
                         <div class="text_area">
                           <h4>Welcome &amp; Goodbye Video</h4>
@@ -749,6 +754,7 @@
                     <div class="inner">
                       <div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                         <div class="image_area">
+                          <!-- 20251113 수정 -->
                           <div class="video-area">
                             <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                               <source src="../assets/images/kia/promotion/frozen/Welcome.mp4" type="video/mp4" />
@@ -1170,7 +1176,27 @@
           </div>
         </div>
       </div>
+
     </div>
+    <div id="sharePopup" class="popupWarp" style="display: none">
+      <div class="popInner sharePop">
+         <div class="popContents">
+            <h1>공유하기</h1>
+            <div class="shareCon">
+              <div class="shareUrlBox">
+                <input type="text" id="shareUrl" class="shareUrlInput" value="" readonly />
+              </div>
+            </div>
+            <div>
+              <div class="towButton">
+                <button type="button" class="cartBtn leftBtn" onclick="close_layer_popup('sharePopup')"><p>닫기</p></button>
+                <button type="button" class="PurchaseBtn rightBtn" onclick="copyShareLink()"><p>링크복사</p></button>
+              </div>
+            </div>
+         </div>
+      </div>
+    </div>
+    
     <!--//footer-->
     <script>
       AOS.init();

kr/product/pdp_display_theme_disney_pixar.html

@@ -572,6 +572,7 @@
                     <div class="inner">
                       <div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
                         <div class="image_area">
+                          <!-- 20251113 수정 -->
                           <div class="video-area">
                             <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                               <source src="../assets/images/kia/promotion/pixar/Welcome.mp4" type="video/mp4" />
@@ -584,6 +585,7 @@
                               이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                             </video>
                           </div>
+                          <!--// 20251113 수정 -->
                         </div>
                         <div class="text_area">
                           <h4 class="color-000">Welcome &amp; Goodbye Video</h4>

kr/product/pdp_display_theme_marverl.html

@@ -453,6 +453,7 @@
                   <div class="inner">
                     <div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                       <div class="image_area">
+                        <!-- 20251113 수정 -->
                         <div class="video-area">
                           <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                             <source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
@@ -465,6 +466,7 @@
                             이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                           </video>
                         </div>
+                        <!--// 20251113 수정 -->
                       </div>
 
                       <div class="text_area">
@@ -574,16 +576,20 @@
                   <div class="inner">
                     <div class="item welcome-goodbye" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
                       <div class="image_area">
-                        <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
+                        <!-- 20251113 수정 -->
-                          <source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
+                        <div class="video-area">
-                          이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
+                          <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
-                        </video>
+                            <source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
-                      </div>
+                            이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
-                      <div class="video-area">
+                          </video>
-                        <video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
+                        </div>
-                          <source src="../assets/images/kia/promotion/marvel/Goodbye.mp4" type="video/mp4" />
+                        <div class="video-area">
-                          이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
+                          <video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
-                        </video>
+                            <source src="../assets/images/kia/promotion/marvel/Goodbye.mp4" type="video/mp4" />
+                            이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
+                          </video>
+                        </div>
+                        <!--// 20251113 수정 -->
                       </div>
 
                       <div class="text_area">

kr/promotion/disney_promotion_new.html

@@ -40,7 +40,7 @@
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
 
-    <script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v2"></script>
+    <script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v4"></script>
     <!--상품상세 페이지 css 분리-->
     <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
     <link rel="stylesheet" charset="UTF-8" href="../assets/css/promotion.css?v0.1" type="text/css" />
@@ -474,6 +474,7 @@
                       <img src="../assets/images/kia/promotion/disney_theme1_display.jpg" alt="Disney Theme" />
                     </div>
                     <div class="img-area">
+                      <!-- 20251113 수정 -->
                       <div class="video-area">
                         <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/promotion/micky/Welcome.mp4" type="video/mp4" />
@@ -486,6 +487,7 @@
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
+                      <!--// 20251113 수정 -->
                     </div>
                   </div>
                 </div>
@@ -496,6 +498,7 @@
                       <img src="../assets/images/kia/promotion/disney_theme2_display.jpg" alt="Disney Theme" />
                     </div>
                     <div class="img-area">
+                      <!-- 20251113 수정 -->
                       <div class="video-area">
                         <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/promotion/frozen/Welcome.mp4" type="video/mp4" />
@@ -508,6 +511,7 @@
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
+                      <!--// 20251113 수정 -->
                     </div>
                   </div>
                 </div>
@@ -536,6 +540,7 @@
                       <img src="../assets/images/kia/promotion/disney_pixar_theme1_display.jpg" alt="Pixar Theme" />
                     </div>
                     <div class="img-area">
+                      <!-- 20251113 수정 -->
                       <div class="video-area">
                         <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/promotion/pixar/Welcome.mp4" type="video/mp4" />
@@ -548,6 +553,7 @@
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
+                      <!--// 20251113 수정 -->
                     </div>
                   </div>
                 </div>
@@ -576,6 +582,7 @@
                       <img src="../assets/images/kia/promotion/marvel_theme1_display.png" alt="Marvel Theme" loading="eager" />
                     </div>
                     <div class="img-area">
+                      <!-- 20251113 수정 -->
                       <div class="video-area">
                         <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
@@ -588,6 +595,7 @@
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
+                      <!--// 20251113 수정 -->
                     </div>
                   </div>
                 </div>
@@ -598,6 +606,7 @@
                       <img src="../assets/images/kia/promotion/marvel_theme2_display.jpg" alt="Marvel Theme" />
                     </div>
                     <div class="img-area">
+                      <!-- 20251113 수정 -->
                       <div class="video-area">
                         <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
@@ -610,6 +619,7 @@
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
+                      <!--// 20251113 수정 -->
                     </div>
                   </div>
                 </div>
@@ -637,6 +647,7 @@
                       <img src="../assets/images/kia/promotion/ng_theme1_display.jpg" alt="National Geographic Theme" />
                     </div>
                     <div class="img-area">
+                      <!-- 20251113 수정 -->
                       <div class="video-area">
                         <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/promotion/natgeo/BabyAnimals/Welcome.mp4" type="video/mp4" />
@@ -649,6 +660,7 @@
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
+                      <!--// 20251113 수정 -->
                     </div>
                   </div>
                 </div>
@@ -659,6 +671,7 @@
                       <img src="../assets/images/kia/promotion/ng_theme2_display.jpg" alt="National Geographic Theme" />
                     </div>
                     <div class="img-area">
+                      <!-- 20251113 수정 -->
                       <div class="video-area">
                         <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/promotion/natgeo/SpaceWonder/Welcome.mp4" type="video/mp4" />
@@ -671,6 +684,7 @@
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
+                      <!--// 20251113 수정 -->
                     </div>
                   </div>
                 </div>
@@ -681,6 +695,7 @@
                       <img src="../assets/images/kia/promotion/ng_theme3_display.jpg" alt="National Geographic Theme" />
                     </div>
                     <div class="img-area">
+                      <!-- 20251113 수정 -->
                       <div class="video-area">
                         <video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
                           <source src="../assets/images/kia/promotion/natgeo/LandScapes/Welcome.mp4" type="video/mp4" />
@@ -693,6 +708,7 @@
                           이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
                         </video>
                       </div>
+                      <!--// 20251113 수정 -->
                     </div>
                   </div>
                 </div>
@@ -742,6 +758,9 @@
         <!-- Select Guide 탭 -->
         <div id="ThemeSelectGuide" class="tabContent theme-select-guide">
           <div class="contentSection">
+            <div class="util-area">
+              <button type="button" class="btn-share">공유하기</button>
+            </div>
             <div class="title-area">
               <h3>더 깊이 있는 차량 경험의 시작.</h3>
               <h2>나만의 테마를 골라보세요.</h2>
@@ -1191,6 +1210,26 @@
       </div>
     </div>
     <!--//footer-->
+
+    <div id="sharePopup" class="popupWarp" style="display: none">
+      <div class="popInner sharePop">
+        <div class="popContents">
+          <h1>공유하기</h1>
+          <div class="shareCon">
+            <div class="shareUrlBox">
+              <input type="text" id="shareUrl" class="shareUrlInput" value="" readonly />
+            </div>
+          </div>
+          <div>
+            <div class="towButton">
+              <button type="button" class="cartBtn leftBtn" onclick="close_layer_popup('sharePopup')"><p>닫기</p></button>
+              <button type="button" class="PurchaseBtn rightBtn" onclick="copyShareLink()"><p>링크복사</p></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <script>
       function playYoutube(id) {
         var youtube_id = $(".youtubeArea_pdp").attr("value");

kr/service/event-view.html

@@ -249,6 +249,10 @@
       <div class="eventView">
         <div class="viewInner">
           <div class="viewTitle">
+            <div class="util-area">
+              <button type="button" class="btn-share" onclick="openSharePopup()">공유하기</button>
+              <button type="button" class="btn-wish">좋아요</button>
+            </div>
             <p>
               <span>
                 <span class="badge">진행중</span>
@@ -485,11 +489,30 @@
         </div>
       </div>
     </div>
+
+    <div id="sharePopup" class="popupWarp" style="display: none">
+      <div class="popInner sharePop">
+        <div class="popContents">
+          <h1>공유하기</h1>
+          <div class="shareCon">
+            <div class="shareUrlBox">
+              <input type="text" id="shareUrl" class="shareUrlInput" value="" readonly />
+            </div>
+          </div>
+          <div>
+            <div class="towButton">
+              <button type="button" class="cartBtn leftBtn" onclick="close_layer_popup('sharePopup')"><p>닫기</p></button>
+              <button type="button" class="PurchaseBtn rightBtn" onclick="copyShareLink()"><p>링크복사</p></button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </body>
   <script>
-    open_layer_popup("loginCoupon");
+    // open_layer_popup("loginCoupon");
-    open_layer_popup("getCoupon");
+    // open_layer_popup("getCoupon");
-    open_layer_popup("failCouponDown");
+    // open_layer_popup("failCouponDown");
-    open_layer_popup("failCouponExpired");
+    // open_layer_popup("failCouponExpired");
   </script>
 </html>