From 8d25b6176f583fc9c176df51003426134913292d Mon Sep 17 00:00:00 2001
From: minsik <pro.mskim0215@gmail.com>
Date: Mon, 7 Oct 2024 14:58:17 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A8chore:=20Sync=20Sass?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/_contents.scss | 1879 +++++++++++++++++++++----------------
 src/styles/_modal.scss    |  117 +++
 src/styles/_reset.scss    | 1359 +++++++++++++++------------
 src/styles/_table.scss    |  354 +++----
 4 files changed, 2153 insertions(+), 1556 deletions(-)

diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 3d503b0b..7a357be7 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -1,845 +1,1140 @@
 // CanvasPage
-.canvas-wrap{
-    height: calc(100vh - 47px);
-    display: flex;
-    flex-direction: column;
-    .canvas-content{
-        flex: 1 1 auto;
-        .canvas-layout{
-            height: 100%;
-        }
+.canvas-wrap {
+  height: calc(100vh - 47px);
+  display: flex;
+  flex-direction: column;
+
+  .canvas-content {
+    flex: 1 1 auto;
+
+    .canvas-layout {
+      height: 100%;
     }
-    &.sub-wrap{
-        overflow: hidden;
-        .canvas-content{
-            height: calc(100% - 47px);
-        }
+  }
+
+  &.sub-wrap {
+    overflow: hidden;
+
+    .canvas-content {
+      height: calc(100% - 47px);
     }
+  }
 }
+
 // CanvasMenu
-.canvas-menu-wrap{
+.canvas-menu-wrap {
+  position: relative;
+  display: block;
+  width: 100%;
+  padding-bottom: 0;
+  background-color: #383838;
+  transition: padding .17s ease-in-out;
+
+  .canvas-menu-inner {
     position: relative;
-    display: block;
-    width: 100%;
-    padding-bottom: 0;
-    background-color: #383838;
-    transition: padding .17s ease-in-out;
-    .canvas-menu-inner{
-        position: relative;
-        display: flex;
-        align-items: center;
-        padding: 0 40px 0 20px;
-        background-color: #2C2C2C;
-        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: 16px;
-                        height: 16px;
-                        background-repeat: no-repeat;
-                        background-position: center;
-                        background-size: cover;
-                        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;
-                > 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-layout{
-    .canvas-page-list{
-        display: flex;
-        background-color: #1C1C1C;
-        border-top: 1px solid #000;
-        width: 100%;
-        .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{
-    position: relative;
-    height: calc(100% - 36.5px);
-    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%;
-    height: 46px;
-    border-bottom: 1px solid #000;
-    background: #2C2C2C;
+    display: flex;
+    align-items: center;
+    padding: 0 40px 0 20px;
+    background-color: #2C2C2C;
     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;
-                    }
-                }
-            }
-        }
-        .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;
-                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: 1720px;
-        margin: 0 auto;
-        padding-top: 20px;
-        .sub-content-box{
-            margin-bottom: 20px;
-            &:last-child{
-                margin-bottom: 0;
+        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: 16px;
+            height: 16px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            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);
+            }
+          }
         }
-    }
-    &.estimate{
-        display: flex;
-        flex-direction: column;
-        height: calc(100% - 36.5px);
-        overflow-y: auto;
-        padding-top: 0;
-        .sub-content-inner{
-            flex: 1;
-            width: 100%;
+
+        &.active {
+          background-color: #383838;
+
+          button {
+            opacity: 1;
+          }
         }
+      }
     }
-}
-.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{
+
+    .canvas-side-btn-wrap {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+
+      .select-box {
+        width: 124px;
+        margin-right: 5px;
+
+        > div {
+          width: 100%;
+        }
+      }
+
+      .btn-from {
         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;
-            }
-            .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;}}
-                }
-            }
+        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;
+          }
         }
-    }
-    .left-unit-box{
-        margin-left: auto;
+      }
+
+      .ico-btn-from {
         display: flex;
         align-items: center;
-    }
-    .promise-gudie{
-        display: block;
-        font-size: 13px;
-        font-weight: 700;
-        color: #101010;
-        margin-bottom: 20px;
-    }
-    .important{
-        color: #f00;
-    }
-    .sub-table-footer{
+        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;
-        margin-top: 20px;
-    }
-    .pagination-wrap{
-        margin-top: 24px;
-    }
-}
+        gap: 10px;
+        background-color: #3D3D3D;
+        border-radius: 2px;
+        width: 100px;
+        height: 30px;
+        margin: 0 5px;
 
-.infomation-box-wrap{
-    display: flex;
-    align-items: center;
-    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;
+        span {
+          font-size: 13px;
+          color: #fff;
         }
-    }
-}
 
