1605 lines
75 KiB
HTML
1605 lines
75 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<title>제품상세명 > 제품리스트 > 회사명</title>
|
||
<!--
|
||
//위에 순서대로 title 이 변경되어야 합니다.
|
||
-->
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="apple-mobile-web-app-title" content="" />
|
||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||
<meta name="apple-touch-fullscreen" content="yes" />
|
||
<meta name="title" content="" />
|
||
<meta name="keywords" content="" />
|
||
<meta name="description" content="" />
|
||
<meta name="format-detection" content="telephone=no" />
|
||
<meta property="og:title" content="Page Title" />
|
||
<meta property="og:type" content="Page Contens" />
|
||
<meta property="og:image" content="../assets/images/kia/meta_img.png" />
|
||
<meta property="og:site_name" content="Page name" />
|
||
<meta property="og:description" content="Page Coment" />
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/jquery-ui.min.css?v1" type="text/css" />
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/swiper.min.css?v1" type="text/css" />
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/library/aos.css?v1" type="text/css" />
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/basic.css?v1" type="text/css" />
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/common.css?v2" type="text/css" />
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/contents.css?v1" type="text/css" />
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/popup.css?v1" type="text/css" />
|
||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery.js?v1"></script>
|
||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
|
||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
|
||
<script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
|
||
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
|
||
<!-- GSAP 라이브러리 먼저 로드 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollToPlugin.min.js"></script>
|
||
<!-- ScrollMagic 라이브러리 추가 -->
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/debug.addIndicators.min.js"></script>
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js"></script>
|
||
|
||
<script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v2"></script>
|
||
<!--상품상세 페이지 css 분리-->
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
|
||
<link rel="stylesheet" charset="UTF-8" href="../assets/css/promotion.css?v0.1" type="text/css" />
|
||
<link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
|
||
<link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
|
||
<link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
|
||
<link rel="icon" href="../assets/images/kia/favicon-16x16.png" />
|
||
<link rel="stylesheet" href="../assets/css/kia/kia-font.css?v1" type="text/css" />
|
||
<link rel="stylesheet" href="../assets/css/kia/kia.css?v1" type="text/css" />
|
||
</head>
|
||
<body id="promotion">
|
||
<!--//header-->
|
||
<div class="hederWarp_n noBoder">
|
||
<div class="headerInner">
|
||
<div class="gnb">
|
||
<!-- GNB 로고 영역입니다. -->
|
||
<div class="logoWrap">
|
||
<a href="/kr/kia.html">
|
||
<i class="logoImg"></i>
|
||
<!-- <span>
|
||
Connect Store
|
||
</span> -->
|
||
</a>
|
||
</div>
|
||
<div class="menuWarp">
|
||
<div class="mobileMenuTop">
|
||
<!-- 모바일 슬라이드 메뉴의 로고 영역입니다. -->
|
||
<div class="mobileLogoWrap">
|
||
<a href="">
|
||
<i class="logoImg"></i>
|
||
<!-- <span>
|
||
Connect store
|
||
</span> -->
|
||
</a>
|
||
</div>
|
||
<span class="closeBtn" id="closeBtn">
|
||
<a href="#"></a>
|
||
</span>
|
||
</div>
|
||
<!-- 모바일 전용 USER 관련 링크 영역입니다. -->
|
||
<div class="mobileFunc">
|
||
<button>
|
||
<span>마이페이지</span>
|
||
<!--<span>로그인</span>-->
|
||
</button>
|
||
<!-- <button>
|
||
|
||
<span>장바구니</span>
|
||
|
||
</button> -->
|
||
</div>
|
||
<!-- 모바일 전용 차량 선택 UI입니다. -->
|
||
<div class="mobileCarlist">
|
||
<div class="mobilecarItem">
|
||
<div class="item">
|
||
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</strong>
|
||
<span>KMTKEXXBPMU000081</span>
|
||
<button class="btn-select" onclick="open_layer_popup('carListPopup')">차량 선택하기 ></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- PC 모바일 공통 메뉴 영역입니다. -->
|
||
<ul class="menu">
|
||
<li class="menuDepth1Wrap">
|
||
<a href="/kr/kia.html#mainProductList" class="menuDepth1 lower">디지털 사양</a>
|
||
<div class="menuDepth2Wrap info">
|
||
<h3><a href="/kr/kia.html#mainProductList">디지털 사양</a></h3>
|
||
<ul>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">KBO 디스플레이 테마</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme.html">NBA 디스플레이 테마</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="menuDepth1Wrap">
|
||
<a href="/kr/info/product-usage-guide.html" class="menuDepth1 lower" data-url="/kr/info/product-usage-guide.html">디즈니 테마</a>
|
||
<div class="menuDepth2Wrap info">
|
||
<h3><a href="/kr/kia.html#mainProductList">디즈니 테마</a></h3>
|
||
<ul>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_mickey.html">전용관</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_mickey.html">디즈니 디스플레이 테마</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">픽사 디스플레이 테마</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">마블 디스플레이 테마</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">스타워즈 디스플레이 테마</a></li>
|
||
<li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">내셔널 지오그래픽 디스플레이 테마</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="menuDepth1Wrap hiddenMenuDepth1Wrap">
|
||
<a href="/kr/info/product-usage-guide.html" class="menuDepth1" data-url="/kr/info/product-usage-guide.html">사양별 이용 안내</a>
|
||
<div class="menuDepth2Wrap info">
|
||
<h3><a href="/kr/info/product-usage-guide.html">사양별 이용 안내</a></h3>
|
||
</div>
|
||
</li>
|
||
<li class="menuDepth1Wrap">
|
||
<a href="/kr/info/service-info.html" class="menuDepth1 lower" data-url="/kr/info/service-info.html">스토어 소개</a>
|
||
<div class="menuDepth2Wrap info">
|
||
<h3><a href="/kr/info/service-info.html">스토어 소개</a></h3>
|
||
<ul>
|
||
<li class="menuDepth2"><a href="/kr/info/service-info.html">스토어 소개</a></li>
|
||
<li class="menuDepth2"><a href="/kr/info/registration-guide.html">스토어 가입안내</a></li>
|
||
<li class="menuDepth2"><a href="/kr/info/buying-Installation-guide.html">스토어 이용안내</a></li>
|
||
<li class="menuDepth2"><a href="/kr/service/event-list.html">이벤트</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="menuDepth1Wrap">
|
||
<a href="/kr/info/as-guide.html" class="menuDepth1 lower" data-url="/kr/info/as-guide.html">고객지원</a>
|
||
<div class="menuDepth2Wrap support">
|
||
<h3><a href="/kr/info/as-guide.html">고객지원</a></h3>
|
||
<ul>
|
||
<li class="menuDepth2"><a href="/kr/service/faq.html">자주하는 질문</a></li>
|
||
<li class="menuDepth2"><a href="/kr/service/inquiry-list.html">문의하기</a></li>
|
||
<li class="menuDepth2"><a href="/kr/info/as-guide.html">고객센터 및 AS안내</a></li>
|
||
<li class="menuDepth2"><a href="/kr/service/notice-list.html">공지사항</a></li>
|
||
</ul>
|
||
</div>
|
||
</li>
|
||
<li class="menuDepth1Wrap">
|
||
<a href="/kr/info/as-guide.html" class="menuDepth1" data-url="/kr/info/as-guide.html">이벤트</a>
|
||
</li>
|
||
</ul>
|
||
<!-- 모바일 전용 추가 메뉴 영역입니다. -->
|
||
<div class="mobileSubMenu">
|
||
<a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a>
|
||
<a href="/kr/member/terms.html">이용약관</a>
|
||
</div>
|
||
<!-- 모바일 전용 로그아웃 버튼입니다. -->
|
||
<!-- <div class="loginBtn oneButton">
|
||
<button><p>로그아웃</p></button>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<div class="func">
|
||
<!-- PC 전용 차량 선택 UI입니다. -->
|
||
<!-- 2025.08.27 추가 -->
|
||
<div class="carlist">
|
||
<a href="javascript:void(0)" class="carItem">
|
||
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
|
||
</a>
|
||
<div class="carlistItem">
|
||
<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
|
||
<path d="M7 1L1 10H13L7 1Z" fill="white" />
|
||
<path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
|
||
</svg>
|
||
<ul>
|
||
<!-- [D] 선택 시 selected 클래스 추가 -->
|
||
<li class="selected">
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>스포티지 개조</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>스포티지 개조</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>스포티지 개조</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>스포티지 개조</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>스포티지 개조</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>스포티지 개조</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
<li>
|
||
<button class="car-name">
|
||
<span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
|
||
</button>
|
||
<button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!--// 2025.08.27 추가 -->
|
||
|
||
<!-- PC 전용 로그인 버튼입니다. -->
|
||
<!-- <div class="userLogin">
|
||
<a href="#">로그인/가입</a>
|
||
</div> -->
|
||
|
||
<!-- PC 전용 USER 관련 링크 영역입니다. -->
|
||
<div class="user">
|
||
<a href="../mypage/my-product-list.html"><i class="icon-user"></i></a>
|
||
</div>
|
||
|
||
<!-- PC 모바일 공통 장바구니 버튼입니다. -->
|
||
<!-- <div class="cart">
|
||
<a href="" class="login-alrt"><i class="icon-cart"></i></a>
|
||
</div> -->
|
||
|
||
<!-- 모바일 전용 햄버거 메뉴 버튼입니다. -->
|
||
<div class="moblieMenu burgurBtn">
|
||
<span class="burgur" id="burgur">
|
||
<span class="top-line"></span>
|
||
<span class="bot-line"></span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--//header-->
|
||
|
||
<!--//content-warp-->
|
||
<div class="contentWarp promotionWrap">
|
||
<!-- Section 1: Inspired Together -->
|
||
<section id="overview" class="parallax-section section1" data-section="1">
|
||
<div class="parallax-bg">
|
||
<div class="logo-kia">
|
||
<img src="../assets/images/kia/promotion/logo_kia_w.png" alt="Kia" />
|
||
</div>
|
||
<div class="logo-disney">
|
||
<img src="../assets/images/kia/promotion/logo_disney_w.png" alt="Disney" />
|
||
<div class="copy">© Disney</div>
|
||
</div>
|
||
</div>
|
||
<div class="section-content">
|
||
<div class="content-item" data-reveal="1">
|
||
<h1 class="main-title">Inspired Together</h1>
|
||
<p class="sub-title">
|
||
기아와 디즈니가 전하는<br class="br-m" />
|
||
기술과 감성의 하모니
|
||
</p>
|
||
</div>
|
||
<div class="content-item mt" data-reveal="2">
|
||
<p class="main-description">
|
||
다채로운 주행 경험의 시작. <br /><br />
|
||
디즈니 디스플레이 테마 컬렉션을 소개합니다. <br /><br />
|
||
감성과 스토리로 가득 채운 이동의 여정,<br />
|
||
더 깊이 있는 몰입의 순간을 느껴보세요.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="tabNavigation">
|
||
<div class="tabNavigationInner">
|
||
<ul class="tabList">
|
||
<li class="tabItem active">
|
||
<a href="#themeSeries" class="tabLink">소개</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#ThemeSelectGuide" class="tabLink">테마 시리즈</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#recentTheme" class="tabLink">최신 테마 소식</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#availableCars" class="tabLink">적용 가능 차량</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#moreFeatures" class="tabLink">추천 디지털 사양</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#information" class="tabLink">정보고시</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tabContentArea">
|
||
<div id="themeSeries" class="tabContent theme-series">
|
||
<div class="parallax-bg-wrap">
|
||
<div class="parallax-bg bg5" data-rellax-speed="-1"></div>
|
||
<div class="parallax-bg bg4" data-rellax-speed="-1">
|
||
<!-- <div class="copy web">
|
||
ⓒ National Geographic Partners LLC. All rights reserved.<br />
|
||
NATIONAL GEOGRAPHIC and Yellow Border Design are trademarks of National Geographic Society, used under license.
|
||
</div> -->
|
||
<!-- <div class="copy mobile">ⓒ National Geographic Partners LLC.</div> -->
|
||
</div>
|
||
<div class="parallax-bg bg3" data-rellax-speed="-1">
|
||
<!-- <div class="copy">ⓒ 2025 Marvel</div> -->
|
||
</div>
|
||
<div class="parallax-bg bg2" data-rellax-speed="-1">
|
||
<!-- <div class="copy">ⓒ Disney/Pixar</div> -->
|
||
</div>
|
||
<div class="parallax-bg bg1" data-rellax-speed="-1">
|
||
<!-- <div class="copy">ⓒ Disney</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- Section 2: Disney Display Theme -->
|
||
<section id="DisneyTheme" class="parallax-section section2" data-section="2">
|
||
<div class="section-content">
|
||
<div class="content-item" data-reveal="1">
|
||
<div class="theme-header">
|
||
<h2>
|
||
<img src="../assets/images/kia/promotion/logo_disney_white.png" alt="Disney" class="theme-logo" />
|
||
디즈니<br class="br-m" />
|
||
디스플레이 테마
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" data-reveal="2">
|
||
<div class="theme-showcase">
|
||
<h3><em>디즈니 미키와 친구들</em></h3>
|
||
<div class="theme-display">
|
||
<div class="img-area">
|
||
<img src="../assets/images/kia/promotion/disney_theme1_display.jpg" alt="Disney Theme" />
|
||
</div>
|
||
<div class="img-area">
|
||
<div class="video-area">
|
||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/micky/Welcome.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
<div class="video-area">
|
||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/micky/Goodbye.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="theme-showcase right">
|
||
<h3><em>디즈니 겨울왕국</em></h3>
|
||
<div class="theme-display">
|
||
<div class="img-area">
|
||
<img src="../assets/images/kia/promotion/disney_theme2_display.jpg" alt="Disney Theme" />
|
||
</div>
|
||
<div class="img-area">
|
||
<div class="video-area">
|
||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/frozen/Welcome.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
<div class="video-area">
|
||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/frozen/Goodbye.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copy">ⓒ Disney</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 3: Disney Pixar Display Theme -->
|
||
<section id="DisneyPixarTheme" class="parallax-section section3 text-black" data-section="3">
|
||
<div class="section-content">
|
||
<div class="content-item" data-reveal="1">
|
||
<div class="theme-header">
|
||
<h2>
|
||
<img src="../assets/images/kia/promotion/logo_pixar_black.png" alt="Disney" class="theme-logo" />
|
||
디즈니 픽사<br class="br-m" />
|
||
디스플레이 테마
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" data-reveal="2">
|
||
<div class="theme-showcase">
|
||
<h3><em>픽사 토이 스토리</em></h3>
|
||
<div class="theme-display">
|
||
<div class="img-area">
|
||
<img src="../assets/images/kia/promotion/disney_pixar_theme1_display.jpg" alt="Pixar Theme" />
|
||
</div>
|
||
<div class="img-area">
|
||
<div class="video-area">
|
||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/pixar/Welcome.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
<div class="video-area">
|
||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/pixar/Goodbye.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copy">ⓒ Disney/Pixar</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 4: Marvel Display Theme -->
|
||
<section id="MarvelTheme" class="parallax-section section4" data-section="4">
|
||
<div class="section-content">
|
||
<div class="content-item" data-reveal="1">
|
||
<div class="theme-header">
|
||
<h2>
|
||
<img src="../assets/images/kia/promotion/logo_marvel.png" alt="Marvel" class="theme-logo" />
|
||
마블<br class="br-m" />
|
||
디스플레이 테마
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" data-reveal="2">
|
||
<div class="theme-showcase">
|
||
<h3><em>마블 어벤져스 어셈블</em></h3>
|
||
<div class="theme-display">
|
||
<div class="img-area">
|
||
<img src="../assets/images/kia/promotion/marvel_theme1_display.png" alt="Marvel Theme" loading="eager" />
|
||
</div>
|
||
<div class="img-area">
|
||
<div class="video-area">
|
||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
<div class="video-area">
|
||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/marvel/Goodbye.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="theme-showcase right">
|
||
<h3><em>마블 어벤져스 코믹스</em></h3>
|
||
<div class="theme-display">
|
||
<div class="img-area">
|
||
<img src="../assets/images/kia/promotion/marvel_theme2_display.jpg" alt="Marvel Theme" />
|
||
</div>
|
||
<div class="img-area">
|
||
<div class="video-area">
|
||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/marvel/Welcome.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
<div class="video-area">
|
||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/marvel/Goodbye.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="copy">ⓒ 2025 Marvel</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 5: National Geographic Display Theme -->
|
||
<section id="NationalGeographicTheme" class="parallax-section section5" data-section="5">
|
||
<div class="section-content">
|
||
<div class="content-item" data-reveal="1">
|
||
<div class="theme-header">
|
||
<h2>
|
||
<img src="../assets/images/kia/promotion/logo_national_gaeographic.png" alt="Marvel" class="theme-logo" />
|
||
내셔널지오그래픽 디스플레이 테마
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" data-reveal="2">
|
||
<div class="theme-showcase">
|
||
<h3><em>내셔널지오그래픽 아기 동물</em></h3>
|
||
<div class="theme-display">
|
||
<div class="img-area">
|
||
<img src="../assets/images/kia/promotion/ng_theme1_display.jpg" alt="National Geographic Theme" />
|
||
</div>
|
||
<div class="img-area">
|
||
<div class="video-area">
|
||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/natgeo/BabyAnimals/Welcome.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
<div class="video-area">
|
||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/natgeo/BabyAnimals/Goodbye.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="theme-showcase right">
|
||
<h3><em>내셔널지오그래픽 우주의 신비</em></h3>
|
||
<div class="theme-display">
|
||
<div class="img-area">
|
||
<img src="../assets/images/kia/promotion/ng_theme2_display.jpg" alt="National Geographic Theme" />
|
||
</div>
|
||
<div class="img-area">
|
||
<div class="video-area">
|
||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/natgeo/SpaceWonder/Welcome.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
<div class="video-area">
|
||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/natgeo/SpaceWonder/Goodbye.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="theme-showcase">
|
||
<h3><em>내셔널지오그래픽 자연의 순간</em></h3>
|
||
<div class="theme-display">
|
||
<div class="img-area">
|
||
<img src="../assets/images/kia/promotion/ng_theme3_display.jpg" alt="National Geographic Theme" />
|
||
</div>
|
||
<div class="img-area">
|
||
<div class="video-area">
|
||
<video class="video-welcome" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/natgeo/LandScapes/Welcome.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
<div class="video-area">
|
||
<video class="video-goodbye" playsinline="playsinline" autoplay="autoplay" muted="muted" loop>
|
||
<source src="../assets/images/kia/promotion/natgeo/LandScapes/Goodbye.mp4" type="video/mp4" />
|
||
이 문장은 여러분의 브라우저가 video 태그를 지원하지 않을 때 화면에 표시됩니다!
|
||
</video>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="copy web">
|
||
ⓒ National Geographic Partners LLC. All rights reserved.<br />
|
||
NATIONAL GEOGRAPHIC and Yellow Border Design are trademarks of National Geographic Society, used under license.
|
||
</div>
|
||
<div class="copy mobile">ⓒ National Geographic Partners LLC.</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- Section 6: Coming Soon -->
|
||
<section id="ComingSoon" class="parallax-section section6" data-section="6">
|
||
<div class="section-content">
|
||
<div class="content-item" data-reveal="1">
|
||
<h2 class="coming-title">
|
||
앞으로 출시될 더 많은 테마를<br />
|
||
기대해주세요!
|
||
</h2>
|
||
<!-- <div class="timeline mt-12">
|
||
<div class="timeline-item open">
|
||
<div class="timeline-icon"></div>
|
||
<span> 2025. 11<br />GRAND OPEN </span>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-icon"></div>
|
||
<span>
|
||
2026<br />
|
||
SPRING
|
||
</span>
|
||
</div>
|
||
<div class="timeline-item">
|
||
<div class="timeline-icon"></div>
|
||
<span>
|
||
2026<br />
|
||
SUMMER
|
||
</span>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- Select Guide 탭 -->
|
||
<div id="ThemeSelectGuide" class="tabContent theme-select-guide">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h3>더 깊이 있는 차량 경험의 시작.</h3>
|
||
<h2>나만의 테마를 골라보세요.</h2>
|
||
<p>
|
||
꾸준히 사랑받는 클래식부터, 영웅들의 신나는 모험까지.<br />
|
||
디스플레이 테마의 다채로운 라인업을 확인해 보세요.
|
||
</p>
|
||
</div>
|
||
<div class="guides-wrap">
|
||
<!-- Start Disney 테마 -->
|
||
<div class="guides-section disney-theme">
|
||
<h4>디즈니 디스플레이 테마</h4>
|
||
<div class="guides-header">
|
||
<div class="logo">
|
||
<img src="../assets/images/kia/promotion/logo_disney_white.png" alt="Disney" />
|
||
</div>
|
||
<div class="copyright">
|
||
<span>© Disney</span>
|
||
</div>
|
||
<a href="https://connectstore.kia.com/kr/product/displaythemes-disney" class="btn-viewAll">
|
||
<span>보러가기</span>
|
||
<span class="arrow-icon"></span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="guides-content">
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/disney_mickey.png" class="img-pc" alt="Disney Mickey & Friends" />
|
||
<img src="../assets/images/kia/promotion/disney_mickey_m.png" class="img-m" alt="Disney Mickey & Friends" />
|
||
</span>
|
||
<strong>디즈니 미키와 친구들</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/disney_frozen.png" class="img-pc" alt="Disney Frozen" />
|
||
<img src="../assets/images/kia/promotion/disney_frozen_m.png" class="img-m" alt="Disney Frozen" />
|
||
</span>
|
||
<strong>디즈니 겨울왕국</strong>
|
||
</div>
|
||
|
||
<div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>곧 만나요!</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Disney 테마 -->
|
||
<!-- Start Pixar 테마 -->
|
||
<div class="guides-section disney-pixar-theme">
|
||
<h4>디즈니 픽사 디스플레이 테마</h4>
|
||
<div class="guides-header">
|
||
<div class="logo">
|
||
<img src="../assets/images/kia/promotion/logo_disney_pixar.png" alt="Disney" />
|
||
</div>
|
||
<div class="copyright">
|
||
<span>© Disney/Pixar</span>
|
||
</div>
|
||
<a href="https://connectstore.kia.com/kr/product/displaythemes-pixar" class="btn-viewAll">
|
||
<span>보러가기</span>
|
||
<span class="arrow-icon"></span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="guides-content">
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/disney_pixar_toy.png" class="img-pc" alt="Pixar Toy Story" />
|
||
<img src="../assets/images/kia/promotion/disney_pixar_toy_m.png" class="img-m" alt="Pixar Toy Story" />
|
||
</span>
|
||
<strong>픽사 토이 스토리</strong>
|
||
</div>
|
||
|
||
<div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>곧 만나요!</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Pixar 테마 -->
|
||
<!-- Start Marvel 테마 -->
|
||
<div class="guides-section marvel-theme">
|
||
<h4>마블 디스플레이 테마</h4>
|
||
<div class="guides-header">
|
||
<div class="logo">
|
||
<img src="../assets/images/kia/promotion/logo_marvel.png" alt="marvel" />
|
||
</div>
|
||
<div class="copyright">
|
||
<span>© 2025 Marvel</span>
|
||
</div>
|
||
<a href="https://connectstore.kia.com/kr/product/displaythemes-marvel" class="btn-viewAll">
|
||
<span>보러가기</span>
|
||
<span class="arrow-icon"></span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="guides-content">
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/marvel_logo1.png" class="img-pc" alt="Marvel’s Avengers Assemble" />
|
||
<img src="../assets/images/kia/promotion/marvel_logo1_m.png" class="img-m" alt="Marvel’s Avengers Assemble" />
|
||
</span>
|
||
<strong>마블 어벤져스 어셈블</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/marvel_logo2.png" class="img-pc" alt="Marvel’s Avengers Comics" />
|
||
<img src="../assets/images/kia/promotion/marvel_logo2_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
|
||
</span>
|
||
<strong>마블 어벤져스 코믹스</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/marvel_logo3.png" class="img-pc" alt="Marvel’s Avengers Comics" />
|
||
<img src="../assets/images/kia/promotion/marvel_logo3_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
|
||
</span>
|
||
<strong class="soon">마블 스파이더맨 레트로</strong>
|
||
</div>
|
||
|
||
<!-- <div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>곧 만나요!</strong>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- End Marvel 테마 -->
|
||
<!-- Start Star Wars 테마 -->
|
||
<div class="guides-section starwars-theme">
|
||
<h4>스타워즈 디스플레이 테마</h4>
|
||
<div class="guides-header">
|
||
<div class="logo">
|
||
<img src="../assets/images/kia/promotion/logo_starwars.png" alt="Star Wars" />
|
||
</div>
|
||
<div class="copyright">
|
||
<span>ⓒ & ™ 2025 Lucasfilm Ltd.</span>
|
||
</div>
|
||
<!-- <a href="#" class="btn-viewAll">
|
||
<span>보러가기</span>
|
||
<span class="arrow-icon"></span>
|
||
</a> -->
|
||
</div>
|
||
|
||
<div class="guides-content">
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/starwars_logo1.png" class="img-pc" alt="Marvel’s Avengers Assemble" />
|
||
<img src="../assets/images/kia/promotion/starwars_logo1_m.png" class="img-m" alt="Marvel’s Avengers Assemble" />
|
||
</span>
|
||
<strong class="soon">스타워즈 레벨즈</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/starwars_logo2.png" class="img-pc" alt="Marvel’s Avengers Comics" />
|
||
<img src="../assets/images/kia/promotion/starwars_logo2_m.png" class="img-m" alt="Marvel’s Avengers Comics" />
|
||
</span>
|
||
<strong class="soon">스타워즈 다크 사이드</strong>
|
||
</div>
|
||
|
||
<div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>곧 만나요!</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Marvel 테마 -->
|
||
<!-- Start National Geographic 테마 -->
|
||
<div class="guides-section national-geographic-theme">
|
||
<h4>내셔널지오그래픽 디스플레이 테마</h4>
|
||
<div class="guides-header">
|
||
<div class="logo">
|
||
<img src="../assets/images/kia/promotion/logo_national_gaeographic.png" alt="National Geographic" />
|
||
</div>
|
||
<div class="copyright">
|
||
<span>© National Geographic Partners LLC.</span>
|
||
</div>
|
||
<!-- <a href="#" class="btn-viewAll">
|
||
<span>보러가기</span>
|
||
<span class="arrow-icon"></span>
|
||
</a> -->
|
||
</div>
|
||
|
||
<div class="guides-content">
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/national_logo1.png" class="img-pc" alt="National Geographic Baby Animals" />
|
||
<img src="../assets/images/kia/promotion/national_logo1_m.png" class="img-m" alt="National Geographic Baby Animals" />
|
||
</span>
|
||
<strong class="soon">내셔널지오그래픽 아기 동물</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/national_logo2.png" class="img-pc" alt="National Geographic Space Wonder" />
|
||
<img src="../assets/images/kia/promotion/national_logo2_m.png" class="img-m" alt="National Geographic Space Wonder" />
|
||
</span>
|
||
<strong class="soon">내셔널지오그래픽 우주의 신비</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/national_logo3.png" class="img-pc" alt="National Geographic Landscapes" />
|
||
<img src="../assets/images/kia/promotion/national_logo3_m.png" class="img-m" alt="National Geographic Landscapes" />
|
||
</span>
|
||
<strong class="soon">내셔널지오그래픽 자연의 순간</strong>
|
||
</div>
|
||
|
||
<!-- <div class="item stay-tuned-item">
|
||
<div class="stay-tuned-same">
|
||
<span></span>
|
||
<strong>곧 만나요!</strong>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- End National Geographic 테마 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Product Guide 탭 -->
|
||
<div id="recentTheme" class="tabContent recent-theme">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h2>최신 테마 소식</h2>
|
||
<div class="media-area">
|
||
<div class="youtubeThumb">
|
||
<img src="../assets/images/kia/promotion/recentTheme_thumbnail.png" alt="최신 테마 소식" />
|
||
<button class="btn-play" onclick="playYoutube('lNuSUuf7hYU')"></button>
|
||
</div>
|
||
<div class="youtubeArea youtubeArea_pdp" value="lNuSUuf7hYU"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Available Cars 탭 -->
|
||
<div id="availableCars" class="tabContent available-cars">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h3>적용 가능 차량</h3>
|
||
<p>디스플레이 테마는 아래 차량에서 구매 후 적용할 수 있습니다.</p>
|
||
</div>
|
||
|
||
<!-- 차량 목록 -->
|
||
<div class="carList">
|
||
<img src="../assets/images/kia/promotion/img_available_cars_m.png" class="img-m" alt="Available Cars" />
|
||
<img src="../assets/images/kia/promotion/img_available_cars.png" class="img-pc" alt="Available Cars" />
|
||
</div>
|
||
|
||
<!-- Notice 박스 -->
|
||
<div class="noticeBox">
|
||
<h4>안내사항</h4>
|
||
<ul>
|
||
<li>OTA 업데이트 후 가능한 차량 : 쏘렌토, 카니발</li>
|
||
<li>향후 업데이트를 통해 더 많은 차량으로 확대될 예정입니다.</li>
|
||
<li>2026년식 더 뉴 쏘렌토는 OTA 업데이트 여부와 상관없이 구매가능합니다.</li>
|
||
<li>기아 커넥트 서비스 이용자에 한하여 구매할 수 있습니다.</li>
|
||
<li>기아 ccNC 인포테인먼트 플랫폼 중 12.3인치 클러스터가 적용된 차량에 한하여 이용 가능합니다. (4인치 클러스터 탑재 차량의 경우 적용이 불가합니다.)</li>
|
||
<li>구매 가능 여부는 각 상품 상세 페이지에서 확인하실 수 있습니다.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- More Features 탭 -->
|
||
<div id="moreFeatures" class="tabContent more-features">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h2>추천 디지털 사양</h2>
|
||
<p>구매 가능한 더 많은 디지털 사양을 확인하세요.</p>
|
||
</div>
|
||
|
||
<div class="features-list">
|
||
<div class="swiper features-list-swiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<div class="feature-card">
|
||
<div class="img">
|
||
<img src="../assets/images/kia/promotion/img_features01.jpg" alt="Features" />
|
||
</div>
|
||
<div class="txt">
|
||
<strong>라이팅 패턴</strong>
|
||
<p>₩ 180,000</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-card">
|
||
<div class="img">
|
||
<img src="../assets/images/kia/promotion/img_features02.jpg" alt="Features" />
|
||
</div>
|
||
<div class="txt">
|
||
<strong>아케이드 게임</strong>
|
||
<p>₩ 6,900</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-card">
|
||
<div class="img">
|
||
<img src="../assets/images/kia/promotion/img_features03.jpg" alt="Features" />
|
||
</div>
|
||
<div class="txt">
|
||
<strong>RSPA2</strong>
|
||
<p>₩ 12,000 ~</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="feature-card">
|
||
<div class="img">
|
||
<img src="../assets/images/kia/promotion/img_features04.jpg" alt="Features" />
|
||
</div>
|
||
<div class="txt">
|
||
<strong>Boost</strong>
|
||
<p>₩ 990,000</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-area">
|
||
<div class="oneButton">
|
||
<a href="/kr/info/registration-guide"><p>더보기</p></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Information 탭 -->
|
||
<div id="information" class="tabContent information">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h2>정보고시</h2>
|
||
</div>
|
||
<div class="info-section">
|
||
<!-- Target Models 섹션 -->
|
||
<div class="item">
|
||
<h3>대상 차종</h3>
|
||
<ul>
|
||
<li>EV5, EV3, EV4, EV6, EV9, 타스만, 쏘렌토, 스포티지, 카니발, K5, K8</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Available Period 섹션 -->
|
||
<div class="item">
|
||
<h3>이용 기간</h3>
|
||
<ul>
|
||
<li>평생 이용 선택 시 기간 제한 없이 이용이 가능합니다.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Legal Notice 섹션 -->
|
||
<div class="item">
|
||
<h3>법적고지</h3>
|
||
<ul>
|
||
<li class="bu-none">
|
||
© Disney © Disney/Pixar © 2025 MARVEL ⓒ & ™ 2025 Lucasfilm Ltd.<br />
|
||
ⓒ National Geographic Partners LLC. All rights reserved.<br />
|
||
NATIONAL GEOGRAPHIC and Yellow Border Design are trademarks of National Geographic Society, used under license.
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--//content-warp-->
|
||
|
||
<div class="goto-area">
|
||
<div class="contentSection">
|
||
<a href="/kr/info/registration-guide" class="btn-goto">Go to the list</a>
|
||
</div>
|
||
</div>
|
||
|
||
<!--//footer-->
|
||
<div class="floating_menu">
|
||
<a href="/kr/service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문" /></a>
|
||
<a href="/kr/service/inquiry-list.html" class="floating_inquiry"><img src="../assets/images/common/floating_faq.png" alt="문의하기" /></a>
|
||
<a href="javascript:;" class="floating_top"><img src="../assets/images/common/floating_top.png" alt="top" /></a>
|
||
</div>
|
||
<div class="footer">
|
||
<div class="kiaInner">
|
||
<div class="tLeft">
|
||
<div class="logoSEction">
|
||
<a href="/kr/kia.html"><img src="../assets/images/kia/kia-logo.svg" alt="kia" /></a>
|
||
</div>
|
||
<div class="companyInfo">
|
||
<ul>
|
||
<li><a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a></li>
|
||
<li><a href="/kr/member/terms.html">이용약관</a></li>
|
||
</ul>
|
||
<ul>
|
||
<li>사업자: 기아주식회사, 대표 송호성, 최준영</li>
|
||
<li>주소: 서울특별시 서초구 현릉로 12 기아</li>
|
||
<li>사업자등록번호: 119-81-02316</li>
|
||
<li>통신판매신고: 2006-07935</li>
|
||
<li>호스팅제공자: 현대오토에버</li>
|
||
<li>이메일: KiaConnectStore@kia.com</li>
|
||
<li>개인정보책임자: 기아정보보호센터 이상영 상무, privacy@kia.com / 080-200-2000</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="csTime">
|
||
<div>
|
||
<p>
|
||
<strong>고객센터: 080-200-2000</strong>
|
||
</p>
|
||
<p><span>오류문의: 24시간 연중 무휴</span></p>
|
||
<p>
|
||
<span> 일반 문의: 주중 08:30 ~ 18:00<br /><span style="margin-left: 64px">(토·일·공휴일 휴무)</span> </span>
|
||
</p>
|
||
</div>
|
||
<div class="familyBoxWarp">
|
||
<div class="familyBox">
|
||
<div class="familyInner">
|
||
<div class="cont-select">
|
||
<ul class="list-member">
|
||
<li><a href="https://www.kia.com/kr" target="_balnk">기아</a></li>
|
||
<li><a href="https://connect.kia.com/kr" target="_balnk">기아 커넥트</a></li>
|
||
<li><a href="https://worldwide.kia.com/kr" target="_balnk">Worldwide</a></li>
|
||
<li><a href="https://www.hyundai.co.kr" target="_balnk">현대자동차그룹</a></li>
|
||
<li><a href="https://members.kia.com" target="_balnk">기아멤버스</a></li>
|
||
<li><a href="https://drivingexperience.hyundai.co.kr/" target="_balnk">기아 드라이빙 아카데미</a></li>
|
||
<li><a href="https://worldwide.kia.com/kr/company/ir" target="_balnk">IR</a></li>
|
||
<li><a href="http://winwin.hyundai.com/" target="_balnk">동반성장</a></li>
|
||
<li><a href="https://gbic.hyundai.com/" target="_balnk">글로벌경영연구소</a></li>
|
||
<li><a href="https://tigers.co.kr" target="_balnk">기아타이거즈</a></li>
|
||
<li><a href="https://special.kia.com" target="_balnk">기아군용</a></li>
|
||
</ul>
|
||
<button class="btn-select">Family Site</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<p class="copyRight"><span>Ⓒ</span> Kia CORP. ALL RIGHTS RESERVED.</p>
|
||
</div>
|
||
</div>
|
||
<!--//footer-->
|
||
<script>
|
||
function playYoutube(id) {
|
||
var youtube_id = $(".youtubeArea_pdp").attr("value");
|
||
var youtube_frame = '<iframe src="https://www.youtube.com/embed/' + youtube_id + '?controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
|
||
$(".youtubeThumb").hide();
|
||
$(".youtubeArea_pdp").html(youtube_frame).show();
|
||
}
|
||
|
||
// 스크롤 이벤트 최적화를 위한 throttle 함수
|
||
function throttle(func, wait) {
|
||
var timeout;
|
||
return function executedFunction(...args) {
|
||
const later = () => {
|
||
clearTimeout(timeout);
|
||
func(...args);
|
||
};
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(later, wait);
|
||
};
|
||
}
|
||
|
||
// 탭 스크롤 함수 (공통)
|
||
function scrollToTab(targetTab, $clickedTab) {
|
||
var $tabNavigation = $(".tabNavigation");
|
||
var $tabList = $(".tabList");
|
||
var tabNavigationWidth = $tabNavigation.width();
|
||
var tabListWidth = $tabList[0].scrollWidth;
|
||
|
||
if (tabListWidth > tabNavigationWidth) {
|
||
var scrollLeft;
|
||
|
||
// #information 또는 #moreFeatures 탭인 경우 맨 끝으로 스크롤
|
||
if (targetTab === "#information" || targetTab === "#moreFeatures") {
|
||
scrollLeft = tabListWidth - tabNavigationWidth;
|
||
} else {
|
||
// 탭의 절대 위치 계산 (부모 컨테이너 기준)
|
||
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;
|
||
scrollLeft = tabCenter - navigationCenter;
|
||
|
||
// 스크롤 범위 제한
|
||
var maxScrollLeft = tabListWidth - tabNavigationWidth;
|
||
scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft));
|
||
}
|
||
|
||
// 부드러운 스크롤 애니메이션
|
||
$tabNavigation.animate(
|
||
{
|
||
scrollLeft: scrollLeft,
|
||
},
|
||
100,
|
||
"easeInOutQuart"
|
||
);
|
||
}
|
||
}
|
||
|
||
// 탭 네비게이션 기능
|
||
$(document).ready(function () {
|
||
// Disney 스와이퍼 초기화
|
||
var disneySwiper = new Swiper(".disneySwiper", {
|
||
slidesPerView: "auto",
|
||
spaceBetween: 16,
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 1500,
|
||
disableOnInteraction: false,
|
||
},
|
||
// pagination: {
|
||
// el: ".swiper-pagination",
|
||
// clickable: true,
|
||
// },
|
||
// navigation: {
|
||
// nextEl: ".swiper-button-next",
|
||
// prevEl: ".swiper-button-prev",
|
||
// },
|
||
// breakpoints: {
|
||
// 640: {
|
||
// slidesPerView: 3,
|
||
// spaceBetween: 16,
|
||
// },
|
||
// 768: {
|
||
// slidesPerView: 3,
|
||
// spaceBetween: 24,
|
||
// },
|
||
// 1024: {
|
||
// slidesPerView: 4.5,
|
||
// spaceBetween: 24,
|
||
// },
|
||
// },
|
||
});
|
||
|
||
var disneyFeaturesSwiper = new Swiper(".features-list-swiper", {
|
||
slidesPerView: "auto",
|
||
spaceBetween: 8,
|
||
// loop: true,
|
||
// autoplay: {
|
||
// delay: 1500,
|
||
// disableOnInteraction: false,
|
||
// },
|
||
// pagination: {
|
||
// el: ".swiper-pagination",
|
||
// clickable: true,
|
||
// },
|
||
// navigation: {
|
||
// nextEl: ".swiper-button-next",
|
||
// prevEl: ".swiper-button-prev",
|
||
// },
|
||
breakpoints: {
|
||
768: {
|
||
spaceBetween: 16,
|
||
},
|
||
},
|
||
});
|
||
|
||
// 탭 클릭 이벤트
|
||
$(".tabLink").on("click", function (e) {
|
||
e.preventDefault();
|
||
|
||
var targetTab = $(this).attr("href");
|
||
var $targetContent = $(targetTab);
|
||
var $clickedTab = $(this).parent();
|
||
const $parentTabNavigation = $(".tabNavigation");
|
||
|
||
// 모든 탭에서 active 클래스 제거
|
||
$(".tabItem").removeClass("active");
|
||
$(".tabContent").removeClass("active");
|
||
|
||
// 클릭한 탭에 active 클래스 추가
|
||
$clickedTab.addClass("active");
|
||
$targetContent.addClass("active");
|
||
|
||
console.log("🚀 ~ 222 targetTab:", targetTab);
|
||
|
||
if (targetTab != "#themeSeries" && targetTab != "#overview") {
|
||
$parentTabNavigation.addClass("is_black");
|
||
} else {
|
||
$parentTabNavigation.removeClass("is_black");
|
||
}
|
||
|
||
// 탭 가로스크롤 중앙 정렬
|
||
scrollToTab(targetTab, $clickedTab);
|
||
|
||
// 해당 탭 콘텐츠로 스크롤 이동
|
||
if ($targetContent.length) {
|
||
var scrollTop = $targetContent.offset().top; // 헤더 높이만큼 여백 + 100
|
||
window.scrollTo(0, scrollTop);
|
||
}
|
||
});
|
||
|
||
// 스크롤 이벤트로 탭 자동 포커싱 (throttle 적용)
|
||
var handleScroll = throttle(function () {
|
||
var scrollTop = $(window).scrollTop();
|
||
|
||
if (scrollTop <= 50) {
|
||
$("#overview .parallax-bg").removeClass("reveal2");
|
||
}
|
||
|
||
// 각 탭 콘텐츠의 위치 확인
|
||
$(".tabContent").each(function () {
|
||
var $this = $(this);
|
||
var contentTop = $this.offset().top;
|
||
var contentHeight = $this.outerHeight();
|
||
var contentBottom = contentTop + contentHeight;
|
||
|
||
// 현재 스크롤 위치가 탭 콘텐츠 영역에 있는지 확인
|
||
if (scrollTop + 200 >= contentTop && scrollTop + 300 <= contentBottom) {
|
||
var tabId = $this.attr("id");
|
||
var $currentTab = $('.tabLink[href="#' + tabId + '"]').parent();
|
||
var $parentTabNavigation = $('.tabLink[href="#' + tabId + '"]')
|
||
.parent()
|
||
.parent()
|
||
.parent()
|
||
.parent();
|
||
|
||
// 현재 활성화된 탭과 다르면 변경
|
||
if (!$currentTab.hasClass("active")) {
|
||
$(".tabItem").removeClass("active");
|
||
$(".tabContent").removeClass("active");
|
||
$currentTab.addClass("active");
|
||
$this.addClass("active");
|
||
|
||
if (tabId === "ThemeSelectGuide" || tabId === "recentTheme" || tabId === "availableCars" || tabId === "moreFeatures" || tabId === "information" || tabId === "moreFeatures") {
|
||
$parentTabNavigation.addClass("is_black");
|
||
} else {
|
||
// console.log("🚀 ~ 111 tabId은 블랙 아냐:", tabId);
|
||
$parentTabNavigation.removeClass("is_black");
|
||
}
|
||
|
||
// 탭 가로스크롤 중앙 정렬
|
||
scrollToTab("#" + tabId, $currentTab);
|
||
}
|
||
}
|
||
});
|
||
}, 100);
|
||
|
||
$(window).on("scroll", handleScroll);
|
||
|
||
// URL 해시에 따른 탭 활성화
|
||
if (window.location.hash) {
|
||
var hashTab = window.location.hash;
|
||
if ($(hashTab).length) {
|
||
$(".tabItem").removeClass("active");
|
||
$(".tabContent").removeClass("active");
|
||
$('.tabLink[href="' + hashTab + '"]')
|
||
.parent()
|
||
.addClass("active");
|
||
$(hashTab).addClass("active");
|
||
const $parentTabNavigation = $(".tabNavigation");
|
||
|
||
// 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
|
||
setTimeout(function () {
|
||
var $targetContent = $(hashTab);
|
||
if ($targetContent.length) {
|
||
var scrollTop = $targetContent.offset().top;
|
||
window.scrollTo(0, scrollTop);
|
||
}
|
||
}, 10);
|
||
}
|
||
}
|
||
});
|
||
|
||
// ScrollMagic 섹션 이동 애니메이션
|
||
$(document).ready(function () {
|
||
// GSAP과 ScrollMagic이 로드되었는지 확인
|
||
if (typeof gsap === "undefined" || typeof ScrollMagic === "undefined") {
|
||
console.error("GSAP 또는 ScrollMagic이 로드되지 않았습니다.");
|
||
return;
|
||
}
|
||
|
||
// ScrollMagic 컨트롤러 초기화
|
||
var controller = new ScrollMagic.Controller({
|
||
globalSceneOptions: {
|
||
triggerHook: 0.4, // 화면 중간에서 트리거 (0 = 상단, 0.5 = 중간, 1 = 하단)
|
||
reverse: true,
|
||
},
|
||
});
|
||
|
||
// 각 섹션에 대한 애니메이션 설정
|
||
var sections = [
|
||
{ id: "#overview", class: ".section1" },
|
||
{ id: "#DisneyTheme", class: ".section2" },
|
||
{ id: "#DisneyPixarTheme", class: ".section3" },
|
||
{ id: "#MarvelTheme", class: ".section4" },
|
||
{ id: "#NationalGeographicTheme", class: ".section5" },
|
||
{ id: "#ComingSoon", class: ".section6" },
|
||
// { id: "#ThemeSelectGuide", class: ".section7" },
|
||
// { id: "#moreFeatures", class: ".section8" },
|
||
// { id: "#information", class: ".section9" },
|
||
];
|
||
|
||
// 네비게이션 탭 클릭 시 즉시 스크롤 이동
|
||
$(".tabLink").on("click", function (e) {
|
||
e.preventDefault();
|
||
var target = $(this).attr("href");
|
||
var $targetElement = $(target);
|
||
let scrollTop;
|
||
|
||
if (target === "#ThemeSelectGuide") {
|
||
scrollTop = $targetElement.offset().top;
|
||
} else {
|
||
scrollTop = $targetElement.offset().top - 80;
|
||
}
|
||
|
||
if ($targetElement.length) {
|
||
window.scrollTo(0, scrollTop);
|
||
}
|
||
});
|
||
|
||
// 스크롤 진행률에 따른 네비게이션 하이라이트
|
||
var navScenes = [];
|
||
sections.forEach(function (section, index) {
|
||
var navScene = new ScrollMagic.Scene({
|
||
triggerElement: section.id,
|
||
duration: "100%",
|
||
offset: -100,
|
||
})
|
||
.on("enter", function () {
|
||
$(".tabLink").removeClass("active");
|
||
$('.tabLink[href="' + section.id + '"]').addClass("active");
|
||
})
|
||
.on("leave", function () {
|
||
// console.log("🚀 ~ NAV LEAVE", section.id);
|
||
})
|
||
.on("end", function (event) {
|
||
// console.log("🚀 ~ NAV END", section.id, "scrollTop:", $(window).scrollTop());
|
||
})
|
||
.addTo(controller);
|
||
|
||
navScenes.push(navScene);
|
||
});
|
||
|
||
// 디버그 모드 - 트리거 인디케이터 표시
|
||
controller.addScene(navScenes);
|
||
|
||
var startpin = new ScrollMagic.Scene({
|
||
duration: 100,
|
||
})
|
||
.setPin("section#overview")
|
||
.addTo(controller);
|
||
|
||
// 모든 씬에 인디케이터 추가
|
||
sections.forEach(function (section, index) {
|
||
if (section.id === "#overview") {
|
||
// section1의 씬들에 인디케이터 추가
|
||
var scene1 = new ScrollMagic.Scene({
|
||
triggerElement: section.id,
|
||
duration: "10%",
|
||
offset: 0,
|
||
})
|
||
.setTween(
|
||
TweenMax.fromTo(
|
||
section.class + " .content-item[data-reveal='1']",
|
||
{ y: 50, opacity: 0 },
|
||
{
|
||
y: 0,
|
||
opacity: 1,
|
||
duration: 0.8,
|
||
ease: "power2.out",
|
||
}
|
||
)
|
||
)
|
||
// .addIndicators({ name: "Section1 - Title" })
|
||
.addTo(controller);
|
||
|
||
new ScrollMagic.Scene({
|
||
offset: 0,
|
||
duration: 10,
|
||
})
|
||
.setTween(gsap.fromTo(section.class + " .content-item[data-reveal='1']", { y: 0, opacity: 1 }, { y: -50, opacity: 0, duration: 0.8, ease: "power2.out" }))
|
||
.addTo(controller);
|
||
|
||
var scene2 = new ScrollMagic.Scene({
|
||
triggerElement: section.id,
|
||
duration: "0",
|
||
offset: 0,
|
||
})
|
||
// .addIndicators({ name: "Section1 - Description" })
|
||
.addTo(controller);
|
||
|
||
new ScrollMagic.Scene({
|
||
offset: 0,
|
||
duration: 0.2,
|
||
})
|
||
.setTween(
|
||
TweenMax.fromTo(
|
||
section.class + " .content-item[data-reveal='2']",
|
||
{ y: 30, opacity: 0 },
|
||
{
|
||
y: 0,
|
||
opacity: 1,
|
||
duration: 0.2,
|
||
ease: "power2.out",
|
||
onStart: function () {
|
||
$("#overview .parallax-bg").addClass("reveal2");
|
||
},
|
||
}
|
||
)
|
||
)
|
||
.addTo(controller);
|
||
} else {
|
||
// 다른 섹션들의 씬에 인디케이터 추가
|
||
var scene = new ScrollMagic.Scene({
|
||
triggerElement: section.id,
|
||
duration: "100%",
|
||
offset: 0,
|
||
})
|
||
.on("enter", function () {
|
||
var bgMap = {
|
||
"#DisneyTheme": "bg1",
|
||
"#DisneyPixarTheme": "bg2",
|
||
"#MarvelTheme": "bg3",
|
||
"#NationalGeographicTheme": "bg4",
|
||
"#ComingSoon": "bg5",
|
||
};
|
||
|
||
var targetBg = bgMap[section.id];
|
||
if (targetBg) {
|
||
TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, duration: 0.2, ease: "power2.out", zIndex: 0 });
|
||
TweenMax.to(".parallax-bg-wrap .parallax-bg." + targetBg, { opacity: 1, duration: 0.2, ease: "power2.out" });
|
||
} else {
|
||
TweenMax.to(".parallax-bg-wrap .parallax-bg", { opacity: 0, ease: "power2.out" });
|
||
}
|
||
})
|
||
.on("leave", function () {
|
||
// console.log("🚀 ~ LEAVE 11111", section.id);
|
||
})
|
||
// .on("start", function (event) {
|
||
// console.log("🚀 ~ START", section.id, "scrollTop:", event.scrollPos);
|
||
// })
|
||
// .on("end", function (event) {
|
||
// console.log("🚀 ~ END", section.id, "scrollTop:", event.scrollPos);
|
||
// })
|
||
.on("progress", function (event) {
|
||
if (event.progress === 1) {
|
||
// console.log("🚀 ~ PROGRESS 100%", section.id, "scrollTop:", event.scrollPos);
|
||
}
|
||
})
|
||
|
||
.setTween(gsap.fromTo(section.class + " .content-item", { y: 50, opacity: 1 }, { y: 0, opacity: 1, duration: 0.2, ease: "power2.out" }))
|
||
// .addIndicators({ name: "Section" + section.id + (index + 1) })
|
||
.addTo(controller);
|
||
}
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|