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

겨울왕국 완료료

Browse Source
This commit is contained in:
NEW_GIL_HOME\hyeon
2025-10-19 23:22:51 +09:00
parent 1638fcf693
commit 2e1121c197
29 changed files with 818 additions and 545 deletions
Download Patch File Download Diff File Expand all files Collapse all files

231
kr/assets/css/pdp_detail.css
View File

@@ -3814,12 +3814,12 @@
transform: translateX(-50%);
}
.displayThemeDesney .comp_body .text_area {
margin-top: 4.8rem;
margin-top: 11.4rem;
text-align: center;
}
@media (min-width: 768px) {
.displayThemeDesney .comp_body .text_area {
margin-top: 8rem;
margin-top: 13.7rem;
}
}
.displayThemeDesney .comp_body .text_area h3 {
@@ -3867,15 +3867,12 @@
background-image: radial-gradient(#e7e7e7 2px, transparent 4px);
background-size: 3.4rem 3.5rem;
}
@media (min-width: 768px) {
.displayThemeDesney .available-theme {
min-height: 85.1rem;
}
}
.displayThemeDesney .available-theme h3 {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-wrap: wrap;
height: 14.8rem;
font-size: 2.4rem;
font-weight: 600;
@@ -3903,6 +3900,20 @@
text-align: center;
}
}
.displayThemeDesney .available-theme h3 em {
display: block;
width: 100%;
margin-top: 0.8rem;
font-size: 1.4rem;
font-weight: 400;
text-align: center;
}
@media (min-width: 768px) {
.displayThemeDesney .available-theme h3 em {
margin-top: 2.4rem;
font-size: 1.6rem;
}
}
.displayThemeDesney .available-theme .list {
display: flex;
justify-content: center;
@@ -3928,7 +3939,7 @@
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 5.6rem 0.8rem;
gap: 2rem 0.8rem;
}
@media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul {
@@ -3938,7 +3949,7 @@
.displayThemeDesney .available-theme .list ul li {
overflow: hidden;
width: calc(50% - 0.4rem);
aspect-ratio: 156/196;
aspect-ratio: 156/184;
background-color: #fff;
border-radius: 0.8rem;
box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.12);
@@ -3946,8 +3957,8 @@
}
@media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul li {
width: 28.2rem;
height: 36.9rem;
width: 28.9rem;
height: 31.2rem;
aspect-ratio: inherit;
}
}
@@ -3972,7 +3983,7 @@
}
@media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul li a .txt {
padding: 2rem 2.4rem;
padding: 1.6rem 2rem;
text-align: left;
}
}
@@ -4165,29 +4176,111 @@
text-align: left;
}
}
.displayThemeDesney .available-theme .list ul li.stay-tuned-item {
width: 100%;
height: 4.8rem;
}
@media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul li.stay-tuned-item {
width: 20rem;
height: 100%;
}
}
.displayThemeDesney .available-theme .list ul li.stay-tuned-item .stay-tuned {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 1.2rem;
font-size: 1.2rem;
font-weight: 400;
background-color: #f2f4f6;
border-radius: 0.6rem;
letter-spacing: -0.05em;
}
.displayThemeDesney .available-theme .list ul li.stay-tuned-item .stay-tuned span {
display: block;
width: 1.8rem;
height: 1.2rem;
margin-right: 0.6rem;
background: url("../images/kia/promotion/ico_stay_tuned.svg") no-repeat center/contain;
}
.displayThemeDesney .available-theme .list ul li.stay-tuned-item .stay-tuned strong {
padding: 0.2rem 0 0;
line-height: 1;
}
@media (min-width: 768px) {
.displayThemeDesney .available-theme .list ul li.stay-tuned-item .stay-tuned {
flex-direction: column;
}
.displayThemeDesney .available-theme .list ul li.stay-tuned-item .stay-tuned span {
position: relative;
width: 7.2rem;
height: 1.6rem;
margin: 0 auto;
margin-bottom: 0.8rem;
background: none;
border: 1px solid #b2b8bd;
border-radius: 0.8rem;
}
.displayThemeDesney .available-theme .list ul li.stay-tuned-item .stay-tuned span:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0.3rem;
width: 4.8rem;
height: 1rem;
transform: translateY(-50%);
background-color: #b2b8bd;
border-radius: 0.5rem;
}
.displayThemeDesney .available-theme .list ul li.stay-tuned-item .stay-tuned strong {
padding: 0;
font-size: 1.6rem;
color: #b2b8bd;
}
}
.displayThemeDesney.discover-epic-design {
position: relative;
width: 100%;
max-width: 192rem;
margin: 0 auto;
padding: 4rem 0 7rem;
padding: 0 0 7rem;
text-align: center;
background: url(../images/kia/pdp/display_theme_disney/bg_design_m.jpg) no-repeat center top/100% auto;
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design {
padding: 12rem 0 0;
padding: 8rem 0 0;
background: url(../images/kia/pdp/display_theme_disney/bg_design.jpg) no-repeat center top/192rem auto;
}
}
.displayThemeDesney.discover-epic-design.mickey {
background: #fff;
}
.displayThemeDesney.discover-epic-design.mickey .tab-box .discover-area {
padding: 4rem 0 0;
background: url(../images/kia/pdp/display_theme_mickey/bg_design_m.jpg) no-repeat center top/100% auto;
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design.mickey {
.displayThemeDesney.discover-epic-design.mickey .tab-box .discover-area {
padding: 12rem 0;
background: url(../images/kia/pdp/display_theme_mickey/bg_design.jpg) no-repeat center top/192rem auto;
}
}
.displayThemeDesney.discover-epic-design.mickey .tab-box .discover-area > .comp_top {
padding-bottom: 0;
}
.displayThemeDesney.discover-epic-design.mickey .tab-box .discover-area > .comp_top h3 {
margin-bottom: 4.8rem;
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design.mickey .tab-box .discover-area > .comp_top h3 {
margin-bottom: 8rem;
}
}
.displayThemeDesney.discover-epic-design .comp_top {
padding: 0 2rem 2.4rem;
}
@@ -4229,7 +4322,7 @@
position: sticky;
top: 5.6rem;
z-index: 10;
padding: 1.6rem 2rem;
padding: 2.4rem 2rem;
background: transparent;
-webkit-backdrop-filter: blur(1.2rem);
backdrop-filter: blur(1.2rem);
@@ -4250,10 +4343,10 @@
padding: 1.4rem 3.6rem 1.4rem 1.8rem;
font-size: 1.4rem;
font-weight: 600;
color: #fff;
background-color: #383838;
color: #05141f;
background-color: #f2f4f6;
border-radius: 0.4rem;
border: 0.15rem solid rgba(255, 255, 255, 0.5);
border: 0.15rem solid #dedede;
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu .btn-select:after {
content: "";
@@ -4265,7 +4358,7 @@
height: 0.6rem;
transform: translateY(-50%), rotate(0deg);
transition: all 0.2s ease;
background: url(../images/kia/pdp/display_theme_disney/ico_arrow_down.png) no-repeat 50%/1.2rem auto;
background: url(../images/kia/pdp/display_theme_mickey/ico_arrow_down_black.png) no-repeat 50%/1.2rem auto;
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu .btn-select.open:after {
transform: translateY(-50%) rotate(180deg);
@@ -4280,7 +4373,7 @@
left: 2rem;
right: 2rem;
display: none;
background-color: #383838;
background-color: #f2f4f6;
border-radius: 0 0 0.4rem 0.4rem;
border: 0.15rem solid rgba(255, 255, 255, 0.5);
border-top: 0;
@@ -4321,7 +4414,8 @@
height: 4.3rem;
padding: 0 1.6rem 0 1.2rem;
font-size: 1.6rem;
background-color: #2c2c2c;
color: #fff;
background-color: #b2b8bd;
border-radius: 2.2rem;
border: 0.2rem solid rgba(255, 255, 255, 0.2);
}
@@ -4335,10 +4429,11 @@
}
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active .tab-btn {
color: #fff;
color: #05141f;
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu ul li.active .tab-btn {
color: #fff;
border: 0;
background: linear-gradient(90deg, #ed1c24 0%, #b51016 100%);
padding: 0 1.8rem 0 1.4rem;
@@ -4347,12 +4442,17 @@
background-image: url(../images/kia/pdp/display_theme_disney/ico_tab_active.png);
}
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu.blue ul li .tab-btn:before {
background: url(../images/kia/pdp/display_theme_mickey/ico_tab.png) no-repeat center top/auto 100%;
}
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu.blue ul li.active .tab-btn {
background: linear-gradient(90deg, #1c5eed 0%, #1031b5 100%);
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-menu.blue ul li.active .tab-btn:before {
background: url(../images/kia/pdp/display_theme_mickey/ico_tab_active.png) no-repeat center top/100% auto;
background: url(../images/kia/pdp/display_theme_mickey/ico_tab_active.png) no-repeat center top/auto 100%;
}
}
.displayThemeDesney.discover-epic-design .tab-wrap .text_area {
@@ -4366,12 +4466,19 @@
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box {
display: none;
padding-top: 2.2rem;
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box {
margin-bottom: 2.4rem;
padding-top: 3.2rem;
padding-top: 4.8rem;
}
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box .index-area {
padding: 0 2rem 6rem;
}
@media (min-width: 768px) {
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box .index-area {
padding: 0 0 10rem;
}
}
.displayThemeDesney.discover-epic-design .tab-wrap .tab-box.box1 {
@@ -4550,11 +4657,10 @@
content: "";
display: block;
position: absolute;
top: 50%;
top: 0.5rem;
bottom: 0.5rem;
left: 0;
transform: translateY(-50%);
width: 0.6rem;
height: 5rem;
background: #ea0029;
}
@media (min-width: 768px) {
@@ -4949,6 +5055,73 @@
height: 2.4rem;
background: url(../images/kia/pdp/display_theme_disney/btn_zoom.png) no-repeat 0 0/100% auto;
}
.displayThemeDesney.theme-frozen .available-theme .list {
padding: 3rem 2rem 3.8rem;
background: url(../images/kia/pdp/display_theme_mickey/union-top.png) no-repeat center bottom/auto 1.46rem;
}
@media (min-width: 768px) {
.displayThemeDesney.theme-frozen .available-theme .list {
padding: 7.2rem 2rem 9.9rem;
background-size: 100% auto;
}
}
.displayThemeDesney.theme-frozen .available-theme h3 {
padding: 4rem 2rem;
background: #fff;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1215686275);
}
@media (min-width: 768px) {
.displayThemeDesney.theme-frozen .available-theme h3 {
height: 23.4rem;
}
}
.displayThemeDesney .swiper-navigation {
display: none !important;
}
@media (min-width: 768px) {
.displayThemeDesney .swiper-navigation {
display: block !important;
}
}
.displayThemeDesney .swiper-button-next,
.displayThemeDesney .swiper-button-prev {
position: absolute !important;
}
.displayThemeDesney .swiper-slide-frozen .text_area {
margin-top: 7.2rem;
}
@media (min-width: 768px) {
.displayThemeDesney .swiper-slide-frozen .text_area {
margin-top: 14rem;
}
}
.visualBg.swiper {
position: relative;
}
.visualBg.swiper .swiper-pagination {
bottom: 3rem;
}
.visualBg.swiper .swiper-pagination .swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
height: 0.4rem;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
}
@media (max-width: 768px) {
.visualBg.swiper .swiper-pagination .swiper-pagination-bullet {
width: 3rem;
height: 0.3rem;
}
}
.visualBg.swiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-color: rgb(255, 255, 255);
}
.visualBg.swiper .image_area img {
-o-object-fit: cover;
object-fit: cover;
}
.desktop .displayThemeDesney .mobile {
display: none;

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

File diff suppressed because one or more lines are too long

234
kr/assets/css/pdp_detail.scss
View File

@@ -4365,11 +4365,11 @@
.comp_body {
.text_area {
margin-top: 4.8rem;
margin-top: 11.4rem;
text-align: center;
@include tablet {
margin-top: 8rem;
margin-top: 13.7rem;
}
h3 {
@@ -4423,14 +4423,13 @@
background-size: 3.4rem 3.5rem;
// background: url(../images/kia/pdp/display_theme_disney/bg_pattern.png) repeat 50% 100%;
@include tablet {
min-height: 85.1rem;
}
h3 {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-wrap: wrap;
height: 14.8rem;
font-size: 2.4rem;
font-weight: 600;
@@ -4456,6 +4455,18 @@
text-align: center;
}
}
em {
display: block;
width: 100%;
margin-top: 0.8rem;
font-size: 1.4rem;
font-weight: 400;
text-align: center;
@include tablet {
margin-top: 2.4rem;
font-size: 1.6rem;
}
}
}
.list {
@@ -4480,7 +4491,7 @@
flex-wrap: wrap;
justify-content: center;
width: 100%;
gap: 5.6rem 0.8rem;
gap: 2rem 0.8rem;
@include tablet {
gap: 2.4rem;
@@ -4492,15 +4503,15 @@
// min-height: 19.6rem;
width: calc(50% - 0.4rem);
// min-height: vw(196);
aspect-ratio: 156 / 196;
aspect-ratio: 156 / 184;
background-color: #fff;
border-radius: 0.8rem;
box-shadow: 0px 0px 1rem 0px rgba(0, 0, 0, 0.12);
transition: all 0.2s ease;
@include tablet {
width: 28.2rem;
height: 36.9rem;
width: 28.9rem;
height: 31.2rem;
aspect-ratio: inherit;
}
@@ -4525,7 +4536,7 @@
line-height: 1.333;
@include tablet {
padding: 2rem 2.4rem;
padding: 1.6rem 2rem;
text-align: left;
}
@@ -4746,6 +4757,68 @@
}
}
}
&.stay-tuned-item {
width: 100%;
height: 4.8rem;
@include tablet {
width: 20rem;
height: 100%;
}
.stay-tuned {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
padding: 1.2rem;
font-size: 1.2rem;
font-weight: 400;
background-color: #f2f4f6;
border-radius: 0.6rem;
letter-spacing: -0.05em;
span {
display: block;
width: 1.8rem;
height: 1.2rem;
margin-right: 0.6rem;
background: url("../images/kia/promotion/ico_stay_tuned.svg") no-repeat center / contain;
}
strong {
padding: 0.2rem 0 0;
line-height: 1;
}
@include tablet {
flex-direction: column;
span {
position: relative;
width: 7.2rem;
height: 1.6rem;
margin: 0 auto;
margin-bottom: 0.8rem;
background: none;
border: 1px solid #b2b8bd;
border-radius: 0.8rem;
&:before {
content: "";
display: block;
position: absolute;
top: 50%;
left: 0.3rem;
width: 4.8rem;
height: 1rem;
transform: translateY(-50%);
background-color: #b2b8bd;
border-radius: 0.5rem;
}
}
strong {
padding: 0;
font-size: 1.6rem;
color: #b2b8bd;
}
}
}
}
}
}
}
@@ -4756,20 +4829,36 @@
width: 100%;
max-width: 192rem;
margin: 0 auto;
padding: 4rem 0 7rem;
padding: 0 0 7rem;
text-align: center;
background: url(../images/kia/pdp/display_theme_disney/bg_design_m.jpg) no-repeat center top / 100% auto;
@include tablet {
padding: 12rem 0 0;
padding: 8rem 0 0;
background: url(../images/kia/pdp/display_theme_disney/bg_design.jpg) no-repeat center top / 192rem auto;
}
&.mickey {
background: url(../images/kia/pdp/display_theme_mickey/bg_design_m.jpg) no-repeat center top / 100% auto;
background: #fff;
.tab-box {
.discover-area {
padding: 4rem 0 0;
background: url(../images/kia/pdp/display_theme_mickey/bg_design_m.jpg) no-repeat center top / 100% auto;
@include tablet {
background: url(../images/kia/pdp/display_theme_mickey/bg_design.jpg) no-repeat center top / 192rem auto;
@include tablet {
padding: 12rem 0;
background: url(../images/kia/pdp/display_theme_mickey/bg_design.jpg) no-repeat center top / 192rem auto;
}
> .comp_top {
padding-bottom: 0;
h3 {
margin-bottom: 4.8rem;
@include tablet {
margin-bottom: 8rem;
}
}
}
}
}
}
@@ -4815,7 +4904,7 @@
position: sticky;
top: 5.6rem;
z-index: 10;
padding: 1.6rem 2rem;
padding: 2.4rem 2rem;
background: transparent;
backdrop-filter: blur(1.2rem);
@@ -4834,10 +4923,10 @@
padding: 1.4rem 3.6rem 1.4rem 1.8rem;
font-size: 1.4rem;
font-weight: 600;
color: #fff;
background-color: #383838;
color: #05141f;
background-color: #f2f4f6;
border-radius: 0.4rem;
border: 0.15rem solid rgba(255, 255, 255, 0.5);
border: 0.15rem solid #dedede;
&:after {
content: "";
@@ -4849,7 +4938,7 @@
height: 0.6rem;
transform: translateY(-50%), rotate(0deg);
transition: all 0.2s ease;
background: url(../images/kia/pdp/display_theme_disney/ico_arrow_down.png) no-repeat 50% / 1.2rem auto;
background: url(../images/kia/pdp/display_theme_mickey/ico_arrow_down_black.png) no-repeat 50% / 1.2rem auto;
}
&.open {
@@ -4868,7 +4957,7 @@
left: 2rem;
right: 2rem;
display: none;
background-color: #383838;
background-color: #f2f4f6;
border-radius: 0 0 0.4rem 0.4rem;
border: 0.15rem solid rgba(255, 255, 255, 0.5);
border-top: 0;
@@ -4905,7 +4994,8 @@
height: 4.3rem;
padding: 0 1.6rem 0 1.2rem;
font-size: 1.6rem;
background-color: #2c2c2c;
color: #fff;
background-color: #b2b8bd;
border-radius: 2.2rem;
border: 0.2rem solid rgba(255, 255, 255, 0.2);
@@ -4922,9 +5012,10 @@
&.active {
.tab-btn {
color: #fff;
color: #05141f;
@include tablet {
color: #fff;
border: 0;
background: linear-gradient(90deg, #ed1c24 0%, #b51016 100%);
padding: 0 1.8rem 0 1.4rem;
@@ -4941,13 +5032,20 @@
&.blue {
ul {
li {
.tab-btn {
@include tablet {
&:before {
background: url(../images/kia/pdp/display_theme_mickey/ico_tab.png) no-repeat center top / auto 100%;
}
}
}
&.active {
.tab-btn {
@include tablet {
background: linear-gradient(90deg, #1c5eed 0%, #1031b5 100%);
&:before {
background: url(../images/kia/pdp/display_theme_mickey/ico_tab_active.png) no-repeat center top / 100% auto;
background: url(../images/kia/pdp/display_theme_mickey/ico_tab_active.png) no-repeat center top / auto 100%;
}
}
}
@@ -4968,11 +5066,18 @@
.tab-box {
display: none;
padding-top: 2.2rem;
// padding-top: 2.2rem;
@include tablet {
margin-bottom: 2.4rem;
padding-top: 3.2rem;
padding-top: 4.8rem;
}
.index-area {
padding: 0 2rem 6rem;
@include tablet {
padding: 0 0 10rem;
}
}
&.box1 {
@@ -5188,11 +5293,12 @@
content: "";
display: block;
position: absolute;
top: 50%;
top: 0.5rem;
bottom: 0.5rem;
left: 0;
transform: translateY(-50%);
// transform: translateY(-50%);
width: 0.6rem;
height: 5rem;
// height: 5rem;
background: #ea0029;
@include tablet {
width: 1.2rem;
@@ -5607,6 +5713,76 @@
height: 2.4rem;
background: url(../images/kia/pdp/display_theme_disney/btn_zoom.png) no-repeat 0 0 / 100% auto;
}
&.theme-frozen {
.available-theme {
.list {
padding: 3rem 2rem 3.8rem;
background: url(../images/kia/pdp/display_theme_mickey/union-top.png) no-repeat center bottom / auto 1.46rem;
@include tablet {
padding: 7.2rem 2rem 9.9rem;
background-size: 100% auto;
}
}
h3 {
padding: 4rem 2rem;
background: #fff;
box-shadow: 0px 0px 16px 0px #0000001f;
@include tablet {
height: 23.4rem;
}
}
}
}
.swiper-navigation {
display: none !important;
@include tablet {
display: block !important;
}
}
.swiper-button-next,
.swiper-button-prev {
position: absolute !important;
}
.swiper-slide-frozen {
.text_area {
margin-top: 7.2rem;
@include tablet {
margin-top: 14rem;
}
}
}
}
.visualBg.swiper {
position: relative;
.swiper-pagination {
bottom: 3rem;
.swiper-pagination-bullet {
opacity: 1;
width: 5.6rem;
height: 0.4rem;
border-radius: 0;
background-color: rgba(255, 255, 255, 0.5);
@include maxtablet {
width: 3rem;
height: 0.3rem;
}
&.swiper-pagination-bullet-active {
background-color: rgba(255, 255, 255, 1);
}
}
}
.image_area {
img {
object-fit: cover;
}
}
}
.desktop {

BIN
kr/assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov
View File

Binary file not shown.

BIN
kr/assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm
View File

Binary file not shown.

BIN
kr/assets/images/kia/pdp/display_theme_mickey/Theme_screen.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
kr/assets/images/kia/pdp/display_theme_mickey/bg_design.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 MiB

After

Width:  |  Height:  |  Size: 5.5 MiB

BIN
kr/assets/images/kia/pdp/display_theme_mickey/frozen/Theme_screen_m.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 799 KiB

After

Width:  |  Height:  |  Size: 252 KiB

BIN
kr/assets/images/kia/pdp/display_theme_mickey/frozen/option1.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 13 KiB

BIN
kr/assets/images/kia/pdp/display_theme_mickey/frozen/option2.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 72 KiB

BIN
kr/assets/images/kia/pdp/display_theme_mickey/ico_arrow_down_black.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 299 B

BIN
kr/assets/images/kia/pdp/display_theme_mickey/ico_tab.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 682 B

0
kr/assets/images/kia/pdp/display_theme_mickey/frozen/img_index.png → kr/assets/images/kia/pdp/display_theme_mickey/img_index.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

0
kr/assets/images/kia/pdp/display_theme_mickey/frozen/img_index_m.png → kr/assets/images/kia/pdp/display_theme_mickey/img_index_m.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
kr/assets/images/kia/pdp/display_theme_mickey/thumb_theme1.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 10 KiB

BIN
kr/assets/images/kia/pdp/display_theme_mickey/thumb_theme2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 56 KiB

BIN
kr/assets/images/kia/pdp/display_theme_mickey/union-top.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.8 KiB

BIN
kr/assets/images/kia/promotion/Mickey_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 335 KiB

BIN
kr/assets/images/kia/promotion/img_overview02.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 382 KiB

After

Width:  |  Height:  |  Size: 437 KiB

BIN
kr/assets/images/kia/promotion/img_overview03.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 382 KiB

After

Width:  |  Height:  |  Size: 337 KiB

BIN
kr/assets/images/kia/promotion/img_overview04.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 113 KiB

After

Width:  |  Height:  |  Size: 466 KiB

BIN
kr/assets/images/kia/promotion/img_overview05.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 337 KiB

BIN
kr/assets/images/kia/promotion/img_overview06.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 468 KiB

BIN
kr/assets/images/kia/promotion/img_overview07.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 KiB

BIN
kr/assets/images/kia/promotion/img_overview08.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 361 KiB

BIN
kr/assets/images/kia/promotion/img_overview09.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 336 KiB

BIN
kr/assets/images/kia/promotion/img_overview10.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 495 KiB

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

@@ -360,6 +360,7 @@ $(document).ready(function () {
pdpSwiperDtl(".streamingPremium-swiper1");
pdpSwiperDtl(".streamingPremium-swiper2");
pdpSwiperDtl(".streamingPremium-swiper3");
pdpVisualBgSwiper(".displayThemeDesney");
flagScroll = false;
}
@@ -532,7 +533,7 @@ function pdpDisplayThemeSwiperDtl() {
function pdpInCarGameSwiper() {
if ($(".inCarGame .visualBg").length > 0) {
}
var swiperTheme = new Swiper(".visualBg", {
var swiperTheme = new Swiper(".inCarGame .visualBg", {
slidesPerView: 1,
loop: true,
freeMode: false,
@@ -545,7 +546,7 @@ function pdpInCarGameSwiper() {
},
on: {
init: function () {
// console.log('pdpInCarGameSwiper 실행한다')
console.log("pdpInCarGameSwiper 실행한다");
},
},
});
@@ -1518,3 +1519,50 @@ $(document).on("click", "#carListPopup .popContents .carlistItem button", functi
// $(".hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item strong").text(selectedText);
// $(".hederWarp_n .headerInner .gnb .menuWarp .mobileCarlist .mobilecarItem .item span").text(selectedTextCode);
});
function pdpVisualBgSwiper(obj) {
if ($(`${obj} .visualBg.swiper`).length > 0) {
var swiperTheme = new Swiper(`${obj} .visualBg.swiper`, {
slidesPerView: 1,
loop: true,
freeMode: false,
navigation: {
nextEl: `${obj} .visualBg .swiper-button-next`,
prevEl: `${obj} .visualBg .swiper-button-prev`,
},
pagination: {
el: `${obj} .visualBg .swiper-pagination`,
},
on: {
init: function () {
console.log("pdpInCarGameSwiper 실행한다");
},
},
});
}
flagScroll = false;
}
function btnTabMenu(tabBtnNumber) {
const $tabMenuLi = $(".tab-menu li");
const $tabBtnText = $tabMenuLi.eq(tabBtnNumber).find(".tab-btn").text();
const $tabContent = $(".tab-box");
$tabMenuLi.removeClass("active");
$tabMenuLi.eq(tabBtnNumber).addClass("active");
$tabContent.hide().eq(tabBtnNumber).show();
const $tabWrap = $(".pdpDetail .tab-wrap");
// 스크롤 이동
$("html, body").animate(
{
scrollTop: $tabWrap.offset().top - 60,
},
200
);
// 모바일 일때
if ($("body").hasClass("moblie") || $("body").hasClass("tablet")) {
$(".tab-menu .btn-select").text($tabBtnText);
}
}

844
kr/product/pdp_display_theme_disney_frozen.html
View File

@@ -85,12 +85,34 @@
</div>
<!-- 모바일 전용 차량 선택 UI입니다. -->
<div class="mobileCarlist">
<div class="mobilecarItem">
<a href="javascript:void(0)" class="mobilecarItem">
<div class="item">
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</strong>
<span>KMTKEXXBPMU000081</span>
<button class="btn-select" onclick="open_layer_popup('carListPopup')">차량 선택하기 ></button>
<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>
<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 모바일 공통 메뉴 영역입니다. -->
@@ -157,10 +179,10 @@
</div>
<div class="func">
<!-- PC 전용 차량 선택 UI입니다. -->
<!-- 2025.08.27 추가 -->
<div class="carlist">
<a href="javascript:void(0)" class="carItem">
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
<span>MV</span>
<span>161어 1660</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">
@@ -168,166 +190,32 @@
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
</svg>
<ul>
<!-- [D] 선택 시 selected 클래스 추가 -->
<li class="selected">
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</span>
</button>
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
<li>
<a href="javascript:void(0)">
<span>MV</span>
<span>KMTKEXXBPMU000081</span>
</a>
</li>
<li>
<button class="car-name">
<span>쏘렌토(MQ4) 하이브리드</span>
</button>
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
<a href="javascript:void(0)">
<span>SX</span>
<span>161어 1660</span>
</a>
</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>
<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>
<a href="javascript:void(0)">
<span>MV</span>
<span>452허 1234</span>
</a>
</li>
</ul>
</div>
</div>
<!--// 2025.08.27 추가 -->
<!-- PC 전용 로그인 버튼입니다. -->
<!-- <div class="userLogin">
<div class="userLogin">
<a href="#">로그인/가입</a>
</div> -->
</div>
<!-- PC 전용 USER 관련 링크 영역입니다. -->
<div class="user">
@@ -356,7 +244,7 @@
<div class="infoStickyInner">
<div class="stickyLeft">
<p>
<strong>Disney Display Themes</strong>
<strong>Disney Display Theme</strong>
<!-- <span>30개 NBA 팀의 개성있는 디스플레이 테마로 분위기 업업~!!!</span> -->
</p>
</div>
@@ -381,7 +269,7 @@
<div class="swiper-slide"><img src="../assets/images/kia/product-img/producy-temp2.png" alt="이미지 상품명" /></div>
<div class="swiper-slide withVideo">
<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" poster="../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_theme_mickeyNBA_Theme_AVNT.jpg" alt="이미지 상품명" />
@@ -398,7 +286,8 @@
<div class="producTitle">
<!-- <span>차량SW</span> -->
<h1>
Disney<br />Display Themes
Disney<br />
Display Theme
<button type="button" class="btn-wish"></button>
</h1>
<p>Special Disney themes add style to your drive</p>
@@ -409,7 +298,7 @@
<div class="checkBtn withVideo">
<input type="checkbox" name="check" id="check1" value="micky" checked />
<label for="check1">
<p><img src="../assets/images/kia/pdp/display_theme_mickey/option1.png" alt="marvel1" /></p>
<p><img src="../assets/images/kia/pdp/display_theme_mickey/option1.png" alt="micky" /></p>
<div class="optionText">
<p>
<strong>Disney Mickey & Friends</strong>
@@ -417,14 +306,14 @@
</div>
</label>
</div>
<div class="optionList">
<div class="checkBtn withVideo">
<input type="checkbox" name="check" id="check2" value="frozen" />
<div class="checkBtn disabledBtn">
<input type="checkbox" name="check" id="check2" value="frozen" disabled />
<label for="check2">
<p><img src="../assets/images/kia/pdp/display_theme_mickey/option2.png" alt="frozen" /></p>
<div class="optionText">
<p>
<strong>Disney Frozen</strong>
<i class="badge">구매완료</i>
</p>
</div>
</label>
@@ -469,60 +358,94 @@
<!--에디터 영역-->
<div class="editorWarp pdpDetail">
<div class="editorInner">
<div class="comp_wide displayThemeDesney mickey">
<div class="image_area visualBg">
<img src="../assets/images/kia/pdp/display_theme_mickey/Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지" />
<img src="../assets/images/kia/pdp/display_theme_mickey/Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지" />
</div>
<div class="comp_body layer_up">
<div class="text_area">
<h3 class="color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 테마와 함께하는 <br class="br-m" />일상 속 특별한 여행</h3>
<div class="info color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 미키와 친구들의 유쾌한 감성이 기아의 디스플레이 테마 속에 담겼습니다.<br />차 안에서 펼쳐지는 또 하나의 즐거운 이야기를 지금 시작하세요.</div>
<div class="comp_wide displayThemeDesney theme-frozen">
<div class="image_area visualBg swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지" />
<img src="../assets/images/kia/pdp/display_theme_mickey/Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지" />
</div>
<div class="comp_body layer_up">
<div class="text_area">
<h3 class="color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 테마와 함께하는 <br class="br-m" />일상 속 특별한 여행</h3>
<div class="info color-000" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">디즈니 미키와 친구들의 유쾌한 감성이 기아의 디스플레이 테마 속에 담겼습니다.<br />차 안에서 펼쳐지는 또 하나의 즐거운 이야기를 지금 시작하세요.</div>
</div>
</div>
</div>
<div class="swiper-slide swiper-slide-frozen">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/Theme_screen.jpg" class="web" alt="디스플레이 테마 이미지" />
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/Theme_screen_m.jpg" class="mobile" alt="디스플레이 테마 이미지" />
</div>
<div class="comp_body layer_up">
<div class="text_area">
<h3 class="color-fff" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">Bring Disney artwork <br class="br-m" />to your Kia!</h3>
<div class="info color-fff" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
Kia and Disney are coming together to launch new display themes for Disney fans.<br />
Transform your in-car experience with delightful artwork of Disney Display Themes.
</div>
</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-navigation">
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="comp_bottom available-theme">
<h3>
<span class="text-center">디즈니 미키와 친구들 테마를 만나보세요!</span>
<span class="text-center">Available Disney Themes</span>
<em class="text-em">
Pick a theme and preview<br class="br-m" />
the fun changes to your screen!
</em>
</h3>
<div class="list">
<ul>
<li>
<a href="#">
<img src="../assets/images/kia/pdp/display_theme_mickey/thumb_theme1.png" alt="MARVEL" />
<a href="#none" onclick="btnTabMenu(0)">
<img src="../assets/images/kia/pdp/display_theme_mickey/thumb_theme1.png" alt="Disney Mickey & Friends" />
<span class="txt">
<strong>디즈니 미키와 친구들</strong>
<span class="hashs"><span>#스티커스타일</span> <span>#유쾌함한스푼</span></span>
<strong>Disney<br />Mickey & Friends</strong>
<span class="hashs"><span>#StickerStyle</span> <span>#Playful</span></span>
</span>
</a>
</li>
<li class="more">
<a href="#">
<strong>
디즈니 테마는 계속됩니다.
<em class="speech-bubble">앞으로 출시될 테마들을 <br class="br-m" />기대해주세요!</em>
</strong>
<img src="../assets/images/kia/pdp/display_theme_mickey/thumb_theme_more.png" alt="MARVEL" />
<span class="hashs">※ 출시 예정 테마는 변경될 수 있습니다.</span>
<li>
<a href="#none" onclick="btnTabMenu(1)">
<img src="../assets/images/kia/pdp/display_theme_mickey/thumb_theme2.png" alt="Disney Frozen" />
<span class="txt">
<strong>Disney Frozen</strong>
<span class="hashs"><span>#Magnificent</span> <span>#Queen</span> <span>#WinterVibes</span></span>
</span>
</a>
</li>
<li class="stay-tuned-item">
<div class="stay-tuned">
<span></span>
<strong>STAY TUNED</strong>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="comp_wide discover-epic-design displayThemeDesney mickey">
<div class="comp_top">
<h3>디즈니 테마, <br class="br-m" />직접 확인해 보세요!</h3>
<p class="info">옵션을 선택하면, 차량에 적용된 테마 디자인을 <br class="br-m" />바로 확인할 수 있어요.</p>
</div>
<div class="comp_body">
<div class="tab-wrap">
<div class="tab-menu blue cont-select">
<div class="inner">
<div class="btn-select">디즈니 미키와 친구들</div>
<div class="btn-select">Disney Mickey & Friends</div>
<ul>
<li class="active">
<span class="tab-btn">디즈니 미키와 친구들</span>
<span class="tab-btn">Disney Mickey & Friends</span>
</li>
<li>
<span class="tab-btn">Disney Frozen</span>
@@ -532,247 +455,272 @@
</div>
<div class="tab-box box1">
<div class="discover">
<div class="index-area">
<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/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="text_area">
<h4>Welcome & Goodbye Video</h4>
<p>디즈니 미키와 친구들 컨셉의 모션 그래픽 Video가 차량 Sleep 모드 동작 이후 차량을 켤 때, 끌 때 적용 됩니다.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Cluster.png" class="themeImg box1-cluster" alt="Cluster" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>
선택한 디즈니 테마가 클러스터 화면에 적용됩니다. 디즈니만의 사랑스럽고 유쾌한 그래픽과 게이지 디자인을 확인해 보세요.
<span class="add">※ 차종에 따라 클러스터 화면 디자인이 상기 이미지와 다를 수 있습니다.</span>
</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Map.png" class="themeImg box1-navigation" alt="Navigation" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>목적지까지의 길 안내 기능을 이용할 때마다 디즈니의 특별한 아트워크가 현재 위치를 표시해줍니다.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Home.png" class="themeImg box1-homecard" alt="Homecard" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>각 메뉴 화면을 넘길 때마다 디즈니 캐릭터와 로고, 다양한 일러스트가 나타납니다.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Profile.png" class="themeImg box1-profile" alt="Profile" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>디즈니 캐릭터와 로고를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다. 운전자마다 다른 이미지를 설정해 보세요.</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_index.png" class="web" alt="index" />
<img src="../assets/images/kia/pdp/display_theme_mickey/img_index_m.png" class="mobile" alt="index" />
</div>
</div>
</div>
<div class="three-reasons">
<div class="tit-area">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<p>디즈니 테마를 놓쳐서는 안될</p>
<h3>세 가지 이유</h3>
<div class="discover-area">
<div class="comp_top">
<h3>Discover <br class="br-m" />Adorable Designs</h3>
</div>
<div class="discover">
<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">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="" loop="">
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="text_area">
<h4>Welcome &amp; Goodbye Video</h4>
<p>디즈니 미키와 친구들 컨셉의 모션 그래픽 Video가 차량 Sleep 모드 동작 이후 차량을 켤 때, 끌 때 적용 됩니다.</p>
</div>
</div>
<div class="item 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">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Cluster.png" class="themeImg box1-cluster" alt="Cluster" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>선택한 디즈니 테마가 클러스터 화면에 적용됩니다. 디즈니만의 사랑스럽고 유쾌한 그래픽과 게이지 디자인을 확인해 보세요.&nbsp;</p>
<p><span class="add">※ 차종에 따라 클러스터 화면 디자인이 상기 이미지와 다를 수 있습니다.</span></p>
</div>
</div>
<div class="item 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">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Map.png" class="themeImg box1-navigation" alt="Navigation" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>목적지까지의 길 안내 기능을 이용할 때마다 디즈니의 특별한 아트워크가 현재 위치를 표시해줍니다.</p>
</div>
</div>
<div class="item 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">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Home.png" class="themeImg box1-homecard" alt="Homecard" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>각 메뉴 화면을 넘길 때마다 디즈니 캐릭터와 로고, 다양한 일러스트가 나타납니다.</p>
</div>
</div>
<div class="item 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">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_Profile.png" class="themeImg box1-profile" alt="Profile" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>디즈니 캐릭터와 로고를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다. 운전자마다 다른 이미지를 설정해 보세요.</p>
</div>
</div>
</div>
</div>
<div class="reasons">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<ol>
<li>
<p>
<strong>익숙한 공간에 스며드는 특별함</strong>
디즈니 미키와 친구들 테마와 함께, <br class="br-m" />매 순간 드라이브의 즐거움을 느껴보세요.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>취향은 달라도, 즐거움은 함께</strong>
디즈니 프린세스, 미키와 친구들, 겨울왕국 등 <br class="br-m" />디즈니를 사랑하는 팬이라면 <br class="br-m" />더 많은 캐릭터들의 등장을 놓치지 마세요.
<span class="add">※ 출시 예정 테마는 변경될 수 있습니다.</span>
</p>
<div class="img-area">
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reason_mickey.png" alt="" />
<span class="msg">앞으로 출시될 테마들을 <br />기대해주세요!</span>
</span>
</div>
</li>
<li>
<p>
<strong>드라이브가 새로워지는 순간</strong>
기아 오너를 위한 디즈니 디스플레이 테마.<br class="br-m" />지금 바로, 특별한 드라이빙을 시작해보세요.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons3.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons3_m.png" class="mobile" alt="" />
</div>
</li>
</ol>
<div class="copyright">ⓒ Disney</div>
<div class="three-reasons">
<div class="tit-area">
<div class="inner aos-init" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<p>디즈니 테마를 놓쳐서는 안될</p>
<h3>세 가지 이유</h3>
</div>
</div>
<div class="reasons">
<div class="inner aos-init" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="400">
<ol>
<li>
<p>
<strong>익숙한 공간에 스며드는 특별함</strong> 디즈니 미키와 친구들 테마와 함께, <br class="br-m" />
매 순간 드라이브의 즐거움을 느껴보세요.
</p>
<div class="img-area"><img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1.png" class="web" alt="" /> <img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons1_m.png" class="mobile" alt="" /></div>
</li>
<li>
<p>
<strong>취향은 달라도, 즐거움은 함께</strong> 디즈니 프린세스, 미키와 친구들, 겨울왕국 등 <br class="br-m" />
디즈니를 사랑하는 팬이라면 <br class="br-m" />
더 많은 캐릭터들의 등장을 놓치지 마세요. <span class="add">※ 출시 예정 테마는 변경될 수 있습니다.</span>
</p>
<div class="img-area">
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_reason_mickey.png" alt="" />
<span class="msg"
>앞으로 출시될 테마들을 <br />
기대해주세요!</span
>
</span>
</div>
</li>
<li>
<p>
<strong>드라이브가 새로워지는 순간</strong> 기아 오너를 위한 디즈니 디스플레이 테마.<br class="br-m" />
지금 바로, 특별한 드라이빙을 시작해보세요.
</p>
<div class="img-area"><img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons3.png" class="web" alt="" /> <img src="../assets/images/kia/pdp/display_theme_mickey/img_reasons3_m.png" class="mobile" alt="" /></div>
</li>
</ol>
<div class="copyright">ⓒ Disney</div>
</div>
</div>
</div>
</div>
</div>
<div class="tab-box box2">
<div class="index-area">
<div class="inner">
<img src="../assets/images/kia/pdp/display_theme_disney/Disney Frozen_Index1.png" alt="Index1" />
</div>
</div>
<div class="discover">
<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/pdp/display_theme_disney/Marvel_Avengers_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_disney/Marvel_Avengers_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="text_area">
<h4>Welcome & Goodbye Video</h4>
<p>
마블 어벤져스 컨셉의 모션 그래픽 Video가 차량 Sleep <br class="br-m" />모드 동작 이후 차량을 켤 때, 끌 때에 적용 됩니다.<br />
<span class="add">※ 두가지 테마 모두 동일한 모션 그래픽 Video가 적용됩니다. </span>
</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/Avengers_Comics_Cluster.png" class="themeImg" alt="Cluster" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>선택한 마블 테마가 클러스터 화면에 적용됩니다. 마블만의 역동적인 그래픽과 게이지 디자인을 확인해 보세요.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/Avengers_Comics_Map.png" class="themeImg" alt="Navigation" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>목적지까지의 길 안내 기능을 이용할 때마다 마블의 특별한 아트워크가 현재 위치를 표시해줍니다.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/Avengers_Comics_Home.png" class="themeImg" alt="Homecard" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>각 메뉴 화면을 넘길 때마다 마블 캐릭터와 로고, 다양한 일러스트가 나타납니다.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/Avengers_Comics_Profile.png" class="themeImg" alt="Profile" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>마블 캐릭터와 로고를 활용하여 디자인된 다양한 프로필 이미지를 선택할 수 있습니다. 운전자마다 다른 이미지를 설정해 보세요.</p>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/img_index.png" class="web" alt="index" />
<img src="../assets/images/kia/pdp/display_theme_mickey/img_index_m.png" class="mobile" alt="index" />
</div>
</div>
</div>
<div class="discover-area">
<div class="comp_top">
<h3>Discover <br class="br-m" />Adorable Designs</h3>
</div>
<div class="discover">
<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/pdp/display_theme_mickey/Disney Mickey_Welcome.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.mov" type="video/quicktime" />
<source src="../assets/images/kia/pdp/display_theme_mickey/Disney Mickey_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video>
</div>
<div class="three-reasons">
<div class="tit-area">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<p>마블 테마를 놓쳐서는 안될</p>
<h3>세 가지 이유</h3>
<div class="text_area">
<h4>Welcome & Goodbye Video</h4>
<p>Disney-themed motion graphics play once at <br class="br-m" />start-up (from sleep mode) and shutdown.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_Cluster.png" class="themeImg box1-cluster" alt="Cluster" />
</div>
<div class="text_area">
<h4>Cluster</h4>
<p>The selected Disney theme appears on the cluster with themed graphics and gauges.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_Map.png" class="themeImg box1-navigation" alt="Navigation" />
</div>
<div class="text_area">
<h4>Navigation</h4>
<p>Disney artwork highlights your current location during navigation.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_Home.png" class="themeImg box1-homecard" alt="Homecard" />
</div>
<div class="text_area">
<h4>Homecard</h4>
<p>Artwork of Disney characters and logos appear across various menu screens.</p>
</div>
</div>
<div class="item" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_Profile.png" class="themeImg box1-profile" alt="Profile" />
</div>
<div class="text_area">
<h4>Profile</h4>
<p>Choose from Disney-themed profile images—choose a unique one for each driver.</p>
</div>
</div>
</div>
</div>
<div class="reasons">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<ol>
<li>
<p>
<strong>차 안에서 누리는 색다른 경험</strong>
마블 어벤져스 테마와 함께, <br class="br-m" />매 순간 주행의 즐거움을 느껴보세요.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons1.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons1_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>취향에 따라 골라보는 다양한 테마</strong>
어벤져스, 스파이더맨, 엑스맨 등 <br class="br-m" />마블 유니버스를 사랑하는 팬이라면 <br />더 많은 히어로들의 등장을 놓치지 마세요.
<span class="add">※ 출시 예정 테마는 변경될 수 있습니다.</span>
</p>
<div class="img-area">
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reason_marvel.png" alt="" />
<span class="msg">앞으로 출시될 테마들을<br />기대해주세요!</span>
</span>
</div>
</li>
<li>
<p>
<strong>개성 넘치는 드라이빙의 서막</strong>
기아 오너를 위한 마블 디스플레이 테마. <br />지금 바로, 특별한 드라이빙을 시작해보세요.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons3.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_reasons3_m.png" class="mobile" alt="" />
</div>
</li>
</ol>
<div class="copyright">ⓒ 2025 MARVEL</div>
<div class="three-reasons">
<div class="tit-area">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<p>Three Reasons</p>
<h3>
Why you won’t want<br class="br-m" />
to miss out
</h3>
</div>
</div>
<div class="reasons">
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<ol>
<li>
<p>
<strong>A Delightful <br class="br-m" />In-Car Experience</strong>
Once you transform your display with<br class="br-m" />
Disney Frozen themes,<br class="br-pc" />
you might find it hard to<br class="br-m" />
return to the standard setup.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons1.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons1_m.png" class="mobile" alt="" />
</div>
</li>
<li>
<p>
<strong>Themes for Every Taste</strong>
Whether you’re a fan of<br class="br-m" />
Disney’s Frozen,<br class="br-m" />
or Mickey & Friends,<br class="br-pc" />
an even more themes will be available<br class="br-m" />
featuring some of your<br class="br-pc" />
favorite characters.
<span class="add">※ Themes to be released are subject to change.</span>
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons2.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons2_m.png" class="mobile" alt="" />
</div>
<!-- <div class="img-area">
<span class="img-msg">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reason_mickey.png" alt="" />
<span class="msg"
>Our Themes<br />
Are Expanding</span
>
</span>
</div> -->
</li>
<li>
<p>
<strong>Your Distinctive Journey <br class="br-m" />Starts Here</strong>
Kia owners can now get Disney in-car<br class="br-m" />
experiences to customize<br class="br-pc" />
their journey.
</p>
<div class="img-area">
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons3.png" class="web" alt="" />
<img src="../assets/images/kia/pdp/display_theme_mickey/frozen/img_reasons3_m.png" class="mobile" alt="" />
</div>
</li>
</ol>
<div class="copyright">ⓒ Disney</div>
</div>
</div>
</div>
</div>
@@ -804,7 +752,7 @@
</div>
</div>
<div class="comp_1x_b_n_n_e1 displayTheme displayTheme-kbo">
<div class="comp_1x_b_n_n_e1 displayTheme">
<div class="comp_body">
<h5>사양 이용 영상</h5>
<div class="youtubeArea youtubeArea_pdp" value="lNuSUuf7hYU"></div>
@@ -1076,78 +1024,6 @@
</div>
</div>
<!--//footer-->
<!-- 2025.08.27 추가 -->
<div id="carListPopup" class="popupWarp" style="display: none">
<div class="popContents">
<h2>차량 선택하기 (5)</h2>
<div class="payInfoCon">
<div class="carlistItem">
<ul>
<!-- [D] 선택 시 selected 클래스 추가 -->
<li class="selected">
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>111JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>222JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>333JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>444JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>555JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>666JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
<em>444JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>쏘렌토(MQ4) 하이브리드</strong>
<em>555JH4TB2H26CC012345</em>
</button>
</li>
<li>
<button>
<strong>스포티지 개조 25</strong>
<em>666JH4TB2H26CC012345</em>
</button>
</li>
</ul>
</div>
</div>
<div class="towButton">
<button class="cartBtn leftBtn" onclick="close_layer_popup('carListPopup')"><p>취소</p></button>
<button class="PurchaseBtn rightBtn" onclick="close_layer_popup('carListPopup')"><p>선택</p></button>
</div>
</div>
</div>
<!--// 2025.08.27 추가 -->
<script>
AOS.init();