stories 메뉴 완료

app/assets/scss/media.scss

@@ -33,6 +33,12 @@
                 }
             }
             .img--desc--section{
+                &.reverse{
+                    .desc--wrap{
+                        padding-left: 0;
+                        padding-right: 20px;
+                    }
+                }
                 .desc--wrap{
                     padding-right: 0;
                     padding-left: 20px;
@@ -109,13 +115,22 @@
                 gap: 20px;
                 &.reverse{
                     flex-direction: column;
+                    .desc--wrap{
+                        padding: 0;
+                    }
                 }
                 .img--wrap{
                     width: 100%;
                 }
                 .desc--wrap{
+                    padding: 0;
                     width: 100%;
                 }
+                &.type2{
+                    .inner--box{
+                        width: 100%;
+                    }
+                }
             }
             .more--section{
                 >h2{

app/assets/scss/style.scss

@@ -99,6 +99,7 @@ footer{
 }
 
 main{
+    // audi stories
     .detail--container{
         max-width: 1920px;
         width: 100%;
@@ -315,9 +316,6 @@ main{
         .img--desc--section{
             display: flex;
             padding: 64px 0;
-            &.reverse{
-                flex-direction: row-reverse;
-            }
             &.mid--type{
                 margin: 0 auto;
                 max-width: 1248px;
@@ -325,6 +323,12 @@ main{
                     padding-right: 0;
                 }
             }
+            &.reverse{
+                flex-direction: row-reverse;
+                .desc--wrap{
+                    padding-right: 72px;
+                }
+            }
             .img--wrap{
                 width: 50%;
                 border-radius: 20px;
@@ -332,6 +336,9 @@ main{
                 img{
                     width: 100%;
                 }
+                &.type2{
+
+                }
             }
             .desc--wrap{
                 width: 50%;
@@ -351,6 +358,19 @@ main{
                     }
                 }
             }
+            &.type2{
+                .inner--box{
+                    width: 50%;
+                    .img--wrap{
+                        width: 100%;
+                    }
+                    .desc{
+                        margin-top: 12px;
+                        color: rgba(252, 252, 253, 0.7);
+                        font-size: 14px;
+                    }
+                }
+            }
         }
         .more--section{
             margin-top: 100px;
@@ -406,6 +426,28 @@ 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;
+                }
+                video{
+                    width: 100%;
+                    height: 100%;
+                    display: block;
+                    object-fit: cover;
+                }
+            }
+        }
+    }
 }
 .more--btn{
     display: flex;

app/components/block/interestedSport.vue

@@ -0,0 +1,32 @@
+<template>
+    <section class="more--section">
+        <h2>다음 항목에도 관심이 있으실 수 있습니다</h2>
+        <div class="tech--card--wrap mb--0">
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/audi-sport/img--sport1.jpg" alt="“저는 최고가 되기 위해 이 분야에 있는 것입니다.”">
+                </div>
+                <h3>“저는 최고가 되기 위해 이 분야에 있는 것입니다.”</h3>
+                <p>아버지의 뒤를 이은 리아 블록(Lia Block)은 이번 인터뷰에서 모터스포츠에 대한 그녀의 열정을 드러냅니다. 이탈리아 산레모에서 이미 성공을 거둔 레이싱 드라이버가 과거에 성공했던 랠리의 상징이자 모터스포츠의 미래 기술인 아우디 S1 e-트론 콰트로 후니트론과 만났습니다.</p>
+                <NuxtLink to="/stories/audi-sport/i-am-here-to-be-the-best">자세히 알아보기 <i class="ico"></i></NuxtLink>
+            </div>
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/audi-sport/img--sport2.jpg" alt="“그런 차를 본 적이 없습니다.”">
+                </div>
+                <h3>“그런 차를 본 적이 없습니다.”</h3>
+                <p>굿우드 페스티벌 오브 스피드는 세계에서 가장 크고 화려한 모터스포츠 행사 중 하나입니다. 올해도 고 켄 블록(Ken Block)을 추모하기 위해 톰 크리스텐슨(Tom Kristensen)이 운전석에 앉은 아우디 S1 후니트론(아우디 S1 후니트론)이 온통 관심을 받고 있습니다.</p>
+                <NuxtLink to="/stories/audi-sport/i-never-came-across-such-a-car">자세히 알아보기 <i class="ico"></i></NuxtLink>
+            </div>
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/audi-sport/img--sport3.jpg" alt="아우디 스포트 미래 연구소 내부">
+                </div>
+                <h3>아우디 스포트 미래 연구소 내부</h3>
+                <p>노이부르크 안 데어 도나우의 아우디 스포트 센터에서는 수많은 챔피언들을 탄생시켰습니다. 2022년 다카르 랠리를 위해 이 센터에서 개발 중인 신형 아우디 RS Q e-트론은 아우디가 트랙에 선보였던 프로젝트 중 가장 까다로운 프로젝트입니다.</p>
+                <NuxtLink to="/stories/audi-sport/inside-the-audi-sport-future-labs">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">사진 속 차량은 양산 모델로 제공되지 않는 랠리 다카르 차량입니다.<br />아우디 RS Q e-트론은 전기 구동 장치와 TFSI 엔진 및 발전기로 구성된 에너지 컨버터 시스템을 결합합니다.</p>
+            </div>
+        </div>
+    </section>
+</template>

app/components/block/interestedSustain.vue

@@ -0,0 +1,34 @@
+<template>
+    <section class="more--section">
+        <h2>다음 항목에도 관심이 있으실 수 있습니다</h2>
+        <div class="tech--card--wrap mb--0">
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/sustainability/img--sustain3.jpg" alt="통합적인 접근 방식">
+                </div>
+                <h3>통합적인 접근 방식</h3>
+                <p>프리미엄 모빌리티는 지속 가능성을 기반으로 제작합니다. 이것이 바로 아우디의 약속입니다. 요한나 클레비츠(Johanna Klewitz) 박사, 말테 뵈멜(Malte Vömel) 등의 전문가들이 공급망과 제품을 면밀히 조사하고 보다 지속 가능한 프리미엄 브랜드로의 전환을 주도합니다.</p>
+                <NuxtLink to="/stories/sustainability/a-holistic-approach">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">Q4 e-트론<br />복합 전기 소비량 19.5~16.2kWh/100km(WLTP), 복합 CO₂ 배출량 0g/km(WLTP)<br />NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+            </div>
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/sustainability/img--sustain2.jpg" alt="개인적으로 중요한 문제">
+                </div>
+                <h3>개인적으로 중요한 문제</h3>
+                <p>유타 쇼베러(Jutta Schoberer)가 가장 기대하는 아우디 A4 아반트의 특징은 순환형 경제가 작동하는 진정한 사례라는 점입니다.</p>
+                <NuxtLink to="/stories/sustainability/a-matter-of-personal-importance/">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">A4 아반트<br />복합 연료 소비량 8.1~4.7l/100km(WLTP), 복합 CO₂ 배출량 183~124g/km(WLTP)<br />NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+            </div>
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/sustainability/img--sustain1.jpg" alt="‘머티리얼루프’ 프로젝트: 낡은 것을 새 것으로">
+                </div>
+                <h3>‘머티리얼루프’ 프로젝트: 낡은 것을 새 것으로</h3>
+                <p>아우디는 ‘머티리얼루프’ (MaterialLoop) 프로젝트를 통해 수명이 다한 차량에서 더욱 많은 재활용 자재를 추출해 신차에 활용하는 방안을 실험하고 있습니다. 아우디의 그 비전은 품질을 유지하면서도 매우 효율적인 순환 경제 모델을 실현하는 것입니다.</p>
+                <NuxtLink to="/stories/sustainability/the-material-loop-project-turning-old-into-new">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">전력 소비량(복합): 본 차량의 에너지 소비량 및 배출가스 수치는 NEDC가 아닌 WLTP 기준으로만 제공됩니다.</p>
+            </div>
+        </div>
+    </section>
+</template>

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

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

app/pages/stories/audi-sport/index.vue

@@ -0,0 +1,39 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <div class="title--wrap">
+                <h2 class="">Audi Sport</h2>
+                <p>도전에서 영감을 얻으세요. 노이부르크 안 데어 도나우(Neuburg an der Donau)에서 사우디아라비아의 사막까지, 전설적인 서킷에서 이국적인 랠리 트랙까지, 콰트로에서 e-트론까지, 아우디 스포츠와 함께 모터 스포츠의 매력을 경험해 보세요.</p>
+            </div>
+            <div class="content--wrap">
+                <div class="tech--card--wrap">
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/audi-sport/img--sport1.jpg" alt="“저는 최고가 되기 위해 이 분야에 있는 것입니다.”">
+                        </div>
+                        <h3>“저는 최고가 되기 위해 이 분야에 있는 것입니다.”</h3>
+                        <p>아버지의 뒤를 이은 리아 블록(Lia Block)은 이번 인터뷰에서 모터스포츠에 대한 그녀의 열정을 드러냅니다. 이탈리아 산레모에서 이미 성공을 거둔 레이싱 드라이버가 과거에 성공했던 랠리의 상징이자 모터스포츠의 미래 기술인 아우디 S1 e-트론 콰트로 후니트론과 만났습니다.</p>
+                        <NuxtLink to="/stories/audi-sport/i-am-here-to-be-the-best">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/audi-sport/img--sport2.jpg" alt="“그런 차를 본 적이 없습니다.”">
+                        </div>
+                        <h3>“그런 차를 본 적이 없습니다.”</h3>
+                        <p>굿우드 페스티벌 오브 스피드는 세계에서 가장 크고 화려한 모터스포츠 행사 중 하나입니다. 올해도 고 켄 블록(Ken Block)을 추모하기 위해 톰 크리스텐슨(Tom Kristensen)이 운전석에 앉은 아우디 S1 후니트론(아우디 S1 후니트론)이 온통 관심을 받고 있습니다.</p>
+                        <NuxtLink to="/stories/audi-sport/i-never-came-across-such-a-car">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/audi-sport/img--sport3.jpg" alt="아우디 스포트 미래 연구소 내부">
+                        </div>
+                        <h3>아우디 스포트 미래 연구소 내부</h3>
+                        <p>노이부르크 안 데어 도나우의 아우디 스포트 센터에서는 수많은 챔피언들을 탄생시켰습니다. 2022년 다카르 랠리를 위해 이 센터에서 개발 중인 신형 아우디 RS Q e-트론은 아우디가 트랙에 선보였던 프로젝트 중 가장 까다로운 프로젝트입니다.</p>
+                        <NuxtLink to="/stories/audi-sport/inside-the-audi-sport-future-labs">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">사진 속 차량은 양산 모델로 제공되지 않는 랠리 다카르 차량입니다.<br />아우디 RS Q e-트론은 전기 구동 장치와 TFSI 엔진 및 발전기로 구성된 에너지 컨버터 시스템을 결합합니다.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</template>

app/pages/stories/future/audi-activesphere-concept-you-active-lifestyle-companion.vue

@@ -0,0 +1,110 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="title--section">
+                <h2>아우디 액티브스피어 콘셉트 카: 활동적인 라이프스타일의 동반자</h2>
+                <h3>스포티하고 열정적이며 품격 있음: 아우디의 네 번째 스피어 콘셉트 카는 콰트로 기술과 혁신적인 작동 개념이 적용된 컨버터블 크로스오버 쿠페입니다.</h3>
+                <p class="desc">Copy: AUDI AG - Photo: Ole Westermann<br /><br />표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future6--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>아우디 액티브스피어 콘셉트 카는 아우디 쿠페의 전형적인 후면과 플랫 캐빈을 갖춘 품격 있는 스포트백 차체 스타일을 자랑합니다. 대형 22인치 휠, 눈에 띄는 지상고, 역동적인 루프 아치가 스포티한 비율을 더욱 돋보이게 합니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--60 mb--60">
+                <p>아우디는 세 가지 콘셉트 카인 아우디 스카이스피어 콘셉트 카(로드스터), 아우디 그랜드스피어 콘셉트 카(세단), 아우디 어반스피어 콘셉트 카(공간 개념)에 이어 네 번째 순수 전기 스피어 콘셉트 카인 아우디 액티브스피어 콘셉트 카를 선보입니다. 이 콘셉트 카는 아우디가 모빌리티의 미래에 대해 어떻게 생각하는지 표현한 것으로, 활동적인 라이프스타일에 따라 커스터마이징 방식으로 제작됩니다.<br /><br />모든 스피어 콘셉트 카와 마찬가지로 아우디 액티브스피어 콘셉트 카는 운전자가 스티어링 휠과 페달을 사용하여 능동적으로 운전할 수 있는 선택권을 제공하지만, 적절한 지형에서는 자율 주행도 가능합니다.<br /><br />아우디 액티브스피어 콘셉트 카의 대부분은 내부와 외부 환경을 연결해 주는 유리 면을 많이 넣은 것이 특징입니다. 예를 들어, 쿠페 루프가 유리로 만들어졌을 뿐만 아니라 시그니처 아우디 싱글 프레임도 처음으로 완전히 투명해졌습니다. 또한 도어 하단 부분의 움푹 들어간 유리 표면은 특히 오프로드에서 전례 없는 전망을 제공하여 외부 세계와 내부의 분리를 막아줍니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future6--detail2.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>유리 면이 차체의 중요한 부분을 구성하며 외부 세계와 내부가 분리되지 않도록 해줍니다.</p>
+                    <p class="desc mt--10">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다. 표시된 자율 주행 기능은 현재 개발 중인 기술로 양산 차량에는 사용할 수 없으며 시스템에 설정된 제한 환경 내에서만 사용할 수 있습니다. 표시된 기술 시스템 및 기능의 모든 사용은 가능한 콘셉트만을 나타내며 관련 국가의 해당 법률 규정에 따라 달라집니다.</p>
+                </div>
+            </section>
+            <section class="img--section type2 mt--100">
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/future/img--future6--detail3.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>아우디 액티브스피어 콘셉트 카의 시그니처 아우디 싱글 프레임도 투명합니다.</p>
+                    </div>
+                </div>
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/future/img--future6--detail4.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>투명한 싱글 프레임을 통해 탑승자는 전방 도로를 넓은 시야로 볼 수 있습니다.</p>
+                        <p class="desc mt--10">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--60 mb--60">
+                <h3 class="">다양하게 활용 가능한 가변성</h3>
+                <p>품격 있는 럭셔리 쿠페의 뒷부분은 모든 고객의 활동적인 라이프스타일을 고려하여 설계되었습니다. 스포트백 후면을 개방형 화물칸으로 변형할 수 있습니다. 투명한 후면 창을 아우디 액티브스피어 콘셉트 카의 루프와 거의 같은 높이로 밀어서 올리고, 후면의 하단 수직 부분을 수평으로 접어 자전거 (캐리어가 이미 내장되어 있음), 보드 또는 기타 스포츠 장비를 운반하기 위한 픽업 화물칸을 만들면 됩니다.<br /><br />픽업 구성에서는 내부가 뒷좌석 뒤의 유리 패널로 차단되어 바람과 날씨로부터 보호됩니다. 당연히 내부의 넓은 좌석 4개는 이러한 변형에 따른 영향을 받지 않습니다.<br /><br />스포트백 실루엣의 우아함과 스포티함은 이러한 변형에서도 유지될 뿐만 아니라 차량에 접이식 스키 랙이 장착되어 있어 스키를 운반할 때도 마찬가지입니다. 이 스키 랙은 루프 중앙에 들어가 있어 사실상 눈에 띄지 않습니다. 스키 운반 시에는 후면 하단 부분으로 내려서 스키를 쉽게 적재한 후 루프 위로 다시 들어 올려 운반할 수 있습니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future6--detail5.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>스포트백을 액티브백으로 변환하면 화물칸의 e-산악자전거를 운반하기 위한 자전거 캐리어가 눈에 띕니다.</p>
+                    <p class="mt--10 desc">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                </div>
+            </section>
+            <section class="img--section mt--100">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future6--detail6.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>스2.97미터의 휠베이스가 넉넉하여 내부 레그룸이 넓습니다.</p>
+                    <p class="mt--10 desc">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다. 표시된 자율 주행 기능은 현재 개발 중인 기술로 양산 차량에는 사용할 수 없으며 시스템에 설정된 제한 환경 내에서만 사용할 수 있습니다. 표시된 기술 시스템 및 기능의 모든 사용은 가능한 콘셉트만을 나타내며 관련 국가의 해당 법률 규정에 따라 달라집니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--60 mb--60">
+                <h3>온로드 쿠페에서 오프로드 SUV로 변환</h3>
+                <h3 class="mt--100">콰트로 성능</h3>
+                <p class="">아우디 액티브스피어 콘셉트 카는 오프로드 모드로 전환되었을 때 지상고가 208mm로, 40mm 증가합니다. 또한 도어 아래 전면, 후면, 측면 부분에 있는 금속 트림의 특징적인 수직 스터드가 올라가는데, 이는 디자인 측면에서도 오프로드 용도를 나타냅니다.<br /><br />물론 아우디 액티브스피어 콘셉트 카는 오프로드에 적합한 디자인을 보여줄 뿐만 아니라 전자식 제어 아우디 콰트로 4륜 구동 기능도 갖추고 있습니다. 전방 및 후방 액슬에서 각각 1개의 전기 모터가 총 325kW의 출력과 720Nm의 토크를 발휘하며, 이는 일반적인 전기차와 마찬가지로 주행 시 첫 1초부터 가능합니다.<br /><br />두 전기 모터는 두 액슬 사이에 위치하며 약 100kWh의 에너지를 제공하는 트랙션 배터리에서 전력을 공급받습니다. 아우디 액티브스피어 콘셉트 카의 800볼트 충전 기술을 통해 최대 270kW의 출력으로 고속 충전소에서 배터리를 충전할 수 있습니다.<br /><br />아우디 액티브스피어 콘셉트 카의 휠도 콰트로 성능을 분명히 드러냅니다. 온로드 사용 시 효율적인 공기역학을 위해 닫혀 있는 세그먼트가 오프로드 사용 시 환기를 위해 열립니다.</p>
+            </section>
+            <section class="img--section type2">
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/future/img--future6--detail7.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>오프로드 모드에서는 도어 아래 전면, 후면, 측면 부분에 있는 금속 트림의 수직 스터드가 올라갑니다. 이에 따라 지상고가 40mm 증가합니다.</p>
+                        <p class="mt--10 desc">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                </div>
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/future/img--future6--detail8.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>제어 요소와 콘텐츠가 상황에 맞게 혼합 현실 안경에 표시됩니다. 시스템은 사용자의 관심사를 인식하고 타깃 기능을 활성화합니다.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section mid--type">
+                <h3>물리적 현실과 디지털 영역의 만남</h3>
+                <h3 class="mt--100">새로운 차원</h3>
+                <p>사용자는 혼합 현실 안경의 도움으로 가상 제어 요소 및 콘텐츠에 액세스하고 이와 상호작용할 수 있습니다. 이러한 요소와 콘텐츠는 상황에 맞게 필요한 대로 안경에 표시됩니다. 사용자가 눈으로 원하는 사용자 인터페이스 요소에 초점을 맞추면 시스템이 사용자의 관심사를 인식하고 타깃 기능을 활성화합니다. 더욱 복잡한 기능의 경우에도 다양한 수준의 상세한 정보를 활용하여 직관적으로 작동합니다. 공간적 제스처 기반의 상호작용은 사용자에게 맞게 조정되고 차량 및 디지털 콘텐츠로 실시간으로 반응합니다.<br /><br />이 혁신적인 기술의 가능성은 광범위합니다. 예를 들어 오프로드 모드에서는 내비게이션 안내와 목적지 지역 관련 정보뿐만 아니라 지형에 대한 고해상도 3D 그래픽을 실제 풍경의 시야에 투영할 수 있습니다. 이 안경은 자전거 코스, 스키 슬로프, 프리라이드 지형에서의 경로 안내와 같이 차량 외부의 스포츠 활동에도 사용할 수 있어 특별하고 활동적인 라이프스타일에 적합한 경험을 선사합니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future6--detail9.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>스키 운반을 위해 아우디 액티브스피어 콘셉트 카에는 루프 중앙에 수평으로 들어간 접이식 스키 랙이 있습니다.</p>
+                </div>
+            </section>
+            <BlockInterestedFuture />
+        </div>
+    </main>
+</template>

app/pages/stories/future/sphere-conceptcars/activesphere-concept.vue

@@ -3,54 +3,98 @@
         <div class="detail--container">
             <section class="img--section none--bdrs">
                 <div class="img--wrap">
-                    <img src="/img/stories/design/img--design8--detail1.jpg" alt="">
+                    <img src="/img/stories/future/img--concept1--detail1.jpg" alt="">
                 </div>
                 <div class="desc--wrap">
-                    <p class="">금속, 세라믹 또는 진주 입자와 함께 안료는 우리가 표면을 인식하는 방식에 영향을 미칠 뿐만 아니라 기능적 이점도 제공할 수 있습니다.</p>
+                    <p class="desc pl--30">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
                 </div>
             </section>
-            <section class="title--section">
-                <h2>탁월한 혁신</h2>
-                <h3>혁신적인 도장이 아우디의 e-모빌리티에서 중요한 역할을 할 것 같습니다. 혁신적인 반사 안료 덕분입니다.</h3>
-                <p class="desc">Copy: Birte Mußmann - Photo: Robert Fischer<br /><br />표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
-            </section>
-            <section class="desc--section mid--type mt--100 mb--100">
-                <p>무엇보다도 공기 역학 및 타이어 특성과 함께 도장은 전기 구동 아우디 차량의 범위를 개선하는 또 다른 결정적인 요소가 될 수 있습니다. 이런 요소가 어떻게 작동하는지 이해하기 위해 아우디 Q4 e-트론 콘셉트 카의 도장에 대해 살펴보겠습니다. 아우디의 컬러 & 트림 디자이너들은 콘셉트 카 차체에 사용할 코팅으로 매우 특별한 컬러를 선택했습니다. "솔라 스카이"라는 이 색조는 BASF 코팅스와 공동으로 개발했습니다.</p>
-            </section>
-            <section class="img--section">
-                <div class="img--wrap">
-                    <img src="/img/stories/design/img--design8--detail2.jpg" alt="">
-                </div>
-                <div class="desc--wrap">
-                    <p>"솔라 스카이"의 아우디 Q4 e-트론 콘셉트 카입니다. 빛의 입사에 따라 블루 톤이 변합니다. 배터리가 위치한 차축 간 실 영역의 어두운 색상 대비는 콘셉트 카가 브랜드의 순수 전기 구동 e-트론 모델과 어떤 연관이 있는지를 강조합니다.</p>
-                </div>
+            <section class="desc--section mid--type">
+                <h2 class="big--title">활동적인 라이프스타일을 함께할 친근한 동반자</h2>
+                <p class="mt--24">아우디 액티브스피어 콘셉트 카를 통해 아우디는 미래의 프리미엄 모빌리티를 위한 최고의 경험이라는 비전을 이어가고 있습니다. 스피어 제품군의 네 번째 콘셉트 카는 완전히 새로운 차체 스타일을 선보일 뿐만 아니라 우아함과 실용성이라는 보이지는 않지만 독특한 조합을 제시합니다.</p>
             </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
             <section class="desc--section mid--type mt--100">
-                <h3>태양 광선의 일부를 반사하는 안료</h3>
-                <p>외관 도장으로 수은이 상승하더라도 내부가 너무 뜨거워지지 않도록 할 수 있습니다. 태양의 적외선 스펙트럼 내에서 단파 방사선을 반사할 수 있는 특수 안료 덕분에 내부 온도 상승을 억제할 수 있습니다. 대부분의 재료는 이러한 광선을 흡수하여 열 에너지로 변환하고 물체를 가열합니다. 특수 도장이 감소하는 것은 바로 이러한 효과 때문입니다.</p>
-            </section>
-            <section class="img--section mt--100">
-                <div class="img--wrap">
-                    <img src="/img/stories/design/img--design8--detail3.jpg" alt="">
-                </div>
-                <div class="desc--wrap">
-                    <p class="">라이트 블루의 메탈릭 색조는 깨끗한 공기를 연상시킵니다. 사파이어 블루 크리스탈 효과를 담당하는 반사 안료 덕분에 상도 도료(top coat)가 제 역할을 잘 합니다.</p>
-                </div>
+                <h2 class="">아우디 액티브스피어 콘셉트 카의 월드 프리미어</h2>
+                <p class="mt--24">아우디는 2023년 1월 26일 저녁에 진행된 Celebration of Progress에서 아우디 액티브스피어 콘셉트 카를 공개했습니다. 아우디 AG 브랜드 책임자인 헨리크 벤더스(Henrik Wenders)와 아우디 AG 디자인 책임자인 마크 리히테(Marc Lichte)가 네 번째 스피어 콘셉트 카에 대한 아이디어와 비전을 어떻게 제시하는지 시청해 보세요. 아우디 디자인 로프트 말리부(CA)의 수석 이사인 게일 부진(Gael Buzyn)과 UI/UX 디자인 아우디 AG의 책임자인 시드 오데드라(Sid Odedra)가 아우디 액티브스피어 콘셉트 카가 얼마나 인간 중심으로 디자인되었는지를 인상적으로 소개합니다.</p>
             </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides2"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
             <section class="desc--section mid--type mt--100">
-                <p>차체가 많이 뜨거워지지 않으므로 실내는 더 시원해지는 경향이 있습니다. 따라서 운전자와 탑승자는 에어컨 사용을 줄일 수 있습니다. 이 ‘사용되지 않은’ 에너지가 자동차의 전기 구동으로 전환되면, 에어컨의 낮은 사용률과 도장의 안료 효과로 실내가 쾌적하고 시원해질 뿐만 아니라 한 번의 배터리 충전으로 더 길게 주행할 수 있습니다.</p>
-                <h3 class="mt--100">
-                    혁신적인 아우디 도장의 미래
-                </h3>
-                <p>
-                    더구나 이 같은 혁신적인 도장을 통해 아우디의 미래 e-모빌리티를 엿볼 수 있습니다. 그 이유는 아우디 Q4 e-트론 콘셉트 카의 외부 도장에서 곧 출시될 순수 전기 양산 모델을 위한 아우디의 미래 컬러를 미리 볼 수 있기 때문입니다. 따라서 자동차 구매자는 더 많은 컬러를 선택할 수 있습니다. 앞으로 아우디의 특별한 외장 도장은 날씨가 더울 때 순수 전기 모델의 내부를 냉각시키는 혁신적인 수단일 뿐만 아니라 커스터마이징 범위를 넓히는 역할도 할 수 있습니다.
-                </p>
-            </section>
-            <section class="title--section mid--type">
-                <h2 class="big--title">순환형 경제의 운영 유지</h2>
-                <p class="">혁신과 지속 가능성은 아우디 Q4 e-트론 콘셉트 카의 내부 바닥 매트를 선택할 때에도 최우선적으로 고려되는 요소입니다. 바닥 매트는 재활용 직물과 바다에서 회수한 폐어망으로 제조된 에코닐이라는 특수 원사로 만들어집니다. 이러한 방식으로 재생할 수 없는 귀중한 자원을 재사용하여 원사를 생산합니다. 그 결과로 순환형 생태계가 형성됩니다. 바닥 매트에 사용된 나일론은 품질 저하 없이 계속해서 재활용할 수 있습니다.</p>
+                <h2 class="">아우디 액티브스피어 콘셉트 카의 제작 과정</h2>
+                <p class="mt--24">야외 활동을 고려하여 설계된 아우디 액티브스피어 콘셉트 카는 탁월한 우아함과 오프로드 기능을 동시에 제공합니다. 환상적인 사용자 인터페이스는 최고의 경험을 선사하며 자동차 밖에서도 이용할 수 있습니다. 활동적인 라이프스타일에서는 뻬놓을 수 없는 동반자입니다. 다큐멘터리에서 이 새로운 콘셉트 카와 디자인 및 유용성에 대한 이면의 아이디어를 자세히 알아보세요.</p>
             </section>
-            <BlockInterestedDesign />
         </div>
     </main>
-</template>
+</template>
+<script setup>
+const bannerSlides = ref([
+    {
+        image: "/img/stories/future/img--concept1--detail2.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "아우디 액티브스피어 콘셉트는 겉으로 드러나지 않는 차량 콘셉트입니다. 매우 우아한데다, 향상된 기능과 탁월한 사용자 인터페이스 덕분에 뛰어난 성능을 경험할 수 있습니다. ",
+    },
+    {
+        image: "/img/stories/future/img--concept1--detail3.jpg",
+        alt: "",
+        title: "",
+        subtitle: "유리 표면이 차체의 중요한 부분을 구성합니다. 전면의 투명한 싱글 프레임을 통해 탑승자는 차량 앞의 도로를 명확하게 볼 수 있습니다."
+    },
+    {
+        image: "/img/stories/future/img--concept1--detail4.jpg",
+        alt: "",
+        title: "",
+        subtitle: "아우디 액티브스피어 콘셉트 카는 온로드 모드(로커 레일과 범퍼의 우아한 라이트)뿐만 아니라 오프로드 모드도 제공합니다. 오프로드 모드로 전환하면 지상고가 40mm 더 높아지고 로커 레일의 견고한 라이트를 제공합니다."
+    },
+    {
+        image: "/img/stories/future/img--concept1--detail5.jpg",
+        alt: "",
+        title: "",
+        subtitle: "차량 후면을 열고 스포트백에서 액티브백으로 변형하여 스포츠 장비용 픽업 화물칸으로 활용할 수 있습니다."
+    }
+]);
+const bannerSlides2 = ref([
+    {
+        image: "/img/stories/future/img--concept1--detail6.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "미래 지향성: 콰트로 4륜 구동 - 주행의 즐거움과 흥미로운 증강 현실 경험을 더합니다. ",
+    },
+    {
+        image: "/img/stories/future/img--concept1--detail7.jpg",
+        alt: "",
+        title: "",
+        subtitle: "새로운 차원의 내부 공간 경험: 내부 디자인은 차창 너머로 열리는 듯한 개방감을 주며 미니멀하면서도 충분히 넓습니다."
+    },
+    {
+        image: "/img/stories/future/img--concept1--detail8.jpg",
+        alt: "",
+        title: "",
+        subtitle: "아우디 액티브스피어 콘셉트 카는 온로드 모드(로커 레일과 범퍼의 우아한 라이트)뿐만 아니라 오프로드 모드도 제공합니다. 오프로드 모드로 전환하면 지상고가 40mm 더 높아지고 로커 레일의 견고한 라이트를 제공합니다."
+    },
+    {
+        image: "/img/stories/future/img--concept1--detail9.jpg",
+        alt: "",
+        title: "",
+        subtitle: "아우디 액티브스피어 콘셉트 카는 자율 운전 기능을 지원하므로 최고의 경험을 편안하게 누릴 수 있습니다."
+    }
+]);
+</script>

app/pages/stories/future/sphere-conceptcars/grandsphere-concept.vue

@@ -0,0 +1,102 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="img--section none--bdrs">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--concept3--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p class="desc pl--30">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type">
+                <h2 class="big--title">미래를 향한 최고의 콘셉트 카</h2>
+                <p class="mt--24">아우디 그랜드스피어 콘셉트 카를 통해 아우디는 미래의 세단에 대한 해석을 제시하고 있습니다. 환상적인 콘셉트 카 시리즈 중 두 번째를 통해 미래의 최고 자동차는 얼마나 편안한지 엿볼 수 있습니다. 전기화, 자동화, 직관적이라는 개념을 구현하도록 디자인되었으며 몰입형 경험을 위한 충분한 개별 공간을 제공합니다.</p>
+            </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
+            <section class="desc--section mid--type mt--100">
+                <h2 class="">아우디 그랜드스피어 콘셉트 카 월드 프리미어의 하이라이트</h2>
+                <p class="mt--24">경험하는 기기이자 모든 감각을 자극하는 경험을 위한 플랫폼인 자동차: 아우디 그랜드스피어 콘셉트 카의 비전은 잉골슈타트의 아우디 디자인 센터에서 구체화되었습니다. 이 디자인 센터는 디지털 월드 프리미어에서 실시간 스트리밍을 통해 대중에게 콘셉트 카를 선보일 수 있는 곳입니다. 아우디 AG 경영 이사회 일원인 힐데가르트 워트만(Hildegard Wortmann), 아우디 AG 브랜드 대표인 헨리크 벤더스(Henrik Wenders), 아우디 AG 디자인 대표인 마크 리히테(Marc Lichte), 아우디 AG 제품 마케팅 대표인 크리스티안 조른(Christiane Zorn) 박사가 어떻게 공식적으로 아우디 그랜드스피어 콘셉트를 공개했는지 확인해보세요.</p>
+            </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides2"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
+            <section class="desc--section mid--type mt--100">
+                <h2 class="">
+                    아우디가 만드는 미래
+                </h2>
+                <p class="mt--24">다른 콘셉트 카와 마찬가지로 아우디 그랜드스피어 콘셉트 카를 통해 아우디의 미래를 엿볼 수 있습니다. 그런데 그 콘셉트 카 이면에는 누가 있을까요? 개발자, 디자이너 및 엔지니어들이 다큐멘터리를 통해 제작 과정에 대해 말하고 처음에 아우디 그랜드스피어 콘셉트 카가 어떻게 탄생하게 되었는지에 대한 인사이트를 전합니다.</p>
+            </section>
+        </div>
+    </main>
+</template>
+<script setup>
+const bannerSlides = ref([
+    {
+        image: "/img/stories/future/img--concept3--detail2.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "아우디 그랜드스피어 콘셉트 카는 경험할 수 있는 기기로, 탑승자의 요구 사항에 맞춰 조정할 수 있습니다. 움푹 들어간 좌석과 넓은 유리 표면으로 개방적인 공간감을 느낄 수 있습니다.  ",
+    },
+    {
+        image: "/img/stories/future/img--concept3--detail3.jpg",
+        alt: "",
+        title: "",
+        subtitle: "선명한 라인과 고품질 소재를 사용한 미니멀리스트 인테리어로 시대를 뛰어넘는 아름다움을 구현한 넓은 아우디 그랜드스피어 콘셉트 카가 완성되었습니다. 탑승자는 원활하게 작동하는 기술뿐만 아니라 미래형 체험 기기도 경험하게 됩니다."
+    },
+    {
+        image: "/img/stories/future/img--concept3--detail4.jpg",
+        alt: "",
+        title: "",
+        subtitle: "아우디 그랜드스피어 콘셉트 카는 다가가자마자 반대 방향을 향하는 도어를 모두 열고 지정해 놓은 재생 목록과 같은 개별 설정으로 탑승자를 반깁니다. 탑승 전부터 넓고 개인화된 인테리어에서 항공기의 퍼스트 클래스와 같다는 첫인상을 느낄 수 있습니다."
+    },
+    {
+        image: "/img/stories/future/img--concept3--detail5.jpg",
+        alt: "",
+        title: "",
+        subtitle: "아우디 싱글프레임에 대한 새로운 해석: 유려한 라인이 육각형 모양을 형성합니다. 라디에이터 디자인의 정밀하게 설계된 구조 형태가 위에서 조명을 받아 역동적인 빛 패턴을 만들어냅니다."
+    }
+]);
+const bannerSlides2 = ref([
+    {
+        image: "/img/stories/future/img--concept3--detail6.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "대형 유리와 투명하고 유기적인 라인이 결합되어 전체적인 차체를 형성하여 아우디 그랜드스피어 콘셉트 카의 독특한 실루엣을 만듭니다.",
+    },
+    {
+        image: "/img/stories/future/img--concept3--detail7.jpg",
+        alt: "",
+        title: "",
+        subtitle: "자율 주행을 통해 아우디 그랜드스피어 콘셉트 카에서는 서로 이야기를 나누거나, 긴장을 풀고 휴식을 취하거나 업무를 처리하거나 모든 것을 잊고 잠시 혼자만의 시간을 갖는 등 개인화된 경험을 즐길 수 있습니다. 아우디 그랜드스피어 콘셉트 카는 이처럼 자동차를 경험의 세계로 바꿔놓습니다. "
+    },
+    {
+        image: "/img/stories/future/img--concept3--detail8.jpg",
+        alt: "",
+        title: "",
+        subtitle: "세련된 후면은 차량의 공기역학적 특성을 보완하며, 원하는 대로 구성할 수 있는 후방 라이트도 있습니다. "
+    },
+    {
+        image: "/img/stories/future/img--concept3--detail9.jpg",
+        alt: "",
+        title: "",
+        subtitle: "버튼을 누르면 내부가 퍼스트 클래스와 같은 넓은 라운지에서 스티어링 휠과 페달을 갖춘 현대적인 운전석 콕핏으로 변합니다."
+    }
+]);
+</script>

app/pages/stories/future/sphere-conceptcars/skysphere-concept.vue

@@ -0,0 +1,100 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="img--section none--bdrs">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--concept4--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p class="desc pl--30">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type">
+                <h2 class="big--title">프리미엄 모빌리티 개념의 재정립</h2>
+                <p class="mt--24">아우디 스카이스피어 콘셉트 카는 아우디 콘셉트 카 제품군 브랜드의 최초 제품입니다. 이 자동차는 자동차가 교류하는 공간이자 경험하는 기기가 되는 미래를 구상하겠다는 목표를 바탕으로 개발되었습니다. 전기 2도어 로드스터는 자동화된 운전의 비전, 혁신적인 새로운 인테리어 디자인, 완전히 통합된 디지털 생태계를 결합합니다.</p>
+            </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
+            <section class="desc--section mid--type mt--100">
+                <h2 class="">아우디 스카이스피어 콘셉트 카의 월드 프리미어 하이라이트</h2>
+                <p class="mt--24">아우디 스카이스피어 콘셉트 카는 디자인과 경험의 매혹적인 공존을 구현하며, 잉골슈타트와 캘리포니아 말리부에 있는 아우디 디자인 로프트의 디자이너들과 개발자들 간의 가상 상호 작용과 실제 상호 작용을 통해 구체화되었습니다. 이제 ‘Celebration of Progress’가 디자인과 경험의 두 세계를 하나로 결합합니다. 경영 이사회 멤버인 힐데가르트 보르트만(Hildegard Wortmann), AUDI AG 브랜드 책임자인 헨리크 벤더스(Henrik Wenders), 말리부의 아우디 디자인 로프트 수석 이사인 게일 부진(Gael Buzyn)이 아우디의 세 가지 새로운 콘셉트 카 중 첫 번째 모델을 어떻게 소개했는지 확인해 보세요.</p>
+            </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides2"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
+            <section class="desc--section mid--type mt--100">
+                <h2 class="">아이디어에서 콘셉트 카의 구현까지: 아우디 스카이스피어 콘셉트 카는 어떻게 탄생했나요?</h2>
+                <p class="mt--24">아우디 스카이스피어 콘셉트 카의 개발 과정에서는 디지털 디자인과 전통적인 장인 정신을 결합했습니다. 이 기록은 말리부의 아우디 디자인 로프트와 독일 잉골슈타트의 팀 간에 수천 킬로미터에 걸쳐 디자인 프로세스를 진행하는 데 3D 기술이 어떻게 사용되었는지 보여주고, 콘셉트 카(스포츠카이자 세단)의 혁신적인 내부 디자인과 엔지니어링에 대한 인사이트를 제공합니다.</p>
+            </section>
+        </div>
+    </main>
+</template>
+<script setup>
+const bannerSlides = ref([
+    {
+        image: "/img/stories/future/img--concept4--detail2.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "5.19미터 길이의 ‘그랜드 투어링’ 모드에 있는 아우디 스카이스피어 콘셉트 카는 이그제큐티브 클래스의 전기 로드스터로, 진보적인 럭셔리 경험의 개념을 재정립합니다. ",
+    },
+    {
+        image: "/img/stories/future/img--concept4--detail3.jpg",
+        alt: "",
+        title: "",
+        subtitle: "'그랜드 투어링' 자동 운전 모드에서는 스티어링 휠과 페달이 사라지고 모든 탑승자는 항공기의 퍼스트 클래스 여행처럼 넓은 다리 공간을 즐기고 자유롭게 움직일 수 있습니다. "
+    },
+    {
+        image: "/img/stories/future/img--concept4--detail4.jpg",
+        alt: "",
+        title: "",
+        subtitle: "도어는 뒤쪽에 힌지되어 있습니다. 따라서 차량 앞쪽 끝의 차체와 프레임 구성 요소를 25cm 이동할 수 있습니다. '스포츠' 모드를 활성화한 상태에서 아우디 스카이스피어 콘셉트 카는 길이 4.94m의 날렵한 스포츠카입니다. "
+    },
+    {
+        image: "/img/stories/future/img--concept4--detail5.jpg",
+        alt: "",
+        title: "",
+        subtitle: "풍동에 최적화된 후면에는 로드스터의 고전적인 유선형 요소와 대형 유리가 결합되어 있습니다."
+    }
+]);
+const bannerSlides2 = ref([
+    {
+        image: "/img/stories/future/img--concept4--detail6.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "전면과 마찬가지로 후면에도 차량 폭 전체에 걸쳐 디지털 제어 LED 패널을 갖추고 있습니다. 특히 조명은 콘셉트 카가 주행하는 모드를 나타냅니다. ",
+    },
+    {
+        image: "/img/stories/future/img--concept4--detail7.jpg",
+        alt: "",
+        title: "",
+        subtitle: "가운데 콘솔에 있는 모니터 패널의 조작 기기는 '스포츠' 모드에서만 필요합니다. '그랜드 투어링' 모드에서는 들어가 있어 우아한 느낌을 냅니다."
+    },
+    {
+        image: "/img/stories/future/img--concept4--detail8.jpg",
+        alt: "",
+        title: "",
+        subtitle: "'스포츠' 모드에서는 스티어링 휠과 페달이 콕핏에서 지정한 위치에 나타납니다. 대시 패널의 조작 기기와 센터 콘솔의 모니터도 다시 나타납니다. "
+    },
+    {
+        image: "/img/stories/future/img--concept4--detail9.jpg",
+        alt: "",
+        title: "",
+        subtitle: "콕핏의 카울과 가운데 콘솔 상단에 위치한 대형 터치스크린 모니터는 차량 시스템과 인포테인먼트를 작동하는 데 사용됩니다."
+    }
+]);
+</script>

app/pages/stories/future/sphere-conceptcars/urbansphere-concept.vue

@@ -0,0 +1,94 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="img--section none--bdrs">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--concept2--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p class="desc pl--30">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type">
+                <h2 class="big--title">Experience megacities as never before</h2>
+                <p class="mt--24">출퇴근 시간에 마음의 여유를 즐기세요. 아우디 어반스피어 콘셉트 카에서는 하이테크 인테리어로 완전히 새로운 경험을 할 수 있습니다. 자율 주행 기술 덕분에 세 번째 스피어 콘셉트 카는 바퀴 달린 라운지 또는 모바일 사무실로 변모하며 각 탑승자는 개별적으로 차량을 맞춤화할 수 있습니다.</p>
+            </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
+            <section class="desc--section mid--type mt--100">
+                <h2 class="">아우디 어반스피어 콘셉트 카의 월드 프리미어 하이라이트</h2>
+                <p class="mt--24">아우디 어반스피어 콘셉트 카를 통해 아우디는 미래의 모빌리티에 대한 비전을 드러냅니다. 아우디 AG의 마케팅 및 영업 이사회 일원인 힐데가르트 워트만(Hildegard Wortmann), 아우디 AG의 기술 개발 이사회 일원인 올리버 호프만(Oliver Hoffmann), 아우디 AG 브랜드 책임자인 헨리크 벤더스(Henrik Wenders)가 세 번째 스피어 콘셉트 카를 전 세계에 공개하면서 어떻게 소개했는지 알아보세요.</p>
+            </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides2"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
+            <section class="desc--section mid--type">
+                <h2 class="">비전, 창의성 그리고 전문성</h2>
+                <p class="mt--24">아우디 어반스피어 콘셉트 카를 통해 아우디가 대도시에서 미래의 모빌리티를 어떻게 구상하는지 엿볼 수 있습니다. 다큐멘터리에서 엔지니어, 디자이너, 기술자들이 자동차 개발에 대한 인사이트를 전합니다. 콘셉트 카가 없었다면 불가능했을 그 과정의 일부를 통해 새로운 지평이 열렸습니다.</p>
+            </section>
+        </div>
+    </main>
+</template>
+<script setup>
+const bannerSlides = ref([
+    {
+        image: "/img/stories/future/img--concept2--detail2.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "아우디 어반스피어 콘셉트 카의 싱글 프레임 전체 표면은 커뮤니케이션을 위한 역동적인 조명 디스플레이로 활용될 수 있습니다. ",
+    },
+    {
+        image: "/img/stories/future/img--concept2--detail3.jpg",
+        alt: "",
+        title: "",
+        subtitle: "아우디 어반스피어 콘셉트 카의 전면과 마찬가지로 후면에 있는 대형 디지털 조명 표면도 디자인의 특징을 드러내고 커뮤니케이션을 지원하는 역할을 합니다. "
+    },
+    {
+        image: "/img/stories/future/img--concept2--detail4.jpg",
+        alt: "",
+        title: "",
+        subtitle: "아우디 어반스피어 콘셉트 카의 도어는 앞과 뒤의 반대 방향으로 힌지되어 있고 B필러가 없습니다. 탑승자가 차에 타자마자 실내의 전체 공간을 개방합니다. "
+    },
+    {
+        image: "/img/stories/future/img--concept2--detail5.jpg",
+        alt: "",
+        title: "",
+        subtitle: "넓은 유리 표면으로 인해 탑승자는 탁월한 공간감을 느낄 수 있고 주변 환경을 더 강렬하게 인식할 수 있습니다."
+    }
+]);
+const bannerSlides2 = ref([
+    {
+        image: "/img/stories/future/img--concept2--detail6.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "아우디 어반스피어 콘셉트 카는 모든 탑승자에게 최대한의 편안한 기능을 제공하며 조명을 이용해서도 편안한 분위기를 조성합니다. ",
+    },
+    {
+        image: "/img/stories/future/img--concept2--detail7.jpg",
+        alt: "",
+        title: "",
+        subtitle: "아우디 어반스피어 콘셉트 카의 내부 좌석은 회전이 가능하며 항공기의 퍼스트 클래스와 같은 고급스러운 편안함을 제공합니다."
+    },
+    {
+        image: "/img/stories/future/img--concept2--detail8.jpg",
+        alt: "",
+        title: "",
+        subtitle: "인포테인먼트의 가장 놀라운 점은 루프에서 내릴 수 있는 OLED 스크린입니다. 이 OLED 스크린을 통해 뒷줄의 두 탑승자는 함께 화상 회의에 참여하거나 영화를 볼 수 있습니다."
+    },
+]);
+</script>

app/pages/stories/future/welcome-to-me-time-on-the-move.vue

@@ -0,0 +1,95 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="title--section">
+                <h2>이동 중에 휴식을 취할 수 있는 프로그램</h2>
+                <h3>아우디 어반스피어 콘셉트 카의 ‘헬스 유스 케이스’는 자동차를 평화로운 안식처로 전환하는 휴식 프로그램입니다.</h3>
+                <p class="desc">Copy: AUDI AG - Photo: AUDI AG<br /><br />표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future3--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>편안하게 호흡하세요. 헬스 유스 케이스가 활성화되면 디지털 도우미가 탑승자에게 명상을 해보라고 제안합니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--60 mb--60">
+                <p>내부 조명이 따뜻한 애프리콧 불빛으로 낮아지고 마음을 진정시키는 음악이 흐르며 디스플레이는 차분하고 안정적인 호흡 리듬을 유지하도록 권장합니다. 좌석이 뒤로 젖혀지면 모든 것을 내려놓고 숨을 들이쉬고 내쉬는 데만 집중할 수 있습니다. 그리고 바깥세상의 분주함은 잊습니다.<br />아우디 어반스피어 콘셉트 카는 모든 세부 사항을 단계적으로 관리하여 휴식과 명상에 도움이 되는 몰입 환경을 조성합니다.<br />이를 헬스 유스 케이스라고도 하는데, 이 옵션은 아우디 브랜드의 최신 콘셉트 카 내부의 조명, 좌석 위치, 사운드스케이프, 디지털 인터페이스를 조정하여 평온한 오아시스와 같은 공간을 만듭니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future3--detail2.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>긴장을 이완하고 휴식을 취해보세요. 아우디 어반스피어 콘셉트 카의 헬스 유스 케이스는 몰입형 웰니스 경험을 창출합니다.</p>
+                </div>
+            </section>
+            <section class="title--section">
+                <h2 class="mt--100">“디지털 도우미는 상시 대기 중인 집사와 같아서 탑승자의 모든 요구 사항에 부응하고 조언을 제공하며 탑승자와 상호작용할 준비가 되어 있습니다.”</h2>
+                <p class="desc">Christina Huber</p>
+            </section>
+            <section class="img--desc--section type2 mid--type mb--200 reverse">
+                <div class="inner--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/future/img--future3--detail3.jpg" alt="">
+                    </div>
+                    <p class="desc">아우디의 사용자 인터페이스 디자이너인 크리스티나 후버는 아우디 어반스피어 콘셉트 카의 헬스 유스 케이스를 개발했습니다.</p>
+                </div>
+                <div class="desc--wrap">
+                    <p>아우디의 사용자 인터페이스 디자이너인 크리스티나 후버(Christina Huber)는 이탈리아 토리노에 있는 아우디 브랜드의 자회사이자 디자인 스튜디오인 이탈디자인과 협력하여 프로세스를 개발했습니다.<br /><br />“아우디 어반스피어 콘셉트 카는 보호받을 수 있는 안식처입니다. 헬스 유스 케이스에서 자동차는 집에서 볼 수 있는 어떤 것과도 다른 특별한 분위기를 조성하여 진정한 몰입형 코쿠닝 효과를 연출합니다.”<br /><br />그러나 이는 포괄적인 경험의 한 측면일 뿐입니다. 탑승자가 아우디 어반스피어 콘셉트 카에 접근하면 차량은 빛의 카펫을 지면에 투사하고 자동으로 도어를 여는 환영 절차를 시작합니다. 그러면 좌석이 열린 문을 향해 회전하면서 인레이와 앰비언트 조명이 드러납니다. 그리고 좌석에 앉으면 디지털 인터페이스의 개인 도우미가 탑승자를 맞이하고 승차를 환영합니다.<br /><br />크리스티나 후버는 이렇게 설명합니다. “디지털 도우미는 상시 대기 중인 집사와 같아서 탑승자의 모든 요구 사항에 부응하고 조언을 제공하며 탑승자와 상호작용할 준비가 되어 있습니다.”</p>
+                </div>
+            </section>
+            <section class="">
+                <BlockSwiperBanner
+                    :slides="bannerSlides"
+                    title=""
+                    subtitle=""
+                    notice=""
+                    :autoplay="{ delay: 0 }"
+                    :loop="false"
+                    type="vertical"
+                />
+            </section>
+            <section class="desc--section mid--type mt--60 mb--60">
+                <p class="">
+                    도우미가 뒤쪽 탑승자에게 제공하는 옵션 중 하나는 헬스 유스 케이스입니다. 탑승자가 이 옵션을 선택하면 앞좌석 등받이에 있는 카메라가 얼굴을 스캔해 개인의 동공 크기를 측정하여 스트레스 지수를 결정합니다. 이 수치가 높은 경우 시스템은 몰입형 명상 프로그램을 시작하여 탑승자를 편안한 상태로 안내합니다.<br /><br />조명도 따뜻하고 편안한 색상으로 전환되면서 마음을 진정시키는 사운드스케이프가 재생되고 좌석이 60도 각도로 젖혀지면서 아우디 어반스피어 콘셉트 카의 분위기가 완전히 바뀝니다.<br /><br />명상이 완료되면 차량 내부는 일반 상태로 돌아가고, 탑승자는 아우디 어반스피어 콘셉트 카에서 자신의 시간을 어떻게 사용할지 결정할 수 있습니다. 업무에 집중하거나, 밝은 음악을 듣거나, 애니메이션 대화에 참여할 수 있습니다.<br /><br />아우디 어반스피어 콘셉트 카의 헬스 유스 케이스는 차내의 휴식 프로그램입니다. 이 프로그램은 탑승자에게 숨을 고르고 잠시 시간을 내어 생각을 가다듬도록 권장합니다. 회복되었다고 느끼면 다른 일에 에너지를 쏟을 수 있습니다.</p>
+            </section>
+            <section class="title--section">
+                <h2>“아우디 어반스피어 콘셉트 카는 보호받을 수 있는 안식처입니다. 헬스 유스 케이스에서 자동차는 특별한 분위기를 마법처럼 조성하여 진정한 몰입형 코쿠닝 효과를 연출합니다.”</h2><p class="desc">Christina Huber</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future3--detail7.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>아우디 어반스피어 콘셉트 카에 탑승하면 거대 도시에서의 극심한 생존 경쟁에서 잠시 벗어나 개인적 자유와 휴식을 즐길 수 있습니다.</p>
+                </div>
+            </section>
+            <BlockInterestedFuture />
+        </div>
+    </main>
+</template>
+<script setup>
+    const bannerSlides = ref([
+        {
+            image: "/img/stories/future/img--future3--detail4.jpg",
+            alt: "",
+            title: "",
+            subtitle:
+                "인레이와 앰비언트 조명이 웰빙의 느낌을 조성합니다.",
+        },
+        {
+            image: "/img/stories/future/img--future3--detail5.jpg",
+            alt: "",
+            title: "",
+            subtitle: "탑승자가 승차하기 직전에 좌석이 환영하듯이 열린 문을 향해 회전합니다. "
+        },
+        {
+            image: "/img/stories/future/img--future3--detail6.jpg",
+            alt: "",
+            title: "",
+            subtitle: "디지털 인터페이스의 개인 도우미가 좌석에 앉은 탑승자를 환영하고 두 가지 사용 사례를 제안합니다."
+        }
+    ]);
+</script>

app/pages/stories/sustainability/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <div class="title--wrap">
+                <h2 class="">Sustainability</h2>
+                <p>아우디는 깊은 신념을 바탕으로 지속 가능한 행동을 일관되게 실천하고 있습니다. 아우디가 어떻게 친환경 모빌리티로의 전환을 주도하고 사회 변화를 위한 원동력을 제공하는지 자세히 알아보세요.</p>
+            </div>
+            <div class="content--wrap">
+                <div class="tech--card--wrap">
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/sustainability/img--sustain1.jpg" alt="‘머티리얼루프’ 프로젝트: 낡은 것을 새 것으로">
+                        </div>
+                        <h3>‘머티리얼루프’ 프로젝트: 낡은 것을 새 것으로</h3>
+                        <p>아우디는 ‘머티리얼루프’ (MaterialLoop) 프로젝트를 통해 수명이 다한 차량에서 더욱 많은 재활용 자재를 추출해 신차에 활용하는 방안을 실험하고 있습니다. 아우디의 그 비전은 품질을 유지하면서도 매우 효율적인 순환 경제 모델을 실현하는 것입니다.</p>
+                        <NuxtLink to="/stories/sustainability/the-material-loop-project-turning-old-into-new">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">전력 소비량(복합): 본 차량의 에너지 소비량 및 배출가스 수치는 NEDC가 아닌 WLTP 기준으로만 제공됩니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/sustainability/img--sustain2.jpg" alt="개인적으로 중요한 문제">
+                        </div>
+                        <h3>개인적으로 중요한 문제</h3>
+                        <p>유타 쇼베러(Jutta Schoberer)가 가장 기대하는 아우디 A4 아반트의 특징은 순환형 경제가 작동하는 진정한 사례라는 점입니다.</p>
+                        <NuxtLink to="/stories/sustainability/a-matter-of-personal-importance/">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">A4 아반트<br />복합 연료 소비량 8.1~4.7l/100km(WLTP), 복합 CO₂ 배출량 183~124g/km(WLTP)<br />NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/sustainability/img--sustain3.jpg" alt="통합적인 접근 방식">
+                        </div>
+                        <h3>통합적인 접근 방식</h3>
+                        <p>프리미엄 모빌리티는 지속 가능성을 기반으로 제작합니다. 이것이 바로 아우디의 약속입니다. 요한나 클레비츠(Johanna Klewitz) 박사, 말테 뵈멜(Malte Vömel) 등의 전문가들이 공급망과 제품을 면밀히 조사하고 보다 지속 가능한 프리미엄 브랜드로의 전환을 주도합니다.</p>
+                        <NuxtLink to="/stories/sustainability/a-holistic-approach">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">Q4 e-트론<br />복합 전기 소비량 19.5~16.2kWh/100km(WLTP), 복합 CO₂ 배출량 0g/km(WLTP)<br />NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</template>