diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 446e003f..08b40e93 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -17,1735 +17,1447 @@
 //     }
 // }
 // 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 0.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 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);
-            }
-          }
-        }
-
-        &.active {
-          background-color: #383838;
-
-          button {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    .canvas-side-btn-wrap {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
-
-      .select-box {
-        width: 124px;
-        margin: 0 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);
-          }
-
-          &.btn10 {
-            background-image: url(../../public/static/images/canvas/side_icon10.svg);
-            background-size: 15px 14px;
-          }
-
-          &: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-right: 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 0.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;
-          cursor: pointer;
-        }
-
-        .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%;
+.canvas-menu-wrap{
+    position: fixed;
+    top: 46px;
     left: 0;
-    background-color: #383838;
+    display: block;
     width: 100%;
-    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 {
+    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;
-        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;
+        padding: 0 40px 0 20px;
+        background-color: #2C2C2C;
+        height: 46.8px;
+        z-index: 999;
+        .canvas-menu-list{
+            display: flex;
+            align-items: center;
             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-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-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 0.17s ease-in-out;
-
-          button {
-            position: relative;
-            font-size: 12px;
-            font-weight: 400;
+        .canvas-side-btn-wrap{
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+            .select-box{
+                width: 124px;
+                margin: 0 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);}
+                    &.btn10{background-image: url(../../public/static/images/canvas/side_icon10.svg); background-size: 15px 14px;}
+                    &: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-right: 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;
+                    cursor: pointer;
+                }
+                .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%;
-            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;
+            .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;
+                    }
+                }
             }
-          }
-
-          &:last-child {
-            margin-right: 0;
-          }
-
-          &.mouse {
-            opacity: 0.55;
-          }
         }
-      }
+        &.active{
+            top: 47px;
+        }
     }
-
-    &.active {
-      top: 47px;
+    &.active{
+        padding-bottom: 50px;
     }
-  }
-
-  &.active {
-    padding-bottom: 50px;
-  }
 }
 
 // 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-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 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 {
+.canvas-layout{
+    padding-top: 37px;
+    .canvas-page-list{
+        position: fixed;
+        top: 92.8px;
+        left: 0;
         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;
+        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);
         }
-
-        .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;
+        .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;
+                }
+            }
         }
-
-        &.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;
-          }
+        .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;
+            }
         }
-
-        &: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%;
-  }
+.canvas-frame{
+    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;
-  z-index: 999;
-
-  .sub-header-inner {
-    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;
-          }
-        }
-      }
-    }
-
-    .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;
+.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;
         align-items: center;
-        padding: 0 10px;
-
-        span {
-          display: flex;
-          font-size: 12px;
-          color: #aaa;
-          font-weight: normal;
-          cursor: default;
+        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;
+                    }
+                }
+            }
         }
-
-        &: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 {
+        .sub-header-title{
+            font-size: 16px;
             color: #fff;
-          }
-
-          &:after {
-            display: none;
-          }
+            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;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 
 // 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;
-      }
+.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%;
+    &.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 {
+.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;
-
-        li {
-          position: relative;
-          padding: 0 6px;
-          font-size: 12px;
-          color: #101010;
-          font-weight: normal;
-
-          span {
-            font-weight: 600;
-
-            &.red {
-              color: #e23d70;
+        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;
+                }
             }
-          }
-
-          &: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;
+            .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;}}
+                }
             }
-          }
         }
-      }
     }
-  }
-
-  .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;
-    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;
+    .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;
+        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;
+.estimate-list-wrap{
     display: flex;
     align-items: center;
-
-    &:last-child {
-      flex: none;
-      min-width: 220px;
+    margin-bottom: 10px;
+    &.one{
+        .estimate-box{
+            &:last-child{
+                min-width: unset;
+            }
+        }
     }
-
-    .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-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;
+            }
+        }
     }
-
-    .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;
     }
-  }
-
-  &: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;
+.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;
+                cursor: pointer;
+                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;
+            }
         }
-      }
-
-      &:last-child {
-        margin-bottom: 0;
-      }
     }
-  }
 }
 
