메인 수정 중
This commit is contained in:
@@ -1390,4 +1390,12 @@
|
|||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.specNoti {
|
||||||
|
display: block;
|
||||||
|
max-width: 120rem;
|
||||||
|
height: 6.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
/*# sourceMappingURL=kiamain.css.map */
|
/*# sourceMappingURL=kiamain.css.map */
|
||||||
@@ -153,7 +153,7 @@
|
|||||||
background-size: 0;
|
background-size: 0;
|
||||||
@media(max-width: 1024px){
|
@media(max-width: 1024px){
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 3rem;
|
padding: 3rem;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
@@ -194,7 +194,7 @@
|
|||||||
border: 1px solid #9EA1A2;
|
border: 1px solid #9EA1A2;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #9EA1A2;
|
color: #000;
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
&:not(:first-child){
|
&:not(:first-child){
|
||||||
margin-left: 0.3rem;
|
margin-left: 0.3rem;
|
||||||
@@ -204,6 +204,20 @@
|
|||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
border: 1px solid #FFFFFF;
|
border: 1px solid #FFFFFF;
|
||||||
}
|
}
|
||||||
|
&.available {
|
||||||
|
background-color: #5D7D2B;
|
||||||
|
color: #fff;
|
||||||
|
@media(max-width: 1024px){
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.promotion {
|
||||||
|
background-color: #F3C300;
|
||||||
|
color: #000;
|
||||||
|
@media(max-width: 1024px){
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
h2 {
|
h2 {
|
||||||
@@ -243,9 +257,10 @@
|
|||||||
.infoBottom {
|
.infoBottom {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: flex-end;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@media(max-width: 1024px){
|
@media(max-width: 1024px){
|
||||||
|
display: block;
|
||||||
margin-top: 2.5rem;
|
margin-top: 2.5rem;
|
||||||
}
|
}
|
||||||
.listOtionPrice {
|
.listOtionPrice {
|
||||||
@@ -259,58 +274,84 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: space-between;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
|
height: 9.2rem;
|
||||||
|
padding:1.6rem;
|
||||||
|
background-color: #F2F2F2;
|
||||||
|
border-radius: 0.6rem;
|
||||||
@media(max-width: 1024px){
|
@media(max-width: 1024px){
|
||||||
flex-direction: row-reverse;
|
flex-direction: row;
|
||||||
justify-content: flex-end;
|
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 4.8rem;
|
||||||
|
padding: 1rem 1.6rem;
|
||||||
&:not(:first-child){
|
&:not(:first-child){
|
||||||
margin-top: 1rem;
|
margin-top: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
dt {
|
dt {
|
||||||
font-size: 1.6rem;
|
font-size: 1.1rem;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: #676767;
|
color: #676767;
|
||||||
@media(max-width: 1024px){
|
@media(max-width: 1024px){
|
||||||
position: relative;
|
position: relative;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
color: #FFFFFF;
|
color: #000;
|
||||||
margin-left: 0.8rem;
|
margin-left: 0;
|
||||||
padding-left: 0.8rem;
|
padding-left: 0;
|
||||||
&::before {
|
// &::before {
|
||||||
content: "";
|
// content: "";
|
||||||
position: absolute;
|
// position: absolute;
|
||||||
top: 0.1rem;
|
// top: 0.1rem;
|
||||||
left: 0;
|
// left: 0;
|
||||||
width: 0.1rem;
|
// width: 0.1rem;
|
||||||
height: 1.4rem;
|
// height: 1.4rem;
|
||||||
background-color: #DEDEDE;
|
// background-color: #DEDEDE;
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
dd {
|
dd {
|
||||||
margin-top: 1rem;
|
// margin-top: 1.8rem;
|
||||||
font-size: 1.6rem;
|
font-size: 1.6rem;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
@media(max-width: 1024px){
|
@media(max-width: 1024px){
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: flex-end;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
color: #FFFFFF;
|
color: #000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.price {
|
||||||
|
@media(max-width: 1024px){
|
||||||
|
display: flex;
|
||||||
|
em {
|
||||||
|
order: 2;
|
||||||
|
}
|
||||||
|
.dc {
|
||||||
|
order: 1;
|
||||||
|
margin-right: .4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.discount {
|
.discount {
|
||||||
margin:.6rem 0 -1.5rem;
|
display: block;
|
||||||
|
margin:.6rem 0 0;
|
||||||
font-size: 1.4rem;
|
font-size: 1.4rem;
|
||||||
color: #9EA1A2;
|
color: #9EA1A2;
|
||||||
@media(max-width: 1024px){
|
text-align: left;
|
||||||
|
@media(max-width: 1024px){
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin:.2rem 0 0;
|
margin:.2rem 0 0;
|
||||||
|
color: #9EA1A2;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
b {
|
b {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
@@ -320,26 +361,29 @@
|
|||||||
text-decoration:line-through;
|
text-decoration:line-through;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.dc {
|
||||||
|
font-size: 1.4rem;
|
||||||
|
color: #EA0029;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&:not(:first-child){
|
&:not(:first-child){
|
||||||
margin-left: 1.5rem;
|
margin-left: 0.8rem;
|
||||||
padding-left: 1.5rem;
|
// padding-left: 0.8rem;
|
||||||
@media(max-width: 1024px){
|
@media(max-width: 1024px){
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
&::before {
|
|
||||||
content: "";
|
|
||||||
position: absolute;
|
|
||||||
top: 0.2rem;
|
|
||||||
left: 0;
|
|
||||||
width: 0.1rem;
|
|
||||||
height: 4.4rem;
|
|
||||||
background-color: #DEDEDE;
|
|
||||||
@media(max-width: 1024px){
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
// &::before {
|
||||||
|
// content: "";
|
||||||
|
// position: absolute;
|
||||||
|
// top: 0.2rem;
|
||||||
|
// left: 0;
|
||||||
|
// width: 0.1rem;
|
||||||
|
// height: 4.4rem;
|
||||||
|
// background-color: #DEDEDE;
|
||||||
|
// @media(max-width: 1024px){
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -1256,4 +1300,43 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.specNoti {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
max-width: 120rem;
|
||||||
|
height: 6.5rem;
|
||||||
|
padding:0 2.4rem;
|
||||||
|
margin: 6rem auto -3rem;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
|
||||||
|
@include maxtablet{
|
||||||
|
padding:1.2rem;
|
||||||
|
margin: -2rem 2rem 2rem;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0.5rem 0.8rem;
|
||||||
|
margin: 0 0.4rem;
|
||||||
|
border: 1px solid #9EA1A2;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #9EA1A2;
|
||||||
|
line-height: 1;
|
||||||
|
@include maxtablet{
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: #FFFFFF;
|
||||||
|
border: 1px solid #FFFFFF;
|
||||||
|
}
|
||||||
|
&.available {
|
||||||
|
background-color: #5D7D2B;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
&.promotion {
|
||||||
|
background-color: #F3C300;
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|||||||
1460
assets/css/kiamain.css
Normal file
1460
assets/css/kiamain.css
Normal file
File diff suppressed because it is too large
Load Diff
1
assets/css/kiamain.css.map
Normal file
1
assets/css/kiamain.css.map
Normal file
File diff suppressed because one or more lines are too long
@@ -719,10 +719,7 @@ function pdpIntro() {
|
|||||||
const videoWrap = $(".editorWarp .video_wrap");
|
const videoWrap = $(".editorWarp .video_wrap");
|
||||||
|
|
||||||
const youtubeId = $(".youtube-box").attr("value");
|
const youtubeId = $(".youtube-box").attr("value");
|
||||||
const youtubeFrame =
|
const youtubeFrame = '<iframe src="https://www.youtube.com/embed/' + youtubeId + '?autoplay=0&controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; clipboard-black; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
||||||
'<iframe src="https://www.youtube.com/embed/' +
|
|
||||||
youtubeId +
|
|
||||||
'?autoplay=0&controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; clipboard-black; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
|
||||||
$(".editorWarp .youtube-box").html(youtubeFrame);
|
$(".editorWarp .youtube-box").html(youtubeFrame);
|
||||||
|
|
||||||
switch (true) {
|
switch (true) {
|
||||||
|
|||||||
123
kia.html
123
kia.html
@@ -41,7 +41,7 @@
|
|||||||
<link rel="icon" href="assets/images/kia/favicon-16x16.png" />
|
<link rel="icon" href="assets/images/kia/favicon-16x16.png" />
|
||||||
<link rel="stylesheet" href="assets/css/kia/kia-font.css?v1" type="text/css" />
|
<link rel="stylesheet" href="assets/css/kia/kia-font.css?v1" type="text/css" />
|
||||||
<link rel="stylesheet" href="assets/css/kia/kia.css?v1" type="text/css" />
|
<link rel="stylesheet" href="assets/css/kia/kia.css?v1" type="text/css" />
|
||||||
<link rel="stylesheet" charset="UTF-8" href="assets/css/kia/kiamain.css" type="text/css" />
|
<link rel="stylesheet" charset="UTF-8" href="assets/css/kiamain.css" type="text/css" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!--//header-->
|
<!--//header-->
|
||||||
@@ -131,6 +131,9 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
|
<li class="menuDepth1Wrap">
|
||||||
|
<a href="#" class="menuDepth1 lower" data-url="info/service-info.html">사양별 이용안내</a>
|
||||||
|
</li>
|
||||||
<li class="menuDepth1Wrap">
|
<li class="menuDepth1Wrap">
|
||||||
<a href="#" class="menuDepth1 lower" data-url="info/service-info.html">스토어 소개</a>
|
<a href="#" class="menuDepth1 lower" data-url="info/service-info.html">스토어 소개</a>
|
||||||
<div class="menuDepth2Wrap info">
|
<div class="menuDepth2Wrap info">
|
||||||
@@ -239,11 +242,11 @@
|
|||||||
<ul class="swiper-wrapper">
|
<ul class="swiper-wrapper">
|
||||||
<li class="swiper-slide">
|
<li class="swiper-slide">
|
||||||
<video class="mainKvMoviePc" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
|
<video class="mainKvMoviePc" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
|
||||||
<source src="./assets/images/FOD_Intro_pc.mp4" type="video/mp4" />
|
<source src="https://connectstore.kia.com/kr/ux_data/content/20250422/5afd169781ac4d648dc704f33c102d1b.mp4" type="video/mp4" />
|
||||||
<!-- pc mp4 -->
|
<!-- pc mp4 -->
|
||||||
</video>
|
</video>
|
||||||
<video class="mainKvMovieMo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
|
<video class="mainKvMovieMo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="" style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; object-fit: cover">
|
||||||
<source src="./assets/images/FOD_Intro_mobile.mp4" type="video/mp4" />
|
<source src="https://connectstore.kia.com/kr/ux_data/content/20250422/f257092db8c84f918bc0d7ef8b08ce12.mp4" type="video/mp4" />
|
||||||
<!-- pc mp4 -->
|
<!-- pc mp4 -->
|
||||||
</video>
|
</video>
|
||||||
|
|
||||||
@@ -308,9 +311,113 @@
|
|||||||
<div class="title" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">당신의 일상에 딱 맞는 <br />새로운 기술과 서비스를 간편하게 경험해보세요.</div>
|
<div class="title" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">당신의 일상에 딱 맞는 <br />새로운 기술과 서비스를 간편하게 경험해보세요.</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="specNoti">
|
||||||
|
차량별로 구매 가능한 디지털 사양이 다르므로 <span class="tag available">구매가능</span> 표시를 꼭 확인해주세요!
|
||||||
|
</div>
|
||||||
<div id="mainProductList" class="mainProductListWrap">
|
<div id="mainProductList" class="mainProductListWrap">
|
||||||
<div class="mainProductListTop">
|
<div class="mainProductListTop">
|
||||||
|
|
||||||
|
<div class="mainProductItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||||
|
<div class="item">
|
||||||
|
<a href="product/pdp_display_theme_kbo.html" class="imageArea withVideo">
|
||||||
|
<p class="productSmallVideo">
|
||||||
|
<video loop muted playsinline preload="auto" poster="https://connectstore.kia.com/kr/ux_data/product/20240620/fd8c6dd697514b6b948784f6d14b5be6.png">
|
||||||
|
<source src="https://connectstore.kia.com/kr/ux_data/product/20240618/f189f27d1aee4933951916e7fc6d3a6e.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<img src="assets/images/kia/pdp/display_theme_kbo/producy-temp1.png" alt="이미지 상품명" />
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<div class="infoArea" style="background-image: url('https://connectstore.kia.com/kr/ux_data/product/20230620/dbac827600a14a1496c1d4c75419e2a2.png')">
|
||||||
|
<div class="infoTop">
|
||||||
|
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
|
||||||
|
<div class="tag">
|
||||||
|
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
||||||
|
<span class="available">구매가능</span>
|
||||||
|
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
||||||
|
<span class="promotion">프로모션</span>
|
||||||
|
<!-- 신상품 설정된 상태에 표시되는 Badge 입니다. -->
|
||||||
|
<span>NEW</span>
|
||||||
|
</div>
|
||||||
|
<h2>KBO 디스플레이 테마</h2>
|
||||||
|
<p class="descript">운전에 스타일을 더 하는 특별한 테마</p>
|
||||||
|
</div>
|
||||||
|
<div class="infoBottom">
|
||||||
|
<div class="listOtionPrice">
|
||||||
|
<dl>
|
||||||
|
<dt>평생 이용</dt>
|
||||||
|
<dd>
|
||||||
|
<span class="discount"><i>₩ 500,000</i></span>
|
||||||
|
<span class="price"><em>\ 29,000</em> <b class="dc">99%</b></span>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<dl>
|
||||||
|
<dt>연간 구독</dt>
|
||||||
|
<dd>
|
||||||
|
<span class="price"><em>\ 120,000/년</em></span>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<dl>
|
||||||
|
<dt>월간 구독</dt>
|
||||||
|
<dd>
|
||||||
|
<span class="price"><em>\ 12,000/월</em></span>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<div class="listImgBtn">
|
||||||
|
<div class="oneButton">
|
||||||
|
<a href="product/pdp_display_theme_kbo.html"><p>자세히 보기</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="product/pdp_display_theme_kbo.html" class="mobileLinker"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="mainProductItem" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
|
||||||
|
<div class="item">
|
||||||
|
<a href="product/pdp_display_theme_kbo.html" class="imageArea withVideo">
|
||||||
|
<p class="productSmallVideo">
|
||||||
|
<video loop muted playsinline preload="auto" poster="https://connectstore.kia.com/kr/ux_data/product/20240620/fd8c6dd697514b6b948784f6d14b5be6.png">
|
||||||
|
<source src="https://connectstore.kia.com/kr/ux_data/product/20240618/f189f27d1aee4933951916e7fc6d3a6e.mp4" type="video/mp4" />
|
||||||
|
</video>
|
||||||
|
<img src="assets/images/kia/pdp/display_theme_kbo/producy-temp1.png" alt="이미지 상품명" />
|
||||||
|
</p>
|
||||||
|
</a>
|
||||||
|
<div class="infoArea" style="background-image: url('https://connectstore.kia.com/kr/ux_data/product/20230620/dbac827600a14a1496c1d4c75419e2a2.png')">
|
||||||
|
<div class="infoTop">
|
||||||
|
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
|
||||||
|
<div class="tag">
|
||||||
|
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
||||||
|
<span class="available">구매가능</span>
|
||||||
|
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
||||||
|
<span class="promotion">프로모션</span>
|
||||||
|
<!-- 신상품 설정된 상태에 표시되는 Badge 입니다. -->
|
||||||
|
<span>NEW</span>
|
||||||
|
</div>
|
||||||
|
<h2>KBO 디스플레이 테마</h2>
|
||||||
|
<p class="descript">운전에 스타일을 더 하는 특별한 테마</p>
|
||||||
|
</div>
|
||||||
|
<div class="infoBottom">
|
||||||
|
<div class="listOtionPrice">
|
||||||
|
<dl>
|
||||||
|
<dt>평생 이용</dt>
|
||||||
|
<dd>\29,000</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
<div class="listImgBtn">
|
||||||
|
<div class="oneButton">
|
||||||
|
<a href="product/pdp_display_theme_kbo.html"><p>자세히 보기</p></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a href="product/pdp_display_theme_kbo.html" class="mobileLinker"></a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- [S] Ajax 호출 전 디폴트 영역 -->
|
<!-- [S] Ajax 호출 전 디폴트 영역 -->
|
||||||
<div class="mainProductItem">
|
<div class="mainProductItem">
|
||||||
<div class="item defualt" style="background-color: #dedede">
|
<div class="item defualt" style="background-color: #dedede">
|
||||||
@@ -344,12 +451,12 @@
|
|||||||
<div class="infoTop">
|
<div class="infoTop">
|
||||||
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
|
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
|
||||||
<div class="tag">
|
<div class="tag">
|
||||||
|
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
||||||
|
<span class="available">구매가능</span>
|
||||||
|
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
||||||
|
<span class="promotion">프로모션</span>
|
||||||
<!-- 신상품 설정된 상태에 표시되는 Badge 입니다. -->
|
<!-- 신상품 설정된 상태에 표시되는 Badge 입니다. -->
|
||||||
<span>NEW</span>
|
<span>NEW</span>
|
||||||
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
|
||||||
<span>Promotion</span>
|
|
||||||
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
|
||||||
<span>구매가능</span>
|
|
||||||
</div>
|
</div>
|
||||||
<h2>KBO 디스플레이 테마</h2>
|
<h2>KBO 디스플레이 테마</h2>
|
||||||
<p class="descript">운전에 스타일을 더 하는 특별한 테마</p>
|
<p class="descript">운전에 스타일을 더 하는 특별한 테마</p>
|
||||||
|
|||||||
@@ -263,17 +263,14 @@
|
|||||||
<div class="productImg">
|
<div class="productImg">
|
||||||
<div class="swiper productSwiper">
|
<div class="swiper productSwiper">
|
||||||
<div class="swiper-wrapper">
|
<div class="swiper-wrapper">
|
||||||
<div class="swiper-slide"><img src="../assets/images/kia/pdp/display_theme/producy-temp1.png" alt="이미지 상품명"></div>
|
|
||||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명"></div>
|
|
||||||
<div class="swiper-slide withVideo">
|
<div class="swiper-slide withVideo">
|
||||||
|
<div class="movie_info">이미지를 클릭해주세요.</div>
|
||||||
<p class="productSmallVideo">
|
<p class="productSmallVideo">
|
||||||
<video loop muted playsinline preload="auto" poster="/kr/assets/images/kia/product-img/producy-temp3.png">
|
<video loop="" muted="" playsinline="" preload="auto"><source src="https://connectstore.kia.com/kr/ux_data/product/20240618/76e272db64cf42e797afdd658078aa40.mp4" type="video/mp4"></video>
|
||||||
<source src="../assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
|
<img src="https://connectstore.kia.com/kr/ux_data/product/20240620/67d138601d5e4862bb9bea3099a0112f.png" alt="NBA 디스플레이 테마" style="opacity: 1;"></p>
|
||||||
</video>
|
|
||||||
<img src="../assets/images/kia/pdp/display_themeNBA_Theme_AVNT.jpg" alt="이미지 상품명">
|
|
||||||
</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp4.png" alt="이미지 상품명"></div>
|
<div class="swiper-slide swiper-slide-active" role="group" aria-label="2 / 3"><img src="https://connectstore.kia.com/kr/ux_data/product/20240620/a3f13b0fc6d3431cb2f974d4d6e9ed49.png" alt="NBA 디스플레이 테마"></div>
|
||||||
|
<div class="swiper-slide swiper-slide-next" role="group" aria-label="3 / 3"><img src="https://connectstore.kia.com/kr/ux_data/product/20240620/a4d0651092c94e0abf50b8b21f8dee1f.png" alt="NBA 디스플레이 테마"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="swiper-pagination"></div>
|
<div class="swiper-pagination"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -1012,6 +1009,15 @@
|
|||||||
<script>
|
<script>
|
||||||
AOS.init();
|
AOS.init();
|
||||||
|
|
||||||
|
var swiper = new Swiper(".productSwiper", {
|
||||||
|
pagination: {
|
||||||
|
el: ".swiper-pagination",
|
||||||
|
clickable: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
enterVideo()
|
||||||
|
|
||||||
if($(".youtubeArea").hasClass("youtubeArea_pdp") === true) {
|
if($(".youtubeArea").hasClass("youtubeArea_pdp") === true) {
|
||||||
var youtube_id = $('.youtubeArea_pdp').attr('value');
|
var youtube_id = $('.youtubeArea_pdp').attr('value');
|
||||||
var youtube_frame = '<iframe src="https://www.youtube.com/embed/'+youtube_id+'?controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
var youtube_frame = '<iframe src="https://www.youtube.com/embed/'+youtube_id+'?controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
||||||
|
|||||||
Reference in New Issue
Block a user