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-07-24 21:47:48 +09:00
parent f8fa2eb962
commit f43e39e185
12 changed files with 135 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3828,12 +3828,20 @@
} }
.displayThemeDesney .comp_body .text_area .info { .displayThemeDesney .comp_body .text_area .info {
color: #f0f0f0; color: #f0f0f0;
letter-spacing: -0.032rem; letter-spacing: -0.075rem;
line-height: 1.5; line-height: 1.5;
} }
.displayThemeDesney .comp_body .text_area .info br { .displayThemeDesney .comp_body .text_area .info br {
display: none; display: none;
} }
.displayThemeDesney .comp_body .text_area .info br.br-m {
display: block;
}
@media (min-width: 768px) {
.displayThemeDesney .comp_body .text_area .info br.br-m {
display: none;
}
}
@media (min-width: 768px) { @media (min-width: 768px) {
.displayThemeDesney .comp_body .text_area .info br { .displayThemeDesney .comp_body .text_area .info br {
display: block; display: block;
@@ -4105,13 +4113,13 @@
width: 100%; width: 100%;
max-width: 192rem; max-width: 192rem;
margin: 0 auto; margin: 0 auto;
padding: 4rem 0 10rem; padding: 4rem 0 7rem;
text-align: center; text-align: center;
background: url(../images/kia/pdp/display_theme_disney/bg_design_m.jpg) no-repeat center top/100% auto; background: url(../images/kia/pdp/display_theme_disney/bg_design_m.jpg) no-repeat center top/100% auto;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.displayThemeDesney.discover-epic-design { .displayThemeDesney.discover-epic-design {
padding: 12rem 0 10rem; padding: 12rem 0 0;
background: url(../images/kia/pdp/display_theme_disney/bg_design.jpg) no-repeat center top/192rem auto; background: url(../images/kia/pdp/display_theme_disney/bg_design.jpg) no-repeat center top/192rem auto;
} }
} }
@@ -4309,7 +4317,7 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
bottom: -3rem; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 20rem; height: 20rem;
@@ -4398,6 +4406,10 @@
background-color: #fff; background-color: #fff;
text-align: left; text-align: left;
} }
.displayThemeDesney .three-reasons .inner {
position: relative;
z-index: 1;
}
.displayThemeDesney .three-reasons .tit-area { .displayThemeDesney .three-reasons .tit-area {
position: relative; position: relative;
padding: 0 2rem 4rem; padding: 0 2rem 4rem;
@@ -4409,12 +4421,27 @@
box-shadow: 0px 4.4rem 4rem 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4.4rem 4rem 0px rgba(0, 0, 0, 0.25);
} }
} }
.displayThemeDesney .three-reasons .tit-area:after {
content: "";
display: block;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 20rem;
background: linear-gradient(to top, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
}
@media (min-width: 1240px) {
.displayThemeDesney .three-reasons .tit-area::after {
display: none;
}
}
.displayThemeDesney .three-reasons .tit-area h3 { .displayThemeDesney .three-reasons .tit-area h3 {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 4.2rem; height: 3.5rem;
padding: 0 0.8rem; padding: 0.4rem 0.8rem 0;
font-size: 3rem; font-size: 2.4rem;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
background-color: #ed1c24; background-color: #ed1c24;
@@ -4441,12 +4468,12 @@
} }
} }
.displayThemeDesney .three-reasons .reasons { .displayThemeDesney .three-reasons .reasons {
padding: 3.6rem 0 6.4rem; padding: 3.6rem 0 4.4rem;
background: linear-gradient(176.68deg, #3f3e3e 23.87%, #060606 97.26%); background: linear-gradient(176.68deg, #3f3e3e 23.87%, #060606 97.26%);
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.displayThemeDesney .three-reasons .reasons { .displayThemeDesney .three-reasons .reasons {
height: 84.7rem; height: 94rem;
padding: 8rem 2rem; padding: 8rem 2rem;
} }
} }
@@ -4479,7 +4506,7 @@
margin: 0; margin: 0;
padding: 0 2rem 0 7.2rem; padding: 0 2rem 0 7.2rem;
font-size: 1.6rem; font-size: 1.6rem;
background-position: 0 0.5rem; background-position: 0 0;
background-size: 3.1rem auto; background-size: 3.1rem auto;
} }
} }
@@ -4502,7 +4529,8 @@
@media (min-width: 768px) { @media (min-width: 768px) {
.displayThemeDesney .three-reasons .reasons li:nth-child(2) p { .displayThemeDesney .three-reasons .reasons li:nth-child(2) p {
padding: 0 2rem 0 7.2rem; padding: 0 2rem 0 7.2rem;
background-position: 0 0.5rem; margin: 0;
background-position: 0 1.2rem;
background-size: 5.1rem auto; background-size: 5.1rem auto;
text-align: left; text-align: left;
} }
@@ -4520,10 +4548,14 @@
} }
} }
.displayThemeDesney .three-reasons .reasons li:nth-child(3) p { .displayThemeDesney .three-reasons .reasons li:nth-child(3) p {
padding-left: 5.4rem;
margin-left: 2.7rem;
background: url(../images/kia/pdp/display_theme_disney/number3.png) no-repeat 0 0/3.6rem auto; background: url(../images/kia/pdp/display_theme_disney/number3.png) no-repeat 0 0/3.6rem auto;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.displayThemeDesney .three-reasons .reasons li:nth-child(3) p { .displayThemeDesney .three-reasons .reasons li:nth-child(3) p {
margin: 0;
padding: 0 2rem 0 7.2rem;
background-position: 0 0; background-position: 0 0;
background-size: 4.9rem auto; background-size: 4.9rem auto;
} }
@@ -4615,6 +4647,17 @@
margin-bottom: 0.8rem; margin-bottom: 0.8rem;
} }
} }
.displayThemeDesney .three-reasons .reasons .copyright {
margin-top: 8.2rem;
color: #fff;
font-size: 1.2rem;
text-align: center;
}
@media (min-width: 768px) {
.displayThemeDesney .three-reasons .reasons .copyright {
margin-top: 16rem;
}
}
.displayThemeDesney .coming-next { .displayThemeDesney .coming-next {
padding: 7.7rem 0 5.7rem; padding: 7.7rem 0 5.7rem;
text-align: left; text-align: left;
@@ -4703,16 +4746,21 @@
} }
} }
.displayThemeDesney.comp_2x_b_h_s_e2 { .displayThemeDesney.comp_2x_b_h_s_e2 {
margin-top: 6rem; margin-top: 0;
} }
@media (min-width: 768px) { @media (min-width: 768px) {
.displayThemeDesney.comp_2x_b_h_s_e2 { .displayThemeDesney.comp_2x_b_h_s_e2 {
margin-top: 10rem; margin-top: 9.4rem;
} }
} }
.displayThemeDesney.comp_2x_b_h_s_e2 .text_area { .displayThemeDesney.comp_2x_b_h_s_e2 .text_area {
text-align: left; text-align: left;
} }
@media (min-width: 768px) {
.displayThemeDesney.comp_2x_b_h_s_e2 .comp_body .item {
margin-bottom: 0;
}
}
.displayThemeDesney .btn-zoom { .displayThemeDesney .btn-zoom {
display: block; display: block;
position: absolute; position: absolute;

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

File diff suppressed because one or more lines are too long

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

@@ -4377,11 +4377,18 @@
.info { .info {
color: #f0f0f0; color: #f0f0f0;
letter-spacing: -0.032rem; letter-spacing: -0.075rem;
line-height: 1.5; line-height: 1.5;
br { br {
display: none; display: none;
&.br-m {
display: block;
@include tablet {
display: none;
}
}
@include tablet { @include tablet {
display: block; display: block;
@@ -4660,12 +4667,12 @@
width: 100%; width: 100%;
max-width: 192rem; max-width: 192rem;
margin: 0 auto; margin: 0 auto;
padding: 4rem 0 10rem; padding: 4rem 0 7rem;
text-align: center; text-align: center;
background: url(../images/kia/pdp/display_theme_disney/bg_design_m.jpg) no-repeat center top / 100% auto; background: url(../images/kia/pdp/display_theme_disney/bg_design_m.jpg) no-repeat center top / 100% auto;
@include tablet { @include tablet {
padding: 12rem 0 10rem; padding: 12rem 0 0;
background: url(../images/kia/pdp/display_theme_disney/bg_design.jpg) no-repeat center top / 192rem auto; background: url(../images/kia/pdp/display_theme_disney/bg_design.jpg) no-repeat center top / 192rem auto;
} }
@@ -4869,7 +4876,7 @@
content: ""; content: "";
display: block; display: block;
position: absolute; position: absolute;
bottom: -3rem; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
height: 20rem; height: 20rem;
@@ -4975,6 +4982,10 @@
@include tablet { @include tablet {
// padding: 9.6rem 0 0; // padding: 9.6rem 0 0;
} }
.inner {
position: relative;
z-index: 1;
}
.tit-area { .tit-area {
position: relative; position: relative;
@@ -4986,27 +4997,27 @@
box-shadow: 0px 4.4rem 4rem 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 4.4rem 4rem 0px rgba(0, 0, 0, 0.25);
} }
// &:after { &:after {
// content: ""; content: "";
// display: block; display: block;
// position: absolute; position: absolute;
// bottom: 0; bottom: 0;
// left: 0; left: 0;
// width: 100%; width: 100%;
// height: 20rem; height: 20rem;
// background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%); background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.8) 30%, rgba(255, 255, 255, 0.4) 60%, rgba(255, 255, 255, 0) 100%);
// } }
// @include desktopMax { @include desktopMax {
// &::after { &::after {
// display: none; display: none;
// } }
// } }
h3 { h3 {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
height: 4.2rem; height: 3.5rem;
padding: 0 0.8rem; padding: 0.4rem 0.8rem 0;
font-size: 3rem; font-size: 2.4rem;
color: #fff; color: #fff;
font-weight: 600; font-weight: 600;
background-color: #ed1c24; background-color: #ed1c24;
@@ -5034,11 +5045,11 @@
} }
.reasons { .reasons {
padding: 3.6rem 0 6.4rem; padding: 3.6rem 0 4.4rem;
background: linear-gradient(176.68deg, #3f3e3e 23.87%, #060606 97.26%); background: linear-gradient(176.68deg, #3f3e3e 23.87%, #060606 97.26%);
@include tablet { @include tablet {
height: 84.7rem; height: 94rem;
padding: 8rem 2rem; padding: 8rem 2rem;
} }
@@ -5070,7 +5081,7 @@
margin: 0; margin: 0;
padding: 0 2rem 0 7.2rem; padding: 0 2rem 0 7.2rem;
font-size: 1.6rem; font-size: 1.6rem;
background-position: 0 0.5rem; background-position: 0 0;
background-size: 3.1rem auto; background-size: 3.1rem auto;
} }
@@ -5094,7 +5105,8 @@
@include tablet { @include tablet {
padding: 0 2rem 0 7.2rem; padding: 0 2rem 0 7.2rem;
background-position: 0 0.5rem; margin: 0;
background-position: 0 1.2rem;
background-size: 5.1rem auto; background-size: 5.1rem auto;
text-align: left; text-align: left;
} }
@@ -5115,9 +5127,13 @@
&:nth-child(3) { &:nth-child(3) {
p { p {
padding-left: 5.4rem;
margin-left: 2.7rem;
background: url(../images/kia/pdp/display_theme_disney/number3.png) no-repeat 0 0 / 3.6rem auto; background: url(../images/kia/pdp/display_theme_disney/number3.png) no-repeat 0 0 / 3.6rem auto;
@include tablet { @include tablet {
margin: 0;
padding: 0 2rem 0 7.2rem;
background-position: 0 0; background-position: 0 0;
background-size: 4.9rem auto; background-size: 4.9rem auto;
} }
@@ -5207,6 +5223,16 @@
} }
} }
} }
.copyright {
margin-top: 8.2rem;
color: #fff;
font-size: 1.2rem;
text-align: center;
@include tablet {
margin-top: 16rem;
}
}
} }
} }
@@ -5299,15 +5325,22 @@
} }
&.comp_2x_b_h_s_e2 { &.comp_2x_b_h_s_e2 {
margin-top: 6rem; margin-top: 0;
@include tablet { @include tablet {
margin-top: 10rem; margin-top: 9.4rem;
} }
.text_area { .text_area {
text-align: left; text-align: left;
} }
.comp_body {
.item {
@include tablet {
margin-bottom: 0;
}
}
}
} }
.btn-zoom { .btn-zoom {

BIN
kr/assets/images/kia/contents/display_theme1_4.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 31 KiB

After

Width:  |  Height:  |  Size: 31 KiB

BIN
kr/assets/images/kia/contents/display_theme1_7.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 121 KiB

After

Width:  |  Height:  |  Size: 117 KiB

BIN
kr/assets/images/kia/contents/display_theme2_4.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 87 KiB

After

Width:  |  Height:  |  Size: 87 KiB

BIN
kr/assets/images/kia/contents/display_theme2_5.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 91 KiB

After

Width:  |  Height:  |  Size: 91 KiB

BIN
kr/assets/images/kia/contents/display_theme2_6.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 92 KiB

After

Width:  |  Height:  |  Size: 92 KiB

BIN
kr/assets/images/kia/contents/imgCaseInfo.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 179 KiB

After

Width:  |  Height:  |  Size: 185 KiB

BIN
kr/assets/images/kia/pdp/display_theme_disney/Marvel Avengers_Goodbye.mov Normal file
View File

Binary file not shown.

BIN
kr/assets/images/kia/pdp/display_theme_disney/Marvel Avengers_Welcome.mov Normal file
View File

Binary file not shown.

52
kr/product/pdp_display_theme_disney.html
View File

@@ -34,7 +34,7 @@
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v2"></script> <script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v2"></script>
<!--상품상세 페이지 css 분리--> <!--상품상세 페이지 css 분리-->
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" /> <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
<link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v81552" type="text/css" /> <link rel="stylesheet" charset="UTF-8" href="../assets/css/pdp_detail.css?v81553" type="text/css" />
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" /> <link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" /> <link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" /> <link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
@@ -244,14 +244,14 @@
<div class="infoStickyInner"> <div class="infoStickyInner">
<div class="stickyLeft"> <div class="stickyLeft">
<p> <p>
<strong>KBO 디스플레이 테마</strong> <strong>마블 어벤져스 디스플레이 테마</strong>
<!-- <span>30개 NBA 팀의 개성있는 디스플레이 테마로 분위기 업업~!!!</span> --> <!-- <span>30개 NBA 팀의 개성있는 디스플레이 테마로 분위기 업업~!!!</span> -->
</p> </p>
</div> </div>
<div class="stickyRight"> <div class="stickyRight">
<dl> <dl>
<dt>평생 이용권</dt> <dt>평생 이용</dt>
<dd>₩ 150,000</dd> <dd>₩ 29,900</dd>
</dl> </dl>
</div> </div>
</div> </div>
@@ -379,10 +379,10 @@
<img src="../assets/images/kia/pdp/display_theme_disney/logo_marvel.png" width="89" class="web" alt="MARVEL" /> <img src="../assets/images/kia/pdp/display_theme_disney/logo_marvel.png" width="89" class="web" alt="MARVEL" />
<img src="../assets/images/kia/pdp/display_theme_disney/logo_marvel.png" width="53" class="mobile" alt="MARVEL" /> <img src="../assets/images/kia/pdp/display_theme_disney/logo_marvel.png" width="53" class="mobile" alt="MARVEL" />
</h2> </h2>
<h3 data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">마블 유니버스를 차량에서 경험해 보세요.</h3> <h3 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" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800"> <div class="info" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
기아와 마블 어벤져스의 만남으로, 차량 안에서 펼쳐지는 또 하나의 새로운 이야기.<br /> 기아와 마블 어벤져스의 만남으로, <br class="br-m" />차량 안에서 펼쳐지는 또 하나의 새로운 이야기.<br class="br-m" /><br />
디스플레이 테마와 함께 일상 속 드라이빙에서 색다른 즐거움을 느껴보세요. 디스플레이 테마와 함께 <br class="br-m" />일상 속 드라이빙에서 색다른 즐거움을 느껴보세요.
</div> </div>
</div> </div>
</div> </div>
@@ -452,12 +452,14 @@
<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="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"> <div class="image_area">
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop> <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" /> <source src="../assets/images/kia/pdp/display_theme_disney/Marvel Avengers_Welcome.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다! 이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video> </video>
</div> </div>
<div class="image_area"> <div class="image_area">
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop> <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" /> <source src="../assets/images/kia/pdp/display_theme_disney/Marvel Avengers_Goodbye.webm" type="video/webm" />
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다! 이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
</video> </video>
@@ -559,23 +561,8 @@
</div> </div>
</li> </li>
</ol> </ol>
</div>
</div>
</div>
<div class="coming-next"> <div class="copyright">ⓒ 2025 MARVEL</div>
<div class="inner">
<div class="tit-area" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<h3>
What’s <br />Coming Up <br />
<span class="next"
>Next<em class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</em></span
>?
</h3>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_next.png" class="web" alt="What’s Coming Up Next?" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_next_m.png" class="mobile" alt="What’s Coming Up Next?" />
</div> </div>
</div> </div>
</div> </div>
@@ -694,23 +681,8 @@
</div> </div>
</li> </li>
</ol> </ol>
</div>
</div>
</div>
<div class="coming-next"> <div class="copyright">ⓒ 2025 MARVEL</div>
<div class="inner" data-aos="fade-up" data-aos-easing="ease-out-expo" data-aos-once="true" data-aos-duration="800">
<div class="tit-area">
<h3>
What’s <br />Coming Up <br />
<span class="next"
>Next<em class="speech-bubble">Stay tuned for the next <br />Marvel Display Themes!</em>?</span
>
</h3>
</div>
<div class="image_area">
<img src="../assets/images/kia/pdp/display_theme_disney/img_next.png" class="web" alt="What’s Coming Up Next?" />
<img src="../assets/images/kia/pdp/display_theme_disney/img_next_m.png" class="mobile" alt="What’s Coming Up Next?" />
</div> </div>
</div> </div>
</div> </div>
@@ -727,7 +699,7 @@
</div> </div>
<div class="text_area"> <div class="text_area">
<h5>ccNC 차량에서 선택적 구매 가능</h5> <h5>ccNC 차량에서 선택적 구매 가능</h5>
<p>기아 ccNC 인포테인먼트 플랫폼이 적용된 차량에만 선택 가능합니다.</p> <p>기아 ccNC 인포테인먼트 플랫폼 중 12.3인치 클러스터가 적용된 차량에만 선택 가능합니다.</p>
</div> </div>
</div> </div>
<div class="item"> <div class="item">