@charset "UTF-8"; /*변수*/ /*반응형 화면 크기*/ /*css 디폴트는 모바일이 기준*/ /*반응형, 브라우저 크기가 300px 이하일때*/ /*반응형, 브라우저 크기가 800px 이상일때*/ /*@media (min-width: $mobile ) and (max-width: $tablet){*/ /*반응형, 브라우저 크기가 1025px 이상일때*/ /*반응형, 브라우저 크기가 1204px 이상일때*/ /*넓이, 높이 자동 계산함수*/ /*변수파일 import*/ html { scroll-behavior: smooth; } .parallax-section .content-item { opacity: 0; transform: translateY(50px); transition: opacity 0.6s ease, transform 0.6s ease; } .section1 .content-item[data-reveal="2"] { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; } .parallax-section .parallax-bg { transform: translateY(0); transition: transform 0.1s ease-out; } @-webkit-keyframes easeInOutQuart { 0% { transform: translateY(0); } 100% { transform: translateY(0); } } @keyframes easeInOutQuart { 0% { transform: translateY(0); } 100% { transform: translateY(0); } } #promotion .hederWarp_n { position: absolute; top: 0; left: 0; z-index: 100; background-color: #fff; transition: all 0.3s ease; } #promotion .contentWarp { max-width: 100%; margin-top: 0; } #promotion .promotionWrap { width: 100%; position: relative; z-index: 1; } @media (min-width: 768px) { #promotion .promotionWrap { max-width: 192rem; margin: 0 auto; margin-bottom: 16rem; } } #promotion .promotionWrap .copy { position: absolute; left: 50%; bottom: 4rem; transform: translate(-50%, 0); font-size: 1rem; font-weight: 400; color: #777; text-align: center; } @media (min-width: 768px) { #promotion .promotionWrap .copy { bottom: 10rem; font-size: 1.4rem; } } #promotion .promotionWrap .copy.web { display: none; } @media (min-width: 768px) { #promotion .promotionWrap .copy.web { display: block; } } #promotion .promotionWrap .copy.mobile { display: block; } @media (min-width: 768px) { #promotion .promotionWrap .copy.mobile { display: none; } } #promotion .promotionWrap .util-area { margin-bottom: 2.4rem; } @media (min-width: 768px) { #promotion .promotionWrap .util-area { margin-bottom: 2.8rem; } } #promotion .parallax-section { position: relative; width: 100%; } #promotion .parallax-section.section1 { height: 100vh; } @media (min-width: 768px) { #promotion .parallax-section.section1 { height: 100vh; } } #promotion .parallax-section.section1 .parallax-bg { position: relative; height: 100%; background-size: cover; } #promotion .parallax-section.section1 .logo-kia { position: absolute; left: 2rem; bottom: 4rem; z-index: 10; } #promotion .parallax-section.section1 .logo-kia img { display: block; height: 3.6rem; } @media (min-width: 768px) { #promotion .parallax-section.section1 .logo-kia img { height: 6.4rem; } } @media (min-width: 768px) { #promotion .parallax-section.section1 .logo-kia { left: 4rem; bottom: 6.6rem; } } #promotion .parallax-section.section1 .logo-disney { position: absolute; right: 2rem; bottom: 4rem; z-index: 10; } #promotion .parallax-section.section1 .logo-disney img { display: block; height: 2.8rem; } @media (min-width: 768px) { #promotion .parallax-section.section1 .logo-disney img { height: 5rem; } } #promotion .parallax-section.section1 .logo-disney .copy { display: block; top: auto; bottom: -2.4rem; left: auto; right: 0; white-space: nowrap; transform: none; } @media (min-width: 768px) { #promotion .parallax-section.section1 .logo-disney .copy { bottom: -5.4rem; } } @media (min-width: 768px) { #promotion .parallax-section.section1 .logo-disney { right: 4rem; bottom: 6.6rem; } } #promotion .parallax-section .parallax-bg { position: static; top: 0; left: 0; width: 100%; z-index: 1; opacity: 1; transition: opacity 0.5s ease-in-out; } #promotion .parallax-section .parallax-bg.active { opacity: 1; } #promotion .parallax-section .section-content { position: relative; top: 0; left: 50%; transform: translate(-50%, 0); z-index: 2; width: 100%; max-width: 120rem; padding: 12rem 2rem 0; text-align: center; } @media (min-width: 768px) { #promotion .parallax-section .section-content { padding: 20rem 0 0; } } #promotion .parallax-section .section-content .theme-header { display: flex; justify-content: flex-start; padding-bottom: 8rem; text-align: left; } @media (min-width: 768px) { #promotion .parallax-section .section-content .theme-header { padding-bottom: 12rem; text-align: center; } } #promotion .parallax-section .section-content .theme-header .theme-logo { display: block; height: 2.8rem; margin-bottom: 1.6rem; } @media (min-width: 768px) { #promotion .parallax-section .section-content .theme-header .theme-logo { height: 4.8rem; } } #promotion .parallax-section .section-content .theme-header h2 { font-size: 2.8rem; font-weight: 600; color: #fff; line-height: 1.5; } @media (min-width: 768px) { #promotion .parallax-section .section-content .theme-header h2 { font-size: 4.8rem; } } #promotion .parallax-section.section1 .section-content { position: absolute; } #promotion .parallax-section .tabContentArea .section-content { position: relative; } #promotion .parallax-section .content-item { width: 100%; } #promotion .parallax-section .content-item .theme-showcase { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; text-align: left; } #promotion .parallax-section .content-item .theme-showcase.right { align-items: flex-end; text-align: right; } #promotion .parallax-section .content-item .theme-showcase + .theme-showcase { margin-top: 8rem; } @media (min-width: 768px) { #promotion .parallax-section .content-item .theme-showcase + .theme-showcase { margin-top: 12rem; } } #promotion .parallax-section .content-item .theme-showcase h3 { display: flex; align-items: flex-start; justify-content: flex-start; flex-direction: column; font-size: 2rem; font-weight: 600; color: #fff; margin-bottom: 2rem; text-align: left; } @media (min-width: 768px) { #promotion .parallax-section .content-item .theme-showcase h3 { margin-bottom: 6rem; font-size: 3.2rem; } } #promotion .parallax-section .content-item .theme-showcase h3 em { font-style: normal; } #promotion .parallax-section .content-item .theme-showcase h3:before { content: ""; display: block; width: 2rem; height: 0.2rem; background-color: #fff; margin-bottom: 1.2rem; } @media (min-width: 768px) { #promotion .parallax-section .content-item .theme-showcase h3:before { width: 4rem; height: 0.4rem; } } #promotion .parallax-section .content-item .theme-showcase.right h3 { align-items: flex-end; } #promotion .parallax-section .content-item .theme-showcase .img-area + .img-area { margin-top: 1.2rem; } @media (min-width: 768px) { #promotion .parallax-section .content-item .theme-showcase .img-area + .img-area { margin-top: 4.8rem; } } #promotion .parallax-section .content-item .theme-showcase .img-area img { width: 100%; } @media (min-width: 768px) { #promotion .parallax-section .content-item .theme-showcase .img-area img { max-width: 1000px; } } #promotion .parallax-section .content-item .theme-showcase .video-area { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100rem; aspect-ratio: 1000/196.67; padding: 1.8vw; background: url("../images/kia/promotion/video_frame.png") no-repeat center center/contain; } @media (min-width: 1000px) { #promotion .parallax-section .content-item .theme-showcase .video-area { padding: 1.8rem; } } #promotion .parallax-section .content-item .theme-showcase .video-area + .video-area { margin-top: 1.2rem; } @media (min-width: 768px) { #promotion .parallax-section .content-item .theme-showcase .video-area + .video-area { margin-top: 1.6rem; } } #promotion .parallax-section .content-item .theme-showcase video { width: 100%; max-width: 100rem; } #promotion .parallax-section.text-black .section-content .theme-header h2 { color: #05141f; } #promotion .parallax-section.text-black .content-item .theme-showcase h3 { color: #05141f; } #promotion .parallax-section.text-black .content-item .theme-showcase h3:before { background-color: #05141f; } #promotion .parallax-section .main-title { font-size: 3.2rem; font-weight: 600; } @media (min-width: 768px) { #promotion .parallax-section .main-title { font-size: 6.4rem; } } #promotion .parallax-section .sub-title { margin-top: 0.8rem; font-size: 1.8rem; font-weight: 600; line-height: 1.5; } @media (min-width: 768px) { #promotion .parallax-section .sub-title { font-size: 2.8rem; } } #promotion .parallax-section .main-description { text-align: left; } #promotion .parallax-section .coming-title { font-size: 2rem; color: #fff; line-height: 1.5; } @media (min-width: 768px) { #promotion .parallax-section .coming-title { font-size: 4.8rem; } } #promotion .section1 .parallax-bg { height: 100vh; background: url("../images/kia/promotion/section1_m.jpg") no-repeat center bottom/cover; } #promotion .section1 .parallax-bg:after { content: ""; display: block; position: absolute; top: 1px; left: 0; z-index: 3; width: 100%; height: 100%; background: url("../images/kia/promotion/section1_m_board.png") no-repeat center bottom/cover; } @media (min-width: 768px) { #promotion .section1 .parallax-bg:after { background: url("../images/kia/promotion/section1_board.webp") no-repeat center bottom/cover; } } @media (min-width: 768px) { #promotion .section1 .parallax-bg { height: 108rem; aspect-ratio: 1920/1080; background: url("../images/kia/promotion/section1.jpg") no-repeat center top/cover; } } #promotion .section1 .parallax-bg.reveal2:before { content: ""; display: block; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; background: url("../images/kia/promotion/section1_dim.png") no-repeat center/cover; } #promotion .section1 .section-content { padding-top: 22.1rem; } @media (min-width: 768px) { #promotion .section1 .section-content { padding-top: 12.5vw; } } #promotion .section1 .section-content .content-item { position: absolute; top: 55vw; left: 0; width: 100%; padding: 0 2rem; font-size: 1.8rem; font-weight: 400; color: #fff; } @media (min-width: 768px) { #promotion .section1 .section-content .content-item { position: absolute; top: 32rem; padding: 0; font-size: 2.8rem; } } #promotion .parallax-bg-wrap { position: -webkit-sticky; position: sticky; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } #promotion .parallax-bg-wrap .parallax-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; z-index: 1; transition: opacity 0.5s ease-in-out; } #promotion .parallax-bg-wrap .parallax-bg.bg1 { background: url("../images/kia/promotion/section2.jpg") no-repeat center top/cover; } #promotion .parallax-bg-wrap .parallax-bg.bg2 { background: url("../images/kia/promotion/section3.jpg") no-repeat center top/cover; } #promotion .parallax-bg-wrap .parallax-bg.bg3 { background: url("../images/kia/promotion/section4.jpg") no-repeat center top/cover; } #promotion .parallax-bg-wrap .parallax-bg.bg4 { background: url("../images/kia/promotion/section5.jpg") no-repeat center top/cover; } #promotion .parallax-bg-wrap .parallax-bg.bg5 { background: url("../images/kia/promotion/section6.jpg") no-repeat center top/cover; } #promotion .parallax-bg-wrap .parallax-bg.bg7 { background: url("../images/kia/promotion/section7.jpg") no-repeat center top/cover; } #promotion .parallax-section .section-content .content-item .copy { position: static; margin-top: 20rem; transform: none; text-align: center; } #promotion .section6 .section-content { display: flex; align-items: center; justify-content: center; max-width: 100%; height: 100vh; padding: 0; } #promotion .timeline { display: flex; justify-content: center; gap: 20rem; flex-wrap: wrap; position: relative; } #promotion .timeline:before { content: ""; display: block; width: 100%; height: 0.2rem; background: linear-gradient(180deg, #fff 0%, #7a7e85 100%); position: absolute; top: 12.7rem; left: 0; } #promotion .timeline .timeline-item { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; } #promotion .timeline .timeline-item .timeline-icon { width: 7.7rem; height: 9.9rem; margin-bottom: 2.3rem; background: url("../images/kia/promotion/ico_coming.png") no-repeat center bottom/auto 6.9rem; } #promotion .timeline .timeline-item span { font-size: 2rem; color: rgba(255, 255, 255, 0.4); font-weight: 400; line-height: 1.5; } #promotion .timeline .timeline-item span::before { content: ""; display: block; width: 1.2rem; height: 1.2rem; margin: 0 auto; margin-bottom: 0.5rem; background: #7c8087; border-radius: 50%; } #promotion .timeline .timeline-item.open .timeline-icon { background: url("../images/kia/promotion/ico_open.png") no-repeat center bottom/auto 100%; } #promotion .timeline .timeline-item.open span { color: #fff; } #promotion .timeline .timeline-item.open span::before { background: #fff; } #promotion .promotionHeader { width: 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: 95rem; 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: 86vw; } @media (min-width: 768px) { #promotion .promotionHeader .promotionHeaderInner { 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 { font-size: 1.4rem; font-weight: 400; color: #fff; } @media (min-width: 768px) { #promotion .promotionHeader .promotionHeaderInner .pageTitle p { font-size: 1.6rem; } } #promotion .tabNavigation { overflow: hidden; overflow-x: auto; position: -webkit-sticky; position: sticky; top: 0; width: 100%; height: 4.8rem; padding: 0 2rem; margin-bottom: -5.4rem; background: rgba(255, 255, 255, 0.1); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index: 100; transition: top 0.3s ease-in-out; /* Webkit browsers (Chrome, Safari, etc.) */ } @media (min-width: 768px) { #promotion .tabNavigation { height: 4rem; padding: 1rem 2rem; } } #promotion .tabNavigation::-webkit-scrollbar { display: none; } @media (min-width: 768px) { #promotion .tabNavigation { height: 5.4rem; padding: 0; } } #promotion .tabNavigation .tabNavigationInner { max-width: 120rem; } @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 { position: relative; } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink { display: flex; align-items: center; justify-content: center; position: relative; height: 4.8rem; text-decoration: none; color: #9ba2a9; font-size: 1.6rem; font-weight: 400; text-align: center; white-space: nowrap; transition: color 0.2s ease; } @media (min-width: 768px) { #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink { height: 5.4rem; padding: 0 1.6rem; } } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink: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:hover { color: #fff; } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem:last-child .tabLink { margin-right: 2rem; } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink { color: #fff; font-weight: 600; border-bottom-color: #fff; } #promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink:after { background-color: #fff; } #promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem .tabLink { color: rgba(5, 20, 31, 0.5); } #promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem.active .tabLink { color: #05141f; } #promotion .tabNavigation.is_black .tabNavigationInner .tabList .tabItem.active .tabLink::after { background-color: #05141f; } #promotion .tabContentArea { width: 100%; min-height: 60rem; position: relative; } #promotion .tabContentArea .tabContentInner { margin: 0 auto; position: relative; } #promotion .tabContentArea .tabContentInner .tabContent { display: block; opacity: 1; visibility: visible; transform: none; position: relative; } #promotion .contentSection .contentSectionInner { max-width: 120rem; margin: 0 auto; } @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: 6rem; } } #promotion .contentSection h2 { font-size: 3rem; font-weight: 600; color: #05141f; margin-bottom: 2.8rem; line-height: 1.2; } @media (min-width: 768px) { #promotion .contentSection h2 { font-size: 4.8rem; margin-bottom: 4.2rem; } } #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: 5.4rem 2rem 0; } @media (min-width: 768px) { #promotion .overview .contentSectionInner { padding: 8rem 2rem 0; } } #promotion .overview .disneySwiperContainer { width: 100%; overflow: hidden; } @media (min-width: 768px) { #promotion .overview .disneySwiperContainer { padding: 0 0 8rem; } } #promotion .overview .disneySwiperContainer .disneySwiper { width: 100%; padding: 0; } @media (min-width: 768px) { #promotion .overview .disneySwiperContainer .disneySwiper { padding: 2rem 0 0; } } #promotion .overview .disneySwiperContainer .disneySwiper .swiper-slide { overflow: hidden; width: 25.6rem !important; height: 16rem; flex-shrink: 0; border-radius: 0.8rem; } @media (min-width: 768px) { #promotion .overview .disneySwiperContainer .disneySwiper .swiper-slide { width: 58rem !important; height: 36rem; border-radius: 1.6rem; } } #promotion .overview .disneySwiperContainer .disneySwiper .swiper-slide img { max-width: 100%; } #promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-next, #promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-prev { display: none; 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 .overview .disneySwiperContainer .disneySwiper .swiper-button-next:after, #promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-prev:after { font-size: 1.8rem; font-weight: bold; } #promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-next:hover, #promotion .overview .disneySwiperContainer .disneySwiper .swiper-button-prev:hover { background: #fff; transform: scale(1.1); } #promotion .overview .disneySwiperContainer .disneySwiper .swiper-pagination { bottom: 0; } #promotion .overview .disneySwiperContainer .disneySwiper .swiper-pagination .swiper-pagination-bullet { background: #ddd; opacity: 1; width: 1.2rem; height: 1.2rem; margin: 0 0.5rem; } #promotion .overview .disneySwiperContainer .disneySwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background: #05141f; transform: scale(1.2); } #promotion .available-cars { padding: 7rem 2rem 0; } @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: #05141f; margin-bottom: 1rem; } @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 .available-cars .noticeBox ul li { position: relative; padding-left: 1rem; font-size: 1.2rem; color: #05141f; line-height: 1.5; } @media (min-width: 768px) { #promotion .available-cars .noticeBox ul li { font-size: 1.6rem; } } #promotion .available-cars .noticeBox ul li:before { content: "•"; position: absolute; top: 0.35rem; left: 0; font-size: 0.8rem; color: #05141f; } @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 .theme-select-guide { position: relative; z-index: 1; background: linear-gradient(180deg, #ffffff 0%, #e8eaeb 60%); } @media (min-width: 768px) { #promotion .theme-select-guide { background: #fff; } } #promotion .theme-select-guide .contentSection { padding: 8rem 2rem; } @media (min-width: 768px) { #promotion .theme-select-guide .contentSection { max-width: 120rem; margin: 0 auto; padding: 16.8rem 2rem 20rem; } } #promotion .theme-select-guide .contentSection .title-area { margin-bottom: 4.8rem; } @media (min-width: 768px) { #promotion .theme-select-guide .contentSection .title-area { margin-bottom: 5.6rem; } } @media (min-width: 768px) { #promotion .theme-select-guide .contentSection .title-area h2 { margin-bottom: 2.3rem; } } #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-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; } @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: 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; font-size: 1.4rem; letter-spacing: -0.05em; } @media (min-width: 768px) { #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item strong { width: 100%; font-size: 1.8rem; padding: 1.6rem; line-height: 2.6rem; } } #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item strong.soon { display: flex; align-items: flex-start; flex-direction: column; } #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .item strong.soon:before { content: "COMMING SOON"; display: flex; align-items: center; justify-content: center; height: 2rem; padding: 0.35rem 0.5rem 0; margin-bottom: 0.3rem; font-size: 1rem; border: 1px solid #05141f; } #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.2rem 0 0; line-height: 1; } @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.8rem; 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; font-weight: normal; } } #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned-same { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; padding: 1.2rem; font-size: 1.2rem; font-weight: 400; color: #b2b8bd; border-radius: 0; letter-spacing: -0.05em; } #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned-same 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-same 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-same strong { display: block; padding: 0.2rem 0 0; line-height: 1; } @media (min-width: 768px) { #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned-same { font-size: 1.2rem; } #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned-same span { position: relative; width: 7.2rem; height: 1.6rem; margin: 0 auto; margin-bottom: 0.8rem; background: none; border: 1px solid #b2b8bd; border-radius: 0.8rem; } #promotion .theme-select-guide .guides-wrap .guides-section .guides-content .stay-tuned-same 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-same strong { padding: 0; font-size: 1.6rem; text-align: center; } } #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 .recent-theme { padding-bottom: 8rem; } #promotion .recent-theme .contentSection { max-width: 120rem; margin: 0 auto; padding: 8rem 0; } @media (min-width: 768px) { #promotion .recent-theme .contentSection { padding: 0; } } #promotion .recent-theme .contentSection .title-area { margin: 0; } #promotion .recent-theme .contentSection h2 { font-size: 3rem; font-weight: 600; color: #05141f; margin-bottom: 2.4rem; padding: 0 2rem; } @media (min-width: 768px) { #promotion .recent-theme .contentSection h2 { font-size: 3.2rem; margin-bottom: 3.2rem; padding: 0; } } #promotion .recent-theme .contentSection .media-area { position: relative; aspect-ratio: 16/9; } #promotion .recent-theme .contentSection .media-area .youtubeThumb { overflow: hidden; position: relative; border-radius: 0; } #promotion .recent-theme .contentSection .media-area .youtubeThumb img { border-radius: 0; } @media (min-width: 768px) { #promotion .recent-theme .contentSection .media-area .youtubeThumb img { border-radius: 0.6rem; aspect-ratio: 1200/675; } } #promotion .recent-theme .contentSection .media-area .youtubeThumb .btn-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6.4rem; height: 6.4rem; background: url("../images/kia/promotion/btn_play.png") no-repeat center/contain; cursor: pointer; } #promotion .recent-theme .contentSection .media-area .youtubeArea { display: block; overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 0.6rem; } #promotion .recent-theme .contentSection .media-area .youtubeArea iframe { width: 100%; height: 100%; } #promotion .more-features .contentSection { overflow: hidden; padding: 7.9rem 0; } @media (min-width: 768px) { #promotion .more-features .contentSection { overflow: visible; max-width: 120rem; margin: 0 auto; padding: 7rem 0 12rem; } } #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: 2rem; } @media (min-width: 768px) { #promotion .more-features .features-list { margin-bottom: 8rem; } } #promotion .more-features .features-list .swiper { overflow: visible; padding: 0 2rem; } @media (min-width: 768px) { #promotion .more-features .features-list .swiper { padding: 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: 7.8rem 2rem; } @media (min-width: 768px) { #promotion .information .contentSection { padding: 11.5rem 2rem 8rem; max-width: 120rem; margin: 0 auto; } } #promotion .information .contentSection .title-area { margin-bottom: 2.7rem; } @media (min-width: 768px) { #promotion .information .contentSection .title-area { margin-bottom: 3.5rem; } } #promotion .information .contentSection .title-area h2 { font-size: 2rem; } @media (min-width: 768px) { #promotion .information .contentSection .title-area h2 { margin-bottom: 1.6rem; font-size: 3rem; } } #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.4rem; font-weight: 600; color: #05141f; margin-bottom: 1rem; } @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 .information .info-section .item ul { list-style: none; padding: 0; margin: 0; } #promotion .information .info-section .item ul li { position: relative; padding-left: 1.2rem; font-size: 1.4rem; 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 .goto-area { display: none; background-color: #f3f3f3; } @media (min-width: 768px) { #promotion .goto-area { display: block; } } @media (min-width: 768px) { #promotion .goto-area .contentSection { display: flex; align-items: center; max-width: 120rem; height: 10rem; padding: 0 2rem; margin: 0 auto; } } @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%; } } body#promotion.scroll-up .tabNavigation { top: 10.6rem; } /*# sourceMappingURL=promotion.css.map */