diff --git a/kr/assets/css/promotion.css b/kr/assets/css/promotion.css index 7dc84f1..4a28459 100644 --- a/kr/assets/css/promotion.css +++ b/kr/assets/css/promotion.css @@ -31,66 +31,137 @@ } #promotion .promotionHeader { width: 100%; - height: 108rem; - background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center/auto 100%; + aspect-ratio: 360/550; + background: url("../images/kia/promotion/kv_promotion_m.jpg") no-repeat center center/cover; +} +@media (min-width: 768px) { + #promotion .promotionHeader { + height: 108rem; + background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center/auto 100%; + } } #promotion .promotionHeader .promotionHeaderInner { width: 100%; max-width: 120rem; margin: 0 auto; - padding-top: 71.4rem; + padding-top: 86vw; +} +@media (min-width: 768px) { + #promotion .promotionHeader .promotionHeaderInner { + padding-top: 71.4rem; + } +} +#promotion .promotionHeader .promotionHeaderInner .pageTitle { + text-align: center; } #promotion .promotionHeader .promotionHeaderInner .pageTitle h1 { - font-size: 4.8rem; + font-size: 3rem; font-weight: 600; color: #fff; } +@media (min-width: 768px) { + #promotion .promotionHeader .promotionHeaderInner .pageTitle h1 { + font-size: 4.8rem; + } +} #promotion .promotionHeader .promotionHeaderInner .pageTitle p { - font-size: 1.6rem; + font-size: 1.4rem; font-weight: 400; color: #fff; } +@media (min-width: 768px) { + #promotion .promotionHeader .promotionHeaderInner .pageTitle p { + font-size: 1.6rem; + } +} #promotion .tabNavigation { - width: 100%; - background: #fff; - border-bottom: 1px solid #e5e5e5; + overflow: hidden; + overflow-x: auto; position: -webkit-sticky; position: sticky; top: 0; + height: 4rem; + padding: 1rem 2rem; + background-color: #fff; z-index: 100; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); +} +@media (min-width: 768px) { + #promotion .tabNavigation { + width: 100%; + height: 5.4rem; + padding: 0; + } + #promotion .tabNavigation:after { + content: ""; + display: block; + width: 100%; + height: 2px; + position: absolute; + bottom: 0; + left: 0; + background-color: #e7e9ec; + } } #promotion .tabNavigation .tabNavigationInner { max-width: 120rem; - margin: 0 auto; +} +@media (min-width: 768px) { + #promotion .tabNavigation .tabNavigationInner { + margin: 0 auto; + } } #promotion .tabNavigation .tabNavigationInner .tabList { display: flex; list-style: none; margin: 0; padding: 0; + gap: 1.4rem; } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem { - flex: 1; + position: relative; +} +#promotion .tabNavigation .tabNavigationInner .tabList .tabItem:after { + content: ""; + display: block; + width: 100%; + height: 2px; + position: absolute; + bottom: 0; + left: 0; + z-index: 10; + background-color: transparent; } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink { - display: block; - padding: 2rem 1.5rem; + display: flex; + align-items: center; + justify-content: center; + height: 3rem; text-decoration: none; color: #666; font-size: 1.6rem; font-weight: 400; text-align: center; - border-bottom: 3px solid transparent; - transition: all 0.3s ease; + white-space: nowrap; +} +@media (min-width: 768px) { + #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink { + height: 5.4rem; + padding: 0 1.6rem; + } } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink:hover { - color: #333; + color: #05141f; +} +#promotion .tabNavigation .tabNavigationInner .tabList .tabItem:last-child { + padding-right: 2rem; } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink { - color: #333; + color: #05141f; font-weight: 600; - border-bottom-color: #333; + border-bottom-color: #05141f; +} +#promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active:after { + background-color: #05141f; } #promotion .tabContentArea { width: 100%; @@ -103,205 +174,751 @@ position: relative; } #promotion .tabContentArea .tabContentInner .tabContent { - min-height: 60rem; display: block; opacity: 1; visibility: visible; transform: none; position: relative; - margin-bottom: 4rem; } -#promotion .tabContentArea .tabContentInner .tabContent .contentSection h2 { - font-size: 3.2rem; - font-weight: 600; - color: #333; - margin-bottom: 2rem; -} -#promotion .tabContentArea .tabContentInner .tabContent .contentSection p { - font-size: 1.6rem; - color: #666; - line-height: 1.6; - margin-bottom: 3rem; -} -#promotion .contentSectionInner { +#promotion .contentSection .contentSectionInner { max-width: 120rem; margin: 0 auto; } -#promotion .disneySwiperContainer { +@media (min-width: 768px) { + #promotion .contentSection .contentSectionInner { + padding: 0; + } +} +#promotion .contentSection .title-area { + margin-bottom: 3.2rem; +} +@media (min-width: 768px) { + #promotion .contentSection .title-area { + margin-bottom: 8rem; + } +} +#promotion .contentSection h2 { + font-size: 3rem; + font-weight: 600; + color: #05141f; + margin-bottom: 2.4rem; + line-height: 1.5; +} +@media (min-width: 768px) { + #promotion .contentSection h2 { + font-size: 4.8rem; + margin-bottom: 2.4rem; + } +} +#promotion .contentSection p { + font-size: 1.4rem; + color: #05141f; + line-height: 1.5; +} +@media (min-width: 768px) { + #promotion .contentSection p { + font-size: 1.6rem; + } +} +#promotion .contentSection img { + max-width: 100%; +} +#promotion .contentSection .img-m { + display: block; +} +@media (min-width: 768px) { + #promotion .contentSection .img-m { + display: none; + } +} +#promotion .contentSection .img-pc { + display: none; +} +@media (min-width: 768px) { + #promotion .contentSection .img-pc { + display: block; + } +} +#promotion .overview .contentSectionInner { + padding: 4.8rem 2rem 0; +} +@media (min-width: 768px) { + #promotion .overview .contentSectionInner { + padding: 8rem 2rem 0; + } +} +#promotion .overview .disneySwiperContainer { width: 100%; overflow: hidden; - margin-top: 4rem; - padding: 2rem 0; } -#promotion .disneySwiperContainer .disneySwiper { +@media (min-width: 768px) { + #promotion .overview .disneySwiperContainer { + padding: 0 0 8rem; + } +} +#promotion .overview .disneySwiperContainer .disneySwiper { width: 100%; - padding: 2rem 0 4rem; + padding: 2rem 0 0; } -#promotion .disneySwiperContainer .disneySwiper .swiper-slide { - width: 58rem !important; - height: 36rem; +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-slide { + overflow: hidden; + width: 25.6rem !important; + height: 16rem; flex-shrink: 0; + border-radius: 0.8rem; } -#promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard { - border-radius: 2rem; - padding: 3rem 2rem; - text-align: center; - color: #fff; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - transition: all 0.3s ease; +@media (min-width: 768px) { + #promotion .overview .disneySwiperContainer .disneySwiper .swiper-slide { + width: 58rem !important; + height: 36rem; + border-radius: 1.6rem; + } } -#promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard h3 { - font-size: 2.2rem; - font-weight: 700; - margin-bottom: 1rem; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-slide img { + max-width: 100%; } -#promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard p { - font-size: 1.4rem; - opacity: 0.9; - line-height: 1.4; - margin: 0; -} -#promotion .disneySwiperContainer .disneySwiper .swiper-button-next, -#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev { +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-next, +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-prev { display: none; - color: #333; + color: #05141f; background: rgba(255, 255, 255, 0.9); width: 5rem; height: 5rem; border-radius: 50%; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } -#promotion .disneySwiperContainer .disneySwiper .swiper-button-next:after, -#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev:after { +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-next:after, +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-prev:after { font-size: 1.8rem; font-weight: bold; } -#promotion .disneySwiperContainer .disneySwiper .swiper-button-next:hover, -#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev:hover { +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-next:hover, +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-prev:hover { background: #fff; transform: scale(1.1); } -#promotion .disneySwiperContainer .disneySwiper .swiper-pagination { +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-pagination { bottom: 0; } -#promotion .disneySwiperContainer .disneySwiper .swiper-pagination .swiper-pagination-bullet { +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-pagination .swiper-pagination-bullet { background: #ddd; opacity: 1; width: 1.2rem; height: 1.2rem; margin: 0 0.5rem; } -#promotion .disneySwiperContainer .disneySwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { - background: #333; +#promotion .overview .disneySwiperContainer .disneySwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { + background: #05141f; transform: scale(1.2); } -#promotion .noticeBox { - background: #fff; - border-radius: 1rem; - padding: 2rem; - margin: 3rem 0; - border: 1px solid #e5e5e5; +#promotion .available-cars { + padding: 6.4rem 2rem 0; } -#promotion .noticeBox h3 { - font-size: 1.8rem; +@media (min-width: 768px) { + #promotion .available-cars { + padding: 12rem 2rem 3.2rem; + } +} +#promotion .available-cars .contentSection { + max-width: 120rem; + margin: 0 auto; +} +#promotion .available-cars .contentSection .title-area { + margin-bottom: 3.2rem; +} +#promotion .available-cars .contentSection .title-area h3 { + font-size: 2.4rem; font-weight: 600; - color: #333; - margin-bottom: 1.5rem; - padding-bottom: 1rem; - border-bottom: 1px solid #e5e5e5; + color: #05141f; + margin-bottom: 0.8rem; } -#promotion .noticeBox ul { +@media (min-width: 768px) { + #promotion .available-cars .contentSection .title-area h3 { + font-size: 3.2rem; + margin-bottom: 1.6rem; + } +} +#promotion .available-cars .noticeBox { + background: #fff; + padding: 1.6rem; + margin: 3rem 0 0; + border: 1px solid #dedede; + border-radius: 0.8rem; +} +@media (min-width: 768px) { + #promotion .available-cars .noticeBox { + padding: 2rem; + border-radius: 1rem; + } +} +#promotion .available-cars .noticeBox h4 { + font-size: 1.2rem; + font-weight: 600; + color: #05141f; + margin-bottom: 1.2rem; + padding-bottom: 1.2rem; + border-bottom: 1px solid #dedede; +} +@media (min-width: 768px) { + #promotion .available-cars .noticeBox h4 { + font-size: 1.4rem; + } +} +#promotion .available-cars .noticeBox ul { list-style: none; padding: 0; margin: 0; } -#promotion .noticeBox ul li { +#promotion .available-cars .noticeBox ul li { position: relative; - padding-left: 2rem; - margin-bottom: 1rem; - font-size: 1.4rem; - color: #666; + padding-left: 1rem; + font-size: 1.2rem; + color: #05141f; line-height: 1.5; } -#promotion .noticeBox ul li:before { +@media (min-width: 768px) { + #promotion .available-cars .noticeBox ul li { + padding-left: 1.4rem; + font-size: 1.4rem; + } +} +#promotion .available-cars .noticeBox ul li:before { content: "•"; position: absolute; + top: 0.35rem; left: 0; - color: #333; - font-weight: bold; + font-size: 0.8rem; + color: #05141f; } -#promotion .noticeBox ul li:last-child { +@media (min-width: 768px) { + #promotion .available-cars .noticeBox ul li:before { + top: 0.4rem; + } +} +#promotion .available-cars .noticeBox ul li:last-child { margin-bottom: 0; } -#promotion .carList { - margin-top: 3rem; +#promotion .theme-select-guide { + background: linear-gradient(180deg, #ffffff 0%, #e8eaeb 60%); } -#promotion .guideSteps { - margin-top: 3rem; +@media (min-width: 768px) { + #promotion .theme-select-guide { + background: #fff; + } } -#promotion .guideSteps .stepItem { +#promotion .theme-select-guide .contentSection { + padding: 8rem 2rem; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .contentSection { + max-width: 120rem; + margin: 0 auto; + padding: 12rem 0; + } +} +#promotion .theme-select-guide .contentSection .title-area { + margin-bottom: 6.4rem; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .contentSection .title-area { + margin-bottom: 6.4rem; + } +} +#promotion .theme-select-guide .contentSection .title-area h3 { + font-size: 1.8rem; + margin-bottom: 0.8rem; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .contentSection .title-area h3 { + font-size: 2.4rem; + } +} +#promotion .theme-select-guide .guides-wrap { + margin-top: 4rem; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap { + margin-top: 0; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section { + position: relative; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section { + display: flex; + width: 100%; + padding-top: 5.8rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section h4 { + display: none; + position: absolute; + left: 0; + top: 0; + font-size: 3.2rem; + font-weight: 600; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section h4 { + display: block; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section + .guides-section { + margin-top: 2.4rem; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section + .guides-section { + margin-top: 8rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-header { display: flex; - align-items: flex-start; - margin-bottom: 3rem; + align-items: flex-end; + justify-content: space-between; + overflow: hidden; + position: relative; + height: 10rem; + padding: 1.6rem; + background: url("../images/kia/promotion/bg_disney_pattern.png") no-repeat center top/100% auto; + border-radius: 0.8rem 0.8rem 0 0; } -#promotion .guideSteps .stepItem .stepNumber { - width: 4rem; - height: 4rem; - background: #333; +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-header { + flex: 0 0 auto; + width: 46.8rem; + height: 27.6rem; + padding: 2rem; + border-radius: 0.8rem 0 0 0.8rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-header .logo { + flex: 1; + height: 3rem; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-header .logo { + height: 4rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-header .logo img { + max-height: 100%; +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-header .btn-viewAll { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: 9.9rem; + height: 2.8rem; + padding: 0.3rem 0 0; + font-size: 1.2rem; + font-weight: 600; color: #fff; - border-radius: 50%; + border: 1px solid #fff; + border-radius: 0.4rem; + line-height: 1; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-header .btn-viewAll { + width: 12.3rem; + height: 4rem; + padding: 0 2rem; + font-size: 1.4rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-header .btn-viewAll .arrow-icon { + width: 1.6rem; + height: 1.6rem; + margin-left: 0.6rem; + -webkit-mask: url("../images/kia/promotion/ico_arrow_forward.svg") no-repeat center/contain; + mask: url("../images/kia/promotion/ico_arrow_forward.svg") no-repeat center/contain; + background-color: #fff; +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-header .copyright { + position: absolute; + top: 1.6rem; + right: 1.6rem; + font-size: 1rem; + color: #d1d1d1; +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + gap: 1.6rem; + padding: 1.6rem; + background-color: #fff; + border-radius: 0 0 0.8rem 0.8rem; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content { + flex-direction: row; + padding: 2rem; + background-color: #f2f4f6; + border: 1px solid #dedede; + border-radius: 0 0.8rem 0.8rem 0; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item { + overflow: hidden; + display: flex; + align-items: center; + background-color: #fff; + border-radius: 0.6rem; + box-shadow: 0px 0px 8.33px 0px rgba(0, 0, 0, 0.1215686275); +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item { + flex-direction: column; + width: 22rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item .logo { + width: 7.2rem; + height: 7.2rem; +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item .logo img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item .logo { + width: 22rem; + height: 12.6rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item strong { + display: flex; + align-items: center; + padding: 1.2rem; + letter-spacing: -0.075em; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item strong { + width: 100%; + padding: 1.6rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item.stay-tuned-item { + box-shadow: none; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item.stay-tuned-item { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 22rem; + background: none; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned { display: flex; align-items: center; justify-content: center; + width: 100%; + height: 4rem; + padding: 1.2rem; + font-size: 1.2rem; + font-weight: 400; + color: #05141f; + background-color: #f2f4f6; + border-radius: 0.6rem; + letter-spacing: -0.05em; +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .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; +} +#promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned strong { + padding: 0; +} +@media (min-width: 768px) { + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned { + display: block; + width: auto; + height: auto; + padding: 0; + margin-bottom: 0; + font-size: 1.2rem; + color: #b2b8bd; + } + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned span { + position: relative; + width: 7.2rem; + height: 1.6rem; + margin: 0 auto; + margin-bottom: 0.5rem; + background: none; + border: 1px solid #b2b8bd; + border-radius: 0.8rem; + } + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .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; + } + #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned strong { + padding: 0; + font-size: 1.6rem; + } +} +#promotion .theme-select-guide .guides-wrap .guides-section.disney-pixar-theme .guides-header { + background: url("../images/kia/promotion/bg_disney_pixar_pattern.png") no-repeat center top/100% auto; +} +#promotion .theme-select-guide .guides-wrap .guides-section.disney-pixar-theme .guides-header .copyright { + color: #666; +} +#promotion .theme-select-guide .guides-wrap .guides-section.disney-pixar-theme .guides-header .btn-viewAll { + color: #05141f; + border-color: #05141f; +} +#promotion .theme-select-guide .guides-wrap .guides-section.disney-pixar-theme .guides-header .btn-viewAll .arrow-icon { + background-color: #05141f; +} +#promotion .theme-select-guide .guides-wrap .guides-section.marvel-theme .guides-header { + background: url("../images/kia/promotion/bg_marvel_pattern.png") no-repeat center top/100% auto; +} +#promotion .theme-select-guide .guides-wrap .guides-section.starwars-theme .guides-header { + background: url("../images/kia/promotion/bg_starwars_pattern.png") no-repeat center top/100% auto; +} +#promotion .theme-select-guide .guides-wrap .guides-section.national-geographic-theme .guides-header { + background: url("../images/kia/promotion/bg_national_pattern.png") no-repeat center top/100% auto; +} +#promotion .more-features .contentSection { + padding: 8rem 0; +} +@media (min-width: 768px) { + #promotion .more-features .contentSection { + max-width: 120rem; + margin: 0 auto; + padding: 12rem 0 8rem; + } +} +#promotion .more-features .contentSection .title-area { + padding: 0 2rem; + margin-bottom: 2.4rem; +} +@media (min-width: 768px) { + #promotion .more-features .contentSection .title-area { + margin-bottom: 8rem; + padding: 0; + } +} +#promotion .more-features .contentSection .title-area h2 { + margin-bottom: 0.8rem; + font-size: 2.4rem; +} +@media (min-width: 768px) { + #promotion .more-features .contentSection .title-area h2 { + margin-bottom: 2.4rem; + font-size: 4.8rem; + } +} +#promotion .more-features .features-list { + margin-bottom: 2.4rem; +} +@media (min-width: 768px) { + #promotion .more-features .features-list { + margin-bottom: 8rem; + } +} +#promotion .more-features .features-list .swiper { + padding-left: 2rem; +} +@media (min-width: 768px) { + #promotion .more-features .features-list .swiper { + padding-left: 0; + } +} +#promotion .more-features .features-list .swiper-slide { + width: 14.6rem !important; +} +@media (min-width: 768px) { + #promotion .more-features .features-list .swiper-slide { + width: 28.8rem !important; + } +} +#promotion .more-features .features-list .feature-card .img { + overflow: hidden; + width: 14.6rem; + height: 14.6rem; + margin-bottom: 1.2rem; + border-radius: 0.8rem; +} +#promotion .more-features .features-list .feature-card .img img { + width: 100%; + height: 100%; + -o-object-fit: cover; + object-fit: cover; +} +@media (min-width: 768px) { + #promotion .more-features .features-list .feature-card .img { + width: 28.8rem; + height: 18rem; + margin-bottom: 2.2rem; + border-radius: 1.2rem; + } +} +#promotion .more-features .features-list .feature-card .txt strong { + display: block; + margin-bottom: 0.6rem; + font-size: 1.6rem; +} +@media (min-width: 768px) { + #promotion .more-features .features-list .feature-card .txt strong { + font-size: 2rem; + } +} +#promotion .more-features .features-list .feature-card .txt p { + font-size: 1.4rem; +} +@media (min-width: 768px) { + #promotion .more-features .features-list .feature-card .txt p { + font-size: 1.6rem; + } +} +#promotion .more-features .btn-area { + padding: 0 2rem; +} +@media (min-width: 768px) { + #promotion .more-features .btn-area { + padding: 0; + } +} +#promotion .more-features .oneButton a p { + font-size: 1.6rem; +} +@media (min-width: 768px) { + #promotion .more-features .oneButton { + width: 25rem; + margin: 0 auto; + } +} +#promotion .information { + border-top: 1px solid #dedede; +} +#promotion .information .contentSection { + padding: 8rem 2rem; +} +@media (min-width: 768px) { + #promotion .information .contentSection { + padding: 12rem 2rem 8rem; + max-width: 120rem; + margin: 0 auto; + } +} +#promotion .information .contentSection .title-area { + margin-bottom: 4rem; +} +@media (min-width: 768px) { + #promotion .information .contentSection .title-area { + margin-bottom: 8rem; + } +} +#promotion .information .contentSection .title-area h2 { + margin-bottom: 0.8rem; + font-size: 2.4rem; +} +@media (min-width: 768px) { + #promotion .information .contentSection .title-area h2 { + margin-bottom: 1.6rem; + font-size: 3.2rem; + } +} +#promotion .information .info-section { + border-top: 1px solid #999; +} +@media (min-width: 768px) { + #promotion .information .info-section { + border-top-color: #dedede; + } +} +#promotion .information .info-section .item { + padding: 2rem 0; + border-bottom: 1px solid #dedede; +} +@media (min-width: 768px) { + #promotion .information .info-section .item { + display: flex; + align-items: center; + } +} +#promotion .information .info-section .item h3 { font-size: 1.8rem; font-weight: 600; - margin-right: 2rem; - flex-shrink: 0; + color: #05141f; + margin-bottom: 1.5rem; } -#promotion .guideSteps .stepItem .stepContent { - flex: 1; +@media (min-width: 768px) { + #promotion .information .info-section .item h3 { + flex: 0 0 auto; + position: relative; + width: 16rem; + margin-right: 2rem; + margin-bottom: 0; + font-size: 1.6rem; + } + #promotion .information .info-section .item h3:after { + content: ""; + display: block; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + width: 0.1rem; + height: 1.5rem; + background-color: #dedede; + } } -#promotion .guideSteps .stepItem .stepContent h3 { - font-size: 2rem; - font-weight: 600; - color: #333; - margin-bottom: 1rem; -} -#promotion .guideSteps .stepItem .stepContent p { - font-size: 1.4rem; - color: #666; - line-height: 1.5; +#promotion .information .info-section .item ul { + list-style: none; + padding: 0; margin: 0; } -#promotion .featuresList { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); - gap: 2rem; - margin-top: 3rem; -} -#promotion .featuresList .featureCard { - padding: 2rem; - background: #fff; - border: 1px solid #e5e5e5; - border-radius: 1rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); -} -#promotion .featuresList .featureCard h3 { - font-size: 1.8rem; - font-weight: 600; - color: #333; - margin-bottom: 1rem; -} -#promotion .featuresList .featureCard p { +#promotion .information .info-section .item ul li { + position: relative; + padding-left: 1.2rem; font-size: 1.4rem; - color: #666; - line-height: 1.5; - margin: 0; + color: #676767; + line-height: 1.6; +} +@media (min-width: 768px) { + #promotion .information .info-section .item ul li { + padding-left: 1rem; + font-size: 1.4rem; + } +} +#promotion .information .info-section .item ul li:before { + content: "•"; + position: absolute; + top: 0.5rem; + left: 0; + color: #676767; + font-weight: bold; + font-size: 0.8rem; +} +@media (min-width: 768px) { + #promotion .information .info-section .item ul li:before { + top: 0.6rem; + } +} +#promotion .information .info-section .item ul li.bu-none:before { + display: none; } #promotion .infoGrid { display: grid; @@ -337,83 +954,4 @@ font-weight: bold; margin-right: 1rem; } -@media (max-width: 768px) { - #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink { - padding: 1.5rem 1rem; - font-size: 1.4rem; - } - #promotion .tabContentArea { - width: 100%; - } - #promotion .tabContentArea .tabContentInner .tabContent .contentSection h2 { - font-size: 2.4rem; - } - #promotion .disneySwiperContainer { - margin-top: 3rem; - padding: 1rem 0; - } - #promotion .disneySwiperContainer .disneySwiper { - padding: 1rem 0 3rem; - } - #promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard { - padding: 2rem 1.5rem; - } - #promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard h3 { - font-size: 1.8rem; - margin-bottom: 0.8rem; - } - #promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard p { - font-size: 1.2rem; - } - #promotion .disneySwiperContainer .disneySwiper .swiper-button-next, -#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev { - width: 4rem; - height: 4rem; - } - #promotion .disneySwiperContainer .disneySwiper .swiper-button-next:after, -#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev:after { - font-size: 1.4rem; - } - #promotion .featureGrid, -#promotion .carList, -#promotion .featuresList, -#promotion .infoGrid { - grid-template-columns: 1fr; - gap: 2rem; - } - #promotion .noticeBox { - padding: 1.5rem; - margin: 2rem 0; - } - #promotion .noticeBox h3 { - font-size: 1.6rem; - } - #promotion .noticeBox ul li { - font-size: 1.3rem; - padding-left: 1.5rem; - } - #promotion .carList .carItem { - flex-direction: column; - text-align: center; - padding: 1.5rem; - } - #promotion .carList .carItem .carImage { - width: 6rem; - height: 6rem; - } - #promotion .carList .carItem .carInfo h3 { - font-size: 1.6rem; - } - #promotion .carList .carItem .carInfo p { - font-size: 1.3rem; - } - #promotion .guideSteps .stepItem { - flex-direction: column; - text-align: center; - } - #promotion .guideSteps .stepItem .stepNumber { - margin-right: 0; - margin-bottom: 1rem; - } -} /*# sourceMappingURL=promotion.css.map */ \ No newline at end of file diff --git a/kr/assets/css/promotion.css.map b/kr/assets/css/promotion.css.map index 6166969..cb1a150 100644 --- a/kr/assets/css/promotion.css.map +++ b/kr/assets/css/promotion.css.map @@ -1 +1 @@ -{"version":3,"sources":["promotion.css","_utils.scss","promotion.scss"],"names":[],"mappings":"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","file":"promotion.css"} \ No newline at end of file +{"version":3,"sources":["promotion.css","_utils.scss","promotion.scss"],"names":[],"mappings":"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","file":"promotion.css"} \ No newline at end of file diff --git a/kr/assets/css/promotion.scss b/kr/assets/css/promotion.scss index 5e7e6c2..6a29972 100644 --- a/kr/assets/css/promotion.scss +++ b/kr/assets/css/promotion.scss @@ -2,6 +2,8 @@ @import "utils.scss"; /*변수파일 import*/ +$KiaBlack: #05141f; + // 부드러운 스크롤 애니메이션을 위한 기본 설정 // html { // scroll-behavior: smooth; @@ -24,23 +26,38 @@ } .promotionHeader { width: 100%; - height: 108rem; - background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center / auto 100%; + // height: 55rem; + aspect-ratio: 360 / 550; + background: url("../images/kia/promotion/kv_promotion_m.jpg") no-repeat center center / cover; + @include tablet { + height: 108rem; + background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center / auto 100%; + } .promotionHeaderInner { width: 100%; max-width: 120rem; margin: 0 auto; - padding-top: 71.4rem; + padding-top: 86vw; + @include tablet { + padding-top: 71.4rem; + } .pageTitle { + text-align: center; h1 { - font-size: 4.8rem; + font-size: 3rem; font-weight: 600; color: #fff; + @include tablet { + font-size: 4.8rem; + } } p { - font-size: 1.6rem; + font-size: 1.4rem; font-weight: 400; color: #fff; + @include tablet { + font-size: 1.6rem; + } } } } @@ -48,42 +65,84 @@ // 탭 네비게이션 스타일 .tabNavigation { - width: 100%; - background: #fff; - border-bottom: 1px solid #e5e5e5; + overflow: hidden; + overflow-x: auto; position: sticky; top: 0; + height: 4rem; + padding: 1rem 2rem; + background-color: #fff; z-index: 100; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + @include tablet { + width: 100%; + height: 5.4rem; + padding: 0; + &:after { + content: ""; + display: block; + width: 100%; + height: 2px; + position: absolute; + bottom: 0; + left: 0; + background-color: #e7e9ec; + } + } .tabNavigationInner { max-width: 120rem; - margin: 0 auto; + @include tablet { + margin: 0 auto; + } + .tabList { display: flex; list-style: none; margin: 0; padding: 0; + gap: 1.4rem; .tabItem { - flex: 1; - .tabLink { + position: relative; + &:after { + content: ""; display: block; - padding: 2rem 1.5rem; + width: 100%; + height: 2px; + position: absolute; + bottom: 0; + left: 0; + z-index: 10; + background-color: transparent; + } + .tabLink { + display: flex; + align-items: center; + justify-content: center; + height: 3rem; text-decoration: none; color: #666; font-size: 1.6rem; font-weight: 400; text-align: center; - border-bottom: 3px solid transparent; - transition: all 0.3s ease; - &:hover { - color: #333; + white-space: nowrap; + @include tablet { + height: 5.4rem; + padding: 0 1.6rem; } + &:hover { + color: $KiaBlack; + } + } + &:last-child { + padding-right: 2rem; } &.active { .tabLink { - color: #333; + color: $KiaBlack; font-weight: 600; - border-bottom-color: #333; + border-bottom-color: $KiaBlack; + } + &:after { + background-color: $KiaBlack; } } } @@ -102,234 +161,733 @@ margin: 0 auto; position: relative; .tabContent { - min-height: 60rem; display: block; opacity: 1; visibility: visible; transform: none; position: relative; - margin-bottom: 4rem; - .contentSection { - h2 { - font-size: 3.2rem; - font-weight: 600; - color: #333; - margin-bottom: 2rem; - } - p { - font-size: 1.6rem; - color: #666; - line-height: 1.6; - margin-bottom: 3rem; - } - } } } } - .contentSectionInner { - max-width: 120rem; - margin: 0 auto; - } - - // Disney 스와이퍼 스타일 - .disneySwiperContainer { - width: 100%; - overflow: hidden; - margin-top: 4rem; - padding: 2rem 0; - - .disneySwiper { - width: 100%; - padding: 2rem 0 4rem; - - .swiper-slide { - width: 58rem !important; - height: 36rem; - flex-shrink: 0; - - .themeCard { - border-radius: 2rem; - padding: 3rem 2rem; - text-align: center; - color: #fff; - height: 100%; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - transition: all 0.3s ease; - - h3 { - font-size: 2.2rem; - font-weight: 700; - margin-bottom: 1rem; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); - } - - p { - font-size: 1.4rem; - opacity: 0.9; - line-height: 1.4; - margin: 0; - } - } - } - - // 네비게이션 버튼 스타일 - .swiper-button-next, - .swiper-button-prev { - display: none; - color: #333; - background: rgba(255, 255, 255, 0.9); - width: 5rem; - height: 5rem; - border-radius: 50%; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); - - &:after { - font-size: 1.8rem; - font-weight: bold; - } - - &:hover { - background: #fff; - transform: scale(1.1); - } - } - - // 페이지네이션 스타일 - .swiper-pagination { - bottom: 0; - - .swiper-pagination-bullet { - background: #ddd; - opacity: 1; - width: 1.2rem; - height: 1.2rem; - margin: 0 0.5rem; - - &.swiper-pagination-bullet-active { - background: #333; - transform: scale(1.2); - } - } + .contentSection { + .contentSectionInner { + max-width: 120rem; + margin: 0 auto; + @include tablet { + padding: 0; } } - } - // Notice 박스 스타일 - .noticeBox { - background: #fff; - border-radius: 1rem; - padding: 2rem; - margin: 3rem 0; - border: 1px solid #e5e5e5; + .title-area { + margin-bottom: 3.2rem; + @include tablet { + margin-bottom: 8rem; + } + } - h3 { - font-size: 1.8rem; + h2 { + font-size: 3rem; font-weight: 600; - color: #333; - margin-bottom: 1.5rem; - padding-bottom: 1rem; - border-bottom: 1px solid #e5e5e5; + color: $KiaBlack; + margin-bottom: 2.4rem; + line-height: 1.5; + @include tablet { + font-size: 4.8rem; + margin-bottom: 2.4rem; + } } + p { + font-size: 1.4rem; + color: $KiaBlack; + line-height: 1.5; + @include tablet { + font-size: 1.6rem; + } + } + img { + max-width: 100%; + } + .img-m { + display: block; + @include tablet { + display: none; + } + } + .img-pc { + display: none; + @include tablet { + display: block; + } + } + } - ul { - list-style: none; - padding: 0; - margin: 0; + .overview { + .contentSectionInner { + padding: 4.8rem 2rem 0; + @include tablet { + padding: 8rem 2rem 0; + } + } + // Disney 스와이퍼 스타일 + .disneySwiperContainer { + width: 100%; + overflow: hidden; + @include tablet { + padding: 0 0 8rem; + } - li { + .disneySwiper { + width: 100%; + padding: 2rem 0 0; + + .swiper-slide { + overflow: hidden; + width: 25.6rem !important; + height: 16rem; + flex-shrink: 0; + border-radius: 0.8rem; + @include tablet { + width: 58rem !important; + height: 36rem; + border-radius: 1.6rem; + } + img { + max-width: 100%; + } + } + + // 네비게이션 버튼 스타일 + .swiper-button-next, + .swiper-button-prev { + display: none; + color: $KiaBlack; + background: rgba(255, 255, 255, 0.9); + width: 5rem; + height: 5rem; + border-radius: 50%; + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); + + &:after { + font-size: 1.8rem; + font-weight: bold; + } + + &:hover { + background: #fff; + transform: scale(1.1); + } + } + + // 페이지네이션 스타일 + .swiper-pagination { + bottom: 0; + + .swiper-pagination-bullet { + background: #ddd; + opacity: 1; + width: 1.2rem; + height: 1.2rem; + margin: 0 0.5rem; + + &.swiper-pagination-bullet-active { + background: $KiaBlack; + transform: scale(1.2); + } + } + } + } + } + } + + .available-cars { + padding: 6.4rem 2rem 0; + @include tablet { + padding: 12rem 2rem 3.2rem; + } + .contentSection { + max-width: 120rem; + margin: 0 auto; + .title-area { + margin-bottom: 3.2rem; + h3 { + font-size: 2.4rem; + font-weight: 600; + color: $KiaBlack; + margin-bottom: 0.8rem; + @include tablet { + font-size: 3.2rem; + margin-bottom: 1.6rem; + } + } + } + } + // Notice 박스 스타일 + .noticeBox { + background: #fff; + padding: 1.6rem; + margin: 3rem 0 0; + border: 1px solid #dedede; + border-radius: 0.8rem; + @include tablet { + padding: 2rem; + border-radius: 1rem; + } + + h4 { + font-size: 1.2rem; + font-weight: 600; + color: $KiaBlack; + margin-bottom: 1.2rem; + padding-bottom: 1.2rem; + border-bottom: 1px solid #dedede; + @include tablet { + font-size: 1.4rem; + } + } + + ul { + list-style: none; + padding: 0; + margin: 0; + + li { + position: relative; + padding-left: 1rem; + font-size: 1.2rem; + color: $KiaBlack; + line-height: 1.5; + @include tablet { + padding-left: 1.4rem; + font-size: 1.4rem; + } + + &:before { + content: "•"; + position: absolute; + top: 0.35rem; + left: 0; + font-size: 0.8rem; + color: $KiaBlack; + @include tablet { + top: 0.4rem; + } + } + + &:last-child { + margin-bottom: 0; + } + } + } + } + } + + // Select Guide + .theme-select-guide { + background: linear-gradient(180deg, #ffffff 0%, #e8eaeb 60%); + @include tablet { + background: #fff; + } + .contentSection { + padding: 8rem 2rem; + @include tablet { + max-width: 120rem; + margin: 0 auto; + padding: 12rem 0; + } + .title-area { + margin-bottom: 6.4rem; + @include tablet { + margin-bottom: 6.4rem; + } + h3 { + font-size: 1.8rem; + margin-bottom: 0.8rem; + @include tablet { + font-size: 2.4rem; + } + } + } + } + .guides-wrap { + margin-top: 4rem; + @include tablet { + margin-top: 0; + } + + .guides-section { position: relative; - padding-left: 2rem; - margin-bottom: 1rem; - font-size: 1.4rem; - color: #666; - line-height: 1.5; - &:before { - content: "•"; + @include tablet { + display: flex; + width: 100%; + padding-top: 5.8rem; + } + + h4 { + display: none; position: absolute; left: 0; - color: #333; - font-weight: bold; - } - - &:last-child { - margin-bottom: 0; - } - } - } - } - - // Available Cars 탭 스타일 - .carList { - margin-top: 3rem; - } - - // Select Guide 탭 스타일 - .guideSteps { - margin-top: 3rem; - .stepItem { - display: flex; - align-items: flex-start; - margin-bottom: 3rem; - .stepNumber { - width: 4rem; - height: 4rem; - background: #333; - color: #fff; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.8rem; - font-weight: 600; - margin-right: 2rem; - flex-shrink: 0; - } - .stepContent { - flex: 1; - h3 { - font-size: 2rem; + top: 0; + font-size: 3.2rem; font-weight: 600; - color: #333; - margin-bottom: 1rem; + @include tablet { + display: block; + } } - p { - font-size: 1.4rem; - color: #666; - line-height: 1.5; - margin: 0; + + & + .guides-section { + margin-top: 2.4rem; + @include tablet { + margin-top: 8rem; + } + } + + .guides-header { + display: flex; + align-items: flex-end; + justify-content: space-between; + overflow: hidden; + position: relative; + height: 10rem; + padding: 1.6rem; + background: url("../images/kia/promotion/bg_disney_pattern.png") no-repeat center top / 100% auto; + border-radius: 0.8rem 0.8rem 0 0; + @include tablet { + flex: 0 0 auto; + width: 46.8rem; + height: 27.6rem; + padding: 2rem; + border-radius: 0.8rem 0 0 0.8rem; + } + + .logo { + flex: 1; + height: 3rem; + // background: url("../images/kia/promotion/logo_disney_white.png") no-repeat left center / auto 100%; + // text-indent: -9999px; + @include tablet { + height: 4rem; + } + img { + max-height: 100%; + } + } + + .btn-viewAll { + display: inline-flex; + align-items: center; + justify-content: center; + flex: 0 0 auto; + width: 9.9rem; + height: 2.8rem; + padding: 0.3rem 0 0; + font-size: 1.2rem; + font-weight: 600; + color: #fff; + border: 1px solid #fff; + border-radius: 0.4rem; + line-height: 1; + + @include tablet { + width: 12.3rem; + height: 4rem; + padding: 0 2rem; + font-size: 1.4rem; + } + + .arrow-icon { + width: 1.6rem; + height: 1.6rem; + margin-left: 0.6rem; + -webkit-mask: url("../images/kia/promotion/ico_arrow_forward.svg") no-repeat center / contain; + mask: url("../images/kia/promotion/ico_arrow_forward.svg") no-repeat center / contain; + background-color: #fff; + + // Filter 사용 + // background: url("../images/kia/promotion/ico_arrow_forward.svg") no-repeat center / contain; + // filter: brightness(0) saturate(100%); + } + } + + .copyright { + position: absolute; + top: 1.6rem; + right: 1.6rem; + font-size: 1rem; + color: #d1d1d1; + } + } + + .guides-content { + position: relative; + z-index: 2; + display: flex; + flex-direction: column; + gap: 1.6rem; + padding: 1.6rem; + background-color: #fff; + border-radius: 0 0 0.8rem 0.8rem; + + @include tablet { + flex-direction: row; + padding: 2rem; + background-color: #f2f4f6; + border: 1px solid #dedede; + border-radius: 0 0.8rem 0.8rem 0; + } + .item { + overflow: hidden; + display: flex; + align-items: center; + background-color: #fff; + border-radius: 0.6rem; + box-shadow: 0px 0px 8.33px 0px #0000001f; + @include tablet { + flex-direction: column; + width: 22rem; + } + + .logo { + width: 7.2rem; + height: 7.2rem; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + @include tablet { + width: 22rem; + height: 12.6rem; + } + } + + strong { + display: flex; + align-items: center; + padding: 1.2rem; + letter-spacing: -0.075em; + @include tablet { + width: 100%; + padding: 1.6rem; + } + } + + &.stay-tuned-item { + box-shadow: none; + @include tablet { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 22rem; + background: none; + } + } + } + + .stay-tuned { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 4rem; + padding: 1.2rem; + font-size: 1.2rem; + font-weight: 400; + color: $KiaBlack; + 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; + } + @include tablet { + display: block; + width: auto; + height: auto; + padding: 0; + margin-bottom: 0; + font-size: 1.2rem; + color: #b2b8bd; + span { + position: relative; + width: 7.2rem; + height: 1.6rem; + margin: 0 auto; + margin-bottom: 0.5rem; + 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; + } + } + } + } + + &.disney-pixar-theme { + .guides-header { + background: url("../images/kia/promotion/bg_disney_pixar_pattern.png") no-repeat center top / 100% auto; + + .copyright { + color: #666; + } + + .btn-viewAll { + color: $KiaBlack; + border-color: $KiaBlack; + .arrow-icon { + background-color: $KiaBlack; + } + } + } + } + &.marvel-theme { + .guides-header { + background: url("../images/kia/promotion/bg_marvel_pattern.png") no-repeat center top / 100% auto; + } + } + &.starwars-theme { + .guides-header { + background: url("../images/kia/promotion/bg_starwars_pattern.png") no-repeat center top / 100% auto; + } + } + &.national-geographic-theme { + .guides-header { + background: url("../images/kia/promotion/bg_national_pattern.png") no-repeat center top / 100% auto; + } } } } } // More Features 탭 스타일 - .featuresList { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); - gap: 2rem; - margin-top: 3rem; - .featureCard { - padding: 2rem; - background: #fff; - border: 1px solid #e5e5e5; - border-radius: 1rem; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); - h3 { - font-size: 1.8rem; - font-weight: 600; - color: #333; - margin-bottom: 1rem; + .more-features { + .contentSection { + padding: 8rem 0; + @include tablet { + max-width: 120rem; + margin: 0 auto; + padding: 12rem 0 8rem; } - p { - font-size: 1.4rem; - color: #666; - line-height: 1.5; - margin: 0; + .title-area { + padding: 0 2rem; + margin-bottom: 2.4rem; + @include tablet { + margin-bottom: 8rem; + padding: 0; + } + h2 { + margin-bottom: 0.8rem; + font-size: 2.4rem; + @include tablet { + margin-bottom: 2.4rem; + font-size: 4.8rem; + } + } + } + } + .features-list { + margin-bottom: 2.4rem; + @include tablet { + margin-bottom: 8rem; + } + .swiper { + padding-left: 2rem; + @include tablet { + padding-left: 0; + } + } + .swiper-slide { + width: 14.6rem !important; + @include tablet { + width: 28.8rem !important; + } + } + .feature-card { + .img { + overflow: hidden; + width: 14.6rem; + height: 14.6rem; + margin-bottom: 1.2rem; + border-radius: 0.8rem; + img { + width: 100%; + height: 100%; + object-fit: cover; + } + @include tablet { + width: 28.8rem; + height: 18rem; + margin-bottom: 2.2rem; + border-radius: 1.2rem; + } + } + + .txt { + strong { + display: block; + margin-bottom: 0.6rem; + font-size: 1.6rem; + @include tablet { + font-size: 2rem; + } + } + p { + font-size: 1.4rem; + @include tablet { + font-size: 1.6rem; + } + } + } + } + } + + .btn-area { + padding: 0 2rem; + @include tablet { + padding: 0; + } + } + .oneButton { + a { + p { + font-size: 1.6rem; + } + } + @include tablet { + width: 25rem; + margin: 0 auto; + } + } + } + + // Information 탭 스타일 + .information { + border-top: 1px solid #dedede; + .contentSection { + padding: 8rem 2rem; + @include tablet { + padding: 12rem 2rem 8rem; + max-width: 120rem; + margin: 0 auto; + } + .title-area { + margin-bottom: 4rem; + @include tablet { + margin-bottom: 8rem; + } + h2 { + margin-bottom: 0.8rem; + font-size: 2.4rem; + @include tablet { + margin-bottom: 1.6rem; + font-size: 3.2rem; + } + } + } + } + + .info-section { + border-top: 1px solid #999; + @include tablet { + border-top-color: #dedede; + } + .item { + padding: 2rem 0; + border-bottom: 1px solid #dedede; + @include tablet { + display: flex; + align-items: center; + } + + h3 { + font-size: 1.8rem; + font-weight: 600; + color: $KiaBlack; + margin-bottom: 1.5rem; + + @include tablet { + flex: 0 0 auto; + position: relative; + width: 16rem; + margin-right: 2rem; + margin-bottom: 0; + font-size: 1.6rem; + &:after { + content: ""; + display: block; + position: absolute; + top: 50%; + transform: translateY(-50%); + right: 0; + width: 0.1rem; + height: 1.5rem; + background-color: #dedede; + } + } + } + + ul { + list-style: none; + padding: 0; + margin: 0; + + li { + position: relative; + padding-left: 1.2rem; + font-size: 1.4rem; + color: #676767; + line-height: 1.6; + + @include tablet { + padding-left: 1rem; + font-size: 1.4rem; + } + + &:before { + content: "•"; + position: absolute; + top: 0.5rem; + left: 0; + color: #676767; + font-weight: bold; + font-size: 0.8rem; + + @include tablet { + top: 0.6rem; + } + } + + &.bu-none { + &:before { + display: none; + } + } + } + } } } } @@ -371,126 +929,4 @@ } } } - - // 반응형 스타일 - @media (max-width: 768px) { - .tabNavigation { - .tabNavigationInner { - .tabList { - .tabItem { - .tabLink { - padding: 1.5rem 1rem; - font-size: 1.4rem; - } - } - } - } - } - - .tabContentArea { - width: 100%; - .tabContentInner { - .tabContent { - .contentSection { - h2 { - font-size: 2.4rem; - } - } - } - } - } - - // Disney 스와이퍼 모바일 스타일 - .disneySwiperContainer { - margin-top: 3rem; - padding: 1rem 0; - - .disneySwiper { - padding: 1rem 0 3rem; - - .swiper-slide { - .themeCard { - padding: 2rem 1.5rem; - - h3 { - font-size: 1.8rem; - margin-bottom: 0.8rem; - } - - p { - font-size: 1.2rem; - } - } - } - - .swiper-button-next, - .swiper-button-prev { - width: 4rem; - height: 4rem; - - &:after { - font-size: 1.4rem; - } - } - } - } - - .featureGrid, - .carList, - .featuresList, - .infoGrid { - grid-template-columns: 1fr; - gap: 2rem; - } - - // Notice 박스 모바일 스타일 - .noticeBox { - padding: 1.5rem; - margin: 2rem 0; - - h3 { - font-size: 1.6rem; - } - - ul li { - font-size: 1.3rem; - padding-left: 1.5rem; - } - } - - // 차량 목록 모바일 스타일 - .carList { - .carItem { - flex-direction: column; - text-align: center; - padding: 1.5rem; - - .carImage { - width: 6rem; - height: 6rem; - } - - .carInfo { - h3 { - font-size: 1.6rem; - } - - p { - font-size: 1.3rem; - } - } - } - } - - .guideSteps { - .stepItem { - flex-direction: column; - text-align: center; - .stepNumber { - margin-right: 0; - margin-bottom: 1rem; - } - } - } - } } diff --git a/kr/assets/images/kia/pdp/display_theme_disney/매출전표.pdf b/kr/assets/images/kia/pdp/display_theme_disney/매출전표.pdf new file mode 100644 index 0000000..65c244e Binary files /dev/null and b/kr/assets/images/kia/pdp/display_theme_disney/매출전표.pdf differ diff --git a/kr/assets/images/kia/promotion/bg_disney_pattern.png b/kr/assets/images/kia/promotion/bg_disney_pattern.png new file mode 100644 index 0000000..2a66838 Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_disney_pattern.png differ diff --git a/kr/assets/images/kia/promotion/bg_disney_pattern_m.png b/kr/assets/images/kia/promotion/bg_disney_pattern_m.png new file mode 100644 index 0000000..6325999 Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_disney_pattern_m.png differ diff --git a/kr/assets/images/kia/promotion/bg_disney_pixar_pattern.png b/kr/assets/images/kia/promotion/bg_disney_pixar_pattern.png new file mode 100644 index 0000000..1cedd7e Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_disney_pixar_pattern.png differ diff --git a/kr/assets/images/kia/promotion/bg_disney_pixar_pattern_m.png b/kr/assets/images/kia/promotion/bg_disney_pixar_pattern_m.png new file mode 100644 index 0000000..393e3b5 Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_disney_pixar_pattern_m.png differ diff --git a/kr/assets/images/kia/promotion/bg_marvel_pattern.png b/kr/assets/images/kia/promotion/bg_marvel_pattern.png new file mode 100644 index 0000000..17ed2f3 Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_marvel_pattern.png differ diff --git a/kr/assets/images/kia/promotion/bg_marvel_pattern_m.png b/kr/assets/images/kia/promotion/bg_marvel_pattern_m.png new file mode 100644 index 0000000..b0c1e95 Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_marvel_pattern_m.png differ diff --git a/kr/assets/images/kia/promotion/bg_national_pattern.png b/kr/assets/images/kia/promotion/bg_national_pattern.png new file mode 100644 index 0000000..79297e9 Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_national_pattern.png differ diff --git a/kr/assets/images/kia/promotion/bg_national_pattern_m.png b/kr/assets/images/kia/promotion/bg_national_pattern_m.png new file mode 100644 index 0000000..787ff18 Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_national_pattern_m.png differ diff --git a/kr/assets/images/kia/promotion/bg_starwars_pattern.png b/kr/assets/images/kia/promotion/bg_starwars_pattern.png new file mode 100644 index 0000000..4e3557d Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_starwars_pattern.png differ diff --git a/kr/assets/images/kia/promotion/bg_starwars_pattern_m.png b/kr/assets/images/kia/promotion/bg_starwars_pattern_m.png new file mode 100644 index 0000000..75c92b9 Binary files /dev/null and b/kr/assets/images/kia/promotion/bg_starwars_pattern_m.png differ diff --git a/kr/assets/images/kia/promotion/disney_frozen.png b/kr/assets/images/kia/promotion/disney_frozen.png new file mode 100644 index 0000000..1b9a014 Binary files /dev/null and b/kr/assets/images/kia/promotion/disney_frozen.png differ diff --git a/kr/assets/images/kia/promotion/disney_frozen_m.png b/kr/assets/images/kia/promotion/disney_frozen_m.png new file mode 100644 index 0000000..3cbe947 Binary files /dev/null and b/kr/assets/images/kia/promotion/disney_frozen_m.png differ diff --git a/kr/assets/images/kia/promotion/disney_mickey.png b/kr/assets/images/kia/promotion/disney_mickey.png new file mode 100644 index 0000000..3f62cfc Binary files /dev/null and b/kr/assets/images/kia/promotion/disney_mickey.png differ diff --git a/kr/assets/images/kia/promotion/disney_mickey_m.png b/kr/assets/images/kia/promotion/disney_mickey_m.png new file mode 100644 index 0000000..40b3fd4 Binary files /dev/null and b/kr/assets/images/kia/promotion/disney_mickey_m.png differ diff --git a/kr/assets/images/kia/promotion/disney_pixar_toy.png b/kr/assets/images/kia/promotion/disney_pixar_toy.png new file mode 100644 index 0000000..1694207 Binary files /dev/null and b/kr/assets/images/kia/promotion/disney_pixar_toy.png differ diff --git a/kr/assets/images/kia/promotion/disney_pixar_toy_m.png b/kr/assets/images/kia/promotion/disney_pixar_toy_m.png new file mode 100644 index 0000000..8571ddd Binary files /dev/null and b/kr/assets/images/kia/promotion/disney_pixar_toy_m.png differ diff --git a/kr/assets/images/kia/promotion/ico_arrow_forward.svg b/kr/assets/images/kia/promotion/ico_arrow_forward.svg new file mode 100644 index 0000000..42710cb --- /dev/null +++ b/kr/assets/images/kia/promotion/ico_arrow_forward.svg @@ -0,0 +1,3 @@ + + + diff --git a/kr/assets/images/kia/promotion/ico_stay_tuned.svg b/kr/assets/images/kia/promotion/ico_stay_tuned.svg new file mode 100644 index 0000000..9d0437e --- /dev/null +++ b/kr/assets/images/kia/promotion/ico_stay_tuned.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/kr/assets/images/kia/promotion/img_available_cars_m.png b/kr/assets/images/kia/promotion/img_available_cars_m.png new file mode 100644 index 0000000..9f584a9 Binary files /dev/null and b/kr/assets/images/kia/promotion/img_available_cars_m.png differ diff --git a/kr/assets/images/kia/promotion/img_features01.jpg b/kr/assets/images/kia/promotion/img_features01.jpg new file mode 100644 index 0000000..1d845b5 Binary files /dev/null and b/kr/assets/images/kia/promotion/img_features01.jpg differ diff --git a/kr/assets/images/kia/promotion/img_features02.jpg b/kr/assets/images/kia/promotion/img_features02.jpg new file mode 100644 index 0000000..5eab764 Binary files /dev/null and b/kr/assets/images/kia/promotion/img_features02.jpg differ diff --git a/kr/assets/images/kia/promotion/img_features03.jpg b/kr/assets/images/kia/promotion/img_features03.jpg new file mode 100644 index 0000000..f0a5765 Binary files /dev/null and b/kr/assets/images/kia/promotion/img_features03.jpg differ diff --git a/kr/assets/images/kia/promotion/img_features04.jpg b/kr/assets/images/kia/promotion/img_features04.jpg new file mode 100644 index 0000000..0c8246c Binary files /dev/null and b/kr/assets/images/kia/promotion/img_features04.jpg differ diff --git a/kr/assets/images/kia/promotion/img_feature01.png b/kr/assets/images/kia/promotion/img_overview01.png similarity index 100% rename from kr/assets/images/kia/promotion/img_feature01.png rename to kr/assets/images/kia/promotion/img_overview01.png diff --git a/kr/assets/images/kia/promotion/img_feature02.png b/kr/assets/images/kia/promotion/img_overview02.png similarity index 100% rename from kr/assets/images/kia/promotion/img_feature02.png rename to kr/assets/images/kia/promotion/img_overview02.png diff --git a/kr/assets/images/kia/promotion/img_feature03.png b/kr/assets/images/kia/promotion/img_overview03.png similarity index 100% rename from kr/assets/images/kia/promotion/img_feature03.png rename to kr/assets/images/kia/promotion/img_overview03.png diff --git a/kr/assets/images/kia/promotion/img_feature04.png b/kr/assets/images/kia/promotion/img_overview04.png similarity index 100% rename from kr/assets/images/kia/promotion/img_feature04.png rename to kr/assets/images/kia/promotion/img_overview04.png diff --git a/kr/assets/images/kia/promotion/kv_promotion_m.jpg b/kr/assets/images/kia/promotion/kv_promotion_m.jpg new file mode 100644 index 0000000..b2c94d0 Binary files /dev/null and b/kr/assets/images/kia/promotion/kv_promotion_m.jpg differ diff --git a/kr/assets/images/kia/promotion/logo_disney_pixar.png b/kr/assets/images/kia/promotion/logo_disney_pixar.png new file mode 100644 index 0000000..008c916 Binary files /dev/null and b/kr/assets/images/kia/promotion/logo_disney_pixar.png differ diff --git a/kr/assets/images/kia/promotion/logo_disney_white.png b/kr/assets/images/kia/promotion/logo_disney_white.png new file mode 100644 index 0000000..78ff3a6 Binary files /dev/null and b/kr/assets/images/kia/promotion/logo_disney_white.png differ diff --git a/kr/assets/images/kia/promotion/logo_marvel.png b/kr/assets/images/kia/promotion/logo_marvel.png new file mode 100644 index 0000000..c1a6396 Binary files /dev/null and b/kr/assets/images/kia/promotion/logo_marvel.png differ diff --git a/kr/assets/images/kia/promotion/logo_national_gaeographic.png b/kr/assets/images/kia/promotion/logo_national_gaeographic.png new file mode 100644 index 0000000..276cd09 Binary files /dev/null and b/kr/assets/images/kia/promotion/logo_national_gaeographic.png differ diff --git a/kr/assets/images/kia/promotion/logo_starwars.png b/kr/assets/images/kia/promotion/logo_starwars.png new file mode 100644 index 0000000..c25800f Binary files /dev/null and b/kr/assets/images/kia/promotion/logo_starwars.png differ diff --git a/kr/assets/images/kia/promotion/marvel_logo1.png b/kr/assets/images/kia/promotion/marvel_logo1.png new file mode 100644 index 0000000..2da45c7 Binary files /dev/null and b/kr/assets/images/kia/promotion/marvel_logo1.png differ diff --git a/kr/assets/images/kia/promotion/marvel_logo2.png b/kr/assets/images/kia/promotion/marvel_logo2.png new file mode 100644 index 0000000..df68c82 Binary files /dev/null and b/kr/assets/images/kia/promotion/marvel_logo2.png differ diff --git a/kr/assets/images/kia/promotion/national_logo1.png b/kr/assets/images/kia/promotion/national_logo1.png new file mode 100644 index 0000000..05bd318 Binary files /dev/null and b/kr/assets/images/kia/promotion/national_logo1.png differ diff --git a/kr/assets/images/kia/promotion/national_logo2.png b/kr/assets/images/kia/promotion/national_logo2.png new file mode 100644 index 0000000..66fccb9 Binary files /dev/null and b/kr/assets/images/kia/promotion/national_logo2.png differ diff --git a/kr/assets/images/kia/promotion/national_logo3.png b/kr/assets/images/kia/promotion/national_logo3.png new file mode 100644 index 0000000..a7b624b Binary files /dev/null and b/kr/assets/images/kia/promotion/national_logo3.png differ diff --git a/kr/promotion/disney_promotion.html b/kr/promotion/disney_promotion.html index 47149de..d66ca63 100644 --- a/kr/promotion/disney_promotion.html +++ b/kr/promotion/disney_promotion.html @@ -356,8 +356,11 @@
-