-.estimate-arr-btn {
-  display: block;
-  width: 20px;
-  height: 20px;
-  background-color: #94a0ad;
-  border: 1px solid #94a0ad;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: url(../../public/static/images/canvas/estiment_arr.svg);
-  background-size: 11px 7px;
-  border-radius: 2px;
-
-  &.up {
-    rotate: 180deg;
-  }
-
-  &.on {
-    background-color: #fff;
-    border-color: #c2d0dd;
-    background-image: url(../../public/static/images/canvas/estiment_arr_color.svg);
-  }
-}
-
-.estimate-check-wrap {
-  .estimate-check-inner {
+.estimate-arr-btn{
     display: block;
-  }
-
-  &.hide {
-    border-bottom: 1px solid #ecf0f4;
-    margin-bottom: 15px;
-
-    .estimate-check-inner {
-      display: none;
+    width: 20px;
+    height: 20px;
+    background-color: #94A0AD;
+    border: 1px solid #94A0AD;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url(../../public/static/images/canvas/estiment_arr.svg);
+    background-size: 11px 7px;
+    border-radius: 2px;
+    &.up{
+        rotate: 180deg;
+    }
+    &.on{
+        background-color: #fff;
+        border-color: #C2D0DD;
+        background-image: url(../../public/static/images/canvas/estiment_arr_color.svg)
     }
-  }
 }
-
-.special-note-check-wrap {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  border-radius: 3px;
-  margin-bottom: 30px;
-
-  .special-note-check-item {
-    padding: 14px 10px;
-    border: 1px solid #ecf0f4;
-    margin-top: -1px;
-    margin-right: -1px;
-
-    &.act {
-      background-color: #f7f9fa;
+.estimate-check-wrap{
+    .estimate-check-inner{
+        display: block;
     }
-  }
-}
-
-.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 {
+    &.hide{
+        border-bottom: 1px solid #ECF0F4;
+        margin-bottom: 15px;
+        .estimate-check-inner{
             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;
+.special-note-check-wrap{
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    border-radius: 3px;
+    margin-bottom: 30px;
+    .special-note-check-item{
+        padding: 14px 10px;
+        border: 1px solid #ECF0F4;
+        margin-top: -1px;
+        margin-right: -1px;
+        &.act{
+            background-color: #F7F9FA;
+        }
+    }
+}
 
-      button {
+.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;
-
-        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;
-          }
+        .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 {
+.chart-wrap{
     display: flex;
-    flex-direction: column;
-    flex: none;
-    width: 650px;
-
-    .sub-table-box {
-      flex: 1;
-
-      &:first-child {
-        margin-bottom: 20px;
-      }
+    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;
+.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;
+            }
+        }
+    }
+}
 
-    thead {
-      th {
-        padding: 4.5px 0;
-        border-bottom: 1px solid #ecf0f4;
+.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: #45576f;
+        color: #344356;
         font-weight: 500;
-        background-color: #f8f9fa;
-      }
     }
-
-    tbody {
-      td {
-        font-size: 13px;
-        color: #45576f;
+    .total-num{
+        flex: none;
+        width: 121px;
         text-align: center;
-        padding: 4.5px 0;
-      }
+        font-size: 15px;
+        color: #344356;
+        font-weight: 500;
     }
-  }
-}
-
-.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;
+.information-help-wrap{
     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;
+    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;
+        }
     }
-
-    .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;
+            }
+        }
     }
-  }
-
-  .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;
+.community-search-warp{
     display: flex;
+    flex-direction: column;
     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: 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-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;
+        }
     }
-  }
-
-  .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-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 .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-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;
+.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;
-    width: 100%;
-    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;
+        width: 100%;
+        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-depth2-wrap {
-      .canvas-depth2-inner {
-        .canvas-depth2-list {
-          .canvas-depth2-item {
-            button {
-              font-size: 11px;
+    .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-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-right: 3px;
-          min-width: 150px;
-        }
-
-        .select-box {
-          width: 100px;
-          margin: 0 3px;
-        }
-
-        .size-control {
-          width: 90px;
-          margin: 0 3px;
-        }
-      }
-    }
-  }
-  .sub-header {
-    .sub-header-inner {
-      .sub-header-title {
-        font-size: 15px;
-      }
-
-      .sub-header-title-wrap {
-        .title-item {
-          a {
-            .icon {
-              width: 20px;
-              height: 20px;
+    .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-right: 3px;
+                    min-width: 150px;
+                }
+                .select-box{
+                    width: 100px;
+                    margin: 0 3px;
+                }
+                .size-control{
+                    width: 90px;
+                    margin: 0 3px;
+                }
+            } 
         }
-      }
     }
-  }
+    .sub-header{
+        .sub-header-inner{
+            .sub-header-title{
+                font-size: 15px;
+            }
+            .sub-header-title-wrap{
+                .title-item{
+                    a{
+                        .icon{
+                            width: 20px;
+                            height: 20px;
+                        }
+                    } 
+                } 
+            } 
+        } 
+    } 
+    
 }