헤더/푸터 반응형 완료, 퀵메뉴 반응형 작업중

app/app.vue

@@ -4,6 +4,7 @@
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
+    <quickMenu v-if="!isAdminPage" />
     <Footer v-if="!isAdminPage" />
   </UApp>
 </template>

app/assets/scss/admin.scss

@@ -3521,6 +3521,7 @@ header{
   }
   .header--search--wrap{
       margin-left: auto;
+      display: flex;
       .search--btn{
           border-radius: 50%;
           padding: 0;
@@ -3578,10 +3579,9 @@ footer{
       width:100%;
       >ul{        
         display: block;
-        list-style: none;        
-        margin: 0 0 var(--one-footer-space-xxl) calc(-1 * var(--one-footer-side-spacing));
+        list-style: none;
         padding: 0px;
-        width: calc(100% + 2 * var(--one-footer-side-spacing));
+        width: 100%;
 
         @media (min-width: 768px) {          
           display: flex;
@@ -3595,29 +3595,40 @@ footer{
           margin-bottom: -1px;
           
 
+          
+          >ul{
+            >li{
+              &:first-child{
+                padding-top: 12px;
+              }
+              padding: 0 20px var(--one-footer-space-s);
+            }
+          }
           @media (min-width: 768px) {
-            margin: 0px 24px 40px 0px;            
-            width: calc(33% - var(--one-footer-space-xl) * 2 / 3); 
+            //margin: 0px 24px 40px 0px;            
+            width: calc(33.333%);
             
 
             &:first-of-type {
               margin-top: 0px;
             }
-          }
 
-          >ul{
-            >li{
-              padding: 0 var(--one-footer-side-spacing);
-              @media (min-width: 768px) {
-                padding: 0 0 var(--one-footer-space-s);
+            >h2{
+              border: none!important;
+            }
+
+            >ul{
+              >li{
+                padding-left: 0;
+                padding-right: 0;
               }
             }
           }
         
         
           @media (min-width: 1440px) {            
-            margin: 0px 24px 0px 0px;
-            width: calc(20% - var(--one-footer-space-xl) * 4 / 5);            
+            padding: 0px 24px 0px 0px;
+            width: 20%;
           }
           
           >h2{
@@ -3626,24 +3637,24 @@ footer{
             flex-flow: row;
             -webkit-box-pack: justify;
             justify-content: space-between;
-            padding: var(--one-footer-space-m) 0;
+            padding: var(--one-footer-space-m) 20px;
             width: 100%;
-
             margin: 0px;
             color: rgb(252, 252, 253);
-            
             letter-spacing: 0px;
             font-weight: 400;
             text-decoration: none;
             font-size: 16px;
             line-height: 24px;
-            font-stretch: 130%;
-            margin-bottom: 24px;        
+            font-stretch: 130%;  
+            border-top: 1px solid hsla(216, 17%, 26%, 1);
+            border-bottom: 1px solid hsla(216, 17%, 26%, 1);
 
             
             @media (min-width: 768px) {              
               padding: 0px;
-              width: auto;              
+              width: auto;         
+              margin-bottom: 24px;     
             }
 
             

app/assets/scss/media.scss

@@ -49,6 +49,54 @@
             }
         }
     }
+    footer{
+        .footer--wrap{
+            padding: 40px 20px;
+        }
+    }
+}
+@media (max-width: 1440px) {
+    header{
+        .header--wrap{
+            padding: 20px;
+            .header--search--wrap{
+                opacity: 0;
+                transition: opacity 0.3s;
+                pointer-events: none;
+            }
+        }
+        .header--hamburger{
+            display: flex;
+            order: -1;
+            &.active{
+                &~.header--logo--wrap{
+                    opacity: 0;
+                }
+                &~.header--search--wrap{
+                    opacity: 1;
+                }
+            }
+        }
+        .header--logo--wrap{
+            position: absolute;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+        .header--menu--wrap{
+            display: none;
+        }
+        .header--submenu{
+            display: none;
+        }
+        .header--dim{
+            display: none;
+        }
+        .mobile--menu{
+            display: block;
+            .mobile--menu--main{
+            }
+        }
+    }
 }
 @media(max-width: 1024px){
     main{
@@ -256,6 +304,27 @@
             }
         }
     }
+    footer{
+        .footer--wrap{
+            padding: 70px 0 40px;
+            .scroll--to--top{
+                right: 20px;
+            }
+            .footer--info--wrap{
+                padding: 40px 20px 0;
+                .sns--wrap{
+                    justify-content: flex-start;
+                }
+                .copy--wrap{
+                    .link--list{
+                        gap: 12px;
+                    }
+                }
+            }
+        }
+    }
+    .quick__menu__wrap{
+    }
 }
 @media(max-width: 500px){
     main{

app/assets/scss/style.scss

@@ -28,6 +28,9 @@ body{
     color: rgb(252, 252, 253);
     font-family: 'AudiType';
     font-weight: 400;
+    &:has(.mobile--menu.active){
+        overflow: hidden;
+    }
 }
 
 .ellipsis1 {
@@ -68,6 +71,257 @@ button{
     cursor: pointer;
 }
 
+// Header Styles
+header{
+    position: relative;
+    z-index: 1000;
+
+    .header--wrap{
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 20px 40px;
+        position: relative;
+        z-index: 1002;
+        .header--logo--wrap{
+            transition: opacity 0.3s;
+        }
+    }
+
+    // 햄버거 버튼 (기본 숨김)
+    .header--hamburger{
+        display: none;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        background: none;
+        border: none;
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        z-index: 1000;
+        position: relative;
+
+        span{
+            position: absolute;
+            width: 18px;
+            height: 2px;
+            background-color: rgb(252, 252, 253);
+            transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+
+            &:nth-child(1){
+                top: 12px;
+            }
+            &:nth-child(2){
+                top: 50%;
+                transform: translateY(-50%);
+            }
+            &:nth-child(3){
+                bottom: 12px;
+            }
+        }
+        &::after{
+            content: 'Menu';
+            position: absolute;
+            color: #fcfcfd;
+            font-size: 14px;
+            left: calc(100% + 12px);
+        }
+
+        // 메뉴 열렸을 때 X 모양으로 변환
+        &.active{
+            span{
+                &:nth-child(1){
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                }
+                &:nth-child(2){
+                    opacity: 0;
+                    transform: translateY(-50%) scale(0);
+                }
+                &:nth-child(3){
+                    bottom: 50%;
+                    transform: translateY(50%) rotate(-45deg);
+                }
+            }
+        }
+    }
+
+    .header--menu--wrap{
+        display: flex;
+        gap: 32px;
+        >a{
+            cursor: pointer;
+            font-size: 16px;
+            color: rgb(252, 252, 253);
+            transition: opacity 0.3s ease;
+            &:hover{
+                opacity: 0.7;
+            }
+        }
+    }
+
+    // Dim Layer
+    .header--dim{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100vh;
+        background-color: hsla(216, 26%, 1%, 1);
+        opacity: 0;
+        visibility: hidden;
+        transition: opacity 0.3s ease, visibility 0.3s ease;
+        z-index: 999;
+        &.active{
+            opacity: 0.65;
+            visibility: visible;
+        }
+    }
+
+    // Submenu Navigation
+    .header--submenu{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        max-height: 1000px;
+        background-color: #020203;
+        transform: translateY(-100%);
+        transition: transform 0.3s ease;
+        z-index: 1001;
+        padding-top: 80px;
+        &.active{
+            transform: translateY(0);
+        }
+
+        .submenu--content{
+            max-width: 1920px;
+            margin: 0 auto;
+            padding: 40px 96px 40px 205px;
+        }
+
+        .submenu--list{
+            display: flex;
+            flex-wrap: wrap;
+            row-gap: 24px;
+            >a{
+                font-size: 14px;
+                color: #fcfcfdb2;
+                transition: opacity 0.3s ease;
+                width: 34%;
+                &:hover{
+                    opacity: 0.7;
+                }
+            }
+        }
+    }
+
+    // 모바일 메뉴
+    .mobile--menu{
+        position: fixed;
+        top: 0px;
+        left: 0;
+        width: 100%;
+        height: calc(100vh - 72px);
+        background-color: #020203;
+        transform: translateY(-100%);
+        transition: transform 0.4s ease;
+        z-index: 999;
+        overflow: hidden;
+        display: none;
+        &.active{
+            transform: translateY(0);
+            top: 72px;
+        }
+
+        .mobile--menu--header{
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            margin: 0 20px;
+            padding: 28px 0 16px;
+            border-bottom: 1px solid rgb(204, 204, 204);
+            .back--btn{
+                cursor: pointer;
+                width: 24px;
+                height: 24px;
+                background-image: url(/img/ico--arrow.svg);
+                transform: rotate(180deg);
+                &~span{
+                    margin-left: 12px;
+                    font-size: 14px;
+                    color: #fcfcfdb2;
+                }
+            }
+        }
+
+        .mobile--menu--main{
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #020203;
+            transition: transform 0.4s ease;
+            &.hidden{
+                transform: translateX(-100%);
+            }
+
+            .mobile--menu--list{
+                display: flex;
+                flex-direction: column;
+                padding: 28px 20px;
+                gap: 24px;
+                >a{
+                    font-size: 14px;
+                    cursor: pointer;
+                    display: flex;
+                    justify-content: space-between;
+                    color: #fcfcfdb2;
+                    transition: all 0.3s ease;
+                    &:hover{
+                        color: rgb(252, 252, 253);
+                    }
+                    .ico{
+                        width: 24px;
+                        height: 24px;
+                        background-image: url(/img/ico--arrow.svg);
+                    }
+                }
+            }
+        }
+
+        .mobile--menu--sub{
+            position: absolute;
+            top: 0;
+            right: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #020203;
+            transform: translateX(100%);
+            transition: transform 0.4s ease;
+            &.active{
+                transform: translateX(0);
+            }
+
+            .mobile--submenu--list{
+                display: flex;
+                flex-direction: column;
+                padding: 28px 20px;
+                gap: 24px;
+                >a{
+                    font-size: 14px;
+                    color: #fcfcfdb2;
+                    transition: all 0.3s ease;
+                    &:hover{
+                        color: #fcfcfd;
+                    }
+                }
+            }
+        }
+    }
+}
 
 main{
     .visual--section{
@@ -723,7 +977,41 @@ main{
     }
 }
 
+
 footer{
+    position: relative;
+    .footer--wrap{
+        position: relative;
+        .scroll--to--top{
+            position: absolute;
+            top: 24px;
+            right: 96px;
+            display: flex;
+            font-size: 14px;
+            color: #fcfcfd;
+            gap: 12px;
+            .ico{
+                width: 24px;
+                height: 24px;
+                transform: rotate(270deg);
+                background-image: url(/img/ico--arrow.svg);
+            }
+        }
+        .footer--site--map{
+            >ul{
+                >li{
+                    >ul{
+                        >li{
+                            >a{
+                                font-size: 14px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+
     .footer--info--wrap{
         .sns--wrap{
             display: flex;
@@ -748,18 +1036,35 @@ footer{
                 background: rgb(24, 29, 37);
                 color: rgb(252, 252, 253);
                 border: 1px solid rgb(44, 52, 63);
+                background-repeat: no-repeat;
+                background-position: center;
+                &.fb{
+                    background-image: url(/img/ico--fb.svg);
+                }
+                &.ins{
+                    background-image: url(/img/ico--ins.svg);
+                }
             }
         }
         .copy--wrap{
             border-top: 2px solid rgba(252,252,253,0.2);
             font-size: 14px;
             color: #fcfcfdb2;
+            padding-bottom: 80px;
             .link--list{
                 display: flex;
                 flex-wrap: wrap;
+                margin-top: 16px;
+                gap: 24px;
                 >li{
                     >a{
-
+                        font-size: 14px;
+                        display: inline-block;
+                        color: rgb(252, 252, 253);
+                        transition: all 0.3s;
+                        &:hover{
+                            opacity: 0.7;
+                        }
                     }
                 }
             }
@@ -768,6 +1073,42 @@ footer{
             }
         }
     }
+
+    @media (max-width: 768px) {
+        .footer--wrap{
+            .footer--site--map{
+                >ul{
+                    >li{
+                        >h2{
+                            cursor: pointer;
+                            user-select: none;
+                            position: relative;
+                            padding-right: 20px;
+                            &::after{
+                                content: '';
+                                position: absolute;
+                                right: 20px;
+                                font-size: 12px;
+                                background-image: url(/img/ico--arrow.svg);
+                                width: 24px;
+                                height: 24px;
+                                transform: rotate(90deg);
+                                transition: transform 0.3s ease;
+                            }
+                        }
+                        >ul{
+                            max-height: 0;
+                            overflow: hidden;
+                            transition: max-height 0.3s ease;
+                            &.active{
+                                max-height: 1000px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
 
 .more--btn{
@@ -895,7 +1236,7 @@ footer{
                 .swiper-button-next{
                     width: 40px;
                     height: 40px;
-                    background-image: url(../img/ico--arrow.svg);
+                    background-image: url(/img/ico--arrow.svg);
                     background-size: 100%;
                     background-color: rgba(0, 0, 0, 0.6);
                     right: 0;
@@ -904,7 +1245,7 @@ footer{
                     }
                 }
                 .swiper-button-prev{
-                    background-image: url(../img/ico--arrow.svg);
+                    background-image: url(/img/ico--arrow.svg);
                     background-size: 100%;
                     background-color: rgba(0, 0, 0, 0.6);
                     left: 0;
@@ -927,4 +1268,138 @@ footer{
             }
         }
     }
+}
+
+// 퀵메뉴
+.quick__menu__wrap{
+    position:fixed;
+    top:50%;
+    transform: translateY(-50%);
+    right:0px;
+    z-index: 9999;
+}
+
+.quick__menu__wrap > a .thumb{
+    display: block;
+    width:50px;
+    height:50px;
+}
+.quick__menu__wrap > a{
+    position: relative;
+}
+
+.quick__menu__wrap.actv > a:hover > div{
+    background-color:#b2b2b2!important;
+    cursor: pointer;
+}
+.quick__menu__wrap.actv > a > div:nth-of-type(2){
+    left:-180px;
+    background-color: #000;
+    color:#fff;
+}
+.quick__menu__wrap > a > div:nth-of-type(1){
+    position: relative;
+    z-index: 2;
+}
+.quick__menu__wrap > a > div:nth-of-type(2){
+    position: absolute;
+    top:0;
+    white-space: nowrap;
+    left:10px;
+    font-size:14px;
+    transition: all .2s ease-in;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    width:250px;
+    height:50px;
+    z-index: 1;
+    padding-left:15px;
+    cursor: pointer;
+}
+.quick__menu__wrap .th_01{
+    background:url(/img/quick_01.png) no-repeat center;
+}
+.quick__menu__wrap .th_02{
+    background:url(/img/quick_02.png) no-repeat center;
+}
+.quick__menu__wrap .th_03{
+    background:url(/img/quick_03.png) no-repeat center;
+}
+.quick__menu__wrap .th_04{
+    background:url(/img/quick_04.png) no-repeat center;
+}
+.quick__menu__wrap .th_05{
+    background:url(/img/quick_05.png) no-repeat center;
+}
+.quick__menu__wrap .th_06{
+    background:url(/img/quick_06.png) no-repeat center;
+}
+.quick__menu__wrap .th_07{
+    background:url(/img/quick_07.png) no-repeat center;
+}
+.quick__menu__wrap .th_08{
+    background:url(/img/quick_08.png) no-repeat center;
+}
+.quick__menu__wrap .th_09{
+    background:url(/img/quick_09.png) no-repeat center;
+}
+
+.quick__menu__wrap .th_10{
+    background:url(/img/quick_10.png) no-repeat center;
+}
+
+.quick__menu__wrap .th_11{
+    background:url(/img/quick_11.png) no-repeat center;
+}
+
+@media(max-width:768px){
+    .quick__menu__wrap{
+        left:0px;
+        top:auto;
+        transform: translateY(0);
+        bottom:0px;
+        width:100%;
+        max-width:100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #000;
+        >a{
+            width: calc(100% / 9);
+            display: flex;
+            flex-direction: column;
+            >div{
+                &:nth-of-type(2){
+                    position: static;
+                    width: auto;
+                    text-align: center;
+                    height: auto;
+                }
+            }
+        }
+    }
+    .quick__menu__wrap > div{
+
+    }
+    .quick__menu__wrap > div > div:nth-of-type(2){
+        display: none!important;
+    }
+
+
+    .company__wrap .contents--wrap{
+        padding-left:15px;
+        padding-right:15px;
+        box-sizing: border-box;
+    }
+}
+
+
+@media (max-width: 460px){
+    .quick__menu__wrap{
+        overflow-x: auto;
+        box-sizing: border-box;
+        padding:0 20px!important;
+        justify-content: flex-start!important;
+    }
 }

app/components/footer.vue

@@ -1,11 +1,14 @@
 <template>
   <footer>
     <div class="footer--wrap">
+      <button class="scroll--to--top" @click="scrollToTop" aria-label="맨 위로">
+        위로 <i class="ico"></i>
+      </button>
       <div class="footer--site--map">
         <ul>
           <li>
-            <h2>Models</h2>
-            <ul>
+            <h2 @click="toggleMenu(0)">Models</h2>
+            <ul :class="{ active: activeMenu === 0 }">
               <li><NuxtLink to="/models/sedan">아우디 코리아 Sedan</NuxtLink></li>
               <li><NuxtLink to="/models/suv">아우디 코리아 SUV</NuxtLink></li>
               <li><NuxtLink to="/models/coupe">아우디 코리아 Coupe</NuxtLink></li>
@@ -16,8 +19,8 @@
             </ul>
           </li>
           <li>
-            <h2>About Audi</h2>
-            <ul>
+            <h2 @click="toggleMenu(1)">About Audi</h2>
+            <ul :class="{ active: activeMenu === 1 }">
               <li><NuxtLink to="/service/careprogram/diesel">고객안내</NuxtLink></li>
               <li>
                 <NuxtLink to="/aboutaudi/audi-brand-2023">아우디 브랜드 소개</NuxtLink>
@@ -43,8 +46,8 @@
             </ul>
           </li>
           <li>
-            <h2>About Service</h2>
-            <ul>
+            <h2 @click="toggleMenu(2)">About Service</h2>
+            <ul :class="{ active: activeMenu === 2 }">
               <li><NuxtLink to="/service">아우디 서비스</NuxtLink></li>
               <li><NuxtLink to="/service/program">서비스 프로그램</NuxtLink></li>
               <li>
@@ -87,8 +90,8 @@
             </ul>
           </li>
           <li>
-            <h2>About exclusive</h2>
-            <ul>
+            <h2 @click="toggleMenu(3)">About exclusive</h2>
+            <ul :class="{ active: activeMenu === 3 }">
               <li>
                 <NuxtLink to="/exclusive/exclusive-order">exclusive order</NuxtLink>
               </li>
@@ -98,8 +101,8 @@
             </ul>
           </li>
           <li>
-            <h2>Stories of Progress</h2>
-            <ul>
+            <h2 @click="toggleMenu(4)">Stories of Progress</h2>
+            <ul :class="{ active: activeMenu === 4 }">
               <li><NuxtLink to="/stories/technology">Technology</NuxtLink></li>
               <li><NuxtLink to="/stories/future">Future</NuxtLink></li>
               <li><NuxtLink to="/stories/design">Design</NuxtLink></li>
@@ -111,8 +114,8 @@
         </ul>
         <ul>
             <li>
-                <h2>Company</h2>
-                <ul>
+                <h2 @click="toggleMenu(5)">Company</h2>
+                <ul :class="{ active: activeMenu === 5 }">
                     <li><NuxtLink to="/company/about">About Gojin Motors</NuxtLink></li>
                     <li><NuxtLink to="/company/ceo">CEO</NuxtLink></li>
                     <li><NuxtLink to="/company/history">History</NuxtLink></li>
@@ -128,8 +131,8 @@
                 </ul>
             </li>
             <li>
-              <h2>Used Car(AAP)</h2>
-              <ul>
+              <h2 @click="toggleMenu(6)">Used Car(AAP)</h2>
+              <ul :class="{ active: activeMenu === 6 }">
                 <li><NuxtLink to="http://www.audiusedcar.co.kr/index.php" target="_blank">Used Car(AAP)</NuxtLink></li>
               </ul>
             </li>
@@ -137,12 +140,21 @@
       </div>
       <div class="footer--info--wrap">
         <div class="sns--wrap">
-          <NuxtLink to="https://www.facebook.com/audikorea.kr" target="_blank"></NuxtLink>
+          <NuxtLink class="fb" to="https://www.facebook.com/audikorea.kr" target="_blank"></NuxtLink>
+          <NuxtLink class="ins" to="https://www.instagram.com/audi_gojinmotors" target="_blank"></NuxtLink>
         </div>
         <div class="copy--wrap">
           <p>© 2025 Gojin Motors. All rights reserved</p>
           <ul class="link--list">
-            <li><NuxtLink to="">개인정보 처리방침</NuxtLink></li>
+            <li><NuxtLink to="/agree/terms">Terms of use</NuxtLink></li>
+            <li><NuxtLink to="/agree/privacy">Privacy policy</NuxtLink></li>
+            <li><NuxtLink to="https://www.audikoreaevent.co.kr/etc/component/index2.jsp" target="_blank">타이어 에너지 소비 효율 등급 정보 조회</NuxtLink></li>
+            <li><NuxtLink to="https://www.audikoreaevent.co.kr/etc/component/index3.jsp" target="_blank">스마트키 KC인증 정보조회</NuxtLink></li>
+          </ul>
+          <ul class="info--list mt--30">
+            <li>(주)고진모터스</li>
+            <li>주소: 서울특별시 강남구 청담동 92-9</li>
+            <li>전화: 02-516-2468</li>
           </ul>
           <p>본 웹사이트에서 제공되는 정보는 실제 판매 차량과 다를 수 있습니다</p>
         </div>
@@ -150,3 +162,24 @@
     </div>
   </footer>
 </template>
+
+<script setup>
+import { ref } from 'vue';
+
+const activeMenu = ref(null);
+
+const toggleMenu = (index) => {
+  if (activeMenu.value === index) {
+    activeMenu.value = null;
+  } else {
+    activeMenu.value = index;
+  }
+};
+
+const scrollToTop = () => {
+  window.scrollTo({
+    top: 0,
+    behavior: 'smooth'
+  });
+};
+</script>

app/components/quickMenu.vue

@@ -0,0 +1,64 @@
+<template>
+  <div
+    class="quick__menu__wrap"
+    :class="{ actv: isActive }"
+    @mouseenter="isActive = true"
+    @mouseleave="isActive = false"
+  >
+    <NuxtLink to="https://www.audikoreaevent.co.kr/lms/application/applyTestdrive.do?device=W&inflPathAclsCd=A18&inflPathBclsCd=B03&dealerCd=D001&selectCar=&testType=1" target="_blank">
+      <div class="thumb th_01"></div>
+      <div>시승요청</div>
+    </NuxtLink>
+
+    <!-- <NuxtLink to="/company/brochure">
+      <div class="thumb th_03"></div>
+      <div>카탈로그</div>
+    </NuxtLink> -->
+
+    <NuxtLink to="/company/showroom">
+      <div class="thumb th_04"></div>
+      <div>전시장</div>
+    </NuxtLink>
+
+    <NuxtLink to="/company/serviceCenter">
+      <div class="thumb th_05"></div>
+      <div>서비스센터</div>
+    </NuxtLink>
+
+    <NuxtLink to="https://www.audikoreaevent.co.kr/app/rsvt/applyServiceReservation.do?dealerNo=2" target="_blank">
+      <div class="thumb th_10"></div>
+      <div>서비스 예약</div>
+    </NuxtLink>
+
+    <NuxtLink to="/company/eled">
+      <div class="thumb th_06"></div>
+      <div>e-LED</div>
+    </NuxtLink>
+
+    <NuxtLink to="/service/careprogram/evbattery">
+      <div class="thumb th_11"></div>
+      <div>전기차 배터리 제조사 안내</div>
+    </NuxtLink>
+
+    <NuxtLink to="https://www.facebook.com/audikorea.kr" target="_blank">
+      <div class="thumb th_07"></div>
+      <div>페이스북</div>
+    </NuxtLink>
+
+    <NuxtLink to="https://www.instagram.com/audi_gojinmotors" target="_blank">
+      <div class="thumb th_08"></div>
+      <div>인스타그램</div>
+    </NuxtLink>
+
+    <NuxtLink to="https://www.youtube.com/@gojinmotors/featured" target="_blank">
+      <div class="thumb th_09"></div>
+      <div>유튜브</div>
+    </NuxtLink>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const isActive = ref(false);
+</script>

app/pages/agree/privacy.vue

@@ -0,0 +1,270 @@
+<template>
+  <main>
+    <div class="detail--container">
+      <div class="text--tab--layout">
+        <ul>
+          <li class="anch--location">
+            <NuxtLink to="#" class="actv">Privacy Policy</NuxtLink>
+          </li>
+        </ul>
+      </div>
+      <section class="desc--section full--type">
+        <h3 class="big--title">개인정보취급방침</h3>
+        <p>본 개인정보 취급방침은 고진모터스가 운영하는 모든 온/오프 라인 서비스를 이용하는 고객의 개인정보 보호를 위해 "고진모터스"가 취하고 있는 개인정보의 수집, 이용과 보안활동에 관한 내용입니다. "고진모터스"는 고객 개인의 사생활에 관련된 정보를 보호하고 불법적인 정보의 유출을 방지하고자 최선을 다하고 있습니다. 본 개인정보 취급 방침은 정부의 법률 및 지침 변경에 따라 변경될 수 있으므로, 수시로 확인하여 주시기 바랍니다.</p>
+        <h4 class="mt--24">
+          1. 총칙
+        </h4>
+        <p class="mt--24">
+          (1) 개인정보란 생존하는 개인에 관한 정보로서 성명ㆍ주민등록번호 등에 의하여 특정한 개인을 알아볼 수 있는 부호ㆍ문자ㆍ음성ㆍ음향 및 영상 등의 정보(해당 정보만으로는 특정 개인을 알아볼 수 없어도 다른 정보와 쉽게 결합하여 알아볼 수 있는 경우에는 그 정보를 포함한다)를 말합니다.<br /><br />
+          (2) "고진모터스"는 고객의 고객 개인정보 보호를 매우 중요시하며, "정보통신망이용촉진 및 정보보호에 관한 법률" 상의 개인정보보호규정 및 방송통신위원회가 제정한 개인정보보호지침을 준수하고 있습니다.<br /><br />
+          (3) "고진모터스"는 개인정보 취급 방침을 통하여 고객께서 제공하시는 개인정보가 어떠한 용도와 방식으로 이용되고 있으며 개인정보보호를 위해 어떠한 조치가 취해지고 있는지 알려드립니다.<br /><br />
+          (4) "고진모터스" 는 개인정보 취급방침을 서비스 제공 시 공개함으로써 고객께서 언제나 용이하게 보실 수 있도록 조치하고 있습니다.<br /><br />
+          (5) "고진모터스"의 개인정보 취급방침은 정부의 법률 및 지침 변경이나 고진모터스의 내부 방침 변경 등으로 인하여 수시로 변경될 수 있고, 이에 따른 개인정보 취급방침의 지속적 개선을 위하여 필요한 절차를 정하고 있습니다.<br /><br />
+          (6) 개인정보 취급방침을 개정하는 경우 고진모터스는 해당 변경 사항 및 개정일자 등을 부여하여 개정된 사항을 고객께서 쉽게 알아보실 수 있도록 제공하고 있습니다. 이용자들께서는 고진모터스의 공지사항을 반드시 확인하시기 바랍니다.
+        </p>
+        <h4 class="mt--24">
+          2. 개인정보의 수집 및 이용 목적
+        </h4>
+        <p class="mt--24">
+          (1) 고진모터스는 고객께서 고진모터스의 차량을 구매하거나 차량 관련 서비스를 이용하는데 있어 고객에게 각종 편의를 제공하기 위해 필요한 최소한의 정보를 필수로 수집하고 있습니다.<br /><br />
+          (2) 고진모터스는 다음 각 호의 모든 사항을 이용자에게 알리고 동의를 받으며, 다음 각 호의 어느 하나의 사항을 변경하려는 경우에도 또한 동의를 받을 것입니다.<br />
+          1. 개인정보의 수집ㆍ이용 목적<br />
+          2. 수집하는 개인정보의 항목<br />
+          3. 개인정보의 보유ㆍ이용 기간<br /><br />
+          (3) 고진모터스는 다음 각 호의 어느 하나에 해당하는 경우에는 위 제2항에 따른 동의 없이 이용자의 개인정보를 수집ㆍ이용할 수 있습니다.<br />
+          1. 차량판매 계약을 이행하기 위하여 필요한 개인정보로서 경제적ㆍ기술적인 사유로 통상적인 동의를 받는 것이 뚜렷하게 곤란한 경우<br />
+          2. 차랑 판매 및 관련 서비스의 제공에 따른 요금정산을 위하여 필요한 경우<br />
+          3. "정보통신망이용촉진 및 정보보호에 관한 법률" 또는 다른 법률에 특별한 규정이 있는 경우<br /> <br />
+          (4) 고진모터스는 사상, 신념, 과거의 병력(病歷) 등 개인의 권리ㆍ이익이나 사생활을 뚜렷하게 침해할 우려가 있는 개인정보를 수집하지 않습니다. 다만, 이용자의 동의를 받거나 다른 법률에 따라 특별히 수집 대상 개인정보로 허용된 경우에는 그 개인정보를 수집할 수 있습니다.
+        </p>
+        <h4 class="mt--24">
+          3. 개인정보 수집 항목 및 수집 목적
+        </h4>
+        <p class="mt--24">
+          (1) 고진모터스가 수집하는 고객 개인정보의 항목 및 그 항목별 수집목적은 다음과 같습니다.<br />
+          가. 성명, 회원 ID, 비밀번호, 주민등록번호 : 고객 서비스 제공에 따른 본인 식별 절차에 이용<br />
+          나. 이메일주소 : 고지사항 전달, 본인 의사 확인, 불만 처리 등 원활한 의사 소통 경로의 확보, 새로운 서비스, 신상품이나 이벤트 정보 등 최신정보의 안내<br />
+          다. 주소, 전화번호 : 계약 이행 또는 서비스 예약 이행을 위한 연락, 홍보지 송부 라. 그 외 선택항목 : 개인 맞춤 서비스를 제공하기 위한 자료<br /><br />
+          (2) 고진모터스는 이용자들이 고객 제공한 개인정보를 바탕으로 보다 더 유용한 서비스를 개발할 수 있으며, 신규 상품 개발이나 서비스의 확충 시에 기존 고객들이 고진모터스에 제공한 개인정보를 바탕으로 보다 더 효율적이고 합리적으로 상품 및 서비스를 제공할 수 있습니다.
+        </p>
+        <h4 class="mt--24">
+          4. 개인정보 수집에 대한 동의
+        </h4>
+        <p class="mt--24">
+          고진모터스는 2009년 7월 1일부터 "정보통신망이용촉진 및 정보보호에 관한 법률"에 따라 고객의 개인정보 수집에 대한 동의를 받고 있습니다. 고객의 개인정보 수집과 관련하여 고진모터스의 개인정보 취급방침 또는 이용약관의 내용을 정확하게 고객에게 고지하고 이에 대해「동의한다」또는「동의하지 않는다」를 선택할 수 있는 절차를 마련하여, 「동의한다」영역을 선택하면 개인정보 수집에 대해 동의한 것으로 봅니다.
+        </p>
+        <h4 class="mt--24">
+          5. 개인정보수집범위
+        </h4>
+        <p class="mt--24">
+          고객은 별도의 회원가입 절차 없이 고진모터스에서 온라인으로 제공하는 대부분의 컨텐츠에 자유롭게 접근할 수 있습니다. "고진모터스"의 회원제 서비스를 이용하시고자 할 경우 다음의 정보를 입력해주셔야 하며 추가정보를 입력하시지 않았다 하여 서비스 이용에 제한이 있는 것은 아닙니다.<br /><br />
+          가. 회원가입시 수집하는 개인정보의 범위<br />
+          1) 기본정보 : 회원 ID, 비밀번호, 이름, 주민등록번호, 주소, 전화번호(휴대폰포함), 이메일<br />
+          2) 추가정보(선택) : 결혼여부, 직장/학교명, 직업, 학력, 취미, 쇼핑관심분야, 기타<br /><br />
+          나. 차량 구매 시 수집하는 개인정보의 범위<br />
+          1) 차량판매계약서 상의 정보<br />
+          2) 할부, 리스 등 기타 다른 서비스 사용 시 요구되는 제증명서 정보
+        </p>
+        <h4 class="mt--24">
+          6. 개인정보의 보유 및 이용기간, 파기
+        </h4>
+        <p class="mt--24">
+          (1) 고객의 개인정보는 다음과 같이 개인정보의 수집목적 또는 제공받은 목적이 달성되면 파기됩니다.<br />
+          가. 회원가입정보의 경우 : 회원가입을 탈퇴하거나 회원에서 제명된 때<br />
+          나. 차량판매정보의 경우 : 차량의 소유권이 이전된 때<br /><br />
+          (2) 제1항의 규정에도 불구하고 상법 등 법령의 규정에 의하여 다음과 같이 거래 관련 권리 의무 관계의 확인 등을 이유로 일정기간 보유하여야 할 필요가 있을 경우에는 상법, 자동차관리법 등 관련 법률에 근거하여 아래와 같이 일정기간 보유합니다.<br />
+          가. 자동차 판매에 관한 기록 : 5년<br />
+          나. 자동차 정비 이력 : 5 년<br />
+          다. 고객 불만 또는 분쟁처리에 관한 기록 : 5년<br /><br />
+          (3) 단, 고진모터스는 아래의 목적으로 고객의 개인정보를 일정기간 보관할 수 있습니다.<br />
+          가. 고객정보 필수항목 및 선택항목<br />
+          1) 보존이유 : 고객관리 서비스<br />
+          2) 보존기간 : 차량 폐차시까지 (단, 폐차 후에도 차량관련 법적 문제 종료시까지 필요한 범위 내에서 보존될 수 있으며 고객이 차량매각 후 탈퇴 요청 시는 삭제조치를 취합니다.)<br /><br />
+          나. 가망고객 및 고객만족/불만 또는 분쟁처리에 관한 기록<br />
+          1) 보존이유 : 고진모터스내부규정<br />
+          2) 보존기간 : 10년<br /><br />
+          (4) 고객의 동의를 받아 보유하고 있는 정보 등을 고객께서 열람하고자 요구하는 경우 고진모터스는 지체 없이 열람 및 확인할 수 있도록 조치합니다.<br /><br />
+          (5) 개인정보의 파기<br />
+          가. 종이에 출력된 개인정보 : 분쇄기로 분쇄하거나 소각<br />
+          나. 전자적 파일형태로 저장된 개인정보 : 기록을 재생할 수 없는 기술적 방법을 사용하여 삭제
+        </p>
+        <h4 class="mt--24">
+          7. 개인정보의 열람 및 갱신, 수정 및 동의철회 방법
+        </h4>
+        <p class="mt--24">
+          (1) 고객은 언제든지 고진모터스에 등록되어 있는 본인의 개인정보 열람 및 수정을 요청할 수 있습니다.<br /><br />
+          (2) 고객이 개인정보의 오류에 대한 정정을 요청하신 경우에는 정정을 완료하기 전까지 당해 개인정보를 이용 또는 제공하지 않습니다. 또한 잘못된 개인정보를 제3자에게 이미 제공한 경우에는 정정 처리결과를 제3자에게 지체 없이 통지하여 정정이 이루어지도록 하겠습니다.<br /><br />
+          (3) 탈퇴 및 수정에 대한 내용은 개인정보관리 책임자 및 담당자에게 서면, 유선 또는 E-mail로 연락하시면 지체 없이 조치하겠습니다. 고진모터스는 개인정보의 수집에 대한 동의철회(회원탈퇴)를 개인정보를 수집하는 방법보다 쉽게 할 수 있도록 필요한 조치를 취하겠습니다.
+        </p>
+        <h4 class="mt--24">
+          8. 목적 외 사용 및 제3자에 대한 제공 및 공유
+        </h4>
+        <p class="mt--24">
+          (1) 고진모터스는 다음 각 호의 모든 사항을 고객에게 미리 알리고 동의를 받은 후 이를 제3자에게 제공할 수 있습니다. 다음 각 호의 어느 하나의 사항이 변경되는 경우에도 또한 같습니다.<br />
+          가. 개인정보를 제공받는 자<br />
+          나. 개인정보를 제공받는 자의 개인정보 이용 목적<br />
+          다. 제공하는 개인정보의 항목 라. 개인정보를 제공받는 자의 개인정보 보유 및 이용 기간<br /><br />
+          (2) 고진모터스는 다음 각 호의 어느 하나에 해당하는 경우에는 위 제1항에 따른 동의 없이 이용자의 개인정보를 제3자에게 제공할 수 있습니다.<br />
+          가. 서비스의 제공에 따른 요금정산을 위하여 필요한 경우<br />
+          나. 정보통신망이용촉진 및 정보보호에 관한 법률, 금융실명거래및비밀보장에관한법률, 신용정보의이용및보호에관한법률, 전기통신기본법, 전기통신사업법, 지방세법, 소비자보호법, 한국은행법, 형사소송법, 기타 다른 법률에 특별한 규정이 있는 경우(당사자에게 고지하는 것을 원칙으로 하나, 법률상의 근거에 의해 부득이하게 고지를 하지 못할 수도 있습니다.)<br />
+          다. 관계법령에 의하여 수사상 목적으로 정해진 절차와 방법에 따라 수사기관의 요구가 있는 경우(당사자에게 고지하는 것을 원칙으로 하나, 법률상의 근거에 의해 부득이하게 고지를 하지 못할 수도 있습니다.)<br /><br />
+          (3) 2010. 08. 01. 현재 고진모터스가 개인정보를 제공하는 자의 성명, 제공받는 자의 이용 목적 및 제공하는 개인정보의 항목은 아래와 같습니다.<br /><br />
+          개인정보를 제공받는 자 이용목적 제공하는 개인정보 항목 보유 및 이용기간<br /><br />
+          아우디 폭스바겐 코리아 1. 아우디 담당자에게만 제공 (국외 이전 관리 위탁: Audi AG 독일 본사 - Cocus AG 재위탁) 2. 폭스바겐 파이낸셜 서비스 코리아와 그룹계열사 공동 고객 프로그램 및 프로모션 진행시 제공 아우디 구매고객 및 캠페인/이벤트 참여고객에 대한 서비스 제공 및 마케팅 활동 이름, 주민등록번호(외국인의 경우, 여권번호 혹은 외국인등록번호), 자택주소, 회사주소, e-mail 주소, 핸드폰번호, 자택전화번호, 회사전화번호, 직업, 회사명, 부서, 직급(직위), 성별, 생년월일, 취미, 결혼여부, 기념일정보 (생일, 결혼기념일, 차량출고일 등), 배우자정보, 자녀정보, 학력, 부양가족수, 가족수입, 차량보유수, 아우디 보유대수 및 각 차량정보, 보유차량정보, 관심사, 선호미디어 (인터넷, TV/라디오, 주간지, 일간지, 외국잡지, 주접촉 미디어 등), 서비스센터 및 고객센터 이용에 대한 이력, 차량구매 및 서비스에 대한 만족도 및 불만관련 정보 및 이력, 차량구입 상담내역, 온라인/오프라인 캠페인 및 이벤트 참여이력, 할부매매시 개인정보, 로그인ID, 비밀번호, 서비스이용기록, 접속로그, 쿠키, 접속IP정보 회원 탈퇴시 혹은 계약 종료시까지 고진모터스㈜ ㈜태안모터스 코오롱아우토㈜ (주)위본모터스 유카로오토모빌㈜ ㈜한영모터스 (유)중산모터스 주식회사 한서모터스 아이언오토 아우디 구매고객의 서비스센터 이용정보 제공 이름, 핸드폰번호, 자택전화번호, 자택주소, 차대번호, 차량번호, 차량정보, 보증딜러, 보증일자, 입출고일자, 주행거리, 예약번호 및 예약상태, 서비스 어드바이저, 리스회사명, 작업내역, 서비스 상세내역<br /><br />
+          (4) 제1항에 따라 고진모터스는 다음 각호의 방법에 따라 동의를 얻겠습니다.<br />
+          가. 동의 내용이 기재된 서면을 고객에게 직접 교부하거나, 우편 또는 모사전송을 통하여 전달하고 고객이 동의 내용에 대하여 서명날인 후 제출하도록 하는 방법<br />
+          나. 동의 내용이 기재된 전자우편을 발송하여 고객으로부터 동의의 의사표시가 기재된 전자우편을 전송받는 방법<br />
+          다. 전화를 통하여 동의 내용을 고객에게 알리고 동의를 얻거나 인터넷주소 등 동의 내용을 확인할 수 있는 방법을 안내하고 재차 전화 통화를 통하여 동의를 얻는 방법<br /><br />
+          (5) 고객께서 동의하신 개인정보 제3자 제공은 본 방침 7조에 따라 언제든지 동의철회가 가능하며, 기타 개인정보 제3자 제공에 대한 변동사항은 공지 및 별도 통지를 통해 고객등의를 받을 예정입니다.<br /><br />
+          (6) 고진모터스의 권리와 의무가 완전 승계•이전되는 경우 반드시 사전에 정당한 사유와 절차에 대해 상세하게 고지할 것이며 고객이 개인정보에 대하여 제공 동의에 대하여 철회를 할 수 있는 선택권을 부여합니다.
+        </p>
+        <h4 class="mt--24">
+          9. 개인정보의 취급위탁
+        </h4>
+        <p class="mt--24">
+          (1) 고진모터스는 차량 판매 나 서비스 향상을 위해 고객 개인정보를 외부에 수집•보관•처리•이용•제공•관리•파기 등(이하 "취급"이라 합니다)을 할 수 있도록 업무를 위탁(이하 "개인정보취급위탁"이라 합니다)하여 처리하고 있으며, 관계 법령에 따라 위탁계약 시 개인정보가 안전하게 관리될 수 있도록 최선을 다하고 있습니다. 또한 취급을 위탁하는 정보는 당해 목적을 달성하기 위하여 필요한 최소한의 정보에 국한되며 목적달성 완료 시 즉시 파기됩니다.<br /><br />
+          (2) 고진모터스는 제3자에게 개인정보 취급을 위탁하는 경우 사전에 다음 각 호의 사항 모두를 고객에게 미리 알리고 동의를 받습니다. 다음 각 호의 어느 하나의 사항이 변경되는 경우에도 또한 같습니다. 가. 개인정보 취급위탁을 받는 자(이하 "수탁자"라 합니다) 나. 개인정보 취급위탁을 하는 업무의 내용 개인정보취급위탁을 받는 자(이하 "수탁자"라 합니다), 개인정보취급위탁을 하는 업무의 내용에 개별적으로 제8조 제4항에 정한 방법으로 이에 대한 동의를 구합니다. 수탁자 등이 변경된 때에도 이와 같습니다.<br /><br />
+          (3) 고진모터스는 서비스의 제공에 관한 계약의 이행을 위하여 필요한 경우로서 위 제2항의 내용을 본 개인정보취급방침에 공개하거나 전자우편•서면•모사전송•전화 또는 이와 유사한 방법 중 어느 하나의 방법으로 고객에게 통지함으로써 제2항의 고지 및 동의절차에 갈음할 수 있습니다. 제2항의 내용이 변경된 때에도 이와 같습니다.<br /><br />
+          (4) 고진모터스로부터 개인정보취급위탁을 받은 수탁자 및 개인정보취급위탁을 하는 업무의 내용은 아래와 같습니다.<br /><br />
+          <b>
+            수탁자 수탁범위 처리정보
+          </b><br /><br />
+          오복사, 삼오사, 우리사, 서로행정사, 충무사, 배현CS, 소망사, 행정사 최승식사무소<br />
+          - 고진모터스차량등록 대행업체(이름, 주민등록번호(외국인의 경우, 여권번호 혹은 외국인등록번호), 자택주소, 회사주소, 회사명, 차량정보, 리스이용시 리스사, 핸드폰번호, e-mail주소, 직업)<br /><br />
+          디웍스 코리아, 페르소나 AI, 그릿모터테이먼트 (주)<br />
+          - 고진모터스 고객에게 서비스 캠페인 및 기타 서비스 관련 SMS, TM 진행 (고객명, 상호, 주소, 전화번호, 핸드폰번호, 차량번호, 차대번호, 모델명, 차량출고일, 차량정보, 서비스센터 이용에 대한 이력, 서비스에 대한 만족도 및 불만관련 정보 및 이력)<br /><br />
+          세영모빌리티(주), 에스지오토(주)<br />
+          - 고진모터스 고객의 사고 수리 문의 및 위탁 관련 정보 제공 (고객명, 상호, 주소, 전화번호, 핸드폰번호, 차대번호, 모델명, 차량출고일, 차량정보, 보험사, 견인요청 장소등)<br /><br />
+          TPA 코리아 주식회사, 삼성화재해상보험(주)<br />
+          - 고진모터스 고객의 차량 정보 제공(고객명, 상호, 주소, 전화번호, 핸드폰번호, 차대번호, 모델명, 차량출고일, 차량정보, 정비이력, 보험사등)<br /><br />
+          (주) 동부 캐리어, (주) 윌앤비전<br />
+          - 고진모터스 고객의 사고 수리 문의 관련 정보 제공 및 견인 조치진행 (고객명 ,상호, 주소,전화번호,핸드폰번호,차대번호, 모델명, 차량출고일, 차량정보, 보험사 , 견인요청 장소등 )<br /><br />
+          (주)인터스코프<br />
+          - 고진모터스 온라인 홈페이지 관리대행 (고객명, 희망차종, 주소, 핸드폰, e-mail, 방문경로, 구입예상개월수, 구입방법, 전시장등)<br /><br />
+          (5) 개인정보의 처리를 위탁하는 경우에는 위탁계약 등을 통하여 서비스제공자의 개인정보보호 관련 지시엄수, 개인정보에 관한 비밀유지, 제3자 제공의 금지 및 사고시의 책임부담, 위탁기간, 처리 종료후의 개인정보의 반환 또는 파기 등을 명확히 규정하고 당해 계약내용을 서면 또는 전자적으로 보관하겠습니다.<br /><br />
+          (6) 본래의 수집목적 및 이용목적에 반하여 무분별하게 정보가 제공되지 않도록 최대한 노력하겠습니다.
+        </p>
+        <h4 class="mt--24">
+          10. 쿠키(cookie)에 의한 개인정보 수집
+        </h4>
+        <p class="mt--24">
+          (1) 고진모터스의 홈페이지는 고객에 대한 정보를 저장하고 수시로 찾아내는 쿠키(cookie)를 사용합니다.<br />
+          가. 쿠키는 웹사이트를 운영하는데 이용되는 HTTP 서버가 사용자의 컴퓨터 브라우저에게 전송하는 소량의 정보입니다.<br />
+          나. 고객께서 웹사이트에 접속을 하시면 고진모터스의 컴퓨터는 고객의 브라우저에 있는 쿠키의 내용을 읽고, 고객의 추가정보를 고객의 컴퓨터에서 찾아 접속에 따른 성명 등의 추가 입력 없이 서비스를 제공할 수 있습니다.<br />
+          다. 고진모터스는 다음과 같은 목적을 위해 쿠키를 사용합니다.<br /><br />
+          1) 개인의 관심 분야에 따라 차별화된 정보를 제공<br />
+          2) 회원과 비회원의 접속 빈도 또는 머문 시간 등을 분석하여 이용자의 취향과 관심분야를 파악하여 타겟(target) 마케팅에 활용<br />
+          3) 고진모터스가 진행하는 각종 이벤트에서 고객의 참여 정보 및 방문 회수를 파악하여 차별적인 응모 기회를 부여하고 개인의 관심 분야에 따라 차별화된 정보를 제공하기 위한 자료로 이용됩니다.<br /><br />
+          (2) 고객은 쿠키 설치에 대한 선택권을 가지고 있습니다. 따라서, 고객은 웹브라우저에서 옵션을 설정함으로써 모든 쿠키를 허용하거나, 쿠키가 저장될 때마다 확인을 거치거나, 아니면 모든 쿠키의 저장을 거부할 수도 있습니다.<br /><br />
+          가. 쿠키 설치 허용 여부를 지정하는 방법 (Internet Explorer7.0을 사용하는 경우)<br />
+          1) [도구]메뉴에서 [인터넷 옵션]을 선택합니다.<br />
+          2) [개인정보 탭]을 클릭합니다.<br />
+          3) [개인정보보호 수준]을 설정합니다.<br /><br />
+          나. 받은 쿠키를 보는 방법 (Internet Explorer7.0을 사용하는 경우)<br />
+          1) [작업 표시줄]에서 [도구]를 클릭합니다.<br />
+          2) [인터넷 옵션]을 선택합니다.<br />
+          3) [일반 탭(기본 탭)]에서 [설정]을 클릭합니다.<br />
+          4) [파일 보기]를 선택합니다.<br /><br />
+          
+          (3) 고객께서 쿠키 설치를 거부하셨을 경우 고진모터스 일부 서비스 활용에 어려움이 있을 수 있습니다.
+        </p>
+        <h4 class="mt--24">
+          11. 14세 미만 아동의 개인정보 보호
+        </h4>
+        <p class="mt--24">
+          가. 고진모터스는 14세 미만자의 회원가입을 받지 않고 있으며, 개인정보를 수집시 법정대리인의 동의를 구하고 있습니다.<br />
+          나. 동의의 방법은 법정대리인의 성명과 주민등록번호 및 연락처 등을 입력하도록 하고 방송통신위원회에서 고시한 동의방법에 따라 시행하겠습니다.<br />
+          다. 만 14세 미만 아동의 법정대리인은 아동의 개인정보에 대한 열람, 수정 및 삭제를 요청할 수 있으며, 회사는 이러한 요청에 지체없이 필요한 조치를 취합니다.<br />
+          라. 미성년자와 재화 등의 거래에 관한 계약을 체결하고자 하는 경우에는 법정 대리인이 그 계약에 대해서 동의를 하지 아니하면 미성년자 본인 또는 법정대리인이 그 계약을 취소할 수 있습니다.<br />
+          마. 고진모터스는 청소년 유해매체물의 표시를 적용하여 청소년에 대한 유해정보의 접근가능성 및 노출을 사전에 예방하고 있으며 청소년 유해상품(유해매체물, 유해약물, 유해물건등)의 구매도 엄격히 금지하고 있습니다.
+        </p>
+        <h4 class="mt--24">
+          12. 개인정보 관련 의견수렴 및 불만처리에 관한 사항
+        </h4>
+        <p class="mt--24">
+          (1) 고진모터스는 고객의 의견을 소중하게 생각하며, 고객은 의문사항으로부터 언제나 성실한 답변을 받을 권리가 있습니다.<br /><br />
+          (2) 고진모터스의 고객 개인정보보호에 관련하여 의견이나 불만이 있을시 하기로 문의 주시면 신속하고 정확하게 처리해드리도록 하겠습니다.<br /><br />
+          담당자 전화번호 이메일 주소<br />
+          담당자: 현승수 이사<br />
+          소 속: 마케팅 커뮤니케이션<br />
+          E-Mail: sshyun@gojin.com<br />
+          전화번호: 02-516-2468<br /><br />
+          (3) 고진모터스 이용 중 피해 사항 신고는 '한국소비자보호원'에서 하실 수 있으며 기타 개인정보에 관한 상담이 필요한 경우에는 '개인정보침해신고센터', '대검찰청 인터넷범죄수사센터', '경찰청' 등으로 문의하실 수 있습니다.
+          <br /><br />
+          기관 URL 전화번호<br />
+          소비자 보호원 http://www.cpb.or.kr 02-3460-3000<br />
+          개인정보침해신고센터 http://www.cyberprivacy.or.kr 02-1336<br />
+          대검찰청 인터넷범죄수사센터 http://icic.sppo.go.kr 02-3480-3600<br />
+          경찰청 http://www.police.go.kr 02-363-0112<br />
+          정보보호마크 인증위원회 http://www.privacymark.or.kr 02-580-0533<br /><br />
+          (4) 그 외 내부 관리자의 실수나 기술관리 상의 사고로 인해 개인정보의 상실, 유출, 변조, 훼손이 유발될 경우 고진모터스는 즉각 고객께 사실을 알리고 적절한 대책과 보상을 강구할 것입니다.
+        </p>
+        <h4 class="mt--24">
+          13. 개인정보 보호를 위한 기술적, 관리적 대책
+        </h4>
+        <p class="mt--24">
+          (1) 기술적 대책 고진모터스는 고객의 개인정보를 취급함에 있어 개인정보가 분실, 도난, 누출, 변조 또는 훼손되지 않도록 안전성 확보를 위하여 다음과 같은 기술적 대책을 강구하고 있습니다.<br />
+          고객의 개인정보는 비밀번호에 의해 보호되며, 파일 및 전송 데이터를 암호화하여 일반사용자 및 관리자가 접근할 수 없습니다. 고진모터스는 방화벽(Fire Wall)과 네트워크상의 개인정보를 암호화된 터널을 통해 전송할 수 있는 가상사설망을 채택하고 있습니다. 해킹 등 외부 침입에 대비하여 각 서버마다 침입차단시스템 및 취약점 분석 시스템 등을 이용하여 보안에 만전을 기하고 있습니다.<br /><br />
+          (2) 관리적 대책 고진모터스는 고객의 개인정보에 대한 접근권한을 최소한의 인원으로 제한하고 있습니다. 그 최소한의 인원에 해당하는 자는 다음과 같습니다.<br />
+          - 이용자를 직접 상대로 하여 마케팅 업무를 수행하는 자<br />
+          - 개인정보관리책임자 및 담당자 등 개인정보관리업무를 수행하는 자<br />
+          - 기타 업무상 개인정보의 취급이 불가피한 자<br />
+          개인정보를 취급하는 직원을 대상으로 새로운 보안 기술 습득 및 개인정보 보호 의무 등에 관해 정기적인 사내 교육 및 외부 위탁교육을 실시하고 있습니다.
+          개인정보 관련 취급자의 업무 인수인계는 보안이 유지된 상태에서 철저하게 이뤄지고 있으며 입사 및 퇴사 후 개인정보 사고에 대한 책임을 명확화하고 있습니다.
+          전산실 및 자료 보관실 등을 특별 보호구역으로 설정하여 출입을 통제하고 있습니다.
+          고진모터스는 이용자 개인의 과실이나 기본적인 인터넷의 위험성 때문에 일어나는 일들에 대해 책임을 지지 않습니다.
+          그 외 내부 관리자의 과실이나 기술관리 상의 사고로 인해 개인정보의 상실, 유출, 변조, 훼손이 유발될 경우 고진모터스는 즉각 고객께 사실을 알리고 적절한 대책과 보상을 강구할 것입니다.
+        </p> 
+        <h4 class="mt--24">
+          14. 광고성 정보 전송
+        </h4>
+        <p class="mt--24">
+          (1) 고진모터스는 고객의 명시적인 수신거부의사에 반하여 영리목적의 광고성 정보를 전송하지 않습니다.<br /><br />
+          (2) 고진모터스는 고객이 뉴스레터 등 전자우편 전송에 대한 동의를 한 경우 전자우편의 제목란 및 본문 란에 다음 사항과 같이 고객이 쉽게 알아 볼 수 있도록 조치합니다.<br />
+          - 전자우편의 제목란 : (광고)라는 문구를 제목란에 표시하지 않을 수 있으며, 전자우편 본문란의 주요 내용을 표시합니다.<br />
+          - 전자우편의 본문란 : 고객이 수신 거부의 의사표시를 할 수 있는 전송자의 명칭, 전자우편 주소, 전화번호 및 주소를 명시합니다. 고객이 수신 거부의 의사를 쉽게 표시할 수 있는 방법을 한글 및 영문으로 각각 명시하고 고객이 동의를 한 시기 및 내용을 명시합니다.
+        </p>
+        <h4 class="mt--24">
+          15. 링크사이트
+        </h4>
+        <p class="mt--24">
+          고진모터스는 회원님께 다른 고진모터스의 웹사이트 또는 자료에 대한 링크를 제공할 수 있습니다. 이 경우 고진모터스는 외부사이트 및 자료에 대한 아무런 통제권이 없으므로 그로부터 제공받는 서비스나 자료의 유용성에 대해 책임질 수 없으며 보증할 수 없습니다. "고진모터스" 홈페이지가 포함하고 있는 링크를 클릭(click)하여 타 사이트(site)의 페이지로 옮겨갈 경우 해당 사이트의 개인정보 취급방침은 고진모터스와 무관하므로 새로 방문한 사이트의 정책을 검토하시기 바랍니다.
+        </p>
+        <h4 class="mt--24">
+          16. 게시물
+        </h4>
+        <p class="mt--24">
+          (1) 고진모터스는 고객의 게시물을 소중하게 생각하며 변조, 훼손, 삭제되지 않도록 최선을 다하여 보호합니다. 그러나 다음의 경우는 그렇지 아니합니다.<br />
+          - 스팸(spam)성 게시물 : 타인을 비방할 목적으로 허위 사실을 유포하여 타인의 명예를 훼손하는 글<br />
+          - 동의 없는 타인의 신상공개, 제 3자의 저작권 등 권리를 침해하는 내용, 기타 게시판 주제와 다른 내용의 게시물<br />
+          - 그 외의 경우 명시적 또는 개별적인 경고 후 삭제 조치할 수 있습니다.<br /><br />
+          (2) 근본적으로 게시물에 관련된 제반 권리와 책임은 작성자 개인에게 있습니다. 또 게시물을 통해 자발적으로 공개된 정보는 보호하기 어려우므로 정보 공개 전에 심사숙고하시기 바랍니다.
+        </p>
+        <h4 class="mt--24">
+          17. 이용자의 권리와 의무
+        </h4>
+        <p class="mt--24">
+          (1) 고객의 개인정보를 최신의 상태로 정확하게 입력하여 불의의 사고를 예방해 주시기 바랍니다. 이용자가 입력한 부정확한 정보로 인해 발생하는 사고의 책임은 이용자 자신에게 있으며 타인 정보의 도용 등 허위정보를 입력할 경우 서비스 이용이 정지 될 수 있습니다.<br /><br />
+          (2) 고객은 개인정보를 보호받을 권리와 함께 스스로를 보호하고 타인의 정보를 침해하지 않을 의무도 가지고 있습니다. 비밀번호를 포함한 고객의 개인정보가 유출되지 않도록 조심하시고 게시물을 포함한 타인의 개인정보를 훼손하지 않도록 유의해 주십시오. 만약 이 같은 책임을 다하지 못하고 타인의 정보 및 존엄성을 훼손할 시에는『정보통신망이용촉진및정보보호등에 관한법률』등에 의해 처벌받을 수 있습니다.
+        </p>
+        <h4 class="mt--24">
+          18. 개인정보보호책임자 및 개인정보보호 담당자
+        </h4>
+        <p class="mt--24">
+          고객의 개인정보를 보호하고 개인정보와 관련한 불만을 처리하기 위하여 고진모터스는 고객 개인정보 관리책임자를 두고 있습니다. 개인정보와 관련한 문의사항이 있으시면 아래의 개인정보관리책임자에게 연락 주시기 바랍니다. 고객의 문의사항에 신속하고 성실하게 답변해드리겠습니다.<br /><br />
+          개인정보관리 및 청소년보호 책임자<br />
+          성명 현승수<br />
+          소속부서 마케팅 커뮤니케이션<br />
+          직위 이사<br />
+          전화번호 02-516-2468
+        </p>
+        <h4 class="mt--24">
+          19. 고지의 의무
+        </h4>
+        <p class="mt--24">
+          현 개인정보 취급방침은 2010년 12월 01일에 개정되었으며, 정부의 정책 또는 보안기술의 변경에 따라 내용의 추가, 삭제 및 수정이 있을 시에는 개정 최소 10일전부터 전자우편•서면•모사전송•전화 또는 이와 유사한 방법 중 어느 하나의 방법으로 고지할 것입니다. 변경 개인정보취급방침V1.1 시행일자 : 2010-12-01
+        </p>
+      </section>
+    </div>
+  </main>
+</template>

app/pages/agree/terms.vue

@@ -0,0 +1,176 @@
+<template>
+  <main>
+    <div class="detail--container">
+      <div class="text--tab--layout">
+        <ul>
+          <li class="anch--location">
+            <NuxtLink to="#" class="actv">Terms of Use</NuxtLink>
+          </li>
+        </ul>
+      </div>
+      <section class="desc--section full--type">
+        <h3 class="big--title">이용약관</h3>
+        <p class="">
+          '(주)고진모터스'는 (이하 '고진모터스'라 합니다.) 이용자의 개인정보를 중요시하며, "정보통신망 이용촉진 및 정보보호 등에 관한 법률" 등 개인정보와 관련된 법령 상의 개인정보보호규정 및 방송통신위원회가 제정한 "개인정보보호지침"을 준수하고 있습니다. 고진모터스는 개인정보보호지침을 통하여 이용자가 제공하는 개인정보가 어떠한 용도와 방식으로 이용되고 있으며, 적극적으로 보호하기 위해 항상 노력하고 있음에 대해 알려드립니다. 본 방침은 2009년 9월 1일 부터 시행됩니다. (개인정보취급방침 버전번호 : 1.1 )<br /><br />
+          * 수집하는 개인정보 항목<br />
+          * 개인정보의 수집 및 이용목적<br />
+          * 개인정보의 보유 및 이용기간<br />
+          * 개인정보의 파기절차 및 방법<br />
+          * 개인정보 제공<br />
+          * 수집한 개인정보의 위탁<br />
+          * 이용자 및 법정대리인의 권리와 그 행사방법<br />
+          * 개인정보 자동수집 장치의 설치, 운영 및 그 거부에 관한 사항<br />
+          * 개인정보의 기술적, 관리적 보호 대책<br />
+          * 개인정보에 관한 민원서비스<br />
+          * 부칙
+        </p>
+        <h4 class="mt--24">
+          1. 수집하는 개인정보 항목
+        </h4>
+        <p class="mt--24">
+          고진모터스는 회원가입, 원활한 고객상담, 각종 서비스 등 기본적인 서비스 제공을 위한 필수정보와 고객 맞춤 서비스 제공을 위한 선택정보로 구분하여 아래와 같은 개인정보를 수집하고 있습니다. 선택정보를 입력하지 않은 경우에도 서비스 이용 제한은 없으며 이용자의 기본적 인권 침해의 우려가 있는 민감한 개인 정보(인종, 사상 및 신조, 정치적 성향 이나 범죄기록, 의료정보 등)는 수집하지 않습니다.<br /><br />
+          <b>1) 수집항목</b><br />
+          ① 필수항목<br />
+          아이디(ID), 비밀번호, 이름, 주민등록번호, E-mail, 전화번호, 모바일번호, 주소, 직업, 보유차종, 구입희망차종, 구입희망시기, 관심차종, 정보수신여부, 사이트 방문동기<br />
+          - 모든회원: 서비스 이용 과정이나 서비스 제공 업무 처리 과정에서 다음과 같은 정보들이 자동으로 생성되어 수집될 수 있습니다.<br />
+          - 다음 : 서비스 이용기록, 접속 로그, 쿠키, 접속 IP 정보, 불량 이용 기록<br /><br />
+          <b>
+            2) 개인정보 수집방법
+          </b><br />
+          홈페이지 회원가입, 이벤트 응모, 생성정보 수집 틀을 통한 수집, 회원정보수정, 팩스, 전화, 고객센터 문의하기
+        </p>
+        <h4 class="mt--24">
+          2. 개인정보의 수집 및 이용목적
+        </h4>
+        <p class="mt--24">
+          고진모터스는 수집한 개인정보를 다음의 목적을 위해 활용합니다. 이용자가 제공한 모든 정보는 하기 목적에 필요한 용도 이외로는 사용되지 않으며 이용 목적이 변경될 시에는 사전 동의를 구할 것입니다.<br /><br />
+          <b>
+            1) 서비스 제공에 관한 계약 이행 및 서비스 제공에 따른 요금정산
+          </b><br />
+          콘텐츠 제공, 구매 및 요금 결제, 물품배송 또는 청구지 등 발송, 금융거래 본인 인증 및 금융 서비스, 요금추심 등<br /><br />
+          <b>
+            2) 회원 관리
+          </b><br />
+          회원제 서비스 이용에 따른 본인확인, 개인 식별, 불량회원의 부정 이용 방지와 비인가 사용 방지, 가입 의사 확인, 연령확인, 만14세 미만 아동 개인정보 수집 시 법정 대리인 동의여부 확인, 불만처리 등 민원처리, 고지사항 전달<br /><br />
+          <b>
+            3) 마케팅 및 광고에 활용
+          </b><br />
+          신규 서비스 개발과 이벤트 행사에 따른 정보 전달 및 맞춤 서비스 제공, 인구통계학적 특성에 따른 서비스 제공 및 광고 게재, 접속 빈도 파악 또는 회원의 서비스 이용에 대한 통계
+        </p>
+        <h4 class="mt--24">
+          3. 개인정보의 보유 및 이용기간
+        </h4>
+        <p class="mt--24">
+          고진모터스는 회원가입일로부터 서비스를 제공하는 기간 동안에 한하여 이용자의 개인정보를 보유 및 이용하게 됩니다. 회원 탈퇴를 요청하거나 개인정보의 수집 및 이용에 대한 동의를 철회하는 경우, 수집 및 이용목적이 달성되거나 보유 및 이용기간이 종료한 경우 해당 개인정보를 지체 없이 파기합니다. 단, 다음의 정보에 대해서는 아래의 이유로 명시한 기간 동안 보존합니다.<br /><br />
+          보존 항목: 이름, 생년월일, 성별, 로그인ID, 자택 전화번호, 자택 주소, 휴대전화번호, 주민등록번호<br />
+          보존 근거: 서비스 이용의 혼선 방지, 불법적 사용자에 대한 관련 기관 수사협조<br />
+          보존 기간: 1년<br /><br />
+          그리고 관계법령의 규정에 의하여 보존할 필요가 있는 경우 회사는 아래와 같이 관계법령에서 정한 일정한 기간 동안 회원정보를 보관합니다.<br />
+          보존 항목: 서비스 이용기록, 접속 로그, 접속 IP 정보<br />
+          보존 근거: 통신비밀보호법<br />
+          보존 기간: 3개월<br /><br />
+          표시/광고에 관한 기록: 6개월 (전자상거래등에서의 소비자보호에 관한 법률)<br />
+          계약 또는 청약철회 등에 관한 기록: 5년 (전자상거래등에서의 소비자보호에 관한 법률)<br />
+          대금결제 및 재화 등의 공급에 관한 기록: 5년 (전자상거래등에서의 소비자보호에 관한 법률)<br />
+          소비자의 불만 또는 분쟁처리에 관한 기록: 3년(전자상거래등에서의 소비자보호에 관한 법률)
+        </p>
+        <h4 class="mt--24">
+          4. 개인정보의 파기절차 및 방법
+        </h4>
+        <p class="mt--24">
+          고진모터스는 원칙적으로 개인정보 수집 및 이용목적이 달성된 후에는 해당 정보를 지체 없이 파기합니다. 파기절차 및 방법은 다음과 같습니다.<br /><br />
+          파기절차<br />
+          - 이용자가 회원가입 등을 위해 입력한 정보는 목적이 달성된 후 별도의 DB로 옮겨져(종이의 경우 별도의 서류함) 내부 방침 및 기타 관련 법령에 의한 정보보호 사유에 따라(보유 및 이용기간 참조) 일정 기간 저장된 후 파기되어 집니다.<br />
+          - 별도 DB로 옮겨진 개인정보는 법률에 의한 경우가 아니고서는 다른 목적으로 이용되지 않습니다.<br /><br />
+          파기방법<br />
+          - 전자적 파일형태로 저장된 개인정보는 기록을 재생할 수 없는 기술적 방법을 사용하여 삭제합니다.<br />
+          - 종이에 출력된 개인정보는 분쇄기로 분쇄하거나 소각을 통하여 파기합니다.
+        </p>
+        <h4 class="mt--24">
+          5. 개인정보 제공
+        </h4>
+        <p class="mt--24">
+          고진모터스는 이용자들의 개인정보를 "2. 개인정보의 수집목적 및 이용목적"에서 고지한 범위 내에서 사용하며, 이용자의 사전 동의 없이는 동 범위를 초과하여 이용하거나 원칙적으로 이용자의 개인정보를 외부에 제공하지 않습니다. 단, 다음의 경우에는 주의를 기울여 개인정보를 이용 및 제공할 수 있습니다.<br /><br />
+          이용자들이 사전에 공개에 동의한 경우 (자세한 내용은 아래 링크를 통해 별도로 기재되며 해당 업체는 추후 변동될 수 있습니다.)<br />
+          - 서비스 제공 내역<br />
+          - 이벤트 제공 내역<br />
+          서비스의 제공에 관한 계약의 이행을 위하여 필요한 개인정보로서 경제적/기술적인 사유로 통상의 동의를 받는 것이 현저히 곤란한 경우<br />
+          법령의 규정에 의거하거나, 수사 목적으로 법령에 정해진 절차와 방법에 따라 수사기관의 요구가 있는 경우
+        </p>
+        <h4 class="mt--24">
+          6. 수집한 개인정보의 위탁
+        </h4>
+        <p class="mt--24">
+          고진모터스는 이용자의 민원사항에 대한 처리 등 원활한 업무 수행을 위하여 다음과 같이 개인정보 취급 업무를 외부 전문업체에 위탁하여 운영하고 있습니다. 또한 위탁계약 시 개인정보보호의 안전을 기하기 위하여 개인정보보호 관련 법규의 준수, 개인정보에 관한 제3자 제공 금지 및 사고시의 책임부담 등을 명확히 규정하고 당해 계약 내용을 서면 및 전자적으로 보관하고 있습니다. 동 업체가 변경될 경우, 고진모터스는 변경된 업체 명을 공지사항 내지 개인정보취급방침 화면을 통해 고지하도록 하겠습니다.<br /><br />
+          ㈜ 고진모터스<br />
+          주 소 : 서울특별시 강남구 청담동 92-9<br />
+          전 화 : 02-516-2468, 팩스 : 02-516-3554
+        </p>
+        <h4 class="mt--24">
+          7. 이용자 및 법정대리인의 권리와 그 행사방법
+        </h4>
+        <p class="mt--24">
+          이용자 및 법정 대리인은 언제든지 등록되어 있는 자신 혹은 당해 만 14세 미만 아동의 개인정보를 조회하거나 수정할 수 있으며 가입해지를 요청할 수도 있습니다. 이용자 혹은 만 14세 미만 아동의 개인정보 조회/수정을 위해서는 '개인정보변경'(또는 '회원정보수정' 등)을 가입해지(동의철회)를 위해서는 "회원탈퇴"를 클릭하여 본인 확인 절차를 거치신 후 직접 열람, 정정 또는 탈퇴가 가능합니다. 혹은 개인정보관리책임자에게 서면, 전화 또는 이메일로 연락하시면 지체 없이 조치하겠습니다. 이용자의 개인정보의 오류에 대한 정정을 요청한 경우에는 정정을 완료하기 전까지 당해 개인정보를 이용 또는 제공하지 않습니다. 또한 잘못된 개인정보를 제3자에게 이미 제공한 경우에는 정정 처리결과를 제3자에게 지체 없이 통지하여 정정이 이루어지도록 하겠습니다. 고진모터스는 이용자 혹은 법정 대리인의 요청에 의해 해지 또는 삭제된 개인정보는 "개인정보의 보유 및 이용기간"에 명시된 바에 따라 처리하고 그 외의 용도로 열람 또는 이용할 수 없도록 처리하고 있습니다.
+        </p>
+        <h4 class="mt--24">
+          8. 개인정보 자동수집 장치의 설치, 운영 및 그 거부에 관한 사항
+        </h4>
+        <p class="mt--24">
+          고진모터스는 이용자에게 특화된 맞춤서비스를 제공하기 위해서 이용자들의 정보를 수시로 저장하고 찾아내는 '쿠키(cookie)' 등을 운용합니다. 쿠키란 웹사이트를 운영하는데 이용되는 서버가 이용자의 브라우저에 보내는 아주 작은 텍스트 파일로서 이용자의 컴퓨터 하드디스크에 저장되기도 합니다. 고진모터스는 다음과 같은 목적을 위해 쿠키를 사용합니다.<br /><br />
+          쿠키 등 사용 목적<br />
+          회원과 비회원의 접속 빈도나 방문 시간 등을 분석, 이용자의 취향과 관심분야를 파악 및 자취 추적, 각종 이벤트 참여 정도 및 방문 회수 파악 등을 통한 타겟 마케팅 및 개인 맞춤 서비스 제공<br />
+          이용자는 쿠키 설치에 대한 선택권을 가지고 있습니다. 따라서, 이용자는 웹브라우저에서 옵션을 설정함으로써 모든 쿠키를 허용하거나, 쿠키가 저장될 때마다 확인을 거치거나, 아니면 모든 쿠키의 저장을 거부할 수도 있습니다.<br /><br />
+          쿠키 설정 거부 방법<br />
+          예: 쿠키 설정을 거부하는 방법으로는 이용자가 사용하는 웹 브라우저의 옵션을 선택함으로써 모든 쿠키를 허용하거나 쿠키를 저장할 때마다 확인을 거치거나, 모든 쿠키의 저장을 거부할 수 있습니다.<br />
+          설정방법 예(인터넷 익스플로어의 경우) : 웹 브라우저 상단의 도구 > 인터넷 옵션 > 개인정보<br />
+          단, 쿠키 설치를 거부하였을 경우 로그인이 필요한 일부 서비스 이용에 어려움이 있을 수 있습니다.
+        </p>
+        <h4 class="mt--24">
+          9. 개인정보의 기술적, 관리적 보호 대책
+        </h4>
+        <p class="mt--24">
+          고진모터스는 이용자의 개인정보를 취급함에 있어 개인정보가 분실, 도난, 누출, 변조 또는 훼손되지 않도록 안정성 확보를 위하여 다음과 같은 기술적, 관리적 대책을 강구하고 있습니다.
+          <br /><br />
+          1) 개인정보 암호화<br />
+          이용자의 개인정보는 비밀번호에 의해 보호되며, 중요한 데이터는 파일 및 전송 데이터를 암호화하거나 파일 잠금 기능을 사용하는 등의 별도 보안기능을 통해 보호 하고 있습니다.<br /><br />
+          2) 해킹 등에 대비한 기술적 대책<br />
+          고진모터스는 해킹이나 컴퓨터 바이러스 등에 의해 이용자의 개인정보가 유출되거나 훼손되는 것을 막기 위해 외부로부터 접근이 통제된 구역에 시스템을 설치하고, 침입 차단장치 이용 및 침입탐지시스템을 설치하여 24시간 감시하고 있습니다. 그리고 백신 프로그램을 주기적으로 업데이트하며 갑작스런 바이러스가 출현할 경우 백신이 나오는 즉시 이를 적용함으로써 개인정보가 침해되는 것을 방지하고 있습니다.
+          <br /><br />
+          3) 개인정보처리시스템 접근 제한<br />
+          고진모터스는 개인정보를 처리할 수 있도록 체계적으로 구성한 데이터베이스시스템에 대한 접근권한의 부여, 변경, 말소 등에 관한 기준을 수립하고 비밀번호의 생성 방법, 변경 주기 등을 규정 운영하며 기타 개인정보에 대한 접근통제를 위해 필요한 조치를 다하고 있습니다.<br /><br />
+          4) 개인정보 취급 직원의 교육<br />
+          개인정보관련 취급 직원은 담당자에 한정시켜 최소화 하고 새로운 보안기술의 습득 및 개인정보보호 의무에 관해 정기적인 교육을 실시하며 별도의 비밀번호를 부여하여 접근 권한을 관리하는 등 관리적 대책을 시행하고 있습니다.<br /><br />
+          5) 개인 아이디와 비밀번호 관리<br />
+          이용자가 사용하는 ID와 비밀번호는 원칙적으로 이용자만이 사용하도록 되어 있습니다. 고진모터스는 이용자의 개인적인 부주의로 ID, 비밀번호, 주민등록번호 등 개인정보가 유출되어 발생한 문제와 기본적인 인터넷의 위험성 때문에 일어나는 일들에 대해 책임을 지지 않습니다. 비밀번호에 대한 보안 의식을 가지고 비밀번호를 자주 변경하며 공용PC에서의 로그인시 개인정보가 유출되지 않도록 각별한 주의를 기울여 주시기 바랍니다.
+        </p>
+        <h4 class="mt--24">
+          10. 개인정보에 관한 민원서비스
+        </h4>
+        <p class="mt--24">
+          고진모터스는 고객의 개인정보를 보호하고 개인정보와 관련한 불만을 처리하기 위하여 아래와 같이 개인정보관리책임자를 지정하고 있습니다. 이용자는 고진모터스의 서비스를 이용하시며 발생하는 모든 개인정보보호 관련 민원을 개인정보관리책임자로 신고하실 수 있습니다. 고진모터스는 이용자들의 신고사항에 대해 신속하게 충분한 답변을 드릴 것입니다.<br /><br />
+          <b>
+            개인정보 관리책임자
+          </b><br />
+          성 명 : 현승수이사<br />
+          소 속: 마케팅 커뮤니케이션<br />
+          전 화 : 02-516-2468<br />
+          메 일 : sshyun@gojin.com<br />
+          기타 개인정보침해에 대한 신고나 상담이 필요하신 경우에는 아래 기관에 문의하시기 바랍니다.<br />
+          개인분쟁조정위원회 (1336)<br />
+          정보보호마크인증위원회 (02-580-0533~4)<br />
+          대검찰청 인터넷범죄수사센터 (02-3480-3600)<br />
+          경찰청 사이버테러대응센터 (02-392-0330)
+        </p>
+        <h4 class="mt--24">
+          11. 부칙
+        </h4>
+        <p class="mt--24">
+          이 개인정보취급방침은 2009년 9월 1일부터 적용되며, 법령. 정책 또는 보안기술의 변경에 따라 내용의 추가. 삭제 및 수정이 있을 시에는 변경사항의 시행일의 7일 전부터 고진모터스 사이트의 공지사항을 통하여 고지할 것 입니다.<br />
+          개인정보취급방침 버전번호 : 1.1<br />
+          개인정보취급방침 시행일자 : 2009년 9월 1일
+        </p>
+
+      </section>
+    </div>
+  </main>
+</template>

