Merge remote-tracking branch 'origin/master'

# Conflicts:
#	app/assets/scss/style.scss

app/assets/scss/admin.scss

@@ -24,6 +24,11 @@
   .m--#{$i} { margin: #{$i}px !important; }
 }
 
+@for $i from 14 through 40 {
+  .ft--#{$i} {font-size : #{$i}px !important;}
+}
+
+
 :root {
   --max-content-width: 1920px;
   --page-margin: 16px;
@@ -118,7 +123,155 @@
 
 //풀사이즈 레이아웃 구성
 .detail--container--full{
+  .inner--wrapper{
+    padding:0 var(--spacing-relative-3xl);
+    .service--detail{
+      padding:45px 0px;
+      h2{
+        margin: 0 0 var(--spacing-relative-md) 0;
+        color: rgb(252, 252, 253);
+        font-family: AudiType, sans-serif;
+        letter-spacing: 0px;
+        font-weight: 400;
+        text-decoration: none;
+        font-size: 24px;
+        line-height: 36px;
+        font-stretch: 130%;   
+        
+        &.middle{
+          font-size:26px;
+        }
+
+        @media (min-width: 1024px) {
+          font-size: 28px;
+          line-height: 40px;      
+        }
+        @media (min-width: 1440px) {      
+          font-size: 32px;
+          line-height: 44px;          
+        }
+        @media (min-width: 1920px) {          
+          font-size: 36px;
+          line-height: 52px;          
+        }
+      }
+
+      h3{
+        margin: 20px 0 var(--spacing-relative-md) 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%;        
+      }
+
+
+      .service--process--list{
+        padding-top:80px;
+        >li{
+          position: relative;
+          padding-left:20px;
+          margin-bottom:80px;
+          &.not--before{
+            padding-left:0px;
+            &::before{
+              display: none;
+            }
+          }
+          &::before{
+            content: ">";
+            display: block;
+            width: 100%;
+            height: 100%;            
+            background-size: contain;
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+          >p{
+            margin: 0 0 var(--spacing-relative-md) 0;
+            color: rgba(252, 252, 253, 0.7);
+            font-family: AudiType, sans-serif;
+            letter-spacing: 0px;
+            font-weight: 400;
+          }
+        }
+      }
+
+      .data--table--wrap{
+        @media (min-width: 768px) {
+          table tbody tr:first-child th,
+          table tbody tr:first-child td {
+            border-top: 1px solid rgb(255, 255, 255) !important;
+            border-right-color: rgb(255, 255, 255) !important;
+            border-bottom-color: rgb(255, 255, 255) !important;
+            border-left-color: rgb(255, 255, 255) !important;
+          }
+        }
+
+        table{
+          display: block;
+          width: 100%;
+          border-spacing: 8px 0px;
+          border-collapse: separate;
+
+          @media (min-width: 768px) {          
+            width: 100%;          
+          }
+        
+          @media (min-width: 768px) {          
+            display: table;          
+          }
 
+          tbody{
+            
+            @media (min-width: 768px) {
+              display: table-row-group;
+              thead{
+                display: table-header-group;
+              }
+            }
+            td{            
+              letter-spacing: 0px;
+              font-weight: 400;
+              text-decoration: none;
+              font-size: 16px;
+              line-height: 24px;
+              font-stretch: 105%;
+              color: rgba(252, 252, 253, 0.7);
+              padding: 16px 4px 8px;
+              vertical-align: top;
+              display: table-cell;
+              border-bottom: 1px solid rgb(252, 252, 253);
+  
+  
+              @media (min-width: 768px) {            
+                padding: 12px 4px 24px;            
+              }
+  
+  
+              &:not(:last-child) {
+                margin-bottom: 4px;
+              }
+            }
+          }          
+        }
+      }
+
+      .desc--caution--text{
+        margin: 0px;
+        color: rgba(252, 252, 253, 0.7);        
+        letter-spacing: 0px;
+        font-weight: 400;
+        text-decoration: none;
+        font-size: 16px;
+        line-height: 24px;
+        font-stretch: 105%;
+      }
+    }
+  }
 }
 
 /*=================================================
@@ -163,7 +316,18 @@
     height:100vh;
   }
 
-  .alt--text{    
+  &[data-text-location="top"]{
+    &:before{
+      background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);    
+    }
+
+    .alt--text{      
+      bottom:auto;
+      top:40px;      
+    }
+  }
+
+  .alt--text{   
     color: rgb(252, 252, 253);    
     letter-spacing: 0px;
     font-weight: 400;
@@ -860,6 +1024,89 @@
     font-stretch: 105%;
   }
 }
+
+
+//좌우 2배열 배너
+.grid--banner--type2{
+  width: 100%;
+  padding:0 var(--spacing-relative-3xl);
+
+  @media(min-width:1024px){
+    padding:0 var(--spacing-relative-xl);
+  }
+
+  @media(min-width:1440px){
+    padding:0 var(--spacing-relative-2xl);
+  }
+
+  @media(min-width:1920px){
+    padding:0 var(--spacing-relative-3xl);
+  }
+
+  >ul{
+    width:100%;
+    display: flex;
+    flex-wrap: wrap;
+    gap:16px;
+    >li{
+      width:calc( (100% - 16px)/2);
+      padding-bottom:40px;
+
+      @media(max-width:720px){
+        width:100%;
+      }
+      
+      .thumb{
+        border-radius: 20px;
+        overflow: hidden;
+        img{
+          width: 100%;;
+          object-fit: cover;
+        }
+      }
+
+      .desc--wrapper{
+        @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);     
+        }
+        
+        h2{
+          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;
+          }
+        }
+
+        h3{
+          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%;
+        }
+      }
+    }
+  }
+}
+
 /*=================================================
 |컴포넌트 별 css
 |END
@@ -1032,6 +1279,7 @@
   font-size: 14px;    
   min-height:24px;
 
+
   &:after{
     content:'';
     display: block;
@@ -1443,3 +1691,252 @@
     }
   }
 }
+
+.radius--img--wrap{
+  overflow: hidden;
+  border-radius: 20px;
+}
+
+
+
+// 딜러 검색 드롭다운 스타일
+.dealer--search--section {
+  width: 100%;
+  max-width: 1920px;
+  margin: 0 auto;
+  padding: 80px 96px;
+  background-color: hsla(216, 23%, 8%, 1);
+}
+
+.dealer--search--container {
+  display: flex;
+  flex-direction: column;
+  gap: 48px;
+  border-top: 1px solid rgba(252, 252, 253, 0.15);  
+}
+
+.dealer--category--wrap {
+  display: flex;
+  flex-direction: column;
+}
+
+.dealer--category--title {
+  font-size: 28px;
+  font-weight: 600;
+  margin: 0 0 24px 0;
+  color: rgb(252, 252, 253);
+  padding-bottom: 16px;
+  border-bottom: 2px solid rgba(252, 252, 253, 0.3);
+}
+
+.dealer--region--item {
+  border-bottom: 1px solid rgba(252, 252, 253, 0.15);
+
+  
+}
+
+.dealer--region--header {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px 24px;
+  background-color: transparent;
+  border: none;
+  color: rgb(252, 252, 253);
+  cursor: pointer;
+  transition: all 0.3s ease;
+
+  &:hover {
+      background-color: rgba(252, 252, 253, 0.05);
+  }
+
+  &.active {
+      background-color: rgba(252, 252, 253, 0.08);
+  }
+}
+
+.dealer--region--name {
+  font-size: 18px;
+  font-weight: 500;
+}
+
+.dealer--toggle--icon {
+  font-size: 28px;
+  line-height: 1;
+  transition: transform 0.3s ease;
+}
+
+.dealer--list--content {
+  padding: 0 24px 24px;
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+      opacity: 0;
+      transform: translateY(-10px);
+  }
+  to {
+      opacity: 1;
+      transform: translateY(0);
+  }
+}
+
+.dealer--list {
+  list-style: none;
+  padding: 0;
+  padding-left:10px;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+
+  li {
+    margin: 0;
+    position: relative;
+    &:before{
+      content:'>';
+      font-size:12px;
+      margin-right:10px;
+    }
+    a{
+      text-decoration: underline;
+    }
+    
+  }
+}
+
+.dealer--link {
+  display: inline-block;
+  color: rgba(252, 252, 253, 0.7);
+  text-decoration: none;
+  font-size: 16px;
+  transition: all 0.2s ease;
+  padding: 8px 0;
+
+  &:hover {
+      color: rgb(252, 252, 253);
+      text-decoration: underline;
+  }
+}
+
+// 반응형 처리
+@media (max-width: 1024px) {
+  .dealer--search--section {
+      padding: 60px 48px;
+  }
+
+  .dealer--search--container {
+      gap: 40px;
+  }
+
+  .dealer--category--title {
+      font-size: 24px;
+      margin-bottom: 20px;
+      padding-bottom: 12px;
+  }
+
+  .dealer--region--header {
+      padding: 16px 20px;
+  }
+
+  .dealer--region--name {
+      font-size: 16px;
+  }
+
+  .dealer--list--content {
+      padding: 0 20px 20px;
+  }
+
+  .dealer--list {
+      gap: 6px;
+  }
+}
+
+@media (max-width: 768px) {
+  .dealer--search--section {
+      padding: 40px 24px;
+  }
+
+  .dealer--search--container {
+      gap: 32px;
+  }
+
+  .dealer--category--title {
+      font-size: 20px;
+      margin-bottom: 16px;
+      padding-bottom: 10px;
+  }
+
+  .dealer--region--header {
+      padding: 14px 16px;
+  }
+
+  .dealer--region--name {
+      font-size: 15px;
+  }
+
+  .dealer--toggle--icon {
+      font-size: 24px;
+  }
+
+  .dealer--list--content {
+      padding: 0 16px 16px;
+  }
+
+  .dealer--list {
+      gap: 6px;
+  }
+
+  .dealer--link {
+      font-size: 14px;
+      padding: 6px 0;
+  }
+}
+
+
+/*=================================================
+|버튼 리스트 css
+|START
+=================================================*/
+
+.light--gray--btn{
+  border: 0px;
+  flex-direction: column;
+  -webkit-box-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  justify-content: center;
+  transition-timing-function:cubic-bezier(0.75, 0.02, 0.5, 1);
+  transition-duration: 250ms;
+  border-radius: 999px;
+  cursor: pointer;
+  display: inline-flex;
+  box-sizing: border-box;
+  text-align: center;  
+  letter-spacing: 0px;
+  font-weight: 400;
+  text-decoration: none;
+  font-size: 12px;
+  line-height: 16px;
+  font-stretch: 105%;
+  padding: 8px 16px;
+  min-height: 36px;
+  background: rgb(101, 112, 129);
+  color: rgb(252, 252, 253);
+  box-shadow: rgba(101, 112, 129, 0) 0px 0px 0px 1px inset;
+
+  &:hover{
+    color:rgb(252,252,253);
+    background-color: rgb(44,52,63);
+    box-shadow: rgba(219, 223,230, .2) 0px 0px 0px 1px inset;
+  }
+}
+
+
+
+/*=================================================
+|버튼 리스트 css
+|뚱
+=================================================*/

app/assets/scss/style.scss

@@ -459,4 +459,5 @@ main{
         padding: 16px 32px;
         font-size: 16px;
     }
-}
+}
+

