gil/fod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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.

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-11-18 23:31:29 +09:00
parent 6ece736da9
commit cfb9b1c4d4
20 changed files with 703 additions and 2051 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
kr/assets/css/contents.css
View File

@@ -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-bottom: 1px solid #9BA1A5;
border-top: 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;
}
}
}

21
kr/assets/css/popup.css
View File

@@ -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-bottom: 1px solid #DEDEDE;
border-top: 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;

2
kr/assets/css/popup.css.map
View File

@@ -1 +1 @@
{"version":3,"sources":["popup.css","_utils.scss","popup.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,KAAA;AAGA,YAAA;AAOA,mBAAA;AACA,2BAAA;AAiBA,2BAAA;AACA,yDAAA;AAmBA,4BAAA;AAOA,4BAAA;AAOA,iBAAA;AC5DA,cAAA;AAEA;EACI,eAAA;EACA,MAAA;EACA,OAAA;EACA,WAAA;EACA,YAAA;EACA,gBAAA;EACA,oCAAA;EACA,aAAA;AFQJ;AENI;EACI,sBAAA;EACA,aAAA;EACA,qBAAA;AFQR;AENQ;EACI,iBAAA;EACA,iBAAA;EACA,kBAAA;EACA,mBAAA;AFQZ;AELQ;EACI,aAAA;EACA,gBAAA;EACA,kBAAA;AFOZ;AELY;EACI,UAAA;AFOhB;AEJY;EACI,yBAAA;EACA,mBAAA;EACA,4BAAA;EACA,6BAAA;AFMhB;AEHY;EACI,6BAAA;EACA,mBAAA;EACA,mCAAA;AFKhB;AEFY;EACI,mBAAA;EACA,cAAA;AFIhB;AEAQ;EACI,YAAA;EACA,cAAA;EACA,gBAAA;AFEZ;AECQ;EACI,cAAA;EACA,gBAAA;AFCZ;AC3BE;ECtBE;IAoDQ,aAAA;EFCV;AACF;AEEI;EACI,kBAAA;EACA,UAAA;EACA,SAAA;EACA,QAAA;EACA,gCAAA;AFAR;AClBE;ECaE;IAQQ,0BAAA;IAAA,uBAAA;IAAA,kBAAA;IACA,WAAA;EFCV;AACF;AEEI;EACI,gBAAA;AFAR;AEGI;EACI,gBAAA;AFDR;AEKgB;EACI,cAAA;EACA,iBAAA;EACA,mBAAA;EACA,kBAAA;AFHpB;AEMgB;EACI,kBAAA;EACA,cAAA;EACA,iBAAA;EACA,cAAA;EACA,kBAAA;EACA,mBAAA;AFJpB;AEUI;EACI,gBAAA;AFRR;AEWY;EACI,kBAAA;AFThB;AEWgB;EACI,cAAA;EACA,iBAAA;EACA,mBAAA;AFTpB;AEYgB;EACI,kBAAA;EACA,cAAA;EACA,iBAAA;EACA,cAAA;EACA,kBAAA;EACA,mBAAA;AFVpB;AEagB;EACI,gBAAA;EACA,aAAA;EACA,iBAAA;EACA,mBAAA;EACA,cAAA;EACA,6BAAA;EACA,gCAAA;AFXpB;AEiBY;EACI,WAAA;AFfhB;AEmBQ;EACI,kBAAA;EACA,gBAAA;AFjBZ;AEmBY;EACI,aAAA;EACA,WAAA;EACA,uBAAA;EACA,mBAAA;EACA,kBAAA;EACA,iBAAA;EACA,cAAA;EACA,eAAA;AFjBhB;AEmBgB;EACI,iBAAA;AFjBpB;ACjHE;ECwIU;IACI,iBAAA;IACA,qBAAA;EFpBd;EEwBc;IACI,iBAAA;EFtBlB;EEwBkB;IACI,kBAAA;EFtBtB;EE2BU;IACI,uBAAA;EFzBd;EE2Bc;IACI,gBAAA;IACA,eAAA;EFzBlB;EE2BkB;IACI,gBAAA;EFzBtB;EE8BU;IACI,gBAAA;EF5Bd;EE8Bc;IACI,iBAAA;EF5BlB;AACF;AEiCI;EACI,gBAAA;AF/BR;AEkCY;EACI,iBAAA;EACA,mBAAA;EACA,kBAAA;AFhChB;AEkCgB;EACI,kBAAA;EACA,cAAA;EACA,iBAAA;EACA,cAAA;EACA,kBAAA;EACA,mBAAA;AFhCpB;AEoCY;EACI,gBAAA;EACA,eAAA;EACA,yBAAA;EACA,kBAAA;AFlChB;AEoCgB;EACI,kBAAA;EACA,eAAA;EACA,gCAAA;EACA,kBAAA;EACA,iBAAA;EACA,gBAAA;EACA,gBAAA;EACA,cAAA;AFlCpB;AEoCoB;EACI,WAAA;EACA,qBAAA;EACA,kBAAA;EACA,YAAA;EACA,SAAA;EACA,WAAA;EACA,YAAA;EACA,oEAAA;EACA,4BAAA;EACA,8BAAA;EACA,iBAAA;EACA,2BAAA;AFlCxB;;AE4CA;EACI,eAAA;EACA,gBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,oCAAA;EACA,MAAA;EACA,OAAA;EACA,YAAA;AFzCJ;AE2CI;EACI,kBAAA;EACA,QAAA;EACA,SAAA;EACA,WAAA;EACA,iBAAA;EACA,aAAA;EACA,2BAAA;EACA,kBAAA;EACA,UAAA;EACA,gBAAA;EACA,gFAAA;AFzCR;AE2CQ;EACI,kBAAA;EACA,WAAA;EACA,aAAA;EACA,YAAA;EACA,eAAA;AFzCZ;AE2CY;EACI,cAAA;EACA,cAAA;EACA,qBAAA;EACA,mDAAA;EACA,4BAAA;EACA,0BAAA;EACA,oBAAA;AFzChB;AE4CY;EACI,aAAA;EACA,uBAAA;EACA,sBAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;AF1ChB;AE6CoB;EACI,cAAA;EACA,iBAAA;EACA,mBAAA;EACA,mBAAA;EACA,kBAAA;AF3CxB;AE8CoB;EACI,cAAA;EACA,iBAAA;EACA,cAAA;EACA,mBAAA;EACA,kBAAA;AF5CxB;AC1PE;ECkPE;IA4DQ,iBAAA;IACA,wBAAA;IACA,kFAAA;IAEA,gCAAA;IACA,aAAA;EFjDV;EEmDU;IACI,kBAAA;IACA,YAAA;IACA,WAAA;IACA,WAAA;IACA,YAAA;EFjDd;EEmDc;IACI,cAAA;IACA,aAAA;IACA,cAAA;IACA,cAAA;IACA,qBAAA;EFjDlB;EEoDc;IACI,aAAA;IACA,eAAA;IACA,cAAA;EFlDlB;EEoDkB;IACI,eAAA;EFlDtB;EEoDsB;IACI,iBAAA;IACA,oBAAA;IACA,qBAAA;EFlD1B;EEqDsB;IACI,iBAAA;IACA,oBAAA;EFnD1B;EEqD0B;IACI,cAAA;EFnD9B;EEsD0B;IACI,aAAA;EFpD9B;EE0Dc;IACI,gBAAA;EFxDlB;AACF;AE6DQ;EAGY;IACI,eAAA;EF7DtB;AACF","file":"popup.css"}
{"version":3,"sources":["popup.css","_utils.scss","popup.scss"],"names":[],"mappings":"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","file":"popup.css"}

757
kr/assets/css/popup.scss
View File

@@ -1,409 +1,422 @@
@charset "UTF-8";
@import 'utils.scss';
@import "utils.scss";
/*변수파일 import*/
.popupWarp {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1000;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.4);
z-index: 1000;
.popInner {
background-color: #fff;
padding: 5rem;
border-radius: 0.6rem;
.popInner {
background-color: #fff;
padding: 5rem;
border-radius: 0.6rem;
h1 {
font-size: 2.4rem;
font-weight: bold;
text-align: center;
margin-bottom: 3rem;
h1 {
font-size: 2.4rem;
font-weight: bold;
text-align: center;
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 {
height: 29rem;
overflow-y: auto;
overflow-x: hidden;
span {
text-align: center;
display: block;
font-size: 1.6rem;
color: #676767;
margin-top: 1.5rem;
line-height: 2.4rem;
}
}
}
}
&::-webkit-scrollbar {
width: 8px;
}
.marketingAgree {
max-width: 54rem;
&::-webkit-scrollbar-thumb {
background-color: #DEDEDE;
border-radius: 10px;
background-clip: padding-box;
border: 2px solid transparent;
}
.payInfoCon {
p {
text-align: center;
&::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 10px;
box-shadow: inset 0px 0px 5px white;
}
p {
line-height: 2.4rem;
color: #676767;
}
strong {
display: block;
font-size: 1.6rem;
line-height: 2.4rem;
}
.oneButton {
width: 16rem;
margin: 0 auto;
margin-top: 5rem;
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: 0 auto;
margin-top: 5rem;
}
margin-top: 4rem;
flex-wrap: wrap;
@include maxtablet {
padding: 3rem;
button + button {
margin-top: 1rem;
}
}
}
.hideAdCheck {
margin-top: 4rem;
label {
font-size: 1.4rem;
}
}
}
}
.popInner {
position: absolute;
width: 92%;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.inquiryCaseEtc {
max-width: 54rem;
@include desktopMax {
width: fit-content;
width: 100%;
.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;
}
}
}
}
}
.termsPop {
max-width: 90rem;
.sharePop {
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;
overflow: hidden;
position: fixed;
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%;
display: flex;
background-color: rgba(0, 0, 0, 0.4);
top: 0;
left: 0;
z-index: 500;
max-width: 120rem;
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;
.popInner {
position: absolute;
top: 55%;
left: 50%;
width: 100%;
max-width: 120rem;
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 {
position: absolute;
bottom: 10%;
right: 8.333%;
width: 44rem;
height: 45.5rem;
.popContents {
position: absolute;
bottom: 10%;
right: 8.333%;
width: 44rem;
height: 45.5rem;
.logo {
display: block;
height: 1.6rem;
margin-bottom: 1.9rem;
background-image: url(../images/kia/kia-logo-n.svg);
background-repeat: no-repeat;
background-size: auto 100%;
text-indent: -9999em;
}
.logo {
display: block;
height: 1.6rem;
margin-bottom: 1.9rem;
background-image: url(../images/kia/kia-logo-n.svg);
background-repeat: no-repeat;
background-size: auto 100%;
text-indent: -9999em;
}
.payInfoCon {
display: flex;
justify-content: center;
flex-direction: column;
width: 44rem;
height: 42rem;
background-color: #fff;
.payInfoCon {
display: flex;
justify-content: center;
flex-direction: column;
width: 44rem;
height: 42rem;
background-color: #fff;
& > p {
strong {
display: block;
font-size: 2.8rem;
line-height: 3.4rem;
margin-bottom: 3rem;
text-align: center;
}
&>p {
strong {
display: block;
font-size: 2.8rem;
line-height: 3.4rem;
margin-bottom: 3rem;
text-align: center;
}
span {
display: block;
font-size: 1.6rem;
color: #676767;
line-height: 2.4rem;
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;
}
}
}
}
}
}

9
kr/assets/css/product.css
View File

@@ -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;

2
kr/assets/css/product.css.map
View File

File diff suppressed because one or more lines are too long

9
kr/assets/css/product.scss
View File

@@ -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;

8
kr/assets/css/promotion.css
View File

@@ -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%;

2
kr/assets/css/promotion.css.map
View File

File diff suppressed because one or more lines are too long

6
kr/assets/css/promotion.scss
View File

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

BIN
kr/assets/images/common/icon_heart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
kr/assets/images/common/icon_share.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

54
kr/assets/js/common.js
View File

@@ -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("링크 복사에 실패했습니다. 수동으로 복사해주세요.");
}
}
}

1588
kr/assets/js/disney_promotion_new2.html
View File

File diff suppressed because it is too large Load Diff

23
kr/info/service-info.html
View File

@@ -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>

28
kr/product/pdp_display_theme_disney_frozen.html
View File

@@ -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();

2
kr/product/pdp_display_theme_disney_pixar.html
View File

@@ -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>

26
kr/product/pdp_display_theme_marverl.html
View File

@@ -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>
<source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="video-area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/promotion/marvel/Goodbye.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
<!-- 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" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="video-area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/promotion/marvel/Goodbye.mp4" type="video/mp4" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<!--// 20251113 수정 -->
</div>
<div class="text_area">

41
kr/promotion/disney_promotion_new.html
View File

@@ -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");

31
kr/service/event-view.html
View File

@@ -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("getCoupon");
open_layer_popup("failCouponDown");
open_layer_popup("failCouponExpired");
// open_layer_popup("loginCoupon");
// open_layer_popup("getCoupon");
// open_layer_popup("failCouponDown");
// open_layer_popup("failCouponExpired");
</script>
</html>