아우디 서비스 작업완료

app/assets/scss/admin.scss

@@ -144,6 +144,32 @@ html {
     padding:0 var(--spacing-relative-3xl);
     .service--detail{
       padding:45px 0px;
+      h1{
+        margin: 0 0 var(--spacing-relative-md) 0;
+        color: rgb(252, 252, 253);        
+        letter-spacing: 0px;
+        font-weight: 400;
+        text-decoration: none;
+        font-size: 28px;
+        line-height: 40px;
+        font-stretch: 130%;
+
+        
+        @media (min-width: 1024px) {          
+          font-size: 36px;
+          line-height: 52px;          
+        }
+        
+        @media (min-width: 1440px) {          
+          font-size: 40px;
+          line-height: 60px;          
+        }
+        
+        @media (min-width: 1920px) {          
+          font-size: 44px;
+          line-height: 64px;          
+        }
+      }
       h2{
         margin: 0 0 var(--spacing-relative-md) 0;
         color: rgb(252, 252, 253);
@@ -184,7 +210,38 @@ html {
         font-stretch: 105%;        
       }
 
+      >h4{
+        margin: 0 0 var(--spacing-relative-md) 0;
+        color: rgb(252, 252, 253);        
+        letter-spacing: 0px;
+        font-weight: 400;
+        text-decoration: none;
+        font-size: 16px;
+        line-height: 24px;
+        font-stretch: 130%;
+
+        @media (min-width: 1440px) {       
+          font-size: 18px;
+          line-height: 28px;       
+        }
 
+        @media (min-width: 1920px) {        
+          font-size: 20px;
+          line-height: 32px;        
+        }      
+      
+      }
+
+      >p{
+        margin: 0px;
+        color: rgba(252, 252, 253, 0.7);        
+        letter-spacing: 0px;
+        font-weight: 400;
+        text-decoration: none;
+        font-size: 16px;
+        line-height: 24px;
+        font-stretch: 105%;
+      }
       .service--process--list{
         padding-top:80px;
         >li{
@@ -1033,6 +1090,29 @@ html {
       line-height: 60px;      
     }
   }
+
+  .sub--title{
+    margin: 0 0 var(--spacing-relative-md) 0;
+    color: rgb(252, 252, 253);    
+    letter-spacing: 0px;
+    font-weight: 400;
+    text-decoration: none;
+    font-size: 16px;
+    line-height: 24px;
+    font-stretch: 130%;
+    display: flex;
+    padding-bottom:20px;
+
+    @media (min-width: 1440px) {      
+      font-size: 18px;
+      line-height: 28px;      
+    }
+
+    @media (min-width: 1920px) {      
+      font-size: 20px;
+      line-height: 32px;      
+    }
+  }
   
   .title--description {
     margin: 0;    
@@ -1903,7 +1983,21 @@ html {
       }
   
     }
-    
+    .product--card--smalltitle {
+      margin: 0px;
+      color: rgb(252, 252, 253);      
+      letter-spacing: 0px;
+      font-weight: 400;
+      text-decoration: none;
+      font-size: 20px;
+      line-height: 32px;
+      font-stretch: 130%;  
+
+      @media (min-width: 1440px) {      
+        font-size: 24px;
+        line-height: 36px;        
+      }
+    }
     .product--card--subtitle {
       margin: 0;
       color: rgba(252, 252, 253, 0.8);
@@ -1926,6 +2020,20 @@ html {
         font-stretch: 105%;
       }
     }
+
+    .product--card--small--description{
+      margin-top:20px;
+      p {
+        margin: 0px;
+        color: rgba(252, 252, 253, 0.7);      
+        letter-spacing: 0px;
+        font-weight: 400;
+        text-decoration: none;
+        font-size: 12px;
+        line-height: 20px;
+        font-stretch: 105%;
+      }
+    }
     
     .product--card--actions {
       margin-top: 24px;
@@ -2559,6 +2667,17 @@ html {
   box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
   transition-property: color, box-shadow, background-color;
   
+  &.reverse{
+    background: rgba(44,52,63);                 
+    box-shadow: rgba(219,223,230, .2) 0px 0px 0px 1px inset;
+
+  &:hover {
+    background-color: rgb(24, 29, 37);
+    color: rgb(252, 252, 253);
+    box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+  }
+  }
+
   &:hover {
     background: rgba(44,52,63);                 
     box-shadow: rgba(219,223,230, .2) 0px 0px 0px 1px inset;

app/components/block/ProductCard.vue

@@ -9,15 +9,33 @@
       </div>
       <div class="product--card--content">
         <h2 v-if="title" class="product--card--title">{{ title }}</h2>
+        <h4 v-if="smallTitle" class="product--card--smalltitle">{{ smallTitle }}</h4>
         <h3 v-if="subtitle" class="product--card--subtitle" v-html="subtitle"></h3>
         <div v-if="description" class="product--card--description">
           <p>{{ description }}</p>
         </div>
         <div v-if="buttonText && buttonUrl" class="product--card--actions">
-          <NuxtLink :to="buttonUrl" :target="buttonTarget" class="default--round--btn">
+          <NuxtLink
+            :to="buttonUrl"
+            :target="buttonTarget"
+            class="default--round--btn reverse"
+          >
+            {{ buttonText }}
+          </NuxtLink>
+
+          <NuxtLink
+            v-if="buttonText2"
+            :to="buttonUrl2"
+            :target="buttonTarget2"
+            class="default--round--btn"
+          >
             {{ buttonText }}
           </NuxtLink>
         </div>
+
+        <div v-if="smallDescription" class="product--card--small--description">
+          <p v-html="smallDescription"></p>
+        </div>
         <div v-if="$slots.actions" class="product--card--actions">
           <slot name="actions"></slot>
         </div>
@@ -44,6 +62,9 @@
       type: String,
       required: true,
     },
+    smallTitle: {
+      type: String,
+    },
     subtitle: {
       type: String,
       default: "",
@@ -52,7 +73,10 @@
       type: String,
       default: "",
     },
-
+    smallDescription: {
+      type: String,
+      default: "",
+    },
     // 버튼 관련
     buttonText: {
       type: String,
@@ -68,6 +92,21 @@
       validator: (value) => ["_self", "_blank"].includes(value),
     },
 
+    // 버튼 관련
+    buttonText2: {
+      type: String,
+      default: "",
+    },
+    buttonUrl2: {
+      type: String,
+      default: "/",
+    },
+    buttonTarget2: {
+      type: String,
+      default: "_self",
+      validator: (value) => ["_self", "_blank"].includes(value),
+    },
+
     // 레이아웃 옵션
     layout: {
       type: String,

app/components/block/TitleVisual.vue

@@ -13,6 +13,7 @@
         :class="{ visible: isVisible }"
       >
         <h2 class="title--main" v-html="title"></h2>
+        <span class="sub--title" v-html="subtitle"></span>
         <span class="title--description" v-html="description"></span>
         <div v-if="$slots.default" class="title--additional">
           <slot></slot>
@@ -28,13 +29,16 @@
     title: {
       type: String,
       required: true,
-      default: "특별함을 창조하다",
+      default: "",
+    },
+    subtitle: {
+      type: String,
+      default: "",
     },
     description: {
       type: String,
       required: true,
-      default:
-        "아우디 RS e-tron GT, 아우디 RS 6 Avant, 아우디 RS Q8의 예에서 여러 옵션을 결합하여 Audi exclusive order의 다양성과 개인 맞춤 구성 옵션을 경험해 보세요. 3D 버튼을 클릭하여 3D 보기를 활성화하면 인터랙티브 경험을 할 수 있습니다.",
+      default: "",
     },
     textAlign: {
       type: String,

app/pages/service/acc/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi Service"
+        textLocation="top"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 순정 액세서리"
+        description=""
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <CareProgramItem class="mt--40" :items="careProgramItems4" />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        data-type="square"
+        image="/img/service/acc/myAudiworld QR_1080x1080_1.webp"
+        title="myAudiworld App 다운로드하기"
+        subtitle="QR코드를 스캔하여 편리하게 myAudiworld App을 다운로드하세요."
+        buttonText="안드로이드 마켓 바로가기"
+        buttonUrl="https://play.google.com/store/apps/details?id=com.audiapp"
+        buttonTarget="_blank"
+        buttonText2="아이폰 앱스토어 바로가기"
+        buttonUrl2="https://apps.apple.com/kr/app/myaudiworld/id560016594"
+        buttonTarget2="_blank"
+        layout="horizontal"
+        imagePosition="right"
+      />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+  import ProductCard from "~/components/block/ProductCard.vue";
+
+  const bannerImagePath = ref("/img/service/acc/2019_1400x438_topmain_15.avif");
+  const careProgramItems4 = ref([
+    {
+      imagePath: "/img/service/acc/20220211_092635.avif",
+      title: "Audi Genuine Accessories 차량용 액세서리",
+      description:
+        "아우디 순정 차량용 액세서리의 탁월한 디자인과 기능으로 고객님의 취향과 개성을 더욱 잘 표현할 수 있도록 기회를 제공해 드립니다.",
+      // linkUrl:
+      //   "https://audikoreaevent.co.kr/download/Audi_Parts_Self_Certification_User_Manual_201802.pdf",
+      // linkText: "부품자기인증제 유저매뉴얼 다운로드",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/acc/20220211_092608.avif",
+      title: "Audi Collection 라이프스타일 액세서리",
+      description:
+        "여러분의 시그니쳐 스타일을 만들어보세요. 고객님의 아우디를 주차해도 아우디 네 개의 링에 대한 우리의 열정은 멈추지 않습니다. 이 열정은 우리의 일상 생활로 이어집니다.",
+      // linkUrl: "https://www.audikoreaevent.co.kr/etc/component/index1.jsp",
+      // linkText: "부품가격 조회하기",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/acc/service_.avif",
+      title: "아우디 순정 액세서리 카탈로그",
+      description:
+        "모바일 앱 카탈로그는 아우디 모델별 현재 제품의 포트폴리오로 차량의 내부 및 외부에 적합한 아우디 순정 액세서리를 선택하여 보실 수 있습니다.",
+      linkUrl: "https://www.audikoreaevent.co.kr/lms/accessory/accList.do",
+      linkText: "카달로그 보러가기",
+      linkTarget: "_blank",
+    },
+  ]);
+</script>

app/pages/service/advisor/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi Service"
+        textLocation="top"
+        type="cover"
+      />
+
+      <TitleVisual
+        title="사설수리업체를 위한 권고사항"
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div class="inner--wrapper">
+        <div class="service--detail pt--1">
+          <h4>정비 자료</h4>
+          <br />
+          <p>
+            차량 수리 및 아우디 특수공구공급과 관련해서 어윈(Erwin) 웹사이트를 통해
+            아우디가 제공하는 정비매뉴얼을 참고하시길 바랍니다.<br /><br /><br />
+            아우디 자동차의 수리조치를 위해서는 정비 자료와 충분한 교육 그리고 권장 장비,
+            공구 및 측정장비를 갖추고 있어야 합니다.
+          </p>
+
+          <br /><br /><br />
+          <h4>고장진단기</h4>
+          <br />
+          <p>
+            ODIS (Off-board Diagnostic Information System)의 원활한 작동 및 소프트웨어
+            관련해서는 odissupport@audi.co.kr로 문의 바랍니다.
+          </p>
+          <br /><br /><br />
+          <h4>공구 및 장비</h4>
+          <br />
+          <p>
+            어윈(Erwin) 상 무료로 제공되는 공구 및 장비 카탈로그 참조 후
+            toolsandequipment@audi.co.kr로 문의 바랍니다.
+          </p>
+          <NuxtLink
+            class="more--detail--href mt--20 ft--16"
+            to="https://erwin.audi.com/erwin/showHome.do;jsessionid=2386A6AA0CC6071B872B0A1D67A545FA.ASTPERWEU01"
+            target="_blank"
+          >
+            erWin(어윈) Audi<i class="ico"></i>
+          </NuxtLink>
+          <br /><br /><br />
+          <h4>기술지도 및 교육</h4>
+          <br />
+          <p>
+            기술 및 비기술적 교육 관련해서는 Audi Training Academy를 통해 제공 가능한
+            교육에 대한 상담을 받으실 수 있으며,<br /><br /><br />
+            기술지도 및 교육 관련하여 training@audi.co.kr로 문의 바랍니다.
+          </p>
+          <br /><br /><br />
+          <h4>기술 지원</h4>
+          <br />
+          <p>
+            사설 수리업체의 경우, 기술 지원 또는 차량보안관련 정비작업 필요 시
+            productsupport@audi.co.kr로<br /><br /><br />
+            문의 바랍니다. 기술지원 요청 시에는 아래의 기술문의 양식을 작성 첨부하여
+            주시기 바랍니다.<br /><br /><br />
+            그 외 궁금하신 사항은 고객지원센터를 통해 문의 바랍니다.
+          </p>
+          <NuxtLink
+            class="more--detail--href mt--20 ft--16"
+            to="http://br.nate.com/diagnose.php?r_url=http%3a//www.audikoreaevent.co.kr/download/independent-dealer-technical-escalation_Audi_Korea.zip&from=m"
+            target="_blank"
+          >
+            기술문의양식 다운로드<i class="ico"></i>
+          </NuxtLink>
+          <br /><br /><br />
+          <br /><br /><br />
+          <h4>부품 카달로그</h4>
+          <br />
+          <p>
+            부품 카달로그의 검색을 원하시면 Partslink24 웹사이트를 통해 확인 하시길
+            바라며,<br /><br /><br />
+            궁금한 사항이 있으시면 partscatalogue@audi.co.kr 로 문의 주시길 바랍니다.
+          </p>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+  import ProductCard from "~/components/block/ProductCard.vue";
+
+  const bannerImagePath = ref("/img/service/advisor/21_1920X1080.avif");
+</script>

app/pages/service/careprogram/evbattery.vue

@@ -11,7 +11,7 @@
         textColor="#020203"
       />
 
-      <Nav actvIndex="0" />
+      <Nav actvIndex="5" />
 
       <TitleVisual
         title="고전압 배터리 무상 안전점검"

app/pages/service/genuineparts/index.vue

@@ -0,0 +1,81 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi Service"
+        textLocation="top"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 순정부품"
+        description=""
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        title=""
+        description="Audi 부품 서비스<br/><br/>
+아우디 순정 부품은 고객님의 차량을 위해 설계되었고<br/>
+특히 안전 및 품질 관련하여 AUDI AG에서 승인한 부품으로써 품질, 치수, 재료가 공장 규격에 정확하게 부합합니다.<br/><br/><br/>
+• Technological Lead: 최신 기술과 정보가 가장 빠르게 적용됩니다.<br/><br/><br/>
+• Formula Q: 엄격한 생산기준으로 최고의 품질을 보장합니다.<br/><br/><br/>
+• Exclusive Distribution Channel: 표준화된 물류시스템이 구축된 공식채널에서 공급됩니다.<br/><br/><br/>
+• High Value for Vehicle: 최적의 차량 성능과 최상의 차량 가치를 유지시켜 줍니다."
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <NuxtLink
+            class="more--detail--href mt--20 ft--16"
+            to="/service/program/dealersearch?filter=as"
+            target="_self"
+          >
+            아우디 서비스센터 연락처<i class="ico"></i>
+          </NuxtLink>
+        </div>
+      </div>
+
+      <CareProgramItem class="mt--40" :items="careProgramItems4" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/2019_1400x438_topmain_14_2.avif");
+  const careProgramItems4 = ref([
+    {
+      imagePath: "/img/service/genuineparts/menual.avif",
+      title: "부품자기인증제 유저매뉴얼",
+      description:
+        "Audi Korea는 자동차관리법 시행규칙에 근거하여 자기인증제 대상 품목에 대한 안전성을 보증하며, 자기인증제 해당 부품에 대해 취급설명서를 소비자분들께 공지해 드립니다.",
+      linkUrl:
+        "https://audikoreaevent.co.kr/download/Audi_Parts_Self_Certification_User_Manual_201802.pdf",
+      linkText: "부품자기인증제 유저매뉴얼 다운로드",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/genuineparts/19_1920x1080.avif",
+      title: "부품가격정보",
+      description: "아우디 차량의 각 부품을 조회하고 소비자가격을 확인할 수 있습니다.",
+      linkUrl: "https://www.audikoreaevent.co.kr/etc/component/index1.jsp",
+      linkText: "부품가격 조회하기",
+      linkTarget: "_blank",
+    },
+  ]);
+</script>

app/pages/service/navigationdown/index.vue

@@ -0,0 +1,206 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="내비게이션 데이터 다운로드"
+        textLocation="top"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 내비게이션 데이터 다운로드"
+        subtitle="아우디 차량의 내비게이션 데이터를 편리하게 업데이트 하실 수 있습니다. 새롭게 업데이트 된 지역, 검색 정보, 주의 구간 등이 반영된 지도 데이터로 업데이트 후 사용하세요."
+        description="
+        * 파일 다운로드 시, 차량 모델을 정확하게 확인하시고 다운로드하시기 바랍니다.<br/><br/>
+* 차량에서 업데이트를 진행해야 최신 지도 데이터가 반영됩니다.<br/><br/>
+* 임의로 변경된 파일을 이용할 경우 정상적으로 업데이트가 되지 않으며, 심각한 오류가 발생할 수 있습니다.<br/><br/>
+* 내비게이션 업데이트는 차종에 따라 SD카드 또는 USB를 이용하여 진행되며, SD카드 또는 USB는 사용 전 반드시 포맷하시기 바랍니다.<br/><br/>
+* 한국 외 지역에서 접속한 경우, 내비게이션 지도 데이터를 다운로드할 수 없습니다.<br/><br/>
+* 내비게이션 업데이트가 어려운 경우에는 가까운 아우디 서비스 센터를 방문하시기 바랍니다.<br/><br/>
+* 서비스 센터에서 맵 업데이트를 받으실 경우 공임이 발생합니다. 공임은 서비스 센터마다 상이합니다.<br/><br/>
+* 내비게이션 업데이트 문의 : 아우디 고객지원센터 080-767-2834
+        "
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        title="내비게이션 데이터 다운로드"
+        subtitle=""
+        description=""
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        image="/img/service/navi/Q4 e-tron_1920x1080.webp"
+        title="MIB3 장착모델 적용"
+        smallTitle="MIB3가 장착된 차량의 최신 내비게이션 데이터를 다운로드 하세요."
+        subtitle="· 버전: Ver 1.0<br/>
+· 업데이트 공지: 2025.5.23<br/>
+· 파일용량: 약 35GB<br/>
+· 대상모델: MIB3 인포테인먼트 시스템을 장착한 모델<br/><br/>
+(2021년 이후 출고된 모델에 적용되며, 이 중 2025년식 A6 e-tron, Q6 e-tron, A5, Q5은 적용에서 제외됩니다.)"
+        buttonText="안드로이드 마켓 바로가기"
+        buttonUrl="https://d3qze6fj3yoj86.cloudfront.net/upload/525102401.1100.2_MIB3_KOR_2025.05_P0443_v1.zip"
+        buttonTarget="_blank"
+        layout="horizontal"
+        imagePosition="left"
+        smallDescription="* 내비게이션 정보확인은 차량 내 MMI화면에서 확인하여 주세요.<br/>
+(홈 화면 > 설정 > 일반 > 버전 정보 > 소프트웨어 버전: 3500 이상)"
+      />
+
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h1>내비게이션 데이터 다운로드 시 아래 약관 내용을 반드시 확인해 주세요.</h1>
+          <br />
+          <br />
+          <h2>아우디 내비게이션 지도 데이터 이용약관</h2>
+          <br />
+          <br />
+          <p>
+            아우디 내비게이션 지도데이터를 업데이트 받아 사용하시기 전에 본 아우디
+            내비게이션 지도 데이터 이용약관("본 이용약관")을 자세히 읽으시기 바랍니다. 본
+            이용약관은 귀하가 아우디 차량에 탑재된 내비게이션 시스템을 사용함에 있어,
+            폭스바겐그룹코리아 주식회사(“당사”)가 제공하는 업데이트된 지도 데이터(“본 지도
+            데이터”)를 사용하는 것과 관련한 당사와 귀하 사이의 법적 계약을 구성합니다.<br /><br /><br />
+            귀하가 본 이용약관을 읽고 아래 “동의” 체크박스에 표시를 함으로써, 본
+            이용약관은 당사와 귀하의 관계를 규율하게 됩니다. 당사는 언제든지 당사의
+            재량으로 본 이용약관을 변경할 수 있습니다. 다만, 당사는 이용약관 개정 7일
+            (귀하에게 불리한 내용의 경우 30일) 전 그 개정 사실을 공지할 것입니다.
+          </p>
+          <br /><br /><br />
+          <h4>1. 본 지도 데이터 이용</h4>
+          <br />
+          <p>
+            (1) 본 지도데이터는 당사가 한국에서 판매하는 아우디 차량의 내비게이션
+            시스템(“본건 내비게이션 시스템”)상으로 이용되기 위해서 제작되었습니다.<br />
+            귀하는 본 지도데이터를 이용하여 본건 내비게이션 시스템에 내재된 지도데이터를
+            최신의 내용으로 업데이트할 수 있습니다.<br /><br /><br />
+            (2) 귀하는 본 지도데이터를 개인적인 비영리 용도로만 사용할 수 있습니다.
+            나아가, 귀하는 당사 및 본 지도 데이터 공급업체의 지적 재산권을 침해하지 않는
+            등 본 지도데이터가 사용되는 지역에서 귀사의 본 지도 데이터 사용과 관련하여
+            적용되는 모든 법률을 준수하는 방식으로만 본 지도데이터를 사용하여야 합니다.
+            특히, 귀하는 다음과 같은 방식으로 본 지도데이터를 사용할 수 없으며, 귀하가
+            다음과 같은 방식으로 지도데이터를 사용하는 경우 당사는 귀하에게 부여한 지도
+            데이터 사용권한을 그 즉시 박탈할 수 있습니다.<br /><br />
+            - 본 지도데이터 상으로 표시되는 모든 저작권 고지문, 상표, 기타 여하한 권리
+            관련 고지문을 제거하거나 변경하는 행위<br /><br />
+            - 본 지도데이터의 전부 또는 일부를 재배포하거나 판매하는 행위<br /><br />
+            - 본 지도데이터를 이용하여 새로운 제품이나 서비스를 개발하는 행위<br /><br />
+            - 본 지도데이터의 전부 또는 일부를 복사하는 행위<br /><br />
+            - 본건 내비게이션 시스템을 대체할 수 있는 서비스 또는 그와 상당히 유사한
+            서비스에 사용할 의도로, 본 지도데이터를 이용하는 행위<br /><br />
+            - 해당 지역의 저작권법에 의해 보호되는 컨텐츠 파일 또는 기타 저작물 (또는 해당
+            사용권)에 대한 사용을 제어하기 위해 채용된 기술적 조치를 회피하기 위해 설계된
+            장치, 프로그램 또는 서비스와 함께 본 지도데이터를 이용하는 행위<br /><br /><br />
+            (3) 본 지도데이터는 정보의 일부가 불완전, 부정확하거나 최신의 정보가 아닐 수
+            있습니다. 이에 귀하가 본건 내비게이션 시스템을 사용함에 있어 실제 도로 상황
+            등이 본 지도데이터와 상이할 수 있음을 유의하시기 바랍니다. 귀하의 안전을
+            위하여 항상 귀하의 주변 환경에 유의하시기 바라며, 귀하의 주변 도로상황 등을
+            면밀히 살피시기 바랍니다. 당사는 본 지도데이터의 완전성, 정확성, 최신성 여부를
+            확인하거나 해당 정보를 완성, 수정 또는 업데이트할 어떠한 책임도 부담하지
+            않으며, 또한 해당 정보가 일정한 품질 수준으로 제공되거나 제공될 수 있도록
+            보장할 어떠한 책임도 부담하지 않습니다. 귀하는 본 지도데이터의 사용 및 해당
+            정보를 토대로 한 의사결정에 대하여 독립적인 책임을 부담합니다.<br /><br /><br />
+            (4) 본 지도데이터를 이용하기 위하여서는 차량에 본건 내비게이션 시스템이
+            장착되어 있어야 합니다.<br /><br /><br />
+            (5) 본 지도데이터는 한국 외 지역에서 접속한 경우 다운로드 받을 수 없습니다.<br /><br /><br />
+            (6) 본 지도데이터는 무상으로 제공되나, 당사의 사정에 의하여 중단, 유상제공으로
+            변경되거나 제공되지 아니할 수 있습니다. 이 경우 당사는 본 이용약관에 따라
+            사전에 공지할 것입니다.
+          </p>
+
+          <br /><br /><br />
+          <h4>2. 권리</h4>
+          <br />
+          <p>
+            본 지도 데이터 및 본 지도데이터를 통해 액세스 되는 컨텐츠(이하 "컨텐츠")에
+            대한 권리, 소유권, 권한 및 지적 재산권은 해당 컨텐츠 저작권자가 보유하며,
+            해당하는 저작권법 또는 기타 법률에 의해 보호됩니다. 본 지도데이터는 국제
+            저작권 협약의 보호를 받습니다. 본 지도데이터에 대한 이용권은 본 이용약관에
+            규정된 사항 외에 본 지도 데이터 및 컨텐츠에 대한 어떠한 권한 또는 권리도
+            부여하지 않습니다.
+          </p>
+          <br /><br /><br />
+          <h4>3. 설치 시 주의사항</h4>
+          <br />
+          <p>
+            - 본 지도데이터 이용을 위해서는 충분한 저장 용량의 USB가 필요합니다.<br /><br />
+            - 데이터 압축해제를 위해 윈도우 운영체제와 7-Zip 프로그램 사용을
+            권장합니다.<br />
+            - 또는 “7z”를 지원하는 타 데이터 압축/해제 프로그램도 사용이 가능합니다.<br /><br />
+            - 귀하의 컴퓨터의 하드드라이브는 NTFS 드라이브 형식으로 포맷되어 있어야 본
+            지도데이터를 운용할 수 있습니다.<br /><br />
+            - 일부 USB의 경우 호환성 문제로 인해 차량에서 정상적으로 인식이 되지 않을 수
+            있으니, 사용 전 차량에서 동작 확인 후 사용하시기 바랍니다.<br /><br />
+            - USB의 종류 또는 용량 및 저장된 파일의 형식이나 확장자에 따라 인식 시간에
+            차이가 발생할 수 있으며 이 경우는 제품 고장이 아니니 잠시 기다리시기
+            바랍니다.<br /><br />
+            - 맵 업데이트를 위해서는 USB의 모든 파일을 삭제하거나 포맷하십시오. 반드시 빈
+            USB를 사용하시길 바랍니다.<br /><br />
+            - 인포테인먼트 시스템이 인식을 하기 위해 USB 스틱은 "exFAT" 또는 "NTFS"
+            형식으로 포맷해야 합니다.<br /><br />
+            - 완료된 업데이트는 "내비게이션 데이터베이스"의 버전 정보를 통해 확인할 수
+            있습니다.<br /><br />
+            - 데이터가 복사되는 동안 차량의 시동을 켜놓고 있어야 합니다. 배터리 전압이
+            업데이트를 수행할 수 있을 만큼 높은지 확인하십시오. 차량이 정지 상태에 있을
+            경우, 필요하지 않은 전자장비를 끄십시오. (예: 조명, 공조기, 열선시트 등).
+            필요한 경우 충전기를 차량 배터리에 연결하십시오. 만일 차량을 주차해서
+            프로세스가 중단될 경우, 재시동을 거시면 중단되었던 시점에서 자동으로
+            계속됩니다.
+          </p>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+  import ProductCard from "~/components/block/ProductCard.vue";
+
+  const bannerImagePath = ref("/img/service/navi/Navi_1920x1080.avif");
+  const careProgramItems4 = ref([
+    {
+      imagePath: "/img/service/acc/20220211_092635.avif",
+      title: "Audi Genuine Accessories 차량용 액세서리",
+      description:
+        "아우디 순정 차량용 액세서리의 탁월한 디자인과 기능으로 고객님의 취향과 개성을 더욱 잘 표현할 수 있도록 기회를 제공해 드립니다.",
+      // linkUrl:
+      //   "https://audikoreaevent.co.kr/download/Audi_Parts_Self_Certification_User_Manual_201802.pdf",
+      // linkText: "부품자기인증제 유저매뉴얼 다운로드",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/acc/20220211_092608.avif",
+      title: "Audi Collection 라이프스타일 액세서리",
+      description:
+        "여러분의 시그니쳐 스타일을 만들어보세요. 고객님의 아우디를 주차해도 아우디 네 개의 링에 대한 우리의 열정은 멈추지 않습니다. 이 열정은 우리의 일상 생활로 이어집니다.",
+      // linkUrl: "https://www.audikoreaevent.co.kr/etc/component/index1.jsp",
+      // linkText: "부품가격 조회하기",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/acc/service_.avif",
+      title: "아우디 순정 액세서리 카탈로그",
+      description:
+        "모바일 앱 카탈로그는 아우디 모델별 현재 제품의 포트폴리오로 차량의 내부 및 외부에 적합한 아우디 순정 액세서리를 선택하여 보실 수 있습니다.",
+      linkUrl: "https://www.audikoreaevent.co.kr/lms/accessory/accList.do",
+      linkText: "카달로그 보러가기",
+      linkTarget: "_blank",
+    },
+  ]);
+</script>

app/pages/service/qna/index.vue

@@ -0,0 +1,116 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="아우디 차량 Q&A"
+        textLocation="top"
+        type="cover"
+      />
+
+      <TitleVisual
+        title="아우디 차량 Q&A"
+        description="차량 운행 중 예상치 못한 증상이 발생하신 적 있으신가요? 아우디 차량 Q&A 영상을 통해 빠르고 정확한 정보를 확인하세요."
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <CareProgramItem data-type-row="3" class="mt--40" :items="careProgramItems" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+
+  const bannerImagePath = ref("/img/service/video/20_1920x1080.avif");
+
+  const careProgramItems = ref([
+    {
+      imagePath: "/img/service/qna/qna_1.avif",
+      title: "주행 시 페달의 딸깍 소리",
+
+      linkUrl: "https://youtu.be/6rofGmv5w-s",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_2.avif",
+      title: "시동 시 RPM 2000 증가 후 감소",
+
+      linkUrl: "https://youtu.be/hSiF3IV4-Ag",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_3.avif",
+      title: "시동 끈 후 팬 돌아가는 소리",
+
+      linkUrl: "https://youtu.be/1f2-9D_bj-Q",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_4.avif",
+      title: "우천 시 헤드램프 내 습기",
+
+      linkUrl: "https://youtu.be/tp8VO-RwZGM",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_5.avif",
+      title: "통풍시트 작동 시 소리",
+
+      linkUrl: "https://youtu.be/DaQrf7_rP7M",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_6.avif",
+      title: "와이퍼 소리",
+
+      linkUrl: "https://youtu.be/38dVzE3xqVQ",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_7.avif",
+      title: "유턴 시 하체 드득 소리",
+
+      linkUrl: "https://youtu.be/kEpeeGRZ3XU",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_8.avif",
+      title: "브레이크 밀림",
+
+      linkUrl: "https://youtu.be/QonWqvo599M",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_9.avif",
+      title: "신차 출고 후 엔진 쪽 연기 및 타는 냄새",
+
+      linkUrl: "https://youtu.be/eBqPxs_sPck",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/qna/qna_10..avif",
+      title: "엔진오일 소모",
+
+      linkUrl: "https://youtu.be/Sih0WiZGUAI",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+  ]);
+</script>

app/pages/service/videomenual/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi Service"
+        textLocation="top"
+        type="cover"
+      />
+
+      <TitleVisual
+        title="아우디 영상 매뉴얼"
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <CareProgramItem data-type-row="3" class="mt--40" :items="careProgramItems" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+
+  const bannerImagePath = ref("/img/service/video/20_1920x1080.avif");
+
+  const careProgramItems = ref([
+    {
+      imagePath: "/img/service/video/200629_1.avif",
+      title: "크루즈 컨트롤 시스템 사용법",
+      description:
+        "크루즈 컨트롤 시스템을 통해 차량 스스로 가속과 감속을 하여 차량의 속도를 일정하게 유지하며 주행할 수 있습니다.",
+      linkUrl: "https://youtu.be/DE7LeQoyUBI",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_2.avif",
+      title: "어댑티드 크루즈 컨트롤 사용법",
+      description:
+        "어댑티드 크루즈 컨트롤 기능을 활용하면 앞차와의 안전거리 유지하여 주행할 수 있습니다.",
+      linkUrl: "https://youtu.be/nKFMYkySUys",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_3.avif",
+      title: "사용자 등록 방법",
+      description:
+        "차량 내에서 myAudi 계정을 통해 사용자 등록이 가능합니다. 사용자 등록 후 개인 프로파일 설정을 통해 다양한 설정을 개인화 할 수 있습니다.",
+      linkUrl: "https://youtu.be/juPKJbExrHo",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_4.avif",
+      title: "아우디 커넥트 설정",
+      description:
+        "myAudi 앱을 통해 언제 어디서나 차량 상태를 확인하고 원격으로 제어할 수 있습니다.",
+      linkUrl: "https://youtu.be/_06vYdLzNd0",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_5.avif",
+      title: "아우디 커넥트 스마트폰 연결 방법",
+      description:
+        "아우디 커넥트로 와이파이, 블루투스 연결을 통해 스마트폰과 차량을 연결할 수 있습니다.",
+      linkUrl: "https://youtu.be/l_K1lg_uxCE",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_6.avif",
+      title: "저장 가능한 개인 프로파일",
+      description:
+        "개인 프로파일 설정을 통해 시트 위치, 운전대 높이 등 다양한 설정들을 저장하고 불러올 수 있습니다.",
+      linkUrl: "https://youtu.be/BM3M4SrCQuY",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_7.avif",
+      title: "메모리 기능 사용법",
+      description:
+        "시트 위치, 운전대 높이, 사이드 미러 세팅 등 다양한 설정을 메모리 기능을 통해 저장할 수 있습니다. 저장 해둔 개인 프로파일은 언제든 불러와 동일한 컨디션으로 차량 설정을 조정 할 수 있습니다.",
+      linkUrl: "https://youtu.be/ri7GBbZOeR8",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_8.avif",
+      title: "속도 제한 기능 사용법",
+      description:
+        "속도 제한 기능을 활성화하면 주행 속력을 약 30km 이하로 안전하게 운전할 수 있습니다. 속도 제한 기능은 가속 페달을 밟아도 속도를 제한합니다.",
+      linkUrl: "https://youtu.be/QsbtQditShc",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_9.avif",
+      title: "아우디 프리 센스 설정",
+      description:
+        "Audi 프리 센스 기능을 활성화하면 운전 시 다양한 상황의 위험을 미리 감지, 대응하여 안전하고 편안한 주행이 가능합니다.",
+      linkUrl: "https://youtu.be/dpz4EuEMyJE",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_10.avif",
+      title: "구성 마법사, 바로가기 설정",
+      description:
+        "MMI 터치 화면의 메뉴를 편집, 자주 쓰는 기능은 바로가기메뉴(단축키)로 설정하여 간단하고 편리하게 맞춤형 메뉴를 구성할 수 있습니다.",
+      linkUrl: "https://youtu.be/bO825dI0dBk",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_11.avif",
+      title: "전화 연결 방법",
+      description:
+        "모바일 기기의 블루투스 또는 SIM 카드 연결을 통해 차량 내에서 전화 기능을 사용할 수 있습니다.",
+      linkUrl: "https://youtu.be/yPzAspOnccY",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/video/200629_12.avif",
+      title: "서라운드 뷰 사용법",
+      description:
+        "서라운드 뷰 기능으로 차량 주변을 360° 다양한 뷰로 확인할 수 있습니다.",
+      linkUrl: "https://youtu.be/ZyCxUJnjZww",
+      linkText: "더 알아보기",
+      linkTarget: "_blank",
+    },
+  ]);
+</script>