app/components/block/GridBanner.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="grid--banner--type2">
+    <ul>
+      <li v-for="(item, index) in items" :key="index">
+        <div class="thumb">
+          <img :src="item.image" :alt="item.title || '배너 이미지'" loading="lazy" />
+        </div>
+        <div class="desc--wrapper">
+          <h2 v-if="item.title">{{ item.title }}</h2>
+          <h3 v-if="item.subtitle">{{ item.subtitle }}</h3>
+          <NuxtLink
+            v-if="item.linkUrl"
+            class="more--detail--href mt--20 ft--16"
+            :to="item.linkUrl"
+            :target="item.linkTarget || '_self'"
+          >
+            {{ item.linkText || '자세히 보기' }} <i class="ico"></i>
+          </NuxtLink>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+  // Props 정의
+  const props = defineProps({
+    items: {
+      type: Array,
+      required: true,
+      validator: (value) => {
+        return value.every(
+          (item) =>
+            item.hasOwnProperty("image") && item.hasOwnProperty("title")
+        );
+      },
+    },
+  });
+</script>

app/components/block/TitleVisual.vue

@@ -13,7 +13,7 @@
         :class="{ visible: isVisible }"
       >
         <h2 class="title--main">{{ title }}</h2>
-        <span class="title--description">{{ description }}</span>
+        <span class="title--description" v-html="description"></span>
         <div v-if="$slots.default" class="title--additional">
           <slot></slot>
         </div>

app/components/block/fullSizeBannerText1.vue

@@ -1,6 +1,10 @@
 <template>
-  <section class="img--section--full" :data-type="type">
-    <div>
+  <section
+    class="img--section--full"
+    :data-type="type"
+    :data-text-location="textLocation"
+  >
+    <div :style="{ height: height + 'px' }">
       <picture>
         <source media="(max-width: 768px)" :srcset="`${imagePath}?width=768`" />
         <source media="(max-width: 1024px)" :srcset="`${imagePath}?width=1024`" />
