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

Update Disney display themes: modify vehicle selection UI for mobile and PC, enhance theme options with new Disney and Pixar themes, and improve layout for better user experience. Adjust CSS for menu positioning and spacing.

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-10-22 00:40:27 +09:00
parent 4ea6ae6d24
commit f67fd2e7b8
6 changed files with 444 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
kr/assets/css/common.css
View File

@@ -1044,12 +1044,12 @@ video::-webkit-media-controls {
}
@media (min-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(2) .menuDepth2Wrap {
left: 5.4rem;
left: 4.4rem;
}
}
@media (min-width: 1120px) {
.hederWarp_n .headerInner .gnb .menuWarp .menu.open li:nth-child(3) .menuDepth2Wrap {
left: 13.6rem;
left: 14.6rem;
}
}
@media (min-width: 1120px) {

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

File diff suppressed because one or more lines are too long

143
kr/assets/css/common.scss
View File

@@ -137,7 +137,7 @@ video::-webkit-media-controls {
min-width: 2.2rem;
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -188,7 +188,8 @@ video::-webkit-media-controls {
left: 50%;
transform: translate(-50%, 0);
@include desktopMin {}
@include desktopMin {
}
.boxBullet {
display: none;
@@ -233,7 +234,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -243,7 +244,7 @@ video::-webkit-media-controls {
display: block;
}
.carItem.on+.carlistItem {
.carItem.on + .carlistItem {
display: block;
}
}
@@ -356,7 +357,7 @@ video::-webkit-media-controls {
}
}
button+button {
button + button {
border-right: 0;
}
@@ -378,7 +379,7 @@ video::-webkit-media-controls {
padding: 0;
}
>a {
> a {
display: none;
@include desktopMin {
@@ -419,7 +420,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 2rem;
}
}
@@ -455,7 +456,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 3rem;
@include desktopMin {
@@ -484,7 +485,7 @@ video::-webkit-media-controls {
display: block;
}
>a {
> a {
display: none;
@include desktopMin {
@@ -532,7 +533,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -543,7 +544,7 @@ video::-webkit-media-controls {
}
}
.menu+.user {
.menu + .user {
margin-left: 2rem;
}
}
@@ -555,7 +556,7 @@ video::-webkit-media-controls {
box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}
.mMenuWarp+.cart {
.mMenuWarp + .cart {
margin-left: 0;
@include desktopMin {
@@ -564,7 +565,7 @@ video::-webkit-media-controls {
}
.cart {
>a {
> a {
display: flex;
align-items: center;
height: 5.6rem;
@@ -652,7 +653,7 @@ video::-webkit-media-controls {
}
}
.carlist+.gnbIcon {
.carlist + .gnbIcon {
margin-left: 0;
@include desktopMin {
@@ -693,7 +694,6 @@ video::-webkit-media-controls {
.moblieMenu {
.slide-open {
.burgur {
.top-line,
.bot-line {
background-color: #000;
@@ -742,11 +742,11 @@ video::-webkit-media-controls {
}
&.menu-open {
&~.pageTitle {
& ~ .pageTitle {
z-index: 0 !important;
}
&~.contentWarp {
& ~ .contentWarp {
z-index: 0 !important;
}
@@ -802,7 +802,7 @@ video::-webkit-media-controls {
}
.userLogin {
>a {
> a {
border: 1px solid rgba(5, 20, 31, 0.3);
color: #05141f;
transition: 0.3s;
@@ -1032,7 +1032,7 @@ video::-webkit-media-controls {
background-size: contain;
}
&+button {
& + button {
border-right: 0;
}
}
@@ -1081,7 +1081,7 @@ video::-webkit-media-controls {
font-size: 1.2rem;
}
span+span {
span + span {
color: #676767;
font-weight: 400;
@@ -1155,7 +1155,7 @@ video::-webkit-media-controls {
width: fit-content;
}
span+span {
span + span {
font-weight: 400;
&::before {
@@ -1171,7 +1171,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -1215,7 +1215,7 @@ video::-webkit-media-controls {
li:nth-child(2) {
.menuDepth2Wrap {
@media (min-width: 1120px) {
left: 5.4rem;
left: 4.4rem;
}
}
}
@@ -1223,7 +1223,7 @@ video::-webkit-media-controls {
li:nth-child(3) {
.menuDepth2Wrap {
@media (min-width: 1120px) {
left: 13.6rem;
left: 14.6rem;
}
}
}
@@ -1302,7 +1302,7 @@ video::-webkit-media-controls {
background: url("../images/common/icon-arrow_right.svg") center center no-repeat;
}
&~.menuDepth2Wrap {
& ~ .menuDepth2Wrap {
padding-left: 1.2rem;
margin-bottom: 1rem;
}
@@ -1431,7 +1431,7 @@ video::-webkit-media-controls {
font-weight: 600;
color: #676767;
&+a {
& + a {
border-left: 1px solid #dedede;
}
}
@@ -1548,7 +1548,7 @@ video::-webkit-media-controls {
white-space: nowrap;
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -1582,7 +1582,7 @@ video::-webkit-media-controls {
display: block;
}
&.on+.carlistItem {
&.on + .carlistItem {
display: block;
}
@@ -1653,7 +1653,7 @@ video::-webkit-media-controls {
}
}
span+span {
span + span {
&::before {
content: "";
display: block;
@@ -1679,7 +1679,7 @@ video::-webkit-media-controls {
position: relative;
padding-left: 2rem;
>span {
> span {
display: inline;
}
@@ -1732,7 +1732,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
@include desktopMin {
@@ -1752,7 +1752,7 @@ video::-webkit-media-controls {
display: none;
}
>a {
> a {
display: flex;
align-items: center;
padding: 0.3rem 0.6rem;
@@ -1777,7 +1777,7 @@ video::-webkit-media-controls {
display: none;
}
>a {
> a {
display: flex;
align-items: center;
height: 8rem;
@@ -1830,7 +1830,7 @@ video::-webkit-media-controls {
}
}
li+li {
li + li {
margin-top: 1rem;
}
}
@@ -1842,7 +1842,7 @@ video::-webkit-media-controls {
}
.cart {
>a {
> a {
display: flex;
align-items: center;
height: 5.6rem;
@@ -1952,7 +1952,7 @@ video::-webkit-media-controls {
}
.userLogin {
>a {
> a {
border: 1px solid rgba(5, 20, 31, 0.3);
color: #05141f;
transition: 0.3s;
@@ -2194,7 +2194,7 @@ video::-webkit-media-controls {
border-bottom: 1px solid #000;
}
a+a {
a + a {
margin-left: 2rem;
}
}
@@ -2277,7 +2277,7 @@ video::-webkit-media-controls {
}
}
.btn-select.on+.list-member {
.btn-select.on + .list-member {
display: block;
}
@@ -2670,7 +2670,8 @@ video::-webkit-media-controls {
margin-bottom: 0rem;
}
@include desktopMax {}
@include desktopMax {
}
dt {
color: #676767;
@@ -2693,7 +2694,7 @@ video::-webkit-media-controls {
}
}
dl+dl {
dl + dl {
border-bottom: 0;
margin-top: 0rem;
padding-bottom: 0rem;
@@ -2710,7 +2711,7 @@ video::-webkit-media-controls {
}
}
a+a {
a + a {
margin-top: 1.1rem;
}
}
@@ -2784,7 +2785,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 1.5rem;
@include tablet {
@@ -2883,7 +2884,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -3068,7 +3069,7 @@ video::-webkit-media-controls {
cursor: not-allowed;
}
[type="radio"]:disabled+span {
[type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
@@ -3184,7 +3185,7 @@ video::-webkit-media-controls {
}
}
>div {
> div {
width: 100%;
display: flex;
flex-wrap: wrap;
@@ -3203,11 +3204,11 @@ video::-webkit-media-controls {
}
}
input[type="text"]+input[type="text"] {
input[type="text"] + input[type="text"] {
margin-left: 1rem;
}
input[type="text"]+select {
input[type="text"] + select {
width: 100%;
margin-top: 1rem;
@@ -3227,11 +3228,11 @@ video::-webkit-media-controls {
}
}
>div.phone {
> div.phone {
flex-wrap: nowrap;
}
>div.mail {
> div.mail {
input {
width: calc(100% / 2 - 4.5%);
}
@@ -3393,7 +3394,7 @@ video::-webkit-media-controls {
}
}
button+label {
button + label {
margin-left: 1rem;
}
}
@@ -3412,7 +3413,7 @@ video::-webkit-media-controls {
}
}
dl+dl {
dl + dl {
margin-top: 3rem;
}
@@ -3447,7 +3448,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 2rem;
}
}
@@ -3489,7 +3490,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -3629,12 +3630,12 @@ video::-webkit-media-controls {
}
.cartItemInfo {
>div {
> div {
display: flex;
align-items: center;
margin-top: 0;
>p {
> p {
margin-left: 0;
border-radius: 0;
overflow: hidden;
@@ -3708,7 +3709,7 @@ video::-webkit-media-controls {
}
}
dt+dd {
dt + dd {
margin-top: 0.5rem;
@include desktopMin {
@@ -3716,7 +3717,7 @@ video::-webkit-media-controls {
}
}
dd+dd {
dd + dd {
margin-top: 1.5rem;
font-size: 1.4rem;
@@ -3728,7 +3729,7 @@ video::-webkit-media-controls {
}
}
.cartItemInfo+dl {
.cartItemInfo + dl {
min-width: 20rem;
text-align: right;
@@ -3755,7 +3756,7 @@ video::-webkit-media-controls {
}
}
>dl {
> dl {
.couponBtn {
display: flex;
justify-content: flex-end;
@@ -3863,7 +3864,7 @@ video::-webkit-media-controls {
cursor: not-allowed;
}
[type="radio"]:disabled+span {
[type="radio"]:disabled + span {
opacity: 0.5;
cursor: not-allowed;
}
@@ -3964,7 +3965,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -4023,7 +4024,7 @@ video::-webkit-media-controls {
padding: 0 3rem;
}
&+.content {
& + .content {
margin-top: 3rem;
padding-top: 6rem;
border-top: 1px solid #d9d9d9;
@@ -4083,7 +4084,7 @@ video::-webkit-media-controls {
margin-top: 4rem;
}
>p {
> p {
margin-top: 2rem;
line-height: 3rem;
font-size: 2.2rem;
@@ -4216,7 +4217,7 @@ video::-webkit-media-controls {
font-size: 1.4rem;
}
>span {
> span {
display: block;
@include maxtablet {
@@ -4233,7 +4234,7 @@ video::-webkit-media-controls {
font-size: 1.6rem;
}
&+.agree-area {
& + .agree-area {
margin-bottom: 4rem;
}
@@ -4374,7 +4375,7 @@ video::-webkit-media-controls {
padding: 0;
margin: 0 3rem;
&+.content {
& + .content {
padding: 6rem 0;
}
@@ -4447,7 +4448,7 @@ video::-webkit-media-controls {
margin-top: 4rem;
}
>p {
> p {
margin-top: 2rem;
line-height: 2.2rem;
font-size: 1.6rem;
@@ -4603,7 +4604,7 @@ video::-webkit-media-controls {
height: 40px;
}
.swiper-scrollbar-lock+.swiper-scrollbar-after-space {
.swiper-scrollbar-lock + .swiper-scrollbar-after-space {
display: none;
}
}
@@ -4647,7 +4648,7 @@ video::-webkit-media-controls {
}
}
p+p {
p + p {
margin-top: 1.5rem;
@include tablet {
@@ -4746,7 +4747,7 @@ video::-webkit-media-controls {
flex-wrap: nowrap;
}
a+a {
a + a {
margin-top: 1rem;
@include tablet {
@@ -5180,4 +5181,4 @@ video::-webkit-media-controls {
max-width: 12.5rem;
}
}
}
}

216
kr/product/pdp_display_theme_disney_frozen.html
View File

@@ -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>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</strong>
<span>KMTKEXXBPMU000081</span>
<button class="btn-select" onclick="open_layer_popup('carListPopup')">차량 선택하기 ></button>
</div>
<div class="arrow"></div>
</a>
<div class="carlistItem">
<ul>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<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>
</div>
</div>
<!-- PC 모바일 공통 메뉴 영역입니다. -->
@@ -122,7 +100,6 @@
<div class="menuDepth2Wrap info">
<h3><a href="/kr/kia.html#mainProductList">디지털 사양</a></h3>
<ul>
<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>
@@ -136,6 +113,20 @@
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/product-usage-guide.html" class="menuDepth1 lower" data-url="/kr/info/product-usage-guide.html">디즈니 테마</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/kia.html#mainProductList">디즈니 테마</a></h3>
<ul>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_mickey.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">픽사 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">마블 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">스타워즈 디스플레이 테마</a></li>
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">내셔널 지오그래픽 디스플레이 테마</a></li>
</ul>
</div>
</li>
<li class="menuDepth1Wrap hiddenMenuDepth1Wrap">
<a href="/kr/info/product-usage-guide.html" class="menuDepth1" data-url="/kr/info/product-usage-guide.html">사양별 이용 안내</a>
<div class="menuDepth2Wrap info">
<h3><a href="/kr/info/product-usage-guide.html">사양별 이용 안내</a></h3>
@@ -165,6 +156,9 @@
</ul>
</div>
</li>
<li class="menuDepth1Wrap">
<a href="/kr/info/as-guide.html" class="menuDepth1" data-url="/kr/info/as-guide.html">이벤트</a>
</li>
</ul>
<!-- 모바일 전용 추가 메뉴 영역입니다. -->
<div class="mobileSubMenu">
@@ -179,10 +173,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 +184,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">

198
kr/product/pdp_display_theme_disney_pixar.html
View File

@@ -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>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</strong>
<span>KMTKEXXBPMU000081</span>
<button class="btn-select" onclick="open_layer_popup('carListPopup')">차량 선택하기 ></button>
</div>
<div class="arrow"></div>
</a>
<div class="carlistItem">
<ul>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<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>
</div>
</div>
<!-- PC 모바일 공통 메뉴 영역입니다. -->
@@ -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">

42
kr/promotion/disney_promotion.html
View File

@@ -452,6 +452,48 @@
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard avengers">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_overview05.png" alt="Avengers Theme" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard starwars">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_overview06.png" alt="Star Wars Theme" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard nationalgeographic">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_overview07.png" alt="National Geographic Theme" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard pixar">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_overview08.png" alt="Pixar Theme" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard marvel">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_overview09.png" alt="Marvel Theme" />
</div>
</div>
</div>
<div class="swiper-slide">
<div class="themeCard marvel">
<div class="themeIcon">
<img src="../assets/images/kia/promotion/img_overview10.png" alt="Marvel Theme" />
</div>
</div>
</div>
</div>
</div>
</div>