디즈니 전용관 작업 중

This commit is contained in:
2025-09-29 22:38:17 +09:00
parent d65206a8d5
commit 963917b1be
13 changed files with 220 additions and 173 deletions

View File

@@ -29,6 +29,11 @@
max-width: 100%;
margin-top: 0;
}
@media (min-width: 768px) {
#promotion .contentWarp {
margin-bottom: 16rem;
}
}
#promotion .promotionHeader {
width: 100%;
aspect-ratio: 360/550;
@@ -36,32 +41,39 @@
}
@media (min-width: 768px) {
#promotion .promotionHeader {
height: 108rem;
height: 95rem;
background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center/auto 100%;
}
}
#promotion .promotionHeader .promotionHeaderInner {
width: 100%;
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
padding-top: 86vw;
}
@media (min-width: 768px) {
#promotion .promotionHeader .promotionHeaderInner {
padding-top: 71.4rem;
padding-top: 76.4rem;
}
}
#promotion .promotionHeader .promotionHeaderInner .pageTitle {
text-align: center;
}
@media (min-width: 768px) {
#promotion .promotionHeader .promotionHeaderInner .pageTitle {
text-align: left;
}
}
#promotion .promotionHeader .promotionHeaderInner .pageTitle h1 {
font-size: 3rem;
font-weight: 600;
color: #fff;
margin-bottom: 1.2rem;
}
@media (min-width: 768px) {
#promotion .promotionHeader .promotionHeaderInner .pageTitle h1 {
font-size: 4.8rem;
margin-bottom: 2.4rem;
}
}
#promotion .promotionHeader .promotionHeaderInner .pageTitle p {
@@ -80,6 +92,7 @@
position: -webkit-sticky;
position: sticky;
top: 0;
width: 100%;
height: 4rem;
padding: 1rem 2rem;
background-color: #fff;
@@ -87,7 +100,6 @@
}
@media (min-width: 768px) {
#promotion .tabNavigation {
width: 100%;
height: 5.4rem;
padding: 0;
}
@@ -103,7 +115,7 @@
}
}
#promotion .tabNavigation .tabNavigationInner {
max-width: 120rem;
max-width: 124rem;
}
@media (min-width: 768px) {
#promotion .tabNavigation .tabNavigationInner {
@@ -181,7 +193,7 @@
position: relative;
}
#promotion .contentSection .contentSectionInner {
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
}
@media (min-width: 768px) {
@@ -194,20 +206,20 @@
}
@media (min-width: 768px) {
#promotion .contentSection .title-area {
margin-bottom: 8rem;
margin-bottom: 6rem;
}
}
#promotion .contentSection h2 {
font-size: 3rem;
font-weight: 600;
color: #05141f;
margin-bottom: 2.4rem;
line-height: 1.5;
margin-bottom: 2.8rem;
line-height: 1.2;
}
@media (min-width: 768px) {
#promotion .contentSection h2 {
font-size: 4.8rem;
margin-bottom: 2.4rem;
margin-bottom: 4.2rem;
}
}
#promotion .contentSection p {
@@ -240,7 +252,7 @@
}
}
#promotion .overview .contentSectionInner {
padding: 4.8rem 2rem 0;
padding: 5.4rem 2rem 0;
}
@media (min-width: 768px) {
#promotion .overview .contentSectionInner {
@@ -258,7 +270,12 @@
}
#promotion .overview .disneySwiperContainer .disneySwiper {
width: 100%;
padding: 2rem 0 0;
padding: 0;
}
@media (min-width: 768px) {
#promotion .overview .disneySwiperContainer .disneySwiper {
padding: 2rem 0 0;
}
}
#promotion .overview .disneySwiperContainer .disneySwiper .swiper-slide {
overflow: hidden;
@@ -312,7 +329,7 @@
transform: scale(1.2);
}
#promotion .available-cars {
padding: 6.4rem 2rem 0;
padding: 7rem 2rem 0;
}
@media (min-width: 768px) {
#promotion .available-cars {
@@ -320,7 +337,7 @@
}
}
#promotion .available-cars .contentSection {
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
}
#promotion .available-cars .contentSection .title-area {
@@ -330,7 +347,7 @@
font-size: 2.4rem;
font-weight: 600;
color: #05141f;
margin-bottom: 0.8rem;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
#promotion .available-cars .contentSection .title-area h3 {
@@ -378,8 +395,7 @@
}
@media (min-width: 768px) {
#promotion .available-cars .noticeBox ul li {
padding-left: 1.4rem;
font-size: 1.4rem;
font-size: 1.6rem;
}
}
#promotion .available-cars .noticeBox ul li:before {
@@ -411,9 +427,9 @@
}
@media (min-width: 768px) {
#promotion .theme-select-guide .contentSection {
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
padding: 12rem 0;
padding: 16.8rem 2rem;
}
}
#promotion .theme-select-guide .contentSection .title-area {
@@ -421,7 +437,12 @@
}
@media (min-width: 768px) {
#promotion .theme-select-guide .contentSection .title-area {
margin-bottom: 6.4rem;
margin-bottom: 5.2rem;
}
}
@media (min-width: 768px) {
#promotion .theme-select-guide .contentSection .title-area h2 {
margin-bottom: 2.3rem;
}
}
#promotion .theme-select-guide .contentSection .title-area h3 {
@@ -638,7 +659,8 @@
background: url("../images/kia/promotion/ico_stay_tuned.svg") no-repeat center/contain;
}
#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned strong {
padding: 0;
padding: 0.2rem 0 0;
line-height: 1;
}
@media (min-width: 768px) {
#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned {
@@ -700,13 +722,13 @@
background: url("../images/kia/promotion/bg_national_pattern.png") no-repeat center top/100% auto;
}
#promotion .more-features .contentSection {
padding: 8rem 0;
padding: 7.9rem 0;
}
@media (min-width: 768px) {
#promotion .more-features .contentSection {
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
padding: 12rem 0 8rem;
padding: 7rem 2rem 12rem;
}
}
#promotion .more-features .contentSection .title-area {
@@ -730,7 +752,7 @@
}
}
#promotion .more-features .features-list {
margin-bottom: 2.4rem;
margin-bottom: 2rem;
}
@media (min-width: 768px) {
#promotion .more-features .features-list {
@@ -813,31 +835,30 @@
border-top: 1px solid #dedede;
}
#promotion .information .contentSection {
padding: 8rem 2rem;
padding: 7.8rem 2rem;
}
@media (min-width: 768px) {
#promotion .information .contentSection {
padding: 12rem 2rem 8rem;
max-width: 120rem;
padding: 11.5rem 2rem 8rem;
max-width: 124rem;
margin: 0 auto;
}
}
#promotion .information .contentSection .title-area {
margin-bottom: 4rem;
margin-bottom: 2.7rem;
}
@media (min-width: 768px) {
#promotion .information .contentSection .title-area {
margin-bottom: 8rem;
margin-bottom: 3.5rem;
}
}
#promotion .information .contentSection .title-area h2 {
margin-bottom: 0.8rem;
font-size: 2.4rem;
font-size: 2rem;
}
@media (min-width: 768px) {
#promotion .information .contentSection .title-area h2 {
margin-bottom: 1.6rem;
font-size: 3.2rem;
font-size: 3rem;
}
}
#promotion .information .info-section {
@@ -859,10 +880,10 @@
}
}
#promotion .information .info-section .item h3 {
font-size: 1.8rem;
font-size: 1.4rem;
font-weight: 600;
color: #05141f;
margin-bottom: 1.5rem;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
#promotion .information .info-section .item h3 {
@@ -920,38 +941,40 @@
#promotion .information .info-section .item ul li.bu-none:before {
display: none;
}
#promotion .infoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
gap: 3rem;
margin-top: 3rem;
#promotion .goto-area {
display: none;
background-color: #f3f3f3;
}
#promotion .infoGrid .infoSection h3 {
font-size: 2rem;
font-weight: 600;
color: #333;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #e5e5e5;
@media (min-width: 768px) {
#promotion .goto-area {
display: block;
}
}
#promotion .infoGrid .infoSection ul {
list-style: none;
padding: 0;
margin: 0;
@media (min-width: 768px) {
#promotion .goto-area .contentSection {
display: flex;
align-items: center;
max-width: 124rem;
height: 10rem;
padding: 0 2rem;
margin: 0 auto;
}
}
#promotion .infoGrid .infoSection ul li {
padding: 0.8rem 0;
font-size: 1.4rem;
color: #666;
border-bottom: 1px solid #f0f0f0;
}
#promotion .infoGrid .infoSection ul li:last-child {
border-bottom: none;
}
#promotion .infoGrid .infoSection ul li:before {
content: "•";
color: #333;
font-weight: bold;
margin-right: 1rem;
@media (min-width: 768px) {
#promotion .goto-area .contentSection .btn-goto {
display: flex;
align-items: center;
font-size: 1.6rem;
font-weight: 600;
color: #05141f;
}
#promotion .goto-area .contentSection .btn-goto:before {
content: "";
display: block;
width: 3.2rem;
height: 1.5rem;
margin-right: 1.3rem;
background: url("../images/kia/promotion/ico_goto.svg") no-repeat center/auto 100%;
}
}
/*# sourceMappingURL=promotion.css.map */

