메인 수정 중
This commit is contained in:
@@ -1390,4 +1390,12 @@
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.specNoti {
|
||||
display: block;
|
||||
max-width: 120rem;
|
||||
height: 6.5rem;
|
||||
margin: 0 auto;
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
/*# sourceMappingURL=kiamain.css.map */
|
||||
@@ -153,7 +153,7 @@
|
||||
background-size: 0;
|
||||
@media(max-width: 1024px){
|
||||
position: relative;
|
||||
display: block;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
padding: 3rem;
|
||||
background-size: cover;
|
||||
@@ -194,7 +194,7 @@
|
||||
border: 1px solid #9EA1A2;
|
||||
font-size: 1.3rem;
|
||||
font-weight: 400;
|
||||
color: #9EA1A2;
|
||||
color: #000;
|
||||
line-height: 1;
|
||||
&:not(:first-child){
|
||||
margin-left: 0.3rem;
|
||||
@@ -204,6 +204,20 @@
|
||||
color: #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 {
|
||||
@@ -243,9 +257,10 @@
|
||||
.infoBottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: flex-end;
|
||||
width: 100%;
|
||||
@media(max-width: 1024px){
|
||||
display: block;
|
||||
margin-top: 2.5rem;
|
||||
}
|
||||
.listOtionPrice {
|
||||
@@ -259,58 +274,84 @@
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
height: 9.2rem;
|
||||
padding:1.6rem;
|
||||
background-color: #F2F2F2;
|
||||
border-radius: 0.6rem;
|
||||
@media(max-width: 1024px){
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
padding: 1rem 1.6rem;
|
||||
&:not(:first-child){
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
font-size: 1.6rem;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 400;
|
||||
color: #676767;
|
||||
@media(max-width: 1024px){
|
||||
position: relative;
|
||||
font-size: 1.4rem;
|
||||
color: #FFFFFF;
|
||||
margin-left: 0.8rem;
|
||||
padding-left: 0.8rem;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0.1rem;
|
||||
left: 0;
|
||||
width: 0.1rem;
|
||||
height: 1.4rem;
|
||||
background-color: #DEDEDE;
|
||||
}
|
||||
color: #000;
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
// &::before {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// top: 0.1rem;
|
||||
// left: 0;
|
||||
// width: 0.1rem;
|
||||
// height: 1.4rem;
|
||||
// background-color: #DEDEDE;
|
||||
// }
|
||||
}
|
||||
}
|
||||
dd {
|
||||
margin-top: 1rem;
|
||||
// margin-top: 1.8rem;
|
||||
font-size: 1.6rem;
|
||||
font-weight: 600;
|
||||
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;
|
||||
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 {
|
||||
margin:.6rem 0 -1.5rem;
|
||||
.discount {
|
||||
display: block;
|
||||
margin:.6rem 0 0;
|
||||
font-size: 1.4rem;
|
||||
color: #9EA1A2;
|
||||
@media(max-width: 1024px){
|
||||
text-align: left;
|
||||
@media(max-width: 1024px){
|
||||
width: 100%;
|
||||
margin:.2rem 0 0;
|
||||
|
||||
color: #9EA1A2;
|
||||
text-align: right;
|
||||
}
|
||||
b {
|
||||
font-weight: 600;
|
||||
@@ -320,26 +361,29 @@
|
||||
text-decoration:line-through;
|
||||
}
|
||||
}
|
||||
.dc {
|
||||
font-size: 1.4rem;
|
||||
color: #EA0029;
|
||||
}
|
||||
}
|
||||
&:not(:first-child){
|
||||
margin-left: 1.5rem;
|
||||
padding-left: 1.5rem;
|
||||
margin-left: 0.8rem;
|
||||
// padding-left: 0.8rem;
|
||||
@media(max-width: 1024px){
|
||||
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 youtubeId = $(".youtube-box").attr("value");
|
||||
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>';
|
||||
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>';
|
||||
$(".editorWarp .youtube-box").html(youtubeFrame);
|
||||
|
||||
switch (true) {
|
||||
|
||||
123
kia.html
123
kia.html
@@ -41,7 +41,7 @@
|
||||
<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.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>
|
||||
<body>
|
||||
<!--//header-->
|
||||
@@ -131,6 +131,9 @@
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
<li class="menuDepth1Wrap">
|
||||
<a href="#" class="menuDepth1 lower" data-url="info/service-info.html">사양별 이용안내</a>
|
||||
</li>
|
||||
<li class="menuDepth1Wrap">
|
||||
<a href="#" class="menuDepth1 lower" data-url="info/service-info.html">스토어 소개</a>
|
||||
<div class="menuDepth2Wrap info">
|
||||
@@ -239,11 +242,11 @@
|
||||
<ul class="swiper-wrapper">
|
||||
<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">
|
||||
<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 -->
|
||||
</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">
|
||||
<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 -->
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="specNoti">
|
||||
차량별로 구매 가능한 디지털 사양이 다르므로 <span class="tag available">구매가능</span> 표시를 꼭 확인해주세요!
|
||||
</div>
|
||||
<div id="mainProductList" class="mainProductListWrap">
|
||||
<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 호출 전 디폴트 영역 -->
|
||||
<div class="mainProductItem">
|
||||
<div class="item defualt" style="background-color: #dedede">
|
||||
@@ -344,12 +451,12 @@
|
||||
<div class="infoTop">
|
||||
<!-- 신상품, 프로모션, 구매가능 모두 조건에 해당되지 않으면, tag 영역은 전체 노출되지 않습니다. -->
|
||||
<div class="tag">
|
||||
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
||||
<span class="available">구매가능</span>
|
||||
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
||||
<span class="promotion">프로모션</span>
|
||||
<!-- 신상품 설정된 상태에 표시되는 Badge 입니다. -->
|
||||
<span>NEW</span>
|
||||
<!-- 프로모션 설정된 상태에 표시되는 Badge 입니다. -->
|
||||
<span>Promotion</span>
|
||||
<!-- 구매 가능 상품인 경우 표시되는 Badge 입니다. -->
|
||||
<span>구매가능</span>
|
||||
</div>
|
||||
<h2>KBO 디스플레이 테마</h2>
|
||||
<p class="descript">운전에 스타일을 더 하는 특별한 테마</p>
|
||||
|
||||
@@ -263,17 +263,14 @@
|
||||
<div class="productImg">
|
||||
<div class="swiper productSwiper">
|
||||
<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="movie_info">이미지를 클릭해주세요.</div>
|
||||
<p class="productSmallVideo">
|
||||
<video loop muted playsinline preload="auto" poster="/kr/assets/images/kia/product-img/producy-temp3.png">
|
||||
<source src="../assets/images/kia/video/producy-temp3-video.mp4" type="video/mp4">
|
||||
</video>
|
||||
<img src="../assets/images/kia/pdp/display_themeNBA_Theme_AVNT.jpg" alt="이미지 상품명">
|
||||
</p>
|
||||
<video loop="" muted="" playsinline="" preload="auto"><source src="https://connectstore.kia.com/kr/ux_data/product/20240618/76e272db64cf42e797afdd658078aa40.mp4" type="video/mp4"></video>
|
||||
<img src="https://connectstore.kia.com/kr/ux_data/product/20240620/67d138601d5e4862bb9bea3099a0112f.png" alt="NBA 디스플레이 테마" style="opacity: 1;"></p>
|
||||
</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 class="swiper-pagination"></div>
|
||||
</div>
|
||||
@@ -1012,6 +1009,15 @@
|
||||
<script>
|
||||
AOS.init();
|
||||
|
||||
var swiper = new Swiper(".productSwiper", {
|
||||
pagination: {
|
||||
el: ".swiper-pagination",
|
||||
clickable: true,
|
||||
},
|
||||
});
|
||||
|
||||
enterVideo()
|
||||
|
||||
if($(".youtubeArea").hasClass("youtubeArea_pdp") === true) {
|
||||
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>';
|
||||
|
||||
Reference in New Issue
Block a user