Stories > Design / Lifestyle 완료 Future 작업중

app/assets/scss/media.scss

@@ -58,6 +58,21 @@
                         width: calc(50% - 8px);
                     }
                 }
+                .ls--card--wrap{
+                    .ls--card{
+                        gap: 36px;
+                        flex-wrap: wrap;
+                        .ls--img--wrap{
+                            width: 100%;
+                        }
+                        .ls--txt--wrap{
+                            width: 100%;
+                        }
+                        &.reverse{
+                            flex-direction: column-reverse;
+                        }
+                    }
+                }
             }
             .title--section{
                 padding-left: 0;
@@ -92,6 +107,9 @@
             .img--desc--section{
                 flex-direction: column;
                 gap: 20px;
+                &.reverse{
+                    flex-direction: column;
+                }
                 .img--wrap{
                     width: 100%;
                 }
@@ -128,6 +146,18 @@
                         width: 100%;
                     }
                 }
+                .ls--card--wrap{
+                    .ls--card{
+                        .ls--txt--wrap{
+                            >h2{
+                                font-size: 24px;
+                            }
+                            >h3{
+                                font-size: 18px;
+                            }
+                        }
+                    }
+                }
             }
             .more--section{
                 .tech--card--wrap{
@@ -150,6 +180,22 @@
                 }
                 >h3{
                     font-size: 24px;
+                    &.big--title{
+                        font-size: 28px;
+                    }
+                }
+            }
+            .img--section{
+                &.type3{
+                    flex-wrap: wrap;
+                    .img--box{
+                        &:first-child{
+                            width: 100%;
+                        }
+                        &:last-child{
+                            width: 100%;
+                        }
+                    }
                 }
             }
         }

app/assets/scss/style.scss

@@ -165,6 +165,39 @@ main{
                     }
                 }
             }
