아우디 커넥트 진행중

app/assets/scss/media.scss

@@ -52,6 +52,23 @@
 }
 @media(max-width: 1024px){
     main{
+        .visual--section{
+            .title--wrap{
+                width: 100%;
+                padding: 40px 20px;
+                >h2{
+                    font-size: 28px;
+                }
+                >p{
+                    font-size: 16px;
+                }
+            }
+            .desc--wrap{
+                .desc{
+                    padding: 20px;
+                }
+            }
+        }
         .detail--container{
             .title--wrap{
                 h2{
@@ -91,6 +108,9 @@
                 }
                 >h3{
                     font-size: 20px;
+                    &.big--title{
+                        font-size: 28px;
+                    }
                 }
             }
             .desc--section{
@@ -149,6 +169,13 @@
 }
 @media(max-width: 768px){
     main{
+        .visual--section{
+            &.h--800{
+                .img--wrap{
+                    height: 640px;
+                }
+            }
+        }
         .detail--container{
             .title--wrap{
                 h2{
@@ -180,6 +207,20 @@
                         width: 100%;
                     }
                 }
+                &.type2{
+                    .tech--card--wrap{
+                        .tech--card{
+                            width: 100%;
+                        }
+                    }
+                }
+                &.type3{
+                    .tech--card--wrap{
+                        .tech--card{
+                            width: 100%;
+                        }
+                    }
+                }
             }
             .title--section{
                 >h2{

app/assets/scss/style.scss

@@ -7,7 +7,7 @@
 }
 
 // Utility classes for padding and margin (1-100)
-@for $i from 1 through 200 {
+@for $i from 0 through 200 {
     // Padding
     .pt--#{$i} { padding-top: #{$i}px !important; }
     .pr--#{$i} { padding-right: #{$i}px !important; }
@@ -99,6 +99,62 @@ footer{
 }
 
 main{
+    .visual--section{
+        position: relative;
+        margin: 0 auto;
+        max-width: 1920px;
+        width: 100%;
+        &::after{
+            content: '';
+            width: 100%;
+            position: absolute;
+            height: 100%;
+            background: linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 50%);
+            top: 0;
+            left: 0;
+        }
+        &.h--800{
+            .img--wrap{
+                height: 800px;
+            }
+        }
+        .img--wrap{
+            overflow: hidden;
+            height: 100vh;
+            img{
+                width: 100%;
+                max-width: 100%;
+                height: 100%;
+                object-fit: cover;
+            }
+        }
+        .title--wrap{
+            position: absolute;
+            z-index: 3;
+            top: 0;
+            left: 0;
+            color: rgb(2, 2, 3);
+            padding: 40px 96px;
+            >h2{
+                font-size: 44px;
+                margin-bottom: 8px;
+            }
+            >p{
+                font-size: 20px;
+            }
+            &.color--white{
+                color: #fcfcfd;
+            }
+
+        }
+        .desc--wrap{
+            .desc{
+                font-size: 12px;
+                color: rgba(252, 252, 253, 0.7);
+                padding: 24px 96px;
+            }
+        }
+    }
     // audi stories
     .detail--container{
         max-width: 1920px;
@@ -265,6 +321,9 @@ main{
             >h3{
                 font-size: 24px;
                 margin-bottom: 24px;
+                &.big--title{
+                    font-size: 36px;
+                }
             }
             >p{
                 color: rgba(252, 252, 253, 0.7);
@@ -289,6 +348,9 @@ main{
                 font-size: 36px;
                 margin-bottom: 40px;
             }
+            >h4{
+                font-size: 24px;
+            }
             >p{
                 margin: 0 auto;
                 color: rgba(252, 252, 253, 0.7);
@@ -335,6 +397,8 @@ main{
                 overflow: hidden;
                 img{
                     width: 100%;
+                    height: 100%;
+                    object-fit: cover;
                 }
                 &.type2{
 
@@ -350,6 +414,9 @@ main{
                     font-size: 36px;
                     margin-bottom: 8px;
                 }
+                h4{
+                    font-size: 24px;
+                }
                 p{
                     font-size: 16px;
                     color: rgba(252, 252, 253, 0.7);
@@ -424,26 +491,43 @@ main{
                     }
                 }
             }
-        }
-    }
-    // about audi
-    .about--container{
-        max-width: 1920px;
-        width: 100%;
-        margin: 0 auto;
-        .visual--section{
-            .img--wrap{
-                overflow: hidden;
-                border-radius: 20px;
-                img{
-                    width: 100%;
-                    display: block;
+            &.type2{
+                .tech--card--wrap{
+                    flex-wrap: wrap;
+                    row-gap: 40px;
+                    .tech--card{
+                        width: calc(50% - 8px);
+                    }
                 }
-                video{
-                    width: 100%;
-                    height: 100%;
-                    display: block;
-                    object-fit: cover;
+            }
+            &.type3{
+                .tech--card--wrap{
+                    flex-wrap: wrap;
+                    row-gap: 40px;
+                    .tech--card{
+                        width: calc((100% - 32px) / 3);
+                    }
+                }
+            }
+        }
+        .caution--section{
+            padding: 40px 0;
+            ul{
+                display: flex;
+                flex-direction: column;
+                gap: 12px;
+                counter-reset: item;
+                li{
+                    padding-left: 34px;
+                    color: rgba(252, 252, 253, 0.7);
+                    font-size: 16px;
+                    position: relative;
+                    &::before{
+                        content: counter(item) ". ";
+                        counter-increment: item;
+                        position: absolute;
+                        left: 16px;
+                    }
                 }
             }
         }

app/pages/aboutaudi/audi-brand-2023.vue

@@ -0,0 +1,117 @@
+<template>
+    <main>
+        <section class="visual--section">
+            <div class="img--wrap">
+                <picture>
+                    <source media="(max-width: 768px)" srcset="/img/aboutaudi/img--brand1--mo.jpg">
+                    <img src="/img/aboutaudi/img--brand1.jpg" alt=""/>
+                </picture>
+            </div>
+            <div class="title--wrap">
+                <h2>프리미엄 모빌리티의 새로운 시대</h2>
+                <p>나만의 길을 개척하다. The Audi activesphere concept</p>
+            </div>
+            <div class="desc--wrap">
+                <p class="desc">1. 표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.<br />1. 표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+            </div>
+        </section>
+        <div class="detail--container">
+            <section class="title--section">
+                <h2 class="big--title">새로운 눈으로 세상을 바라보다</h2>
+                <p>Audi activesphere concept¹는 새롭게 정립된 콰트로 성능, 몰입감 있는 경험, 오프로드 성능을 위한 차체, 변경 가능한 외관, 360˚ 시야를 제공하는 파노라마 스피어를 통해 활동적인 라이프스타일을 새로운 차원으로 완전히 바꿔 놓습니다. 뛰어난 우아함과 편안함에 실용성을 겸비한 아우디의 새로운 콘셉트카는 AR²과 포괄적인 디지털 에코시스템으로 강화된 올-테레인(all-terrain) 성능을 제공하여 원하는 야외 활동을 즐기는 데 이상적입니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <video src="/img/aboutaudi/img--brand2.mp4" alt="" autoplay muted playsinline controls></video>
+                </div>
+            </section>
+            <section class="img--section mt--100">
+                <div class="img--wrap">
+                    <video src="/img/aboutaudi/img--brand3.mp4" alt="" autoplay muted playsinline controls></video>
+                </div>
+            </section>
+            <section class="more--section type2">
+                <div class="tech--card--wrap mb--0">
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--brand4.jpg" alt="The Audi activesphere concept¹">
+                        </div>
+                        <h3>The Audi activesphere concept¹</h3>
+                        <p>엘레강스한 디자인과 실용성이 조화를 이루는 The Audi activesphere concept ¹는 AR²과 디지털 에코시스템으로 아웃도어 어드벤처를 완성합니다.</p>
+                        <NuxtLink to="/stories/future/sphere-conceptcars/activesphere-concept/">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--brand5.jpg" alt="The Audi urbansphere concept¹">
+                        </div>
+                        <h3>The Audi urbansphere concept¹</h3>
+                        <p>인테리어부터 익스테리어까지 적용되는 디지털 기능은 프리미엄 모빌리티의 비전을 제시합니다.</p>
+                        <NuxtLink to="/stories/future/sphere-conceptcars/urbansphere-concept/">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--brand6.jpg" alt="The Audi grandsphere concept¹">
+                        </div>
+                        <h3>The Audi grandsphere concept¹</h3>
+                        <p>아우디가 제시하는 다가올 미래의 그랜드 투어러는 몰입감 있는 경험과 넉넉한 공간을 제공합니다.</p>
+                        <NuxtLink to="/stories/future/sphere-conceptcars/grandsphere-concept/">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--brand7.jpg" alt="The Audi skysphere concept¹">
+                        </div>
+                        <h3>The Audi skysphere concept¹</h3>
+                        <p>진보된 기술이 제공하는 두 가지의 새로운 주행 경험과 완벽한 디자인으로 마무리된 첫 번째 스피어 컨셉트카입니다.</p>
+                        <NuxtLink to="/stories/future/sphere-conceptcars/skysphere-concept/">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section mid--type">
+                <h2>진보를 위한 4가지 방향성</h2>
+                <p class="mt--24">진보를 이루고 싶다면 경계를 허물고 세상의 일부를 바꿔야 하며 그 과정에서 사람들에게 영감을 불어넣어야 합니다. 아우디는 지속 가능성, 디자인, 디지털화, 퍼포먼스의 총 4가지 방향성으로 진보를 실현합니다.</p>
+            </section>
+            <section class="more--section type2 mt--0">
+                <div class="tech--card--wrap mb--0">
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--brand8.jpg" alt="환경에 대한 책임 의식">
+                        </div>
+                        <h3>환경에 대한 책임 의식</h3>
+                        <p>보다 지속 가능한 방식으로 행동하기 위해 완전히 새로운 방식으로 사고합니다. 공급망부터 표용적인 회사 구조에 이르기까지 지속 가능한 방식으로 변화해야 합니다. 지속 가능성에 관해서는 모든 사람의 실천이 중요합니다.</p>
+                        <!-- <NuxtLink to="/stories/future/sphere-conceptcars/activesphere-concept/">자세히 알아보기 <i class="ico"></i></NuxtLink> -->
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--brand9.jpg" alt="The Audi urbansphere concept¹">
+                        </div>
+                        <h3>The Audi urbansphere concept¹</h3>
+                        <p>인테리어부터 익스테리어까지 적용되는 디지털 기능은 프리미엄 모빌리티의 비전을 제시합니다.</p>
+                        <!-- <NuxtLink to="/stories/future/sphere-conceptcars/urbansphere-concept/">자세히 알아보기 <i class="ico"></i></NuxtLink> -->
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--brand10.jpg" alt="The Audi grandsphere concept¹">
+                        </div>
+                        <h3>The Audi grandsphere concept¹</h3>
+                        <p>아우디가 제시하는 다가올 미래의 그랜드 투어러는 몰입감 있는 경험과 넉넉한 공간을 제공합니다.</p>
+                        <!-- <NuxtLink to="/stories/future/sphere-conceptcars/grandsphere-concept/">자세히 알아보기 <i class="ico"></i></NuxtLink> -->
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--brand11.jpg" alt="The Audi skysphere concept¹">
+                        </div>
+                        <h3>The Audi skysphere concept¹</h3>
+                        <p>진보된 기술이 제공하는 두 가지의 새로운 주행 경험과 완벽한 디자인으로 마무리된 첫 번째 스피어 컨셉트카입니다.</p>
+                        <!-- <NuxtLink to="/stories/future/sphere-conceptcars/skysphere-concept/">자세히 알아보기 <i class="ico"></i></NuxtLink> -->
+                    </div>
+                </div>
+            </section>
+            <section class="caution--section">
+                <ul>
+                    <li>표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트카입니다.</li>
+                    <li>표시된 차량은 양산 차량으로 사용할 수 없는 콘텐트카입니다. 표시된 증강 현실 안경도 구매할 수 없습니다. 표시된 자율 운전 기능과 증강 현실 안경은 현재 개발 중인 기술로 양산 차량에는 사용할 수 없으며 시스템에 설정된 제한 환경 내에서만 사용할 수 있습니다. 모든 기능은 관련 국가의 해당 법률 규정에 따라 달라질 수 있습니다.</li>
+                </ul>
+            </section>
+        </div> 
+    </main>
+</template>

app/pages/aboutaudi/audi_connect/apps-and-services.vue

@@ -0,0 +1 @@
+<template></template>

app/pages/aboutaudi/audi_connect/index.vue

@@ -0,0 +1,58 @@
+<template>
+    <main>
+        <section class="visual--section h--800">
+            <div class="img--wrap">
+                <picture>
+                    <img src="/img/aboutaudi/img--connect1.jpg" alt=""/>
+                </picture>
+            </div>
+            <div class="title--wrap color--white">
+                <h2>Audi Connect</h2>
+            </div>
+        </section>
+        <div class="detail--container">
+            <section class="desc--section full--type">
+                <h3 class="big--title">Audi Connect</h3>
+                <h4 class="mt--24">운전자를 차와 더 가깝게, 세상과 더 가깝게 연결하는 아우디 디지털 서비스 Audi Connect. <br />myAudi와 Audi Connect 서비스와 함께라면 아우디가 더욱 편안하고 안전하며 스마트해집니다.</h4>
+                <p class="mt--24">*현재 myAudi 및 Audi Connect는 Audi Connect 기능이 탑재된 아우디 차량에 한해 전시장을 통해서 등록할 수 있습니다.</p>
+                <h4 class="mt--60">단순하고 매력적인 원리</h4>
+                <p class="mt--24">미래의 자동차는 도로를 넘어 디지털 세계를 달립니다. 그렇기에 아우디는 Connect 서비스를 더 많은 모델을 대상으로 꾸준히 넓혀가고 있습니다.<br />내비게이션 & 인포테인먼트 기능을 비롯해 원격 차량제어, 긴급통화/긴급출동 서비스 등 다양한 서비스와 기능을 제공하여 더욱 여유롭고, 더욱 즐겁고, 더욱 안전한 주행을 가능케 합니다.</p>
+                <h4 class="mt--60">새로운 Audi Connect를 만나보세요</h4>
+                <p class="mt--24">아우디의 최신 모델과 최첨단 인포테인먼트 시스템을 통해 Audi Connect는 새로운 차원으로 도약했습니다.<br />운전자와 아우디, 스마트폰, 세계가 거미줄처럼 연결되어 일상이 더욱 간편하고 쾌적해집니다.<br />아우디와 myAudi가 선사하는 디지털 생태계의 가능성과 편의성을 통해 새로운 세상을 만끽해 보세요.</p>
+            </section>
+            <section class="more--section type2 mt--0">
+                <div class="tech--card--wrap mb--0">
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--connect2.jpg" alt="더욱 다양해진 Audi Connect의 서비스를 만나보세요">
+                        </div>
+                        <h3>더욱 다양해진 Audi Connect의 서비스를 만나보세요</h3>
+                        <p>아우디는 다양한 Connect 서비스를 제공합니다. 현재 제공 중인 매력적이고 다채로운 서비스를 아래에서 확인해 보세요.</p>
+                        <NuxtLink to="/aboutaudi/audi_connect/apps-and-services/">서비스 개요 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--connect3.jpg" alt="myAudi로 간편하게 Connect 서비스를 시작해 보세요">
+                        </div>
+                        <h3>myAudi로 간편하게 Connect 서비스를 시작해 보세요</h3>
+                        <p>myAudi에 차량 및 운전자 등록을 하면 myAudi나 myAudi 스마트폰 앱을 통해 Connect 서비스를 편리하게 관리할 수 있습니다. 현재 Audi Connect 기능이 탑재된 아우디 차량에 한해 전시장을 통해서 등록 가능합니다.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section full--type">
+                <h4>myAudi 포털사이트 및 app 다운로드 링크</h4>
+                <blockLinkList class="mt--20" :links="reservationLinks" />
+            </section>
+        </div> 
+    </main>
+</template>
+<script setup>
+  const reservationLinks = ref([
+    {
+      text: "KATRI(자동차안전연구원)의 자동차결함신고센터(car.go.kr) 바로 가기",
+      url: "https://car.go.kr/",
+      target: "_blank",
+      showIcon: true,
+    },
+  ]);
+</script>

app/pages/aboutaudi/customerinfo/disel/index.vue

@@ -1,3 +0,0 @@
-<template>
-    헤에
-</template>

app/pages/aboutaudi/morepossibilities.vue

@@ -0,0 +1,50 @@
+<template>
+    <main>
+        <section class="visual--section h--800">
+            <div class="img--wrap">
+                <picture>
+                    <img src="/img/aboutaudi/img--more1.jpg" alt=""/>
+                </picture>
+            </div>
+            <div class="title--wrap color--white">
+                <h2>About Audi</h2>
+            </div>
+        </section>
+        <div class="detail--container">
+            <section class="title--section full--type">
+                <h3 class="big--title">More possibilities</h3>
+                <p class="">아우디가 추구하는 무한한 가능성.<br />당신의 욕망을 일깨우고, 자유를 꿈꾸게 하며, 성공을 갈망하게 하고, 승리에 도전하게 하는 것<br />우리는 이것을 당신의 가능성이라고 믿습니다.<br />지금 당신 안의 프로그레스를 꺼내십시오.<br /><br />더 많은 가능성을 만나게 될 것입니다.</p>
+                <h3 class="big--title mt--100">더 많은 가능성을 열기 위한 아우디의 기술</h3>
+                <p>운전자가 없는 미래 비전을 제공하는 자율주행 기술, 서비스 플랫폼의 디지털화, 전기 동력으로의 변화를 통한 E-모빌리티.<br />이 모든 아우디 미래 전략의 목표는 기술을 통해 사람들에게 더 많은 가능성을 제공하는 것입니다.</p>
+            </section>
+            <section class="more--section type3 mt--0">
+                <div class="tech--card--wrap mb--0">
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--more2.jpg" alt="자율주행 기술">
+                        </div>
+                        <h3>자율주행 기술</h3>
+                        <p>운전자가 없는 미래, 아우디의 자율주행 기술은 편안한 주행과 더 안전한 도로, 여유 있는 환경 등을 제공하여 이동수단의 새로운 가능성을 제시합니다.</p>
+                        <!-- <NuxtLink to="/aboutaudi/technology01/quattro-with-torgue-vectoring0/">관련 동영상 보기 <i class="ico"></i></NuxtLink> -->
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--more3.jpg" alt="E-모빌리티">
+                        </div>
+                        <h3>E-모빌리티</h3>
+                        <p>아우디에서의 E-모빌리티 전략은, 최적의 시점에 최선의 방법으로 E-모빌리티 경험을 제공하는 것입니다. 아우디는 100년간 지켜온 프리미엄 브랜드 철학을 바탕으로 E-모빌리티의 새로운 가능성을 개척하고 있습니다.</p>
+                        <!-- <NuxtLink to="/aboutaudi/technology01/quattro-with-sport-differential0/">관련 동영상 보기 <i class="ico"></i></NuxtLink> -->
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--more4.jpg" alt="디지털화">
+                        </div>
+                        <h3>디지털화</h3>
+                        <p>디지털 서비스는 새로운 가능성을 만듭니다. 디지털 기술을 통해 개인화된 차량을 제공하고 교통을 흐름을 읽어 보다 안전하고 효율적인 운전환경을 만들어 나갑니다. 아우디는 디지털 서비스를 통해 새로운 비즈니스 모델 및 판매 잠재력을 창출하는 것을 목표로 하고 있습니다.</p>
+                        <!-- <NuxtLink to="/aboutaudi/technology01/quattro-with-sport-differential0/">관련 동영상 보기 <i class="ico"></i></NuxtLink> -->
+                    </div>
+                </div>
+            </section>
+        </div> 
+    </main>
+</template>

app/pages/aboutaudi/quattro.vue

@@ -0,0 +1,55 @@
+<template>
+    <main>
+        <section class="visual--section h--800">
+            <div class="img--wrap">
+                <picture>
+                    <img src="/img/aboutaudi/img--quattro1.jpg" alt=""/>
+                </picture>
+            </div>
+            <div class="title--wrap color--white">
+                <h2>About Audi</h2>
+            </div>
+        </section>
+        <div class="detail--container">
+            <section class="desc--section full--type">
+                <h3 class="big--title">quattro</h3>
+                <h3 class="mt--24">드라이빙의 즐거움</h3>
+                <p class="">quattro의 역사는 곧 ‘기술을 통한 진보’의 30년 역사를 의미합니다.<br />전설적인 ‘Ur- quattro’ 와 수많은 모터스포츠 우승 경험부터 크라운기어 디퍼렌셜(차동장치), 토크 벡터링, 스포츠 디퍼렌셜이 장착된 최근 모델까지 <br />상시 4륜 구동의 quattro는 승리를 위해 태어난 차이며, 앞으로도 성공 스토리를 이어갈 것입니다.<br /><br />quattro라는 이름은 강화된 구동력으로 만끽하는 드라이빙의 즐거움을 의미합니다.<br />이 판매 카피는 전세계의 수많은 운전자들의 마음을 움직였습니다.<br />덕분에 아우디는 가장 성공적인 상시 사륜 구동 차량 제조업체의 반열에 올랐습니다.</p>
+                <h3 class="mt--100">단순하고 매력적인 원리</h3>
+                <p>원리는 단순하고, 효과는 놀랍습니다. quattro은 4륜 전체에서 지속적으로 추진력을 일으킵니다.<br />덕분에 더 강한 추진력, 손쉬운 가속, 뛰어난 코너링, 안정적인 방향 전환, 독보적인 핸들링이 가능합니다.<br /><br />이 때문에 quattro는 어떤 길을 달리든 획기적인 구동 시스템입니다.<br />quattro를 처음 선보인 이후부터 지금까지 많은 혁신과 기술의 발전이 있었습니다.<br />30년이 넘는 기간 동안, 아우디는 4륜 구동을 도입해 자동차 업계에서 기술의 리더로 주요 개척자로 자리매김했습니다. 그리고 이런 발전은 계속될 것입니다.<br /><br />4륜 구동 기술의 중심에는 quattro의 3가지 구동 시스템이 있습니다.<br /><br />- quattro 상시 4륜 구동<br />- 크라운기어 센터 디퍼렌셜(S tronic이 들어간 차량) 또는 셀프로킹 센터 디퍼렌셜과 토크 벡터링이 탑재된 quattro 4륜 구동<br />- 스포츠 디퍼렌셜 quattro</p>
+            </section>
+            <section class="more--section type2 mt--0">
+                <div class="tech--card--wrap mb--0">
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--quattro2.jpg" alt="quattro with torque vectoring">
+                        </div>
+                        <h3>quattro with torque vectoring</h3>
+                        <p>효율, 정확, 파워를 높인 기술 진보</p>
+                        <NuxtLink to="/aboutaudi/technology01/quattro-with-torgue-vectoring0/">자세히 보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/aboutaudi/img--quattro3.jpg" alt="quattro with sport differential">
+                        </div>
+                        <h3>quattro with sport differential</h3>
+                        <p>뛰어난 핸들링과 스포티한 역동성</p>
+                        <NuxtLink to="/aboutaudi/technology01/quattro-with-sport-differential0/">자세히 보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section full--type">
+                <h3 class="">Land of quattro</h3>
+            </section>
+            <section class="img--desc--section pt--0">
+                <div class="img--wrap">
+                    <img style="min-height: 480px;" src="/img/aboutaudi/img--quattro4.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <h4>110일 이상의 비와 눈, 4천여 개 산의 나라를 질주하는 Audi quattro</h4>
+                    <p class="mt--8">때론 미끄럽고, 때론 위협적이고, 때론 가파른, 대한민국의 길을 달리는 당신에겐 더 특별한 풀타임 사륜구동 기술이 필요합니다. 노면에 따라 네 바퀴에 가장 적절한 파워를 분배하는 주행안정성, 급커브나 장애물에 민첩하게 대처할 수 있는 정교한 컨트롤까지. 이것이 어떤 상황에도 흐트러지지 않는 Audi quattro의 기술입니다.</p>
+                </div>
+            </section>
+        </div> 
+    </main>
+</template>

nuxt.config.ts

@@ -42,6 +42,14 @@ export default defineNuxtConfig({
           additionalData: ''
         }
       }
+    },
+    server: {
+      watch: {
+        usePolling: true,  // Windows 파일 감시 안정화
+      }
+    },
+    optimizeDeps: {
+      exclude: ['sass']
     }
   },
   compatibilityDate: '2025-07-15',