diff --git a/patent-calculator/src/App.vue b/patent-calculator/src/App.vue
index 0607758..3fc164e 100644
--- a/patent-calculator/src/App.vue
+++ b/patent-calculator/src/App.vue
@@ -93,18 +93,18 @@ export default {
       title: "상표 견적 도우미",
       fixed: false,
       menu: [
-        {
-          icon: "add",
-          title: "상품추가",
-          component: "ProductAdder",
-          badge: false
-        },
         {
           icon: "search",
           title: "검색",
           component: "Search",
           badge: false
         },
+        {
+          icon: "add",
+          title: "상품추가",
+          component: "ProductAdder",
+          badge: false
+        },
         {
           icon: "work",
           title: "상품 관리",
diff --git a/patent-calculator/src/components/Briefcase.vue b/patent-calculator/src/components/Briefcase.vue
index 5b65644..963f2b3 100644
--- a/patent-calculator/src/components/Briefcase.vue
+++ b/patent-calculator/src/components/Briefcase.vue
@@ -36,7 +36,7 @@
               <v-icon v-if="!props.item['고시명칭']" small color="secondary">X</v-icon>
               <v-icon v-if="props.item['고시명칭']" small color="secondary">O</v-icon>
             </td>
-            <td class="text-xs-center">
+            <td class="text-xs-center edit">
               <v-btn
                 flat
                 icon
@@ -209,4 +209,7 @@ export default {
 </script>
 
 <style scoped>
+.edit {
+  min-width: 160px;
+}
 </style>
diff --git a/patent-calculator/src/components/BriefcaseSummary.vue b/patent-calculator/src/components/BriefcaseSummary.vue
index 78fae7a..37ca76f 100644
--- a/patent-calculator/src/components/BriefcaseSummary.vue
+++ b/patent-calculator/src/components/BriefcaseSummary.vue
@@ -13,9 +13,9 @@
         :key="classNo"
         @click="copyToClipboard(classNo, products)"
       >
-        <v-list-tile-content>{{ classes[classNo] }}</v-list-tile-content>
+        <v-list-tile-content class="text-no-wrap text-truncate">{{ classes[classNo] }}</v-list-tile-content>
         <v-list-tile-avatar>
-          <v-avatar slot="activator" color="primary" size="22">
+          <v-avatar slot="activator" color="secondary" size="22">
             <span class="white--text body-1 font-weight-medium">{{ Object.keys(products).length }}</span>
           </v-avatar>
         </v-list-tile-avatar>
diff --git a/patent-calculator/src/components/ClassifiedResult.vue b/patent-calculator/src/components/ClassifiedResult.vue
index faf0baa..fc127a0 100644
--- a/patent-calculator/src/components/ClassifiedResult.vue
+++ b/patent-calculator/src/components/ClassifiedResult.vue
@@ -1,13 +1,7 @@
 <template>
   <v-container class="pa-0">
-
-    <v-tabs
-      slot="extension"
-      v-model="activeTab"
-      class='pb-3'
-      slider-color="primary"
-    >
-    <v-tab class="headline" v-for="tab of tabs" :key="tab.index"> {{tab.name}} </v-tab>
+    <v-tabs slot="extension" v-model="activeTab" class="pb-3" slider-color="primary">
+      <v-tab class="headline" v-for="tab of tabs" :key="tab.index">{{tab.name}}</v-tab>
     </v-tabs>
 
     <v-tabs-items v-model="activeTab">
@@ -16,9 +10,13 @@
         <v-layout column>
           <v-flex>
             <v-layout align-center justify-end row fill-height>
-              <v-btn class='mt-3' slot="activator" color="primary" dark @click.native="moveProduct('toUnnoticed')">
-                비고시 상품으로
-              </v-btn>
+              <v-btn
+                class="mt-3"
+                slot="activator"
+                color="primary"
+                dark
+                @click.native="moveProduct('toUnnoticed')"
+              >비고시 상품으로</v-btn>
             </v-layout>
           </v-flex>
           <v-data-table
@@ -29,24 +27,32 @@
             no-data-text="검색 결과가 없습니다."
             class="mt-3"
           >
-          <template slot="items" slot-scope="props">
-          <tr :active="props.selected">
-            <td>
-              <v-checkbox
-              :input-value="props.selected"
-              primary
-              hide-details
-              @click="props.selected = !props.selected"
-              ></v-checkbox>
-            </td>
-              <td class="text-xs-center">{{ props.item['NICE분류'] }}</td>
-              <td class="text-xs-center">{{ props.item['지정상품(국문)'] }}</td>
-              <td class="text-xs-center">
-                <v-btn flat icon slot="activator" color="secondary" dark @click.native="deleteFromTable(props.item)">
-                  <v-icon small>delete</v-icon>
-                </v-btn>
-              </td>
-            </tr>
+            <template slot="items" slot-scope="props">
+              <tr :active="props.selected">
+                <td>
+                  <v-checkbox
+                    :input-value="props.selected"
+                    primary
+                    hide-details
+                    @click="props.selected = !props.selected"
+                  ></v-checkbox>
+                </td>
+                <td v-if="props.item['NICE분류'] === -1"></td>
+                <td v-else class="text-xs-center">{{ props.item['NICE분류'] }}</td>
+                <td class="text-xs-center">{{ props.item['지정상품(국문)'] }}</td>
+                <td class="text-xs-center">
+                  <v-btn
+                    flat
+                    icon
+                    slot="activator"
+                    color="secondary"
+                    dark
+                    @click.native="deleteFromTable(props.item)"
+                  >
+                    <v-icon small>delete</v-icon>
+                  </v-btn>
+                </td>
+              </tr>
             </template>
           </v-data-table>
         </v-layout>
@@ -57,16 +63,15 @@
           <v-flex>
             <v-layout align-center justify-end row fill-height>
               <v-flex xs5 class="mr-3">
-                <v-select
-                v-model="selectedClass"
-                :items="classes"
-                label="분류"
-                ></v-select>
+                <v-select v-model="selectedClass" :items="classes" label="분류"></v-select>
               </v-flex>
               <v-btn color="primary" @click="applyClass()">분류 적용</v-btn>
-              <v-btn slot="activator" color="primary" dark @click.native="moveProduct('toNoticed')">
-                고시 상품으로
-              </v-btn>
+              <v-btn
+                slot="activator"
+                color="primary"
+                dark
+                @click.native="moveProduct('toNoticed')"
+              >고시 상품으로</v-btn>
             </v-layout>
           </v-flex>
           <v-flex>
@@ -79,20 +84,32 @@
               class="mt-3"
             >
               <template slot="items" slot-scope="props">
-                <tr :active="props.selected" :style="[props.item['NICE분류'] === -1 ? backgroundColor : '']">
+                <tr
+                  :active="props.selected"
+                  :style="[props.item['NICE분류'] === -1 ? backgroundColor : '']"
+                >
                   <td>
                     <v-checkbox
-                    :input-value="props.selected"
-                    primary
-                    hide-details
-                    @click="props.selected = !props.selected"
+                      :input-value="props.selected"
+                      primary
+                      hide-details
+                      @click="props.selected = !props.selected"
                     ></v-checkbox>
                   </td>
                   <td v-if="props.item['NICE분류'] === -1"></td>
                   <td v-else class="text-xs-center">{{ props.item['NICE분류'] }}</td>
-                  <td class="text-xs-center"><input class="text-xs-center" type="text" v-model="props.item['지정상품(국문)']"></td>
                   <td class="text-xs-center">
-                    <v-btn flat icon slot="activator" color="secondary" dark @click.native="deleteFromTable(props.item)">
+                    <input class="text-xs-center" type="text" v-model="props.item['지정상품(국문)']">
+                  </td>
+                  <td class="text-xs-center">
+                    <v-btn
+                      flat
+                      icon
+                      slot="activator"
+                      color="secondary"
+                      dark
+                      @click.native="deleteFromTable(props.item)"
+                    >
                       <v-icon small>delete</v-icon>
                     </v-btn>
                   </td>
@@ -111,21 +128,16 @@
             <v-flex class="mt-3">
               <h4>분류하신 상품들을 정말로 추가하시겠습니까?</h4>
             </v-flex>
-            <v-flex class='mt-3'>
+            <v-flex class="mt-3">
               <v-layout align-center justify-end row>
-                <v-btn color="primary" @click.native="submitProductsToBriefcase(products)">
-                  추가 확정
-                </v-btn>
-                <v-btn color="primary" @click.native="dialogView = false">
-                  취소
-                </v-btn>
+                <v-btn color="primary" @click.native="submitProductsToBriefcase(products)">추가 확정</v-btn>
+                <v-btn color="primary" @click.native="dialogView = false">취소</v-btn>
               </v-layout>
             </v-flex>
           </v-layout>
         </v-card-text>
       </v-card>
     </v-dialog>
-
   </v-container>
 </template>
 
@@ -136,10 +148,7 @@ export default {
     return {
       tabIsLoaded: false,
       activeTab: 1,
-      tabs: [
-        {index: 0, name: '고시상품'},
-        {index: 1, name: '비고시상품'}
-      ],
+      tabs: [{ index: 0, name: "고시상품" }, { index: 1, name: "비고시상품" }],
       selected: [],
       selectedClass: "미지정",
       backgroundColor: {},
@@ -198,27 +207,31 @@ export default {
         noticed: [],
         unnoticed: []
       },
-      dialogView: false,
-    }
+      dialogView: false
+    };
   },
   computed: {
     classes() {
       let classes = Object.values(this.$store.getters.classes);
-      classes.splice(0, 1);  //index 0에 있는 "전체"는 빼고, 나머지 분류들만 리턴해주도록 합니다.
+      classes.splice(0, 1); //index 0에 있는 "전체"는 빼고, 나머지 분류들만 리턴해주도록 합니다.
       return classes;
     }
   },
   methods: {
     applyClass() {
       if (this.selected.length > 0) {
-        let selectedClass = -1  //"미지정" class의 id값
+        let selectedClass = -1; //"미지정" class의 id값
         if (this.selectedClass != "미지정") {
           selectedClass = this.classes.indexOf(this.selectedClass);
           for (const selected of this.selected) {
-              if ((selectedClass != -1) && (selected['고시명칭'] == false)) {
-                let selectedIndex =  this.products.unnoticed.findIndex(product => product['id'] == selected['id']);
-                this.products.unnoticed[selectedIndex]['NICE분류'] = selectedClass;
-              }
+            if (selectedClass != -1 && selected["고시명칭"] == false) {
+              let selectedIndex = this.products.unnoticed.findIndex(
+                product => product["id"] == selected["id"]
+              );
+              this.products.unnoticed[selectedIndex][
+                "NICE분류"
+              ] = selectedClass;
+            }
           }
           const message =
             "선택하신 상품이 " +
@@ -228,56 +241,65 @@ export default {
             "로 분류되었습니다.";
           this.$noticeEventBus.$emit("raiseNotice", message);
           this.selected = [];
-        }
-        else {
-          const message = "지정할 분류를 골라주세요."
+        } else {
+          const message = "지정할 분류를 골라주세요.";
           this.$noticeEventBus.$emit("raiseNotice", message);
         }
-      }
-      else {
-        const message = "선택된 상품이 없습니다."
+      } else {
+        const message = "선택된 상품이 없습니다.";
         this.$noticeEventBus.$emit("raiseNotice", message);
       }
     },
     moveProduct(toTheOther) {
-      let movedCount = 0;  //몇 개 상품이 이동하였는지를 snackbar에 전달해주기 위한 변수
-      if (toTheOther == "toUnnoticed") { //고시 -> 비고시 이동인 경우
-        for (const product of this.selected) {  // selected에 고시/비고시 섞여있을 수 있음
-          if (product['고시명칭']) {
-            product['고시명칭'] = false;
-            let selectedIndex = this.products.noticed.findIndex(temp => temp['id'] == product['id']);
-            this.products.unnoticed.push(this.products.noticed.splice(selectedIndex, 1)[0]);
+      let movedCount = 0; //몇 개 상품이 이동하였는지를 snackbar에 전달해주기 위한 변수
+      if (toTheOther == "toUnnoticed") {
+        //고시 -> 비고시 이동인 경우
+        for (const product of this.selected) {
+          // selected에 고시/비고시 섞여있을 수 있음
+          if (product["고시명칭"]) {
+            product["고시명칭"] = false;
+            let selectedIndex = this.products.noticed.findIndex(
+              temp => temp["id"] == product["id"]
+            );
+            this.products.unnoticed.push(
+              this.products.noticed.splice(selectedIndex, 1)[0]
+            );
             movedCount++;
           }
         }
         const message =
-          movedCount +
-          "개의 고시상품이 비고시상품으로 변경되었습니다.";
+          movedCount + "개의 고시상품이 비고시상품으로 변경되었습니다.";
         this.$noticeEventBus.$emit("raiseNotice", message);
-      }
-      else { //비고시 -> 고시 이동인 경우
+      } else {
+        //비고시 -> 고시 이동인 경우
         for (const product of this.selected) {
-          if (!product['고시명칭']) {
-            product['고시명칭'] = true;
-            let selectedIndex = this.products.unnoticed.findIndex(temp => temp['id'] == product['id']);
-            this.products.noticed.push(this.products.unnoticed.splice(selectedIndex, 1)[0]);
+          if (!product["고시명칭"]) {
+            product["고시명칭"] = true;
+            let selectedIndex = this.products.unnoticed.findIndex(
+              temp => temp["id"] == product["id"]
+            );
+            this.products.noticed.push(
+              this.products.unnoticed.splice(selectedIndex, 1)[0]
+            );
             movedCount++;
           }
         }
         const message =
-          movedCount +
-          "개의 비고시상품이 고시상품으로 변경되었습니다.";
+          movedCount + "개의 비고시상품이 고시상품으로 변경되었습니다.";
         this.$noticeEventBus.$emit("raiseNotice", message);
       }
       this.selected = [];
     },
     deleteFromTable(product) {
-      if(product['고시명칭']) {
-        let selectedIndex = this.products.noticed.findIndex(temp => temp['id'] == product['id']);
+      if (product["고시명칭"]) {
+        let selectedIndex = this.products.noticed.findIndex(
+          temp => temp["id"] == product["id"]
+        );
         this.products.noticed.splice(selectedIndex, 1);
-      }
-      else {
-        let selectedIndex = this.products.unnoticed.findIndex(temp => temp['id'] == product['id']);
+      } else {
+        let selectedIndex = this.products.unnoticed.findIndex(
+          temp => temp["id"] == product["id"]
+        );
         this.products.unnoticed.splice(selectedIndex, 1)[0];
       }
       const message =
@@ -288,19 +310,19 @@ export default {
         "이(가) 목록에서 삭제되었습니다.";
       this.$noticeEventBus.$emit("raiseNotice", message);
     },
-    submitProductsToBriefcase (products) {
+    submitProductsToBriefcase(products) {
       for (const product of products.noticed) {
         this.$store.dispatch("addProduct", Object.assign({}, product));
       }
       for (const product of products.unnoticed) {
         this.$store.dispatch("addProduct", Object.assign({}, product));
       }
-      const message = '상품 관리 탭에서 추가된 상품들을 확인해주세요.';
+      const message = "상품 관리 탭에서 추가된 상품들을 확인해주세요.";
       this.$noticeEventBus.$emit("raiseNotice", message);
-      this.$submissionAlarmBus.$emit('submissionComplete');
+      this.$submissionAlarmBus.$emit("submissionComplete");
       this.dialogView = false;
     },
-    checkUnclassified (products) {
+    checkUnclassified(products) {
       let unclassified = false;
       for (const product of products) {
         if (product["NICE분류"] == -1) {
@@ -309,29 +331,32 @@ export default {
       }
       return unclassified;
     },
-    highlightUnclassified () {
-      this.backgroundColor = {background: '#fff0f0'}
+    highlightUnclassified() {
+      this.backgroundColor = { background: "#fff0f0" };
     }
   },
   mounted() {
-    this.$submissionAlarmBus.$on('submitProductsToBriefcase', () => {
+    this.$submissionAlarmBus.$on("submitProductsToBriefcase", () => {
       if (this.checkUnclassified(this.products.unnoticed)) {
-        const message = "아직 미분류 상태인 상품들이 있습니다!"
+        const message = "아직 미분류 상태인 상품들이 있습니다!";
         this.$noticeEventBus.$emit("raiseNotice", message);
         this.highlightUnclassified();
-      }
-      else {
+      } else {
         this.dialogView = true;
       }
     });
-    this.$productTransmissionBus.$on('transmitClassified', (transmittedProducts) => {
-      this.products.noticed = transmittedProducts.noticed;
-      this.products.unnoticed = transmittedProducts.unnoticed;
-      if (!this.tabIsLoaded) {   // tab이 stepper의 step 2에서 mount 되는 경우, 처음에 slidebar가 보이지 않는 버그를 해결
-        this.activeTab--;
-        this.tabIsLoaded = true;
+    this.$productTransmissionBus.$on(
+      "transmitClassified",
+      transmittedProducts => {
+        this.products.noticed = transmittedProducts.noticed;
+        this.products.unnoticed = transmittedProducts.unnoticed;
+        if (!this.tabIsLoaded) {
+          // tab이 stepper의 step 2에서 mount 되는 경우, 처음에 slidebar가 보이지 않는 버그를 해결
+          this.activeTab--;
+          this.tabIsLoaded = true;
+        }
       }
-    });
+    );
   }
-}
+};
 </script>
diff --git a/patent-calculator/src/components/ProductAdder.vue b/patent-calculator/src/components/ProductAdder.vue
index 39e5d00..9fa6cd5 100644
--- a/patent-calculator/src/components/ProductAdder.vue
+++ b/patent-calculator/src/components/ProductAdder.vue
@@ -161,7 +161,6 @@ export default {
     },
     addProducts() {
       this.$submissionAlarmBus.$emit('submitProductsToBriefcase');
-      // this.curStep++;
     },
     addForm() {
       this.payloads.push({id:++this.formCount, _class:-1, searchingProducts:""});
diff --git a/patent-calculator/src/components/Quotation.vue b/patent-calculator/src/components/Quotation.vue
index 7a7c146..95633f7 100644
--- a/patent-calculator/src/components/Quotation.vue
+++ b/patent-calculator/src/components/Quotation.vue
@@ -1,139 +1,150 @@
 <template>
-  <v-container fluid grid-list-md>
-    <v-slide-y-transition mode="out-in">
-      <v-layout>
-        <v-flex>
-          <v-card>
-            <v-toolbar color="grey lighten-4">
-              <v-toolbar-title>견적내기</v-toolbar-title>
-              <v-spacer></v-spacer>
-              <p class="caption text-xs-left" ><br><br>상표 출원 견적을 표시합니다.</p>
-            </v-toolbar>
-            <v-layout row wrap>
-              <v-flex>
-                <v-container>
-                  <v-toolbar color="elevation-0">
-                    <v-toolbar-title>검색단계</v-toolbar-title>
-                  </v-toolbar>
-                  <v-layout column wrap>
-                    <v-flex text-xs-center>검색단계 대리인 수수료</v-flex>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>기본료</v-flex>
-                      <v-flex text-xs-center>1상표 {{numOfClasses}}개류</v-flex>
-                      <v-flex text-xs-right>{{검색단계대리인수수료.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>부가세</v-flex>
-                      <v-flex text-xs-center>10%</v-flex>
-                      <v-flex text-xs-right>{{(검색단계대리인수수료 * 0.1).toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>소계</v-flex>
-                      <v-flex text-xs-right>{{(검색단계대리인수수료 * 1.1).toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-divider light></v-divider>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>검색단계 합계</v-flex>
-                      <v-flex text-xs-right>{{검색단계비용.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                  </v-layout>
-                </v-container>
-              </v-flex>
-              <v-flex>
-                <v-container>
-                  <v-toolbar color="elevation-0">
-                    <v-toolbar-title>출원단계</v-toolbar-title>
-                  </v-toolbar>
-                  <v-layout column wrap>
-                    <v-flex text-xs-center>출원단계 대리인 수수료</v-flex>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>기본료</v-flex>
-                      <v-flex text-xs-center>1상표 {{numOfClasses}}개류</v-flex>
-                      <v-flex text-xs-right>{{출원단계대리인수수료.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>부가세</v-flex>
-                      <v-flex text-xs-center>10%</v-flex>
-                      <v-flex text-xs-right>{{(출원단계대리인수수료 * 0.1).toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>소계</v-flex>
-                      <v-flex text-xs-right>{{(출원단계대리인수수료 * 1.1).toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-divider light></v-divider>
-                    <v-flex text-xs-center>출원단계 특허청 관납료</v-flex>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>출원료</v-flex>
-                      <v-flex text-xs-center>1상표 {{numOfClasses}}개류</v-flex>
-                      <v-flex text-xs-right>{{출원단계관납료.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-divider light></v-divider>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>출원단계 합계</v-flex>
-                      <v-flex text-xs-right>{{출원단계비용.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                  </v-layout>
-                </v-container>
-              </v-flex>
-              <v-flex>
-                <v-container>
-                  <v-toolbar color="elevation-0">
-                    <v-toolbar-title>등록단계</v-toolbar-title>
-                  </v-toolbar>
-                  <v-layout column wrap>
-                    <v-flex text-xs-center>등록단계 대리인 수수료</v-flex>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>등록수수료</v-flex>
-                      <v-flex text-xs-center>1상표 {{numOfClasses}}개류</v-flex>
-                      <v-flex text-xs-right>{{등록단계대리인수수료.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>부가세</v-flex>
-                      <v-flex text-xs-center>10%</v-flex>
-                      <v-flex text-xs-right>{{(등록단계대리인수수료 * 0.1).toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>소계</v-flex>
-                      <v-flex text-xs-right>{{(등록단계대리인수수료 * 1.1).toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-divider light></v-divider>
-                    <v-flex text-xs-center>등록단계 특허청 관납료</v-flex>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>등록수수료</v-flex>
-                      <v-flex text-xs-center>1상표 {{numOfClasses}}개류</v-flex>
-                      <v-flex text-xs-right>{{등록단계관납료.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>등록세</v-flex>
-                      <v-flex text-xs-center>1건</v-flex>
-                      <v-flex text-xs-right>{{등록세.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>소계</v-flex>
-                      <v-flex text-xs-right>{{(등록단계관납료 + 등록세).toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                    <v-divider light></v-divider>
-                    <v-layout row wrap>
-                      <v-flex text-xs-center>등록단계 합계</v-flex>
-                      <v-flex text-xs-right>{{등록단계비용.toLocaleString()}} 원</v-flex>
-                    </v-layout>
-                  </v-layout>
-                </v-container>
-              </v-flex>
-            </v-layout>
-            <v-flex>
-              <v-container>
-                <v-toolbar color="elevation-0">
-                  <v-toolbar-title>출원에서 등록까지</v-toolbar-title>
-                </v-toolbar>
-                <v-flex text-xs-center>{{전체비용.toLocaleString()}} 원</v-flex>
-              </v-container>
+  <v-slide-y-transition mode="out-in">
+    <v-container>
+      <v-layout column>
+        <h1 class="headline font-weight-bold mb-2">견적내기</h1>
+        <v-container grid-list-xl>
+          <v-layout>
+            <v-flex s12 sm6 md4 lg4>
+              <v-card flat>
+                <v-card-title class="title font-weight-bold">검색단계</v-card-title>
+                <v-divider class="title-divider"></v-divider>
+                <v-list dense>
+                  <v-subheader class="subheading">대리인 수수료</v-subheader>
+                  <v-list-tile>
+                    <v-list-tile-content>기본료</v-list-tile-content>
+                    <v-list-tile-content class="align-center">1상표 {{numOfClasses}}개류</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{검색단계대리인수수료.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content>부가세</v-list-tile-content>
+                    <v-list-tile-content class="align-center">10%</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{(검색단계대리인수수료 * 0.1).toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content class="font-weight-bold">소계</v-list-tile-content>
+                    <v-list-tile-content
+                      class="align-end font-weight-bold"
+                    >{{검색단계비용.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-divider class="content-divider"></v-divider>
+                  <v-list-tile>
+                    <v-list-tile-content class="font-weight-bold">검색단계 합계</v-list-tile-content>
+                    <v-list-tile-content
+                      class="align-end font-weight-bold"
+                    >{{검색단계비용.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                </v-list>
+              </v-card>
             </v-flex>
-          </v-card>
-        </v-flex>
+            <v-flex s12 sm6 md4 lg4>
+              <v-card flat>
+                <v-card-title class="title font-weight-bold">출원단계</v-card-title>
+                <v-divider class="title-divider"></v-divider>
+                <v-list dense>
+                  <v-subheader class="subheading">대리인 수수료</v-subheader>
+                  <v-list-tile>
+                    <v-list-tile-content>기본료</v-list-tile-content>
+                    <v-list-tile-content class="align-center">1상표 {{numOfClasses}}개류</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{출원단계대리인수수료.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content>부가세</v-list-tile-content>
+                    <v-list-tile-content class="align-center">10%</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{(출원단계대리인수수료 * 0.1).toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content class="font-weight-bold">소계</v-list-tile-content>
+                    <v-list-tile-content
+                      class="align-end font-weight-bold"
+                    >{{(출원단계대리인수수료 * 1.1).toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-divider class="content-divider"></v-divider>
+                  <v-subheader class="subheading">특허청 관납료</v-subheader>
+                  <v-list-tile>
+                    <v-list-tile-content>출원료</v-list-tile-content>
+                    <v-list-tile-content class="align-center">1상표 {{numOfClasses}}개류</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{출원단계관납료.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content class="font-weight-bold">소계</v-list-tile-content>
+                    <v-list-tile-content
+                      class="align-end font-weight-bold"
+                    >{{출원단계관납료.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-divider class="content-divider"></v-divider>
+                  <v-list-tile>
+                    <v-list-tile-content class="font-weight-bold">출원단계 합계</v-list-tile-content>
+                    <v-list-tile-content
+                      class="align-end font-weight-bold"
+                    >{{출원단계비용.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                </v-list>
+              </v-card>
+            </v-flex>
+            <v-flex s12 sm6 md4 lg4>
+              <v-card flat>
+                <v-card-title class="title font-weight-bold">등록단계</v-card-title>
+                <v-divider class="title-divider"></v-divider>
+                <v-list dense>
+                  <v-subheader class="subheading">대리인 수수료</v-subheader>
+                  <v-list-tile>
+                    <v-list-tile-content>기본료</v-list-tile-content>
+                    <v-list-tile-content class="align-center">1상표 {{numOfClasses}}개류</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{등록단계대리인수수료.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content>부가세</v-list-tile-content>
+                    <v-list-tile-content class="align-center">10%</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{(등록단계대리인수수료 * 0.1).toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content class="font-weight-bold">소계</v-list-tile-content>
+                    <v-list-tile-content
+                      class="align-end font-weight-bold"
+                    >{{(등록단계대리인수수료 * 1.1).toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-divider class="content-divider"></v-divider>
+                  <v-subheader class="subheading">특허청 관납료</v-subheader>
+                  <v-list-tile>
+                    <v-list-tile-content>등록수수료</v-list-tile-content>
+                    <v-list-tile-content class="align-center">1상표 {{numOfClasses}}개류</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{등록단계관납료.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content>등록세</v-list-tile-content>
+                    <v-list-tile-content class="align-center">1건</v-list-tile-content>
+                    <v-list-tile-content class="align-end">{{등록세.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-list-tile>
+                    <v-list-tile-content class="font-weight-bold">소계</v-list-tile-content>
+                    <v-list-tile-content
+                      class="align-end font-weight-bold"
+                    >{{(등록단계관납료 + 등록세).toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                  <v-divider class="content-divider"></v-divider>
+                  <v-list-tile>
+                    <v-list-tile-content class="font-weight-bold">등록단계 합계</v-list-tile-content>
+                    <v-list-tile-content
+                      class="align-end font-weight-bold"
+                    >{{등록단계비용.toLocaleString()}}원</v-list-tile-content>
+                  </v-list-tile>
+                </v-list>
+              </v-card>
+            </v-flex>
+          </v-layout>
+        </v-container>
+        <v-list dark class="primary mt-5">
+          <v-list-tile>
+            <v-list-tile-content class="title font-weight-bold">출원에서 등록까지</v-list-tile-content>
+            <v-list-tile-content
+              class="title align-end font-weight-bold"
+            >합계 {{전체비용.toLocaleString()}}원</v-list-tile-content>
+          </v-list-tile>
+        </v-list>
       </v-layout>
-    </v-slide-y-transition>
-  </v-container>
+    </v-container>
+  </v-slide-y-transition>
 </template>
 
 <script>
@@ -168,7 +179,9 @@ export default {
       return this.출원단계대리인수수료 * 1.1 + this.출원단계관납료;
     },
     등록단계비용() {
-      return this.등록단계대리인수수료 * 1.1 + this.등록단계관납료 + this.등록세;
+      return (
+        this.등록단계대리인수수료 * 1.1 + this.등록단계관납료 + this.등록세
+      );
     },
     전체비용() {
       return this.검색단계비용 + this.출원단계비용 + this.등록단계비용;
@@ -178,4 +191,11 @@ export default {
 </script>
 
 <style scoped>
+.title-divider {
+  border: solid 1px black;
+}
+
+.content-divider {
+  border: solid 1px #d0d0d0;
+}
 </style>