diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index c259f50c..2eec41a5 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -12,8 +12,6 @@ import { currentMenuState, currentObjectState } from '@/store/canvasAtom'
 import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import QContextMenu from '@/components/common/context-menu/QContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
-
-import { useCommonUtils } from '@/hooks/common/useCommonUtils'
 import { MENU } from '@/common/common'
 import PanelBatchStatistics from '@/components/floor-plan/modal/panelBatch/PanelBatchStatistics'
 
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index af405dd2..1604a28f 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -14,7 +14,7 @@ export default function CanvasLayout({ children }) {
   // const { menuNumber } = props
   const { menuNumber } = useCanvasMenu()
   const { session } = useContext(SessionContext)
-  const [objectNo, setObjectNo] = useState('test123241010001') // 이후 삭제 필요
+  const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()
diff --git a/src/hooks/common/useCommonUtils.js b/src/hooks/common/useCommonUtils.js
index 84c4fdb0..b70ae0c8 100644
--- a/src/hooks/common/useCommonUtils.js
+++ b/src/hooks/common/useCommonUtils.js
@@ -37,6 +37,7 @@ export function useCommonUtils() {
   const commonTextMode = () => {
     let textbox
     if (commonUtils.text) {
+      commonTextKeyEvent()
       addCanvasMouseEventListener('mouse:down', (event) => {
         const pointer = canvas?.getPointer(event.e)
         textbox = new fabric.Textbox('', {
@@ -472,30 +473,32 @@ export function useCommonUtils() {
     }
   }
 
-  //텍스트 모드일때 엔터 이벤트
-  addDocumentEventListener('keydown', document, (e) => {
-    if (e.key === 'Enter') {
-      const activeObject = canvas.getActiveObject()
-      if (activeObject && activeObject.name === 'commonText') {
-        if (activeObject && activeObject.isEditing) {
-          if (activeObject.text === '') {
-            canvas?.remove(activeObject)
-          } else {
-            activeObject.exitEditing()
-          }
-          //정책 협의
-          const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
-          texts.forEach((text) => {
-            text.set({ editable: false })
-          })
+  const commonTextKeyEvent = () => {
+    //텍스트 모드일때 엔터 이벤트
+    addDocumentEventListener('keydown', document, (e) => {
+      if (e.key === 'Enter') {
+        const activeObject = canvas.getActiveObject()
+        if (activeObject && activeObject.name === 'commonText') {
+          if (activeObject && activeObject.isEditing) {
+            if (activeObject.text === '') {
+              canvas?.remove(activeObject)
+            } else {
+              activeObject.exitEditing()
+            }
+            //정책 협의
+            const texts = canvas.getObjects().filter((obj) => obj.name === 'commonText')
+            texts.forEach((text) => {
+              text.set({ editable: false })
+            })
 
-          canvas.renderAll()
-          if (setCommonUtilsState) setCommonUtilsState({ ...commonUtils, text: false })
+            canvas.renderAll()
+            if (setCommonUtilsState) setCommonUtilsState({ ...commonUtils, text: false })
+          }
         }
+        initEvent()
       }
-      initEvent()
-    }
-  })
+    })
+  }
 
   const commonFunctions = (mode) => {
     let tempStates = { ...commonUtils }
@@ -591,6 +594,7 @@ export function useCommonUtils() {
     const obj = canvas?.getActiveObject()
     obj.set({ editable: true })
     obj.enterEditing()
+    commonTextKeyEvent()
   }
 
   const deleteObject = () => {
diff --git a/src/hooks/useContextMenu.js b/src/hooks/useContextMenu.js
index f43e9480..99fa585f 100644
--- a/src/hooks/useContextMenu.js
+++ b/src/hooks/useContextMenu.js
@@ -43,7 +43,7 @@ export function useContextMenu() {
   const { addPopup } = usePopup()
   const [popupId, setPopupId] = useState(uuidv4())
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
-  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils({})
+  const { deleteObject, moveObject, copyObject, editText, changeDimensionExtendLine } = useCommonUtils()
   const [qContextMenu, setQContextMenu] = useRecoilState(contextMenuState)
   const [cell, setCell] = useState(null)
   const [column, setColumn] = useState(null)
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 4adebc7c..fc7bd799 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -17,1416 +17,1465 @@
 //     }
 // }
 // CanvasMenu
-.canvas-menu-wrap{
-    position: fixed;
-    top: 46px;
-    left: 0;
-    display: block;
-    width: 100%;
-    min-width: 1280px;
-    padding-bottom: 0;
-    background-color: #383838;
-    transition: padding .17s ease-in-out;
-    z-index: 999;
-    .canvas-menu-inner{
-        position: relative;
-        display: flex;
-        align-items: center;
-        padding: 0 40px 0 20px;
-        background-color: #2C2C2C;
-        height: 46.8px;
-        z-index: 999;
-        .canvas-menu-list{
-            display: flex;
-            align-items: center;
-            height: 100%;
-            .canvas-menu-item{
-                display: flex;
-                align-items: center;
-                height: 100%;
-                button{
-                    display: flex;
-                    align-items: center;
-                    font-size: 12px;
-                    height: 100%;
-                    color: #fff;
-                    font-weight: 600;
-                    padding: 15px 20px;
-                    opacity: 0.55;
-                    transition: all .17s ease-in-out;
-                    .menu-icon{
-                        display: block;
-                        width: 14px;
-                        height: 14px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: contain;
-                        margin-right: 10px;
-                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
-                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
-                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
-                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
-                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
-                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
-                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
-                    }
-                }
-                &.active{
-                    background-color: #383838;
-                    button{
-                        opacity: 1;
-                    }
-                }
-            }
-        }
-        .canvas-side-btn-wrap{
-            display: flex;
-            align-items: center;
-            margin-left: auto;
-            .select-box{
-                width: 124px;
-                margin-right: 5px;
-                height: 30px;
-                > div{
-                    width: 100%;
-                }
-            }
-            .btn-from{
-                display: flex;
-                align-items: center;
-                gap: 5px;
-                button{
-                    display: block;
-                    width: 30px;
-                    height: 30px;
-                    border-radius: 2px;
-                    background-color: #3D3D3D;
-                    background-position: center;
-                    background-repeat: no-repeat;
-                    background-size: 15px 15px;
-                    transition: all .17s ease-in-out;
-                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
-                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
-                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
-                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
-                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
-                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
-                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
-                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
-                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
-                    &:hover{
-                        background-color: #1083E3;
-                    }
-                    &.active{
-                        background-color: #1083E3;
-                    }
-                }
-            }
-            .ico-btn-from{
-                display: flex;
-                align-items: center;
-                gap: 5px;
-                button{
-                    .ico{
-                        display: block;
-                        width: 15px;
-                        height: 15px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: contain;
-                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
-                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
-                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
-                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
-                    }
-                    .name{
-                        font-size: 12px;
-                        color: #fff;
-                    }
-                }
-                &.form06{
-                    .name{
-                        font-size: 13px;
-                    }
-                }
-            }
-            .vertical-horizontal{
-                display: flex;
-                min-width: 170px;
-                height: 28px;
-                margin: 0 5px;
-                border-radius: 2px;
-                background: #373737;
-                line-height: 28px;
-                overflow: hidden;
-                span{
-                    padding: 0 10px;
-                    font-size: 13px;
-                    color: #fff;
-                }
-                button{
-                    margin-left: auto;
-                    height: 100%;
-                    background-color: #4B4B4B;
-                    font-size: 13px;
-                    font-weight: 400;
-                    color: #fff;
-                    padding: 0 7.5px;
-                    transition: all .17s ease-in-out;
-                }
-                &.on{
-                    button{
-                        background-color: #1083E3;
-                    }
-                }
-            }
-            .size-control{
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                gap: 10px;
-                background-color: #3D3D3D;
-                border-radius: 2px;
-                width: 100px;
-                height: 30px;
-                margin: 0 5px;
-                span{
-                    font-size: 13px;
-                    color: #fff;
-                }
-                .control-btn{
-                    display: block;
-                    width: 12px;
-                    height: 12px;
-                    background-repeat: no-repeat;
-                    background-size: cover;
-                    background-position: center;
-                    &.minus{
-                        background-image: url(../../public/static/images/canvas/minus.svg);
-                    }
-                    &.plus{
-                        background-image: url(../../public/static/images/canvas/plus.svg);
-                    }
-                }
-            }
-        }
-    }
-    .canvas-depth2-wrap{
-        position: absolute;
-        top: -100%;
-        left: 0;
-        background-color: #383838;
-        width: 100%;
-        height: 50px;
-        transition: all .17s ease-in-out;
-        .canvas-depth2-inner{
-            display: flex;
-            align-items: center;
-            padding: 0 40px;
-            height: 100%;
-            .canvas-depth2-list{
-                display: flex;
-                align-items: center ;
-                height: 100%;
-                .canvas-depth2-item{
-                    display: flex; 
-                    align-items: center;
-                    margin-right: 26px;
-                    height: 100%;
-                    button{
-                        position: relative;
-                        opacity: 0.55;
-                        color: #fff;
-                        font-size: 12px;
-                        font-weight: normal;
-                        height: 100%;
-                        padding-right: 12px;
-                    }
-                    &.active{
-                        button{
-                            opacity: 1;
-                            font-weight: 600;
-                            &:after{
-                                content: '';
-                                position: absolute;
-                                top: 50%;
-                                right: 0;
-                                transform: translateY(-50%);
-                                width: 5px;
-                                height: 8px;
-                                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-                            }
-                        }
-                    }
-                }
-            }
-            .canvas-depth2-btn-list{
-                display: flex;
-                align-items: center;
-                margin-left: auto;
-                height: 100%;
-                .depth2-btn-box{
-                    display: flex;
-                    align-items: center;
-                    margin-right: 34px;
-                    height: 100%;
-                    transition: all .17s ease-in-out;
-                    button{
-                        position: relative;
-                        font-size: 12px;
-                        font-weight: 400;
-                        height: 100%;
-                        color: #fff;
-                        padding-right: 12px;
-                        &:after{
-                            content: '';
-                            position: absolute;
-                            top: 50%;
-                            right: 0;
-                            transform: translateY(-50%);
-                            width: 5px;
-                            height: 8px;
-                            background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-                        }
-                    }
-                    &:last-child{
-                        margin-right: 0;
-                    }
-                    &.mouse{
-                        opacity: 0.55;
-                    }
-                }
-            }
-        }
-        &.active{
-            top: 47px;
-        }
-    }
-    &.active{
-        padding-bottom: 50px;
-    }
-}
-
-// canvas-layout
-.canvas-content{
-    padding-top: 46.8px;
-    transition: all .17s ease-in-out;
-    .canvas-frame{
-        height: calc(100vh - 129.3px);
-    }
-    &.active{
-        padding-top: calc(46.8px + 50px);
-        .canvas-frame{
-            height: calc(100vh - 179.4px);
-        }
-    }
-}
-.canvas-layout{
-    padding-top: 37px;
-    .canvas-page-list{
-        position: fixed;
-        top: 92.8px;
-        left: 0;
-        display: flex;
-        background-color: #1C1C1C;
-        border-top: 1px solid #000;
-        width: 100%;
-        min-width: 1280px;
-        transition: all .17s ease-in-out;
-        z-index: 99;
-        &.active{
-            top: calc(92.8px + 50px);
-        }
-        .canvas-plane-wrap{
-            display: flex;
-            align-items: center;
-            max-width: calc(100% - 45px);
-            .canvas-page-box{
-                display: flex;
-                align-items: center;
-                background-color: #1c1c1c;
-                padding: 9.6px 20px;
-                border-right:1px solid #000;
-                min-width: 0;
-                transition: all .17s ease-in-out;
-                span{
-                    display: flex;
-                    align-items: center;
-                    width: 100%;
-                    font-size: 12px;
-                    font-family: 'Pretendard', sans-serif;
-                    color: #AAA;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    overflow: hidden;
-                }
-                .close{
-                    flex: none;
-                    display: block;
-                    width: 7px;
-                    height: 8px;
-                    margin-left: 15px;
-                    background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
-                    background-size: cover;
-                }
-                &.on{
-                    background-color: #fff;
-                    span{
-                        font-weight: 600;
-                        color: #101010;
-                    }
-                    .close{
-                        background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
-                    }
-                    &:hover{
-                        background-color: #fff;
-                    }
-                }
-                &:hover{
-                    background-color: #000;
-                }
-            }
-        }
-        .plane-add{
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            width: 45px;
-            padding: 13.5px 0;
-            background-color: #1C1C1C;
-            border-right: 1px solid #000;
-            transition: all .17s ease-in-out;
-            span{
-                display: block;
-                width: 9px;
-                height: 9px;
-                background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
-                background-size: cover;
-            }
-            &:hover{
-                background-color: #000;
-            }
-        }
-    }
-}
-
-.canvas-frame{
+.canvas-menu-wrap {
+  position: fixed;
+  top: 46px;
+  left: 0;
+  display: block;
+  width: 100%;
+  min-width: 1280px;
+  padding-bottom: 0;
+  background-color: #383838;
+  transition: padding 0.17s ease-in-out;
+  z-index: 999;
+  .canvas-menu-inner {
     position: relative;
-    // height: calc(100% - 36.5px);
-    background-color: #F4F4F7;
-    overflow: auto;
-    transition: all .17s ease-in-out;
-    // &::-webkit-scrollbar {
-    //     width: 10px;
-    //     height: 10px;
-    //     background-color: #fff;
-    // }
-    // &::-webkit-scrollbar-thumb {
-    //     background-color: #C1CCD7;
-    //     border-radius: 30px;
-    // }
-    // &::-webkit-scrollbar-track {
-    //     background-color: #fff;
-    // }
-    .canvas-container{
-        margin: 0 auto;
-        background-color: #fff;
-    }
-    canvas{
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-    }
-}
-
-// sub-page
-.sub-header{
-    position: fixed;
-    top: 46px;
-    left: 0;
-    width: 100%;
-    min-width: 1280px;
-    height: 46px;
-    border-bottom: 1px solid #000;
-    background: #2C2C2C;
+    display: flex;
+    align-items: center;
+    padding: 0 40px 0 20px;
+    background-color: #2c2c2c;
+    height: 46.8px;
     z-index: 999;
-    .sub-header-inner{
+    .canvas-menu-list {
+      display: flex;
+      align-items: center;
+      height: 100%;
+      .canvas-menu-item {
         display: flex;
         align-items: center;
         height: 100%;
-        padding: 0 100px;
-        .sub-header-title-wrap{
-            display: flex;
-            align-items: center;
-            .title-item{
-                position: relative;
-                padding: 0 24px;
-                a{
-                    display: flex;
-                    align-items: center;
-                    .icon{
-                        width: 22px;
-                        height: 22px;
-                        margin-right: 8px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: cover;
-                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
-                    }
-                }
-                &:after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 1px;
-                    height: 16px;
-                    background-color: #D9D9D9;
-                }
-                &:first-child{
-                    padding-left: 0;
-                }
-                &:last-child{
-                    padding-right: 0;
-                    &:after{
-                        display: none;
-                    }
-                }
+        button {
+          display: flex;
+          align-items: center;
+          font-size: 12px;
+          height: 100%;
+          color: #fff;
+          font-weight: 600;
+          padding: 15px 20px;
+          opacity: 0.55;
+          transition: all 0.17s ease-in-out;
+          .menu-icon {
+            display: block;
+            width: 14px;
+            height: 14px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+            margin-right: 10px;
+            &.con00 {
+              background-image: url(/static/images/canvas/menu_icon00.svg);
             }
+            &.con01 {
+              background-image: url(/static/images/canvas/menu_icon01.svg);
+            }
+            &.con02 {
+              background-image: url(/static/images/canvas/menu_icon02.svg);
+            }
+            &.con03 {
+              background-image: url(/static/images/canvas/menu_icon03.svg);
+            }
+            &.con04 {
+              background-image: url(/static/images/canvas/menu_icon04.svg);
+            }
+            &.con05 {
+              background-image: url(/static/images/canvas/menu_icon05.svg);
+            }
+            &.con06 {
+              background-image: url(/static/images/canvas/menu_icon06.svg);
+            }
+          }
         }
-        .sub-header-title{
-            font-size: 16px;
+        &.active {
+          background-color: #383838;
+          button {
+            opacity: 1;
+          }
+        }
+      }
+    }
+    .canvas-side-btn-wrap {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+      .select-box {
+        width: 124px;
+        margin-right: 5px;
+        height: 30px;
+        > div {
+          width: 100%;
+        }
+      }
+      .btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button {
+          display: block;
+          width: 30px;
+          height: 30px;
+          border-radius: 2px;
+          background-color: #3d3d3d;
+          background-position: center;
+          background-repeat: no-repeat;
+          background-size: 15px 15px;
+          transition: all 0.17s ease-in-out;
+          &.btn01 {
+            background-image: url(../../public/static/images/canvas/side_icon03.svg);
+          }
+          &.btn02 {
+            background-image: url(../../public/static/images/canvas/side_icon02.svg);
+          }
+          &.btn03 {
+            background-image: url(../../public/static/images/canvas/side_icon01.svg);
+          }
+          &.btn04 {
+            background-image: url(../../public/static/images/canvas/side_icon04.svg);
+          }
+          &.btn05 {
+            background-image: url(../../public/static/images/canvas/side_icon05.svg);
+          }
+          &.btn06 {
+            background-image: url(../../public/static/images/canvas/side_icon06.svg);
+          }
+          &.btn07 {
+            background-image: url(../../public/static/images/canvas/side_icon07.svg);
+          }
+          &.btn08 {
+            background-image: url(../../public/static/images/canvas/side_icon08.svg);
+          }
+          &.btn09 {
+            background-image: url(../../public/static/images/canvas/side_icon09.svg);
+          }
+          &:hover {
+            background-color: #1083e3;
+          }
+          &.active {
+            background-color: #1083e3;
+          }
+        }
+      }
+      .ico-btn-from {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button {
+          .ico {
+            display: block;
+            width: 15px;
+            height: 15px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: contain;
+            &.ico01 {
+              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
+            }
+            &.ico02 {
+              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
+            }
+            &.ico03 {
+              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
+            }
+            &.ico04 {
+              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
+            }
+          }
+          .name {
+            font-size: 12px;
             color: #fff;
-            font-weight: 600;
+          }
         }
-        .sub-header-location{
-            margin-left: auto;
-            display: flex;
-            align-items: center;
-            .location-item{
-                position: relative;
-                display: flex;
-                align-items: center;
-                padding: 0 10px;
-                span{
-                    display: flex;
-                    font-size: 12px;
-                    color: #AAA;
-                    font-weight: normal;
-                    cursor: default;
-                }
-                &:after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 4px;
-                    height: 6px;
-                    background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
-                }
-                &:first-child{
-                    padding-left: 0;
-                }
-                &:last-child{
-                    padding-right: 0;
-                    span{
-                        color: #fff;
-                    }
-                    &:after{
-                        display: none;
-                    }
-                }
-            }
+        &.form06 {
+          .name {
+            font-size: 13px;
+          }
         }
-    }
-}
-
-// sub content
-.sub-content{
-    padding-top: 46px;
-    .sub-content-inner{
-        max-width: 1760px;
-        margin: 0 auto;
-        padding: 20px 20px 0;
-        .sub-content-box{
-            margin-bottom: 20px;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    &.estimate{
+      }
+      .vertical-horizontal {
         display: flex;
-        flex-direction: column;
-        padding-top: 0;
-        .sub-content-inner{
-            flex: 1;
-            width: 100%;
+        min-width: 170px;
+        height: 28px;
+        margin: 0 5px;
+        border-radius: 2px;
+        background: #373737;
+        line-height: 28px;
+        overflow: hidden;
+        span {
+          padding: 0 10px;
+          font-size: 13px;
+          color: #fff;
         }
-    }
-}
-.sub-table-box{
-    padding: 20px;
-    border-radius: 6px; 
-    border: 1px solid #E9EAED;
-    background: #FFF;
-    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-    .table-box-title-wrap{
-        display: flex;
-        align-items: center;
-        margin-bottom: 15px;
-        .title-wrap{
-            display: flex;
-            align-items: center;
-            h3{
-                display: block;
-                font-size: 15px;
-                color: #101010;
-                font-weight: 600;
-                margin-right: 14px;
-                &.product{
-                    margin-right: 10px;
-                }
-            }
-            .product_tit{
-                position: relative;
-                font-size: 15px;
-                font-weight: 600;
-                color: #1083E3;
-                padding-left: 10px;
-                &::before{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    left: 0;
-                    transform: translateY(-50%);
-                    width: 1px;
-                    height: 11px;
-                    background-color: #D9D9D9;
-                }
-            }
-            .option{
-                padding-left: 5px;
-                font-size: 13px;
-                color: #101010;
-                font-weight: 400;
-            }
-            .info-wrap{
-                display: flex;
-                align-items: center;
-                li{
-                    position: relative;
-                    padding: 0 6px;
-                    font-size: 12px;
-                    color: #101010;
-                    font-weight: normal;
-                    span{
-                        font-weight: 600;
-                        &.red{
-                            color: #E23D70;
-                        }
-                    }
-                    &:after{
-                        content: '';
-                        position: absolute;
-                        top: 50%;
-                        right: 0;
-                        transform: translateY(-50%);
-                        width: 1px;
-                        height: 11px;
-                        background-color: #D9D9D9;
-                    }
-                    &:first-child{padding-left: 0;}
-                    &:last-child{padding-right: 0;&::after{display: none;}}
-                }
-            }
+        button {
+          margin-left: auto;
+          height: 100%;
+          background-color: #4b4b4b;
+          font-size: 13px;
+          font-weight: 400;
+          color: #fff;
+          padding: 0 7.5px;
+          transition: all 0.17s ease-in-out;
         }
-    }
-    .left-unit-box{
-        margin-left: auto;
-        display: flex;
-        align-items: center;
-    }
-    .promise-gudie{
-        display: block;
-        font-size: 13px;
-        font-weight: 700;
-        color: #101010;
-        margin-bottom: 20px;
-    }
-    .important{
-        color: #f00;
-    }
-    .sub-center-footer{
+        &.on {
+          button {
+            background-color: #1083e3;
+          }
+        }
+      }
+      .size-control {
         display: flex;
         align-items: center;
         justify-content: center;
-        margin-top: 20px;
-    }
-    .sub-right-footer{
-        display: flex;
-        align-items: center;
-        justify-content: flex-end;
-        margin-top: 20px;
-    }
-}
-.pagination-wrap{
-    margin-top: 24px;
-}
-
-.infomation-wrap{
-    margin-bottom: 30px;
-}
-
-.infomation-box-wrap{
-    display: flex;
-    gap: 10px;
-    .sub-table-box{
-        flex: 1 ;
-    }
-    .info-title{
-        font-size: 14px;
-        font-weight: 500;
-        color: #344356;
-        margin-bottom: 10px;
-    }
-    .info-inner{
-        position: relative;
-        font-size: 13px;
-        color: #344356;
-        .copy-ico{
-            position: absolute;
-            bottom: 0;
-            right: 0;
-            width: 16px;
-            height: 16px;
-            background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
-            background-size: cover;
+        gap: 10px;
+        background-color: #3d3d3d;
+        border-radius: 2px;
+        width: 100px;
+        height: 30px;
+        margin: 0 5px;
+        span {
+          font-size: 13px;
+          color: #fff;
         }
+        .control-btn {
+          display: block;
+          width: 12px;
+          height: 12px;
+          background-repeat: no-repeat;
+          background-size: cover;
+          background-position: center;
+          &.minus {
+            background-image: url(../../public/static/images/canvas/minus.svg);
+          }
+          &.plus {
+            background-image: url(../../public/static/images/canvas/plus.svg);
+          }
+        }
+      }
     }
-}
-
-// 견적서
-.estimate-list-wrap{
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    &.one{
-        .estimate-box{
-            &:last-child{
-                min-width: unset;
-            }
-        }
-    }
-    .estimate-box{
-        flex: 1 ;
-        display: flex;
-        align-items: center;
-        &:last-child{
-            flex: none;
-            min-width: 220px;
-        }
-        .estimate-tit{
-            width: 105px;
-            height: 30px;
-            line-height: 30px;
-            background-color: #F4F4F7;
-            border-radius: 100px;
-            text-align: center;
-            font-size: 13px;
-            font-weight: 500;
-            color: #344356;
-        }
-        .estimate-name{
-            font-size: 13px;
-            color: #344356;
-            margin-left: 14px;
-            font-weight: 400;
-            &.blue{
-                font-size: 16px;
-                font-weight: 700;
-                color: #1083E3;
-            }
-            &.red{
-                font-size: 16px;
-                font-weight: 700;
-                color: #D72A2A;
-            }
-        }
-    }
-    &:last-child{
-        margin-bottom: 0;
-    }
-}
-
-// file drag box
-.drag-file-box{
-    padding: 10px;
-    .btn-area{
-        padding-bottom: 15px;
-        border-bottom: 1px solid #ECF0F4;
-        .file-upload{
-            display: inline-block;
-            height: 30px;
-            background-color: #94A0AD;
-            padding: 0 10px;
-            border-radius: 2px;
-            font-size: 13px;
-            line-height: 30px;
-            color: #fff;
-            font-weight: 500;
-            cursor: pointer;
-            transition: background .15s ease-in-out;
-            &:hover{
-                background-color: #607F9A;
-            }
-        }
-    }
-    .drag-file-area{
-        position: relative;
-        margin-top: 15px;
-        p{
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 13px;
-            color: #ccc;
-            font-weight: 400;
-            cursor: default;
-        }
-    }
-    .file-list{
-        .file-item{
-            margin-bottom: 15px;
-            span{
-                position: relative;
-                font-size: 13px;
-                color: #45576F;
-                font-weight: 400;
-                white-space: nowrap;
-                padding-right: 55px;
-                button{
-                    position: absolute;
-                    top: 50%;
-                    right: 0;
-                    transform: translateY(-50%);
-                    width: 15px;
-                    height: 15px;
-                    background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
-                    background-size: cover;
-                }
-            }
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-}
-
-.special-note-check-wrap{
-    display: grid;
-    grid-template-columns: repeat(5, 1fr);
-    border: 1px solid #ECF0F4;
-    border-radius: 3px;
-    margin-bottom: 30px;
-    .special-note-check-item{
-        padding: 14px 10px;
-        border-right: 1px solid #ECF0F4;
-        border-top: 1px solid #ECF0F4;
-        &:nth-child(5n){
-            border-right: none;
-        }
-        &:nth-child(-n+5){
-            border-top: none;
-        }
-        &.act{
-            background-color: #F7F9FA;
-        }
-    }
-}
-
-.calculation-estimate{
-    border: 1px solid #ECF0F4;
-    border-radius: 3px;
-    padding: 24px;
-    max-height: 350px;
-    overflow-y: auto;
-    margin-bottom: 30px;
-    dl{
-        margin-bottom: 35px;
-        &:last-child{
-            margin-bottom: 0;
-        }
-        dt{
-            font-size: 13px;
-            font-weight: 600;
-            color: #1083E3;
-            margin-bottom: 15px;
-        }
-        dd{
-            font-size: 12px;
-            font-weight: 400;
-            color: #45576F;
-            margin-bottom: 8px;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-        background-color: #d9dee2;
-    }
-    &::-webkit-scrollbar-track {
-        background-color: transparent;
-    }
-}
-.esimate-wrap{
-    margin-bottom: 20px;
-}
-
-.estimate-product-option{
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-    .product-price-wrap{
-        display: flex;
-        align-items: center;
-        .product-price-tit{
-            font-size: 13px;
-            font-weight: 400;
-            color: #45576F;
-            margin-right: 10px;
-        }
-        .select-wrap{
-            width: 110px;
-        }
-    }
-    .product-edit-wrap{
-        display: flex;
-        align-items: center;
-        margin-left: auto;
-        .product-edit-explane{
-            display: flex;
-            align-items: center;
-            margin-right: 15px;
-            .explane-item{
-                position: relative;
-                display: flex;
-                align-items: center;
-                padding: 0 10px;
-                font-size: 12px;
-                font-weight: 400;
-                span{
-                    width: 20px;
-                    height: 20px;
-                    margin-right: 5px;
-                    background-size: cover;
-                    background-repeat: no-repeat;
-                    background-position: center;
-                }
-                &:before{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    left: 0;
-                    transform: translateY(-50%);
-                    width: 1px;
-                    height: 12px;
-                    background-color: #D9D9D9;
-                }
-                &:first-child{
-                    padding-left: 0;
-                    &::before{
-                        display: none;
-                    }
-                }
-                &:last-child{
-                    padding-right: 0;
-                }
-                &.item01{
-                    color: #3BBB48;
-                    span{
-                        background-image: url(../../public/static/images/sub/open_ico.svg);
-                    }
-                }
-                &.item02{
-                    color: #909000;
-                    span{
-                        background-image: url(../../public/static/images/sub/change_ico.svg);
-                    }
-                }
-                &.item03{
-                    color: #0191C9;
-                    span{
-                        background-image: url(../../public/static/images/sub/attachment_ico.svg);
-                    }
-                }
-                &.item04{
-                    color: #F16A6A;
-                    span{
-                        background-image: url(../../public/static/images/sub/click_check_ico.svg);
-                    }
-                }
-            }
-        }
-        .product-edit-btn{
-            display: flex;
-            align-items: center;
-            button{
-                display: flex;
-                align-items: center;
-                span{
-                    width: 13px;
-                    height: 13px;
-                    margin-right: 5px;
-                    background-size: cover;
-                    &.plus{
-                        background: url(../../public/static/images/sub/plus_btn.svg)no-repeat center;
-                    }
-                    &.minus{
-                        background: url(../../public/static/images/sub/minus_btn.svg)no-repeat center;
-                    }
-                }
-            }
-        }
-    }
-}
-
-// 발전시물레이션
-.chart-wrap{
-    display: flex;
-    gap: 20px;
+  }
+  .canvas-depth2-wrap {
+    position: absolute;
+    top: -100%;
+    left: 0;
+    background-color: #383838;
     width: 100%;
-    .sub-table-box{
-        height: 100%;
-    }
-    .chart-inner{
-        flex: 1;
-        .chart-box{
-            margin-bottom: 30px;
-        }
-    }
-    .chart-table-wrap{
+    height: 50px;
+    transition: all 0.17s ease-in-out;
+    .canvas-depth2-inner {
+      display: flex;
+      align-items: center;
+      padding: 0 40px;
+      height: 100%;
+      .canvas-depth2-list {
         display: flex;
-        flex-direction: column;
-        flex: none;
-        width: 650px;
-        .sub-table-box{
-            flex: 1;
-            &:first-child{
-                margin-bottom: 20px;
-            }
-        }
-    }
-}
-
-.chart-month-table{
-    table{
-        table-layout: fixed;
-        border-collapse:collapse;
-        border: 1px solid #ECF0F4;
-        border-radius: 4px;
-        thead{
-            th{
-                padding: 4.5px 0;
-                border-bottom: 1px solid #ECF0F4;
-                text-align: center;
-                font-size: 13px;
-                color: #45576F;
-                font-weight: 500;
-                background-color: #F8F9FA;
-            }
-        }
-        tbody{
-            td{
-                font-size: 13px;
-                color: #45576F;
-                text-align: center;
-                padding: 4.5px 0;
-            }
-        }
-    }
-}
-
-.simulation-guide-wrap{
-    display: flex;
-    padding: 20px;
-    .simulation-tit-wrap{
-        flex: none;
-        padding-right: 40px;
-        border-right: 1px solid #EEEEEE;
-        span{
-            display: block;
+        align-items: center;
+        height: 100%;
+        .canvas-depth2-item {
+          display: flex;
+          align-items: center;
+          margin-right: 26px;
+          height: 100%;
+          button {
             position: relative;
-            padding-left: 60px;
-            font-size: 15px;
-            color: #14324F;
-            font-weight: 600;
-            &::before{
+            opacity: 0.55;
+            color: #fff;
+            font-size: 12px;
+            font-weight: normal;
+            height: 100%;
+            padding-right: 12px;
+          }
+          &.active {
+            button {
+              opacity: 1;
+              font-weight: 600;
+              &:after {
                 content: '';
                 position: absolute;
                 top: 50%;
-                left: 0;
+                right: 0;
                 transform: translateY(-50%);
-                width: 40px;
-                height: 40px;
-                background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
-                background-size: cover;
+                width: 5px;
+                height: 8px;
+                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+              }
             }
+          }
         }
-    }
-    .simulation-guide-box{
-        flex: 1;
-        padding-left: 40px;
-        dl{
-            margin-bottom: 25px;
-            dt{
-                font-size: 13px;
-                color: #101010;
-                font-weight: 600;
-                margin-bottom: 5px;
-            }
-            dd{
-                font-size: 12px;
-                color: #45576F;
-                font-weight: 400;
-                line-height: 24px;
-            }
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-        ul, ol{
-            list-style: unset;
-        }
-    }
-}
-
-.module-total{
-    display: flex;
-    align-items: center;
-    background-color: #F8F9FA;
-    padding: 9px 0;
-    margin-right: 4px;
-    border: 1px solid #ECF0F4;
-    border-top: none;
-    .total-title{
-        flex: 1;
-        text-align: center;
-        font-size: 13px;
-        color: #344356;
-        font-weight: 500;
-    }
-    .total-num{
-        flex: none;
-        width: 121px;
-        text-align: center;
-        font-size: 15px;
-        color: #344356;
-        font-weight: 500;
-    }
-}
-
-// 물건상세
-.information-help-wrap{
-    display: flex;
-    padding: 24px;
-    background-color: #F4F4F4;
-    border-radius: 4px;
-    margin-bottom: 15px;
-    .information-help-tit-wrap{
-        position: relative;
+      }
+      .canvas-depth2-btn-list {
         display: flex;
         align-items: center;
-        padding-right: 40px;
-        border-right: 1px solid #E0E0E3;
-        .help-tit-icon{
-            width: 40px;
-            height: 40px;
-            border-radius: 50%;
-            margin-right: 10px;
-            background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center;
-            background-size: 20px 20px;
-        }
-        .help-tit{
-            font-size: 13px;
-            font-weight: 600;
-            color: #45576F;
-        }
-    }
-    .information-help-guide{
-        padding-left: 40px;
-        span{
-            display: block;
+        margin-left: auto;
+        height: 100%;
+        .depth2-btn-box {
+          display: flex;
+          align-items: center;
+          margin-right: 34px;
+          height: 100%;
+          transition: all 0.17s ease-in-out;
+          button {
+            position: relative;
             font-size: 12px;
             font-weight: 400;
-            color: #45576F;
-            margin-bottom: 7px;
-            &:last-child{
-                margin-bottom: 0;
+            height: 100%;
+            color: #fff;
+            padding-right: 12px;
+            &:after {
+              content: '';
+              position: absolute;
+              top: 50%;
+              right: 0;
+              transform: translateY(-50%);
+              width: 5px;
+              height: 8px;
+              background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
             }
+          }
+          &:last-child {
+            margin-right: 0;
+          }
+          &.mouse {
+            opacity: 0.55;
+          }
         }
+      }
     }
+    &.active {
+      top: 47px;
+    }
+  }
+  &.active {
+    padding-bottom: 50px;
+  }
 }
 
-.community-search-warp{
+// canvas-layout
+.canvas-content {
+  padding-top: 46.8px;
+  transition: all 0.17s ease-in-out;
+  .canvas-frame {
+    height: calc(100vh - 129.3px);
+  }
+  &.active {
+    padding-top: calc(46.8px + 50px);
+    .canvas-frame {
+      height: calc(100vh - 179.4px);
+    }
+  }
+}
+.canvas-layout {
+  padding-top: 37px;
+  .canvas-page-list {
+    position: fixed;
+    top: 92.8px;
+    left: 0;
+    display: flex;
+    background-color: #1c1c1c;
+    border-top: 1px solid #000;
+    width: 100%;
+    min-width: 1280px;
+    transition: all 0.17s ease-in-out;
+    z-index: 99;
+    &.active {
+      top: calc(92.8px + 50px);
+    }
+    .canvas-plane-wrap {
+      display: flex;
+      align-items: center;
+      max-width: calc(100% - 45px);
+      .canvas-page-box {
+        display: flex;
+        align-items: center;
+        background-color: #1c1c1c;
+        padding: 9.6px 20px;
+        border-right: 1px solid #000;
+        min-width: 0;
+        transition: all 0.17s ease-in-out;
+        span {
+          display: flex;
+          align-items: center;
+          width: 100%;
+          font-size: 12px;
+          font-family: 'Pretendard', sans-serif;
+          color: #aaa;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
+        .close {
+          flex: none;
+          display: block;
+          width: 7px;
+          height: 8px;
+          margin-left: 15px;
+          background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
+          background-size: cover;
+        }
+        &.on {
+          background-color: #fff;
+          span {
+            font-weight: 600;
+            color: #101010;
+          }
+          .close {
+            background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
+          }
+          &:hover {
+            background-color: #fff;
+          }
+        }
+        &:hover {
+          background-color: #000;
+        }
+      }
+    }
+    .plane-add {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 45px;
+      padding: 13.5px 0;
+      background-color: #1c1c1c;
+      border-right: 1px solid #000;
+      transition: all 0.17s ease-in-out;
+      span {
+        display: block;
+        width: 9px;
+        height: 9px;
+        background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
+        background-size: cover;
+      }
+      &:hover {
+        background-color: #000;
+      }
+    }
+  }
+}
+
+.canvas-frame {
+  position: relative;
+  // height: calc(100% - 36.5px);
+  background-color: #f4f4f7;
+  overflow: auto;
+  transition: all 0.17s ease-in-out;
+  // &::-webkit-scrollbar {
+  //     width: 10px;
+  //     height: 10px;
+  //     background-color: #fff;
+  // }
+  // &::-webkit-scrollbar-thumb {
+  //     background-color: #C1CCD7;
+  //     border-radius: 30px;
+  // }
+  // &::-webkit-scrollbar-track {
+  //     background-color: #fff;
+  // }
+  .canvas-container {
+    margin: 0 auto;
+    background-color: #fff;
+  }
+  canvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// sub-page
+.sub-header {
+  position: fixed;
+  top: 46px;
+  left: 0;
+  width: 100%;
+  min-width: 1280px;
+  height: 46px;
+  border-bottom: 1px solid #000;
+  background: #2c2c2c;
+  z-index: 999;
+  .sub-header-inner {
     display: flex;
-    flex-direction: column;
     align-items: center;
-    padding: 10px 0 30px 0;
-    border-bottom: 1px solid #E5E5E5;
-    margin-bottom: 24px;
-    .community-search-box{
+    height: 100%;
+    padding: 0 100px;
+    .sub-header-title-wrap {
+      display: flex;
+      align-items: center;
+      .title-item {
+        position: relative;
+        padding: 0 24px;
+        a {
+          display: flex;
+          align-items: center;
+          .icon {
+            width: 22px;
+            height: 22px;
+            margin-right: 8px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            &.drawing {
+              background-image: url(../../public/static/images/main/drawing_icon.svg);
+            }
+          }
+        }
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 16px;
+          background-color: #d9d9d9;
+        }
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+          &:after {
+            display: none;
+          }
+        }
+      }
+    }
+    .sub-header-title {
+      font-size: 16px;
+      color: #fff;
+      font-weight: 600;
+    }
+    .sub-header-location {
+      margin-left: auto;
+      display: flex;
+      align-items: center;
+      .location-item {
         position: relative;
         display: flex;
         align-items: center;
-        width: 580px;
-        height: 45px;
-        padding: 0 45px 0 20px;
-        margin-bottom: 20px;
-        border-radius: 2px;
-        border: 1px solid #101010;
-        .community-input{
-            width: 100%;
-            height: 100%;
-            font-size: 13px;
-            font-weight: 400;
-            color: #101010;
-            &::placeholder{
-                color: #C8C8C8;
-            }
+        padding: 0 10px;
+        span {
+          display: flex;
+          font-size: 12px;
+          color: #aaa;
+          font-weight: normal;
+          cursor: default;
         }
-        .community-search-ico{
-            position: absolute;
-            top: 50%;
-            right: 20px;
-            transform: translateY(-50%);
-            flex: none;
-            width: 21px;
-            height: 100%;
-            background: url(../../public/static/images/sub/community_search.svg)no-repeat center;
-            background-size: 21px 21px;
-            z-index: 3;
-        }
-    }
-    .community-search-keyword{
-        font-size: 13px;
-        font-weight: 400;
-        color: #45576F;
-        span{
-            font-weight: 600;
-            color: #F16A6A;
+        &:after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 4px;
+          height: 6px;
+          background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
         }
+        &:first-child {
+          padding-left: 0;
+        }
+        &:last-child {
+          padding-right: 0;
+          span {
+            color: #fff;
+          }
+          &:after {
+            display: none;
+          }
+        }
+      }
     }
+  }
 }
 
-// 자료 다운로드
-.file-down-list{
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 14px;
-    .file-down-item{
+// sub content
+.sub-content {
+  padding-top: 46px;
+  .sub-content-inner {
+    max-width: 1760px;
+    margin: 0 auto;
+    padding: 20px 20px 0;
+    .sub-content-box {
+      margin-bottom: 20px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &.estimate {
+    display: flex;
+    flex-direction: column;
+    padding-top: 0;
+    .sub-content-inner {
+      flex: 1;
+      width: 100%;
+    }
+  }
+}
+.sub-table-box {
+  padding: 20px;
+  border-radius: 6px;
+  border: 1px solid #e9eaed;
+  background: #fff;
+  box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+  .table-box-title-wrap {
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    .title-wrap {
+      display: flex;
+      align-items: center;
+      h3 {
+        display: block;
+        font-size: 15px;
+        color: #101010;
+        font-weight: 600;
+        margin-right: 14px;
+        &.product {
+          margin-right: 10px;
+        }
+      }
+      .product_tit {
+        position: relative;
+        font-size: 15px;
+        font-weight: 600;
+        color: #1083e3;
+        padding-left: 10px;
+        &::before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 11px;
+          background-color: #d9d9d9;
+        }
+      }
+      .option {
+        padding-left: 5px;
+        font-size: 13px;
+        color: #101010;
+        font-weight: 400;
+      }
+      .info-wrap {
         display: flex;
         align-items: center;
-        padding: 24px;
-        border-radius: 4px;
-        border: 1px solid #E5E5E5;
-        background: #FFF; 
-        transition: all .15s ease-in-out;
-        .file-item-info{
-            .item-num{
-                display: inline-block;
-                padding: 6px 17.5px;
-                border-radius: 60px;
-                background-color: #F4F4F7;
-                font-size: 13px;
-                font-weight: 600;
-                color: #101010;
-                margin-bottom: 15px;
+        li {
+          position: relative;
+          padding: 0 6px;
+          font-size: 12px;
+          color: #101010;
+          font-weight: normal;
+          span {
+            font-weight: 600;
+            &.red {
+              color: #e23d70;
             }
-            .item-name{
-                font-size: 16px;
-                color: #101010;
-                font-weight: 500;
-                margin-bottom: 13px;
-            }
-            .item-date{
-                font-size: 13px;
-                font-weight: 400;
-                color: #344356;
+          }
+          &:after {
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 1px;
+            height: 11px;
+            background-color: #d9d9d9;
+          }
+          &:first-child {
+            padding-left: 0;
+          }
+          &:last-child {
+            padding-right: 0;
+            &::after {
+              display: none;
             }
+          }
         }
-        .file-down-box{
-            display: flex;
-            align-items: center;
-            flex: none;
-            margin-left: auto;
-            height: 100%;
-            .file-down-btn{
-                width: 36px;
-                height: 36px;
-                background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center;
-                background-size: cover;
-            }
-        }
-        &:hover{
-            background-color: #F4F4F7;
-        }
+      }
     }
-}
-
-.file-down-nodata{
+  }
+  .left-unit-box {
+    margin-left: auto;
+    display: flex;
+    align-items: center;
+  }
+  .promise-gudie {
+    display: block;
+    font-size: 13px;
+    font-weight: 700;
+    color: #101010;
+    margin-bottom: 20px;
+  }
+  .important {
+    color: #f00;
+  }
+  .sub-center-footer {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
-    height: 148px;
-    padding: 24px;
-    border-radius: 4px;
-    border: 1px solid #E5E5E5;
-    font-size: 16px;
+    margin-top: 20px;
+  }
+  .sub-right-footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: 20px;
+  }
+}
+.pagination-wrap {
+  margin-top: 24px;
+}
+
+.infomation-wrap {
+  margin-bottom: 30px;
+}
+
+.infomation-box-wrap {
+  display: flex;
+  gap: 10px;
+  .sub-table-box {
+    flex: 1;
+  }
+  .info-title {
+    font-size: 14px;
     font-weight: 500;
     color: #344356;
+    margin-bottom: 10px;
+  }
+  .info-inner {
+    position: relative;
+    font-size: 13px;
+    color: #344356;
+    .copy-ico {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      width: 16px;
+      height: 16px;
+      background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
+      background-size: cover;
+    }
+  }
+}
+
+// 견적서
+.estimate-list-wrap {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  &.one {
+    .estimate-box {
+      &:last-child {
+        min-width: unset;
+      }
+    }
+  }
+  .estimate-box {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    &:last-child {
+      flex: none;
+      min-width: 220px;
+    }
+    .estimate-tit {
+      width: 105px;
+      height: 30px;
+      line-height: 30px;
+      background-color: #f4f4f7;
+      border-radius: 100px;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      color: #344356;
+    }
+    .estimate-name {
+      font-size: 13px;
+      color: #344356;
+      margin-left: 14px;
+      font-weight: 400;
+      &.blue {
+        font-size: 16px;
+        font-weight: 700;
+        color: #1083e3;
+      }
+      &.red {
+        font-size: 16px;
+        font-weight: 700;
+        color: #d72a2a;
+      }
+    }
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// file drag box
+.drag-file-box {
+  padding: 10px;
+  .btn-area {
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ecf0f4;
+    .file-upload {
+      display: inline-block;
+      height: 30px;
+      background-color: #94a0ad;
+      padding: 0 10px;
+      border-radius: 2px;
+      font-size: 13px;
+      line-height: 30px;
+      color: #fff;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 0.15s ease-in-out;
+      &:hover {
+        background-color: #607f9a;
+      }
+    }
+  }
+  .drag-file-area {
+    position: relative;
+    margin-top: 15px;
+    p {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 13px;
+      color: #ccc;
+      font-weight: 400;
+      cursor: default;
+    }
+  }
+  .file-list {
+    .file-item {
+      margin-bottom: 15px;
+      span {
+        position: relative;
+        font-size: 13px;
+        color: #45576f;
+        font-weight: 400;
+        white-space: nowrap;
+        padding-right: 55px;
+        button {
+          position: absolute;
+          top: 50%;
+          right: 0;
+          transform: translateY(-50%);
+          width: 15px;
+          height: 15px;
+          background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.special-note-check-wrap {
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  border: 1px solid #ecf0f4;
+  border-radius: 3px;
+  margin-bottom: 30px;
+  .special-note-check-item {
+    padding: 14px 10px;
+    border-right: 1px solid #ecf0f4;
+    border-top: 1px solid #ecf0f4;
+    &:nth-child(5n) {
+      border-right: none;
+    }
+    &:nth-child(-n + 5) {
+      border-top: none;
+    }
+    &.act {
+      background-color: #f7f9fa;
+    }
+  }
+}
+
+.calculation-estimate {
+  border: 1px solid #ecf0f4;
+  border-radius: 3px;
+  padding: 24px;
+  max-height: 350px;
+  overflow-y: auto;
+  margin-bottom: 30px;
+  dl {
+    margin-bottom: 35px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+    dt {
+      font-size: 13px;
+      font-weight: 600;
+      color: #1083e3;
+      margin-bottom: 15px;
+    }
+    dd {
+      font-size: 12px;
+      font-weight: 400;
+      color: #45576f;
+      margin-bottom: 8px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+  &::-webkit-scrollbar {
+    width: 4px;
+    background-color: transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: #d9dee2;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+}
+.esimate-wrap {
+  margin-bottom: 20px;
+}
+
+.estimate-product-option {
+  display: flex;
+  align-items: center;
+  margin-bottom: 15px;
+  .product-price-wrap {
+    display: flex;
+    align-items: center;
+    .product-price-tit {
+      font-size: 13px;
+      font-weight: 400;
+      color: #45576f;
+      margin-right: 10px;
+    }
+    .select-wrap {
+      width: 110px;
+    }
+  }
+  .product-edit-wrap {
+    display: flex;
+    align-items: center;
+    margin-left: auto;
+    .product-edit-explane {
+      display: flex;
+      align-items: center;
+      margin-right: 15px;
+      .explane-item {
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        span {
+          width: 20px;
+          height: 20px;
+          margin-right: 5px;
+          background-size: cover;
+          background-repeat: no-repeat;
+          background-position: center;
+        }
+        &:before {
+          content: '';
+          position: absolute;
+          top: 50%;
+          left: 0;
+          transform: translateY(-50%);
+          width: 1px;
+          height: 12px;
+          background-color: #d9d9d9;
+        }
+        &:first-child {
+          padding-left: 0;
+          &::before {
+            display: none;
+          }
+        }
+        &:last-child {
+          padding-right: 0;
+        }
+        &.item01 {
+          color: #3bbb48;
+          span {
+            background-image: url(../../public/static/images/sub/open_ico.svg);
+          }
+        }
+        &.item02 {
+          color: #909000;
+          span {
+            background-image: url(../../public/static/images/sub/change_ico.svg);
+          }
+        }
+        &.item03 {
+          color: #0191c9;
+          span {
+            background-image: url(../../public/static/images/sub/attachment_ico.svg);
+          }
+        }
+        &.item04 {
+          color: #f16a6a;
+          span {
+            background-image: url(../../public/static/images/sub/click_check_ico.svg);
+          }
+        }
+      }
+    }
+    .product-edit-btn {
+      display: flex;
+      align-items: center;
+      button {
+        display: flex;
+        align-items: center;
+        span {
+          width: 13px;
+          height: 13px;
+          margin-right: 5px;
+          background-size: cover;
+          &.plus {
+            background: url(../../public/static/images/sub/plus_btn.svg) no-repeat center;
+          }
+          &.minus {
+            background: url(../../public/static/images/sub/minus_btn.svg) no-repeat center;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 발전시물레이션
+.chart-wrap {
+  display: flex;
+  gap: 20px;
+  width: 100%;
+  .sub-table-box {
+    height: 100%;
+  }
+  .chart-inner {
+    flex: 1;
+    .chart-box {
+      margin-bottom: 30px;
+    }
+  }
+  .chart-table-wrap {
+    display: flex;
+    flex-direction: column;
+    flex: none;
+    width: 650px;
+    .sub-table-box {
+      flex: 1;
+      &:first-child {
+        margin-bottom: 20px;
+      }
+    }
+  }
+}
+
+.chart-month-table {
+  table {
+    table-layout: fixed;
+    border-collapse: collapse;
+    border: 1px solid #ecf0f4;
+    border-radius: 4px;
+    thead {
+      th {
+        padding: 4.5px 0;
+        border-bottom: 1px solid #ecf0f4;
+        text-align: center;
+        font-size: 13px;
+        color: #45576f;
+        font-weight: 500;
+        background-color: #f8f9fa;
+      }
+    }
+    tbody {
+      td {
+        font-size: 13px;
+        color: #45576f;
+        text-align: center;
+        padding: 4.5px 0;
+      }
+    }
+  }
+}
+
+.simulation-guide-wrap {
+  display: flex;
+  padding: 20px;
+  .simulation-tit-wrap {
+    flex: none;
+    padding-right: 40px;
+    border-right: 1px solid #eeeeee;
+    span {
+      display: block;
+      position: relative;
+      padding-left: 60px;
+      font-size: 15px;
+      color: #14324f;
+      font-weight: 600;
+      &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%);
+        width: 40px;
+        height: 40px;
+        background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center;
+        background-size: cover;
+      }
+    }
+  }
+  .simulation-guide-box {
+    flex: 1;
+    padding-left: 40px;
+    dl {
+      margin-bottom: 25px;
+      dt {
+        font-size: 13px;
+        color: #101010;
+        font-weight: 600;
+        margin-bottom: 5px;
+      }
+      dd {
+        font-size: 12px;
+        color: #45576f;
+        font-weight: 400;
+        line-height: 24px;
+      }
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+    ul,
+    ol {
+      list-style: unset;
+    }
+  }
+}
+
+.module-total {
+  display: flex;
+  align-items: center;
+  background-color: #f8f9fa;
+  padding: 9px 0;
+  margin-right: 4px;
+  border: 1px solid #ecf0f4;
+  border-top: none;
+  .total-title {
+    flex: 1;
+    text-align: center;
+    font-size: 13px;
+    color: #344356;
+    font-weight: 500;
+  }
+  .total-num {
+    flex: none;
+    width: 121px;
+    text-align: center;
+    font-size: 15px;
+    color: #344356;
+    font-weight: 500;
+  }
+}
+
+// 물건상세
+.information-help-wrap {
+  display: flex;
+  padding: 24px;
+  background-color: #f4f4f4;
+  border-radius: 4px;
+  margin-bottom: 15px;
+  .information-help-tit-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    padding-right: 40px;
+    border-right: 1px solid #e0e0e3;
+    .help-tit-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      margin-right: 10px;
+      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
+      background-size: 20px 20px;
+    }
+    .help-tit {
+      font-size: 13px;
+      font-weight: 600;
+      color: #45576f;
+    }
+  }
+  .information-help-guide {
+    padding-left: 40px;
+    span {
+      display: block;
+      font-size: 12px;
+      font-weight: 400;
+      color: #45576f;
+      margin-bottom: 7px;
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.community-search-warp {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 0 30px 0;
+  border-bottom: 1px solid #e5e5e5;
+  margin-bottom: 24px;
+  .community-search-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 580px;
+    height: 45px;
+    padding: 0 45px 0 20px;
+    margin-bottom: 20px;
+    border-radius: 2px;
+    border: 1px solid #101010;
+    .community-input {
+      width: 100%;
+      height: 100%;
+      font-size: 13px;
+      font-weight: 400;
+      color: #101010;
+      &::placeholder {
+        color: #c8c8c8;
+      }
+    }
+    .community-search-ico {
+      position: absolute;
+      top: 50%;
+      right: 20px;
+      transform: translateY(-50%);
+      flex: none;
+      width: 21px;
+      height: 100%;
+      background: url(../../public/static/images/sub/community_search.svg) no-repeat center;
+      background-size: 21px 21px;
+      z-index: 3;
+    }
+  }
+  .community-search-keyword {
+    font-size: 13px;
+    font-weight: 400;
+    color: #45576f;
+    span {
+      font-weight: 600;
+      color: #f16a6a;
+    }
+  }
+}
+
+// 자료 다운로드
+.file-down-list {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 14px;
+  .file-down-item {
+    display: flex;
+    align-items: center;
+    padding: 24px;
+    border-radius: 4px;
+    border: 1px solid #e5e5e5;
+    background: #fff;
+    transition: all 0.15s ease-in-out;
+    .file-item-info {
+      .item-num {
+        display: inline-block;
+        padding: 6px 17.5px;
+        border-radius: 60px;
+        background-color: #f4f4f7;
+        font-size: 13px;
+        font-weight: 600;
+        color: #101010;
+        margin-bottom: 15px;
+      }
+      .item-name {
+        font-size: 16px;
+        color: #101010;
+        font-weight: 500;
+        margin-bottom: 13px;
+      }
+      .item-date {
+        font-size: 13px;
+        font-weight: 400;
+        color: #344356;
+      }
+    }
+    .file-down-box {
+      display: flex;
+      align-items: center;
+      flex: none;
+      margin-left: auto;
+      height: 100%;
+      .file-down-btn {
+        width: 36px;
+        height: 36px;
+        background: url(../../public/static/images/sub/file_down_btn.svg) no-repeat center;
+        background-size: cover;
+      }
+    }
+    &:hover {
+      background-color: #f4f4f7;
+    }
+  }
+}
+
+.file-down-nodata {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 148px;
+  padding: 24px;
+  border-radius: 4px;
+  border: 1px solid #e5e5e5;
+  font-size: 16px;
+  font-weight: 500;
+  color: #344356;
 }
 
 //신규물건 등록
-.product-input-wrap{
-    display: flex;
-    align-items: center;
-    width: 200px;
-    height: 30px;
-    background-color: #FAFAFA;
-    border: 1px solid #EEE;
-    padding: 0 10px;
-    input{
-        font-size: 13px;
-        font-weight: 400;
-        color: #999999;
-        padding: 0;
-        height: 100%;
-        flex: 1 ;
-        background-color: inherit;
-    }
-    .product-delete{
-        flex: none;
-        display: block;
-        width: 15px;
-        height: 100%;
-        background: url(../../public/static/images/sub/product-del.svg)no-repeat center;
-        background-size: 15px 15px;
-    }
+.product-input-wrap {
+  display: flex;
+  align-items: center;
+  width: 200px;
+  height: 30px;
+  background-color: #fafafa;
+  border: 1px solid #eee;
+  padding: 0 10px;
+  input {
+    font-size: 13px;
+    font-weight: 400;
+    color: #999999;
+    padding: 0;
+    height: 100%;
+    flex: 1;
+    background-color: inherit;
+  }
+  .product-delete {
+    flex: none;
+    display: block;
+    width: 15px;
+    height: 100%;
+    background: url(../../public/static/images/sub/product-del.svg) no-repeat center;
+    background-size: 15px 15px;
+  }
 }
 
 @media screen and (max-width: 1800px) {
-    .canvas-menu-wrap{
-        .canvas-menu-inner{
-            .canvas-menu-list{
-                .canvas-menu-item button{
-                    .menu-icon{
-                        margin-right: 5px;
-                    }
-                } 
-                .canvas-menu-item{
-                    button{
-                        padding: 15px 15px;
-                        font-size: 11px;
-                    }
-                }
-            }
+  .canvas-menu-wrap {
+    .canvas-menu-inner {
+      .canvas-menu-list {
+        .canvas-menu-item button {
+          .menu-icon {
+            margin-right: 5px;
+          }
         }
-        .canvas-depth2-wrap{
-            .canvas-depth2-inner{
-                .canvas-depth2-list{
-                    .canvas-depth2-item{
-                        button{
-                            font-size: 11px;
-                        }
-                    } 
-                } 
-            }
+        .canvas-menu-item {
+          button {
+            padding: 15px 15px;
+            font-size: 11px;
+          }
         }
-    } 
+      }
+    }
+    .canvas-depth2-wrap {
+      .canvas-depth2-inner {
+        .canvas-depth2-list {
+          .canvas-depth2-item {
+            button {
+              font-size: 11px;
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 1600px) {
-    .canvas-menu-wrap{
-        .canvas-menu-inner{
-            .canvas-menu-list{
-                .canvas-menu-item button{
-                    .menu-icon{
-                        display: none;
-                    }
-                } 
-            }
+  .canvas-menu-wrap {
+    .canvas-menu-inner {
+      .canvas-menu-list {
+        .canvas-menu-item button {
+          .menu-icon {
+            display: none;
+          }
         }
-    } 
-    .canvas-content{
-        .canvas-frame{
-            height: calc(100vh - 129.5px);
-        }
-        &.active{
-            .canvas-frame{
-                height: calc(100vh - 179.5px);
-            }
-        } 
-    } 
+      }
+    }
+  }
+  .canvas-content {
+    .canvas-frame {
+      height: calc(100vh - 129.5px);
+    }
+    &.active {
+      .canvas-frame {
+        height: calc(100vh - 179.5px);
+      }
+    }
+  }
 }
 
 @media screen and (max-width: 1500px) {
-    .canvas-menu-wrap{
-        .canvas-menu-inner{
-            .canvas-menu-list{
-                .canvas-menu-item{
-                    button{
-                        padding: 15px 10px;
-                        font-size: 10px;
-                    }
-                }
-            }
-            .canvas-side-btn-wrap{
-                .btn-from{
-                    gap: 3px;
-                }
-                .vertical-horizontal{
-                    margin: 0 3px;
-                    min-width: 150px;
-                }
-                .select-box{
-                    width: 100px;
-                    margin-right: 3px;
-                }
-                .size-control{
-                    width: 90px;
-                    margin: 0 3px;
-                }
-            } 
+  .canvas-menu-wrap {
+    .canvas-menu-inner {
+      .canvas-menu-list {
+        .canvas-menu-item {
+          button {
+            padding: 15px 10px;
+            font-size: 10px;
+          }
         }
+      }
+      .canvas-side-btn-wrap {
+        .btn-from {
+          gap: 3px;
+        }
+        .vertical-horizontal {
+          margin: 0 3px;
+          min-width: 150px;
+        }
+        .select-box {
+          width: 100px;
+          margin-right: 3px;
+        }
+        .size-control {
+          width: 90px;
+          margin: 0 3px;
+        }
+      }
     }
-    .sub-header{
-        .sub-header-inner{
-            .sub-header-title{
-                font-size: 15px;
+  }
+  .sub-header {
+    .sub-header-inner {
+      .sub-header-title {
+        font-size: 15px;
+      }
+      .sub-header-title-wrap {
+        .title-item {
+          a {
+            .icon {
+              width: 20px;
+              height: 20px;
             }
-            .sub-header-title-wrap{
-                .title-item{
-                    a{
-                        .icon{
-                            width: 20px;
-                            height: 20px;
-                        }
-                    } 
-                } 
-            } 
-        } 
-    } 
-    
+          }
+        }
+      }
+    }
+  }
 }