@@ -16,10 +20,19 @@
 <script setup>
   // Props 정의
   const props = defineProps({
+    height: {
+      type: String,
+      default: "100vh",
+    },
     imagePath: {
       type: String,
       default: "/img/exclusive/1920X1080_exclusive_edited_v2.jpg",
     },
+    textLocation: {
+      type: String,
+      default: "bottom",
+      validator: (value) => ["bottom", "top", "left", "right"].includes(value),
+    },
     altText: {
       type: String,
       default: "Banner Image",

app/pages/service/coreprocess.vue

@@ -0,0 +1,65 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>서비스 핵심 프로세스 2.0 (4+1단계)</h2>
+          <h3>
+            아우디 서비스 핵심 프로세스 2.0 (Audi Service Core Process 2.0)은 고객 서비스
+            패러다임의 변화에 발 맞추어, '고객 중심의' '유연하고' '미래 지향적인' 새로운
+            아우디 서비스 전략입니다. 기존의 7단계 절차를 4+1단계로 간소화하여, 고객
+            친화적이며 효율적인 서비스 제공을 목표로 합니다.
+          </h3>
+
+          <ul class="service--process--list">
+            <li>
+              1. 예약
+              <p>
+                기존의 "예약"과 "예약 준비" 단계가 통합되어 고객님과 차량의 기본 정보를
+                확인하고 다양한 요구에 대응하기 위해 만반의 준비를 하게 됩니다. 예약 일정,
+                예상 소요시간, 방문 정보 등 맞춤형 프리미엄 서비스를 제공합니다.
+              </p>
+            </li>
+            <li>
+              2. 체크인
+              <p>
+                서비스 센터에서 차량 접수와 동시에 편안하고, 안전하게 접수 할 수 있도록
+                준비합니다. 무엇보다 고객님의 요구에 맞추어 신속하고 적극적으로 해결책을
+                제시하는 단계입니다.
+              </p>
+            </li>
+
+            <li>
+              3. 작업 실행
+              <p>
+                아우디 전용 첨단 진단기와 규격화된 장비를 이용하여 표준 정비 매뉴얼에 따라
+                수리 및 유지 보수 작업이 이행되며, 투명하고 신뢰 높은 작업을 통해 아우디의
+                서비스 품질을 보장합니다.
+              </p>
+            </li>
+
+            <li>
+              4. 체크아웃
+              <p>
+                완벽하게 작업된 차량과 함께, 고객 눈높이에 맞는 자세한 설명으로 투명하게
+                책정된 청구 비용과 추후 점검 및 소모품 관리 정보를 함께 안내합니다.
+              </p>
+            </li>
+
+            <li>
+              +1 고객관리
+              <p>
+                구매부터 서비스 그리고 재구매까지, 고객님의 일상에 통합되고 일관성있는
+                브랜드 경험을 제공하기 위해 보다 적극적이고 미래 지향적인 방안을 제시
+                합니다. Audi connect 및 myAudiworld 앱을 통해, 다양한 고객 서비스를
+                이용하실 수 있습니다.
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/service/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi Service"
+        textLocation="top"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="아우디 서비스"
+        description="아우디코리아의 고객만족 서비스를 만나 보십시오."
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <GridBanner :items="bannerItems" class="mt--45" />
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import GridBanner from "~/components/block/GridBanner.vue";
+
+  const bannerImagePath = ref("/img/service/service_4_1920X1080.jpg");
+  const bannerItems = ref([
+    {
+      image: "/img/service/service_5_1920X1080.jpg",
+      title: "서비스 핵심 프로세스",
+      subtitle:
+        "전 세계적으로 공통 적용되는 아우디의 글로벌 표준 고객 서비스 프로세스입니다.",
+      linkUrl: "/service/coreprocess",
+      linkText: "자세히 보기",
+      linkTarget: "_self",
+    },
+    {
+      image: "/img/service/service_6_1920X1080.jpg",
+      title: "테크니션",
+      subtitle:
+        "최상의 정비를 제공하기 위해 아우디 글로벌 표준 과정을 통해 양성되는 전문인력이 차량을 점검합니다.",
+      linkUrl: "/service/technician",
+      linkText: "자세히 보기",
+    },
+    {
+      image: "/img/service/service_7_1920X1080.jpg",
+      title: "정비 설명 프로세스",
+      subtitle:
+        "정비내역에 대한 고객의 완벽한 이해를 돕기 위해 도입된 새로운 프로세스를 제공합니다.",
+      linkUrl: "/service/maintenanceprocess",
+      linkText: "자세히 보기",
+    },
+    {
+      image: "/img/service/service_8_1920X1080.jpg",
+      title: "서비스 어드바이저",
+      subtitle:
+        "최상의 서비스를 제공하기 위해서 아우디 글로벌 표준 과정을 통해 양성되는 전문인력만이 고객과 함께 합니다.",
+      linkUrl: "/service/serviceadvisor",
+      linkText: "자세히 보기",
+    },
+  ]);
+</script>

app/pages/service/maintenanceprocess.vue

@@ -0,0 +1,19 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>정비 설명 프로세스</h2>
+          <h3>
+            정비내역에 대한 고객의 완벽한 이해를 돕기 위해 도입된 새로운
+            프로세스입니다.<br /><br />
+            서비스 어드바이저와 고객과 마주 앉아, 듀얼 모니터와 Audi Service
+            Information프로그램을 통해 정비내역에 대한 상세 안내 및 설명을 진행합니다.
+          </h3>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/service/serviceadvisor.vue

@@ -0,0 +1,30 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>서비스 어드바이저 (Service Advisor)</h2>
+
+          <ul class="service--process--list">
+            <li>
+              양성 과정 (Service Training)<br /><br />
+              <p>
+                - Audi AG (아우디 본사) 표준 240시간 교육 이수M<br /><br />
+                - e-learning을 통한 상시 최신 기술교육
+              </p>
+            </li>
+            <li>
+              서비스 경진 대회 (Audi Twin Cup)<br /><br />
+              <p>
+                - 국내 서비스 경진대회를 통한 자체 역량 강화 (년 1회)<br /><br />
+                - 국제 서비스 경진대회 참가 및 상위권 입상 (년 1회)
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/service/technician.vue

@@ -0,0 +1,33 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>테크니션 (Audi Technician)</h2>
+
+          <ul class="service--process--list">
+            <li>
+              양성과정 (Technical Training)<br /><br />
+              <p>
+                - Audi AG (아우디 본사) 표준 기술교육 300시간 이수<br /><br />
+                - e-learning을 통한 상시 최신 기술교육 습득<br /><br />
+                - 우수 자동차 전공 대학생 대상의 산학협동 프로그램 운영 (12주 과정)<br /><br />
+                - Audi Master Technician (마스터 자격)<br /><br />
+                - Audi Technician Certificate (진단 전문가) 공식인증 제도 운영
+              </p>
+            </li>
+            <li>
+              기술 경진 대회(Audi Twin Cup)<br /><br />
+              <p>
+                - 국내 기술 경진대회를 통한 기술력 강화 (년 1회)<br /><br />
+                - 국제 기술 경진대회 참가 및 상위권 입상 (년 1회)
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/serviceprogram/accidentassistance.vue

@@ -0,0 +1,67 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>Audi Accident Care Program</h2>
+          <br /><br />
+          <h2>아우디 사고차량 지원 프로그램</h2>
+          <br />
+          <h3>
+            갑작스런 차량사고가 발생하셨다면 아우디 고객지원센터(080-767-2834)로
+            전화주십시오. <br /><br />아우디 사고차량 지원 서비스가 신속한 사고 처리가
+            이루어질 수 있도록 도와 드리겠습니다.
+          </h3>
+          <br /><br />
+
+          <ul class="service--process--list mt--1 pt--1">
+            <li class="mb--1">전문 상담원의 신속하고 친절한 사고처리 절차 안내</li>
+            <li class="mb--1">
+              차량의 완벽한 사고수리를 위한 아우디 공식 서비스센터 정보 및 아우디 사고차량
+              지원서비스 종합 안내
+            </li>
+          </ul>
+
+          <br />
+          <br />
+
+          <h3>
+            무상 견인 서비스<br /><br />
+            거리에 상관없이 고객이 원하는 지점으로 무상 견인<br /><br /><br /><br />
+
+            안전 귀가 서비스<br /><br />
+            사고 당일 혹은 견인 입고일 총 1회 5만 원 한도 택시비 지원<br /><br /><br /><br />
+
+            무상점검 1회<br /><br />
+            아우디 공식 서비스센터에서 사고 수리받은 차량 무상점검 1회<br /><br /><br /><br />
+
+            1년간 사고 수리 보증<br /><br />
+
+            1년간 사고 수리 보증(부품은 기본 2년 보증)<br /><br /><br /><br />
+
+            무상 딜리버리 서비스<br /><br />
+
+            거리에 상관없이 고객이 원하는 지점으로 무상 딜리버리
+          </h3>
+
+          <ul class="service--process--list">
+            사고차량 지원 프로그램 서비스 제외 대상<br /><br />
+            <li class="mb--1">차량이 운행 가능함에도 견인 서비스를 요청하신 경우</li>
+            <li>
+              아우디 공식 서비스센터 입고 약정 후 고객님 변심으로 인해 수리를 원치
+              않으시거나 외부업체에서 수리를 원하시는 경우
+            </li>
+            <li class="not--before">
+              <p>
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/serviceprogram/audirepairquality.vue

@@ -0,0 +1,64 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>Audi Body & Paint Repair Quality</h2>
+          <br /><br />
+          <h2>아우디 사고차량 수리 품질 관리</h2>
+          <br />
+          <h3>
+            아우디 공식 서비스센터는 고객님의 차량을 처음 상태 그대로 수리해 드립니다.
+
+            <br /><br />수리 후 품질과 안전까지 생각하신다면 아우디 공식 서비스센터를 통한
+            사고차량 수리를 권해드립니다.
+          </h3>
+          <br /><br />
+
+          <ul class="service--process--list mt--1 pt--1">
+            <li class="mb--1">전독일 본사의 인증을 받은 전문 테크니션에 의한 수리</li>
+            <li class="mb--1">표준화된 수리매뉴얼 준수</li>
+            <li class="mb--1">차량 모델별 전용장비 및 특수공구 사용</li>
+            <li class="mb--1">100% 순정 부품 사용</li>
+            <li class="mb--1">공인된 시스템 사용을 통한 투명한 수리 견적</li>
+          </ul>
+
+          <br />
+          <br />
+
+          <h2>아우디 알루미늄 바디 (Audi Aluminum Body)</h2>
+          <h3 class="mt--40">
+            대부분의 최신 아우디 차량의 차체는 알루미늄과 고장력 강판이 적절하게 혼합되어
+            구성되어 있습니다. 알루미늄은 차량의 무게를 줄여 차량의 연비를 향상시키는
+            역할을 하며 고장력 강판은 우수한 강성으로 차량의 안전성을 높입니다.<br /><br />
+            그러나 알루미늄은 일반 철판과는 재료의 성질이 다르기 때문에 판금 및 용접, 도장
+            등 모든 사고 수리에 있어 전문교육을 받은 인력이 전용 공구와 매뉴얼을 사용하여
+            수리해야 합니다.<br /><br />
+            ※ 좌측 도안은 이해를 돕기 위한 것으로 차종 및 연식에 따라 차이가 있을 수
+            있습니다.
+          </h3>
+
+          <br />
+          <br />
+
+          <h2>수리품질 비교 충돌테스트</h2>
+
+          <ul class="service--process--list mt--40 pt--1">
+            <li class="mb--30 not--before">
+              차량 측면 B필러 하단의 차체 부품을 아우디 표준수리 매뉴얼을 준수하지 않고
+              수리를 한 후 측면 충돌테스트를 수행한 결과 기존 설계와는 다른 부위의 파손이
+              일어남이 확인되었습니다.
+            </li>
+
+            <li class="mb--1 not--before">
+              이는 유럽에서 가장 권위 있는 차량안전 기관 중에 하나인 EURO NCAP에서
+              부여하는 안전 등급이 한단계가 하락할 수 있는 결과입니다.
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/serviceprogram/audiservicecouponpackage.vue

@@ -0,0 +1,658 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>
+            Audi Extended Service Package<br />
+            아우디 서비스 연장 패키지
+          </h2>
+          <br /><br />
+          <h3>
+            아우디 서비스 연장 패키지는 고객님의 차량을 최적의 컨디션으로 운행하시는데
+            도움을 드리는 차량 유지관리 프로그램입니다.<br /><br /><br />
+            본 프로그램을 통해 고객님의 아우디 차량 유지관리에 필요한 비용과 시간을 줄일
+            수 있습니다.<br />
+            아우디 서비스 연장 패키지와 함께 언제나 즐겁고 안전한 드라이빙을 즐기시기
+            바랍니다.<br /><br /><br />
+            ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+            고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+          </h3>
+          <br /><br />
+
+          <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=""
+                        ><h3 class="" data-testid="headline">프리미엄 패키지</h3></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><h3 class="" data-testid="headline">스탠다드 패키지</h3></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><h3 class="" data-testid="headline">
+                          브레이크 패드 패키지
+                        </h3></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><h3 class="" data-testid="headline">브레이크 패키지</h3></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><h3 class="" data-testid="headline">클린 패키지</h3></span
+                      >
+                    </td>
+                    <td class="">
+                      <span class=""
+                        ><h3 class="" data-testid="headline">슬림 패키지</h3></span
+                      >
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <br /><br />
+          <br /><br />
+
+          <h2>Audi / A8 패키지</h2>
+          <h2 class="middle mt--80">프리미엄 패키지</h2>
+          <div class="data--table--wrap mt--20">
+            <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>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">엔진 오일 + 오일 필터</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 오일</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">공기 정화 필터 (에어컨 필터)</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">에어클리너 필터</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">애드 블루 *</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">동결 방지 클리너 (순정 워셔액)</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">트랜스 미션 오일 *</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">Poly v-벨트</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">스파크 플러그 or 연료필터 **</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <h2 class="middle mt--80">스탠다드 패키지</h2>
+          <div class="data--table--wrap mt--20">
+            <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>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">엔진 오일 + 오일 필터</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 오일</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">공기 정화 필터 (에어컨 필터)</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">에어클리너 필터</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">애드 블루 *</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">동결 방지 클리너 (순정 워셔액)</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <h2 class="middle mt--80">브레이크 패드 패키지</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>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 패드 (뒤)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <h2 class="middle mt--80">브레이크 패키지</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>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 디스크 (뒤)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 패드 (앞)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 패드 (뒤)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <h2 class="middle mt--80">클린 패키지</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>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">후면 와이퍼블레이드 ***</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">극세사 실내용 브러쉬 (순정 액세서리)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">범용 청소용 타월 (순정 액세서리)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <h2 class="middle mt--80">슬림 패키지 ****</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>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <ul class="service--process--list mt--80">
+            <li class="not--before">
+              <p>
+                '*' 안내<br /><br /><br />
+                * 애드블루와 트랜스 미션 오일은 모델에 따라 포함 여부가 다를 수 있으며
+                패키지 가격 또한 포함되는 항목에 맞추어 다르게 책정됩니다.<br /><br />
+                ** 가솔린 차량에는 스파크 플러그, 디젤 차량에는 연료 필터가 적용됩니다.<br /><br />
+                *** 후면 와이퍼블레이드 존재하는 모델 한정<br /><br />
+                **** 보증 시작일로부터 84개월 이상 차량에 한하여 슬림 패키지 구매 가능(월
+                단위로 계산)
+              </p>
+            </li>
+          </ul>
+
+          <h2>e-tron 패키지</h2>
+          <h2 class="middle mt--80">스탠다드 플러스 패키지</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>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">공기 정화 필터 교환</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">구동축 냉각수 카트리지 교환 *</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 오일 교환</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">동결 방지 클리너 (순정 워셔액)</span>
+                    </td>
+                    <td class="">
+                      <span class="">2회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <h2 class="middle mt--80">브레이크 패드 플러스 패키지</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>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 패드 교환 (뒤)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <h2 class="middle mt--80">브레이크 플러스 패키지</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>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 디스크 교환 (뒤)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 패드 교환 (앞)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">브레이크 패드 교환 (뒤)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <h2 class="middle mt--80">클린 패키지</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>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">후면 와이퍼블레이드 **</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">극세사 실내용 브러쉬 (순정 액세서리)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">범용 청소용 타월 (순정 액세서리)</span>
+                    </td>
+                    <td class="">
+                      <span class="">1회</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <ul class="service--process--list mt--80">
+            <li class="not--before">
+              <p>
+                '*' 안내<br /><br /><br />
+                * 구동축 냉각수 카트리지 교환 서비스는 차종에 따라 다를 수 있습니다.<br /><br />
+                ** 후면 와이퍼블레이드 존재하는 모델 한정<br /><br />
+                ※ 차량 옵션 및 연식에 따라 패키지 구성이 달라질 수 있으며, 더욱 자세한
+                내용은 아우디 고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+              </p>
+            </li>
+          </ul>
+
+          <br />
+          <br />
+          <br />
+          <h2>패키지 권장 사용주기</h2>
+          <div class="radius--img--wrap">
+            <img src="/img/service/program/PC_B_1280X550.avif" />
+          </div>
+
+          <ul class="service--process--list mt--20">
+            <li class="not--before">
+              <p>
+                '*' 안내<br /><br /><br />
+                * 위의 교환주기는 연평균 주행거리 15,000km ~ 20,000km 기준으로 한 권장
+                사용 주기입니다. 주행거리 및 운전 습관에 따라 사용 주기는 달라질 수
+                있습니다.<br /><br />
+                ** 브레이크 패키지는 운전 습관에 따라 교환 주기가 상이함으로 브레이크 부품
+                상태 및 적정 교환 주기는 아우디 공식 서비스센터에 문의하시기 바랍니다.
+              </p>
+            </li>
+          </ul>
+          <br />
+          <br />
+          <br />
+          <h2>아우디에 최적화된 차량 유지관리</h2>
+          <ul class="service--process--list pt--40">
+            <li class="not--before">
+              <p>
+                • 스탠다드 패키지<br />
+                &nbsp;&nbsp;매 30,000Km 마다 점검 및 교체해야 하는 부품<br /><br />
+                • 프리미엄 패키지<br />
+                &nbsp;&nbsp;매 60,000Km 마다 점검 및 교체해야 하는 부품<br /><br />
+                • 브레이크 패키지<br />
+                &nbsp;&nbsp;제동성능 유지관리를 위한 브레이크 구성품
+              </p>
+            </li>
+          </ul>
+          <br />
+          <br />
+          <br />
+          <h2>편리하고 저렴한 차량 유지관리</h2>
+          <ul class="service--process--list pt--40">
+            <li class="not--before">
+              <p>
+                • 아우디 서비스 연장 패키지는 기존 유지관리 비용 대비 더 합리적인 가격으로
+                이용 가능합니다.<br /><br />
+                • 구매일로부터 5년간 사용이 가능해 차량 운행 거리가 많지 않으신 고객께서도
+                여유 있게 사용하실 수 있습니다.<br /><br />
+                • 아우디 서비스 연장 패키지는 구입처와 상관없이 모든 아우디 공식
+                서비스센터에서 사용이 가능합니다.<br /><br />
+                * 자사 공식 서비스센터의 개별 유지관리 비용 기준입니다.
+              </p>
+            </li>
+          </ul>
+          <br />
+          <br />
+          <br />
+          <h2>아우디 품질 보증 부품</h2>
+          <ul class="service--process--list pt--40">
+            <li class="not--before">
+              <p>
+                • 아우디 품질 보증 부품은 오랜 세월 축적된 전문 개발 기술로 생산되며
+                아우디의 엄격한 기준을 충족합니다.<br /><br />
+                • 아우디 품질 보증 부품은 지속적인 연구 개발을 통해 생산되며 항상 최신
+                기술 수준을 반영합니다.<br /><br />
+                • 아우디 서비스 연장 패키지는 100% 아우디 품질 보증 부품만을 사용합니다.
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/serviceprogram/carserviceplus.vue

@@ -0,0 +1,264 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>Car Service Plus<br />카 서비스 플러스</h2>
+          <br /><br />
+
+          <h2>Audi 서비스<br />아우디 카 서비스 플러스</h2>
+
+          <div class="data--table--wrap mt--40">
+            <div class="hide-caption">
+              <table class="" aria-label="Data table" data-testid="table">
+                <caption class=""></caption>
+
+                <tbody class="">
+                  <tr class="">
+                    <td class="">
+                      <span class="">1년 또는 15,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >차량 점검, 엔진 오일 + 오일 필터 교환, 공기정화 필터, 애드블루 *,
+                        픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">2년 또는 30,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >차량 점검, 엔진 오일 + 오일 필터 교환, 에어클리너 교환, 공기정화
+                        필터, 브레이크 오일, 애드블루 *, 픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">3년 또는 45,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >차량 점검, 엔진 오일 + 오일 필터 교환, 공기정화 필터, 애드블루 *,
+                        픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <ul class="service--process--list">
+            <li class="not--before">
+              <p>
+                • 2020년 5월 1일 이후 등록된 차량에 적용됩니다.<br />
+                • 2021년 12월 31일 이전 등록된 모든 A1, A3, Q2 모델은 카 서비스 플러스가
+                제공되지 않습니다. (단, A3 e-tron 및 S3 차량은 카서비스 플러스가
+                제공됩니다)<br />
+                • 본 서비스의 유효기간은 차량등록일로부터 3년입니다. 유효기간 내 미사용
+                항목은 현금이나 물품으로 제공되지 않습니다.<br />
+                • 2025년형 이후 출시되는 모델 중 A3, Q3 모델은 카 서비스 플러스 기간이
+                1년만 적용됩니다. (A4~Q8 모델은 3년 적용)<br />
+                • 상기 마일리지는 아우디 권장 정비주기입니다.<br />
+                • 애드블루 * 서비스는 차종에 따라 다를 수 있습니다.<br />
+                • 픽업 딜리버리 * 서비스는 2024년식 차량부터 적용됩니다.<br /><br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+              </p>
+            </li>
+          </ul>
+
+          <h2>A8 서비스<br />프리미엄 카 서비스 플러스</h2>
+          <h3>
+            아우디 프리미엄 카 서비스 플러스 프로그램은 Audi A8의 차량특성에 맞는 정기점검
+            및 소모성 부품 교환 등 보다 업그레이드 된 고품질의 다양한 서비스를 제공해
+            드립니다.
+          </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="">1년 또는 15,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >차량점검, 엔진 오일 + 오일 필터 교환, 공기정화 필터, 애드블루
+                        (디젤차량), 픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">2년 또는 30,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >차량점검, 엔진 오일 + 오일 필터 교환, 에어클리너 교환, 브레이크
+                        오일, 공기정화 필터, 애드블루 (디젤차량), 픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">3년 또는 45,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >차량점검, 엔진 오일 + 오일 필터 교환, 공기정화 필터, 애드블루
+                        (디젤차량), 픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">4년 또는 60,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >차량점검, 엔진 오일 + 오일 필터 교환, 에어클리너 교환, 공기정화
+                        필터, 브레이크 오일, poly v-벨트, 애드블루 (디젤 차량), 연료필터
+                        (디젤 차량),&nbsp; 스파크 플러그 (가솔린 차량), 픽업 딜리버리
+                        *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">5년 또는 75,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >차량점검, 엔진 오일 + 오일 필터 교환, 공기정화 필터, 애드블루
+                        (디젤차량), 픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <ul class="service--process--list">
+            <li class="not--before">
+              <p>
+                • 2020년 5월 1일 이후 등록된 차량에 적용됩니다.<br />
+                • 본 서비스의 유효기간은 차량등록일로부터 5년입니다. 유효기간 내 미사용
+                항목은 현금이나 물품으로 제공되지 않습니다.<br />
+                • 상기 마일리지는 아우디 권장 정비주기입니다.<br />
+                • 픽업 딜리버리 * 서비스는 2024년식 차량부터 적용됩니다.<br /><br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+              </p>
+            </li>
+          </ul>
+
+          <h2>e-tron 서비스<br />e-카 서비스 플러스</h2>
+          <h3>
+            e-카 서비스 플러스 프로그램은아우디 공식 서비스센터에서 제공되는 차량 유지관리
+            서비스입니다.<br />
+
+            아우디 공식 서비스센터를 통해 제공되는 전문적이고 체계적인 유지관리는 추가
+            비용 부담 없이 고객님 차량의 가치를 더욱 높여줄 것입니다.
+          </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="">1년 또는 15,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >정기점검, 공기정화 필터 교환, 구동축 냉각수 카트리지 교환 *, 픽업
+                        딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">2년 또는 30,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >정기점검, 공기정화 필터 교환, 구동축 냉각수 카트리지 교환 *,
+                        브레이크 오일 교환, 픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">3년 또는 45,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >정기점검, 공기정화 필터 교환, 구동축 냉각수 카트리지 교환 *, 픽업
+                        딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">4년 또는 60,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >정기점검, 공기정화 필터 교환, 구동축 냉각수 카트리지 교환 *,
+                        브레이크 오일 교환, 픽업 딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">5년 또는 75,000km</span>
+                    </td>
+                    <td class="">
+                      <span class=""
+                        >정기점검, 공기정화 필터 교환, 구동축 냉각수 카트리지 교환 *, 픽업
+                        딜리버리 *</span
+                      >
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <ul class="service--process--list">
+            <li class="not--before">
+              <p>
+                • 본 서비스의 유효기간은 차량 등록일로부터 5년입니다. 유효기간 내 미사용
+                항목은 현금이나 물품으로 제공되지 않습니다.<br />
+                • 2025년형 이후 출시되는 모델 중 Q4 e-tron 모델은 e-카 서비스 플러스
+                기간이 1년만 적용됩니다. (A6, Q6, Q8 e-tron, e-tron GT 모델은 3년 적용)<br />
+                • 상기 마일리지(주행거리)는 아우디 권장 정비주기입니다.<br />
+                • 구동축 냉각수 카트리지 교환 * 서비스는 차종에 따라 다를 수 있습니다.<br />
+                • 픽업 딜리버리 * 서비스는 2024년식 차량부터 적용됩니다.<br /><br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/serviceprogram/dealersearch.vue

@@ -0,0 +1,373 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <!-- 풀사이즈 배너 텍스트 1줄용 -->
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        textLocation="top"
+        altText="전시장/AAP 전시장/AS센터"
+        type="cover"
+      />
+      <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
+                v-show="activeRegions.showroom === index"
+                class="dealer--list--content"
+              >
+                <ul class="dealer--list">
+                  <li
+                    v-for="(dealer, dIndex) in region.dealers"
+                    :key="'dealer-' + dIndex"
+                  >
+                    <a :href="dealer.link" class="dealer--link"
+                      >아우디 {{ dealer.name }}</a
+                    >
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <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>
+              <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"
+                  >
+                    <a :href="dealer.link" class="dealer--link"
+                      >아우디 AAP {{ dealer.name }}</a
+                    >
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <TitleVisual
+        title="서비스센터"
+        description="원하시는 지역의 아우디 서비스 센터 위치 및 연락처를 안내해드립니다.<br/>24시간 긴급출동 서비스 센터: 080-767-2834"
+        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 serviceCenters"
+              :key="'service-' + index"
+              class="dealer--region--item"
+            >
+              <button
+                class="dealer--region--header"
+                @click="toggleRegion('service', index)"
+                :class="{ active: activeRegions.service === index }"
+              >
+                <span class="dealer--region--name">{{ region.name }}</span>
+                <span class="dealer--toggle--icon">{{
+                  activeRegions.service === index ? "−" : "+"
+                }}</span>
+              </button>
+              <div v-show="activeRegions.service === index" class="dealer--list--content">
+                <ul class="dealer--list">
+                  <li
+                    v-for="(dealer, dIndex) in region.dealers"
+                    :key="'dealer-' + dIndex"
+                  >
+                    <a :href="dealer.link" class="dealer--link"
+                      >아우디 서비스 {{ dealer.name }}</a
+                    >
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup>
+  // 컴포넌트 import
+  import FullSizeBannerText1 from "~/components/block/fullSizeBannerText1.vue";
+  import TitleVisual from "~/components/block/TitleVisual.vue";
+
+  const bannerImagePath = ref("/img/service/program/banner_1920X1080.avif");
+
+  // 딜러 검색 드롭다운 상태 (지역별)
+  const activeRegions = ref({
+    showroom: null,
+    approved: null,
+    service: null,
+  });
+
+  // 지역 토글 함수
+  const toggleRegion = (category, index) => {
+    activeRegions.value[category] =
+      activeRegions.value[category] === index ? null : index;
+  };
+
+  // 전시장 데이터
+  const showrooms = ref([
+    {
+      name: "서울",
+      dealers: [
+        { name: "강서", link: "#" },
+        { name: "남산", link: "#" },
+        { name: "대치", link: "#" },
+        { name: "도산대로", link: "#" },
+        { name: "동대문", link: "#" },
+        { name: "송파대로", link: "#" },
+      ],
+    },
+    {
+      name: "인천/경기",
+      dealers: [
+        { name: "동탄", link: "#" },
+        { name: "분당", link: "#" },
+        { name: "서수원", link: "#" },
+        { name: "송도", link: "#" },
+        { name: "수원", link: "#" },
+        { name: "컨셉스토어 스타필드 수원", link: "#" },
+        { name: "스타필드 안성", link: "#" },
+        { name: "스타필드 하남", link: "#" },
+        { name: "안양", link: "#" },
+        { name: "의정부", link: "#" },
+        { name: "인천", link: "#" },
+        { name: "일산", link: "#" },
+      ],
+    },
+    {
+      name: "충청/대전",
+      dealers: [
+        { name: "대전", link: "#" },
+        { name: "천안", link: "#" },
+      ],
+    },
+    {
+      name: "전북/전주",
+      dealers: [{ name: "전주", link: "#" }],
+    },
+    {
+      name: "전남/광주",
+      dealers: [
+        { name: "광주", link: "#" },
+        { name: "목포", link: "#" },
+      ],
+    },
+    {
+      name: "경북/대구",
+      dealers: [
+        { name: "대구", link: "#" },
+        { name: "서대구", link: "#" },
+      ],
+    },
+    {
+      name: "부산",
+      dealers: [
+        { name: "금정", link: "#" },
+        { name: "해운대", link: "#" },
+      ],
+    },
+    {
+      name: "경남/울산",
+      dealers: [
+        { name: "울산", link: "#" },
+        { name: "창원", link: "#" },
+        { name: "컨셉스토어 김해", link: "#" },
+      ],
+    },
+    {
+      name: "강원/원주",
+      dealers: [{ name: "원주", link: "#" }],
+    },
+  ]);
+
+  // Audi Approved :plus 데이터
+  const approvedPlus = ref([
+    {
+      name: "서울",
+      dealers: [
+        { name: "동대문", link: "#" },
+        { name: "가양", link: "#" },
+      ],
+    },
+    {
+      name: "인천/경기",
+      dealers: [
+        { name: "김포", link: "#" },
+        { name: "분당", link: "#" },
+        { name: "서수원", link: "#" },
+      ],
+    },
+    {
+      name: "충청/대전",
+      dealers: [{ name: "대전", link: "#" }],
+    },
+    {
+      name: "전남/광주",
+      dealers: [{ name: "광주", link: "#" }],
+    },
+    {
+      name: "전북/전주",
+      dealers: [{ name: "전주", link: "#" }],
+    },
+    {
+      name: "경북/대구",
+      dealers: [{ name: "동대구", link: "#" }],
+    },
+    {
+      name: "경남/울산",
+      dealers: [{ name: "양산", link: "#" }],
+    },
+    {
+      name: "강원/원주",
+      dealers: [{ name: "원주", link: "#" }],
+    },
+  ]);
+
+  // 서비스센터 데이터
+  const serviceCenters = ref([
+    {
+      name: "서울",
+      dealers: [
+        { name: "개포", link: "#" },
+        { name: "김포공항", link: "#" },
+        { name: "남산", link: "#" },
+        { name: "논현", link: "#" },
+        { name: "송파대로", link: "#" },
+        { name: "석촌", link: "#" },
+        { name: "동대문", link: "#" },
+      ],
+    },
+    {
+      name: "인천/경기",
+      dealers: [
+        { name: "강동", link: "#" },
+        { name: "동탄", link: "#" },
+        { name: "분당", link: "#" },
+        { name: "서수원", link: "#" },
+        { name: "수원", link: "#" },
+        { name: "안양", link: "#" },
+        { name: "인천", link: "#" },
+        { name: "일산", link: "#" },
+      ],
+    },
+    {
+      name: "충청/대전",
+      dealers: [
+        { name: "대전", link: "#" },
+        { name: "천안", link: "#" },
+        { name: "청주", link: "#" },
+      ],
+    },
+    {
+      name: "전북/전주",
+      dealers: [{ name: "전주", link: "#" }],
+    },
+    {
+      name: "전남/광주",
+      dealers: [
+        { name: "광주", link: "#" },
+        { name: "목포", link: "#" },
+        { name: "순천", link: "#" },
+      ],
+    },
+    {
+      name: "경북/대구",
+      dealers: [
+        { name: "대구", link: "#" },
+        { name: "서대구", link: "#" },
+        { name: "수성", link: "#" },
+        { name: "포항", link: "#" },
+      ],
+    },
+    {
+      name: "부산",
+      dealers: [
+        { name: "금정", link: "#" },
+        { name: "민락", link: "#" },
+      ],
+    },
+    {
+      name: "경남/울산",
+      dealers: [
+        { name: "양산", link: "#" },
+        { name: "진주", link: "#" },
+        { name: "창원", link: "#" },
+        { name: "울산", link: "#" },
+      ],
+    },
+    {
+      name: "강원/원주",
+      dealers: [{ name: "원주", link: "#" }],
+    },
+  ]);
+</script>

app/pages/serviceprogram/expressservice.vue

@@ -0,0 +1,58 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>Audi Express Service</h2>
+          <br /><br />
+          <h2 class="middle">아우디 익스프레스 서비스</h2>
+          <br /><br />
+
+          <ul class="service--process--list mt--1 pt--1">
+            아우디는 고객님의 소중한 시간을 절약해드리기 위해 다양한 서비스를 제공하고
+            있습니다.<br /><br />
+            <li class="not--before">
+              • Audi Twin Service(아우디 트윈 서비스)<br /><br />
+              <p>두명의 테크니션이 동시에 고객님의 차량을 정비합니다.</p>
+            </li>
+            <li class="not--before">
+              • Audi Service Express(ASE)(아우디 서비스 익스프레스)<br /><br />
+              <p>
+                고객님과 가까운 곳에서 보다 신속하고 편리하게<br /><br />
+
+                차량관리 서비스를 제공합니다.
+              </p>
+            </li>
+
+            <li class="not--before">
+              • Service Reservation(서비스 사전 예약)<br /><br />
+              <p>
+                사전 예약을 통해 고객님께 가장 편리한 시간에<br /><br />
+                정비 받으시기 바랍니다.<br /><br /><br /><br />
+
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+              </p>
+            </li>
+          </ul>
+
+          <br />
+          <br />
+
+          <h3>
+            언제 어디서나 신속 정확한 서비스를 위해<br /><br />아우디는 전국에 공식
+            서비스센터를 운영하고 있습니다.
+          </h3>
+          <NuxtLink
+            class="more--detail--href ft--16 mt--20"
+            to="/serviceprogram/dealersearch"
+            target="_self"
+            >아우디 공식 서비스센터 <i class="ico"></i
+          ></NuxtLink>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/serviceprogram/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <FullSizeBannerText1
+        :imagePath="bannerImagePath"
+        altText="Audi Service"
+        textLocation="top"
+        type="cover"
+        :height="800"
+      />
+
+      <TitleVisual
+        title="서비스 프로그램"
+        description=""
+        textAlign="left"
+        type="middle"
+        theme="dark"
+        :animation="true"
+        :animationDelay="300"
+      />
+
+      <!-- 제품 카드 컴포넌트 -->
+      <ProductCard
+        image="/img/service/program/1277x718.webp"
+        title="픽업 & 딜리버리 서비스"
+        subtitle="고객님의 차량을 직접 픽업하여 정비를 완료한 후, 다시 고객님께 안전하게 전달해드리는 탁송 서비스입니다."
+        buttonText="상세보기"
+        buttonUrl="/serviceprogram/pickupdelivery"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <ProductCard
+        image="/img/service/program/sbpm.webp"
+        title="아우디 모빌리티 서포트"
+        subtitle="긴급출동 후 차량 견인상황 시 발생한 교통비를 지원하는 서비스입니다."
+        buttonText="상세보기"
+        buttonUrl="/serviceprogram/support"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <ProductCard
+        image="/img/service/program/sbcp.webp"
+        title="아우디 카 서비스 플러스"
+        subtitle="아우디 카 서비스 플러스 프로그램은 고객의 차량 특성에 맞는 다양한 서비스를 제공해 드립니다."
+        buttonText="상세보기"
+        buttonUrl="/serviceprogram/carserviceplus"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <ProductCard
+        image="/img/service/program/10_1920x1080.webp"
+        title="아우디 서비스 연장 패키지"
+        subtitle="아우디 서비스 연장 패키지는 고객님의 차량을 최적의 컨디션으로 운행하시는데 도움을 드리는 차량 유지관리 프로그램입니다."
+        buttonText="상세보기"
+        buttonUrl="/serviceprogram/audiservicecouponpackage"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <ProductCard
+        image="/img/service/program/11_1920x1080.webp"
+        title="아우디 사고 차량 지원 프로그램"
+        subtitle="갑작스런 차량 사고 발생시, 고객님의 안전한 이동과 차량의 완벽한 수리를 약속드립니다."
+        buttonText="상세보기"
+        buttonUrl="/serviceprogram/accidentassistance"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="left"
+      />
+
+      <ProductCard
+        image="/img/service/program/12_1920x1080.webp"
+        title="아우디 사고 차량 수리 품질 관리"
+        subtitle="수리 후 품질과 안전까지 생각하신다면 아우디 공식 서비스센터를 통한 사고차량 수리를 권해드립니다."
+        buttonText="상세보기"
+        buttonUrl="/serviceprogram/audirepairquality"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="right"
+      />
+
+      <ProductCard
+        image="/img/service/program/13_1920x1080.webp"
+        title="아우디 익스프레스 서비스"
+        subtitle="고객님의 소중한 시간을 절약해드리기 위해 다양한 서비스를 제공하고 있습니다."
+        buttonText="상세보기"
+        buttonUrl="/serviceprogram/expressservice"
+        buttonTarget="_self"
+        layout="horizontal"
+        imagePosition="left"
+      />
+    </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";
+
+  const bannerImagePath = ref("/img/service/program/sp_9_1920X1080.jpg");
+</script>

app/pages/serviceprogram/pickupdelivery.vue

@@ -0,0 +1,239 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>Pickup & Delivery Service<br />픽업 & 딜리버리 서비스</h2>
+          <h3>
+            고객님의 차량을 직접 픽업하여 정비를 완료한 후, 다시 고객님께 안전하게
+            전달해드리는 탁송 서비스입니다.
+          </h3>
+
+          <ul class="service--process--list">
+            <li class="not--before">
+              • 이용 방법<br /><br />
+              <p>
+                편도 또는 왕복, 고객 맞춤형 이용 가능<br /><br />
+                고객님이 지정한 장소에서 전문 기사가 차량을 픽업<br />
+                서비스센터에서 점검 및 정비 완료<br />
+                이후 고객님이 원하는 장소로 안전하게 딜리버리<br /><br />
+                ※ 고객의 일정 및 상황에 따라 픽업만 / 딜리버리만 / 왕복 모두 선택
+                가능합니다.
+              </p>
+            </li>
+            <li class="not--before">
+              • 이용 요금
+              <p>
+                무상 및 유상 이용 가능<br /><br />
+                2024년형 이상 아우디 차량 보유 고객 : CSP 쿠폰에 포함된 픽업 & 딜리버리
+                쿠폰으로 연 2회 무상 이용 가능<br />
+                그 외 고객 : 기본 요금 20,000원부터 시작하여 이후 1km당 1,000원씩 거리
+                요금 추가(50KM까지)
+              </p>
+            </li>
+
+            <li class="not--before">
+              • 신청 방법
+              <p>
+                온라인 서비스 예약 시, 예약 완료 단계에서 픽업 & 딜리버리 서비스 신청<br /><br />
+                ※ 고객님 차량의 위치에서 가장 가까운 서비스 센터 기준으로 신청 가능합니다.
+              </p>
+            </li>
+
+            <li class="not--before">
+              • 상세 요금
+              <p>
+                운영지역: 전국<br />10KM까지 20,000원 이후 1KM 당 1,000원 추가(50KM까지)
+              </p>
+            </li>
+          </ul>
+
+          <div class="data--table--wrap">
+            <div class="hide-caption">
+              <table class="" aria-label="Data table" data-testid="table">
+                <thead class="">
+                  <tr class=""></tr>
+                </thead>
+                <tbody class="">
+                  <tr class="">
+                    <td class="">
+                      <span class=""><span class="sc-oUoif kzRFzM">거리별</span></span>
+                    </td>
+                    <td class="">
+                      <span class=""><span class="sc-oUoif kzRFzM">운영요금</span></span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">51km 이상~ 60km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">65,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">61km 이상~ 65km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">70,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">66km 이상~ 70km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">75,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">71km 이상~ 80km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">80,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">81km 이상~ 100km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">85,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">101km 이상~ 120km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">90,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">121km 이상~ 140km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">95,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">141km 이상~ 160km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">100,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">161km 이상~ 180km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">105,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">181km 이상~ 200km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">110,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">201km 이상~ 220km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">115,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">221km 이상~ 240km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">120,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">241km 이상~ 260km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">125,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">261km 이상~ 280km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">130,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">281km 이상~ 300km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">135,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">301km 이상~ 350km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">140,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">351km 이상~ 400km 이하</span>
+                    </td>
+                    <td class="">
+                      <span class="">145,000</span>
+                    </td>
+                  </tr>
+                  <tr class="">
+                    <td class="">
+                      <span class="">401km 이상~</span>
+                    </td>
+                    <td class="">
+                      <span class="">150,000</span>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+
+          <div class="desc--caution--text mt--40">
+            • 대기 요금: 초기 30분 무료, 이후 30분당 5,000원 추가<br />
+            • 경유 요금: 거리에 따른 경유 요금 추가 1km당 1,000원<br />
+            • 취소 비용: 배차 후 이동 시작 취소 10,000원 / 운행 시작 후 취소 탁송금액 (단,
+            전일 배정 06:00~09:00 오더 취소 시 10,000원)<br />
+            • 주유비 등 각종 기타 경비 실비 정산<br />
+            • 톨비(통행료) 포함, 특수지역 톨비(통행료) 실비 정산 (ex. 영종도, 거가대교
+            통행료 등)<br />
+            • 출/도착지 특수지역(오지) 요금 협의
+          </div>
+
+          <NuxtLink
+            to="https://www.audikoreaevent.co.kr/app/rsvt/applyServiceReservation.do"
+            target="_blank"
+            class="light--gray--btn mt--40"
+          >
+            온라인 서비스 예약하기
+          </NuxtLink>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>

app/pages/serviceprogram/support.vue

@@ -0,0 +1,285 @@
+<template>
+  <main>
+    <div class="detail--container--full">
+      <div class="inner--wrapper">
+        <div class="service--detail">
+          <h2>Mobility Support<br />모빌리티 서포트</h2>
+          <br /><br />
+
+          <h2>Audi 서비스<br />아우디 모빌리티 서포트</h2>
+          <h3>
+            운행 중 갑작스러운 기술적 문제가 발생하여도 불편함이 없도록 아우디 모빌리티
+            서포트 서비스를 제공해 드립니다.
+          </h3>
+
+          <ul class="service--process--list">
+            <h2>24시간 긴급 출동 서비스</h2>
+            <li class="not--before">
+              • 서비스 대상 : 아우디 보증 프로그램 만료 전 차량<br /><br />
+              <p>
+                편도 또는 왕복, 고객 맞춤형 이용 가능<br /><br />
+                고객님이 지정한 장소에서 전문 기사가 차량을 픽업<br />
+                서비스센터에서 점검 및 정비 완료<br />
+                이후 고객님이 원하는 장소로 안전하게 딜리버리<br /><br />
+                ※ 고객의 일정 및 상황에 따라 픽업만 / 딜리버리만 / 왕복 모두 선택
+                가능합니다.
+              </p>
+            </li>
+            <li class="not--before">
+              • 견인 서비스
+              <p>
+                &nbsp;&nbsp;- 현장에서 직접 조치가 불가능한 경우 가장 가까운 아우디 공식
+                서비스센터로 견인
+              </p>
+            </li>
+
+            <li class="not--before">• 비상 급유 서비스(연 2회 한정)</li>
+
+            <li class="not--before">
+              • 스페어 타이어 교체 서비스
+              <p>
+                &nbsp;&nbsp;- 스페어타이어가 고객님 차량에 비치되어 있는 경우<br />
+                &nbsp;&nbsp;- 수리 키트 비치 차량의 경우 임시 조치 서비스 진행
+              </p>
+            </li>
+
+            <h2>안전귀가 지원 서비스(택시 서비스)</h2>
+            <li class="not--before">
+              • 서비스 대상 : 견인 입고 후 수리 진행된 차량<br />
+              • 아우디 고객지원센터를 통해 안내받고 가장 가까운 아우디 공식 서비스센터로
+              견인된 경우<br />
+              • 견인 입고 당일 및 차량 출고일 양일간 발생하는 택시 요금 합계 최대
+              10만원<br />
+              • 비용 청구 서류 : 이용 하신 택시 영수증 원본(승하차 시간 표시된 택시
+              영수증)<br />
+              • 상기의 청구 서류가 준비 되지 않은 경우 비용이 지원되지 않습니다.
+            </li>
+
+            <h2>대차 서비스</h2>
+            <li class="not--before">
+              아우디는 하기의 조건에 해당 하는 보증 수리에 대하여 대차 서비스를 제공
+              합니다.<br />
+              • 수리 접수일 이후 이틀을 초과 하는 경우 (정밀 진단 등으로 운행에 불편함이
+              있는 차량 포함)<br />
+              • 서비스 센터 상황에 따라 대차 제공이 어려울 수도 있습니다.<br />
+              ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+              고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+            </li>
+
+            <h2>아우디 에어포트 서비스</h2>
+            <li class="not--before">
+              • 서비스 대상 : 아우디 서비스 김포공항 입고한 고객 중 유료 정비 서비스를
+              이용한 고객<br />
+              • 기본 무상 제공항목 : 실내주차(최대 7일), 차량 기본점검, 전기차 충전,
+              워셔액 충전 등<br />
+              • 기본 무상 제공항목 외 일반정비 및 에어컨 필터 교체, 와이퍼 교환, 스팀 세차
+              등 다양한 차량 관리 서비스도 유상으로 이용 가능<br />
+              • 운영시간 : 월요일~토요일(오전 10시~오후 7시)/일요일 및 공휴일 휴무, 예약
+              불가<br /><br /><br />
+              ※ 서비스 운영시간이 아닌 경우 일부 서비스 제약이 발생될 수 있습니다.
+            </li>
+
+            <li class="not--before">
+              • 동시에 최대 15대까지 가능<br />
+              • 아우디 서비스 김포공항 정보<br /><br />
+              <p>
+                &nbsp;&nbsp;- 전화번호 : 02-6116-3240<br />
+                &nbsp;&nbsp;- 주소: 서울 강서구 하늘길 38 롯데몰 김포공항점 P1<br />
+                &nbsp;&nbsp;- 충전기 설치 수량 : 2대 (50kw 1대 / 7kw 1대)<br />
+                &nbsp;&nbsp;- 충전소 운영시간 : 10:00 ~ 19:00<br /><br />
+                ※ 상기 서비스는 아우디 공식 딜러사인 바이에른오토에서 운영하는 서비스이며,
+                서비스에 대한 책임은 바이에른오토에게 있습니다<br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                서비스 김포공항으로 문의 바랍니다.
+              </p>
+            </li>
+
+            <h2>A8 서비스</h2>
+            <h2 class="middle">프리미엄 모빌리티 서포트</h2>
+            <br /><br />
+            <h3>
+              운행 중 갑작스러운 기술적 문제가 발생하여도 불편함이 없도록 아우디 프리미엄
+              모빌리티 서포트 서비스를 제공해 드립니다.
+            </h3>
+            <br /><br />
+            <h2>24시간 긴급 출동 서비스</h2>
+
+            <li class="not--before">
+              Audi A8 차량 중 도로상에서 문제가 발생한 경우 365일 24시간 긴급출동 서비스를
+              제공해드리며 현장에서 직접조치가 불가능한 경우 가까운 아우디 공식
+              서비스센터로 견인해 드립니다.
+              <br />
+              <br />
+              <p>
+                • 서비스 대상 : 아우디 보증 프로그램 만료 전 차량 <br />
+                • 견인서비스 <br />
+                &nbsp;&nbsp;- 현장에서 직접 조치가 불가능한 경우 가장 가까운 아우디 공식
+                서비스센터로 견인 <br />
+                • 비상 급유 서비스(연 2회 한정) <br />
+                • 스페어 타이어 교체 서비스 <br />
+                &nbsp;&nbsp;- 스페어타이어가 고객님 차량에 비치되어 있는 경우 <br />
+                &nbsp;&nbsp;- 수리 키트 비치 차량의 경우 임시 조치 서비스 진행 <br />
+                • 배터리 점프 서비스 <br />
+                • Audi Connect가 적용된 차량은 긴급 출동 버튼을 눌러 바로 아우디
+                고객지원센터로 연결 가능
+              </p>
+            </li>
+            <h2>안전귀가 지원 서비스(택시 서비스)</h2>
+            <li class="not--before">
+              <p>
+                • 서비스 대상 : 견인 입고 후 수리 진행된 차량<br /><br />
+                • 아우디 고객지원센터를 통해 안내받고 가장 가까운 아우디 공식 서비스센터로
+                견인된 경우<br /><br />
+                • 차량 입고일부터 출고일까지 발생하는 택시 요금 합계 최대 20만원<br /><br />
+                • 비용 청구 서류: 이용 하신 택시 영수증 원본(승하차 시간 표시된 택시
+                영수증)<br /><br />
+                • 상기의 청구 서류가 준비 되지 않은 경우 비용이 지원되지 않습니다.
+              </p>
+            </li>
+
+            <h2>대차 서비스</h2>
+            <li class="not--before">
+              타시던 차량의 승차감을 그대로 느끼실 수 있도록 Audi A8을 전국 각 지역 아우디
+              공식 서비스센터에서 무상으로 대차하여 드립니다.<br /><br />
+
+              <p>
+                • 수리 접수일 이후 이틀을 초과 하는 보증 수리의 경우 (정밀 진단 등으로
+                운행에 불편함이 있는 차량 포함)<br /><br />
+                • 서비스 센터 상황에 따라 대차 제공이 어려울 수도 있습니다.<br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                고객지원센터 및 아우디 공식 서비스센터로 문의바랍니다.
+              </p>
+            </li>
+
+            <h2>아우디 에어포트 서비스</h2>
+            <li class="not--before">
+              <p>
+                • 서비스 대상 : 아우디 서비스 김포공항 입고한 고객 중 유료 정비 서비스를
+                이용한 고객<br /><br />
+                • 기본 무상 제공항목 : 실내주차(최대 7일), 차량 기본점검, 전기차 충전,
+                워셔액 충전 등<br /><br />
+                • 기본 무상 제공항목 외 일반정비 및 에어컨 필터 교체, 와이퍼 교환, 스팀
+                세차 등 다양한 차량 관리 서비스도 유상으로 이용 가능<br /><br />
+                • 운영시간 : 월요일~토요일(오전 10시~오후 7시)/일요일 및 공휴일 휴무, 예약
+                불가<br /><br />
+                ※ 서비스 운영시간이 아닌 경우 일부 서비스 제약이 발생될 수 있습니다.<br /><br />
+                • 동시에 최대 15대까지 가능<br /><br />
+                • 아우디 서비스 김포공항 정보<br />
+                &nbsp;&nbsp;- 전화번호 : 02-6116-3240<br />
+                &nbsp;&nbsp;- 주소 : 서울 강서구 하늘길 38 롯데몰 김포공항점 P1<br />
+                &nbsp;&nbsp;- 충전기 설치 수량 : 2대 (50kw 1대 / 7kw 1대)<br />
+                &nbsp;&nbsp;- 충전소 운영시간 : 10:00 ~ 19:00<br /><br />
+                ※ 상기 서비스는 아우디 공식 딜러사인 바이에른오토에서 운영하는 서비스이며,
+                서비스에 대한 책임은 바이에른오토에게 있습니다<br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                서비스 김포공항으로 문의 바랍니다.
+              </p>
+            </li>
+
+            <h2>e-tron 서비스</h2>
+            <h2 class="middle">e-모빌리티 서포트</h2>
+            <br /><br />
+            <h3>
+              운행 중 갑작스러운 기술적 문제가 발생하여도 불편함이 없도록 아우디
+              e-모빌리티 서포트 서비스를 제공해 드립니다.
+            </h3>
+            <br /><br />
+            <h2>24시간 긴급 출동 서비스</h2>
+            <li class="not--before">
+              <p>
+                • 서비스 대상 : 아우디 보증 프로그램 만료 전 차량<br /><br />
+                • 견인 서비스<br />
+                &nbsp;&nbsp;- 현장에서 직접 조치가 불가능한 경우 가장 가까운 아우디 공식
+                서비스센터로 견인<br /><br />
+                • 스페어 타이어 교체 서비스<br /><br />
+                &nbsp;&nbsp;- 스페어타이어가 고객님 차량에 비치되어 있는 경우<br /><br />
+                &nbsp;&nbsp;- 수리 키트 비치 차량의 경우 임시 조치 서비스 진행<br /><br />
+                • 고전압 배터리 방전 견인 서비스<br /><br />
+                &nbsp;&nbsp;- 연 2회 제공<br /><br />
+                &nbsp;&nbsp;- 가까운 아우디 공식 충전소 혹은 공용 충전소로 견인<br /><br />
+                &nbsp;&nbsp;- 충전 비용은 고객 부담<br /><br />
+                • Audi Connect가 적용된 차량은 긴급 출동 버튼을 눌러 바로 아우디
+                고객지원센터로 연결 가능
+              </p>
+            </li>
+
+            <h2>안전귀가 지원 서비스(택시 서비스)</h2>
+            <li class="not--before">
+              <p>
+                • 서비스 대상 : 견인 입고 후 수리 진행된 차량<br /><br />
+                • 아우디 고객지원센터를 통해 안내받고 가장 가까운 아우디 공식 서비스센터로
+                견인된 경우<br /><br />
+                • 견인 입고 당일 및 차량 출고일 양일간 발생하는 택시 요금 합계 최대
+                10만원<br /><br />
+                • 비용 청구 서류 : 이용 하신 택시 영수증 원본(승하차 시간 표시된 택시
+                영수증)<br /><br />
+                • 상기의 청구 서류가 준비 되지 않는 경우 비용이 지원되지 않습니다.
+              </p>
+            </li>
+
+            <h2>대차 서비스</h2>
+            <li class="not--before">
+              <p>
+                아우디는 하기의 조건에 해당 하는 보증 수리에 대하여 대차 서비스를 제공
+                합니다.<br /><br />
+                • 수리 접수일 이후 이틀을 초과 하는 경우 (정밀 진단 등으로 운행에 불편함이
+                있는 차량 포함)<br /><br />
+                • 서비스 센터 상황에 따라 대차 제공이 어려울 수도 있습니다.<br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+              </p>
+            </li>
+
+            <h2>아우디 에어포트 서비스</h2>
+            <li class="not--before">
+              <p>
+                • 서비스 대상 : 아우디 서비스 김포공항 입고한 고객 중 유료 정비 서비스를
+                이용한 고객<br /><br />
+                • 기본 무상 제공항목 : 실내주차(최대 7일), 차량 기본점검, 전기차 충전,
+                워셔액 충전 등<br /><br />
+                • 기본 무상 제공항목 외 일반정비 및 에어컨 필터 교체, 와이퍼 교환, 스팀
+                세차 등 다양한 차량 관리 서비스도 유상으로 이용 가능<br /><br />
+                • 운영시간 : 월요일~토요일(오전 10시~오후 7시)/일요일 및 공휴일 휴무, 예약
+                불가<br /><br />
+                ※ 서비스 운영시간이 아닌 경우 일부 서비스 제약이 발생될 수 있습니다.<br /><br />
+                • 동시에 최대 15대까지 가능<br /><br />
+                • 아우디 서비스 김포공항 정보<br /><br />
+                &nbsp;&nbsp;- 전화번호 : 02-6116-3240<br /><br />
+                &nbsp;&nbsp;- 주소 : 서울 강서구 하늘길 38 롯데몰 김포공항점 P1<br /><br />
+                &nbsp;&nbsp;- 충전기 설치 수량 : 2대 (50kw 1대 / 7kw 1대)<br /><br />
+                &nbsp;&nbsp;- 충전소 운영시간 : 10:00 ~ 19:00<br /><br /><br /><br />
+                ※ 상기 서비스는 아우디 공식 딜러사인 바이에른오토에서 운영하는 서비스이며,
+                서비스에 대한 책임은 바이에른오토에게 있습니다<br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                서비스 김포공항으로 문의 바랍니다.
+              </p>
+            </li>
+
+            <h2>Charging on Demand (충전 대행 서비스)</h2>
+            <li class="not--before">
+              <p>
+                • 고객님의 e-tron을 픽업 & 딜리버리를 통해 충전을 대행 해주는 서비스<br /><br />
+                • 서비스 이용안내<br />
+                &nbsp;&nbsp;- 서비스 대상 : 2024년 12월 31일 이전 등록된 차량<br />
+                &nbsp;&nbsp;- 서비스 기간 : 2025년 12월 31일 까지 제공 후 서비스 종료<br />
+                &nbsp;&nbsp;- 서비스 횟수 : 2024년 8월1일 이후부터 2025년 12월 31일까지
+                차량 당 최대 5회<br /><br />
+                • 아우디 고객지원센터 (080-767-2834) 또는 아우디 공식 서비스 센터를 통해
+                서비스 신청 및 예약 가능<br /><br />
+                • 충전대행 서비스 예약 및 이용 가능시간: 평일 10시 ~ 16시<br /><br />
+                • 급속 충전기 사용현황 및 픽업 & 딜리버리 가용현황에 따라 서비스 예약
+                가능여부 확정<br /><br />
+                • 사용 1일 전 예약 필수<br /><br />
+                • 충전비용은 고객 부담 (고객 소유 충전카드 사용)<br /><br /><br />
+                ※ 상기 서비스는 예고 없이 변경될 수 있으며, 더욱 자세한 내용은 아우디
+                고객지원센터 및 아우디 공식 서비스센터로 문의 바랍니다.
+              </p>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<script setup></script>