+            .ls--card--wrap{
+                .ls--card{
+                    display: flex;
+                    gap: 72px;
+                    align-items: center;
+                    .ls--img--wrap{
+                        width: 50%;
+                        overflow: hidden;
+                        border-radius: 20px;
+                    }
+                    .ls--txt--wrap{
+                        width: 50%;
+                        >h2{
+                            font-size: 36px;
+                            margin-bottom: 8px;
+                        }
+                        >h3{
+                            font-size: 24px;
+                            margin-bottom: 8px;
+                        }
+                        >p{
+                            font-size: 16px;
+                            color: rgba(252, 252, 253, 0.7);
+                            margin-bottom: 24px;
+                            &.desc{
+                                margin-top: 40px;
+                                font-size: 14px;
+                                margin-bottom: 0;
+                            }
+                        }
+                    }
+                }
+            }
         }
         .img--section{
             .img--wrap{
@@ -193,6 +226,18 @@ main{
                     width: 50%;
                 }
             }
+            &.type3{
+                display: flex;
+                gap: 16px;
+                .img--box{
+                    &:first-child{
+                        width: 35%;
+                    }
+                    &:last-child{
+                        width: 70%;
+                    }
+                }
+            }
             .desc--wrap{
                 margin-top: 24px;
                 font-size: 16px;
@@ -237,6 +282,9 @@ main{
                 font-size: 72px;
             }
             >h3{
+                &.big--title{
+                    font-size: 44px;
+                }
                 font-size: 36px;
                 margin-bottom: 40px;
             }
@@ -267,6 +315,9 @@ main{
         .img--desc--section{
             display: flex;
             padding: 64px 0;
+            &.reverse{
+                flex-direction: row-reverse;
+            }
             &.mid--type{
                 margin: 0 auto;
                 max-width: 1248px;
@@ -295,6 +346,9 @@ main{
                 p{
                     font-size: 16px;
                     color: rgba(252, 252, 253, 0.7);
+                    &.desc{
+                        font-size: 12px;
+                    }
                 }
             }
         }
@@ -373,7 +427,7 @@ main{
     display: inline-block;
     font-weight: 400;
     padding: 12px 24px;
-    color: #fff;
+    color: rgb(252, 252, 253);
     border-radius: 100px;
     background-color: #657081;
     &:hover{
@@ -385,4 +439,24 @@ main{
         padding: 16px 32px;
         width: 248px;
     }
+}
+.btn--border--gray{
+    transition: all 0.3s;
+    width: fit-content;
+    font-size: 14px;
+    display: inline-block;
+    font-weight: 400;
+    padding: 12px 24px;
+    color: rgb(252, 252, 253);
+    border-radius: 100px;
+    background-color: #181d25;
+    box-shadow: rgb(44, 52, 63) 0px 0px 0px 1px inset;
+    &:hover{
+        background-color: rgb(44, 52, 63);
+        box-shadow: rgba(219, 223, 230, 0.2) 0px 0px 0px 1px inset;
+    }
+    &.big--btn{
+        padding: 16px 32px;
+        font-size: 16px;
+    }
 }

app/components/block/interestedDesign.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/design/img--design7.jpg" alt="풍동에서의 검출 작업">
+                </div>
+                <h3>풍동에서의 검출 작업</h3>
+                <p>아우디 공기음향 풍동에서 공기역학 전문가들이 아우디 RS e-트론 GT의 형태를 완성하고 있습니다.</p>
+                <NuxtLink to="/stories/design/detective-work-in-the-wind-tunnel">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+            </div>
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design6.jpg" alt="휠에 대한 재해석">
+                </div>
+                <h3>휠에 대한 재해석</h3>
+                <p>안드레아스 발렌시아 폴렉스(Andreas Valencia Pollex)는 아우디의 휠 디자이너로, 현재 디자인과 공기역학 측면에서 전기 자동차용 휠을 재해석하고 있습니다.</p>
+                <NuxtLink to="/stories/design/reinventing-the-wheel">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+            </div>
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design4.jpg" alt="4개 링으로 구성된 브랜드의 새롭고 빛나는 시선">
+                </div>
+                <h3>4개 링으로 구성된 브랜드의 새롭고 빛나는 시선</h3>
+                <p>디자이너 루카스 리트바게(Lucas Littwag)는 4개의 링을 기반으로 한 새로운 브랜드 아이코닉 헤드라이트인 아우디 아이를 만들었습니다.</p>
+                <NuxtLink to="/stories/design/the-four-rings-new-luminous-gaze">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+            </div>
+        </div>
+    </section>
+</template>

app/components/block/interestedFuture.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/future/img--future7.jpg" alt="마치 마법처럼">
+                </div>
+                <h3>마치 마법처럼</h3>
+                <p>미니멀한 인테리어 디자인, 첨단 안경, 사용자를 향해 움직이는 제어 요소, 이것이 바로 아우디 액티브스피어 콘셉트 카를 위한 새로운 혼합 현실 기반의 작동 개념인 아우디 디멘션(Audi dimensions)입니다.</p>
+                <NuxtLink to="/stories/future/almost-like-magic">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+            </div>
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future5.jpg" alt="아우디 그랜드스피어 콘셉트 카">
+                </div>
+                <h3>아우디 그랜드스피어 콘셉트 카: 최상의 경험을 즐길 수 있는 아우디 그랜드스피어 콘셉트 카</h3>
+                <p>아우디 브랜드는 아우디 그랜드스피어 콘셉트 카를 통해 새로운 경험을 선사하는 인테리어를 비롯하여 최고급 이동 및 여행의 진보적인 럭셔리 개념에 대한 비전을 밝힙니다.</p>
+                <NuxtLink to="/stories/future/audi-grandsphere-concept-first-class-interior-experience">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+            </div>
+            <div class="tech--card">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future4.jpg" alt="디자인 전략">
+                </div>
+                <h3>디자인 전략</h3>
+                <p>아우디 디자인은 미래를 향해 어떻게 발전하고 있나요? 미래를 향한 발전을 어떻게 정의하시겠어요? 이와 관련하여 아우디 디자인의 디자인 전략 책임자인 클라우스 포트호프(Claus Potthoff)와 이야기를 나눴습니다.</p>
+                <NuxtLink to="/stories/future/the-strategy-of-design">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+            </div>
+        </div>
+    </section>
+</template>

app/pages/stories/design/cool-innovation.vue

@@ -0,0 +1,56 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <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="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design8--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p class="">금속, 세라믹 또는 진주 입자와 함께 안료는 우리가 표면을 인식하는 방식에 영향을 미칠 뿐만 아니라 기능적 이점도 제공할 수 있습니다.</p>
+                </div>
+            </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>
+            <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>
+            </section>
+            <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>
+            </section>
+            <BlockInterestedDesign />
+        </div>
+    </main>
+</template>

app/pages/stories/design/index.vue

@@ -0,0 +1,84 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <div class="title--wrap">
+                <h2 class="">Design</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/design/img--design1.jpg" alt="동종 최초">
+                        </div>
+                        <h3>동종 최초</h3>
+                        <p>아우디 RS e-tron GT 퍼포먼스는 아우디 최초의 순수 전기 퍼포먼스 모델입니다. 디자인을 담당한 크리스토퍼 크뢰너(Christopher Kröner)가 강렬한 색상과 소재가 어떻게 이 그란 투리스모의 가장 스포티한 버전을 완성하는지 설명합니다.</p>
+                        <NuxtLink to="/stories/design/the-first-of-its-kind">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/design/img--design2.jpg" alt="새로워진 아우디의 링">
+                        </div>
+                        <h3>새로워진 아우디의 링</h3>
+                        <p>아우디는 Vorsprung durch Technik - 기술을 통한 진보 - 를 브랜드의 핵심 가치로 삼고 있으며, 혁신적인 모빌리티와 진보적인 디자인을 지향합니다. 최근 출시된 아우디 모델들은 이러한 브랜드 철학을 드러내는 새로운 디자인 요소들과 함께, 재해석된 아우디 링을 선보였습니다. 이번 변화에는 어떤 의미가 담겨 있을까요?</p>
+                        <NuxtLink to="/stories/design/the-new-audi-rings">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/design/img--design3.jpg" alt="스포티함과 세련미의 완벽한 조합">
+                        </div>
+                        <h3>“스포티함과 세련미의 완벽한 조합”</h3>
+                        <p>아우디 컬러 & 트림 부서의 아우디 Q4 e-트론 전문가와 이야기를 나누면 고객이 특히 기대할 수 있는 것이 무엇인지 알 수 있습니다.</p>
+                        <NuxtLink to="/stories/design/the-perfect-combination-of-sportiness-and-sophistication">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">Q4 e-트론: 복합 전기 소비량: 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/design/img--design4.jpg" alt="4개 링으로 구성된 브랜드의 새롭고 빛나는 시선">
+                        </div>
+                        <h3>4개 링으로 구성된 브랜드의 새롭고 빛나는 시선</h3>
+                        <p>디자이너 루카스 리트바게(Lucas Littwag)는 4개의 링을 기반으로 한 새로운 브랜드 아이코닉 헤드라이트인 아우디 아이를 만들었습니다.</p>
+                        <NuxtLink to="/stories/design/the-four-rings-new-luminous-gaze">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/design/img--design5.jpg" alt="스마트한 장인정신">
+                        </div>
+                        <h3>스마트한 장인정신</h3>
+                        <p>독일 네카르줄름의 뵐링거 회페 공장에서는 장인정신과 스마트 팩토리 기술이 결합되어 순수 전기 아우디 e-트론 GT 콰트로를 양산합니다.</p>
+                        <NuxtLink to="/stories/design/smart-craftsmanship">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/design/img--design6.jpg" alt="휠에 대한 재해석">
+                        </div>
+                        <h3>휠에 대한 재해석</h3>
+                        <p>안드레아스 발렌시아 폴렉스(Andreas Valencia Pollex)는 아우디의 휠 디자이너로, 현재 디자인과 공기역학 측면에서 전기 자동차용 휠을 재해석하고 있습니다.</p>
+                        <NuxtLink to="/stories/design/reinventing-the-wheel">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/design/img--design7.jpg" alt="풍동에서의 검출 작업">
+                        </div>
+                        <h3>풍동에서의 검출 작업</h3>
+                        <p>아우디 공기음향 풍동에서 공기역학 전문가들이 아우디 RS e-트론 GT의 형태를 완성하고 있습니다.</p>
+                        <NuxtLink to="/stories/design/detective-work-in-the-wind-tunnel">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/design/img--design8.jpg" alt="탁월한 혁신">
+                        </div>
+                        <h3>탁월한 혁신</h3>
+                        <p>혁신적인 도장이 아우디의 e-모빌리티에서 중요한 역할을 할 것 같습니다. 혁신적인 반사 안료 덕분입니다.</p>
+                        <NuxtLink to="/stories/design/cool-innovation">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</template>

app/pages/stories/design/the-four-rings-new-luminous-gaze.vue

@@ -0,0 +1,124 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="title--section">
+                <h2>4개 링으로 구성된 브랜드의 새롭고 빛나는 시선</h2>
+                <h3>디자이너 루카스 리트바게(Lukas Rittwage)는 4개의 링을 기반으로 새로운 브랜드 아이코닉 헤드라이트인 아우디 아이를 만들었습니다.</h3>
+                <p class="desc">Copy: Bernd Zerelles - Photo: Dirk Bruniecki<br /><br />표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design4--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p class="desc">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--60 mb--60">
+                <p>루카스 리트바게가 자신이 디자인한 아우디 아이에 대해 이야기할 때 그의 목소리는 깊은 내적 만족감으로 가득 차 있었습니다. 물론 상당한 자부심도 가득했습니다. 그는 “중앙에 있는 눈동자는 자동차에 시선을 집중하게 합니다.”라고 말하고 생각을 음미하는 듯 잠시 멈추고 숨을 들이마셨습니다. “아우디 아이를 바라보는 사람은 누구나 아우디의 마력에 빠지게 됩니다.”<br /><br />아우디 라이트 디자인 팀의 일원인 루카스 리트바게는 진정으로 상징적인 아우디 특징이 될 수 있는 눈 모양의 미니멀한 헤드라이트 한 쌍을 디자인하라는 과제를 받았습니다. 결과는 미래의 자동차 세대를 위한 단순하면서도 매우 매력적인 라이트 디자인 요소로 나타났습니다. 한마디로 아우디 아이였습니다. 아우디 아이는 이미 4대의 아우디 스피어 콘셉트 카를 장식하고 있습니다.</p>
+            </section>
+            <section class="img--section type2">
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/design/img--design4--detail2.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>루카스 리트바게는 2015년부터 아우디에서 디자이너로 근무했습니다. 그는 아우디 라이트 팀의 일원으로서 새로운 아우디 아이를 담당했습니다.</p>
+                    </div>
+                </div>
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/design/img--design4--detail3.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>그래픽 디자인이 아우디의 시그니처인 좁은 헤드라이트 프레임에 얼마나 들어맞는지 테스트하기 위해 팀은 신속한 프로토타입 제작으로 아우디 아이 모델을 만들었습니다.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--100 mb--100">
+                <p>그래픽 디자인이 아우디의 시그니처인 좁은 헤드라이트 프레임에 얼마나 들어맞는지 테스트하기 위해 팀은 신속한 프로토타입 제작으로 아우디 아이 모델을 만들었습니다.<br /><br />특별한 과제에는 그에 어울리는 특별한 아이디어가 필요합니다. 리트바게는 스케치부터 시작하는 대신 다른 접근 방식을 취했습니다. “맨 처음부터 디자인의 기반으로 브랜드 로고를 사용하고 싶었습니다. 아우디 링이 자동차 부문에서 가장 눈에 띄는 트레이드마크 중 하나이고, 기억하기 쉬울 뿐만 아니라 인상적인 그래픽 명확성과 파워를 자랑한다고 생각하기 때문입니다.”<br /><br />루카스가 생각하기에 아우디 로고는 기본 링 모양과 겹침으로만 구성되어 있습니다. 그렇지만 그는 그 로고를 활용할 여지를 발견했고 실험을 시작했습니다. 그 과정 중, 계속해서 이렇게 자문했습니다. 무언가를 눈처럼 보이도록 만들려면 어떻게 해야 할까? 그는 두 개의 중앙 링을 더욱 굵게 만들면 두 링이 더 깊어져 보이고 전경으로 튀어나오며 초점이 맞춰지는 것을 알아차렸습니다. 그리고 초점이 맞춰졌을 때 눈동자가 즉시 눈에 들어왔습니다. 그는 섹션을 가리고 윤곽을 미세 조정하거나 영역에 집중했습니다. “아우디 라이트 디자인의 미학은 형태, 공간, 선 측면에서 우리에게 무제한의 자유를 제공합니다. 저는 구체적으로 말하면 완전히 새로운 디자인과 스타일을 추구했습니다.” 이 점을 염두에 두고 그는 링이 교차하는 원형 부분을 두드러지게 했습니다. 그리고 바로 그때 직사각형으로 둘러싸인 둥근 영역인 아우디 아이가 나타났습니다.</p>
+            </section>
+            <BlockSwiperBanner
+                :slides="bannerSlides"
+                title=""
+                subtitle=""
+                notice=""
+                :autoplay="{ delay: 0 }"
+                :loop="false"
+                type="vertical"
+            />
+            <section class="img--section mt--100">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design4--detail9.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p class="desc">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--100">
+                <p class="">“아우디 아이에서 두 개의 링만 강조하더라도 마음의 눈에는 4개의 링을 모두 유지하는 것이 중요하다고 느꼈습니다.”라고 리트바게는 말합니다. 다시 말해서 눈이 램프에 장착되면 눈동자는 아우디 아이의 중앙에 위치하지만 헤드라이트의 전체 범위는 아우디 로고의 길이와 일치합니다. 결과적으로, 두 개의 바깥쪽 영역은 추가 주간 주행등은 물론 Coming Home/Leaving Home 기능을 위한 공간을 제공합니다.<br /><br />리트바게의 접근 방식을 성공으로 이끈 요인은 그가 평행 램프의 기본 원형 형태를 결합함으로써 일석이조의 효과를 발휘했다는 점입니다. 먼저, 추가적으로 한 마무리 작업에 대해 말하면 유연한 생각으로 정밀하게 개념화된 스타일을 개발하는 과정에서 오목한 부분, 다양한 몰딩, 특별한 디테일을 사용하여 스포티한 차량에 컴팩트 클래스 자동차와는 확연히 다른 분위기를 줄 수 있었습니다. 두 개의 아우디 링 사이의 교차점이 수평면에서 더 높게 위치하면 눈이 더 둥글고 더 편안해 보입니다. 그는 링의 곡선을 평평하게 펴거나 교차점을 좀 더 비스듬히 설정하여 더욱 집중된 모습을 연출했습니다. 때로는 눈동자가 약간 더 크고, 때로는 약간 더 작습니다. 둘째, 아우디 아이는 멀리서도 아우디 자동차의 독특한 존재감을 분명히 드러냅니다. 루카스 리트바게는 이를 간단명료하게 말합니다. “이 모든 요소를 통해 대칭적인 헤드라이트의 모습이 싱글 프레임 그릴 및 차량의 비율과 결합되어 생기는 표현 또는 표정이 만들어집니다. 우리는 항상 라이트 디자인을 사용하여 차량의 특성을 눈에 띄게 만들고 차량에 표정을 부여합니다.”</p>
+            </section>
+            <section class="img--section type2 mt--100">
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/design/img--design4--detail10.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>각 모델의 아우디 아이에는 디자인과 조화를 이루는 독특한 변환이 필요합니다. 각 경우에 루카스 리트바게는 자동차의 특성을 반영하도록 아이코닉 헤드라이트를 조정합니다.</p>
+                        <p class="desc mt--10">
+                            표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.
+                        </p>
+                    </div>
+                </div>
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/design/img--design4--detail11.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>루카스 리트바게는 독일 데사우의 바우하우스에서 멀지 않은 곳에서 태어나고 자랐습니다. 이전에 미술, 디자인, 건축을 교육했던 이 학교는 모더니즘 디자인의 상징적인 작품으로 여겨집니다.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--100 mb--100">
+                <p>리트바게는 작별 인사로 활짝 웃으며 일화를 하나 말합니다. “저에게 아우디는 항상 바우하우스의 기조를 디자인으로 가장 잘 구현한 자동차 브랜드였습니다. 간결하면서 명확한 미학을 드러내는 디자인 표현 양식이라는 측면에서요. 우리가 디자인 책임자인 마크 리히테(Marc Lichte)에게 아우디 아이 개념을 제시했을 때 그는 ‘이건 바로 우리 브랜드를 정의하는 아우디의 논리이자 바우하우스 접근 방식이네요.’라고 말했습니다. 저에게는 최종적인 검증인 셈이였습니다. 정말 놀라운 순간이었고 매우 감동적이었죠. 제가 데사우에서 바우하우스 건물이 보이는 곳에서 태어나서 자랐기 때문이죠.” 다시 한번 그가 깊은 내적 만족감에 젖는 것을 봤습니다.</p>
+            </section>
+            <BlockInterestedDesign />
+        </div>
+    </main>
+</template>
+<script setup>
+const bannerSlides = ref([
+    {
+        image: "/img/stories/design/img--design4--detail4.jpg",
+        alt: "",
+        title: "",
+        subtitle:
+            "첫 번째 단계는 가운데 두 개의 아우디 링을 강조하는 것입니다. ",
+    },
+    {
+        image: "/img/stories/design/img--design4--detail5.jpg",
+        alt: "",
+        title: "",
+        subtitle: "다음으로, 영역의 형태를 갖추고 영역을 다양한 수준으로 강조합니다. "
+    },
+    {
+        image: "/img/stories/design/img--design4--detail6.jpg",
+        alt: "",
+        title: "",
+        subtitle: "가운데 두 개의 아우디 링이 중앙을 형성하고, 눈동자를 강조하는 영역이 측면에 있습니다. "
+    },
+    {
+        image: "/img/stories/design/img--design4--detail7.jpg",
+        alt: "",
+        title: "",
+        subtitle: "디자인은 기본 모양에서 힌트를 얻었습니다."
+    },
+    {
+        image: "/img/stories/design/img--design4--detail8.jpg",
+        alt: "",
+        title: "",
+        subtitle: "마무리 작업은 차량의 특성에 가장 적합한 비율을 결정하는 것입니다. ",
+        smalldesc: "표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다."
+    }
+]);
+</script>

app/pages/stories/design/the-new-audi-rings.vue

@@ -0,0 +1,93 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="title--section">
+                <h2>새로워진 아우디의 링</h2>
+                <h3>아우디는 Vorsprung durch Technik - 기술을 통한 진보 - 를 브랜드의 핵심 가치로 삼고 있으며, 혁신적인 모빌리티와 진보적인 디자인을 지향합니다. 최근 출시된 아우디 모델들은 이러한 브랜드 철학을 드러내는 새로운 디자인 요소들과 함께, 재해석된 아우디 링을 선보였습니다. 이번 변화에는 어떤 의미가 담겨 있을까요?</h3>
+                <p class="desc">읽기 시간: 5분 - Copy: Bernd Zerelles - Photos: AUDI AG, Robert Fischer - 2023. 05. 14.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design2--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>새롭게 디자인된 아우디 링은 브랜드의 새로운 CI가 지향하는 ‘명료함’을 반영한 2D 형태로 재구성되었습니다. 기존의 크롬 대신 흑백 대비를 강조한 디자인으로 더욱 선명한 이미지를 주며, 선명한 흰색 링은 고광택 블랙 베이스 위에 떠 있는 듯한 형태로 표현되어 입체감을 줍니다. 이처럼 밝아진 로고는 평면적이면서도 프리미엄한 인상을 주며, 정교한 디테일 덕분에 여전히 입체적인 느낌도 유지합니다.</p>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--60 mb--60">
+                <p>아우디 고객들은 브랜드의 진보적인 디자인과 세심한 디테일을 중요하게 생각합니다. 이는 새로운 링 디자인에서도 그대로 드러납니다. 이번 리디자인을 총괄한 아우디 디자이너 안드레 게오르기(André Georgi)는 이렇게 말합니다:<br>“강력한 브랜드는 제품 자체의 본질과 절제된 상징 요소로 고객과 소통합니다. 아우디는 언제나 이러한 원칙을 지켜왔고, 이번에는 이를 더욱 일관되게 구현한 것입니다. 우리의 철학은 명확합니다: 모든 디테일에는 반드시 의미가 담겨 있고, 기능을 가져야 합니다.”<br><br>차량 전면과 후면에 위치한 네 개의 링은 단번에 ‘이 차는 아우디다’라는 메시지를 전달합니다. 기존의 3D에서2D로 새롭게 적용된 링에 대해 게오르기는 이렇게 덧붙입니다: “새로워진 이 아우디 링은 전과 거의 동일한 기하학적인 형태를 유지하면서도, 훨씬 더 현대적이고 그래픽적인 감각을 전달합니다.”</p>
+            </section>
+            <section class="title--section">
+                <h2>“2D로 전환된 링은 훨씬 더 현대적이고 그래픽적인 감각을 전달합니다.”</h2>
+                <p class="desc">André Georgi</p>
+            </section>
+            <section class="img--section type3">
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/design/img--design2--detail2.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>안드레 게오르기는 아우디에서 20년 넘게 디자이너로 활동해왔습니다. 초기에는 익스테리어 디자인 부서에서 헤드라이트와 리어 라이트 디자인을 담당했으며, 2017년부터는 인테리어 및 인터페이스 디자인에 주력하고 있습니다. 최근에는 아우디 엠블럼의 리디자인 작업을 총괄했습니다.</p>
+                    </div>
+                </div>
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/design/img--design2--detail3.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>차량 후면의 네 개의 링은 아우디를 아우디답게 만들어줍니다. 디자인만 봐도 아우디라는 것을 단번에 알 수 있죠. 새롭게 바뀐 2D 스타일의 링은 훨씬 더 현대적이고 그래픽적인 감각을 전달합니다.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--100">
+                <p class="">이번 변화는 일시적인 트렌드를 따른 결정이 아닙니다. 2D 형태의 링은 이미 2016년부터 디지털 환경에서 사용되어 왔습니다. 아우디 브랜드 전략가 프레데릭 칼리쉬(Frederik Kalisch)는 이렇게 말합니다: “우리는 언제나 각 매체에 가장 적합한 방식으로 링을 표현하고자 했지만, 2D환경에서3D 형태를 유지하는 것은 기술적, 심미적인 한계가 있었죠.  따라서, 디지털 환경에서는 3D 형태로 나타내지 않았죠. 하지만, 아우디는 브랜드 일관성을 유지하기 위해 차량의 링 디자인을 재설계하는 과정을 디자인팀과 협력해 시작했습니다.<br /><br />이번 리디자인의 핵심은, 2D 환경에서도 탁월한 시각적 효과를 낼 수 있다는 점입니다. 이에 따라 아우디 디자이너들은 디지털 환경에서 사용된 CI 를 실제 차량 디자인으로 확장시키는데 집중했습니다. 앞으로는 매거진, 스마트폰, 광고판, 그리고 차량 실물에 이르기까지- 아우디의 네 개의 링은 어디에서 보더라도 동일한 모습으로 일관되게 보여지는 것이 그 핵심입니다.</p>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design2--detail4.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p>고객은 여기 보이는 아우디 Q6 e-tron처럼 블랙 컬러의 링을 선택할 수도 있습니다. 이 블랙 버전은 기존의 화이트를 대체해, 하이글로스 블랙처럼 보이는 다크 그레이 컬러로 완성됩니다.</p>
+                </div>
+            </section>
+            <section class="title--section mt--100">
+                <h2>“브랜드 일관성을 위해 차량용 링 디자인도 새롭게 바뀌었습니다.”</h2>
+                <p class="desc">프레데릭 칼리쉬</p>
+            </section>
+            <section class="desc--section mid--type">
+                <p>새롭게 적용된 2D 아우디 링의 디자인 특징은 다음과 같습니다: 크롬을 배제한 흑백 컬러 구성, 고광택 블랙 바디 위에 떠 있는 듯한 순백의 링, 그리고 차량의 외장 색상이나 그릴 디자인과 관계 없이 항상 프리미엄한 이미지를 유지할 수 있도록 설계된 얇은 블랙 테두리까지. 고객은 기존처럼 블랙 컬러의 아우디 링을 선택할 수도 있으며, 이 경우 흰색 대신 다크 그레이가 적용되어 고광택 블랙과 유사한 느낌을 줍니다.</p>
+            </section>
+            <section class="img--section type3">
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/design/img--design2--detail5.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>프레데릭 칼리쉬는 산업디자인을 전공하고 디자인 전략을 연구한 후, 2011년부터 아우디에서 브랜드 전략을 담당하고 있습니다.</p>
+                    </div>
+                </div>
+                <div class="img--box">
+                    <div class="img--wrap">
+                        <img src="/img/stories/design/img--design2--detail6.jpg" alt="">
+                    </div>
+                    <div class="desc--wrap">
+                        <p>차량 모델명, 세부 사양 및 기술 정보는 이제 차량의 B필러에 레이저로 각인되어, 승객이 차량에 탑승하거나 하차할 때 자연스럽게 시야에 들어오도록 배치되었습니다. 향후, 모든 아우디 차량에서는 ‘Audi Type’ 이라는 아우디 고유 서체만 사용될 예정입니다.</p>
+                    </div>
+                </div>
+            </section>
+            <section class="desc--section mid--type mt--100">
+                <p class="">이번 링 다지안과 함께 차량 식별 방식도 전 모델에 걸쳐 표준화되었습니다. 차량의 모델명, 파생 모델명 및 기술 사양은 모두 동일한 디자인의 B필러에 적용되며, 항상 고광택 블랙 컬러의 두 부분으로 구성됩니다. 게오르기가 설명하길 “B필러에 각인된 문구는 의도적으로 톤온톤으로 각인되었습니다. 기본적인 색상은 더욱 절제된 톤으로 처리되었지만, 고급스러움과 독창성은 그대로 유지했습니다. 차량 식별 요소는 이제 더욱 프리미엄해졌으며, 차량 내외부에서 사용하는 서체 또한 통일되었습니다. 향후, 모든 아우디 차량에서는 ‘Audi Type’ 이라는 아우디 고유 서체만 사용될 예정입니다.  이제 차량 식별 요소와 디자인은 하나의 통합된 요소로 작동하며, 그 자체로 아우디 브랜드를 말합니다.”</p>
+            </section>
+            <section class="img--desc--section mt--60 mb--200">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design2--detail7.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <h3>Audi Q6 e-tron</h3>
+                    <p>아우디 Q6 e-tron은 프리미엄 중형 SUV로, 이상적인 비율과 역동적인 실루엣을 갖추고 있습니다. 긴 휠베이스와 짧은 오버행이 만들어내는 구조는 Q모델 특유의 강렬하고 힘 있는 외관을 완성합니다. SUV다운 존재감과 함께, 부드러운 곡선과 날렵한 라인이 조화를 이루며, 차량이 멈춰있을 때조차도 빛과 그림자가 살아 움직이는 듯한 시각적 리듬을 만들어냅니다.</p>
+                    <p class="mt--50 desc">Power consumption (combined): 19.6-17.0 kWh/100 km; CO₂ emissions (combined): 0 g/km; CO₂ emission class: A</p>
+                </div>
+            </section>
+        </div>
+    </main>
+</template>

app/pages/stories/future/index.vue

@@ -0,0 +1,81 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <div class="title--wrap">
+                <h2 class="">Future</h2>
+                <p>아우디는 놀라운 미래를 위한 혁신적인 비전과 콘셉을 만들어가고 있습니다. 이는 브랜드 콘셉트 차량에서 가장 잘 드러납니다. 이 이야기를 통해 미래의 삶에 조금 더 가까이 다가갑니다.</p>
+            </div>
+            <div class="content--wrap">
+                <div class="ls--card--wrap">
+                    <div class="ls--card reverse">
+                        <div class="ls--txt--wrap">
+                            <h2>아우디의 콘셉트 카</h2>
+                            <p>아우디는 항상 모빌리티의 미래에 대한 질문을 던지고 있습니다. 그리고 기술적 가능성, 선구적인 혁신, 흥미로운 디자인을 계속 드러내는 매력적인 콘셉트 카를 선보이며 질문에 대한 답을 제시합니다.</p>
+                            <NuxtLink to="/stories/future/sphere-conceptcars/" class="btn--border--gray big--btn">자세히 보기</NuxtLink>
+                            <p class="desc">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                        </div>
+                        <div class="ls--img--wrap">
+                            <img src="/img/stories/future/img--future1.jpg" alt="">
+                        </div>
+                    </div>
+                </div>
+                <div class="tech--card--wrap mt--80">
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/future/img--future2.jpg" alt="퍼스트 클래스석 경험">
+                        </div>
+                        <h3>퍼스트 클래스석 경험</h3>
+                        <p>디자이너 라파엘 팔켄부르거(Rafael Falkenburger)는 아우디 어반스피어 콘셉트(Audi urbansphere concept)¹의 독창적인 시트 기능을 소개하며, 새로운 인테리어 콘셉트에서 퍼스트 클래스 수준의 편안함을 제공한다고 설명합니다.</p>
+                        <NuxtLink to="/stories/future/first-class-seats">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">해당 차량은 양산차가 아닌 콘셉트 차량입니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/future/img--future3.jpg" alt="이동 중에 휴식을 취할 수 있는 프로그램">
+                        </div>
+                        <h3>이동 중에 휴식을 취할 수 있는 프로그램</h3>
+                        <p>아우디 어반스피어 콘셉트 카의 '헬스 유스 케이스'는 자동차를 평화로운 안식처로 전환하는 휴식 프로그램입니다.</p>
+                        <NuxtLink to="/stories/future/welcome-to-me-time-on-the-move">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/future/img--future4.jpg" alt="디자인 전략">
+                        </div>
+                        <h3>디자인 전략</h3>
+                        <p>아우디 디자인은 미래를 향해 어떻게 발전하고 있나요? 미래를 향한 발전을 어떻게 정의하시겠어요? 이와 관련하여 아우디 디자인의 디자인 전략 책임자인 클라우스 포트호프(Claus Potthoff)와 이야기를 나눴습니다.</p>
+                        <NuxtLink to="/stories/future/the-strategy-of-design">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/future/img--future5.jpg" alt="아우디 그랜드스피어 콘셉트 카">
+                        </div>
+                        <h3>아우디 그랜드스피어 콘셉트 카: 최상의 경험을 즐길 수 있는 아우디 그랜드스피어 콘셉트 카</h3>
+                        <p>아우디 브랜드는 아우디 그랜드스피어 콘셉트 카를 통해 새로운 경험을 선사하는 인테리어를 비롯하여 최고급 이동 및 여행의 진보적인 럭셔리 개념에 대한 비전을 밝힙니다.</p>
+                        <NuxtLink to="/stories/future/audi-grandsphere-concept-first-class-interior-experience">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/future/img--future6.jpg" alt="아우디 액티브스피어 콘셉트 카">
+                        </div>
+                        <h3>아우디 액티브스피어 콘셉트 카: 활동적인 라이프스타일의 동반자</h3>
+                        <p>스포티하고 열정적이며 품격 있음: 아우디의 네 번째 스피어 콘셉트 카는 콰트로 기술과 혁신적인 작동 개념이 적용된 컨버터블 크로스오버 쿠페입니다.</p>
+                        <NuxtLink to="/stories/future/audi-activesphere-concept-you-active-lifestyle-companion">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                    <div class="tech--card">
+                        <div class="img--wrap">
+                            <img src="/img/stories/future/img--future7.jpg" alt="마치 마법처럼">
+                        </div>
+                        <h3>마치 마법처럼</h3>
+                        <p>미니멀한 인테리어 디자인, 첨단 안경, 사용자를 향해 움직이는 제어 요소, 이것이 바로 아우디 액티브스피어 콘셉트 카를 위한 새로운 혼합 현실 기반의 작동 개념인 아우디 디멘션(Audi dimensions)입니다.</p>
+                        <NuxtLink to="/stories/future/almost-like-magic">자세히 알아보기 <i class="ico"></i></NuxtLink>
+                        <p class="type2">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</template>

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

@@ -0,0 +1,56 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="img--section none--bdrs">
+                <div class="img--wrap">
+                    <img src="/img/stories/design/img--design8--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p class="">금속, 세라믹 또는 진주 입자와 함께 안료는 우리가 표면을 인식하는 방식에 영향을 미칠 뿐만 아니라 기능적 이점도 제공할 수 있습니다.</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>
+            <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>
+            </section>
+            <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>
+            </section>
+            <BlockInterestedDesign />
+        </div>
+    </main>
+</template>

app/pages/stories/future/sphere-conceptcars/index.vue

@@ -0,0 +1,72 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <section class="img--section none--bdrs">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future1--detail1.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <p class="desc pl--30">표시된 차량은 양산 차량으로 사용할 수 없는 콘셉트 카입니다.</p>
+                </div>
+            </section>
+            <section class="title--section">
+                <h2 class="big--title">아우디의 콘셉트 카</h2>
+                <p>아우디는 항상 모빌리티의 미래에 대한 질문을 던지고 있습니다. 그리고 기술적 가능성, 선구적인 혁신, 흥미로운 디자인을 계속 드러내는 매력적인 콘셉트 카를 선보이며 질문에 대한 답을 제시합니다.</p>
+            </section>
+            <section class="img--desc--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future1--detail2.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <h3>아우디 액티브스피어 콘셉트 카</h3>
+                    <p>고품격 아웃도어 활동을 위해 콰트로 성능을 재정의한 아우디 액티브스피어 콘셉트 카는 아우디의 역사를 아우디의 미래로 전환합니다. 우아함, 실용성 및 기능의 공생이 조화를 이룬 최신 연구 결과물은 완벽한 라이프스타일 동반자가 되었습니다.</p>
+                    <NuxtLink to="/stories/future/sphere-conceptcars/activesphere-concept/" class="btn--gray mt--24">
+                        자세히 보기
+                    </NuxtLink>
+                </div>
+            </section>
+            <section class="img--section">
+                <div class="img--wrap">
+                    <video  controls autoplay muted loop playsinline src="/img/stories/future/img--future1--detail3.mp4"></video>
+                </div>
+            </section>
+            <section class="img--desc--section reverse">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future1--detail4.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <h3>아우디 어반스피어 콘셉트 카</h3>
+                    <p>혼잡한 도심 속에서 안식처가 되어줄 자율 주행 아우디 어반스피어 콘셉트 카는 바퀴 달린 라운지일 뿐만 아니라 지금까지 스피어 제품군 중 가장 큰 콘셉트 카이기도 합니다. 첨단 기술과 넉넉한 실내 공간으로 최고급 안락함을 선사합니다.</p>
+                    <NuxtLink to="/stories/future/sphere-conceptcars/urbansphere-concept/" class="btn--gray mt--24">
+                        자세히 보기
+                    </NuxtLink>
+                </div>
+            </section>
+            <section class="img--desc--section">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future1--detail5.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <h3>아우디 그랜드스피어 콘셉트 카</h3>
+                    <p>두 번째 스피어 콘셉트 카는 아우디가 해석한 미래의 프리미엄 모빌리티를 엿볼 수 있는 모델입니다. 완전히 새롭게 재해석된 실내 인테리어는 퍼스트 클래스 라운지와 같은 느낌의 충분한 체험 공간을 제공합니다.</p>
+                    <NuxtLink to="/stories/future/sphere-conceptcars/grandsphere-concept/" class="btn--gray mt--24">
+                        자세히 보기
+                    </NuxtLink>
+                </div>
+            </section>
+            <section class="img--desc--section reverse">
+                <div class="img--wrap">
+                    <img src="/img/stories/future/img--future1--detail6.jpg" alt="">
+                </div>
+                <div class="desc--wrap">
+                    <h3>아우디 스카이스피어 콘셉트 카</h3>
+                    <p>스카이스피어 콘셉트 카는 아우디가 프리미엄 모빌리티의 미래를 어떻게 적극적으로 만들어가고 있는지를 보여주는 시리즈 중 첫 번째 사례로서, 기술과 디자인을 융합하여 완전히 새로운 경험의 세계로 안내합니다.</p>
+                    <NuxtLink to="/stories/future/sphere-conceptcars/skysphere-concept/" class="btn--gray mt--24">
+                        자세히 보기
+                    </NuxtLink>
+                </div>
+            </section>
+            <BlockInterestedFuture />
+        </div>
+    </main>
+</template>

app/pages/stories/lifestyle/index.vue

@@ -0,0 +1,25 @@
+<template>
+    <main>
+        <div class="detail--container">
+            <div class="title--wrap">
+                <h2 class="">Lifestyle</h2>
+                <p>영감은 창의력을 불러일으킵니다. 한계에 의문을 제기하고 새로운 것에 도전하고 그것을 현실로 만들 때 놀라운 일이 일어납니다. 스포츠, 예술, 음악 분야에서 사람들을 움직이는 원동력이 무엇인지 알아보세요.</p>
+            </div>
+            <div class="content--wrap">
+                <div class="ls--card--wrap">
+                    <div class="ls--card">
+                        <div class="ls--img--wrap">
+                            <img src="/img/stories/lifestyle/img--lifestyle1.jpg" alt="">
+                        </div>
+                        <div class="ls--txt--wrap">
+                            <h3>아우디 x 그레이 맨: 새로운 관점</h3>
+                            <p>그레이 맨에서 제작자의 목표는 스파이 스릴러 쟝르를 새롭게 그리는 것이었습니다. 아우디는 순수 전기 구동의 두 가지 e-트론 모델로 액션을 강화합니다. 제작 비하인드 스토리를 살펴보겠습니다.</p>
+                            <NuxtLink to="/stories/lifestyle/audi-x-the-gray-man-new-perspectives/" class="btn--border--gray big--btn">자세히 알아보기</NuxtLink>
+                            <p class="desc">NEDC가 아닌 WLTP에 따른 사용 및 배출 값만 차량에 사용할 수 있습니다.</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+</template>

app/pages/stories/technology/index.vue

@@ -2,7 +2,7 @@
     <main>
         <div class="detail--container">
             <div class="title--wrap">
-                <h2 class="en">Technology</h2>
+                <h2 class="">Technology</h2>
                 <p>기술을 통한 진보. 진보적인 기술과 열정적인 창의성이 현재를 위한 매력적인 차량과 솔루션을 만들어냅니다. 혁신이 성공의 핵심인 이유를 발견해보세요.</p>
             </div>
             <div class="content--wrap">