Hello, Disney!

-

Disney and Kia brings imagination, color and emotion to your screen

+

Inspired Together

+

+ Disney and Kia bring
+ imagination, color and emotion to your screen. +

@@ -370,13 +373,13 @@ Overview
  • - Available Cars + Available Cars
  • - Select Guide + Select Guide
  • - More Features + More Features
  • Information @@ -389,15 +392,17 @@
    -
    +
    -

    Disney Display Themes

    -

    - Where innovation meets timeless storytelling.

    - Kia and The Walt Disney Company present stunning display themes - each a canvas of imagination and story, infused with the innovation of Kia.
    - From your morning commute to weekend escapes, every drive becomes an unforgettable chapter. -

    +
    +

    New Display Themes

    +

    + Where innovation meets timeless storytelling.

    + Kia and The Walt Disney Company present stunning display themes - each a canvas of imagination and story, infused with the innovation of Kia.
    + From your morning commute to weekend escapes, every drive becomes an unforgettable chapter. +

    +
    @@ -406,28 +411,28 @@
    - Frozen Theme + Frozen Theme
    - Mickey Mouse Theme + Mickey Mouse Theme
    - Toy Story Theme + Toy Story Theme
    - Moana Theme + Moana Theme
    @@ -438,123 +443,342 @@
    -
    +
    -
    -

    Available Cars

    -

    Introducing cars that are available with Disney Display Themes. Look forward to more updates!

    +
    +

    Available Cars

    +

    Introducing cars that are available with Disney Display Themes for purchase. Look forward to more updates in the future!

    +
    - -
    - Available Cars -
    + +
    + Available Cars + Available Cars +
    - -
    -

    Notice

    -
      -
    • It can be purchased only for users of the Kia Connect service.
      • -
    • It is only available for vehicles with a 12.3-inch cluster among the ccNC infotainment platforms.
      • -
    • Purchase availability can be found on the detailed page of each product.
      • -
    -
    + +
    +

    Notice

    +
      +
    • It can be purchased only for users of the Kia Connect service.
      • +
    • It is only available for vehicles with a 12.3-inch cluster among the ccNC infotainment platforms.
      • +
    • Purchase availability can be found on the detailed page of each product.
      • +
    -
    +
    -

    선택 가이드

    -

    Disney 디스플레이 테마를 선택하고 설치하는 방법을 안내해드립니다.

    -
    -
    -
    1
    -
    -

    차량 확인

    -

    귀하의 차량이 지원되는지 확인하세요.

    +
    +

    Feel like you are driving into the Disney Universe

    +

    Theme Select Guide

    +

    + From timeless classics to heroic adventures, discover a colorful lineup of Disney Display Themes.
    + Explore them all, find your favorite, and make your ride feel more magical. +

    +
    +
    + +
    +

    Disney Display Themes

    +
    + +
    + © Disney +
    + + View all + + +
    + +
    +
    + + Disney Mickey & Friends +
    +
    + + Disney Frozen +
    + +
    +
    + + STAY TUNED +
    +
    -
    -
    2
    -
    -

    테마 선택

    -

    원하는 Disney 테마를 선택하세요.

    + + +
    +

    Disney Pixar Display Themes

    +
    + +
    + © Disney/Pixar +
    + + View all + + +
    + +
    +
    + + Pixar Toy Story +
    + +
    +
    + + STAY TUNED +
    +
    -
    -
    3
    -
    -

    설치 및 활성화

    -

    선택한 테마를 다운로드하고 활성화하세요.

    + + +
    +

    Marvel Display Themes

    +
    + +
    + © 2025 Marvel +
    + + View all + + +
    + +
    +
    + + Marvel’s Avengers Assemble +
    +
    + + Marvel’s Avengers Comics +
    + +
    +
    + + STAY TUNED +
    +
    + + +
    +

    Star Wars Display Themes

    +
    + +
    + © Lucasfilm +
    + +
    + +
    + + +
    +
    + + STAY TUNED +
    +
    +
    +
    + + +
    +

    National Geographic Display Themes

    +
    + +
    + © National Geographic +
    + + View all + + +
    + +
    +
    + + National Geographic Baby Animals +
    +
    + + National Geographic Space Wonder +
    +
    + + National Geographic Landscapes +
    + + +
    +
    +
    -
    +
    -

    추가 기능

    -

    Disney 디스플레이 테마의 다양한 기능들을 확인해보세요.

    -
    -
    -

    음성 인식

    -

    "헤이 미키"라고 말하면 미키마우스가 응답합니다.

    +
    +

    More Digital Features

    +

    Check out more available digital features

    +
    + +
    +
    +
    +
    +
    +
    + Features +
    +
    + Lighting Patterns +

    ₩ 180,000

    +
    +
    +
    +
    +
    +
    + Features +
    +
    + Lighting Patterns +

    ₩ 180,000

    +
    +
    +
    +
    +
    +
    + Features +
    +
    + Lighting Patterns +

    ₩ 180,000

    +
    +
    +
    +
    +
    +
    + Features +
    +
    + Lighting Patterns +

    ₩ 180,000

    +
    +
    +
    +
    -
    -

    날씨 연동

    -

    날씨에 따라 캐릭터의 의상이 바뀝니다.

    -
    -
    -

    시간대별 테마

    -

    아침, 점심, 저녁에 맞는 테마가 자동으로 변경됩니다.

    -
    -
    -

    특별 이벤트

    -

    디즈니 영화 개봉 시 특별 테마가 제공됩니다.

    +
    + +
    +
    +

    Go to the list
    -
    +
    -

    상세 정보

    -
    -
    -

    가격 정보

    +
    +

    Information

    +
    +
    + +
    +

    Target models

      -
    • 기본 테마: 무료
      • -
    • 프리미엄 테마: 월 9,900원
      • -
    • 패밀리 패키지: 월 19,900원
      • +
    • EV5, EV3, EV4, EV6, Tasman, Sorento, Sportage, Carnival, K5, K8
    -
    -

    시스템 요구사항

    + + +
    +

    Available Period

      -
    • 기아 커넥트 3.0 이상
      • -
    • 최소 2GB 저장공간
      • -
    • 인터넷 연결 필요
      • +
    • If you choose to use it for a lifetime, you can use it without a period limit. If you choose a monthly/annual subscription, you can use it for the specified period.
    -
    -

    지원 언어

    + + +
    +

    Legal Notice

      -
    • 한국어
      • -
    • 영어
      • -
    • 일본어
      • -
    • 중국어
      • -
    -
    -
    -

    업데이트

    -
      -
    • 월 1회 새로운 테마 추가
      • -
    • 자동 업데이트 지원
      • -
    • 사용자 피드백 반영
      • +
    • © Disney © Disney/Pixar © 2025 MARVEL © Lucasfilm © National Geographic
    @@ -778,7 +1002,7 @@ $(document).ready(function () { // Disney 스와이퍼 초기화 var disneySwiper = new Swiper(".disneySwiper", { - slidesPerView: 2, + slidesPerView: 4.2, spaceBetween: 24, loop: true, autoplay: { @@ -795,37 +1019,115 @@ // }, breakpoints: { 640: { - slidesPerView: 2, - spaceBetween: 20, + slidesPerView: 1, + spaceBetween: 0, }, 768: { slidesPerView: 3, - spaceBetween: 30, + spaceBetween: 24, }, 1024: { - slidesPerView: 4, - spaceBetween: 30, + slidesPerView: 4.5, + spaceBetween: 24, }, }, }); + + var disneyFeaturesSwiper = new Swiper(".features-list-swiper", { + slidesPerView: 2.15, + 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, + spaceBetween: 16, + }, + }, + }); + // 탭 클릭 이벤트 $(".tabLink").on("click", function (e) { e.preventDefault(); var targetTab = $(this).attr("href"); + console.log("🚀 ~ 111 targetTab:", targetTab); var $targetContent = $(targetTab); + var $clickedTab = $(this).parent(); // 모든 탭에서 active 클래스 제거 $(".tabItem").removeClass("active"); $(".tabContent").removeClass("active"); // 클릭한 탭에 active 클래스 추가 - $(this).parent().addClass("active"); + $clickedTab.addClass("active"); $targetContent.addClass("active"); + // 탭 가로스크롤 중앙 정렬 + var $tabNavigation = $(".tabNavigation"); + var $tabList = $(".tabList"); + var tabNavigationWidth = $tabNavigation.width(); + + // 탭 리스트의 실제 너비 계산 (여러 방법 시도) + var tabListWidth = $tabList[0].scrollWidth; // 스크롤 가능한 전체 너비 + var tabListOffsetWidth = $tabList[0].offsetWidth; // 현재 보이는 너비 + var tabListOuterWidth = $tabList.outerWidth(); // jQuery outerWidth + + console.log("탭 네비게이션 너비:", tabNavigationWidth); + console.log("탭 리스트 scrollWidth:", tabListWidth); + console.log("탭 리스트 offsetWidth:", tabListOffsetWidth); + console.log("탭 리스트 outerWidth:", tabListOuterWidth); + + // 탭 리스트가 네비게이션보다 넓을 때만 스크롤 조정 + if (tabListWidth > tabNavigationWidth) { + // 탭의 절대 위치 계산 (부모 컨테이너 기준) + var tabOffsetLeft = $clickedTab.offset().left; + var tabNavigationOffsetLeft = $tabNavigation.offset().left; + var relativeTabOffset = tabOffsetLeft - tabNavigationOffsetLeft; + var tabWidth = $clickedTab.outerWidth(); + var tabCenter = relativeTabOffset + tabWidth / 2; + var navigationCenter = tabNavigationWidth / 2; + var scrollLeft = tabCenter - navigationCenter; + + // 스크롤 범위 제한 + var maxScrollLeft = tabListWidth - tabNavigationWidth; + scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft)); + + // 부드러운 스크롤 애니메이션 + $tabNavigation.animate( + { + scrollLeft: scrollLeft, + }, + 300, + "easeInOutQuart" + ); + + // 대안 방법: scrollTo 사용 + setTimeout(function () { + $tabNavigation[0].scrollTo({ + left: scrollLeft, + behavior: "smooth", + }); + }, 50); + } + // 해당 탭 콘텐츠로 스크롤 이동 if ($targetContent.length) { - var scrollTop = $targetContent.offset().top - 100; // 헤더 높이만큼 여백 + var scrollTop = $targetContent.offset().top; // 헤더 높이만큼 여백 $("html, body").animate( { scrollTop: scrollTop,