-// 견적서
-.estimate-list-wrap{
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    .estimate-box{
-        flex: 1 ;
+        .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;
-        &: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;
-        }
-    }
-    &:last-child{
-        margin-bottom: 0;
-    }
-}
-
-// file drag box
-.drag-file-box{
-    padding: 10px;
-    .btn-area{
-        padding-bottom: 15px;
-        border-bottom: 1px solid #ECF0F4;
-    }
-    .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;
-            }
-        }
-    }
-}
-
-// 발전시물레이션
-.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;
-            }
-        }
-    }
-}
+        .canvas-depth2-item {
+          display: flex;
+          align-items: center;
+          margin-right: 26px;
+          height: 100%;
 
-.simulation-guide-wrap{
-    display: flex;
-    padding: 20px;
-    .simulation-tit-wrap{
-        padding-right: 40px;
-        border-right: 1px solid #EEEEEE;
-        span{
-            display: block;
+          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{
-        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;
+      }
+
+      .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;
+  }
 }
 
-.module-total{
+// canvas-layout
+.canvas-layout {
+  .canvas-page-list {
+    display: flex;
+    background-color: #1C1C1C;
+    border-top: 1px solid #000;
+    width: 100%;
+
+    .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 {
+  position: relative;
+  height: calc(100% - 36.5px);
+  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%;
+  height: 46px;
+  border-bottom: 1px solid #000;
+  background: #2C2C2C;
+  z-index: 999;
+
+  .sub-header-inner {
     display: flex;
     align-items: center;
-    background-color: #F8F9FA;
-    padding: 9px 0;
-    margin-right: 4px;
+    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;
+        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: 1720px;
+    margin: 0 auto;
+    padding-top: 20px;
+
+    .sub-content-box {
+      margin-bottom: 20px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+  }
+
+  &.estimate {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 36.5px);
+    overflow-y: auto;
+    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;
+      }
+
+      .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-table-footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 20px;
+  }
+
+  .pagination-wrap {
+    margin-top: 24px;
+  }
+}
+
+.infomation-box-wrap {
+  display: flex;
+  align-items: center;
+  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;
+
+  .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;
+    }
+  }
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// file drag box
+.drag-file-box {
+  padding: 10px;
+
+  .btn-area {
+    padding-bottom: 15px;
+    border-bottom: 1px solid #ECF0F4;
+  }
+
+  .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;
+      }
+    }
+  }
+}
+
+// 발전시물레이션
+.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-top: none;
-    .total-title{
-        flex: 1;
+    border-radius: 4px;
+
+    thead {
+      th {
+        padding: 4.5px 0;
+        border-bottom: 1px solid #ECF0F4;
         text-align: center;
         font-size: 13px;
-        color: #344356;
+        color: #45576F;
         font-weight: 500;
+        background-color: #F8F9FA;
+      }
     }
-    .total-num{
-        flex: none;
-        width: 121px;
+
+    tbody {
+      td {
+        font-size: 13px;
+        color: #45576F;
         text-align: center;
-        font-size: 15px;
-        color: #344356;
-        font-weight: 500;
+        padding: 4.5px 0;
+      }
     }
+  }
+}
+
+.simulation-guide-wrap {
+  display: flex;
+  padding: 20px;
+
+  .simulation-tit-wrap {
+    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 {
+    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;
+      }
+    }
+  }
+}
+
+.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;
+  }
+}
+
+// 패널 배치 집계
+
+.penal-wrap {
+  position: fixed;
+  top: 200px;
+  left: 50px;
+  z-index: 999999;
+  width: 237px;
+  height: 40px;
+  line-height: 40px;
+  background-color: #fff;
+  border: 1px solid #DFDFDF;
+  padding: 0 34px 0 10px;
+  border-radius: 2px;
+  box-shadow: 0px 7px 14px 0px rgba(0, 0, 0, 0.05);
+  cursor: pointer;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 12px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 6px;
+    background: url(../../public/static/images/canvas/penal_arr.svg) no-repeat center;
+    background-size: cover;
+  }
+
+  h2 {
+    font-size: 12px;
+    font-weight: 500;
+    color: #3D3D3D;
+  }
+
+  .penal-table-wrap {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    min-width: calc(100% + 2px);
+    background-color: #3D3D3D;
+    border: 1px solid #3D3D3D;
+    padding: 20px;
+
+    .penal-table {
+      table-layout: fixed;
+      border-collapse: collapse;
+
+      thead {
+        th {
+          text-align: center;
+          background-color: rgba(255, 255, 255, 0.05);
+          font-size: 12px;
+          font-weight: 500;
+          color: #fff;
+          border: 1px solid #505050;
+        }
+      }
+
+      tbody {
+        td {
+          font-size: 12px;
+          color: #fff;
+          font-weight: 400;
+          text-align: center;
+          padding: 0 10px;
+          border: 1px solid #505050;
+        }
+      }
+    }
+  }
+
+  &.act {
+    border: 1px solid #3D3D3D;
+    background-color: #3D3D3D;
+
+    h2 {
+      color: #fff;
+    }
+
+    &::before {
+      background: url(../../public/static/images/canvas/penal_arr_white.svg) no-repeat center;
+    }
+
+    .penal-table-wrap {
+      display: block;
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index be8b4185..16ef74e1 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -77,6 +77,10 @@ $alert-color: #101010;
     width: 640px;
   }
 
+  &.lx-2 {
+    width: 740px;
+  }
+
   &.lx {
     width: 770px;
   }
@@ -783,6 +787,7 @@ $alert-color: #101010;
       display: table-cell;
       vertical-align: middle;
       padding-bottom: 14px;
+      text-align: left;
     }
 
     .eaves-keraba-td {
@@ -1543,3 +1548,115 @@ $alert-color: #101010;
     }
   }
 }
