아우디 케어 프로그램

app/assets/scss/admin.scss

@@ -1,4 +1,6 @@
 @charset "UTF-8";
+
+
 @font-face {
   font-family: 'AudiType';
   src: url('/fonts/AudiTypeVF.woff2') format('woff2-variations');
@@ -28,6 +30,9 @@
   .ft--#{$i} {font-size : #{$i}px !important;}
 }
 
+html {
+  scroll-behavior: smooth;
+}
 
 :root {
   --max-content-width: 1920px;
@@ -123,6 +128,18 @@
 
 //풀사이즈 레이아웃 구성
 .detail--container--full{
+
+  .thumb--solo{
+    overflow: hidden;
+    border-radius: 20px;    
+    img{
+      width:100%;
+      max-width:100%;
+    }
+  }
+  
+
+
   .inner--wrapper{
     padding:0 var(--spacing-relative-3xl);
     .service--detail{
@@ -283,6 +300,13 @@
   width:100%;
   position: relative;
 
+
+  &.mask--hidden{
+    &:before{
+      display: none;
+    }
+  }
+
   &[data-type="cover"] {
     >div {
       position: relative;
@@ -843,6 +867,27 @@
   overflow: hidden;
   padding:40px 0px;
 
+  &[data-type="small"] { 
+    .title--visual--wrapper{
+      max-width:100%;
+      padding:0px 96px;      
+      .title--visual--content{
+        h2{
+          color: rgb(252, 252, 253);          
+          letter-spacing: 0px;
+          font-weight: 400;
+          text-decoration: none;
+          font-size: 24px;
+          line-height: 36px;
+          font-stretch: 130%;
+          @media (max-width: 1024px) {          
+            font-size: 20px;
+            line-height: 40px;        
+          }
+        }
+      }
+    }
+  }
   &[data-type="middle"] { 
     .title--visual--wrapper{
       max-width:100%;
@@ -1107,6 +1152,226 @@
   }
 }
 
+
+.row--block--wrapper{  
+  &[data-type-row="3"]{
+    >div{
+      >ul{
+        > li{
+          width:calc( (100% - 40px) / 3);
+          .thumb{
+            img{
+              width:100%;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+    }
+  }
+  > div{
+    padding:0 var(--spacing-relative-3xl);
+    >ul {
+      display: flex;
+      flex-wrap: wrap;
+      gap:20px;
+      > li{
+        width:calc(50% - 10px);
+        padding-bottom:40px;
+        .thumb{
+          border-radius: 20px;
+          position: relative;
+          height:0px;
+          overflow: hidden;
+          padding-top:56.25%;
+
+          img{
+            position: absolute;
+            height:100%;
+            inset: 0px;
+          }
+        }
+
+        .desc--wrap{
+          @media screen and (min-width: 768px) {        
+            padding-block-start: var(--spacing-relative-lg);
+            padding-inline-end: var(--spacing-relative-xl);        
+          }
+
+          @media screen and (min-width: 1920px) {        
+            padding-block-start: var(--spacing-relative-lg);
+            padding-inline-end: var(--spacing-relative-xl);        
+          }
+
+          .title{
+            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;                
+            }
+
+          }
+
+          .captions{
+            margin: var(--spacing-relative-xs) 0 0 0;
+            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%;
+          }
+
+          .small--text{
+            color: rgba(252, 252, 253, 0.7);
+            font-size:12px;
+            white-space: pre-line;
+            padding-top:20px;
+          }
+
+          .captions--text{
+            padding-top:30px;
+            font-weight: 400;
+            text-decoration: none;
+            font-size: 16px;
+            line-height: 24px;
+            font-stretch: 105%;
+            color: rgba(252, 252, 253, 0.7);
+          }
+        }
+      }
+    }
+  }
+}
+
+
+
+
+// FAQ Accordion Styles
+.faq--accordion--wrapper {
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 40px 96px;
+
+  @media (max-width: 1024px) {
+      padding: 32px 60px;
+  }
+
+  @media (max-width: 768px) {
+      padding: 24px 40px;
+  }
+
+  @media (max-width: 375px) {
+      padding: 20px 28px;
+  }
+}
+
+.faq--accordion--container {
+  display: flex;
+  flex-direction: column;  
+  border-top: 1px solid rgba(101, 112, 129, 0.3);
+}
+
+.faq--accordion--item {
+  border-bottom: 1px solid rgba(101, 112, 129, 0.3);
+}
+
+.faq--accordion--header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+      .faq--question {
+          color: rgba(252, 252, 253, 0.8);
+      }
+  }
+
+  &.active {
+    background-color: rgb(64, 74, 89);
+    color: rgba(252, 252, 253, 0.7);
+      .faq--question {
+          color: rgb(252, 252, 253);
+          font-weight: 500;
+      }
+
+      .faq--toggle--icon {
+          color: rgb(252, 252, 253);
+      }
+  }
+}
+
+.faq--question {
+  flex: 1;
+  text-align: left;
+  font-size: 18px;
+  line-height: 1.5;
+  color: rgba(252, 252, 253, 0.7);
+  transition: all 0.3s ease;
+  padding-right: 24px;
+  padding-left:20px;
+
+  @media (max-width: 768px) {
+      font-size: 16px;
+  }
+}
+
+.faq--toggle--icon {
+  font-size: 28px;
+  font-weight: 300;
+  color: rgba(252, 252, 253, 0.5);
+  transition: all 0.3s ease;
+  min-width: 32px;
+  text-align: center;
+  margin-right:20px;
+}
+
+.faq--accordion--content {
+  overflow: hidden;
+  animation: slideDown 0.3s ease;
+
+}
+
+.faq--answer {
+  padding: 20px 50px 32px 20px;
+  font-size: 16px;
+  line-height: 1.7;
+  color: rgba(252, 252, 253, 0.8);
+
+  @media (max-width: 768px) {
+      font-size: 14px;
+      padding: 0 0 24px 0;
+  }
+}
+
+@keyframes slideDown {
+  from {
+      opacity: 0;
+      transform: translateY(-10px);
+  }
+  to {
+      opacity: 1;
+      transform: translateY(0);
+  }
+}
+
+
+
 /*=================================================
 |컴포넌트 별 css
 |END
@@ -1329,7 +1594,18 @@
     -webkit-box-pack: justify;
     justify-content: space-between;
     li {
+      &.anch--location{        
+        a{
+          margin-left:-12px;
+          pointer-events: inherit!important;
+        }        
+      }
       &:first-child{
+        &.link--force{
+          a{
+            pointer-events: inherit!important;
+          }
+        }
         a{
           margin-left:-12px;
           pointer-events: none;
@@ -1365,10 +1641,11 @@
         font-stretch: 105%;
 
 
+        &.actv,
         &:hover{
-          color:rgb(252,252,253);
-          background-color: rgb(44,52,63);
-          box-shadow: rgba(219, 223,230, .2) 0px 0px 0px 1px inset;
+          color:rgb(252,252,253)!important;
+          background-color: rgb(44,52,63)!important;
+          box-shadow: rgba(219, 223,230, .2) 0px 0px 0px 1px inset!important;
         }
       }
     }
@@ -1430,7 +1707,14 @@
         position: relative;
         width:100%;
 
-        svg{
+        >span{
+          position: absolute;          
+          top:50%;
+          left:0px;
+          transform: translateY(-50%);
+        }
+
+        > svg{
           position: absolute;
           top:50%;
           transform: translateY(-50%);

app/components/block/CareProgramItem.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="row--block--wrapper">
+    <div>
+      <ul>
+        <li v-for="(item, index) in items" :key="index">
+          <div class="thumb">
+            <img :src="item.imagePath" :alt="item.title" />
+          </div>
+          <div class="desc--wrap">
+            <h2 class="title">{{ item.title }}</h2>
+            <div class="captions">{{ item.description }}</div>
+            <NuxtLink
+              v-if="item.linkUrl"
+              class="more--detail--href mt--20 ft--16"
+              :to="item.linkUrl"
+              :target="item.linkTarget || '_blank'"
+            >
+              {{ item.linkText }}<i class="ico"></i>
+            </NuxtLink>
+            <div class="small--text" v-if="item.smallText">{{ item.smallText }}</div>
+            <div class="captions--text" v-if="item.captionText">
+              {{ item.captionText }}
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    items: {
+      type: Array,
+      required: true,
+      default: () => [],
+      validator: (items) => {
+        return items.every(
+          (item) =>
+            item.imagePath &&
+            item.title &&
+            item.description &&
+            typeof item.imagePath === "string" &&
+            typeof item.title === "string" &&
+            typeof item.description === "string"
+        );
+      },
+    },
+  });
+</script>

app/components/block/FaqAccordion.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="faq--accordion--wrapper">
+    <div class="faq--accordion--container">
+      <div v-for="(item, index) in faqItems" :key="index" class="faq--accordion--item">
+        <button
+          class="faq--accordion--header"
+          @click="toggleItem(index)"
+          :class="{ active: activeIndex === index }"
+        >
+          <span class="faq--question">{{ item.question }}</span>
+          <span class="faq--toggle--icon">{{ activeIndex === index ? "−" : "+" }}</span>
+        </button>
+        <div v-show="activeIndex === index" class="faq--accordion--content">
+          <div
+            class="faq--answer"
+            v-html="item.answer"
+            :style="{ 'white-space': item.preline == true ? 'pre-line' : 'normal' }"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  // Props 정의
+  const props = defineProps({
+    faqItems: {
+      type: Array,
+      required: true,
+      default: () => [],
+      validator: (items) => {
+        return items.every(
+          (item) =>
+            item.question &&
+            item.answer &&
+            typeof item.question === "string" &&
+            typeof item.answer === "string"
+        );
+      },
+    },
+  });
+
+  // 활성화된 아코디언 아이템 인덱스
+  const activeIndex = ref(null);
+
+  // 아코디언 토글 함수
+  const toggleItem = (index) => {
+    activeIndex.value = activeIndex.value === index ? null : index;
+  };
+</script>

app/components/block/LinkList.vue

@@ -3,6 +3,7 @@
     <ul>
       <li v-for="(item, index) in links" :key="index">
         <NuxtLink :to="item.url" :target="item.target || '_self'" :class="item.class">
+          <span v-if="item.frontIcon" v-html="item.frontIcon"></span>
           {{ item.text }}
 
           <svg
@@ -21,6 +22,18 @@
               fill="none"
             ></path>
           </svg>
+          <svg
+            v-else
+            width="24"
+            height="24"
+            aria-label="Same Tab"
+            xmlns="http://www.w3.org/2000/svg"
+            stroke="#fff"
+            data-testid="link-icon"
+          >
+            <title>Same Tab</title>
+            <path d="m10 16.9 5.5-5.4L10 6.1" stroke="#fff" fill="none"></path>
+          </svg>
         </NuxtLink>
       </li>
     </ul>

app/components/block/ProductCard.vue

@@ -9,7 +9,7 @@
       </div>
       <div class="product--card--content">
         <h2 v-if="title" class="product--card--title">{{ title }}</h2>
-        <h3 v-if="subtitle" class="product--card--subtitle">{{ subtitle }}</h3>
+        <h3 v-if="subtitle" class="product--card--subtitle" v-html="subtitle"></h3>
         <div v-if="description" class="product--card--description">
           <p>{{ description }}</p>
         </div>

app/components/block/TitleVisual.vue

@@ -12,7 +12,7 @@
         :data-animated="animation"
         :class="{ visible: isVisible }"
       >
-        <h2 class="title--main">{{ title }}</h2>
+        <h2 class="title--main" v-html="title"></h2>
         <span class="title--description" v-html="description"></span>
         <div v-if="$slots.default" class="title--additional">
           <slot></slot>
@@ -49,7 +49,7 @@
     type: {
       type: String,
       default: "", // 'light', 'dark'
-      validator: (value) => ["", "middle"].includes(value),
+      validator: (value) => ["", "middle", "small"].includes(value),
     },
     animation: {
       type: Boolean,

app/components/block/fullSizeBannerText1.vue

@@ -1,6 +1,7 @@
 <template>
   <section
     class="img--section--full"
+    :class="mask"
     :data-type="type"
     :data-text-location="textLocation"
   >
@@ -12,7 +13,7 @@
         <source media="(min-width: 1440px)" :srcset="`${imagePath}?width=1920`" />
         <img data-object-fit="true" :src="imagePath" :alt="altText" loading="lazy" />
       </picture>
-      <div class="alt--text">{{ altText }}</div>
+      <div class="alt--text" :style="'color:' + textColor">{{ altText }}</div>
     </div>
   </section>
 </template>
@@ -28,11 +29,21 @@
       type: String,
       default: "/img/exclusive/1920X1080_exclusive_edited_v2.jpg",
     },
+    mask: {
+      type: String,
+      default: "",
+      validator: (value) => ["", "hidden"].includes(value),
+    },
     textLocation: {
       type: String,
       default: "bottom",
       validator: (value) => ["bottom", "top", "left", "right"].includes(value),
     },
+    textColor: {
+      type: String,
+      default: "#fff",
+      validator: (value) => ["#fff", "#020203"].includes(value),
+    },
     altText: {
       type: String,
       default: "Banner Image",

app/components/components.md

@@ -7,4 +7,7 @@ block
     L exclusive-order.vue 참조
  |- SwiperBanner.vue : 스와이퍼 가로형 세로형 디자인 적용 exclusive-order 참조
  |- TitleVisual.vue : 타이틀 두줄용 
- |- CautionText.vue : 페이지 최하단 경고 문구 
+ |- CautionText.vue : 페이지 최하단 경고 문구 
+ |- LinkList.vue : 
+    L showIcon: false 면 화살표 아이콘 적용 true면 새창아이콘 적용
+    L frontIcon: 텍스트 앞에 아이콘 직접적용

app/pages/service/careprogram/batterymode.vue

@@ -0,0 +1,43 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <TitleVisual
+        title="배터리 충전 목표 설정 방법"
+        description=""
+        textAlign="center"
+        theme="dark"
+        class="mt--80"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div class="inner--wrapper">
+        <div class="thumb--solo">
+          <img src="/img/service/careprogram/STEP1_re.avif" />
+        </div>
+
+        <br />
+        <br />
+        <br />
+        <br />
+
+        <div class="thumb--solo">
+          <img src="/img/service/careprogram/STEP2_re.avif" />
+        </div>
+
+        <br />
+        <br />
+        <br />
+        <br />
+
+        <div class="thumb--solo">
+          <img src="/img/service/careprogram/STEP3_re.avif" />
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+</script>

app/pages/service/careprogram/carecenter.vue

@@ -0,0 +1,115 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi Service"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <TitleVisual
+        title="아우디 고객지원센터<br/>080 - 767 – 2834<br/>(080 - SOS - Audi)"
+        description="아우디는 고객님 개개인에 맞는 맞춤형 서비스를 제공하기 위해 고객지원센터를 운영하고 있습니다.<br/>언제 어디서나 최상의 서비스를 보다 빠르게 만나실 수 있습니다."
+        textAlign="center"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <ProductCard
+        data-type="square"
+        image="/img/service/careprogram/210203_Audi_Angola_MainstageTeaser_730x730.webp"
+        title="운영시간"
+        subtitle="> 365일 24시간 운영"
+        buttonText=""
+        buttonUrl=""
+        buttonTarget="_blank"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <ProductCard
+        data-type="square"
+        image="/img/service/careprogram/17_730X730.webp"
+        title="서비스 항목"
+        subtitle="> 긴급 출동 및 견인 서비스<br/>> 사고 차량 지원 서비스<br/>> 차량 구입 및 각종 이벤트 안내<br/>> 아우디 서비스 안내"
+        buttonText=""
+        buttonUrl=""
+        buttonTarget="_blank"
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <ProductCard
+        data-type="square"
+        image="/img/service/careprogram/20220327_231737.webp"
+        title="VVIP 고객지원센터"
+        subtitle="Audi A8 고객전용 VVIP 고객지원센터는 고객님께서 언제 어디에 계시든 도움이 필요하실 때 신속하고 만족스러운 서비스를 받으실 수 있도록 연중무휴로 운영되고 있습니다.<br/><br/> VVIP Audi(080-847-2834)와 함께 품격 있는 최상의 서비스를 경험해 보시기 바랍니다."
+        buttonText=""
+        buttonUrl=""
+        buttonTarget="_blank"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <CareProgramItem data-type-row="3" :items="careProgramItems" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import ProductCard from "~/components/block/ProductCard.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/16_1920x1080.avif");
+
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "KATRI(자동차안전연구원)의 자동차결함신고센터(car.go.kr) 바로 가기",
+      url: "https://car.go.kr/",
+      target: "_blank",
+      showIcon: true,
+    },
+  ]);
+
+  const careProgramItems = ref([
+    {
+      imagePath: "/img/service/careprogram/18_730X730.avif",
+      title: "카 서비스 플러스",
+      description: "아우디 공식 서비스센터에서 제공되는 차량 유지관리 서비스입니다.",
+      linkUrl: "/service/program/carserviceplus",
+      linkText: "상세보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/service/careprogram/2019_1400x438_topmain_14.avif",
+      title: "아우디 사고 수리 지원 프로그램",
+      description: "고객님의 안전한 이동과 차량의 완벽한 수리를 약속 드립니다.",
+      linkUrl: "/service/program/accidentassistance",
+      linkText: "상세보기",
+      linkTarget: "_self",
+    },
+    {
+      imagePath: "/img/service/careprogram/kr0001.avif",
+      title: "아우디 서비스 연장 패키지 프로그램",
+      description:
+        "고객님의 차량을 최적의 컨디션으로 운행하시는데 도움을 드리는 차량 유지관리 프로그램입니다.",
+      linkUrl: "/service/program/audiservicecouponpackage",
+      linkText: "상세보기",
+      linkTarget: "_self",
+    },
+  ]);
+</script>

app/pages/service/careprogram/diesel.vue

@@ -0,0 +1,135 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi Audi"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+      />
+
+      <Nav actvIndex="0" />
+
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>구동축전지 셀의 제조사</h2>
+          <h2 class="middle">아우디 고객 여러분께</h2>
+          <h3>
+            아우디 코리아는 최근 발생한 일부 디젤 차종(타입 EA 189 디젤 엔진, 1.6 TDI, 2.0
+            TDI)의 배기가스 문제로 인해 고객 여러분께 걱정과 불편을 끼쳐드리게 된 점
+            진심으로 사과의 말씀을 드립니다.<br /><br /><br />
+            독일 본사와 함께 저희 아우디 코리아는 이번 사태 조사와 관련해 한국 정부의 관련
+            부처에 적극 협조하고 있으며, 앞으로 사태의 진상이 규명되고 문제가 완전히
+            해결이 될 때까지 저희가 할 수 있는 모든 노력을 다할 것을 약속 드립니다.<br /><br />
+            차량 수리 및 아우디 특수공구공급과 관련해서 어윈(Erwin) 웹사이트를 통해
+            아우디가 제공하는 정비매뉴얼을 참고하시길 바랍니다. 아우디 자동차의 수리조치를
+            위해서는 정비 자료와 충분한 교육 그리고 권장 장비, 공구 및 측정장비를 갖추고
+            있어야 합니다.<br /><br />
+            폭스바겐그룹 독일 본사는 현재 해당 소프트웨어 문제를 해결하고 조속한 시일 내에
+            리콜 조치를 시행하기 위한 만반의 준비를 진행하고 있습니다. 이와 관련한 모든
+            정보는 당사의 웹사이트를 비롯해, 언론 등 모든 경로를 충분히 활용해 신속하게
+            고객 여러분께 공유할 것 임을 약속 드립니다.<br /><br />
+            <br /><br /><br />
+            아우디 코리아는 이번 사태로 고객 여러분께 심려를 끼쳐 드린 점에 대해 다시 한번
+            머리 숙여 깊이 사과 드리며, 고객 여러분의 불편을 최소화하고 신뢰를 회복하기
+            위해 최선을 다하겠습니다.
+          </h3>
+        </div>
+      </div>
+      <CareProgramItem :items="careProgramItems4" />
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>대상 차량 여부 확인하기</h2>
+          <h3>
+            고객님의 차량이 배기가스 배출량 불일치를 보인 EA189 디젤 엔진에 해당하는지
+            자동차리콜센터 https://www.car.go.kr/home/main.do에서 확인하실 수 있습니다.<br /><br />
+            자동차리콜센터 웹사이트에서 차량의 차대번호 17자리 (예: WAUZZZ4FX9N000100)를
+            입력해 주시기 바랍니다.<br /><br />
+            차대번호는 차량 등록증 혹은 보유하고 계신 서비스 책자 앞면에서 확인하실 수
+            있습니다.<br /><br /><br />
+
+            자동차리콜센터
+          </h3>
+          <NuxtLink
+            class="more--detail--href mt--20 ft--16"
+            to="https://www.car.go.kr/home/main.do"
+            target="_blank"
+          >
+            바로가기 링크<i class="ico"></i>
+          </NuxtLink>
+          <h2 class="mt--100">Contact</h2>
+          <NuxtLink
+            class="more--detail--href mt--20 ft--16"
+            to="/service/careprogram/carecenter"
+            target="_blank"
+          >
+            문의 사항이 있으실 경우, 자사 고객지원센터에서 도와드리겠습니다.<i
+              class="ico"
+            ></i>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+  import Nav from "./nav.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/2019_1400x438_topmain_5.avif");
+
+  // 링크 데이터 배열
+  const careProgramItems4 = ref([
+    {
+      imagePath: "/img/service/careprogram/190702_563x317_01.avif",
+      title: "Q3/Q5 리콜 안내",
+      description:
+        "2018년 3월 28일, 환경부가 아우디 2개 모델에 대한 리콜을 최종 승인했습니다.",
+      linkUrl: "/service/careprogram/faqdiesel",
+      linkText: "FAQ",
+      linkTarget: "_self",
+      smallText: `*리콜대상: Q3, Q5(EA 189 2.0 TDI 2.0 리터 엔진 장착)
+
+      *안내문 발송 일정: 2018년 4월 중순부터 발송 예정(수령하신 고객님 한하여 가까운 서비스 센터 예약 후 방문하여 리콜 받으실 수 있습니다)
+
+      *리콜 개시 일정: 2018년 4월 11일
+
+      *리콜 과정:
+
+      - 2.0 리터 엔진 차량의 경우: 소프트웨어 업데이트(30분 소요)
+
+      - 1.6 리터 엔진 차량의 경우: 소프트웨어 업데이트(30분 소요), 흡입공기정류기 장착(1시간 소요)
+
+      *리콜은 무상으로 진행됩니다
+      `,
+      cautionText:
+        "더 궁금하신 점에 대해서는 아래 아우디 고객지원센터로 문의 주시면 상세히 알려드릴 수 있도록 하겠습니다.",
+      captionText: "> 고객지원센터: 080-767-2834 (상담시간: 연중무휴 8:00~21:00)",
+    },
+    {
+      imagePath: "/img/service/careprogram/190702_563x317_02.avif",
+      title: "A4/A5/A6 리콜 안내",
+      description:
+        "2017년 8월 29일, 환경부가 아우디 3개 모델에 대한 리콜을 최종 승인했습니다.",
+      linkUrl: "/service/careprogram/faqrecall",
+      linkText: "FAQ",
+      linkTarget: "_self",
+      smallText: `*리콜대상: A4, A5, A6(EA 189 2.0 리터 엔진 장착)
+
+      *안내문 발송 일정: 2017년 9월 중순부터 발송 예정(수령하신 고객님 한하여 가까운 서비스 센터 예약 후 방문하여 리콜 받으실 수 있습니다)
+
+      *리콜 개시 일정: 2017년 9월 25일
+
+      *리콜 과정:
+
+      - 2.0 리터 엔진 차량의 경우: 소프트웨어 업데이트(30분 소요)
+
+      *리콜은 무상으로 진행됩니다`,
+    },
+  ]);
+</script>

app/pages/service/careprogram/evbattery.vue

@@ -0,0 +1,1337 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi exclusive edition"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <Nav actvIndex="0" />
+
+      <TitleVisual
+        title="고전압 배터리 무상 안전점검"
+        description="모든 아우디 e-트론 고객님의 안전한 전기차 라이프스타일을 위해, 아우디 코리아가 2025년 말까지 e-트론 전 모델 대상 ‘고전압 배터리 특별 무상 안전점검’을 실시합니다. 아우디 e-트론을 이용 중인 모든 고객분들과, 새롭게 차량을 구매하시는 고객분들까지 언제든지 원하는 시기에 아우디 공식 서비스센터에서 고객님의 e-트론을 점검 받으세요."
+        textAlign="center"
+        type=""
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 링크 리스트 컴포넌트 -->
+      <LinkList class="mt--20" :links="reservationLinks" />
+
+      <TitleVisual
+        title=""
+        description="아우디 코리아는 자동차관리법 시행규칙 제50조 제1항 제4호에 따른 구동축전지(배터리) 정보를 아래와 같이 제공합니다. "
+        textAlign="center"
+        type=""
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>구동축전지 셀의 제조사</h2>
+          <h3>
+            아우디의 순수전기차 e-tron의 배터리 제조사 정보를 아래와 같이 안내해 드립니다.
+          </h3>
+          <div class="data--table--wrap mt--40">
+            <div class="hide-caption">
+              <table class="" aria-label="Data table" data-testid="table">
+                <caption class=""></caption>
+                <thead class="">
+                  <tr class=""></tr>
+                </thead>
+                <tbody class="">
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">모델명 및 연식</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">구동축전지 셀의 제조사</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">삼성 SDI</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S Sportback (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">삼성 SDI</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron Sportback&nbsp;55 quattro (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">삼성 SDI</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron GT&nbsp;quattro (2022, 2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">LG 에너지솔루션</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >RS e-tron GT&nbsp;quattro (2022, 2023)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">LG 에너지솔루션</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S e-tron GT (2025, 2026)</span></span>
+                    </td>
+                    <td class="">
+                      <span class="">LG 에너지솔루션</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">RS e-tron GT performance (2025, 2026)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">LG 에너지솔루션</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">A6 e-tron performance (2025)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">CATL</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S6 e-tron (2025)</span></span>
+                    </td>
+                    <td class="">
+                      <span class="">CATL</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">LG 에너지솔루션</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">LG 에너지솔루션</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">LG 에너지솔루션</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">LG 에너지솔루션</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q8 55 e-tron quattro (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">삼성 SDI</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">Q8 Sportback 55 e-tron quattro (2024)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">삼성 SDI</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ8 Sportback e-tron (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">삼성 SDI</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">A7 55 TFSI e quattro (2024, 2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">삼성 SDI</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron performance (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">삼성 SDI</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron quattro (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">CATL</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ6 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">CATL</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <h2 class="mt--40">구동축전지의 용량</h2>
+          <div class="data--table--wrap mt--40">
+            <div class="hide-caption">
+              <table class="" aria-label="Data table" data-testid="table">
+                <caption class=""></caption>
+                <thead class="">
+                  <tr class=""></tr>
+                </thead>
+                <tbody class="">
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">모델명 및 연식</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">구동축전지의 용량</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class="">240 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S Sportback (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class="">240 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron Sportback&nbsp;55 quattro (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">240 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron GT&nbsp;quattro (2022, 2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">129 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >RS e-tron GT&nbsp;quattro (2022, 2023)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">129 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S e-tron GT (2025, 2026)</span></span>
+                    </td>
+                    <td class="">
+                      <span class="">144 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">RS e-tron GT performance(2025, 2026)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">144 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">A6 e-tron performance (2025)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">151Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S6 e-tron (2025)</span></span>
+                    </td>
+                    <td class="">
+                      <span class="">151Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">234 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">234 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">234 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">234 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q8 55 e-tron quattro (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class="">288 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">Q8 Sportback 55 e-tron quattro (2024)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">288 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ8 Sportback e-tron (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class="">288 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">A7 55 TFSI e quattro (2024, 2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">48 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron performance (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">151 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron quattro (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">151 Ah</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ6 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">151 Ah</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <h2 class="mt--40">구동축전지의 정격전압</h2>
+          <div class="data--table--wrap mt--40">
+            <div class="hide-caption">
+              <table class="" aria-label="Data table" data-testid="table">
+                <caption class=""></caption>
+                <thead class="">
+                  <tr class=""></tr>
+                </thead>
+                <tbody class="">
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">모델명 및 연식</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">구동축전지의 정격전압</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class="">397 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S Sportback (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class="">397 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron Sportback&nbsp;55 quattro (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">397 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron GT&nbsp;quattro (2022, 2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">723 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >RS e-tron GT&nbsp;quattro (2022, 2023)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">723 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S e-tron GT (2025, 2026)</span></span>
+                    </td>
+                    <td class="">
+                      <span class="">727 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">RS e-tron GT performance(2025, 2026)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">727 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">A6 e-tron performance (2025)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">662 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S6 e-tron (2025)</span></span>
+                    </td>
+                    <td class="">
+                      <span class="">662 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">352 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">352 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">354 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">354 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q8 55 e-tron quattro (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class="">397 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">Q8 Sportback 55 e-tron quattro (2024)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">397 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ8 Sportback e-tron (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class="">397 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">A7 55 TFSI e quattro (2024, 2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">374 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron performance (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">661 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron quattro (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">662 V</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ6 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">662 V</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <h2 class="mt--40">구동전동기의 최고출력</h2>
+          <ul class="service--process--list mt--1 pt--1">
+            <li class="mb--1 pb--1">
+              <p>*합산출력은 EU 인증서에 기재된 수치입니다.</p>
+            </li>
+            <li class="mb--1 pb--1">
+              <p>
+                **플러그인하이브리드 차량의 경우 내연기관(엔진)을 제외한 구동전동기의
+                제원입니다.
+              </p>
+            </li>
+          </ul>
+          <div class="data--table--wrap mt--40">
+            <div class="hide-caption">
+              <table class="" aria-label="Data table" data-testid="table">
+                <caption class=""></caption>
+                <thead class="">
+                  <tr class=""></tr>
+                </thead>
+                <tbody class="">
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">모델명 및 연식</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="">구동전동기의 최고출력</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 157 kW / 후축: 138 kW (합산출력*: 370 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S Sportback (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 157 kW / 후축: 138 kW (합산출력*: 370 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron Sportback&nbsp;55 quattro (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 141 kW / 후축: 172 kW (합산출력*: 300 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron GT&nbsp;quattro (2022, 2023)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 175 kW / 후축: 320 kW (합산출력*: 350 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >RS e-tron GT&nbsp;quattro (2022, 2023)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 175 kW / 후축: 335 kW (합산출력*: 440 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S e-tron GT (2025, 2026)</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 176 kW / 후축: 415 kW (합산출력*: 435 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">RS e-tron GT performance(2025, 2026)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 252 kW / 후축: 415 kW (합산출력*: 550 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">A6 e-tron performance (2025)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class="">전축: 270kW</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S6 e-tron (2025)</span></span>
+                    </td>
+                    <td class="">
+                      <span class="">전축: 140kW / 후축: 280kW (합산출력*: 370kW)</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">150 kW</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class="">150 kW</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">210 kW</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">210 kW</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q8 55 e-tron quattro (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 141 kW / 후축: 172 kW (합산출력*: 300 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">Q8 Sportback 55 e-tron quattro (2024)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 141 kW / 후축: 172 kW (합산출력*: 300 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ8 Sportback e-tron (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 157 kW / 후축: 138 kW (합산출력*: 370 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">A7 55 TFSI e quattro (2024, 2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">105 kW**</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron performance (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class="">225 kW</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron quattro (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 140 kW / 후축: 280 kW (합산출력*: 285 kW)</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ6 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >전축: 140 kW / 후축: 280 kW (합산출력*: 360 kW)</span
+                      >
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <h2 class="mt--40">구동축전지 셀의 형태</h2>
+          <div class="data--table--wrap mt--40">
+            <div class="hide-caption">
+              <table
+                class="sc-pAMRk iiPtVW reconstructWithDesignComponents__StyledTable-sc-9162dd3a-2 cBCWhl"
+                aria-label="Data table"
+                data-testid="table"
+              >
+                <caption class="sc-pdMpF kMmxcw"></caption>
+                <thead class="sc-pTUxa bsbkMy">
+                  <tr class="sc-qcrOD lgHeMB"></tr>
+                </thead>
+                <tbody class="sc-oVoYc jwakra">
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""
+                        ><span class="sc-pTHXP fbAint">모델명 및 연식</span></span
+                      >
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""
+                        ><span class="sc-pTHXP fbAint">구동축전지 셀의 형태</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">e-tron S (2022)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">e-tron S Sportback (2022)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">e-tron Sportback&nbsp;55 quattro (2023)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">e-tron GT&nbsp;quattro (2022, 2023)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">파우치형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""
+                        ><span class="sc-pTHXP fbAint"
+                          >RS e-tron GT&nbsp;quattro (2022, 2023)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">파우치형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""
+                        ><span class="sc-pTHXP fbAint"
+                          >S e-tron GT (2025, 2026)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">파우치형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""
+                        ><span class="sc-pTHXP fbAint"
+                          >RS e-tron GT performance (2025, 2026)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">파우치형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""
+                        ><span class="sc-pTHXP fbAint"
+                          >A6 e-tron performance (2025)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""
+                        ><span class="sc-pTHXP fbAint">S6 e-tron (2025)</span></span
+                      >
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">Q4 40 e-tron (2023)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">파우치형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">Q4 Sportback 40 e-tron (2023)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">파우치형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">Q4 45 e-tron (2025)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">파우치형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">Q4 Sportback 45 e-tron (2025)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">파우치형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">Q8 55 e-tron quattro (2024)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""
+                        ><span class="sc-pTHXP fbAint"
+                          >Q8 Sportback 55 e-tron quattro (2024)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">SQ8 Sportback e-tron (2024)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">A7 55 TFSI e quattro (2024, 2025)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">Q6 e-tron performance (2025)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">Q6 e-tron quattro (2025)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                  <tr class="sc-qcrOD lgHeMB">
+                    <td class="sc-qWSGh jgupsW">
+                      <span class="">SQ6 e-tron (2025)</span>
+                    </td>
+                    <td class="sc-qWSGh jgupsW">
+                      <span class=""><span class="sc-pTHXP fbAint">각형</span></span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <h2 class="mt--40">구동축전지 셀의 주요 원료</h2>
+          <div class="data--table--wrap mt--40">
+            <div class="hide-caption">
+              <table class="" aria-label="Data table" data-testid="table">
+                <caption class=""></caption>
+                <thead class="">
+                  <tr class=""></tr>
+                </thead>
+                <tbody class="">
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">모델명 및 연식</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">구동축전지 셀의 주요 원료</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCA(니켈, 코발트, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron S Sportback (2022)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCA(니켈, 코발트, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron Sportback&nbsp;55 quattro (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCA(니켈, 코발트, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">e-tron GT&nbsp;quattro (2022, 2023)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >RS e-tron GT&nbsp;quattro (2022, 2023)</span
+                        ></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S e-tron GT (2025, 2026)</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCMA(니켈, 코발트, 망간, 알루미늄), 흑연 + 일산화
+                          규소</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">RS e-tron GT performance (2025, 2026)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCMA(니켈, 코발트, 망간, 알루미늄), 흑연 + 일산화
+                          규소</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">A6 e-tron performance (2025)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="">S6 e-tron (2025)</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 40 e-tron (2023)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCMA(니켈, 코발트, 망간, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q4 Sportback 45 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCMA(니켈, 코발트, 망간, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q8 55 e-tron quattro (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCA(니켈, 코발트, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class=""
+                        ><span class="">Q8 Sportback 55 e-tron quattro (2024)</span></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCA(니켈, 코발트, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ8 Sportback e-tron (2024)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCA(니켈, 코발트, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">A7 55 TFSI e quattro (2024, 2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron performance (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class=""
+                          >리튬, NCA(니켈, 코발트, 알루미늄), 흑연</span
+                        ></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Q6 e-tron quattro (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">SQ6 e-tron (2025)</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><span class="">리튬, NMC(니켈, 망간, 코발트), 흑연</span></span
+                      >
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import Nav from "./nav.vue";
+
+  const bannerImagePath = ref("/img/service/evmode/evmodels_pc.avif");
+
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "공식 서비스센터 찾기",
+      url: "/service/program/dealersearch?filter=as",
+      target: "_blank",
+      showIcon: false,
+      frontIcon:
+        '<svg width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" stroke="#fff" data-testid="card-icon"><title>Voice Call 1 Small</title><path d="m17.5 23.3 4-3.8c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0L16 16.8s-.7 1.1-4.9-3.1l-.5-.5C6.3 8.9 7.5 8.5 7.5 8.5l1-1c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0l-3.8 4s5.8 9.6 16.8 15.8Z" stroke="#fff" fill="none"></path></svg>',
+    },
+  ]);
+</script>

app/pages/service/careprogram/faq.vue

@@ -0,0 +1,70 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About Audi"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <TitleVisual
+        title="FAQ"
+        description=""
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <FaqAccordion :faqItems="faqData" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FaqAccordion from "~/components/block/FaqAccordion.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/present_event_main_.avif");
+
+  // FAQ 데이터
+  const faqData = ref([
+    {
+      question: "아우디 전기차 배터리 안전성은 어떻게 보장되나요?",
+      answer:
+        "아우디는 전기차 배터리의 안전성을 위해 다층 안전 시스템을 적용하고 있습니다. BMS(Battery Management System)를 통해 실시간으로 배터리 상태를 모니터링하며, 과충전, 과방전, 온도 이상 등을 감지하여 안전사고를 예방합니다. 또한 충돌 시 고전압 시스템이 자동으로 차단되는 안전장치가 적용되어 있습니다.",
+    },
+    {
+      question: "전기차 배터리 수명은 얼마나 되나요?",
+      answer:
+        "아우디 전기차의 고전압 배터리는 최초 등록일로부터 8년 또는 주행거리 160,000km까지 보증됩니다. 정상적인 사용 조건에서 배터리는 이 기간 동안 안정적인 성능을 유지합니다. 배터리 수명을 최대화하기 위해서는 30~80% 충전 상태를 유지하고, 급속충전보다는 완속충전을 주로 사용하는 것이 좋습니다.",
+    },
+    {
+      question: "배터리 충전 목표는 어떻게 설정하나요?",
+      answer:
+        "배터리 충전 목표는 차량 내 설정 메뉴 또는 myAudi 앱을 통해 설정할 수 있습니다. 일상 주행 시에는 80%로 설정하여 배터리 수명을 최대화하고, 장거리 여행 전에는 100%로 충전하시면 됩니다. 충전 타이머 기능을 활용하면 원하는 시간에 맞춰 자동으로 충전이 완료되도록 설정할 수 있습니다.",
+    },
+    {
+      question: "배터리 점검은 어디서 받을 수 있나요?",
+      answer:
+        "아우디 공식 서비스센터에서 고전압 배터리 점검을 받으실 수 있습니다. 배터리 점검은 무상으로 제공되며, 전문 인증을 받은 HVE(High-Voltage Expert) 자격 보유 기술자가 점검을 진행합니다. 점검 예약은 고객 서비스 센터(080-767-2834)를 통해 가능합니다.",
+    },
+    {
+      question: "전기차 긴급 출동 서비스는 어떻게 이용하나요?",
+      answer:
+        "아우디 커넥트가 적용된 차량은 긴급 출동 버튼을 눌러 바로 고객지원센터(080-767-2834)로 연결됩니다. 고전압 배터리 방전 시 견인 서비스를 연 2회 무상으로 제공하며, 가까운 충전소나 서비스센터로 견인해드립니다. 24시간 긴급 출동 서비스가 운영되고 있습니다.",
+    },
+    {
+      question: "배터리 제조사 정보는 어디서 확인할 수 있나요?",
+      answer:
+        "아우디코리아는 전기차에 적용된 배터리 셀 제조사 정보를 투명하게 공개하고 있습니다. 배터리 셀은 제조사로부터 공급받아 유럽에서 배터리를 생산하고 있으며, 상세 정보는 아우디 공식 홈페이지 또는 고객 서비스 센터를 통해 확인하실 수 있습니다.",
+    },
+  ]);
+</script>

app/pages/service/careprogram/faqdiesel.vue

@@ -0,0 +1,105 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About Audi"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <TitleVisual
+        title="FAQ"
+        description=""
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+      <div class="inner--wrapper">
+        <div class="service--detail pb--1">
+          <h2 class="middle">문제와 원인</h2>
+        </div>
+      </div>
+
+      <FaqAccordion class="pt--1" :faqItems="faqData" />
+
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2 class="middle">수리등 시정 조치 관련</h2>
+          <NuxtLink
+            class="more--detail--href mt--20 ft--16"
+            to="/service/careprogram/diesel"
+            target="_blank"
+          >
+            자세히 보기
+            <i class="ico"></i>
+          </NuxtLink>
+        </div>
+      </div>
+
+      <div class="inner--wrapper">
+        <div class="service--detail pb--1">
+          <h2 class="middle">안전성 관련</h2>
+        </div>
+      </div>
+
+      <FaqAccordion class="pt--1" :faqItems="faqData2" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FaqAccordion from "~/components/block/FaqAccordion.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/diesel_top2.avif");
+
+  // FAQ 데이터
+  const faqData = ref([
+    {
+      question: "조작된 부분은 무엇이고 금번 이슈의 이유는?",
+      answer:
+        "차량 내 소프트웨어상 문제입니다. ECU(엔진제어유닛) 소프트웨어 조작으로인해 테스트모드에서 부정확한 배기가스수치가 측정되었습니다.",
+    },
+    {
+      question: "내 차가 대상 차량인지 확인할 수 있는 방법은?",
+      answer:
+        "통상적으로 차대번호를 통해 확인할 수있습니다. 아래 링크를 클릭 하시어 차대 번호를 입력 하시면 해당 여부를 확인 하실 수 있습니다.",
+    },
+    {
+      question: "대상차량은 어떤 엔진인가?",
+      answer:
+        "폭스바겐그룹의 타입EA 189 디젤엔진입니다. 타입EA 189 엔진은 4기통 디젤엔진으로 배기량 1.6리터, 2.0리터급이 해당됩니다.",
+    },
+    {
+      question: "구체적으로 어떤 모델에 이 엔진이 적용되었나?",
+      answer:
+        "4기통 디젤엔진(EA 189 디젤엔진 배기량1.6리터, 2.0 리터엔진)을 장착한 아우디 모델입니다. 현재까지 조사결과로는 국내에서 판매된 A4, A5, A62.0 TDI, Q3, Q52.0 TDI의 일부 모델이 이에 해당됩니다. A4모델의 경우12~15년식, A5 모델은13~15년식, A6 2.0 TDI의경우13~15년식, Q3 모델은12~15년식이며, Q5 2.0 TDI 모델은11~14년식이 이에 해당됩니다.",
+    },
+    {
+      question: "현재 출시된 유로6 디젤엔진에도 해당 소프트웨어가 사용되고 있는가?",
+      answer:
+        "아우디코리아에서 공식 수입/판매된 모든 아우디차량은 유럽형 기준의 차량입니다. 현재 유럽 연합지역에 판매되고있는 유로6 디젤엔진을 탑재한 폭스바겐그룹의 신차들은 법적요구사항 및 환경기준을 만족하고있습니다.",
+    },
+  ]);
+
+  // FAQ 데이터2
+  const faqData2 = ref([
+    {
+      question: "내 차에는 문제가 없는가?",
+      answer:
+        "금번의 이슈는 질소산화물(NOx) 배출량의 편차와 관련된 것으로, 차량의 주행성능과 안전에는 문제가 없습니다.",
+    },
+    {
+      question: "차량검사/ 수리를 받기 전까지 대상 차량을 타도 괜찮은가?",
+      answer: "아무런 제약없이 대상차량을 지속적으로 운행해도 안전합니다.",
+    },
+  ]);
+</script>

app/pages/service/careprogram/faqrecall.vue

@@ -0,0 +1,227 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About Audi"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <TitleVisual
+        title="아우디 3개모델 환경부 리콜 승인 관련 FAQ"
+        description=""
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <FaqAccordion class="pt--1" :faqItems="faqData" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FaqAccordion from "~/components/block/FaqAccordion.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/diesel_top2.avif");
+
+  // FAQ 데이터
+  const faqData = ref([
+    {
+      question: "1: 리콜이 결정된 EA189 차량은 총 몇 개 모델 몇 대인가?",
+      answer: `
+      아우디 5개 모델 29,939대+
+
+ 
+
+브랜드
+
+엔진
+
+차명
+
+대수
+
+아우디
+
+(29,941)
+
+2.0리터
+
+(29,941)
+
+A4 2.0 TDI,
+
+A6 2.0 TDI,
+
+A5 Sportback 2.0 TDI quattro
+
+23,599
+
+Q5 2.0 TDI quattro
+
+1,148
+
+Q5 2.0 TDI quattro
+
+2,659
+
+Q3 2.0 TDI
+
+2,535
+      `,
+      preline: true,
+    },
+    {
+      question:
+        "2: 리콜이 시작될 이루어질 경우, 국내 서비스센터수가 적어 리콜 대란이 야기되는 것은 아닌가?",
+      answer: `
+      금번 리콜을 승인 받은 모델을 포함, 총 29,939대의 리콜 대상 아우디 차량은 2.0L EA189 엔진을 장착했으며, 이 차량들은 소프트웨어 업데이트를 통해 30분 내로 완료할 수 있습니다. 이러한 차량들은 서비스센터 내 작업대(Work Bay)에 올릴 필요가 없이 컴퓨터와 차량을 연결해 펌웨어 업데이트를 진행하기 때문에 고객 대기 시간이 길지 않습니다.
+
+또한 아우디 코리아는 리콜이 수월하게 이루어질 수 있도록 서비스센터를 공격적으로 확장했습니다. 아우디 코리아는 올해 인천 서비스센터 확장 이전 및 제주 서비스센터를 신규 오픈해 현재 32개 서비스센터를 갖추고 있습니다. 이와 함께 두 곳의 서비스센터 확장 및 이전을 계획 중입니다.
+
+서비스센터 확장을 통해 하루 처리할 수 있는 아우디 리콜 서비스 대수는 1,400대 입니다.
+
+또한 고객 불편 최소화를 위해, 이번 리콜은 모델 별로 리콜을 위한 예약 기간에 차이를 둘 예정입니다.
+
+이와 함께 리콜을 진행함에 있어 저희는 서비스 직원을 추가 고용하고, 대중 교통수단 비용 지원, 픽업 앤 딜리버리 서비스 등 고객 불편 최소화를 위한 다양한 모빌리티 서비스를 마련했습니다.`,
+      preline: true,
+    },
+    {
+      question: "3: 앞으로 리콜 승인을 받아야 하는 차량이 더 남아있는지?",
+      answer: "EA189 엔진 모델의 환경부 리콜 승인은 모두 완료되었습니다.",
+    },
+    {
+      question: "4: 리콜 조치가 연비나 엔진 성능의 저하를 가져오지는 않는지?",
+      answer:
+        "리콜 조치는 연비, 이산화탄소 배출, 엔진 성능, 토크, 소음 등에 어떠한 부정적인 영향을 미치지 않습니다. 환경부는 체계적이고 면밀한 조사를 통해 이러한 사실을 확인 후 최종 승인했습니다.",
+    },
+    {
+      question:
+        "5: 어떤 근거로 소프트웨어 업데이트 후 연비 및 성능에 이상이 없다는 것인가?",
+      answer:
+        "환경부와 국토교통부 또한 소프트웨어 업데이트를 통한 당사의 리콜 방안에 대한 면밀한 검증을 실시하였으며, 소프트웨어 업데이트 후 질소산화물 배출량이 개선되었고, 소프트웨어 설치 전 후 비교 시 연비 및 가속능력과 등판능력을 포함한 성능에 영향이 없었다는 결과를 발표한바 있습니다. 이러한 결과는 독일 자동차청의 검증 결과와 동일합니다.",
+    },
+    {
+      question: "6: 리콜 후 관련 부품에 대한 보증기간을 연장 받을 수 있나?",
+      answer: `보증기관 연장과 관련 없습니다.
+
+엔진이나 배출가스 조절 부품에 영향을 미치지 않는다는 것을 확인하기 위해, 광범위한 엔진 및 부품 벤치 테스트, 차량 테스트를 실시하였고, 수백만 킬로미터를 실주행하는 테스트도 진행했습니다. 이를 통해 소프트웨어 업데이트가 연비와 엔진과 부품의 내구성에 어떠한 부정적 영향도 미치지 않음을 확인하였습니다.
+      `,
+      preline: true,
+    },
+    {
+      question: "7: 보상 관련, 미국(북미)과 동일한 보상을 받아야 하는 것이 아닌가?",
+      answer: `질소산화물 배출 관련 미국의 규정과 국내의 규정은 상이합니다. 그러므로 미국에서의 합의 조항들은 미국 이외 지역에서 적용될 수 없습니다. 미국에서는 우리나라와는 다른 배기가스 기준치를 적용하며, 차량 엔진의 배기가스 제어 시스템의 사용 및 고지와 관련해 다른 규제 요건들이 존재합니다.
+
+그러나 유럽, 호주 한국 등 미국(북미) 이외 지역에서는 대상 차량들이 기술적 조치로 인해 배기가스 기준을 완전히 충족시킬 수 있도록 개발되었습니다. 국내 환경부를 비롯, 독일 KBA 등 관련 기관들은 리콜 조치에 대해 검사 후 승인하였습니다.`,
+      preline: true,
+    },
+    {
+      question: "8: 리콜을 받지 않으면 고객이 불이익을 받는지?",
+      answer: `고객이 받는 불이익은 없습니다. 이번 리콜을 진행함에 있어 아우디 코리아는 고객의 편의를 최우선으로 두고 리콜 대상 차량에 대한 대중 교통수단 비용 지원, 픽업 앤 딜리버리 서비스 등 다양한 방안을 마련하였습니다.
+
+또한 소프트웨어 업데이트는 디젤연소과정(EA288-EU6)에 대한 최근 몇 년간의 연구를 바탕으로 확장된 연료분사패턴을 사용하도록 개발되었습니다. 고객 여러분께서 적극적으로 참여해주시면 감사하겠습니다.`,
+      preline: true,
+    },
+    {
+      question: "9: 리콜은 언제부터 시작인지?",
+      answer:
+        "금번 리콜을 승인 받은 차량의 경우 2017년 9월 25일부터 리콜이 시작됩니다. 고객 만족을 최우선으로 두고 있는 만큼, 필요하다면, 시정 조치 기간 이후에도 리콜을 제공할 것입니다. 하오나 차량이 최신 기술을 업데이트 받을 수 있도록 리콜을 최대한 빠른 시일 내에 받으실 것을 추천 드립니다.",
+    },
+    {
+      question: "10: 환경부 승인 후 리콜은 어떻게 진행되는가?",
+      answer: `대상차량 소유 고객은 2017년 9월 중순부터 리콜 방법 및 전반적 일정 관련 정보를 담은 안내문을 받게 됩니다. 이후 가까운 아우디 공식서비스센터에 예약 후 방문하시면 소프트웨어 업데이트를 통한 리콜을 받을 수 있습니다. 리콜은 2017년 9월 25일부터 시작 예정입니다.
+
+이번 리콜을 진행함에 있어 저희는 고객의 편의를 최우선으로 두고 이를 위한 다양한 방안을 마련했습니다. 리콜 대상 차량에 대한 소비자 개별 통지를 비롯 대중 교통수단 비용 지원, 픽업 앤 딜리버리 서비스 등을 제공할 예정입니다.`,
+      preline: true,
+    },
+    {
+      question: "11: 신뢰회복 프로그램(Trust Building Measure)란 무엇인지?",
+      answer: `신뢰회복 프로그램은 EA189 엔진 리콜 조치를 받은 후 생기는 모든 고객 불만을 고려하겠다는 회사의 방침입니다. 신뢰회복 프로그램은 총 누적주행거리가 250,000km 이하 및 리콜 조치를 받은 시점으로부터 24개월 이내의 차량에 한해 적용됩니다. (선도래 조건 적용)
+
+규제 당국은 리콜 조치가 모든 법적 요건을 충족하며 연비, CO2 배출량, 엔진 출력, 최대 토크 및 소음에 부정적인 영향을 미치지 않는다는 점을 확인했습니다. 그럼에도 불구하고 일부 고객분들께서 리콜 조치가 차량 내구성에 영향을 미치지 않을까 염려하시어 소프트웨어 업데이트에 응하지 않으시는 것으로 파악되었습니다.
+
+이에 아우디폭스바겐 코리아는 신뢰회복 프로그램을 통해 소프트웨어 업데이트에 대한 고객 불안을 해소하고, 고객 신뢰를 강화하여 더 많은 고객분들께서 리콜에 참여 할 수 있도록 장려하고자 합니다.
+
+신뢰회복 프로그램을 실시하더라도 리콜 조치가 차량의 엔진 및 관련부품의 내구성에 부정적인 영향을 미치지 않는다는 회사의 기존 입장에는 변함이 없습니다. 규제 당국은 리콜의 기술적 조치가 모든 법적 요건을 충족하며, 연비, CO2 배출, 엔진 출력, 소음 발생에 영향을 미치지 않음을 검증하고 리콜 계획서에 최종 승인하였습니다.
+
+신뢰회복 프로그램에 대해 궁금하신 사항은 전국 아우디 코리아 공식 딜러 서비스 센터 및 고객지원센터를 통해 문의 해 주시기 바랍니다.
+아우디 코리아 고객지원센터 080-767-2834`,
+      preline: true,
+    },
+    {
+      question: "12: 신뢰회복 프로그램은 어떤 모델에 적용되는지?",
+      answer: `신뢰회복 프로그램은 EA189 디젤 엔진을 장착하여 리콜 조치를 받은 아우디 코리아 의 모든 차량에 적용됩니다.
+
+다만 신뢰회복 프로그램이 적용되는 시점에 총 누적주행거리가 250,000km가 넘는 경우 및 리콜 조치를 받은 시점으로부터 24개월이 경과한 차량은 제외되며, 해당 차량이 아우디 코리아 의 모든 권장 서비스와 유지보수 작업을 완료했다는 것이 확인 되어야 합니다. (즉, 전체 서비스 이력이 있는 차량에 대하여 적용됩니다).`,
+      preline: true,
+    },
+    {
+      question: "13: 신뢰회복 프로그램은 누구에게 제공되는지?",
+      answer: `신뢰회복 프로그램은 EA189 리콜 조치를 받은 모든 아우디 차량에 적용되므로 차량을 매매하여 소유권이 이전된 경우, 다음 소유주에게 제공됨을 알려드립니다.
+
+또한, 신뢰회복 프로그램은 이미 리콜 조치를 받은 차량에도 리콜 조치를 받은 시점부터 적용됨을 알려드립니다.`,
+      preline: true,
+    },
+    {
+      question: "14: 신뢰회복 프로그램에 포함되는 구성부품은 무엇입니까?",
+      answer: `신뢰회복 프로그램은 배출가스 재순환 시스템, 연료분사 시스템 및 배출가스 후처리 시스템 내 총 11개의 구성부품을 포함하며, 하기의 목록을 참조해주십시오.
+- 람다 프로브
+- 온도센서
+- EGR 전환밸브
+- EGR 밸브
+- EGR 차압센서
+- 인젝터
+- 고압펌프
+- 연료레일
+- 압력 제어밸브
+- 압력센서
+- 고압 파이프라인`,
+      preline: true,
+    },
+    {
+      question: "15: 신뢰회복 프로그램의 세부적인 조건은 무엇입니까?",
+      answer: `신뢰회복 프로그램의 자세한 적용 조건 등에 대해서는 아래를 참고하시기 바랍니다.
+
+1) 신뢰회복 프로그램의 적용 조건
+- 공식 서비스센터에서만 가능
+- EGR 연료 분사 시스템 혹은 배출가스 후처리 시스템 내 11개 구성부품 수리에 사용된 부품 및 수행된 작업에 대해서만 적용. 자세한 구성부품 목록은 4번 참고.
+- 대차나 부대비용, 사고손상 등은 포함되지 않음
+
+(2) 충족 조건
+- EA189 디젤 리콜 대상차량 중 소프트웨어 업데이트를 수행한 차량
+- 차량이 제조사의 정비 스케쥴에 규정된 점검, 정비주기와 사용지침에 따라 관리되었으며, 제조사가 요구하는 모든 리콜, 캠페인 조치가 수행이 된 경우
+
+(3) 적용 불가 사항
+- 자연적인 마모, 즉 마모로 인한 차량 수리
+- 비공식 서비스 파트너나 딜러가 제대로 수리, 정비, 관리하지 않은 차량(예, 비순정 부품 사용 등)
+- 사용 설명서 등의 차량 운행, 관리 지침을 따르지 않은 경우
+- 제3자에 의한 파손, 폭풍우, 우박, 홍수 등 외부 조건으로 차량이 파손되어 문제가 발생한 경우
+- 차량 주행조건에 따라 미립자 필터 퇴적물(Ash/ Soot)이 정상적으로 연소되지 않아 발생한 문제
+- (칩) 튜닝 등 비공인 방식으로 부품을 차량에 설치하거나 차량을 개조한 경우
+- 자동차 경주나 과적 등으로 차량을 부적절하게 운행한 경우
+- 차량 소유주가 적절한 시기 내에 불만 사항을 알리지 않은 경우
+- 차량 소유주가 제조사에 차량의 문제를 처리할 수 있도록 합리적인 기간을 주고 의뢰하지 않은 경우`,
+      preline: true,
+    },
+    {
+      question:
+        "16: 이미 소프트웨어 업데이트를 실시한 차량에 대하여 수리를 한 경우에도 신뢰회복 프로그램이 적용되나요?",
+      answer: `
+신뢰회복 프로그램은 이미 리콜 조치를 받은 차량에도 리콜 조치를 받은 시점부터 적용됩니다. 단, 본 FAQ 15.1번에 기재된 세부 요건을 충족해야 합니다.
+
+또한, 소프트웨어 업데이트 등의 기술적 조치를 받은 후 신뢰회복 프로그램 관련 부품의 수리로 인해 비용이 발생한 경우, 해당 비용의 회사 부담 여부에 대해서는 아우디 코리아 공식 서비스센터 방문을 통해 확인할 수 있습니다. 이와 관련된 요청 및 확인은 2018년 12월 31일 이전에 아우디 코리아 의 공식 서비스 센터를 통해 접수되어야 한다는 점 참고 부탁 드립니다.`,
+      preline: true,
+    },
+  ]);
+</script>

app/pages/service/careprogram/index.vue

@@ -0,0 +1,228 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <!-- 풀사이즈 배너 텍스트 1줄용 -->
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        textLocation="top"
+        altText="전시장/AAP 전시장/AS센터"
+        type="cover"
+        height="800"
+      />
+
+      <div class="text--tab--layout">
+        <ul>
+          <li class="anch--location">
+            <NuxtLink to="#care01">안심지원 프로그램</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#care02">전기차 보증 프로그램</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#care03">체계적인 전문 인력 & 정비 인프라</NuxtLink>
+          </li>
+          <li>
+            <NuxtLink to="#care04">다양한 A/S 프로그램</NuxtLink>
+          </li>
+        </ul>
+      </div>
+
+      <TitleVisual
+        title="‘믿고 탈 수 있는 e-tron’을 위한 </br>아우디 e-tron 케어 프로그램"
+        description="아우디코리아는 아우디 고객들의 ‘믿고 탈 수 있는 전기차’를 위해 아우디만의 다양한 전기차 케어 프로그램들을 운영하고 있습니다. 더욱 편안하고 든든한 전기차 라이프스타일을 위해 아우디 고객분들을 위한 맞춤형 프로그램을 안내 드립니다."
+        textAlign="center"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <TitleVisual
+        title="1. 든든해서 안심되는 아우디 전기차 지원 프로그램"
+        description=""
+        type="middle"
+        textAlign="left"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div id="care01">
+        <CareProgramItem :items="careProgramItems" />
+      </div>
+
+      <TitleVisual
+        title="2. 더 오래 책임지는 아우디 전기차 보증 프로그램"
+        description=""
+        type="middle"
+        textAlign="left"
+        theme="dark"
+        class="mt--80"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div id="care02">
+        <CareProgramItem :items="careProgramItems2" />
+      </div>
+
+      <TitleVisual
+        title="3. 안전한 전기차 수리를 위한 전문 인력과 정비 인프라"
+        description=""
+        type="middle"
+        textAlign="left"
+        theme="dark"
+        class="mt--80"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div id="care03">
+        <CareProgramItem :items="careProgramItems3" />
+      </div>
+
+      <TitleVisual
+        title="4. 고객 만족을 위한 아우디의 다양한 A/S 프로그램"
+        description=""
+        type="middle"
+        textAlign="left"
+        theme="dark"
+        class="mt--80"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <div id="care04">
+        <CareProgramItem :items="careProgramItems4" />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import DealerPopup from "~/components/block/DealerPopup.vue";
+  import CareProgramItem from "~/components/block/CareProgramItem.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/banner_1920X600.avif");
+
+  const careProgramItems = ref([
+    {
+      imagePath: "/img/service/careprogram/teaser1-1.avif",
+      title: "• 원하는 만큼, 손쉽게 '배터리 충전 목표 설정 및 관리'",
+      description:
+        "고객이 직접 차량 내 설정 기능 또는 아우디 커넥트(Audi Connect)가 적용된 차량은 myAudi 앱을 통해 배터리 충전 목표를 원하는 만큼, 손쉽게 설정하고 관리할 수 있습니다. 전기차의 배터리는 100% 완충 시에도 안전을 위한 예비 용량이 존재하기 때문에 안전하게 이용 가능합니다. 주로 단거리 구간을 주행하실 경우 충전 목표를 최대 80%로 설정 후 이용하면 고전압 배터리의 수명을 최대화하는 데 도움이 될 수 있습니다. 장거리 이동 시에는 충전 타이머를 이용해 100% 충전하는 방법을 활용하시면 편리한 여행이 될 수 있습니다. 또한 충전 상태로 오래 주차해야 할 경우에는 가급적 30%에서 80% 충전된 상태로 주차하시면 사용 가능한 배터리 용량을 더 오래 유지하실 수 있습니다.",
+      linkUrl: "/service/careprogram/batterymode",
+      linkText: "배터리 충전 목표 설정 방법",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/careprogram/teaser1-2.avif",
+      title: "• 투명한 ‘배터리 셀 제조사 정보’ 제공",
+      description:
+        "아우디코리아는 아우디 전기차에 적용된 배터리 셀 제조사에 대한 정보를 투명하게 공개하고 있으며, 고객들이 안심하고 탈 수 있는 아우디 전기차를 위해 보이지 않는 부분까지 최선의 노력을 다하고 있습니다. 아우디는 배터리 셀을 제조사로부터 공급받아 유럽에서 배터리를 생산하고 있습니다.",
+      linkUrl: "/service/careprogram/evbattery",
+      linkText: "배터리 제조사보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/careprogram/bms2.avif",
+      title: "• 차량과 앱을 통한 배터리 상태 상시 모니터링",
+      description:
+        "BMS(Battery Monitoring System) 기능을 통해 차량이 주행 중이거나 충전, 주차 중인 상황에서 배터리 관련 문제 발생 시 계기판을 통해 즉시 운전자에게 배터리 상태를 알립니다. 또한, 아우디 커넥트(Audi Connect)가 적용된 차량은 myAudi 앱을 통해 충전 및 주차 중에도 배터리 상태를 상시 모니터링 할 수 있습니다.",
+      // linkUrl: "/",
+      // linkText: "배터리 제조사보기",
+      linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/careprogram/teaser1-2.avif",
+      title: "• 언제 어디서나 ‘24시간 긴급 출동’",
+      description:
+        "아우디 커넥트(Audi Connect)가 적용된 차량은 긴급 출동 버튼을 눌러 바로 아우디 고객지원센터(080-767-2834)로 연결 가능하며, 고전압 배터리가 방전된 차량의 견인 서비스를 비롯한 다양한 상황에서 출동 서비스를 제공합니다. ▪ 고전압 배터리 방전 견인 서비스- 연 2회 제공- 가까운 아우디 공식 충전소 혹은 공용 충전소로 견인- 충전 비용은 고객 부담 ▪ 견인 서비스- 현장에서 직접 조치가 불가능한 경우 가장 가까운 아우디 공식 서비스센터로 견인 ▪ 스페어 타이어 교체 서비스- 스페어타이어가 고객님 차량에 비치되어 있는 경우- 수리 키트 비치 차량의 경우 임시 조치 서비스 진행",
+      linkUrl: "/",
+      linkText: "24시간 긴급 출동 자세히 보기",
+      linkTarget: "_blank",
+    },
+  ]);
+
+  const careProgramItems2 = ref([
+    {
+      imagePath: "/img/service/careprogram/teaser2-1.avif",
+      title: "• 5년 보증 또는 최종 주행거리 150,000km까지 보장",
+      description:
+        "아우디코리아는 공식 딜러사를 통해 판매하는 모든 차량(21년식 모델부터)을 대상으로, 구동모터 등 동력전달 부품을 포함한 일반부품에 대해 업계 최고 수준인 5년 보증 또는 최종 주행거리 150,000km까지 보증합니다.",
+      //linkUrl: "/",
+      // linkText: "배터리 충전 목표 설정 방법",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/careprogram/teaser2-2.avif",
+      title: "• 최초 등록일로부터 8년 혹은 주행거리 160,000km까지",
+      description:
+        "고전압 배터리는 최초 등록일로부터 8년 혹은 주행거리 160,000km까지 보장하며, 보증 기간 내 기술적 결함에 의한 고전압 배터리 고장 수리는 아우디 공식 고전압 배터리 정비 센터에서 무상으로 제공하고 있습니다. 또한, 보증기간 내 고전압 배터리의 기술적 결함으로 인해 차량 주행이 불가할 경우, 가까운 Audi e-tron 공식 서비스 센터로 견인하는 비용까지 지원합니다.",
+      // linkUrl: "/",
+      // linkText: "배터리 제조사보기",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/careprogram/bms.avif",
+      title: "• 배터리 점검 무상 서비스",
+      description:
+        "가까운 아우디 공식 서비스센터를 방문하시어 점검을 받으실 수 있으며, 이와 관련한 고객의 배터리 점검 비용은 무상으로 진행됩니다. 배터리 점검 서비스 관련 안내는 고객 서비스 센터를 통해 가능합니다.(고객서비스센터 전화번호 080-767-2834 / 관련 상담 가능 시간: 평일/주말 8:00~21:00)",
+      // linkUrl: "/",
+      // linkText: "배터리 제조사보기",
+      linkTarget: "_blank",
+    },
+  ]);
+
+  const careProgramItems3 = ref([
+    {
+      imagePath: "/img/service/careprogram/14_1920x1080.avif",
+      title: "• 지속적이고 체계적인 전기차 전문 관리 인력 충원",
+      description:
+        "아우디 전기차를 위한 특별한 인증자격을 보유한 전문인력이 수준 높은 차량 점검 및 수리 서비스를 제공하고 있습니다. 고전압 분야에는 EIP(Electrically Instructed Person), HVT(High-Voltage Technician), HVE(High-Voltage Expert) 등 3가지 자격이 있으며, 전기차 정비 인력 양성을 통해 전문 정비 인력을 양성합니다. 현재 모든 아우디 서비스 인력은 EIP 자격을 보유하고 있으며, HVT는 146명, 고전압배터리를 정비할 수 있는 전문인력 HVE는 48명으로 지속적인 인력 충원을 통해 체계적인 서비스를 제공하고 있습니다. (*2024년 8월 기준)",
+      //linkUrl: "/",
+      // linkText: "배터리 충전 목표 설정 방법",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/careprogram/15_1920x1080.avif",
+      title: "• 편리하고, 안전한 정비 인프라 구축",
+      description:
+        "아우디 서비스센터 35개 중 31개의 서비스 센터를 전기차 정비가 가능한 이트론 정비센터로 운영 중이며, 그 중 14개 서비스 센터에서 고전압 배터리 정비가 가능합니다. 또한, 모든 이트론 정비 센터에는 전기차 화재 예방을 위한 ‘격리 구역’을 운영하고, 특히 고전압 배터리 정비 센터에는 화재 발생 시 진압을 위한 소화기와 소화포를 상시 비치하고 있습니다.",
+      // linkUrl: "/",
+      // linkText: "배터리 제조사보기",
+      // linkTarget: "_blank",
+    },
+  ]);
+
+  const careProgramItems4 = ref([
+    {
+      imagePath: "/img/service/careprogram/teaser4-2.avif",
+      title: "• 24 시간 편리한 상담을 돕는 ‘아우디 챗봇’ 서비스",
+      description:
+        "아우디코리아 공식 홈페이지 및 myAudiworld 앱에서 아우디 고객지원센터 영업 시간과 상관없이 언제든 이용할 수 있도록 운영되는 ‘아우디 챗봇’ 서비스를 통해 365일 24시간 편리하게 상담이 가능합니다.",
+      //linkUrl: "/",
+      // linkText: "배터리 충전 목표 설정 방법",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/careprogram/teaser4-1.avif",
+      title: "• ‘아우디 다이렉트 콜 서비스’로 신속한 고객지원",
+      description:
+        "‘아우디 다이렉트 콜 서비스’를 도입하여 서비스 센터 전화 응답율을 개선하고 고객지원센터를 통해서도 차량 점검 및 서비스 편리하게 예약 할 수 있습니다.",
+      // linkUrl: "/",
+      // linkText: "배터리 제조사보기",
+      // linkTarget: "_blank",
+    },
+    {
+      imagePath: "/img/service/careprogram/AS.avif",
+      title: "• 다양한 알림 서비스를 통한 A/S 이용 고객 만족도 제고",
+      description:
+        "기본 무상 쿠폰인 소모품 정비 쿠폰 CSP(Car Service Plus)와 서비스 연장 패키지인 ESP(Extended Service Package) 사용기간이 만료되기 전 문자로 안내하는 ‘서비스 리마인더’를 비롯해 아우디만의 전문적이고 체계적인 정비 및 수리과정을 공유하기 위해 입고된 차량의 수리 진행 현황을 문자로 안내하는 ‘리페어 프로그레스 업데이트(Repair progress update)’ 등을 통해 차량 구매 이후에도 아우디 고객들의 만족도를 향상시키기 위해 다각도의 노력을 기울이고 있습니다.",
+      // linkUrl: "/",
+      // linkText: "배터리 제조사보기",
+      // linkTarget: "_blank",
+    },
+  ]);
+</script>

app/pages/service/careprogram/myaudinotice.vue

@@ -0,0 +1,98 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About Audi"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <Nav actvIndex="3" />
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>EV스마트케어서비스 유상구매 고객 B-lifecare 이용권 환불 안내</h2>
+          <h3>
+            B-lifecare 1년 이용권을 유상 구매하신 고객은 기간 내 해지 시 잔여 기간에 대해
+            일할 환불을 신청하실 수 있습니다.
+          </h3>
+          <h2 class="middle">환불 절차</h2>
+          <ul class="service--process--list pt--1">
+            <li class="not--before">
+              <p>
+                1. B-lifecare 앱 고객센터 <br />
+                2. 서비스 중지 및 환불 신청 <br />
+                3. 문자를 통해 사용 기간·환불 금액 안내 <br />
+                4. B-lifecare이용권을 구입한 서비스센터 방문 <br />
+                5. 문자로 안내받은 환불 정보 제시 <br />
+                6. 환불 진행 (환불 금액은 최초 결제 수단으로 환급)
+              </p>
+            </li>
+          </ul>
+          <h2>Audi Connect 관련 고객 안내문</h2>
+          <ul class="service--process--list pt--1">
+            <li class="not--before">
+              <p>
+                - 해당 기간: 2021년 3월 30일 부터 2021년 7월 2일 까지<br /><br />
+                - 해당 고객: Audi Connect 서비스가 탑재된 차량의 기존 구매 고객<br /><br />
+                - 안내 사항: 서버 개선작업으로 인한 차량 MMI 내 Audi Connect 주사용자 등록
+                불가 및 이로 인한 일부 서비스 이용 제한<br /><br />
+                위 기간 동안에는 당사가 차량 내에서 제공하는 Audi Connect 서비스의 고객
+                등록과 관련해서 필요한 차량 내 MMI에서의 주사용자 등록이 불가능 합니다.
+                기존 MMI 주사용자 등록이 완료된 고객의 경우, 해당 기간 동안에도 모든
+                서비스가 정상적으로 이용 가능합니다. 단, 해당 기간 동안 주사용자 등록을
+                해제 (myAudi 회원 탈퇴 혹은 차량 삭제 등) 하시는 고객의 경우, MMI 주사용자
+                재등록이 불가능하므로, 이 부분 양지 부탁드립니다. MMI 주사용자 등록이 안될
+                경우, 아래와 같이 Audi Connect 서비스 중 주사용자 등록을 필요로 하는 일부
+                서비스의 사용이 제한되게 됩니다.<br /><br />
+                해당 서비스 제한으로 불편을 끼쳐드리게 된 점 사과 드리며, 앞으로 더 나은
+                서비스 제공을 하기 위해 노력하겠습니다.<br /><br />
+                ㅇ 서비스센터에 입고하여 실시하던 제어기 및 인포테인먼트 소프트웨어
+                업데이트를 고객 설정에 따라 무선으로 진행하는 사항으로 본 서비스로 인하여
+                회복하기 어려운 손해 발생 가능성이 낮음
+              </p>
+            </li>
+          </ul>
+
+          <h2 class="mt--40">
+            [사용 불가 서비스 - 기존 주사용자 해제 후 재등록 불가 시]
+          </h2>
+          <h3>
+            1) Car2X 서비스: 전체 서비스 중 ‘긴급통화’와 ‘긴급출동’을 제외한 다른 서비스
+            사용 불가<br /><br />
+            2) Connected Infotainment 서비스: 전체 서비스 중 ‘목적지 사전 입력’ 서비스 및
+            e-tron 전용 서비스 사용 불가<br /><br />
+            3) 차량 MMI 내 myAudi 로그인 불가 / myAudi 앱은 로그인 가능하나 차량이
+            연결되지 않음<br /><br /><br />
+            아우디 코리아
+          </h3>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import Nav from "./nav.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/2019_1400x438_topmain_6.avif");
+
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "공식 서비스센터 찾기",
+      url: "/service/program/dealersearch?filter=as",
+      target: "_blank",
+      showIcon: false,
+      frontIcon:
+        '<svg width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" stroke="#fff" data-testid="card-icon"><title>Voice Call 1 Small</title><path d="m17.5 23.3 4-3.8c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0L16 16.8s-.7 1.1-4.9-3.1l-.5-.5C6.3 8.9 7.5 8.5 7.5 8.5l1-1c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0l-3.8 4s5.8 9.6 16.8 15.8Z" stroke="#fff" fill="none"></path></svg>',
+    },
+  ]);
+</script>

app/pages/service/careprogram/nav.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="text--tab--layout">
+    <ul>
+      <li class="link--force">
+        <NuxtLink :class="{ actv: actvIndex == 0 }" to="/service/careprogram/diesel"
+          >디젤엔진 관련 안내</NuxtLink
+        >
+      </li>
+      <li>
+        <NuxtLink :class="{ actv: actvIndex == 1 }" to="/service/careprogram/notice"
+          >환경부 차량 인증 관련 고객 안내문</NuxtLink
+        >
+      </li>
+      <li>
+        <NuxtLink :class="{ actv: actvIndex == 2 }" to="/service/careprogram/wcc"
+          >We Care Campaign</NuxtLink
+        >
+      </li>
+      <li>
+        <NuxtLink :class="{ actv: actvIndex == 3 }" to="/service/careprogram/myaudinotice"
+          >Audi Connect 서비스 안내</NuxtLink
+        >
+      </li>
+      <li>
+        <NuxtLink :class="{ actv: actvIndex == 4 }" to="/service/careprogram/ota"
+          >자동차 전자제어장치 무선 업데이트(OTA)</NuxtLink
+        >
+      </li>
+      <li>
+        <NuxtLink :class="{ actv: actvIndex == 5 }" to="/service/careprogram/evbattery"
+          >전기차 배터리 정보</NuxtLink
+        >
+      </li>
+    </ul>
+  </div>
+</template>
+<script setup>
+  // Props 정의
+  const props = defineProps({
+    actvIndex: {
+      type: Number,
+      default: 0,
+      validator: (value) => [0, 1, 2, 3, 4, 5].includes(value),
+    },
+  });
+</script>

app/pages/service/careprogram/notice.vue

@@ -0,0 +1,453 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About Audi"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <Nav actvIndex="1" />
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>환경부의 차량 인증 취소 처분과 관련하여 고객님께 드리는 말씀</h2>
+          <h3>2016년 8월 2일</h3>
+          <h2 class="middle">친애하는 고객님께,</h2>
+          <ul class="service--process--list pt--1">
+            <li class="not--before">
+              <p>
+                당사는 이번 사건과 관련하여, 환경부가 금일 당사의 차량 중 총 19개 차종
+                42개 모델에 대한 인증 취소라는 처분으로 인해 고객 여러분께 심려를 끼쳐
+                드리게 된 점에 대해 다시 한번 깊이 사과 드립니다.<br /><br /><br />
+                금일 발표된 환경부의 인증 취소 처분에 따라 당사의 판매 중단 차량은 총 19개
+                차종 42개로 확정되었으며, 금일 기준 당사의 신규 판매 중지 차량의 목록과,
+                계약 및 신차등록 판매가 가능한 차량은 ‘판매 중단 및 판매 가능차량 목록’을
+                참조하시기 바랍니다.<br /><br /><br />
+                다만, 금번 환경부의 인증취소처분은 고객님들이 보유하고 계신 기존 차량의
+                운행, 보증수리, 소유 및 매매에는 아무런 제약이 없음을 알려드립니다.<br /><br /><br />
+                아울러 본건 사태를 해결하는 것은 저희에게 가장 중요한 사항이며, 당사는
+                환경부와 본건 사태를 가능한 조속히 해결하기 위해 협조하고, 고객분들과의
+                신뢰를 회복하기 위해 최선을 다하도록 하겠습니다.<br /><br /><br />
+                더 궁금하신 점에 대해서는 아우디 고객센터(02-6009-0000)로 문의 주시면 보다
+                상세히 알려드릴 수 있도록 하겠습니다.<br /><br /><br />
+                감사합니다
+              </p>
+            </li>
+          </ul>
+          <h2>판매 중단 및 판매 가능차량 목록</h2>
+          <div class="data--table--wrap mt--40">
+            <div class="hide-caption">
+              <table class="" aria-label="Data table" data-testid="table">
+                <caption class=""></caption>
+                <thead class="">
+                  <tr class=""></tr>
+                </thead>
+                <tbody class="">
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>&nbsp;</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>판매 중지</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>판매 가능</div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>A3</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">
+                              <div aria-hidden="true" class=""></div>
+                              › A3 35 TDI
+                            </li>
+
+                            <li class="">› A3 Sportback 35 TDI</li>
+
+                            <li class="">› S3</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A3 Sportback e-tron</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <p class="sc-qPXtF fIcvqO">A4</p>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A4 30 TDI</li>
+
+                            <li class="">› &nbsp;A4 35 TDI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A4 45 TFSI</li>
+
+                            <li class="">› A4 45 TFSI Premium</li>
+
+                            <li class="">› A4 45 TFSI quattro Premium</li>
+
+                            <li class="">› A4 45 TFSI quattro Sport</li>
+
+                            <li class="">› A4 45 TFSI Sport</li>
+
+                            <li class="">› A4 55 TDI quattro Sport</li>
+
+                            <li class="">› S4 TFSI quattro<br /></li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>A5</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A5 40 TFSI quattro</li>
+
+                            <li class="">› A5 Sportback 35 TDI quattro</li>
+
+                            <li class="">› A5 Cabriolet 40 TFSI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› RS 5 TFSI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>A6</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A6 35 TDI</li>
+
+                            <li class="">› A6 35 TDI quattro</li>
+
+                            <li class="">› A6 Avant 35 TDI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A6 40 TDI quattro</li>
+
+                            <li class="">› A6 50 TDI quattro</li>
+
+                            <li class="">› A6 55 TDI quattro</li>
+
+                            <li class="">› A6 40 TFSI quattro</li>
+
+                            <li class="">› A6 50 TFSI quattro</li>
+
+                            <li class="">› S6 TFSI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>A7</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› RS 7 Plus</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A7 40 TDI</li>
+
+                            <li class="">› A7 50 TDI quattro</li>
+
+                            <li class="">› A7 55 TDI quattro</li>
+
+                            <li class="">› A7 40 TFSI quattro</li>
+
+                            <li class="">› A7 50 TFSI quattro</li>
+
+                            <li class="">› S7 TFSI quattro</li>
+                          </ul>
+                          <p class="sc-qPXtF fIcvqO">&nbsp;</p>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>A8</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A8 L 60 TFSI quattro</li>
+
+                            <li class="">› A8 65 TFSI quattro</li>
+
+                            <li class="">› A8 L 65 TFSI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› A8 50 TDI quattro</li>
+
+                            <li class="">› A8 50 TDI LWB quattro</li>
+
+                            <li class="">› A8 50 TFSI quattro</li>
+
+                            <li class="">› A8 50 TFSI LWB quattro</li>
+
+                            <li class="">› S8 TFSI quattro</li>
+
+                            <li class="">› S8 Plus TFSI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>Q3</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› Q3 30 TDI quattro</li>
+
+                            <li class="">› Q3 35 TDI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>&nbsp;</div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>Q5</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› Q5 35 TDI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› Q5 45 TDI quattro</li>
+
+                            <li class="">› SQ5 TDI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>Q7</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>&nbsp;</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› Q7 35 TDI quattro</li>
+
+                            <li class="">› Q7 45 TDI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>TT</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› TT Roadster 45 TFSI quattro</li>
+
+                            <li class="">› TT Coupe 45 TFSI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› TTS Coupe TFSI quattro</li>
+
+                            <li class="">› TTS Coupe 2.0 TFSI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">
+                        <div>R8</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>&nbsp;</div>
+                      </span>
+                    </td>
+                    <td class="">
+                      <span class="">
+                        <div>
+                          <ul class="">
+                            <li class="">› R8 TFSI quattro</li>
+                          </ul>
+                        </div>
+                      </span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <h2 class="mt--40">인증 취소 처분 차량 중 기 단종 된 차량</h2>
+          <h3>
+            A1 30 TDI, A1 Sportback 30 TDI, A3 25 TDI, A3 35 TFSI, A3 Sportback 25 TDI, A4
+            40 TFSI quattro, A4 2.0 TFSI quattro, A5 2.0 TFSI quattro, A5 Cabriolet 2.0
+            TFSI quattro, A6 45 TDI quattro, A6 2.0 TFSI, A6 40 TFSI quattro, A6 50 TFSI
+            quattro, A6 3.0 TDI quattro, A6 2.0 TFSI quattro, A6 3.0 TFSI quattro, A7 50
+            TFSI quattro, A7 55 TDI quattro, A7 3.0 TFSI quattro, RS 7 4.0 TFSI quattro,
+            A8 60 TFSI quattro, SQ5 TDI quattro
+          </h3>
+          <h3 class="mt--80">FAQ</h3>
+          <NuxtLink
+            class="more--detail--href mt--20 ft--16"
+            to="/service/careprogram/faq"
+            target="_self"
+          >
+            클릭하시어 자주묻는질문(FAQ)에 대한 답변을 확인하실 수 있습니다.
+            <i class="ico"></i>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import Nav from "./nav.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/2019_1400x438_topmain_6.avif");
+
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "공식 서비스센터 찾기",
+      url: "/service/program/dealersearch?filter=as",
+      target: "_blank",
+      showIcon: false,
+      frontIcon:
+        '<svg width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" stroke="#fff" data-testid="card-icon"><title>Voice Call 1 Small</title><path d="m17.5 23.3 4-3.8c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0L16 16.8s-.7 1.1-4.9-3.1l-.5-.5C6.3 8.9 7.5 8.5 7.5 8.5l1-1c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0l-3.8 4s5.8 9.6 16.8 15.8Z" stroke="#fff" fill="none"></path></svg>',
+    },
+  ]);
+</script>

app/pages/service/careprogram/ota.vue

@@ -0,0 +1,120 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About Audi"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <Nav actvIndex="4" />
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>자동차 전자제어장치 무선 업데이트(OTA)</h2>
+
+          <h2 class="middle">1. 임시허가 기준, 규격, 요건</h2>
+          <ul class="service--process--list pt--1">
+            <li class="not--before">
+              <p>
+                ㅇ 주요내용:<br /><br />
+                기존에 정비소 방문을 통해서만 가능했던 자동차 전자제어장치 소프트웨어 업데
+                이트를 무선 통신을 이용, 직접 업데이트(OTA)하는 서비스<br /><br />
+                * OTA(Over The Air) : 자동차 등 소프트웨어를 무선으로 업데이트하는 방식을
+                의미<br /><br />
+                - OTA 서버로부터 자동차 내 유무선통신제어기(Gateway)*가 전자제어장치
+                업데이트 정보를 전송받아 무선으로 업데이트<br /><br />
+                * OTA서버와 무선통신 및 전자제어장치 업데이트 관리, 무선통신보안 역할
+                담당<br /><br />
+                ㅇ 기간: 2023.5.4. ~ 2025.5.3. (2년)
+              </p>
+            </li>
+          </ul>
+          <h2>2. 임시허가 조건</h2>
+          <ul class="service--process--list pt--1">
+            <li class="not--before">
+              <p>
+                ㅇ “자동차 전자제어장치 무선 업데이트”가 ‘제작결함의 시정’ 또는 ‘하자에
+                대한 무상수리’, ‘튜닝’에 해당할 경우, 해당 자동차 관리법령을 준수하여야
+                함<br /><br />
+                - 자동차의 장치가 안전기준에 적합하도록 “자동차 전자제어장치 무선
+                업데이트”가 이루어져야 함<br /><br />
+                - 자동차 전자제어장치 무선 업데이트에 대한 모든 관리는
+                폭스바겐그룹코리아(주) 본사에서 이루어져야 함<br /><br />
+                - 자동차 전자제어장치가 배출가스 관련 장치를 포함할
+                경우「대기환경보전법」에서 제작차에 대한 인증 및 배출가스 전문정비사업자
+                등을 별도로 규정하고 있는 바 환경부 소관부서의 검토 필요
+              </p>
+            </li>
+          </ul>
+          <h2>
+            3. 임시허가 대상인 신제품, 서비스의 이용으로 인한 생명·건강·안전 등의 위험이
+            발생할 수 있는 사실
+          </h2>
+          <ul class="service--process--list pt--1">
+            <li class="not--before">
+              <p>
+                ㅇ 서비스센터에 입고하여 실시하던 제어기 및 인포테인먼트 소프트웨어
+                업데이트를 고객 설정에 따라 무선으로 진행하는 사항으로 본 서비스로 인하여
+                회복하기 어려운 손해 발생 가능성이 낮음
+              </p>
+            </li>
+          </ul>
+          <h2>4. 이에 대한 손해 배상방안 내용</h2>
+          <ul class="service--process--list pt--1">
+            <li class="not--before">
+              <p>
+                ㅇ 책임보험 가입을 통한 손해 배상<br /><br />
+                - 생산물배상책임보험(대인 1.8억/명, 대물 10억/사고당, 총 보상한도액
+                무제한)<br /><br />
+                - 개인정보보호배상책임보험(사고당 10억 원)<br /><br />
+                ㅇ 상기 책임보험의 보장범위를 초과할 경우, 폭스바겐그룹코리아(주)에서
+                초과액을 배상
+              </p>
+            </li>
+          </ul>
+          <h2>5. 기타 장관이 제품·서비스 이용과 관련하여 지정한 사항</h2>
+          <ul class="service--process--list pt--1">
+            <li class="not--before">
+              <p>
+                ㅇ 폭스바겐그룹코리아(주)는 산업통상자원부장관 등이 사업의 관리·감독을
+                위하여 요청한 관련 자료의 제출, 관계자의 출석 및 진술 요구 등에 대하여
+                성실히 응하고, 안전사고 및 손해배상 등이 발생하였을 경우 이를 보고토록
+                함<br /><br />
+                ㅇ 폭스바겐그룹코리아(주)가 실증특례‧임시허가 등 과제 진행과정에서 승인시
+                부가된 조건의 변경을 요청하는 경우, 사업자와 규제부처간의 협의 결과에 따라
+                조건을 변경하되 이견이 있는 경우에는 규제특례심의위원회 심의 결과에 따를
+                것
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import Nav from "./nav.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/2019_1400x438_topmain_6.avif");
+
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "공식 서비스센터 찾기",
+      url: "/service/program/dealersearch?filter=as",
+      target: "_blank",
+      showIcon: false,
+      frontIcon:
+        '<svg width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" stroke="#fff" data-testid="card-icon"><title>Voice Call 1 Small</title><path d="m17.5 23.3 4-3.8c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0L16 16.8s-.7 1.1-4.9-3.1l-.5-.5C6.3 8.9 7.5 8.5 7.5 8.5l1-1c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0l-3.8 4s5.8 9.6 16.8 15.8Z" stroke="#fff" fill="none"></path></svg>',
+    },
+  ]);
+</script>

app/pages/service/careprogram/wcc.vue

@@ -0,0 +1,95 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="About Audi"
+        textLocation="top"
+        mask="mask--hidden"
+        type="cover"
+        :height="800"
+        textColor="#020203"
+      />
+
+      <Nav actvIndex="2" />
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>‘위 케어 캠페인(We Care Campaign)’ 실시</h2>
+          <h3>
+            그 동안 아우디폭스바겐코리아를 지속적으로 사랑해 주시고 아껴주신 고객님께 깊은
+            감사의 말씀을 올립니다. 당사를 믿고 기다려주신 고객님의 마음에 보답하고자
+            당사는 ‘위 케어 캠페인’을 실시합니다.
+          </h3>
+
+          <ul class="service--process--list">
+            <li class="mb--1 pb--1">
+              <p>
+                대상: 2016년 12월 31일까지 국내에 등록된 폭스바겐 및 아우디를 소유한 모든
+                고객
+              </p>
+            </li>
+            <li class="mb--1 pb--1">
+              <p>캠페인 실시 기간: 2017년 2월 20일부터</p>
+            </li>
+            <li class="mb--1 pb--1">
+              <p>내용: 차량 유지보수 관련 서비스, 고장 수리 및 차량용 액세서리 구매</p>
+            </li>
+            <li class="mb--1 pb--1">
+              <p>
+                참여 방법: 2017년 2월 20일부터 차량 및 차량등록증(원본), 신분증 지참 후
+                가까운 서비스센터 예약 방문
+              </p>
+            </li>
+            <li class="mb--1 pb--1">
+              <p>관련문의</p>
+            </li>
+          </ul>
+
+          <h3 class="mt--40">[아우디 코리아]</h3>
+
+          <ul class="service--process--list pt--1">
+            <li class="mb--1 pb--1">
+              <p>홈페이지: www.audi.co.kr</p>
+            </li>
+            <li class="mb--1 pb--1">
+              <p>고객지원센터: 080-767-2834</p>
+            </li>
+          </ul>
+          <h3>(상담시간: 평일 9:00~18:00)</h3>
+
+          <h3 class="mt--80">FAQ</h3>
+          <NuxtLink
+            class="more--detail--href mt--20 ft--16"
+            to="/service/careprogram/faq"
+            target="_self"
+          >
+            클릭하시어 자주묻는질문(FAQ)에 대한 답변을 확인하실 수 있습니다.
+            <i class="ico"></i>
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import LinkList from "~/components/block/LinkList.vue";
+  import Nav from "./nav.vue";
+
+  const bannerImagePath = ref("/img/service/careprogram/2019_1400x438_topmain_7.avif");
+
+  // 링크 데이터 배열
+  const reservationLinks = ref([
+    {
+      text: "공식 서비스센터 찾기",
+      url: "/service/program/dealersearch?filter=as",
+      target: "_blank",
+      showIcon: false,
+      frontIcon:
+        '<svg width="24" height="24" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" stroke="#fff" data-testid="card-icon"><title>Voice Call 1 Small</title><path d="m17.5 23.3 4-3.8c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0L16 16.8s-.7 1.1-4.9-3.1l-.5-.5C6.3 8.9 7.5 8.5 7.5 8.5l1-1c.2-.2.2-.8 0-1l-3-3c-.2-.2-.8-.2-1 0l-3.8 4s5.8 9.6 16.8 15.8Z" stroke="#fff" fill="none"></path></svg>',
+    },
+  ]);
+</script>

app/pages/service/program/dealersearch.vue

@@ -5,126 +5,130 @@
       <FullSizeBannerText1
         :imagePath="bannerImagePath"
         textLocation="top"
-        altText="전시장/AAP 전시장/AS센터"
+        :altText="altText"
         type="cover"
       />
-      <TitleVisual
-        title="전시장"
-        description="원하시는 지역의 아우디 전시장 위치 및 연락처를 안내해 드립니다."
-        textAlign="left"
-        type="middle"
-        theme="dark"
-        :animation="true"
-        :animationDelay="300"
-      />
+      <template v-if="showShowrooms">
+        <TitleVisual
+          title="전시장"
+          description="원하시는 지역의 아우디 전시장 위치 및 연락처를 안내해 드립니다."
+          textAlign="left"
+          type="middle"
+          theme="dark"
+          :animation="true"
+          :animationDelay="300"
+        />
 
-      <!-- 딜러 검색 드롭다운 섹션 -->
-      <div class="dealer--search--section">
-        <div class="dealer--search--container">
-          <!-- 전시장 -->
-          <div class="dealer--category--wrap">
-            <div
-              v-for="(region, index) in showrooms"
-              :key="'showroom-' + index"
-              class="dealer--region--item"
-            >
-              <button
-                class="dealer--region--header"
-                @click="toggleRegion('showroom', index)"
-                :class="{ active: activeRegions.showroom === index }"
-              >
-                <span class="dealer--region--name">{{ region.name }}</span>
-                <span class="dealer--toggle--icon">{{
-                  activeRegions.showroom === index ? "−" : "+"
-                }}</span>
-              </button>
+        <!-- 딜러 검색 드롭다운 섹션 -->
+        <div class="dealer--search--section">
+          <div class="dealer--search--container">
+            <!-- 전시장 -->
+            <div class="dealer--category--wrap">
               <div
-                v-show="activeRegions.showroom === index"
-                class="dealer--list--content"
+                v-for="(region, index) in showrooms"
+                :key="'showroom-' + index"
+                class="dealer--region--item"
               >
-                <ul class="dealer--list">
-                  <li
-                    v-for="(dealer, dIndex) in region.dealers"
-                    :key="'dealer-' + dIndex"
-                  >
-                    <button
-                      @click="
-                        openDealerPopup(
-                          dealer.name,
-                          region.name,
-                          'showroom',
-                          dealer.detailInfo
-                        )
-                      "
-                      class="dealer--link"
+                <button
+                  class="dealer--region--header"
+                  @click="toggleRegion('showroom', index)"
+                  :class="{ active: activeRegions.showroom === index }"
+                >
+                  <span class="dealer--region--name">{{ region.name }}</span>
+                  <span class="dealer--toggle--icon">{{
+                    activeRegions.showroom === index ? "−" : "+"
+                  }}</span>
+                </button>
+                <div
+                  v-show="activeRegions.showroom === index"
+                  class="dealer--list--content"
+                >
+                  <ul class="dealer--list">
+                    <li
+                      v-for="(dealer, dIndex) in region.dealers"
+                      :key="'dealer-' + dIndex"
                     >
-                      아우디 {{ dealer.name }}
-                    </button>
-                  </li>
-                </ul>
+                      <button
+                        @click="
+                          openDealerPopup(
+                            dealer.name,
+                            region.name,
+                            'showroom',
+                            dealer.detailInfo
+                          )
+                        "
+                        class="dealer--link"
+                      >
+                        아우디 {{ dealer.name }}
+                      </button>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
 
-      <TitleVisual
-        title="Audi Approved :plus"
-        description="원하시는 지역의 아우디 공식 인증 중고차(AAP) 위치 및 연락처를 안내해 드립니다."
-        textAlign="left"
-        type="middle"
-        theme="dark"
-        :animation="true"
-        :animationDelay="300"
-      />
-      <div class="dealer--search--section">
-        <div class="dealer--search--container">
-          <!-- Audi Approved :plus -->
-          <div class="dealer--category--wrap">
-            <div
-              v-for="(region, index) in approvedPlus"
-              :key="'approved-' + index"
-              class="dealer--region--item"
-            >
-              <button
-                class="dealer--region--header"
-                @click="toggleRegion('approved', index)"
-                :class="{ active: activeRegions.approved === index }"
-              >
-                <span class="dealer--region--name">{{ region.name }}</span>
-                <span class="dealer--toggle--icon">{{
-                  activeRegions.approved === index ? "−" : "+"
-                }}</span>
-              </button>
+      <template v-if="showApprovedPlus">
+        <TitleVisual
+          title="Audi Approved :plus"
+          description="원하시는 지역의 아우디 공식 인증 중고차(AAP) 위치 및 연락처를 안내해 드립니다."
+          textAlign="left"
+          type="middle"
+          theme="dark"
+          :animation="true"
+          :animationDelay="300"
+        />
+        <div class="dealer--search--section">
+          <div class="dealer--search--container">
+            <!-- Audi Approved :plus -->
+            <div class="dealer--category--wrap">
               <div
-                v-show="activeRegions.approved === index"
-                class="dealer--list--content"
+                v-for="(region, index) in approvedPlus"
+                :key="'approved-' + index"
+                class="dealer--region--item"
               >
-                <ul class="dealer--list">
-                  <li
-                    v-for="(dealer, dIndex) in region.dealers"
-                    :key="'dealer-' + dIndex"
-                  >
-                    <button
-                      @click="
-                        openDealerPopup(
-                          dealer.name,
-                          region.name,
-                          'approved',
-                          dealer.detailInfo
-                        )
-                      "
-                      class="dealer--link"
+                <button
+                  class="dealer--region--header"
+                  @click="toggleRegion('approved', index)"
+                  :class="{ active: activeRegions.approved === index }"
+                >
+                  <span class="dealer--region--name">{{ region.name }}</span>
+                  <span class="dealer--toggle--icon">{{
+                    activeRegions.approved === index ? "−" : "+"
+                  }}</span>
+                </button>
+                <div
+                  v-show="activeRegions.approved === index"
+                  class="dealer--list--content"
+                >
+                  <ul class="dealer--list">
+                    <li
+                      v-for="(dealer, dIndex) in region.dealers"
+                      :key="'dealer-' + dIndex"
                     >
-                      아우디 AAP {{ dealer.name }}
-                    </button>
-                  </li>
-                </ul>
+                      <button
+                        @click="
+                          openDealerPopup(
+                            dealer.name,
+                            region.name,
+                            'approved',
+                            dealer.detailInfo
+                          )
+                        "
+                        class="dealer--link"
+                      >
+                        아우디 AAP {{ dealer.name }}
+                      </button>
+                    </li>
+                  </ul>
+                </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
+      </template>
 
       <TitleVisual
         title="서비스센터"
@@ -199,6 +203,14 @@
 
   const bannerImagePath = ref("/img/service/program/banner_1920X1080.avif");
 
+  // URL 쿼리 파라미터 가져오기
+  const route = useRoute();
+  const filterParam = computed(() => route.query.filter);
+
+  // filter=as일 때 전시장과 AAP 숨김
+  const showShowrooms = computed(() => filterParam.value !== "as");
+  const showApprovedPlus = computed(() => filterParam.value !== "as");
+
   // 팝업 상태 관리
   const isPopupOpen = ref(false);
   const selectedDealer = ref(null);
@@ -219,6 +231,10 @@
     }, 300);
   };
 
+  const altText = computed(() =>
+    filterParam.value !== "as" ? "전시장/AAP 전시장/AS센터" : "AS센터"
+  );
+
   // 딜러 상세 정보 가져오기 함수
   const getDealerDetailInfo = (dealerName, region, category, infodata) => {
     // 카테고리별 전체 이름 구성