app/pages/company/eled.vue

@@ -0,0 +1,21 @@
+<template>
+  <main>
+    <section class="visual--section">
+      <div class="img--wrap">
+        <picture>
+          <img src="/img/company/img--about1.jpg" alt="" />
+        </picture>
+      </div>
+      <div class="title--wrap color--white">
+        <h2>Audi Entry LED</h2>
+      </div>
+    </section>
+    <div class="detail--container">
+      <section class="img--section full--type pt--100 pb--200 none--bdrs">
+        <div class="img--wrap">
+          <img src="/img/company/img--eled.jpg" alt="">
+        </div>
+      </section>
+    </div>
+  </main>
+</template>

nuxt.config.ts

@@ -31,8 +31,8 @@ export default defineNuxtConfig({
   },
   css: [
     '~/assets/scss/style.scss',
-    '~/assets/scss/media.scss',
     '~/assets/scss/admin.scss',
+    '~/assets/scss/media.scss',
     '~/assets/scss/responsive.scss',
   ],
   vite: {

public/img/ico--fb.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="main"><path fill="#ffffff" d="M12.97 19.94a8 8 0 1 0-2.9-.17v-5.33H8.42V12h1.65v-1.05c0-2.73 1.23-3.99 3.9-3.99.51 0 1.39.1 1.74.2v2.22a9.92 9.92 0 0 0-.92-.03c-1.31 0-1.82.5-1.82 1.79V12h2.62l-.45 2.44h-2.17v5.5Z"></path></g></svg>

public/img/ico--ins.svg

@@ -0,0 +1,2 @@
+
+<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="main"><path fill="#fff" d="M12.67 6c1.03 0 1.26.01 1.8.04a4.4 4.4 0 0 1 1.46.28c.4.15.73.35 1.06.69.34.33.54.67.7 1.06.14.38.24.82.27 1.46.03.64.04.84.04 2.47 0 1.63 0 1.83-.04 2.47a4.4 4.4 0 0 1-.28 1.46c-.15.4-.35.73-.69 1.06-.33.34-.67.54-1.06.7a4.4 4.4 0 0 1-1.46.27c-.64.03-.84.04-2.47.04-1.63 0-1.83 0-2.47-.04a4.4 4.4 0 0 1-1.46-.28c-.4-.15-.73-.35-1.06-.69a2.94 2.94 0 0 1-.7-1.06 4.4 4.4 0 0 1-.27-1.46C6 13.93 6 13.7 6 12.67v-1.34c0-1.03.01-1.26.04-1.8a4.4 4.4 0 0 1 .27-1.46c.16-.4.36-.73.7-1.06.33-.34.67-.54 1.06-.7a4.4 4.4 0 0 1 1.46-.27c.54-.03.77-.04 1.8-.04h1.34Zm0 1.08h-1.33c-1.01 0-1.23.01-1.76.04-.59.02-.9.12-1.12.2a1.96 1.96 0 0 0-1.14 1.15c-.08.2-.18.52-.2 1.1-.03.54-.04.76-.04 1.77v1.32c0 1.01.01 1.23.04 1.76.02.59.12.9.2 1.12a1.96 1.96 0 0 0 1.15 1.14c.2.08.52.18 1.1.2.54.03.76.04 1.77.04h1.32c1.01 0 1.23-.01 1.76-.04.59-.02.9-.12 1.12-.2a1.96 1.96 0 0 0 1.14-1.15c.08-.2.18-.52.2-1.1.03-.54.04-.76.04-1.77v-1.32c0-1.01-.01-1.23-.04-1.76-.02-.59-.12-.9-.2-1.12a1.88 1.88 0 0 0-.45-.69 1.86 1.86 0 0 0-.7-.45 3.32 3.32 0 0 0-1.1-.2c-.54-.03-.76-.04-1.77-.04ZM12 8.92a3.08 3.08 0 1 1 0 6.16 3.08 3.08 0 0 1 0-6.16ZM12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4Zm3.2-1.92a.72.72 0 1 1 0 1.44.72.72 0 0 1 0-1.44Z"></path></g></svg>