1224 lines
56 KiB
HTML
1224 lines
56 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 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" 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">
|
||
<div class="promotionHeader">
|
||
<div class="promotionHeaderInner">
|
||
<div class="pageTitle">
|
||
<h1>Inspired Together</h1>
|
||
<p>
|
||
Disney and Kia bring<br class="br-m" />
|
||
imagination, color and emotion to your screen.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 탭 네비게이션 -->
|
||
<div class="tabNavigation">
|
||
<div class="tabNavigationInner">
|
||
<ul class="tabList">
|
||
<li class="tabItem active">
|
||
<a href="#overview" class="tabLink">Overview</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#availableCars" class="tabLink">Available Cars</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#themeSelectGuide" class="tabLink">Select Guide</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#moreFeatures" class="tabLink">More Features</a>
|
||
</li>
|
||
<li class="tabItem">
|
||
<a href="#information" class="tabLink">Information</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 탭 콘텐츠 영역 -->
|
||
<div class="tabContentArea">
|
||
<div class="tabContentInner">
|
||
<!-- Overview 탭 -->
|
||
<div id="overview" class="tabContent overview active">
|
||
<div class="contentSection">
|
||
<div class="contentSectionInner">
|
||
<div class="title-area">
|
||
<h2>New Display Themes</h2>
|
||
<p>
|
||
Where innovation meets timeless storytelling.<br /><br />
|
||
Kia and The Walt Disney Company present stunning display themes - each a canvas of imagination and story, infused with the innovation of Kia. <br />
|
||
From your morning commute to weekend escapes, every drive becomes an unforgettable chapter.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Disney 테마 스와이퍼 -->
|
||
<div class="disneySwiperContainer">
|
||
<div class="swiper disneySwiper">
|
||
<div class="swiper-wrapper">
|
||
<div class="swiper-slide">
|
||
<div class="themeCard frozen">
|
||
<div class="themeIcon">
|
||
<img src="../assets/images/kia/promotion/img_overview01.png" alt="Frozen Theme" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="themeCard mickey">
|
||
<div class="themeIcon">
|
||
<img src="../assets/images/kia/promotion/img_overview02.png" alt="Mickey Mouse Theme" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="themeCard toyStory">
|
||
<div class="themeIcon">
|
||
<img src="../assets/images/kia/promotion/img_overview03.png" alt="Toy Story Theme" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="swiper-slide">
|
||
<div class="themeCard moana">
|
||
<div class="themeIcon">
|
||
<img src="../assets/images/kia/promotion/img_overview04.png" alt="Moana Theme" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Available Cars 탭 -->
|
||
<div id="availableCars" class="tabContent available-cars">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h3>Available Cars</h3>
|
||
<p>Introducing cars that are available with Disney Display Themes for purchase. Look forward to more updates in the future!</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>Notice</h4>
|
||
<ul>
|
||
<li>Availabe after OTA updates : EV6, EV9, Sorento, Carnival, K5, K8</li>
|
||
<li>2026 The New Sorento is available for purchase regardless OTA updates.</li>
|
||
<li>It can be purchased only for users of the Kia Connect service.</li>
|
||
<li>It is only available for vehicles with a 12.3-inch cluster among the ccNC infotainment platforms.</li>
|
||
<li>Purchase availability can be found on the detailed page of each product.</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Select Guide 탭 -->
|
||
<div id="themeSelectGuide" class="tabContent theme-select-guide">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h3>Feel like you are driving into the Disney Universe</h3>
|
||
<h2>Theme Select Guide</h2>
|
||
<p>
|
||
From timeless classics to heroic adventures, discover a colorful lineup of Disney Display Themes. <br />
|
||
Explore them all, find your favorite, and make your ride feel more magical.
|
||
</p>
|
||
</div>
|
||
<div class="guides-wrap">
|
||
<!-- Start Disney 테마 -->
|
||
<div class="guides-section disney-theme">
|
||
<h4>Disney Display Themes</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="#" class="btn-viewAll">
|
||
<span>View all</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>Disney Mickey & Friends</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>Disney Frozen</strong>
|
||
</div>
|
||
|
||
<div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>STAY TUNED</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Disney 테마 -->
|
||
<!-- Start Pixar 테마 -->
|
||
<div class="guides-section disney-pixar-theme">
|
||
<h4>Disney Pixar Display Themes</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="#" class="btn-viewAll">
|
||
<span>View all</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>Pixar Toy Story</strong>
|
||
</div>
|
||
|
||
<div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>STAY TUNED</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Pixar 테마 -->
|
||
<!-- Start Marvel 테마 -->
|
||
<div class="guides-section marvel-theme">
|
||
<h4>Marvel Display Themes</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="#" class="btn-viewAll">
|
||
<span>View all</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>Marvel’s Avengers Assemble</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>Marvel’s Avengers Comics</strong>
|
||
</div>
|
||
|
||
<div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>STAY TUNED</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Marvel 테마 -->
|
||
<!-- Start Star Wars 테마 -->
|
||
<div class="guides-section starwars-theme">
|
||
<h4>Star Wars Display Themes</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>© Lucasfilm</span>
|
||
</div>
|
||
<!-- <a href="#" class="btn-viewAll">
|
||
<span>View all</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" alt="Disney" />
|
||
</span>
|
||
<strong>Disney Mickey & Friends</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/disney_frozen.png" alt="Disney" />
|
||
</span>
|
||
<strong>Disney Frozen</strong>
|
||
</div> -->
|
||
|
||
<div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>STAY TUNED</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- End Marvel 테마 -->
|
||
<!-- Start National Geographic 테마 -->
|
||
<div class="guides-section national-geographic-theme">
|
||
<h4>National Geographic Display Themes</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</span>
|
||
</div>
|
||
<a href="#" class="btn-viewAll">
|
||
<span>View all</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" alt="National Geographic Baby Animals" />
|
||
</span>
|
||
<strong>National Geographic Baby Animals</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/national_logo2.png" alt="National Geographic Space Wonder" />
|
||
</span>
|
||
<strong>National Geographic Space Wonder</strong>
|
||
</div>
|
||
<div class="item">
|
||
<span class="logo">
|
||
<img src="../assets/images/kia/promotion/national_logo3.png" alt="National Geographic Landscapes" />
|
||
</span>
|
||
<strong>National Geographic Landscapes</strong>
|
||
</div>
|
||
|
||
<!-- <div class="item stay-tuned-item">
|
||
<div class="stay-tuned">
|
||
<span></span>
|
||
<strong>STAY TUNED</strong>
|
||
</div>
|
||
</div> -->
|
||
</div>
|
||
</div>
|
||
<!-- End National Geographic 테마 -->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- More Features 탭 -->
|
||
<div id="moreFeatures" class="tabContent more-features">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h2>More Digital Features</h2>
|
||
<p>Check out more available digital features</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>Lighting Patterns</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>Lighting Patterns</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_features03.jpg" alt="Features" />
|
||
</div>
|
||
<div class="txt">
|
||
<strong>Lighting Patterns</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_features04.jpg" alt="Features" />
|
||
</div>
|
||
<div class="txt">
|
||
<strong>Lighting Patterns</strong>
|
||
<p>₩ 180,000</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="btn-area">
|
||
<div class="oneButton">
|
||
<a href="/kr/info/registration-guide"><p>Go to the list</p></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Information 탭 -->
|
||
<div id="information" class="tabContent information">
|
||
<div class="contentSection">
|
||
<div class="title-area">
|
||
<h2>Information</h2>
|
||
</div>
|
||
<div class="info-section">
|
||
<!-- Target Models 섹션 -->
|
||
<div class="item">
|
||
<h3>Target models</h3>
|
||
<ul>
|
||
<li>EV5, EV3, EV4, EV6, Tasman, Sorento, Sportage, Carnival, K5, K8</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Available Period 섹션 -->
|
||
<div class="item">
|
||
<h3>Available Period</h3>
|
||
<ul>
|
||
<li>If you choose to use it for a lifetime, you can use it without a period limit. If you choose a monthly/annual subscription, you can use it for the specified period.</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Legal Notice 섹션 -->
|
||
<div class="item">
|
||
<h3>Legal Notice</h3>
|
||
<ul>
|
||
<li class="bu-none">© Disney © Disney/Pixar © 2025 MARVEL © Lucasfilm © National Geographic</li>
|
||
</ul>
|
||
</div>
|
||
</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>
|
||
|
||
<div class="popupWarp" style="display: none">
|
||
<div class="popInner termsPop" style="display: none">
|
||
<div class="popContents">
|
||
<h1>개인정보 수집/이용 및 기타 동의</h1>
|
||
<div class="termsCon">
|
||
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. ManyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many</p>
|
||
</div>
|
||
<div>
|
||
<div class="oneButton">
|
||
<a href=""><p>닫기</p></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="popInner payInfo" style="display: none">
|
||
<div class="popContents">
|
||
<h1>결제 방법 안내</h1>
|
||
<div class="payInfoCon">
|
||
<p>
|
||
<strong>이미 등록된 결제 방법이 있습니다.<br />(지로, 서울특별시 OO구 OOO로 OO길 OO)<br />해당 결제 방법으로 요금을 납부하시겠습니까?</strong>
|
||
<span>※ 결제 방법을 다른 카드로 변경하실 경우 CCS앱에서 변경 가능합니다.</span>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<div class="towButton">
|
||
<button class="cartBtn leftBtn"><p>취소</p></button>
|
||
<button class="PurchaseBtn rightBtn"><p>확인</p></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="popInner payInfo" style="display: none">
|
||
<div class="popContents">
|
||
<h1>결제 방법 안내</h1>
|
||
<div class="payInfoCon">
|
||
<p>
|
||
<strong>등록된 결제 방법이 없어 요금제 가입 진행이 불가합니다. 결제 카드 등록은 블루링크 App에서 진행해주시길 바랍니다.</strong>
|
||
</p>
|
||
</div>
|
||
<div>
|
||
<div class="oneButton">
|
||
<a href=""><p>닫기</p></a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--//footer-->
|
||
<!-- 2025.08.27 추가 -->
|
||
<div id="carListPopup" class="popupWarp" style="display: none">
|
||
<div class="popContents">
|
||
<h2>차량 선택하기 (5)</h2>
|
||
<div class="payInfoCon">
|
||
<div class="carlistItem">
|
||
<ul>
|
||
<!-- [D] 선택 시 selected 클래스 추가 -->
|
||
<li class="selected">
|
||
<button>
|
||
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
|
||
<em>111JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button>
|
||
<strong>쏘렌토(MQ4) 하이브리드</strong>
|
||
<em>222JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button>
|
||
<strong>스포티지 개조 25</strong>
|
||
<em>333JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button>
|
||
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
|
||
<em>444JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button>
|
||
<strong>쏘렌토(MQ4) 하이브리드</strong>
|
||
<em>555JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button>
|
||
<strong>스포티지 개조 25</strong>
|
||
<em>666JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button>
|
||
<strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
|
||
<em>444JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button>
|
||
<strong>쏘렌토(MQ4) 하이브리드</strong>
|
||
<em>555JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
<li>
|
||
<button>
|
||
<strong>스포티지 개조 25</strong>
|
||
<em>666JH4TB2H26CC012345</em>
|
||
</button>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="towButton">
|
||
<button class="cartBtn leftBtn" onclick="close_layer_popup('carListPopup')"><p>취소</p></button>
|
||
<button class="PurchaseBtn rightBtn" onclick="close_layer_popup('carListPopup')"><p>선택</p></button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!--// 2025.08.27 추가 -->
|
||
<script>
|
||
AOS.init();
|
||
|
||
if ($(".youtubeArea").hasClass("youtubeArea_pdp") === true) {
|
||
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>';
|
||
$(".youtubeArea_pdp").html(youtube_frame);
|
||
}
|
||
|
||
// 스크롤 이벤트 최적화를 위한 throttle 함수
|
||
function throttle(func, wait) {
|
||
var timeout;
|
||
return function executedFunction(...args) {
|
||
const later = () => {
|
||
clearTimeout(timeout);
|
||
func(...args);
|
||
};
|
||
clearTimeout(timeout);
|
||
timeout = setTimeout(later, wait);
|
||
};
|
||
}
|
||
|
||
// 탭 네비게이션 기능
|
||
$(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: 16,
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 1500,
|
||
disableOnInteraction: false,
|
||
},
|
||
// pagination: {
|
||
// el: ".swiper-pagination",
|
||
// clickable: true,
|
||
// },
|
||
// navigation: {
|
||
// nextEl: ".swiper-button-next",
|
||
// prevEl: ".swiper-button-prev",
|
||
// },
|
||
// breakpoints: {
|
||
// 768: {
|
||
// slidesPerView: 3,
|
||
// },
|
||
// 1024: {
|
||
// slidesPerView: 4,
|
||
// },
|
||
// },
|
||
});
|
||
|
||
// 탭 클릭 이벤트
|
||
$(".tabLink").on("click", function (e) {
|
||
e.preventDefault();
|
||
|
||
var targetTab = $(this).attr("href");
|
||
console.log("🚀 ~ 111 targetTab:", targetTab);
|
||
var $targetContent = $(targetTab);
|
||
var $clickedTab = $(this).parent();
|
||
|
||
// 모든 탭에서 active 클래스 제거
|
||
$(".tabItem").removeClass("active");
|
||
$(".tabContent").removeClass("active");
|
||
|
||
// 클릭한 탭에 active 클래스 추가
|
||
$clickedTab.addClass("active");
|
||
$targetContent.addClass("active");
|
||
|
||
// 탭 가로스크롤 중앙 정렬
|
||
var $tabNavigation = $(".tabNavigation");
|
||
var $tabList = $(".tabList");
|
||
var tabNavigationWidth = $tabNavigation.width();
|
||
|
||
// 탭 리스트의 실제 너비 계산 (여러 방법 시도)
|
||
var tabListWidth = $tabList[0].scrollWidth; // 스크롤 가능한 전체 너비
|
||
var tabListOffsetWidth = $tabList[0].offsetWidth; // 현재 보이는 너비
|
||
var tabListOuterWidth = $tabList.outerWidth(); // jQuery outerWidth
|
||
|
||
console.log("탭 네비게이션 너비:", tabNavigationWidth);
|
||
console.log("탭 리스트 scrollWidth:", tabListWidth);
|
||
console.log("탭 리스트 offsetWidth:", tabListOffsetWidth);
|
||
console.log("탭 리스트 outerWidth:", tabListOuterWidth);
|
||
|
||
// 탭 리스트가 네비게이션보다 넓을 때만 스크롤 조정
|
||
if (tabListWidth > tabNavigationWidth) {
|
||
// 탭의 절대 위치 계산 (부모 컨테이너 기준)
|
||
var tabOffsetLeft = $clickedTab.offset().left;
|
||
var tabNavigationOffsetLeft = $tabNavigation.offset().left;
|
||
var relativeTabOffset = tabOffsetLeft - tabNavigationOffsetLeft;
|
||
var tabWidth = $clickedTab.outerWidth();
|
||
var tabCenter = relativeTabOffset + tabWidth / 2;
|
||
var navigationCenter = tabNavigationWidth / 2;
|
||
var scrollLeft = tabCenter - navigationCenter;
|
||
|
||
// 스크롤 범위 제한
|
||
var maxScrollLeft = tabListWidth - tabNavigationWidth;
|
||
scrollLeft = Math.max(0, Math.min(scrollLeft, maxScrollLeft));
|
||
|
||
// 부드러운 스크롤 애니메이션
|
||
$tabNavigation.animate(
|
||
{
|
||
scrollLeft: scrollLeft,
|
||
},
|
||
300,
|
||
"easeInOutQuart"
|
||
);
|
||
|
||
// 대안 방법: scrollTo 사용
|
||
setTimeout(function () {
|
||
$tabNavigation[0].scrollTo({
|
||
left: scrollLeft,
|
||
behavior: "smooth",
|
||
});
|
||
}, 50);
|
||
}
|
||
|
||
// 해당 탭 콘텐츠로 스크롤 이동
|
||
if ($targetContent.length) {
|
||
var scrollTop = $targetContent.offset().top; // 헤더 높이만큼 여백
|
||
$("html, body").animate(
|
||
{
|
||
scrollTop: scrollTop,
|
||
},
|
||
500,
|
||
"easeInOutQuart"
|
||
);
|
||
}
|
||
});
|
||
|
||
// 스크롤 이벤트로 탭 자동 포커싱 (throttle 적용)
|
||
var handleScroll = throttle(function () {
|
||
var scrollTop = $(window).scrollTop();
|
||
|
||
// 각 탭 콘텐츠의 위치 확인
|
||
$(".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 $correspondingTab = $('.tabLink[href="#' + tabId + '"]').parent();
|
||
|
||
// 현재 활성화된 탭과 다르면 변경
|
||
if (!$correspondingTab.hasClass("active")) {
|
||
$(".tabItem").removeClass("active");
|
||
$(".tabContent").removeClass("active");
|
||
$correspondingTab.addClass("active");
|
||
$this.addClass("active");
|
||
}
|
||
}
|
||
});
|
||
}, 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");
|
||
|
||
// 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
|
||
setTimeout(function () {
|
||
var $targetContent = $(hashTab);
|
||
if ($targetContent.length) {
|
||
var scrollTop = $targetContent.offset().top - 100;
|
||
$("html, body").animate(
|
||
{
|
||
scrollTop: scrollTop,
|
||
},
|
||
500,
|
||
"easeInOutQuart"
|
||
);
|
||
}
|
||
}, 100);
|
||
}
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|