+
+
+// 지붕모듈선택
+.roof-module-tab {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 14px;
+
+  .module-tab-bx {
+    flex: 1;
+    height: 34px;
+    line-height: 31px;
+    border: 1px solid #484848;
+    border-radius: 2px;
+    background-color: transparent;
+    font-size: 12px;
+    color: #AAA;
+    text-align: center;
+    cursor: default;
+    transition: all .15s ease-in-out;
+
+    &.act {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+      color: #fff;
+      font-weight: 500;
+    }
+  }
+
+  .tab-arr {
+    display: block;
+    width: 9px;
+    height: 14px;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    background-image: url(../../public/static/images/canvas/module_tab_arr.svg);
+    transition: all .15s ease-in-out;
+
+    &.act {
+      background-image: url(../../public/static/images/canvas/module_tab_arr_white.svg);
+    }
+  }
+}
+
+.roof-module-compas {
+  margin-bottom: 24px;
+
+  .compas-box-inner {
+    width: 280px;
+    height: 253px;
+
+    .circle {
+      top: 86%;
+
+      &:nth-child(1),
+      &:nth-child(7),
+      &:nth-child(13),
+      &:nth-child(19) {
+        &::before {
+          content: '';
+          position: absolute;
+          top: 20px;
+          left: 50%;
+          transform: translateX(-50%);
+          width: 1px;
+          height: 6px;
+          background-color: #8B8B8B;
+        }
+      }
+
+      i {
+        top: 32px;
+      }
+
+      &.act {
+        i {
+          color: #8B8B8B;
+        }
+      }
+    }
+  }
+}
+
+.center-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+}
+
+.module-table-flex-wrap {
+  display: flex;
+  gap: 10px;
+}
+
+.module-table-box {
+  flex: 1;
+  background-color: #3D3D3D;
+  border-radius: 2px;
+
+  .module-table-inneer {
+    padding: 10px;
+
+    .outline-form {
+      span {
+        width: auto;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index 6d899458..bd76935a 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,18 +1,21 @@
 * {
-    -webkit-text-size-adjust:none;
-    -moz-text-size-adjust:none;
-    -ms-text-size-adjust:none;
-    text-size-adjust: none;
-    box-sizing: content-box
+  -webkit-text-size-adjust: none;
+  -moz-text-size-adjust: none;
+  -ms-text-size-adjust: none;
+  text-size-adjust: none;
+  box-sizing: content-box
 }
+
 *, ::after, ::before {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
-html, body{
-    width: 100%;
-    height: 100%;
-    font-size: 16px;
+
+html, body {
+  width: 100%;
+  height: 100%;
+  font-size: 16px;
 }
+
 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 a, abbr, acronym, address, big, cite, code,
@@ -22,693 +25,837 @@ b, u, i, center,
 dl, dt, dd, ol, ul, li,
 fieldset, form, label, legend,
 table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed, 
-figure, figcaption, footer, header, hgroup, 
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
 menu, nav, output, ruby, section, summary,
 time, mark, audio, video {
-	margin: 0;
-	padding: 0;
-	border: 0;
-	font: inherit;
-	vertical-align: baseline;
-    font-family: 'Noto Sans JP', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-smooth: never;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font: inherit;
+  vertical-align: baseline;
+  font-family: 'Noto Sans JP', sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-smooth: never;
 }
+
 /* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure, 
+article, aside, details, figcaption, figure,
 footer, header, hgroup, menu, nav, section {
-	display: block;
+  display: block;
 }
+
 body {
-	line-height: 1.4;
+  line-height: 1.4;
+}
+
+body:first-of-type caption {
+  display: none;
 }
-body:first-of-type caption { display:none;}
 
 ol, ul {
-	list-style: none;
-}
-blockquote, q {
-	quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
-	content: '';
-	content: none;
-}
-table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing:0;
-    border:0 none;
-}
-caption, th, td {
-    text-align:left;
-    font-weight: normal;
-    border:0;
+  list-style: none;
 }
 
-a { 
-    cursor:pointer;
-    color:#000;
+blockquote, q {
+  quotes: none;
 }
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: '';
+  content: none;
+}
+
+table {
+  width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  border: 0 none;
+}
+
+caption, th, td {
+  text-align: left;
+  font-weight: normal;
+  border: 0;
+}
+
+a {
+  cursor: pointer;
+  color: #000;
+}
+
 a, a:hover, a:active {
-    text-decoration:none;
-    -webkit-tap-highlight-color: transparent;
+  text-decoration: none;
+  -webkit-tap-highlight-color: transparent;
 }
+
 /*form_style*/
 input, select, textarea, button, a, label {
-    -webkit-tap-highlight-color:rgba(0,0,0,0);
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-button,input[type=text], input[type=button] {
-    -webkit-appearance: none;
-    -webkit-border-radius: 0;
-    -webkit-appearance:none;
-    appearance: none;
-    border-radius: 0
+
+button, input[type=text], input[type=button] {
+  -webkit-appearance: none;
+  -webkit-border-radius: 0;
+  -webkit-appearance: none;
+  appearance: none;
+  border-radius: 0
 }
+
 input[type=checkbox], input[type=radio] {
-    box-sizing: border-box;
-    padding: 0;
+  box-sizing: border-box;
+  padding: 0;
 }
+
 input, select, button {
-    border:0 none;
-    outline:none;
-    margin:0;
+  border: 0 none;
+  outline: none;
+  margin: 0;
 }
+
 select {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
 }
+
 select::-ms-expand {
-    display: none;
+  display: none;
 }
+
 ::-webkit-input-placeholder {
-    line-height:1;
-    font-weight:300;
-    font-size:0.938rem;
-    letter-spacing:-0.6px;
-    color:#8b8b8b;
+  line-height: 1;
+  font-weight: 300;
+  font-size: 0.938rem;
+  letter-spacing: -0.6px;
+  color: #8b8b8b;
 }
-.log-box ::-webkit-input-placeholder{
-    color:#8b8b8b;
+
+.log-box ::-webkit-input-placeholder {
+  color: #8b8b8b;
 }
-button{
-    background: transparent;
-    font-family: 'Noto Sans JP', sans-serif;
-    border: none;
-    padding: 0;
-    margin: 0;
-    line-height: 1.4;
-    color: inherit;
-    outline: none;
-    cursor: pointer;
+
+button {
+  background: transparent;
+  font-family: 'Noto Sans JP', sans-serif;
+  border: none;
+  padding: 0;
+  margin: 0;
+  line-height: 1.4;
+  color: inherit;
+  outline: none;
+  cursor: pointer;
 }
-.pre{
-    font-family: 'Pretendard', sans-serif !important;
+
+.pre {
+  font-family: 'Pretendard', sans-serif !important;
 }
 
 // margin
-.mt5{margin-top: 5px !important;}
-.mt10{margin-top: 10px !important;}
-.mt15{margin-top: 15px !important;}
-.mb5{margin-bottom: 5px !important;}
-.mb10{margin-bottom: 10px !important;}
-.mb15{margin-bottom: 15px !important;}
-.mr5{margin-right: 5px !important;}
-.mr10{margin-right: 10px !important;}
-.mr15{margin-right: 15px !important;}
-.ml5{margin-left: 5px !important;}
-.ml10{margin-left: 10px !important;}
-.ml15{margin-left: 15px !important;}
-
-// button
-.btn-frame{
-    display: inline-block;
-    padding: 0 7px;
-    height: 34px;
-    line-height: 34px;
-    border-radius: 2px;
-    color: #fff;
-    font-size: 12px;
-    font-weight: 400;
-    border: 1px solid #000;
-    text-align: center;
-    font-family: 'Pretendard', sans-serif;
-    transition: all .17s ease-in-out;
-    cursor: pointer;
-    &.block{
-        width: 100%;
-    }
-    &.small{
-        font-family: 'Noto Sans JP', sans-serif;
-        height: 30px;
-        line-height: 30px;
-        font-size: 13px;
-    }
-
-    &.deepgray{
-        background-color: #2C2C2C;
-        border: 1px solid #484848;
-    }
-    &.gray{
-        background-color: #3C3C3C;
-        border: 1px solid #545454;
-    }
-    &.dark{
-        background-color: #1C1C1C;
-        border: 1px solid #484848;
-    }
-    &.modal{
-        font-family: 'Noto Sans JP', sans-serif;
-        background-color: #272727;
-        border: 1px solid #484848;
-        color: #aaa;
-        &:hover{
-            background-color: #1083E3;
-            border: 1px solid #1083E3;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    &.sub-tab{
-        height: 30px;
-        padding: 0 10px;
-        line-height: 28px;
-        font-family: 'Noto Sans JP', sans-serif;
-        background-color: #2D2D2D;
-        border: 1px solid #393939;
-        color: #aaa;
-        &.act,
-        &:hover{
-            background-color: #414E6C;
-            border: 1px solid #414E6C;
-            color: #fff;
-            font-weight: 500;
-        }
-    }
-    &:hover,
-    &.act{
-        background-color: #1083E3;
-        border: 1px solid #1083E3;
-        color: #fff;
-        font-weight: 500;
-    }
-    &.block{
-        display: block;
-        width: 100%;
-    }
-    &.ico-flx{
-        display: flex;
-        align-items: center;
-        .ico{
-            margin-right: 10px;
-        }
-        &:hover,
-        &.act{
-            font-weight: 400;
-        }
-    }    
+.mt5 {
+  margin-top: 5px !important;
 }
 
-.btn-origin{
-    display: inline-block;
+.mt10 {
+  margin-top: 10px !important;
+}
+
+.mt15 {
+  margin-top: 15px !important;
+}
+
+.mb5 {
+  margin-bottom: 5px !important;
+}
+
+.mb10 {
+  margin-bottom: 10px !important;
+}
+
+.mb15 {
+  margin-bottom: 15px !important;
+}
+
+.mr5 {
+  margin-right: 5px !important;
+}
+
+.mr10 {
+  margin-right: 10px !important;
+}
+
+.mr15 {
+  margin-right: 15px !important;
+}
+
+.ml5 {
+  margin-left: 5px !important;
+}
+
+.ml10 {
+  margin-left: 10px !important;
+}
+
+.ml15 {
+  margin-left: 15px !important;
+}
+
+// align
+.l {
+  text-align: left !important;
+}
+
+.r {
+  text-align: right !important;
+}
+
+.c {
+  text-align: center !important;
+}
+
+
+// button
+.btn-frame {
+  display: inline-block;
+  padding: 0 7px;
+  height: 34px;
+  line-height: 34px;
+  border-radius: 2px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 400;
+  border: 1px solid #000;
+  text-align: center;
+  font-family: 'Pretendard', sans-serif;
+  transition: all .17s ease-in-out;
+  cursor: pointer;
+
+  &.block {
+    width: 100%;
+  }
+
+  &.small {
+    font-family: 'Noto Sans JP', sans-serif;
     height: 30px;
-    padding: 0 14px;
-    border-radius: 2px;
-    background-color: #101010;
-    color: #fff;
+    line-height: 30px;
     font-size: 13px;
-    font-weight: 400;
-    transition: all .15s ease-in-out;
-    &.navy{
-        background-color: #304961;
-        &:hover{
-            background-color: #1083E3;
-        }
+  }
+
+  &.deepgray {
+    background-color: #2C2C2C;
+    border: 1px solid #484848;
+  }
+
+  &.gray {
+    background-color: #3C3C3C;
+    border: 1px solid #545454;
+  }
+
+  &.dark {
+    background-color: #1C1C1C;
+    border: 1px solid #484848;
+  }
+
+  &.modal {
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: #272727;
+    border: 1px solid #484848;
+    color: #aaa;
+
+    &:hover {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
+      color: #fff;
+      font-weight: 500;
     }
-    &.grey{
-        background-color: #94A0AD;
-        &:hover{
-            background-color: #607F9A;
-        }
+  }
+
+  &.sub-tab {
+    height: 30px;
+    padding: 0 10px;
+    line-height: 28px;
+    font-family: 'Noto Sans JP', sans-serif;
+    background-color: #2D2D2D;
+    border: 1px solid #393939;
+    color: #aaa;
+
+    &.act,
+    &:hover {
+      background-color: #414E6C;
+      border: 1px solid #414E6C;
+      color: #fff;
+      font-weight: 500;
     }
+  }
+
+  &:hover,
+  &.act {
+    background-color: #1083E3;
+    border: 1px solid #1083E3;
+    color: #fff;
+    font-weight: 500;
+  }
+
+  &.block {
+    display: block;
+    width: 100%;
+  }
+
+  &.ico-flx {
+    display: flex;
+    align-items: center;
+
+    .ico {
+      margin-right: 10px;
+    }
+
+    &:hover,
+    &.act {
+      font-weight: 400;
+    }
+  }
+}
+
+.btn-origin {
+  display: inline-block;
+  height: 30px;
+  padding: 0 14px;
+  border-radius: 2px;
+  background-color: #101010;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 400;
+  transition: all .15s ease-in-out;
+
+  &.navy {
+    background-color: #304961;
+
+    &:hover {
+      background-color: #1083E3;
+    }
+  }
+
+  &.grey {
+    background-color: #94A0AD;
+
+    &:hover {
+      background-color: #607F9A;
+    }
+  }
 }
 
 // select
-.sort-select{
-    position: relative;
-    display: inline-block;
-    min-width: 100px;
-    height: 30px;
-    line-height: 30px;
-    padding: 0 25px 0 10px;
+.sort-select {
+  position: relative;
+  display: inline-block;
+  min-width: 100px;
+  height: 30px;
+  line-height: 30px;
+  padding: 0 25px 0 10px;
+  background-color: #373737;
+  border: 1px solid #3F3F3F;
+  border-radius: 2px;
+  border-top-left-radius: 2px;
+  color: #fff;
+  cursor: pointer;
+
+  p {
+    font-size: 13px;
+    color: #fff;
+    height: 100%;
+  }
+
+  .select-item-wrap {
+    position: absolute;
+    top: 100%;
+    left: -1px;
+    clip-path: inset(0 0 100% 0);
+    width: calc(100% + 2px);
+    padding: 8px 0;
+    max-height: 100px;
+    overflow-y: auto;
     background-color: #373737;
     border: 1px solid #3F3F3F;
     border-radius: 2px;
-    border-top-left-radius: 2px;
-    color: #fff;
-    cursor: pointer;
-    p{
-        font-size: 13px;
+    transition: all 0.17s ease-in-out;
+    visibility: hidden;
+    z-index: 999;
+
+    .select-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 20px;
+      line-height: 1.4;
+      transition: all .17s ease-in-out;
+
+      button {
+        font-size: 12px;
         color: #fff;
-        height: 100%;
+        line-height: 1.4;
+      }
+
+      &:hover {
+        background-color: #2C2C2C;
+      }
     }
-    .select-item-wrap{
-        position: absolute;
-        top: 100%;
-        left: -1px;
-        clip-path:inset(0 0 100% 0);
-        width: calc(100% + 2px);
-        padding: 8px 0;
-        max-height: 100px;
-        overflow-y: auto;
-        background-color: #373737;
-        border: 1px solid #3F3F3F;
-        border-radius: 2px;
-        transition: all 0.17s ease-in-out;
-        visibility: hidden;
-        z-index: 999;
-        .select-item{
-            display: flex;
-            align-items: center;
-            padding: 8px 20px;
-            line-height: 1.4;
-            transition: all .17s ease-in-out;
-            button{
-                font-size: 12px;
-                color: #fff;
-                line-height: 1.4;
-            }
-            &:hover{
-                background-color: #2C2C2C;
-            }
-        }
-        &::-webkit-scrollbar {
-            width: 2px;
-            background-color: transparent;
-            
-        }
-        &::-webkit-scrollbar-thumb {
-            background-color: #5a5a5a;
-            border-radius: 10px;
-        }
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
-        }
+
+    &::-webkit-scrollbar {
+      width: 2px;
+      background-color: transparent;
+
     }
-    &::after{
-        content: '';
-        position: absolute;
-        top: 50%;
-        right: 7px;
-        transform: translateY(-50%);
-        width: 10px;
-        height: 6px;
-        background: url(/static/images/common/select-arr.svg) no-repeat center;
-        background-size: cover;
-        transition: all .17s ease-in-out;
+
+    &::-webkit-scrollbar-thumb {
+      background-color: #5a5a5a;
+      border-radius: 10px;
     }
-    &.active{
-        .select-item-wrap{
-            clip-path: inset(0 0 0 0);
-            visibility: visible;
-        }
-        &:after{
-            transform: translateY(-50%) rotate(-180deg);
-        }
+
+    &::-webkit-scrollbar-track {
+      background-color: transparent;
     }
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 7px;
+    transform: translateY(-50%);
+    width: 10px;
+    height: 6px;
+    background: url(/static/images/common/select-arr.svg) no-repeat center;
+    background-size: cover;
+    transition: all .17s ease-in-out;
+  }
+
+  &.active {
+    .select-item-wrap {
+      clip-path: inset(0 0 0 0);
+      visibility: visible;
+    }
+
+    &:after {
+      transform: translateY(-50%) rotate(-180deg);
+    }
+  }
 }
 
-.select-light{
-    position: relative;
-    display: block;
-    width: 100%;
-    height: 30px;
-    background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
-    background-size: 10px 6px;
-    border: 1px solid #eee;
-    padding: 0 30px 0 10px;
-    font-size: 13px;
-    color: #45576F;
-    font-family: 'Noto Sans JP', sans-serif;
-    cursor: pointer;
-    &:disabled{
-        opacity: 1;
-        background-color: #FAFAFA;
-        color: #999;
-        cursor: default;
-    }
-    &.black{
-        color: #101010;
-    }
-    &.dark{
-        background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
-        color: #898989;
-        font-size: 12px;
-        border-radius: 2px;
-        border: none;
-    }
+.select-light {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 30px;
+  background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+  background-size: 10px 6px;
+  border: 1px solid #eee;
+  padding: 0 30px 0 10px;
+  font-size: 13px;
+  color: #45576F;
+  font-family: 'Noto Sans JP', sans-serif;
+  cursor: pointer;
+
+  &:disabled {
+    opacity: 1;
+    background-color: #FAFAFA;
+    color: #999;
+    cursor: default;
+  }
+
+  &.black {
+    color: #101010;
+  }
+
+  &.dark {
+    background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
+    color: #898989;
+    font-size: 12px;
+    border-radius: 2px;
+    border: none;
+  }
 }
 
 
 // input
-.form-input{
-    label{
-        display: block;
-        color: #aaa;
-        font-size: 12px;
-        font-weight: 500;
-        margin-bottom: 10px;
-    }
-}
-input[type=number],
-input[type=text]{
-    &.input-origin{
-        display: inline-block;
-        height: 30px;
-        line-height: 30px;
-        border-radius: 2px;
-        background-color: #323234;
-        color: #fff;
-        font-size: 12px;
-        font-weight: 500;
-        font-family: 'Pretendard', sans-serif;
-        padding: 0 10px;
-        letter-spacing: 0px;
-        text-align: right;
-        &::placeholder{
-            opacity: 1;
-            font-size: 12px;
-            letter-spacing: 0px;
-        }
-        &.block{
-            width: 100%;
-        }
-        &:read-only{
-            color: #AAA;
-        }
-    }
-    &.input-light{
-        display: block;
-        width: 100%;
-        height: 30px;
-        padding: 0 10px;
-        border: 1px solid #eee;
-        border-radius: 2px;
-        background-color: #fff;
-        font-family: 'Noto Sans JP', sans-serif;
-        font-size: 13px;
-        color: #45576F;
-        font-weight: normal;
-        transition: border-color .17s ease-in-out;
-        text-align: left;
-        &:read-only{
-            background-color: #FAFAFA;
-            color: #999999;
-        }
-    }
+.form-input {
+  label {
+    display: block;
+    color: #aaa;
+    font-size: 12px;
+    font-weight: 500;
+    margin-bottom: 10px;
+  }
 }
 
+input[type=number],
+input[type=text] {
+  &.input-origin {
+    display: inline-block;
+    height: 30px;
+    line-height: 30px;
+    border-radius: 2px;
+    background-color: #323234;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 500;
+    font-family: 'Pretendard', sans-serif;
+    padding: 0 10px;
+    letter-spacing: 0px;
+    text-align: right;
+
+    &::placeholder {
+      opacity: 1;
+      font-size: 12px;
+      letter-spacing: 0px;
+    }
+
+    &.block {
+      width: 100%;
+    }
+
+    &:read-only {
+      color: #AAA;
+    }
+
+    &.plane {
+      font-family: 'Noto Sans JP', sans-serif;
+      border: 1px solid #525252;
+      background-color: transparent;
+    }
+  }
+
+  &.input-light {
+    display: block;
+    width: 100%;
+    height: 30px;
+    padding: 0 10px;
+    border: 1px solid #eee;
+    border-radius: 2px;
+    background-color: #fff;
+    font-family: 'Noto Sans JP', sans-serif;
+    font-size: 13px;
+    color: #45576F;
+    font-weight: normal;
+    transition: border-color .17s ease-in-out;
+    text-align: left;
+
+    &:read-only {
+      background-color: #FAFAFA;
+      color: #999999;
+    }
+  }
+}
 
 
 // check-btn
-.check-btn{
-    display: flex;
-    align-items: center;
-    height: 30px;
-    background-color: #3A3A3A;
-    border-radius: 3px;
-    transition: all .17s ease-in-out;
-    .check-area{
-        flex: none;
-        width: 30px;
-        height: 100%;
-        border-right: 1px solid #272727;
-        background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
-        background-size: 11px 9px;
+.check-btn {
+  display: flex;
+  align-items: center;
+  height: 30px;
+  background-color: #3A3A3A;
+  border-radius: 3px;
+  transition: all .17s ease-in-out;
+
+  .check-area {
+    flex: none;
+    width: 30px;
+    height: 100%;
+    border-right: 1px solid #272727;
+    background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
+    background-size: 11px 9px;
+  }
+
+  .title-area {
+    padding: 0 10px;
+    font-size: 12px;
+    color: #898989;
+    font-weight: 400;
+  }
+
+  &.block {
+    width: 100%;
+  }
+
+  &:hover,
+  &.act {
+    background-color: #fff;
+
+    .check-area {
+      border-right: 1px solid #101010;
+      background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
     }
-    .title-area{
-        padding: 0 10px;
-        font-size: 12px;
-        color: #898989;
-        font-weight: 400;
-    }
-    &.block{
-        width: 100%;
-    }
-    &:hover,
-    &.act{
-        background-color: #fff;
-        .check-area{
-            border-right: 1px solid #101010;
-            background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
-        }
-        .title-area{
-            color: #101010;
-            font-weight: 600;
-        }
+
+    .title-area {
+      color: #101010;
+      font-weight: 600;
     }
+  }
 }
 
 // arr-btn
-.arr-btn{
-    display: block;
-    height: 30px;
-    border-radius: 3px;
-    background-color: #3A3A3A;
-    padding: 0 11px;
-    text-align: left;
-    transition: all .17s ease-in-out;
-    span{
-        position: relative;
-        font-size: 12px;
-        color: #898989;
-        font-weight: 400;
-        padding-right: 15px;
-        &:after{
-            content: '';
-            position: absolute;
-            top: 50%;
-            right: 0;
-            transform: translateY(-50%);
-            width: 5px;
-            height: 8px;
-            background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
-        }
+.arr-btn {
+  display: block;
+  height: 30px;
+  border-radius: 3px;
+  background-color: #3A3A3A;
+  padding: 0 11px;
+  text-align: left;
+  transition: all .17s ease-in-out;
+
+  span {
+    position: relative;
+    font-size: 12px;
+    color: #898989;
+    font-weight: 400;
+    padding-right: 15px;
+
+    &:after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translateY(-50%);
+      width: 5px;
+      height: 8px;
+      background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
     }
+  }
+
+  &:hover,
+  &.act {
+    background-color: #fff;
+
+    span {
+      color: #101010;
+      font-weight: 500;
+
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
+      }
+    }
+  }
+
+  &.dark {
+    text-align: center;
+    background-color: #272727;
+    border: 1px solid #484848;
+
+    span {
+      color: #Fff;
+
+      &:after {
+        background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
+      }
+    }
+
     &:hover,
-    &.act{
-        background-color: #fff;
-        span{
-            color: #101010;
-            font-weight: 500;
-            &:after{
-                background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
-            }
-        }
-    }
-    &.dark{
-        text-align: center;
-        background-color: #272727;
-        border: 1px solid #484848;
-        span{
-            color: #Fff;
-            &:after{
-                background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
-            }
-        }
-        &:hover,
-        &.act{
-            background-color: #1083E3;
-            border: 1px solid #1083E3;
-        }
+    &.act {
+      background-color: #1083E3;
+      border: 1px solid #1083E3;
     }
+  }
 }
 
 // radio
 .d-check-radio,
-.d-check-box{
-    line-height: 1.1;
+.d-check-box {
+  line-height: 1.1;
+  cursor: pointer;
+
+  input[type=checkbox],
+  input[type=radio] {
+    position: static;
+    margin-left: 0;
     cursor: pointer;
-    input[type=checkbox],
-    input[type=radio]{
-        position: static;
-        margin-left: 0;
-        cursor: pointer;
-        opacity: 0;
-        z-index: 1;
-        flex: 0 0 auto;
+    opacity: 0;
+    z-index: 1;
+    flex: 0 0 auto;
+  }
+
+  label {
+    position: relative;
+    padding-left: 10px;
+    margin-bottom: 0;
+    word-break: break-all;
+    line-height: 1.2;
+    display: inline;
+    vertical-align: top;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 400;
+    cursor: pointer;
+  }
+
+  &.light {
+    label {
+      color: #45576F;
     }
-    label{
-        position: relative;
-        padding-left: 10px;
-        margin-bottom: 0;
-        word-break: break-all;
-        line-height: 1.2;
-        display: inline;
-        vertical-align: top;
-        color: #fff;
-        font-size: 13px;
-        font-weight: 400;
-        cursor: pointer;
-    }
-    &.light{
-        label{
-            color: #45576F;
-        }
-    }
-    &.no-text{
-        label{
-            padding-left: 0;
-        }
+  }
+
+  &.no-text {
+    label {
+      padding-left: 0;
     }
+  }
 }
 
 .d-check-radio {
-    label{
-        &::before{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 17px;
-            height: 17px;
-            top:2px;
-            left: 0;
-            margin-left: -12px;
-            border: 1px solid #999999;
-            border-radius: 100%;
-            background-color: transparent;
-            text-align:center;
-            font-size:13px;
-            line-height:1.4;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
-        &::after{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 9px;
-            height: 9px;
-            top:6px;
-            left: 4px;
-            margin-left: -12px;
-            border: none;
-            border-radius: 100%;
-            background-color: #fff;
-            text-align:center;
-            font-size:13px;
-            line-height:1.4;
-            opacity: 0;
-            visibility: hidden;
-            transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
+  label {
+    &::before {
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      top: 2px;
+      left: 0;
+      margin-left: -12px;
+      border: 1px solid #999999;
+      border-radius: 100%;
+      background-color: transparent;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.4;
+      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     }
-    &.light{
-        label{
-            &:before{
-                border-color: #D6D6D7;
-            }
-            &:after{
-                background-color: #697C8F;
-            }
-        }
+
+    &::after {
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 9px;
+      height: 9px;
+      top: 6px;
+      left: 4px;
+      margin-left: -12px;
+      border: none;
+      border-radius: 100%;
+      background-color: #fff;
+      text-align: center;
+      font-size: 13px;
+      line-height: 1.4;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
     }
-    input[type=radio]:checked + label::after{
-        opacity: 1;
-        visibility: visible;
+  }
+
+  &.light {
+    label {
+      &:before {
+        border-color: #D6D6D7;
+      }
+
+      &:after {
+        background-color: #697C8F;
+      }
     }
-    &.pop{
-        label{
-            font-size: 12px;
-            &:before{
-                width: 16px;
-                height: 16px;
-                border-color: #fff;
-            }
-            &:after{
-                width: 8px;
-                height: 8px;
-                background-color: #fff;
-            }
-        }
+  }
+
+  input[type=radio]:checked + label::after {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  &.pop {
+    label {
+      font-size: 12px;
+
+      &:before {
+        width: 16px;
+        height: 16px;
+        border-color: #fff;
+      }
+
+      &:after {
+        width: 8px;
+        height: 8px;
+        background-color: #fff;
+      }
     }
+  }
 }
 
 // check-box
-.d-check-box{
-    label{
-        &::before{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 17px;
-            height: 17px;
-            top: 2px;
-            left: 0;
-            margin-left: -12px;
-            border: 1px solid #D6D6D7;
-            background-color: transparent;
-            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
-        }
-        &:after{
-            cursor: pointer;
-            content: "";
-            display: inline-block;
-            position: absolute;
-            width: 16px;
-            height: 16px;
-            top:0;
-            left: 0;
-            margin-left: -.8rem;
-            transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
-        }
+.d-check-box {
+  label {
+    &::before {
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 17px;
+      height: 17px;
+      top: 2px;
+      left: 0;
+      margin-left: -12px;
+      border: 1px solid #D6D6D7;
+      background-color: transparent;
+      transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
     }
-    input[type=checkbox]:checked + label::after{
-        content: "";
-        display: inline-block;
-        position: absolute;
-        top: 1px;
-        left: -1px;
-        width: 5px;
-        height: 8px;
-        border: 2px solid #697C8F;
-        border-left: none;
-        border-top: none;
-        transform: translate(7.75px,4.5px) rotate(45deg);
-        -ms-transform: translate(7.75px,4.5px) rotate(45deg);
+
+    &:after {
+      cursor: pointer;
+      content: "";
+      display: inline-block;
+      position: absolute;
+      width: 16px;
+      height: 16px;
+      top: 0;
+      left: 0;
+      margin-left: -.8rem;
+      transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
     }
-    &.pop{
-        input[type=checkbox]:checked + label::after{
-            border-color: #fff;
-        }
+  }
+
+  input[type=checkbox]:checked + label::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    top: 1px;
+    left: -1px;
+    width: 5px;
+    height: 8px;
+    border: 2px solid #697C8F;
+    border-left: none;
+    border-top: none;
+    transform: translate(7.75px, 4.5px) rotate(45deg);
+    -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
+  }
+
+  &.pop {
+    input[type=checkbox]:checked + label::after {
+      border-color: #fff;
     }
+  }
 }
 
 // date-picker
-.date-picker{
-    svg{display: none;}
-    .react-datepicker-wrapper{
-        width: 100%;
-    }
-    input[type=text]{
-        display: block;
-        width: 100%;
-        height: 30px;
-        padding: 0 34px 0 10px;
-        border-radius: 2px;
-        border: 1px solid #eee;
-        font-size: 13px;
-        color: #45576F;
-        font-weight: normal;
-        font-family: 'Noto Sans JP', sans-serif;
-        background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
-        background-size: 14px 15px;
-        cursor: pointer;
-    }
+.date-picker {
+  svg {
+    display: none;
+  }
+
+  .react-datepicker-wrapper {
+    width: 100%;
+  }
+
+  input[type=text] {
+    display: block;
+    width: 100%;
+    height: 30px;
+    padding: 0 34px 0 10px;
+    border-radius: 2px;
+    border: 1px solid #eee;
+    font-size: 13px;
+    color: #45576F;
+    font-weight: normal;
+    font-family: 'Noto Sans JP', sans-serif;
+    background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+    background-size: 14px 15px;
+    cursor: pointer;
+  }
 }
\ No newline at end of file
diff --git a/src/styles/_table.scss b/src/styles/_table.scss
index d3c207a7..ceaea36b 100644
--- a/src/styles/_table.scss
+++ b/src/styles/_table.scss
@@ -1,177 +1,215 @@
-@mixin flexbox(){
-    display: flex;
-    align-items: center;
+@mixin flexbox() {
+  display: flex;
+  align-items: center;
 }
 
-table{
-    .overflow-lab{
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-    }
-    .al-l{
-        text-align: left !important;
-    }
+table {
+  .overflow-lab {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+  }
+
+  .al-l {
+    text-align: left !important;
+  }
 }
 
-.common-table{
-    table{
-        table-layout: fixed;
+.common-table {
+  table {
+    table-layout: fixed;
+    border: 1px solid #ECF0F4;
+    border-radius: 3px;
+    border-collapse: collapse;
+
+    tbody {
+      th {
+        font-size: 13px;
+        font-weight: 500;
+        color: #344356;
+        padding: 14px 12px;
         border: 1px solid #ECF0F4;
-        border-radius: 3px;
-        border-collapse:collapse;
-        tbody{
-            th{
-                font-size: 13px;
-                font-weight: 500;
-                color: #344356;
-                padding: 14px 12px;
-                border: 1px solid #ECF0F4 ;
-                background-color: #F7F9FA;
-                vertical-align: middle;
-            }
-            td{
-                padding: 9px;
-                border: 1px solid #ECF0F4 ;
-                font-size: 13px;
-                font-weight: 400;
-                color: #45576F;
-                vertical-align: middle;
-                .radio-wrap{
-                    flex: none;
-                    @include flexbox;
-                }
-                .form-flex-wrap{
-                    @include flexbox;
-                }
-                .date-picker-wrap{
-                    width: 100%;
-                    @include flexbox;
-                    span{
-                        margin: 0 4px;
-                    }
-                }
-            }
+        background-color: #F7F9FA;
+        vertical-align: middle;
+      }
+
+      td {
+        padding: 9px;
+        border: 1px solid #ECF0F4;
+        font-size: 13px;
+        font-weight: 400;
+        color: #45576F;
+        vertical-align: middle;
+
+        .radio-wrap {
+          flex: none;
+          @include flexbox;
         }
+
+        .form-flex-wrap {
+          @include flexbox;
+        }
+
+        .date-picker-wrap {
+          width: 100%;
+          @include flexbox;
+
+          span {
+            margin: 0 4px;
+          }
+        }
+      }
     }
-    &.bt-able{
-        margin-bottom: 30px;
-    }
+  }
+
+  &.bt-able {
+    margin-bottom: 30px;
+  }
 }
 
-.infomation-table{
-    table{
-        border-top: 1px solid #DEE3EA;
-        border-bottom: 1px solid #DEE3EA;
-        border-collapse:collapse;
-        tbody{
-            tr{
-                th{
-                    font-size: 13px;
-                    color: #344356;
-                    font-weight: 500;
-                    padding: 18px 0;
-                    border-bottom: 1px solid #F4F4F7;
-                    .title{
-                        margin-right: 8px;
-                    }
-                }
-                td{
-                    padding: 0 0 0 15px;
-                    border-bottom: 1px solid #F4F4F7;
-                    
-                    .guide{
-                        font-size: 13px;
-                        color: #697C8F;
-                        font-weight: normal;
-                        margin-left: 15px;
-                    }
-                    span{
-                        font-size: 13px;
-                        color: #697C8F;
-                        font-weight: normal;
-                    }
-                }
-                &:last-child{
-                    th,td{border-bottom: none;}
-                }
-            }
+.infomation-table {
+  table {
+    border-top: 1px solid #DEE3EA;
+    border-bottom: 1px solid #DEE3EA;
+    border-collapse: collapse;
+
+    tbody {
+      tr {
+        th {
+          font-size: 13px;
+          color: #344356;
+          font-weight: 500;
+          padding: 18px 0;
+          border-bottom: 1px solid #F4F4F7;
+
+          .title {
+            margin-right: 8px;
+          }
         }
-        .flx-box{
-            @include flexbox;
+
+        td {
+          padding: 0 0 0 15px;
+          border-bottom: 1px solid #F4F4F7;
+
+          .guide {
+            font-size: 13px;
+            color: #697C8F;
+            font-weight: normal;
+            margin-left: 15px;
+          }
+
+          span {
+            font-size: 13px;
+            color: #697C8F;
+            font-weight: normal;
+          }
         }
+
+        &:last-child {
+          th, td {
+            border-bottom: none;
+          }
+        }
+      }
     }
-    .tooltips{
-        display: block;
-        width: 14px;
-        height: 14px;
-        display: inline-block;
-        background: url(../../public/static/images/sub/tooltips.svg)no-repeat center;
-        background-size: cover;
-        cursor: pointer;
+
+    .flx-box {
+      @include flexbox;
     }
+  }
+
+  .tooltips {
+    display: block;
+    width: 14px;
+    height: 14px;
+    display: inline-block;
+    background: url(../../public/static/images/sub/tooltips.svg) no-repeat center;
+    background-size: cover;
+    cursor: pointer;
+  }
 }
 
-.module-table{
-    table{
+.module-table {
+  table {
+    table-layout: fixed;
+    border-collapse: collapse;
+
+    thead {
+      display: table;
+      table-layout: fixed;
+      width: 100%;
+
+      th {
+        padding: 13px 0;
+        font-size: 13px;
+        color: #344356;
+        font-weight: 500;
+        border-bottom: 2px solid #E0E5EB;
+        text-align: center;
+      }
+    }
+
+    tbody {
+      display: block;
+      overflow-y: auto;
+
+      tr {
+        display: table;
         table-layout: fixed;
-        border-collapse: collapse;
-        thead{
-            display: table;
-            table-layout: fixed;
-            width: 100%;
-            th{
-                padding: 13px 0;
-                font-size: 13px;
-                color: #344356;
-                font-weight: 500;
-                border-bottom: 2px solid #E0E5EB;
-                text-align: center;
-            }
-        }
-        tbody{
-            display: block;
-            overflow-y: auto;
-            tr{
-                display: table;
-                table-layout: fixed;
-                width: 100%;
-                border: 1px solid #ECF0F4;
-                td{
-                    padding: 10px 0px;
-                    font-size: 13px;
-                    color: #45576F;
-                    font-weight: 400;
-                    text-align: center;
-                }
-            }
-            &::-webkit-scrollbar {
-                width: 4px;
-                background-color: transparent;
-            }
-            &::-webkit-scrollbar-thumb {
-                background-color: #C1CCD7;
-            }
-            &::-webkit-scrollbar-track {
-                background-color: transparent;
-            }
-        }
-        &.small{
-            tbody{height: 120px;}
-        }
-        &.big{
-            td,
-            th{
-                &:nth-child(2){
-                    width: 121px;
-                }
-            }
-            tbody{
-                height: 160px;
-                td{
-                    padding: 10px 20px;
-                }
-            }
+        width: 100%;
+        border: 1px solid #ECF0F4;
+
+        td {
+          padding: 10px 0px;
+          font-size: 13px;
+          color: #45576F;
+          font-weight: 400;
+          text-align: center;
         }
+      }
+
+      &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: #C1CCD7;
+      }
+
+      &::-webkit-scrollbar-track {
+        background-color: transparent;
+      }
     }
+
+    &.small {
+      tbody {
+        height: 120px;
+      }
+    }
+
+    &.big {
+      td,
+      th {
+        &:nth-child(2) {
+          width: 121px;
+        }
+      }
+
+      tbody {
+        height: 160px;
+
+        td {
+          padding: 10px 20px;
+        }
+      }
+    }
+  }
+}
+
+.roof-module-table {
+  table {
+    table-layout: fixed;
+    border-collapse: collapse;
+  }
 }
\ No newline at end of file