[수정] CSS 및 HTML 파일 수정
This commit is contained in:
@@ -790,7 +790,7 @@ body.scroll-up .hederWarp_n .headerInner:after {
|
||||
right: 0;
|
||||
border-top: 1px solid #dedede;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -929,7 +929,7 @@ video::-webkit-media-controls {
|
||||
right: 0;
|
||||
border-top: 1px solid #dedede;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
opacity: 1;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -620,15 +620,8 @@
|
||||
height: 79rem;
|
||||
}
|
||||
}
|
||||
.mainTopKey .mainSwiper::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 24rem;
|
||||
top: 0;
|
||||
background: linear-gradient(180deg, rgba(5, 20, 31, 0.7) 0%, rgba(5, 20, 31, 0) 100%);
|
||||
z-index: 2;
|
||||
.mainTopKey .mainSwiper .swiper-wrapper {
|
||||
z-index: 3;
|
||||
}
|
||||
.mainTopKey .mainSwiper ul li {
|
||||
display: flex;
|
||||
@@ -637,6 +630,22 @@
|
||||
padding-bottom: 8rem;
|
||||
background-size: cover;
|
||||
}
|
||||
.mainTopKey .mainSwiper ul li:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 11rem;
|
||||
background: url(../images/kia/dim_top2.png) repeat-x center bottom/auto 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.mainTopKey .mainSwiper ul li:before {
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
.mainTopKey .mainSwiper ul li:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -646,7 +655,12 @@
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 36rem;
|
||||
background: url(../images/common/dim_gradient_bottom.png) no-repeat center top/100% auto;
|
||||
background: url(../images/kia/dim_bottom2.png) repeat-x center top/auto 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.mainTopKey .mainSwiper ul li:after {
|
||||
height: 40rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.mainTopKey .mainSwiper ul li {
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -568,15 +568,30 @@
|
||||
@include desktopMax {
|
||||
height: 79rem;
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 24rem;
|
||||
top: 0;
|
||||
background: linear-gradient(180deg, rgba(5, 20, 31, 0.7) 0%, rgba(5, 20, 31, 0) 100%);
|
||||
z-index: 2;
|
||||
// &::before {
|
||||
// content: "";
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// height: 24rem;
|
||||
// top: 0;
|
||||
// background: url(../images/kia/dim_top.png) no-repeat center top / 100% auto;
|
||||
// // background: linear-gradient(180deg, rgba(5, 20, 31, 0.7) 0%, rgba(5, 20, 31, 0) 100%);
|
||||
// z-index: 2;
|
||||
// }
|
||||
// &::after {
|
||||
// content: "";
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// width: 100%;
|
||||
// height: 40rem;
|
||||
// bottom: 0;
|
||||
// background: url(../images/kia/dim_bottom.png) no-repeat center top / 100% auto;
|
||||
// // background: linear-gradient(180deg, rgba(5, 20, 31, 0.7) 0%, rgba(5, 20, 31, 0) 100%);
|
||||
// z-index: 2;
|
||||
// }
|
||||
.swiper-wrapper {
|
||||
z-index: 3;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
@@ -585,6 +600,20 @@
|
||||
height: 59rem;
|
||||
padding-bottom: 8rem;
|
||||
background-size: cover;
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 11rem;
|
||||
background: url(../images/kia/dim_top2.png) repeat-x center bottom / auto 100%;
|
||||
@include tablet {
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -594,7 +623,10 @@
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 36rem;
|
||||
background: url(../images/common/dim_gradient_bottom.png) no-repeat center top / 100% auto;
|
||||
background: url(../images/kia/dim_bottom2.png) repeat-x center top / auto 100%;
|
||||
@include tablet {
|
||||
height: 40rem;
|
||||
}
|
||||
}
|
||||
@include tablet {
|
||||
height: 59rem;
|
||||
|
||||
@@ -622,15 +622,8 @@
|
||||
height: 79rem;
|
||||
}
|
||||
}
|
||||
.mainTopKey .mainSwiper::before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 24rem;
|
||||
top: 0;
|
||||
background: linear-gradient(180deg, rgba(5, 20, 31, 0.7) 0%, rgba(5, 20, 31, 0) 100%);
|
||||
z-index: 2;
|
||||
.mainTopKey .mainSwiper .swiper-wrapper {
|
||||
z-index: 3;
|
||||
}
|
||||
.mainTopKey .mainSwiper ul li {
|
||||
display: flex;
|
||||
@@ -639,6 +632,22 @@
|
||||
padding-bottom: 8rem;
|
||||
background-size: cover;
|
||||
}
|
||||
.mainTopKey .mainSwiper ul li:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 11rem;
|
||||
background: url(../images/kia/dim_top2.png) repeat-x center bottom/auto 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.mainTopKey .mainSwiper ul li:before {
|
||||
height: 24rem;
|
||||
}
|
||||
}
|
||||
.mainTopKey .mainSwiper ul li:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -648,7 +657,12 @@
|
||||
z-index: 2;
|
||||
width: 100%;
|
||||
height: 36rem;
|
||||
background: url(../images/common/dim_gradient_bottom.png) no-repeat center top/100% auto;
|
||||
background: url(../images/kia/dim_bottom2.png) repeat-x center top/auto 100%;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.mainTopKey .mainSwiper ul li:after {
|
||||
height: 40rem;
|
||||
}
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.mainTopKey .mainSwiper ul li {
|
||||
|
||||
BIN
kr/assets/images/kia/dim_bottom.png
Normal file
BIN
kr/assets/images/kia/dim_bottom.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 87 KiB |
BIN
kr/assets/images/kia/dim_bottom2.png
Normal file
BIN
kr/assets/images/kia/dim_bottom2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 121 KiB |
BIN
kr/assets/images/kia/dim_top.png
Normal file
BIN
kr/assets/images/kia/dim_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
BIN
kr/assets/images/kia/dim_top2.png
Normal file
BIN
kr/assets/images/kia/dim_top2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 38 KiB |
@@ -1765,7 +1765,7 @@ function checkStickyEnd(selector) {
|
||||
var $mobileOpenMenu = $(".hederWarp_n .mobileOpenMenu");
|
||||
var $body = $("body");
|
||||
var baseScrollTop = 710;
|
||||
var baseTop = 1.5; // rem
|
||||
var baseTop = 0; // rem
|
||||
|
||||
if (!$tabContentAreas.length) return;
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>제품상세명 > 제품리스트 > 회사명</title>
|
||||
@@ -85,34 +85,12 @@
|
||||
</div>
|
||||
<!-- 모바일 전용 차량 선택 UI입니다. -->
|
||||
<div class="mobileCarlist">
|
||||
<a href="javascript:void(0)" class="mobilecarItem">
|
||||
<div class="mobilecarItem">
|
||||
<div class="item">
|
||||
<span>MV</span>
|
||||
<span>161어 1660</span>
|
||||
</div>
|
||||
<div class="arrow"></div>
|
||||
</a>
|
||||
<div class="carlistItem">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</strong>
|
||||
<span>KMTKEXXBPMU000081</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>SX</span>
|
||||
<span>161어 1660</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>452허 1234</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<button class="btn-select" onclick="open_layer_popup('carListPopup')">차량 선택하기 ></button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- PC 모바일 공통 메뉴 영역입니다. -->
|
||||
@@ -122,7 +100,7 @@
|
||||
<div class="menuDepth2Wrap info">
|
||||
<h3><a href="/kr/kia.html#mainProductList">디지털 사양</a></h3>
|
||||
<ul>
|
||||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_disney.html">디즈니 디스플레이 테마</a></li>
|
||||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_mickey.html">디즈니 디스플레이 테마</a></li>
|
||||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">KBO 디스플레이 테마</a></li>
|
||||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme.html">NBA 디스플레이 테마</a></li>
|
||||
<li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
|
||||
@@ -179,10 +157,10 @@
|
||||
</div>
|
||||
<div class="func">
|
||||
<!-- PC 전용 차량 선택 UI입니다. -->
|
||||
<!-- 2025.08.27 추가 -->
|
||||
<div class="carlist">
|
||||
<a href="javascript:void(0)" class="carItem">
|
||||
<span>MV</span>
|
||||
<span>161어 1660</span>
|
||||
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
|
||||
</a>
|
||||
<div class="carlistItem">
|
||||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||||
@@ -190,32 +168,166 @@
|
||||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
|
||||
</svg>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>KMTKEXXBPMU000081</span>
|
||||
</a>
|
||||
<!-- [D] 선택 시 selected 클래스 추가 -->
|
||||
<li class="selected">
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>SX</span>
|
||||
<span>161어 1660</span>
|
||||
</a>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<span>MV</span>
|
||||
<span>452허 1234</span>
|
||||
</a>
|
||||
<button class="car-name">
|
||||
<span>스포티지 개조</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>스포티지 개조</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>스포티지 개조</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>스포티지 개조</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>스포티지 개조</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>스포티지 개조</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
<li>
|
||||
<button class="car-name">
|
||||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||||
</button>
|
||||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!--// 2025.08.27 추가 -->
|
||||
|
||||
<!-- PC 전용 로그인 버튼입니다. -->
|
||||
<div class="userLogin">
|
||||
<!-- <div class="userLogin">
|
||||
<a href="#">로그인/가입</a>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<!-- PC 전용 USER 관련 링크 영역입니다. -->
|
||||
<div class="user">
|
||||
|
||||
Reference in New Issue
Block a user