File diff suppressed because one or more lines are too long

View File

@@ -23,6 +23,9 @@ $KiaBlack: #05141f;
.contentWarp {
max-width: 100%;
margin-top: 0;
@include tablet {
margin-bottom: 16rem;
}
}
.promotionHeader {
width: 100%;
@@ -30,25 +33,30 @@ $KiaBlack: #05141f;
aspect-ratio: 360 / 550;
background: url("../images/kia/promotion/kv_promotion_m.jpg") no-repeat center center / cover;
@include tablet {
height: 108rem;
height: 95rem;
background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center / auto 100%;
}
.promotionHeaderInner {
width: 100%;
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
padding-top: 86vw;
@include tablet {
padding-top: 71.4rem;
padding-top: 76.4rem;
}
.pageTitle {
text-align: center;
@include tablet {
text-align: left;
}
h1 {
font-size: 3rem;
font-weight: 600;
color: #fff;
margin-bottom: 1.2rem;
@include tablet {
font-size: 4.8rem;
margin-bottom: 2.4rem;
}
}
p {
@@ -69,12 +77,12 @@ $KiaBlack: #05141f;
overflow-x: auto;
position: sticky;
top: 0;
width: 100%;
height: 4rem;
padding: 1rem 2rem;
background-color: #fff;
z-index: 100;
@include tablet {
width: 100%;
height: 5.4rem;
padding: 0;
&:after {
@@ -89,7 +97,7 @@ $KiaBlack: #05141f;
}
}
.tabNavigationInner {
max-width: 120rem;
max-width: 124rem;
@include tablet {
margin: 0 auto;
}
@@ -157,7 +165,7 @@ $KiaBlack: #05141f;
min-height: 60rem;
position: relative;
.tabContentInner {
// max-width: 120rem;
// max-width: 124rem;
margin: 0 auto;
position: relative;
.tabContent {
@@ -172,7 +180,7 @@ $KiaBlack: #05141f;
.contentSection {
.contentSectionInner {
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
@include tablet {
padding: 0;
@@ -182,7 +190,7 @@ $KiaBlack: #05141f;
.title-area {
margin-bottom: 3.2rem;
@include tablet {
margin-bottom: 8rem;
margin-bottom: 6rem;
}
}
@@ -190,11 +198,11 @@ $KiaBlack: #05141f;
font-size: 3rem;
font-weight: 600;
color: $KiaBlack;
margin-bottom: 2.4rem;
line-height: 1.5;
margin-bottom: 2.8rem;
line-height: 1.2;
@include tablet {
font-size: 4.8rem;
margin-bottom: 2.4rem;
margin-bottom: 4.2rem;
}
}
p {
@@ -224,7 +232,7 @@ $KiaBlack: #05141f;
.overview {
.contentSectionInner {
padding: 4.8rem 2rem 0;
padding: 5.4rem 2rem 0;
@include tablet {
padding: 8rem 2rem 0;
}
@@ -239,7 +247,10 @@ $KiaBlack: #05141f;
.disneySwiper {
width: 100%;
padding: 2rem 0 0;
padding: 0;
@include tablet {
padding: 2rem 0 0;
}
.swiper-slide {
overflow: hidden;
@@ -301,12 +312,12 @@ $KiaBlack: #05141f;
}
.available-cars {
padding: 6.4rem 2rem 0;
padding: 7rem 2rem 0;
@include tablet {
padding: 12rem 2rem 3.2rem;
}
.contentSection {
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
.title-area {
margin-bottom: 3.2rem;
@@ -314,7 +325,7 @@ $KiaBlack: #05141f;
font-size: 2.4rem;
font-weight: 600;
color: $KiaBlack;
margin-bottom: 0.8rem;
margin-bottom: 1rem;
@include tablet {
font-size: 3.2rem;
margin-bottom: 1.6rem;
@@ -358,8 +369,7 @@ $KiaBlack: #05141f;
color: $KiaBlack;
line-height: 1.5;
@include tablet {
padding-left: 1.4rem;
font-size: 1.4rem;
font-size: 1.6rem;
}
&:before {
@@ -391,14 +401,19 @@ $KiaBlack: #05141f;
.contentSection {
padding: 8rem 2rem;
@include tablet {
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
padding: 12rem 0;
padding: 16.8rem 2rem;
}
.title-area {
margin-bottom: 6.4rem;
@include tablet {
margin-bottom: 6.4rem;
margin-bottom: 5.2rem;
}
h2 {
@include tablet {
margin-bottom: 2.3rem;
}
}
h3 {
font-size: 1.8rem;
@@ -607,7 +622,8 @@ $KiaBlack: #05141f;
background: url("../images/kia/promotion/ico_stay_tuned.svg") no-repeat center / contain;
}
strong {
padding: 0;
padding: 0.2rem 0 0;
line-height: 1;
}
@include tablet {
display: block;
@@ -686,11 +702,11 @@ $KiaBlack: #05141f;
// More Features 탭 스타일
.more-features {
.contentSection {
padding: 8rem 0;
padding: 7.9rem 0;
@include tablet {
max-width: 120rem;
max-width: 124rem;
margin: 0 auto;
padding: 12rem 0 8rem;
padding: 7rem 2rem 12rem;
}
.title-area {
padding: 0 2rem;
@@ -710,7 +726,7 @@ $KiaBlack: #05141f;
}
}
.features-list {
margin-bottom: 2.4rem;
margin-bottom: 2rem;
@include tablet {
margin-bottom: 8rem;
}
@@ -788,23 +804,22 @@ $KiaBlack: #05141f;
.information {
border-top: 1px solid #dedede;
.contentSection {
padding: 8rem 2rem;
padding: 7.8rem 2rem;
@include tablet {
padding: 12rem 2rem 8rem;
max-width: 120rem;
padding: 11.5rem 2rem 8rem;
max-width: 124rem;
margin: 0 auto;
}
.title-area {
margin-bottom: 4rem;
margin-bottom: 2.7rem;
@include tablet {
margin-bottom: 8rem;
margin-bottom: 3.5rem;
}
h2 {
margin-bottom: 0.8rem;
font-size: 2.4rem;
font-size: 2rem;
@include tablet {
margin-bottom: 1.6rem;
font-size: 3.2rem;
font-size: 3rem;
}
}
}
@@ -824,10 +839,10 @@ $KiaBlack: #05141f;
}
h3 {
font-size: 1.8rem;
font-size: 1.4rem;
font-weight: 600;
color: $KiaBlack;
margin-bottom: 1.5rem;
margin-bottom: 1rem;
@include tablet {
flex: 0 0 auto;
@@ -892,38 +907,36 @@ $KiaBlack: #05141f;
}
}
// Information 탭 스타일
.infoGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
gap: 3rem;
margin-top: 3rem;
.infoSection {
h3 {
font-size: 2rem;
font-weight: 600;
color: #333;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 2px solid #e5e5e5;
.goto-area {
display: none;
background-color: #f3f3f3;
@include tablet {
display: block;
}
.contentSection {
@include tablet {
display: flex;
align-items: center;
max-width: 124rem;
height: 10rem;
padding: 0 2rem;
margin: 0 auto;
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
padding: 0.8rem 0;
font-size: 1.4rem;
color: #666;
border-bottom: 1px solid #f0f0f0;
&:last-child {
border-bottom: none;
}
.btn-goto {
@include tablet {
display: flex;
align-items: center;
font-size: 1.6rem;
font-weight: 600;
color: $KiaBlack;
&:before {
content: "";
color: #333;
font-weight: bold;
margin-right: 1rem;
content: "";
display: block;
width: 3.2rem;
height: 1.5rem;
margin-right: 1.3rem;
background: url("../images/kia/promotion/ico_goto.svg") no-repeat center / auto 100%;
}
}
}

View File

@@ -0,0 +1,4 @@
<svg width="33" height="16" viewBox="0 0 33 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M33 7.87988L0.999999 7.87988" stroke="black"/>
<path d="M9.23438 15.3799L1.0058 7.87988L9.23438 0.379883" stroke="black"/>
</svg>

After

Width:  |  Height:  |  Size: 235 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 100 KiB

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 193 KiB

After

Width:  |  Height:  |  Size: 67 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 193 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 873 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

View File

@@ -460,6 +460,8 @@
<div class="noticeBox">
<h4>Notice</h4>
<ul>
<li>Availabe after OTA updates : EV6, EV9, Sorento, Carnival, K5, K8</li>
<li>2026 The New Sorento is available for purchase regardless OTA updates.</li>
<li>It can be purchased only for users of the Kia Connect service.</li>
<li>It is only available for vehicles with a 12.3-inch cluster among the ccNC infotainment platforms.</li>
<li>Purchase availability can be found on the detailed page of each product.</li>
@@ -789,6 +791,12 @@
</div>
<!--//content-warp-->
<div class="goto-area">
<div class="contentSection">
<a href="/kr/info/registration-guide" class="btn-goto">Go to the list</a>
</div>
</div>
<!--//footer-->
<div class="floating_menu">
<a href="/kr/service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문" /></a>
@@ -1002,39 +1010,7 @@
$(document).ready(function () {
// Disney 스와이퍼 초기화
var disneySwiper = new Swiper(".disneySwiper", {
slidesPerView: 4.2,
spaceBetween: 24,
loop: true,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
breakpoints: {
640: {
slidesPerView: 1,
spaceBetween: 0,
},
768: {
slidesPerView: 3,
spaceBetween: 24,
},
1024: {
slidesPerView: 4.5,
spaceBetween: 24,
},
},
});
var disneyFeaturesSwiper = new Swiper(".features-list-swiper", {
slidesPerView: 2.15,
slidesPerView: "auto",
spaceBetween: 16,
loop: true,
autoplay: {
@@ -1049,15 +1025,46 @@
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
breakpoints: {
768: {
slidesPerView: 3,
},
1024: {
slidesPerView: 4,
spaceBetween: 16,
},
// breakpoints: {
// 640: {
// slidesPerView: 3,
// spaceBetween: 16,
// },
// 768: {
// slidesPerView: 3,
// spaceBetween: 24,
// },
// 1024: {
// slidesPerView: 4.5,
// spaceBetween: 24,
// },
// },
});
var disneyFeaturesSwiper = new Swiper(".features-list-swiper", {
slidesPerView: "auto",
spaceBetween: 16,
loop: true,
autoplay: {
delay: 1500,
disableOnInteraction: false,
},
// pagination: {
// el: ".swiper-pagination",
// clickable: true,
// },
// navigation: {
// nextEl: ".swiper-button-next",
// prevEl: ".swiper-button-prev",
// },
// breakpoints: {
// 768: {
// slidesPerView: 3,
// },
// 1024: {
// slidesPerView: 4,
// },
// },
});
// 탭 클릭 이벤트