diff --git a/src/components/Playground.jsx b/src/components/Playground.jsx
index d1061306..5cd4588c 100644
--- a/src/components/Playground.jsx
+++ b/src/components/Playground.jsx
@@ -39,6 +39,7 @@ export default function Playground() {
   const [color, setColor] = useState('#ff0000')
 
   const [textInput, setTextInput] = useState('')
+  const [numberInput, setNumberInput] = useState(null)
   const [radioInput, setRadioInput] = useState('')
   const [checkboxInput, setCheckboxInput] = useState([])
   const [selectedValue, setSelectedValue] = useState('')
@@ -48,6 +49,9 @@ export default function Playground() {
   useEffect(() => {
     console.log('textInput:', textInput)
   }, [textInput])
+  useEffect(() => {
+    console.log('numberInput:', numberInput)
+  }, [numberInput])
   useEffect(() => {
     console.log('radioInput:', radioInput)
   }, [radioInput])
@@ -161,8 +165,19 @@ export default function Playground() {
           >
             QInput TextInput DATA RESET
           </button>
-          <QInput type="text" value={textInput} onChange={setTextInput} />
-          <QInput type="text" value={textInput} onChange={setTextInput} readOnly="true" />
+          <QInput type="text" placeholder="placeholder" value={textInput} onChange={setTextInput} />
+          <QInput type="text" placeholder="read only" value={textInput} onChange={setTextInput} readOnly="true" />
+          <br />
+          <button
+            className="btn-frame deepgray"
+            onClick={() => {
+              setNumberInput(null)
+            }}
+          >
+            QInput NumberInput DATA RESET
+          </button>
+          <QInput type="number" placeholder="placeholder" value={numberInput} onChange={setNumberInput} />
+          <QInput type="number" placeholder="read only" value={numberInput} onChange={setNumberInput} readOnly="true" />
           <br />
           <button
             className="btn-frame deepgray"
@@ -185,7 +200,7 @@ export default function Playground() {
           <button
             className="btn-frame deepgray"
             onClick={() => {
-              setCheckboxInput('')
+              setCheckboxInput([])
             }}
           >
             QInput Checkbox DATA RESET
diff --git a/src/components/common/input/QInput.jsx b/src/components/common/input/QInput.jsx
index 39b8be08..3c1046af 100644
--- a/src/components/common/input/QInput.jsx
+++ b/src/components/common/input/QInput.jsx
@@ -2,7 +2,7 @@
 
 import { useCallback } from 'react'
 
-export default function QInput({ type, readOnly = false, options = [], value, onChange }) {
+export default function QInput({ type, className, ref, id, readOnly = false, options = [], placeholder, value, onChange }) {
   // options = options || [
   //   {
   //     id: 'one',
@@ -21,11 +21,11 @@ export default function QInput({ type, readOnly = false, options = [], value, on
   //   },
   // ]
 
-  const handleChange = useCallback(
+  const handleRadioCheckboxChange = useCallback(
     (e, optionValue) => {
       if (type === 'radio') {
         onChange(e.target.value)
-      } else {
+      } else if (type === 'checkbox') {
         const newValue = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue]
         onChange(newValue)
       }
@@ -33,36 +33,77 @@ export default function QInput({ type, readOnly = false, options = [], value, on
     [type, value, onChange],
   )
 
-  const handleTextChange = useCallback(
+  const handleTextNumberChange = useCallback(
     (e) => {
-      onChange(e.target.value)
+      if (type === 'text') {
+        onChange(e.target.value)
+      } else if (type === 'number') {
+        onChange(Number(e.target.value))
+      }
     },
-    [onChange],
+    [type, onChange],
   )
 
-  return (
-    <>
-      {type === 'text' ? (
-        <div className="mb5">
-          <input type={type} className="input-light" readOnly={readOnly ? true : false} value={value} onChange={handleTextChange} />
-        </div>
-      ) : type === 'radio' || type === 'checkbox' ? (
-        <div className="flx mb5">
-          {options?.map((option) => (
-            <div key={option.name} className={`d-${type}-radio light mr5`}>
-              <input
-                type={type}
-                name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
-                value={option.value}
-                id={option.id}
-                checked={type === 'radio' ? value === option.value : value.includes(option.value)}
-                onChange={(e) => handleChange(e, option.value)}
-              />
-              <label htmlFor={option.id}>{option.name}</label>
-            </div>
-          ))}
-        </div>
-      ) : null}
-    </>
-  )
+  // type=number 정수 부호, 소수점 검사, 일부 키 허용
+  const checkInputNumber = (e) => {
+    const value = e.target.value
+    const key = e.key
+    const allowKeys = ['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'Tab', 'Enter', 'Control'] // 'ArrowUp', 'ArrowDown',
+    if (key >= '0' && key <= '9') {
+      return
+    }
+    if (key === '.' && !value.includes('.') && value.length > 0 && !isNaN(Number(value))) {
+      return
+    }
+    if (key === '-' && !value.includes('-') && value.length > 0) {
+      return
+    }
+    if (allowKeys.includes(key)) {
+      return
+    }
+    if (key === 'a' || key === 'c' || key === 'v' || key === 'x' || key === 'z') {
+      return
+    }
+    e.preventDefault()
+  }
+
+  // input type : text, number
+  const inputTextNumber = () => {
+    return (
+      <input
+        type={type}
+        className={`input-light ${className ? className : ''}`}
+        ref={ref}
+        id={id}
+        readOnly={readOnly ? true : false}
+        placeholder={placeholder}
+        value={value === 0 ? 0 : value || ''}
+        onChange={handleTextNumberChange}
+        onKeyDown={type === 'number' ? checkInputNumber : undefined}
+      />
+    )
+  }
+
+  // input type : radio, checkbox
+  const inputRadioCheckbox = () => {
+    return (
+      <div className="flx">
+        {options?.map((option) => (
+          <div key={option.name} className={`d-${type}-radio light mr5`}>
+            <input
+              type={type}
+              name={type === 'radio' ? 'radioGroup' : 'checkboxGroup'}
+              value={option.value}
+              id={option.id}
+              checked={type === 'radio' ? value === option.value : value.includes(option.value)}
+              onChange={(e) => handleRadioCheckboxChange(e, option.value)}
+            />
+            <label htmlFor={option.id}>{option.name}</label>
+          </div>
+        ))}
+      </div>
+    )
+  }
+
+  return <>{type === 'text' || type === 'number' ? inputTextNumber() : type === 'radio' || type === 'checkbox' ? inputRadioCheckbox() : null}</>
 }
diff --git a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
index 8d0ce8c2..b550b424 100644
--- a/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
+++ b/src/components/floor-plan/modal/flowDirection/FlowDirectionSetting.jsx
@@ -60,7 +60,7 @@ export default function FlowDirectionSetting(props) {
   }, [compasDeg])
   return (
     <WithDraggable isShow={true} pos={pos}>
-      <div className={`modal-pop-wrap lx mount`}>
+      <div className={`modal-pop-wrap ml mount`}>
         <div className="modal-head">
           <h1 className="title">{getMessage('modal.shape.flow.direction.setting')} </h1>
           <button className="modal-close" onClick={() => closePopup(id)}>
@@ -103,28 +103,30 @@ export default function FlowDirectionSetting(props) {
                   <label htmlFor="ra02">{getMessage('modal.shape.flow.direction.setting.orientation.24')}</label>
                 </div>
               </div>
-              <div className="compas-box">
-                <div className="compas-box-inner">
-                  {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
-                    <div
-                      key={index}
-                      className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
-                      onClick={() => setCompasDeg(15 * (12 + index))}
-                    >
-                      <i>{13 - index}</i>
+              <div className="draw-flow-wrap">
+                <div className="compas-box">
+                  <div className="compas-box-inner">
+                    {Array.from({ length: 180 / 15 + 1 }).map((dot, index) => (
+                      <div
+                        key={index}
+                        className={`circle ${compasDeg === 15 * (12 + index) ? 'act' : ''}`}
+                        onClick={() => setCompasDeg(15 * (12 + index))}
+                      >
+                        <i>{13 - index}</i>
+                      </div>
+                    ))}
+                    {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
+                      <div
+                        key={index}
+                        className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
+                        onClick={() => setCompasDeg(15 * (index + 1))}
+                      >
+                        <i>{24 - index}</i>
+                      </div>
+                    ))}
+                    <div className="compas">
+                      <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
                     </div>
-                  ))}
-                  {Array.from({ length: 180 / 15 - 1 }).map((dot, index) => (
-                    <div
-                      key={index}
-                      className={`circle ${compasDeg === 15 * (index + 1) ? 'act' : ''}`}
-                      onClick={() => setCompasDeg(15 * (index + 1))}
-                    >
-                      <i>{24 - index}</i>
-                    </div>
-                  ))}
-                  <div className="compas">
-                    <div className="compas-arr" style={{ transform: `rotate(${compasDeg}deg)` }}></div>
                   </div>
                 </div>
               </div>
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 99b72eb4..decb7fa3 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -180,8 +180,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                 </tr>
                 <tr>
                   <th>
-                    {getMessage('modal.placement.initial.setting.size')}
-                    <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                    <div className="tip-wrap">
+                      {getMessage('modal.placement.initial.setting.size')}
+                      <button className="tooltip" onClick={() => setShowSizeGuidModal(true)}></button>
+                    </div>
                   </th>
                   <td>
                     <div className="pop-form-radio">
@@ -252,8 +254,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                 </tr>
                 <tr>
                   <th>
-                    {getMessage('modal.placement.initial.setting.roof.material')}
-                    <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                    <div className="tip-wrap">
+                      {getMessage('modal.placement.initial.setting.roof.material')}
+                      <button className="tooltip" onClick={() => setShowMaterialGuidModal(true)}></button>
+                    </div>
                   </th>
                   <td>
                     <div className="placement-option">
diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 7795cab8..6715d48b 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -17,1493 +17,1444 @@
 //     }
 // }
 // CanvasMenu
-.canvas-menu-wrap {
-  position: fixed;
-  top: 46px;
-  left: 0;
-  display: block;
-  width: 100%;
-  min-width: 1280px;
-  padding-bottom: 0;
-  background-color: #383838;
-  transition: padding 0.17s ease-in-out;
-  z-index: 999;
-  .canvas-menu-inner {
-    position: relative;
-    display: flex;
-    align-items: center;
-    padding: 0 40px 0 20px;
-    background-color: #2c2c2c;
-    height: 46.8px;
-    z-index: 999;
-    .canvas-menu-list {
-      display: flex;
-      align-items: center;
-      height: 100%;
-      .canvas-menu-item {
-        display: flex;
-        align-items: center;
-        height: 100%;
-        button {
-          display: flex;
-          align-items: center;
-          font-size: 12px;
-          height: 100%;
-          color: #fff;
-          font-weight: 600;
-          padding: 15px 20px;
-          opacity: 0.55;
-          transition: all 0.17s ease-in-out;
-          .menu-icon {
-            display: block;
-            width: 14px;
-            height: 14px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: contain;
-            margin-right: 10px;
-            &.con00 {
-              background-image: url(/static/images/canvas/menu_icon00.svg);
-            }
-            &.con01 {
-              background-image: url(/static/images/canvas/menu_icon01.svg);
-            }
-            &.con02 {
-              background-image: url(/static/images/canvas/menu_icon02.svg);
-            }
-            &.con03 {
-              background-image: url(/static/images/canvas/menu_icon03.svg);
-            }
-            &.con04 {
-              background-image: url(/static/images/canvas/menu_icon04.svg);
-            }
-            &.con05 {
-              background-image: url(/static/images/canvas/menu_icon05.svg);
-            }
-            &.con06 {
-              background-image: url(/static/images/canvas/menu_icon06.svg);
-            }
-          }
-        }
-        &.active {
-          background-color: #383838;
-          button {
-            opacity: 1;
-          }
-        }
-      }
-    }
-    .canvas-side-btn-wrap {
-      display: flex;
-      align-items: center;
-      margin-left: auto;
-      .select-box {
-        width: 124px;
-        margin: 0 5px;
-        height: 30px;
-        > div {
-          width: 100%;
-        }
-      }
-      .btn-from {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button {
-          display: block;
-          width: 30px;
-          height: 30px;
-          border-radius: 2px;
-          background-color: #3d3d3d;
-          background-position: center;
-          background-repeat: no-repeat;
-          background-size: 15px 15px;
-          transition: all 0.17s ease-in-out;
-          &.btn01 {
-            background-image: url(../../public/static/images/canvas/side_icon03.svg);
-          }
-          &.btn02 {
-            background-image: url(../../public/static/images/canvas/side_icon02.svg);
-          }
-          &.btn03 {
-            background-image: url(../../public/static/images/canvas/side_icon01.svg);
-          }
-          &.btn04 {
-            background-image: url(../../public/static/images/canvas/side_icon04.svg);
-          }
-          &.btn05 {
-            background-image: url(../../public/static/images/canvas/side_icon05.svg);
-          }
-          &.btn06 {
-            background-image: url(../../public/static/images/canvas/side_icon06.svg);
-          }
-          &.btn07 {
-            background-image: url(../../public/static/images/canvas/side_icon07.svg);
-          }
-          &.btn08 {
-            background-image: url(../../public/static/images/canvas/side_icon08.svg);
-          }
-          &.btn09 {
-            background-image: url(../../public/static/images/canvas/side_icon09.svg);
-          }
-          &:hover {
-            background-color: #1083e3;
-          }
-          &.active {
-            background-color: #1083e3;
-          }
-        }
-      }
-      .ico-btn-from {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button {
-          .ico {
-            display: block;
-            width: 15px;
-            height: 15px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: contain;
-            &.ico01 {
-              background-image: url(../../public/static/images/canvas/ico-flx01.svg);
-            }
-            &.ico02 {
-              background-image: url(../../public/static/images/canvas/ico-flx02.svg);
-            }
-            &.ico03 {
-              background-image: url(../../public/static/images/canvas/ico-flx03.svg);
-            }
-            &.ico04 {
-              background-image: url(../../public/static/images/canvas/ico-flx04.svg);
-            }
-          }
-          .name {
-            font-size: 12px;
-            color: #fff;
-          }
-        }
-        &.form06 {
-          .name {
-            font-size: 13px;
-          }
-        }
-      }
-      .vertical-horizontal {
-        display: flex;
-        min-width: 170px;
-        height: 28px;
-        margin-right: 5px;
-        border-radius: 2px;
-        background: #373737;
-        line-height: 28px;
-        overflow: hidden;
-        span {
-          padding: 0 10px;
-          font-size: 13px;
-          color: #fff;
-        }
-        button {
-          margin-left: auto;
-          height: 100%;
-          background-color: #4b4b4b;
-          font-size: 13px;
-          font-weight: 400;
-          color: #fff;
-          padding: 0 7.5px;
-          transition: all 0.17s ease-in-out;
-        }
-        &.on {
-          button {
-            background-color: #1083e3;
-          }
-        }
-      }
-      .size-control {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        gap: 10px;
-        background-color: #3d3d3d;
-        border-radius: 2px;
-        width: 100px;
-        height: 30px;
-        margin: 0 5px;
-        span {
-          font-size: 13px;
-          color: #fff;
-        }
-        .control-btn {
-          display: block;
-          width: 12px;
-          height: 12px;
-          background-repeat: no-repeat;
-          background-size: cover;
-          background-position: center;
-          &.minus {
-            background-image: url(../../public/static/images/canvas/minus.svg);
-          }
-          &.plus {
-            background-image: url(../../public/static/images/canvas/plus.svg);
-          }
-        }
-      }
-    }
-  }
-  .canvas-depth2-wrap {
-    position: absolute;
-    top: -100%;
+.canvas-menu-wrap{
+    position: fixed;
+    top: 46px;
     left: 0;
-    background-color: #383838;
+    display: block;
     width: 100%;
-    height: 50px;
-    transition: all 0.17s ease-in-out;
-    .canvas-depth2-inner {
-      display: flex;
-      align-items: center;
-      padding: 0 40px;
-      height: 100%;
-      .canvas-depth2-list {
+    min-width: 1280px;
+    padding-bottom: 0;
+    background-color: #383838;
+    transition: padding .17s ease-in-out;
+    z-index: 999;
+    .canvas-menu-inner{
+        position: relative;
         display: flex;
         align-items: center;
-        height: 100%;
-        .canvas-depth2-item {
-          display: flex;
-          align-items: center;
-          margin-right: 26px;
-          height: 100%;
-          button {
-            position: relative;
-            opacity: 0.55;
-            color: #fff;
-            font-size: 12px;
-            font-weight: normal;
+        padding: 0 40px 0 20px;
+        background-color: #2C2C2C;
+        height: 46.8px;
+        z-index: 999;
+        .canvas-menu-list{
+            display: flex;
+            align-items: center;
             height: 100%;
-            padding-right: 12px;
-          }
-          &.active {
-            button {
-              opacity: 1;
-              font-weight: 600;
-              &:after {
-                content: '';
-                position: absolute;
-                top: 50%;
-                right: 0;
-                transform: translateY(-50%);
-                width: 5px;
-                height: 8px;
-                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
-              }
+            .canvas-menu-item{
+                display: flex;
+                align-items: center;
+                height: 100%;
+                button{
+                    display: flex;
+                    align-items: center;
+                    font-size: 12px;
+                    height: 100%;
+                    color: #fff;
+                    font-weight: 600;
+                    padding: 15px 20px;
+                    opacity: 0.55;
+                    transition: all .17s ease-in-out;
+                    .menu-icon{
+                        display: block;
+                        width: 14px;
+                        height: 14px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        margin-right: 10px;
+                        &.con00{background-image: url(/static/images/canvas/menu_icon00.svg);}
+                        &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);}
+                        &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);}
+                        &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);}
+                        &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);}
+                        &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);}
+                        &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);}
+                    }
+                }
+                &.active{
+                    background-color: #383838;
+                    button{
+                        opacity: 1;
+                    }
+                }
             }
-          }
         }
-      }
-      .canvas-depth2-btn-list {
-        display: flex;
-        align-items: center;
-        margin-left: auto;
-        height: 100%;
-        .depth2-btn-box {
-          display: flex;
-          align-items: center;
-          margin-right: 34px;
-          height: 100%;
-          transition: all 0.17s ease-in-out;
-          button {
-            position: relative;
-            font-size: 12px;
-            font-weight: 400;
+        .canvas-side-btn-wrap{
+            display: flex;
+            align-items: center;
+            margin-left: auto;
+            .select-box{
+                width: 124px;
+                margin: 0 5px;
+                height: 30px;
+                > div{
+                    width: 100%;
+                }
+            }
+            .btn-from{
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                button{
+                    display: block;
+                    width: 30px;
+                    height: 30px;
+                    border-radius: 2px;
+                    background-color: #3D3D3D;
+                    background-position: center;
+                    background-repeat: no-repeat;
+                    background-size: 15px 15px;
+                    transition: all .17s ease-in-out;
+                    &.btn01{background-image: url(../../public/static/images/canvas/side_icon03.svg);}
+                    &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);}
+                    &.btn03{background-image: url(../../public/static/images/canvas/side_icon01.svg);}
+                    &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);}
+                    &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);}
+                    &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);}
+                    &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);}
+                    &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);}
+                    &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);}
+                    &:hover{
+                        background-color: #1083E3;
+                    }
+                    &.active{
+                        background-color: #1083E3;
+                    }
+                }
+            }
+            .ico-btn-from{
+                display: flex;
+                align-items: center;
+                gap: 5px;
+                button{
+                    .ico{
+                        display: block;
+                        width: 15px;
+                        height: 15px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: contain;
+                        &.ico01{background-image: url(../../public/static/images/canvas/ico-flx01.svg);}
+                        &.ico02{background-image: url(../../public/static/images/canvas/ico-flx02.svg);}
+                        &.ico03{background-image: url(../../public/static/images/canvas/ico-flx03.svg);}
+                        &.ico04{background-image: url(../../public/static/images/canvas/ico-flx04.svg);}
+                    }
+                    .name{
+                        font-size: 12px;
+                        color: #fff;
+                    }
+                }
+                &.form06{
+                    .name{
+                        font-size: 13px;
+                    }
+                }
+            }
+            .vertical-horizontal{
+                display: flex;
+                min-width: 170px;
+                height: 28px;
+                margin-right: 5px;
+                border-radius: 2px;
+                background: #373737;
+                line-height: 28px;
+                overflow: hidden;
+                span{
+                    padding: 0 10px;
+                    font-size: 13px;
+                    color: #fff;
+                }
+                button{
+                    margin-left: auto;
+                    height: 100%;
+                    background-color: #4B4B4B;
+                    font-size: 13px;
+                    font-weight: 400;
+                    color: #fff;
+                    padding: 0 7.5px;
+                    transition: all .17s ease-in-out;
+                }
+                &.on{
+                    button{
+                        background-color: #1083E3;
+                    }
+                }
+            }
+            .size-control{
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                gap: 10px;
+                background-color: #3D3D3D;
+                border-radius: 2px;
+                width: 100px;
+                height: 30px;
+                margin: 0 5px;
+                span{
+                    font-size: 13px;
+                    color: #fff;
+                }
+                .control-btn{
+                    display: block;
+                    width: 12px;
+                    height: 12px;
+                    background-repeat: no-repeat;
+                    background-size: cover;
+                    background-position: center;
+                    &.minus{
+                        background-image: url(../../public/static/images/canvas/minus.svg);
+                    }
+                    &.plus{
+                        background-image: url(../../public/static/images/canvas/plus.svg);
+                    }
+                }
+            }
+        }
+    }
+    .canvas-depth2-wrap{
+        position: absolute;
+        top: -100%;
+        left: 0;
+        background-color: #383838;
+        width: 100%;
+        height: 50px;
+        transition: all .17s ease-in-out;
+        .canvas-depth2-inner{
+            display: flex;
+            align-items: center;
+            padding: 0 40px;
             height: 100%;
-            color: #fff;
-            padding-right: 12px;
-            &:after {
-              content: '';
-              position: absolute;
-              top: 50%;
-              right: 0;
-              transform: translateY(-50%);
-              width: 5px;
-              height: 8px;
-              background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+            .canvas-depth2-list{
+                display: flex;
+                align-items: center ;
+                height: 100%;
+                .canvas-depth2-item{
+                    display: flex; 
+                    align-items: center;
+                    margin-right: 26px;
+                    height: 100%;
+                    button{
+                        position: relative;
+                        opacity: 0.55;
+                        color: #fff;
+                        font-size: 12px;
+                        font-weight: normal;
+                        height: 100%;
+                        padding-right: 12px;
+                    }
+                    &.active{
+                        button{
+                            opacity: 1;
+                            font-weight: 600;
+                            &:after{
+                                content: '';
+                                position: absolute;
+                                top: 50%;
+                                right: 0;
+                                transform: translateY(-50%);
+                                width: 5px;
+                                height: 8px;
+                                background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+                            }
+                        }
+                    }
+                }
+            }
+            .canvas-depth2-btn-list{
+                display: flex;
+                align-items: center;
+                margin-left: auto;
+                height: 100%;
+                .depth2-btn-box{
+                    display: flex;
+                    align-items: center;
+                    margin-right: 34px;
+                    height: 100%;
+                    transition: all .17s ease-in-out;
+                    button{
+                        position: relative;
+                        font-size: 12px;
+                        font-weight: 400;
+                        height: 100%;
+                        color: #fff;
+                        padding-right: 12px;
+                        &:after{
+                            content: '';
+                            position: absolute;
+                            top: 50%;
+                            right: 0;
+                            transform: translateY(-50%);
+                            width: 5px;
+                            height: 8px;
+                            background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center;
+                        }
+                    }
+                    &:last-child{
+                        margin-right: 0;
+                    }
+                    &.mouse{
+                        opacity: 0.55;
+                    }
+                }
             }
-          }
-          &:last-child {
-            margin-right: 0;
-          }
-          &.mouse {
-            opacity: 0.55;
-          }
         }
-      }
+        &.active{
+            top: 47px;
+        }
     }
-    &.active {
-      top: 47px;
+    &.active{
+        padding-bottom: 50px;
     }
-  }
-  &.active {
-    padding-bottom: 50px;
-  }
 }
 
 // canvas-layout
-.canvas-content {
-  padding-top: 46.8px;
-  transition: all 0.17s ease-in-out;
-  .canvas-frame {
-    height: calc(100vh - 129.3px);
-  }
-  &.active {
-    padding-top: calc(46.8px + 50px);
-    .canvas-frame {
-      height: calc(100vh - 179.4px);
+.canvas-content{
+    padding-top: 46.8px;
+    transition: all .17s ease-in-out;
+    .canvas-frame{
+        height: calc(100vh - 129.3px);
+    }
+    &.active{
+        padding-top: calc(46.8px + 50px);
+        .canvas-frame{
+            height: calc(100vh - 179.4px);
+        }
     }
-  }
 }
-.canvas-layout {
-  padding-top: 37px;
-  .canvas-page-list {
-    position: fixed;
-    top: 92.8px;
-    left: 0;
-    display: flex;
-    background-color: #1c1c1c;
-    border-top: 1px solid #000;
-    width: 100%;
-    min-width: 1280px;
-    transition: all 0.17s ease-in-out;
-    z-index: 99;
-    &.active {
-      top: calc(92.8px + 50px);
-    }
-    .canvas-plane-wrap {
-      display: flex;
-      align-items: center;
-      max-width: calc(100% - 45px);
-      .canvas-page-box {
+.canvas-layout{
+    padding-top: 37px;
+    .canvas-page-list{
+        position: fixed;
+        top: 92.8px;
+        left: 0;
         display: flex;
-        align-items: center;
-        background-color: #1c1c1c;
-        padding: 9.6px 20px;
-        border-right: 1px solid #000;
-        min-width: 0;
-        transition: all 0.17s ease-in-out;
-        span {
-          display: flex;
-          align-items: center;
-          width: 100%;
-          font-size: 12px;
-          font-family: 'Pretendard', sans-serif;
-          color: #aaa;
-          white-space: nowrap;
-          text-overflow: ellipsis;
-          overflow: hidden;
+        background-color: #1C1C1C;
+        border-top: 1px solid #000;
+        width: 100%;
+        min-width: 1280px;
+        transition: all .17s ease-in-out;
+        z-index: 99;
+        &.active{
+            top: calc(92.8px + 50px);
         }
-        .close {
-          flex: none;
-          display: block;
-          width: 7px;
-          height: 8px;
-          margin-left: 15px;
-          background: url(../../public/static/images/canvas/plan_close_gray.svg) no-repeat center;
-          background-size: cover;
+        .canvas-plane-wrap{
+            display: flex;
+            align-items: center;
+            max-width: calc(100% - 45px);
+            .canvas-page-box{
+                display: flex;
+                align-items: center;
+                background-color: #1c1c1c;
+                padding: 9.6px 20px;
+                border-right:1px solid #000;
+                min-width: 0;
+                transition: all .17s ease-in-out;
+                span{
+                    display: flex;
+                    align-items: center;
+                    width: 100%;
+                    font-size: 12px;
+                    font-family: 'Pretendard', sans-serif;
+                    color: #AAA;
+                    white-space: nowrap;
+                    text-overflow: ellipsis;
+                    overflow: hidden;
+                }
+                .close{
+                    flex: none;
+                    display: block;
+                    width: 7px;
+                    height: 8px;
+                    margin-left: 15px;
+                    background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center;
+                    background-size: cover;
+                }
+                &.on{
+                    background-color: #fff;
+                    span{
+                        font-weight: 600;
+                        color: #101010;
+                    }
+                    .close{
+                        background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center;
+                    }
+                    &:hover{
+                        background-color: #fff;
+                    }
+                }
+                &:hover{
+                    background-color: #000;
+                }
+            }
         }
-        &.on {
-          background-color: #fff;
-          span {
-            font-weight: 600;
-            color: #101010;
-          }
-          .close {
-            background: url(../../public/static/images/canvas/plan_close_black.svg) no-repeat center;
-          }
-          &:hover {
-            background-color: #fff;
-          }
+        .plane-add{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 45px;
+            padding: 13.5px 0;
+            background-color: #1C1C1C;
+            border-right: 1px solid #000;
+            transition: all .17s ease-in-out;
+            span{
+                display: block;
+                width: 9px;
+                height: 9px;
+                background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center;
+                background-size: cover;
+            }
+            &:hover{
+                background-color: #000;
+            }
         }
-        &:hover {
-          background-color: #000;
-        }
-      }
     }
-    .plane-add {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 45px;
-      padding: 13.5px 0;
-      background-color: #1c1c1c;
-      border-right: 1px solid #000;
-      transition: all 0.17s ease-in-out;
-      span {
-        display: block;
-        width: 9px;
-        height: 9px;
-        background: url(../../public/static/images/canvas/plane_add.svg) no-repeat center;
-        background-size: cover;
-      }
-      &:hover {
-        background-color: #000;
-      }
-    }
-  }
 }
 
-.canvas-frame {
-  position: relative;
-  // height: calc(100% - 36.5px);
-  background-color: #f4f4f7;
-  overflow: auto;
-  transition: all 0.17s ease-in-out;
-  // &::-webkit-scrollbar {
-  //     width: 10px;
-  //     height: 10px;
-  //     background-color: #fff;
-  // }
-  // &::-webkit-scrollbar-thumb {
-  //     background-color: #C1CCD7;
-  //     border-radius: 30px;
-  // }
-  // &::-webkit-scrollbar-track {
-  //     background-color: #fff;
-  // }
-  .canvas-container {
-    margin: 0 auto;
-    background-color: #fff;
-  }
-  canvas {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
+.canvas-frame{
+    position: relative;
+    // height: calc(100% - 36.5px);
+    background-color: #F4F4F7;
+    overflow: auto;
+    transition: all .17s ease-in-out;
+    // &::-webkit-scrollbar {
+    //     width: 10px;
+    //     height: 10px;
+    //     background-color: #fff;
+    // }
+    // &::-webkit-scrollbar-thumb {
+    //     background-color: #C1CCD7;
+    //     border-radius: 30px;
+    // }
+    // &::-webkit-scrollbar-track {
+    //     background-color: #fff;
+    // }
+    .canvas-container{
+        margin: 0 auto;
+        background-color: #fff;
+    }
+    canvas{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
 }
 
 // sub-page
-.sub-header {
-  position: fixed;
-  top: 46px;
-  left: 0;
-  width: 100%;
-  min-width: 1280px;
-  height: 46px;
-  border-bottom: 1px solid #000;
-  background: #2c2c2c;
-  z-index: 999;
-  .sub-header-inner {
-    display: flex;
-    align-items: center;
-    height: 100%;
-    padding: 0 100px;
-    .sub-header-title-wrap {
-      display: flex;
-      align-items: center;
-      .title-item {
-        position: relative;
-        padding: 0 24px;
-        a {
-          display: flex;
-          align-items: center;
-          .icon {
-            width: 22px;
-            height: 22px;
-            margin-right: 8px;
-            background-repeat: no-repeat;
-            background-position: center;
-            background-size: cover;
-            &.drawing {
-              background-image: url(../../public/static/images/main/drawing_icon.svg);
-            }
-          }
-        }
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 1px;
-          height: 16px;
-          background-color: #d9d9d9;
-        }
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-          &:after {
-            display: none;
-          }
-        }
-      }
-    }
-    .sub-header-title {
-      font-size: 16px;
-      color: #fff;
-      font-weight: 600;
-    }
-    .sub-header-location {
-      margin-left: auto;
-      display: flex;
-      align-items: center;
-      .location-item {
-        position: relative;
+.sub-header{
+    position: fixed;
+    top: 46px;
+    left: 0;
+    width: 100%;
+    min-width: 1280px;
+    height: 46px;
+    border-bottom: 1px solid #000;
+    background: #2C2C2C;
+    z-index: 999;
+    .sub-header-inner{
         display: flex;
         align-items: center;
-        padding: 0 10px;
-        span {
-          display: flex;
-          font-size: 12px;
-          color: #aaa;
-          font-weight: normal;
-          cursor: default;
+        height: 100%;
+        padding: 0 100px;
+        .sub-header-title-wrap{
+            display: flex;
+            align-items: center;
+            .title-item{
+                position: relative;
+                padding: 0 24px;
+                a{
+                    display: flex;
+                    align-items: center;
+                    .icon{
+                        width: 22px;
+                        height: 22px;
+                        margin-right: 8px;
+                        background-repeat: no-repeat;
+                        background-position: center;
+                        background-size: cover;
+                        &.drawing{background-image: url(../../public/static/images/main/drawing_icon.svg);}
+                    }
+                }
+                &:after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 16px;
+                    background-color: #D9D9D9;
+                }
+                &:first-child{
+                    padding-left: 0;
+                }
+                &:last-child{
+                    padding-right: 0;
+                    &:after{
+                        display: none;
+                    }
+                }
+            }
         }
-        &:after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 4px;
-          height: 6px;
-          background: url(../../public/static/images/main/loaction_arr.svg) no-repeat center;
-        }
-        &:first-child {
-          padding-left: 0;
-        }
-        &:last-child {
-          padding-right: 0;
-          span {
+        .sub-header-title{
+            font-size: 16px;
             color: #fff;
-          }
-          &:after {
-            display: none;
-          }
+            font-weight: 600;
+        }
+        .sub-header-location{
+            margin-left: auto;
+            display: flex;
+            align-items: center;
+            .location-item{
+                position: relative;
+                display: flex;
+                align-items: center;
+                padding: 0 10px;
+                span{
+                    display: flex;
+                    font-size: 12px;
+                    color: #AAA;
+                    font-weight: normal;
+                    cursor: default;
+                }
+                &:after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 4px;
+                    height: 6px;
+                    background: url(../../public/static/images/main/loaction_arr.svg)no-repeat center;
+                }
+                &:first-child{
+                    padding-left: 0;
+                }
+                &:last-child{
+                    padding-right: 0;
+                    span{
+                        color: #fff;
+                    }
+                    &:after{
+                        display: none;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 
 // sub content
-.sub-content {
-  padding-top: 46px;
-  .sub-content-inner {
-    max-width: 1760px;
-    margin: 0 auto;
-    padding: 20px 20px 0;
-    .sub-content-box {
-      margin-bottom: 20px;
-      &:last-child {
-        margin-bottom: 0;
-      }
+.sub-content{
+    padding-top: 46px;
+    .sub-content-inner{
+        max-width: 1760px;
+        margin: 0 auto;
+        padding: 20px 20px 0;
+        .sub-content-box{
+            margin-bottom: 20px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-  &.estimate {
-    display: flex;
-    flex-direction: column;
-    padding-top: 0;
-    .sub-content-inner {
-      flex: 1;
-      width: 100%;
+    &.estimate{
+        display: flex;
+        flex-direction: column;
+        padding-top: 0;
+        .sub-content-inner{
+            flex: 1;
+            width: 100%;
+        }
     }
-  }
 }
-.sub-table-box {
-  padding: 20px;
-  border-radius: 6px;
-  border: 1px solid #e9eaed;
-  background: #fff;
-  box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
-  .table-box-title-wrap {
-    display: flex;
-    align-items: center;
-    margin-bottom: 15px;
-    .title-wrap {
-      display: flex;
-      align-items: center;
-      h3 {
-        display: block;
-        font-size: 15px;
-        color: #101010;
-        font-weight: 600;
-        margin-right: 14px;
-        &.product {
-          margin-right: 10px;
-        }
-      }
-      .product_tit {
-        position: relative;
-        font-size: 15px;
-        font-weight: 600;
-        color: #1083e3;
-        padding-left: 10px;
-        &::before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 0;
-          transform: translateY(-50%);
-          width: 1px;
-          height: 11px;
-          background-color: #d9d9d9;
-        }
-      }
-      .option {
-        padding-left: 5px;
-        font-size: 13px;
-        color: #101010;
-        font-weight: 400;
-      }
-      .info-wrap {
+.sub-table-box{
+    padding: 20px;
+    border-radius: 6px; 
+    border: 1px solid #E9EAED;
+    background: #FFF;
+    box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02);
+    .table-box-title-wrap{
         display: flex;
         align-items: center;
-        li {
-          position: relative;
-          padding: 0 6px;
-          font-size: 12px;
-          color: #101010;
-          font-weight: normal;
-          span {
-            font-weight: 600;
-            &.red {
-              color: #e23d70;
+        margin-bottom: 15px;
+        .title-wrap{
+            display: flex;
+            align-items: center;
+            h3{
+                display: block;
+                font-size: 15px;
+                color: #101010;
+                font-weight: 600;
+                margin-right: 14px;
+                &.product{
+                    margin-right: 10px;
+                }
             }
-          }
-          &:after {
-            content: '';
-            position: absolute;
-            top: 50%;
-            right: 0;
-            transform: translateY(-50%);
-            width: 1px;
-            height: 11px;
-            background-color: #d9d9d9;
-          }
-          &:first-child {
-            padding-left: 0;
-          }
-          &:last-child {
-            padding-right: 0;
-            &::after {
-              display: none;
+            .product_tit{
+                position: relative;
+                font-size: 15px;
+                font-weight: 600;
+                color: #1083E3;
+                padding-left: 10px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 11px;
+                    background-color: #D9D9D9;
+                }
+            }
+            .option{
+                padding-left: 5px;
+                font-size: 13px;
+                color: #101010;
+                font-weight: 400;
+            }
+            .info-wrap{
+                display: flex;
+                align-items: center;
+                li{
+                    position: relative;
+                    padding: 0 6px;
+                    font-size: 12px;
+                    color: #101010;
+                    font-weight: normal;
+                    span{
+                        font-weight: 600;
+                        &.red{
+                            color: #E23D70;
+                        }
+                    }
+                    &:after{
+                        content: '';
+                        position: absolute;
+                        top: 50%;
+                        right: 0;
+                        transform: translateY(-50%);
+                        width: 1px;
+                        height: 11px;
+                        background-color: #D9D9D9;
+                    }
+                    &:first-child{padding-left: 0;}
+                    &:last-child{padding-right: 0;&::after{display: none;}}
+                }
             }
-          }
         }
-      }
     }
-  }
-  .left-unit-box {
-    margin-left: auto;
-    display: flex;
-    align-items: center;
-  }
-  .promise-gudie {
-    display: block;
-    font-size: 13px;
-    font-weight: 700;
-    color: #101010;
-    margin-bottom: 20px;
-  }
-  .important {
-    color: #f00;
-  }
-  .sub-center-footer {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    margin-top: 20px;
-  }
-  .sub-right-footer {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: 20px;
-  }
+    .left-unit-box{
+        margin-left: auto;
+        display: flex;
+        align-items: center;
+    }
+    .promise-gudie{
+        display: block;
+        font-size: 13px;
+        font-weight: 700;
+        color: #101010;
+        margin-bottom: 20px;
+    }
+    .important{
+        color: #f00;
+    }
+    .sub-center-footer{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-top: 20px;
+    }
+    .sub-right-footer{
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        margin-top: 20px;
+    }
 }
-.pagination-wrap {
-  margin-top: 24px;
+.pagination-wrap{
+    margin-top: 24px;
 }
 
-.infomation-wrap {
-  margin-bottom: 30px;
+.infomation-wrap{
+    margin-bottom: 30px;
 }
 
-.infomation-box-wrap {
-  display: flex;
-  gap: 10px;
-  .sub-table-box {
-    flex: 1;
-  }
-  .info-title {
-    font-size: 14px;
-    font-weight: 500;
-    color: #344356;
-    margin-bottom: 10px;
-  }
-  .info-inner {
-    position: relative;
-    font-size: 13px;
-    color: #344356;
-    .copy-ico {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      width: 16px;
-      height: 16px;
-      background: url(../../public/static/images/sub/copy_ico.svg) no-repeat center;
-      background-size: cover;
+.infomation-box-wrap{
+    display: flex;
+    gap: 10px;
+    .sub-table-box{
+        flex: 1 ;
+    }
+    .info-title{
+        font-size: 14px;
+        font-weight: 500;
+        color: #344356;
+        margin-bottom: 10px;
+    }
+    .info-inner{
+        position: relative;
+        font-size: 13px;
+        color: #344356;
+        .copy-ico{
+            position: absolute;
+            bottom: 0;
+            right: 0;
+            width: 16px;
+            height: 16px;
+            background: url(../../public/static/images/sub/copy_ico.svg)no-repeat center;
+            background-size: cover;
+        }
     }
-  }
 }
 
 // 견적서
-.estimate-list-wrap {
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  &.one {
-    .estimate-box {
-      &:last-child {
-        min-width: unset;
-      }
-    }
-  }
-  .estimate-box {
-    flex: 1;
+.estimate-list-wrap{
     display: flex;
     align-items: center;
-    &:last-child {
-      flex: none;
-      min-width: 220px;
+    margin-bottom: 10px;
+    &.one{
+        .estimate-box{
+            &:last-child{
+                min-width: unset;
+            }
+        }
     }
-    .estimate-tit {
-      width: 105px;
-      height: 30px;
-      line-height: 30px;
-      background-color: #f4f4f7;
-      border-radius: 100px;
-      text-align: center;
-      font-size: 13px;
-      font-weight: 500;
-      color: #344356;
+    .estimate-box{
+        flex: 1 ;
+        display: flex;
+        align-items: center;
+        &:last-child{
+            flex: none;
+            min-width: 220px;
+        }
+        .estimate-tit{
+            width: 105px;
+            height: 30px;
+            line-height: 30px;
+            background-color: #F4F4F7;
+            border-radius: 100px;
+            text-align: center;
+            font-size: 13px;
+            font-weight: 500;
+            color: #344356;
+        }
+        .estimate-name{
+            font-size: 13px;
+            color: #344356;
+            margin-left: 14px;
+            font-weight: 400;
+            &.blue{
+                font-size: 16px;
+                font-weight: 700;
+                color: #1083E3;
+            }
+            &.red{
+                font-size: 16px;
+                font-weight: 700;
+                color: #D72A2A;
+            }
+        }
     }
-    .estimate-name {
-      font-size: 13px;
-      color: #344356;
-      margin-left: 14px;
-      font-weight: 400;
-      &.blue {
-        font-size: 16px;
-        font-weight: 700;
-        color: #1083e3;
-      }
-      &.red {
-        font-size: 16px;
-        font-weight: 700;
-        color: #d72a2a;
-      }
+    &:last-child{
+        margin-bottom: 0;
     }
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
 }
 
 // file drag box
-.drag-file-box {
-  padding: 10px;
-  .btn-area {
-    padding-bottom: 15px;
-    border-bottom: 1px solid #ecf0f4;
-    .file-upload {
-      display: inline-block;
-      height: 30px;
-      background-color: #94a0ad;
-      padding: 0 10px;
-      border-radius: 2px;
-      font-size: 13px;
-      line-height: 30px;
-      color: #fff;
-      font-weight: 500;
-      cursor: pointer;
-      transition: background 0.15s ease-in-out;
-      &:hover {
-        background-color: #607f9a;
-      }
-    }
-  }
-  .drag-file-area {
-    position: relative;
-    margin-top: 15px;
-    p {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-      font-size: 13px;
-      color: #ccc;
-      font-weight: 400;
-      cursor: default;
-    }
-  }
-  .file-list {
-    .file-item {
-      margin-bottom: 15px;
-      span {
-        position: relative;
-        font-size: 13px;
-        color: #45576f;
-        font-weight: 400;
-        white-space: nowrap;
-        padding-right: 55px;
-        button {
-          position: absolute;
-          top: 50%;
-          right: 0;
-          transform: translateY(-50%);
-          width: 15px;
-          height: 15px;
-          background: url(../../public/static/images/sub/file_delete.svg) no-repeat center;
-          background-size: cover;
+.drag-file-box{
+    padding: 10px;
+    .btn-area{
+        padding-bottom: 15px;
+        border-bottom: 1px solid #ECF0F4;
+        .file-upload{
+            display: inline-block;
+            height: 30px;
+            background-color: #94A0AD;
+            padding: 0 10px;
+            border-radius: 2px;
+            font-size: 13px;
+            line-height: 30px;
+            color: #fff;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background .15s ease-in-out;
+            &:hover{
+                background-color: #607F9A;
+            }
+        }
+    }
+    .drag-file-area{
+        position: relative;
+        margin-top: 15px;
+        p{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-size: 13px;
+            color: #ccc;
+            font-weight: 400;
+            cursor: default;
+        }
+    }
+    .file-list{
+        .file-item{
+            margin-bottom: 15px;
+            span{
+                position: relative;
+                font-size: 13px;
+                color: #45576F;
+                font-weight: 400;
+                white-space: nowrap;
+                padding-right: 55px;
+                button{
+                    position: absolute;
+                    top: 50%;
+                    right: 0;
+                    transform: translateY(-50%);
+                    width: 15px;
+                    height: 15px;
+                    background: url(../../public/static/images/sub/file_delete.svg)no-repeat center;
+                    background-size: cover;
+                }
+            }
+            &:last-child{
+                margin-bottom: 0;
+            }
         }
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
     }
-  }
 }
 
-.estimate-arr-btn {
-  display: block;
-  width: 20px;
-  height: 20px;
-  background-color: #94a0ad;
-  border: 1px solid #94a0ad;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: url(../../public/static/images/canvas/estiment_arr.svg);
-  background-size: 11px 7px;
-  border-radius: 2px;
-  &.up {
-    rotate: 180deg;
-  }
-  &.on {
-    background-color: #fff;
-    border-color: #c2d0dd;
-    background-image: url(../../public/static/images/canvas/estiment_arr_color.svg);
-  }
-}
-.estimate-check-wrap {
-  .estimate-check-inner {
+.estimate-arr-btn{
     display: block;
-  }
-  &.hide {
-    border-bottom: 1px solid #ecf0f4;
-    margin-bottom: 15px;
-    .estimate-check-inner {
-      display: none;
+    width: 20px;
+    height: 20px;
+    background-color: #94A0AD;
+    border: 1px solid #94A0AD;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-image: url(../../public/static/images/canvas/estiment_arr.svg);
+    background-size: 11px 7px;
+    border-radius: 2px;
+    &.up{
+        rotate: 180deg;
+    }
+    &.on{
+        background-color: #fff;
+        border-color: #C2D0DD;
+        background-image: url(../../public/static/images/canvas/estiment_arr_color.svg)
     }
-  }
 }
-
-.special-note-check-wrap {
-  display: grid;
-  grid-template-columns: repeat(5, 1fr);
-  border-radius: 3px;
-  margin-bottom: 30px;
-  .special-note-check-item {
-    padding: 14px 10px;
-    border: 1px solid #ecf0f4;
-    margin-top: -1px;
-    margin-right: -1px;
-    &.act {
-      background-color: #f7f9fa;
+.estimate-check-wrap{
+    .estimate-check-inner{
+        display: block;
     }
-  }
-}
-
-.calculation-estimate {
-  border: 1px solid #ecf0f4;
-  border-radius: 3px;
-  padding: 24px;
-  max-height: 350px;
-  overflow-y: auto;
-  margin-bottom: 30px;
-  dl {
-    margin-bottom: 35px;
-    &:last-child {
-      margin-bottom: 0;
-    }
-    dt {
-      font-size: 13px;
-      font-weight: 600;
-      color: #1083e3;
-      margin-bottom: 15px;
-    }
-    dd {
-      font-size: 12px;
-      font-weight: 400;
-      color: #45576f;
-      margin-bottom: 8px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  &::-webkit-scrollbar {
-    width: 4px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #d9dee2;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-.esimate-wrap {
-  margin-bottom: 20px;
-}
-
-.estimate-product-option {
-  display: flex;
-  align-items: center;
-  margin-bottom: 15px;
-  .product-price-wrap {
-    display: flex;
-    align-items: center;
-    .product-price-tit {
-      font-size: 13px;
-      font-weight: 400;
-      color: #45576f;
-      margin-right: 10px;
-    }
-    .select-wrap {
-      width: 110px;
-    }
-  }
-  .product-edit-wrap {
-    display: flex;
-    align-items: center;
-    margin-left: auto;
-    .product-edit-explane {
-      display: flex;
-      align-items: center;
-      margin-right: 15px;
-      .explane-item {
-        position: relative;
-        display: flex;
-        align-items: center;
-        padding: 0 10px;
-        font-size: 12px;
-        font-weight: 400;
-        span {
-          width: 20px;
-          height: 20px;
-          margin-right: 5px;
-          background-size: cover;
-          background-repeat: no-repeat;
-          background-position: center;
-        }
-        &:before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          left: 0;
-          transform: translateY(-50%);
-          width: 1px;
-          height: 12px;
-          background-color: #d9d9d9;
-        }
-        &:first-child {
-          padding-left: 0;
-          &::before {
+    &.hide{
+        border-bottom: 1px solid #ECF0F4;
+        margin-bottom: 15px;
+        .estimate-check-inner{
             display: none;
-          }
         }
-        &:last-child {
-          padding-right: 0;
-        }
-        &.item01 {
-          color: #3bbb48;
-          span {
-            background-image: url(../../public/static/images/sub/open_ico.svg);
-          }
-        }
-        &.item02 {
-          color: #909000;
-          span {
-            background-image: url(../../public/static/images/sub/change_ico.svg);
-          }
-        }
-        &.item03 {
-          color: #0191c9;
-          span {
-            background-image: url(../../public/static/images/sub/attachment_ico.svg);
-          }
-        }
-        &.item04 {
-          color: #f16a6a;
-          span {
-            background-image: url(../../public/static/images/sub/click_check_ico.svg);
-          }
-        }
-      }
     }
-    .product-edit-btn {
-      display: flex;
-      align-items: center;
-      button {
+}
+
+.special-note-check-wrap{
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    border-radius: 3px;
+    margin-bottom: 30px;
+    .special-note-check-item{
+        padding: 14px 10px;
+        border: 1px solid #ECF0F4;
+        margin-top: -1px;
+        margin-right: -1px;
+        &.act{
+            background-color: #F7F9FA;
+        }
+    }
+}
+
+.calculation-estimate{
+    border: 1px solid #ECF0F4;
+    border-radius: 3px;
+    padding: 24px;
+    max-height: 350px;
+    overflow-y: auto;
+    margin-bottom: 30px;
+    dl{
+        margin-bottom: 35px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+        dt{
+            font-size: 13px;
+            font-weight: 600;
+            color: #1083E3;
+            margin-bottom: 15px;
+        }
+        dd{
+            font-size: 12px;
+            font-weight: 400;
+            color: #45576F;
+            margin-bottom: 8px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #d9dee2;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+.esimate-wrap{
+    margin-bottom: 20px;
+}
+
+.estimate-product-option{
+    display: flex;
+    align-items: center;
+    margin-bottom: 15px;
+    .product-price-wrap{
         display: flex;
         align-items: center;
-        span {
-          width: 13px;
-          height: 13px;
-          margin-right: 5px;
-          background-size: cover;
-          &.plus {
-            background: url(../../public/static/images/sub/plus_btn.svg) no-repeat center;
-          }
-          &.minus {
-            background: url(../../public/static/images/sub/minus_btn.svg) no-repeat center;
-          }
+        .product-price-tit{
+            font-size: 13px;
+            font-weight: 400;
+            color: #45576F;
+            margin-right: 10px;
+        }
+        .select-wrap{
+            width: 110px;
+        }
+    }
+    .product-edit-wrap{
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+        .product-edit-explane{
+            display: flex;
+            align-items: center;
+            margin-right: 15px;
+            .explane-item{
+                position: relative;
+                display: flex;
+                align-items: center;
+                padding: 0 10px;
+                font-size: 12px;
+                font-weight: 400;
+                span{
+                    width: 20px;
+                    height: 20px;
+                    margin-right: 5px;
+                    background-size: cover;
+                    background-repeat: no-repeat;
+                    background-position: center;
+                }
+                &:before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    left: 0;
+                    transform: translateY(-50%);
+                    width: 1px;
+                    height: 12px;
+                    background-color: #D9D9D9;
+                }
+                &:first-child{
+                    padding-left: 0;
+                    &::before{
+                        display: none;
+                    }
+                }
+                &:last-child{
+                    padding-right: 0;
+                }
+                &.item01{
+                    color: #3BBB48;
+                    span{
+                        background-image: url(../../public/static/images/sub/open_ico.svg);
+                    }
+                }
+                &.item02{
+                    color: #909000;
+                    span{
+                        background-image: url(../../public/static/images/sub/change_ico.svg);
+                    }
+                }
+                &.item03{
+                    color: #0191C9;
+                    span{
+                        background-image: url(../../public/static/images/sub/attachment_ico.svg);
+                    }
+                }
+                &.item04{
+                    color: #F16A6A;
+                    span{
+                        background-image: url(../../public/static/images/sub/click_check_ico.svg);
+                    }
+                }
+            }
+        }
+        .product-edit-btn{
+            display: flex;
+            align-items: center;
+            button{
+                display: flex;
+                align-items: center;
+                span{
+                    width: 13px;
+                    height: 13px;
+                    margin-right: 5px;
+                    background-size: cover;
+                    &.plus{
+                        background: url(../../public/static/images/sub/plus_btn.svg)no-repeat center;
+                    }
+                    &.minus{
+                        background: url(../../public/static/images/sub/minus_btn.svg)no-repeat center;
+                    }
+                }
+            }
         }
-      }
     }
-  }
 }
 
 // 발전시물레이션
-.chart-wrap {
-  display: flex;
-  gap: 20px;
-  width: 100%;
-  .sub-table-box {
-    height: 100%;
-  }
-  .chart-inner {
-    flex: 1;
-    .chart-box {
-      margin-bottom: 30px;
-    }
-  }
-  .chart-table-wrap {
+.chart-wrap{
     display: flex;
-    flex-direction: column;
-    flex: none;
-    width: 650px;
-    .sub-table-box {
-      flex: 1;
-      &:first-child {
-        margin-bottom: 20px;
-      }
+    gap: 20px;
+    width: 100%;
+    .sub-table-box{
+        height: 100%;
+    }
+    .chart-inner{
+        flex: 1;
+        .chart-box{
+            margin-bottom: 30px;
+        }
+    }
+    .chart-table-wrap{
+        display: flex;
+        flex-direction: column;
+        flex: none;
+        width: 650px;
+        .sub-table-box{
+            flex: 1;
+            &:first-child{
+                margin-bottom: 20px;
+            }
+        }
     }
-  }
 }
 
-.chart-month-table {
-  table {
-    table-layout: fixed;
-    border-collapse: collapse;
-    border: 1px solid #ecf0f4;
-    border-radius: 4px;
-    thead {
-      th {
-        padding: 4.5px 0;
-        border-bottom: 1px solid #ecf0f4;
+.chart-month-table{
+    table{
+        table-layout: fixed;
+        border-collapse:collapse;
+        border: 1px solid #ECF0F4;
+        border-radius: 4px;
+        thead{
+            th{
+                padding: 4.5px 0;
+                border-bottom: 1px solid #ECF0F4;
+                text-align: center;
+                font-size: 13px;
+                color: #45576F;
+                font-weight: 500;
+                background-color: #F8F9FA;
+            }
+        }
+        tbody{
+            td{
+                font-size: 13px;
+                color: #45576F;
+                text-align: center;
+                padding: 4.5px 0;
+            }
+        }
+    }
+}
+
+.simulation-guide-wrap{
+    display: flex;
+    padding: 20px;
+    .simulation-tit-wrap{
+        flex: none;
+        padding-right: 40px;
+        border-right: 1px solid #EEEEEE;
+        span{
+            display: block;
+            position: relative;
+            padding-left: 60px;
+            font-size: 15px;
+            color: #14324F;
+            font-weight: 600;
+            &::before{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                width: 40px;
+                height: 40px;
+                background: url(../../public/static/images/sub/simulation_guide.svg)no-repeat center;
+                background-size: cover;
+            }
+        }
+    }
+    .simulation-guide-box{
+        flex: 1;
+        padding-left: 40px;
+        dl{
+            margin-bottom: 25px;
+            dt{
+                font-size: 13px;
+                color: #101010;
+                font-weight: 600;
+                margin-bottom: 5px;
+            }
+            dd{
+                font-size: 12px;
+                color: #45576F;
+                font-weight: 400;
+                line-height: 24px;
+            }
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+        ul, ol{
+            list-style: unset;
+        }
+    }
+}
+
+.module-total{
+    display: flex;
+    align-items: center;
+    background-color: #F8F9FA;
+    padding: 9px 0;
+    margin-right: 4px;
+    border: 1px solid #ECF0F4;
+    border-top: none;
+    .total-title{
+        flex: 1;
         text-align: center;
         font-size: 13px;
-        color: #45576f;
+        color: #344356;
         font-weight: 500;
-        background-color: #f8f9fa;
-      }
     }
-    tbody {
-      td {
-        font-size: 13px;
-        color: #45576f;
+    .total-num{
+        flex: none;
+        width: 121px;
         text-align: center;
-        padding: 4.5px 0;
-      }
+        font-size: 15px;
+        color: #344356;
+        font-weight: 500;
     }
-  }
-}
-
-.simulation-guide-wrap {
-  display: flex;
-  padding: 20px;
-  .simulation-tit-wrap {
-    flex: none;
-    padding-right: 40px;
-    border-right: 1px solid #eeeeee;
-    span {
-      display: block;
-      position: relative;
-      padding-left: 60px;
-      font-size: 15px;
-      color: #14324f;
-      font-weight: 600;
-      &::before {
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: 0;
-        transform: translateY(-50%);
-        width: 40px;
-        height: 40px;
-        background: url(../../public/static/images/sub/simulation_guide.svg) no-repeat center;
-        background-size: cover;
-      }
-    }
-  }
-  .simulation-guide-box {
-    flex: 1;
-    padding-left: 40px;
-    dl {
-      margin-bottom: 25px;
-      dt {
-        font-size: 13px;
-        color: #101010;
-        font-weight: 600;
-        margin-bottom: 5px;
-      }
-      dd {
-        font-size: 12px;
-        color: #45576f;
-        font-weight: 400;
-        line-height: 24px;
-      }
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-    ul,
-    ol {
-      list-style: unset;
-    }
-  }
-}
-
-.module-total {
-  display: flex;
-  align-items: center;
-  background-color: #f8f9fa;
-  padding: 9px 0;
-  margin-right: 4px;
-  border: 1px solid #ecf0f4;
-  border-top: none;
-  .total-title {
-    flex: 1;
-    text-align: center;
-    font-size: 13px;
-    color: #344356;
-    font-weight: 500;
-  }
-  .total-num {
-    flex: none;
-    width: 121px;
-    text-align: center;
-    font-size: 15px;
-    color: #344356;
-    font-weight: 500;
-  }
 }
 
 // 물건상세
-.information-help-wrap {
-  display: flex;
-  padding: 24px;
-  background-color: #f4f4f4;
-  border-radius: 4px;
-  margin-bottom: 15px;
-  .information-help-tit-wrap {
-    position: relative;
+.information-help-wrap{
     display: flex;
-    align-items: center;
-    padding-right: 40px;
-    border-right: 1px solid #e0e0e3;
-    .help-tit-icon {
-      width: 40px;
-      height: 40px;
-      border-radius: 50%;
-      margin-right: 10px;
-      background: #fff url(../../public/static/images/sub/information_help.svg) no-repeat center;
-      background-size: 20px 20px;
+    padding: 24px;
+    background-color: #F4F4F4;
+    border-radius: 4px;
+    margin-bottom: 15px;
+    .information-help-tit-wrap{
+        position: relative;
+        display: flex;
+        align-items: center;
+        padding-right: 40px;
+        border-right: 1px solid #E0E0E3;
+        .help-tit-icon{
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            margin-right: 10px;
+            background: #fff url(../../public/static/images/sub/information_help.svg)no-repeat center;
+            background-size: 20px 20px;
+        }
+        .help-tit{
+            font-size: 13px;
+            font-weight: 600;
+            color: #45576F;
+        }
     }
-    .help-tit {
-      font-size: 13px;
-      font-weight: 600;
-      color: #45576f;
+    .information-help-guide{
+        padding-left: 40px;
+        span{
+            display: block;
+            font-size: 12px;
+            font-weight: 400;
+            color: #45576F;
+            margin-bottom: 7px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-  .information-help-guide {
-    padding-left: 40px;
-    span {
-      display: block;
-      font-size: 12px;
-      font-weight: 400;
-      color: #45576f;
-      margin-bottom: 7px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
 }
 
-.community-search-warp {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 10px 0 30px 0;
-  border-bottom: 1px solid #e5e5e5;
-  margin-bottom: 24px;
-  .community-search-box {
-    position: relative;
+.community-search-warp{
     display: flex;
+    flex-direction: column;
     align-items: center;
-    width: 580px;
-    height: 45px;
-    padding: 0 45px 0 20px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-    border: 1px solid #101010;
-    .community-input {
-      width: 100%;
-      height: 100%;
-      font-size: 13px;
-      font-weight: 400;
-      color: #101010;
-      &::placeholder {
-        color: #c8c8c8;
-      }
+    padding: 10px 0 30px 0;
+    border-bottom: 1px solid #E5E5E5;
+    margin-bottom: 24px;
+    .community-search-box{
+        position: relative;
+        display: flex;
+        align-items: center;
+        width: 580px;
+        height: 45px;
+        padding: 0 45px 0 20px;
+        margin-bottom: 20px;
+        border-radius: 2px;
+        border: 1px solid #101010;
+        .community-input{
+            width: 100%;
+            height: 100%;
+            font-size: 13px;
+            font-weight: 400;
+            color: #101010;
+            &::placeholder{
+                color: #C8C8C8;
+            }
+        }
+        .community-search-ico{
+            position: absolute;
+            top: 50%;
+            right: 20px;
+            transform: translateY(-50%);
+            flex: none;
+            width: 21px;
+            height: 100%;
+            background: url(../../public/static/images/sub/community_search.svg)no-repeat center;
+            background-size: 21px 21px;
+            z-index: 3;
+        }
     }
-    .community-search-ico {
-      position: absolute;
-      top: 50%;
-      right: 20px;
-      transform: translateY(-50%);
-      flex: none;
-      width: 21px;
-      height: 100%;
-      background: url(../../public/static/images/sub/community_search.svg) no-repeat center;
-      background-size: 21px 21px;
-      z-index: 3;
+    .community-search-keyword{
+        font-size: 13px;
+        font-weight: 400;
+        color: #45576F;
+        span{
+            font-weight: 600;
+            color: #F16A6A;
+        }
     }
-  }
-  .community-search-keyword {
-    font-size: 13px;
-    font-weight: 400;
-    color: #45576f;
-    span {
-      font-weight: 600;
-      color: #f16a6a;
-    }
-  }
 }
 
 // 자료 다운로드
-.file-down-list {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 14px;
-  .file-down-item {
-    display: flex;
-    align-items: center;
-    padding: 24px;
-    border-radius: 4px;
-    border: 1px solid #e5e5e5;
-    background: #fff;
-    transition: all 0.15s ease-in-out;
-    .file-item-info {
-      .item-num {
-        display: inline-block;
-        padding: 6px 17.5px;
-        border-radius: 60px;
-        background-color: #f4f4f7;
-        font-size: 13px;
-        font-weight: 600;
-        color: #101010;
-        margin-bottom: 15px;
-      }
-      .item-name {
-        font-size: 16px;
-        color: #101010;
-        font-weight: 500;
-        margin-bottom: 13px;
-      }
-      .item-date {
-        font-size: 13px;
-        font-weight: 400;
-        color: #344356;
-      }
+.file-down-list{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 14px;
+    .file-down-item{
+        display: flex;
+        align-items: center;
+        padding: 24px;
+        border-radius: 4px;
+        border: 1px solid #E5E5E5;
+        background: #FFF; 
+        transition: all .15s ease-in-out;
+        .file-item-info{
+            .item-num{
+                display: inline-block;
+                padding: 6px 17.5px;
+                border-radius: 60px;
+                background-color: #F4F4F7;
+                font-size: 13px;
+                font-weight: 600;
+                color: #101010;
+                margin-bottom: 15px;
+            }
+            .item-name{
+                font-size: 16px;
+                color: #101010;
+                font-weight: 500;
+                margin-bottom: 13px;
+            }
+            .item-date{
+                font-size: 13px;
+                font-weight: 400;
+                color: #344356;
+            }
+        }
+        .file-down-box{
+            display: flex;
+            align-items: center;
+            flex: none;
+            margin-left: auto;
+            height: 100%;
+            .file-down-btn{
+                width: 36px;
+                height: 36px;
+                background: url(../../public/static/images/sub/file_down_btn.svg)no-repeat center;
+                background-size: cover;
+            }
+        }
+        &:hover{
+            background-color: #F4F4F7;
+        }
     }
-    .file-down-box {
-      display: flex;
-      align-items: center;
-      flex: none;
-      margin-left: auto;
-      height: 100%;
-      .file-down-btn {
-        width: 36px;
-        height: 36px;
-        background: url(../../public/static/images/sub/file_down_btn.svg) no-repeat center;
-        background-size: cover;
-      }
-    }
-    &:hover {
-      background-color: #f4f4f7;
-    }
-  }
 }
 
-.file-down-nodata {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-  height: 148px;
-  padding: 24px;
-  border-radius: 4px;
-  border: 1px solid #e5e5e5;
-  font-size: 16px;
-  font-weight: 500;
-  color: #344356;
+.file-down-nodata{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 148px;
+    padding: 24px;
+    border-radius: 4px;
+    border: 1px solid #E5E5E5;
+    font-size: 16px;
+    font-weight: 500;
+    color: #344356;
 }
 
 //신규물건 등록
-.product-input-wrap {
-  display: flex;
-  align-items: center;
-  width: 200px;
-  height: 30px;
-  background-color: #fafafa;
-  border: 1px solid #eee;
-  padding: 0 10px;
-  input {
-    font-size: 13px;
-    font-weight: 400;
-    color: #999999;
-    padding: 0;
-    width: 100%;
-    height: 100%;
-    flex: 1;
-    background-color: inherit;
-  }
-  .product-delete {
-    flex: none;
-    display: block;
-    width: 15px;
-    height: 100%;
-    background: url(../../public/static/images/sub/product-del.svg) no-repeat center;
-    background-size: 15px 15px;
-  }
+.product-input-wrap{
+    display: flex;
+    align-items: center;
+    width: 200px;
+    height: 30px;
+    background-color: #FAFAFA;
+    border: 1px solid #EEE;
+    padding: 0 10px;
+    input{
+        font-size: 13px;
+        font-weight: 400;
+        color: #999999;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        flex: 1 ;
+        background-color: inherit;
+    }
+    .product-delete{
+        flex: none;
+        display: block;
+        width: 15px;
+        height: 100%;
+        background: url(../../public/static/images/sub/product-del.svg)no-repeat center;
+        background-size: 15px 15px;
+    }
 }
 
 @media screen and (max-width: 1800px) {
-  .canvas-menu-wrap {
-    .canvas-menu-inner {
-      .canvas-menu-list {
-        .canvas-menu-item button {
-          .menu-icon {
-            margin-right: 5px;
-          }
-        }
-        .canvas-menu-item {
-          button {
-            padding: 15px 15px;
-            font-size: 11px;
-          }
-        }
-      }
-    }
-    .canvas-depth2-wrap {
-      .canvas-depth2-inner {
-        .canvas-depth2-list {
-          .canvas-depth2-item {
-            button {
-              font-size: 11px;
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item button{
+                    .menu-icon{
+                        margin-right: 5px;
+                    }
+                } 
+                .canvas-menu-item{
+                    button{
+                        padding: 15px 15px;
+                        font-size: 11px;
+                    }
+                }
             }
-          }
         }
-      }
-    }
-  }
+        .canvas-depth2-wrap{
+            .canvas-depth2-inner{
+                .canvas-depth2-list{
+                    .canvas-depth2-item{
+                        button{
+                            font-size: 11px;
+                        }
+                    } 
+                } 
+            }
+        }
+    } 
 }
 
 @media screen and (max-width: 1600px) {
-  .canvas-menu-wrap {
-    .canvas-menu-inner {
-      .canvas-menu-list {
-        .canvas-menu-item button {
-          .menu-icon {
-            display: none;
-          }
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item button{
+                    .menu-icon{
+                        display: none;
+                    }
+                } 
+            }
         }
-      }
-    }
-  }
-  .canvas-content {
-    .canvas-frame {
-      height: calc(100vh - 129.5px);
-    }
-    &.active {
-      .canvas-frame {
-        height: calc(100vh - 179.5px);
-      }
-    }
-  }
+    } 
+    .canvas-content{
+        .canvas-frame{
+            height: calc(100vh - 129.5px);
+        }
+        &.active{
+            .canvas-frame{
+                height: calc(100vh - 179.5px);
+            }
+        } 
+    } 
 }
 
 @media screen and (max-width: 1500px) {
-  .canvas-menu-wrap {
-    .canvas-menu-inner {
-      .canvas-menu-list {
-        .canvas-menu-item {
-          button {
-            padding: 15px 10px;
-            font-size: 10px;
-          }
-        }
-      }
-      .canvas-side-btn-wrap {
-        .btn-from {
-          gap: 3px;
-        }
-        .vertical-horizontal {
-          margin-right: 3px;
-          min-width: 150px;
-        }
-        .select-box {
-          width: 100px;
-          margin: 0 3px;
-        }
-        .size-control {
-          width: 90px;
-          margin: 0 3px;
-        }
-      }
-    }
-  }
-  .sub-header {
-    .sub-header-inner {
-      .sub-header-title {
-        font-size: 15px;
-      }
-      .sub-header-title-wrap {
-        .title-item {
-          a {
-            .icon {
-              width: 20px;
-              height: 20px;
+    .canvas-menu-wrap{
+        .canvas-menu-inner{
+            .canvas-menu-list{
+                .canvas-menu-item{
+                    button{
+                        padding: 15px 10px;
+                        font-size: 10px;
+                    }
+                }
             }
-          }
+            .canvas-side-btn-wrap{
+                .btn-from{
+                    gap: 3px;
+                }
+                .vertical-horizontal{
+                    margin-right: 3px;
+                    min-width: 150px;
+                }
+                .select-box{
+                    width: 100px;
+                    margin: 0 3px;
+                }
+                .size-control{
+                    width: 90px;
+                    margin: 0 3px;
+                }
+            } 
         }
-      }
     }
-  }
+    .sub-header{
+        .sub-header-inner{
+            .sub-header-title{
+                font-size: 15px;
+            }
+            .sub-header-title-wrap{
+                .title-item{
+                    a{
+                        .icon{
+                            width: 20px;
+                            height: 20px;
+                        }
+                    } 
+                } 
+            } 
+        } 
+    } 
+    
 }
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 4ddb3bad..01b47c47 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -4,2103 +4,1910 @@ $pop-bold-weight: 500;
 $pop-normal-size: 12px;
 $alert-color: #101010;
 
-@keyframes mountpop {
-  from {
-    opacity: 0;
-    scale: 0.95;
-  }
-  to {
-    opacity: 1;
-    scale: 1;
-  }
+@keyframes mountpop{
+    from{opacity: 0; scale: 0.95;}
+    to{opacity: 1; scale: 1;}
 }
-@keyframes unmountpop {
-  from {
-    opacity: 1;
-    scale: 1;
-  }
-  to {
-    opacity: 0;
-    scale: 0.95;
-  }
+@keyframes unmountpop{
+    from{opacity: 1; scale: 1;}
+    to{opacity: 0; scale: 0.95;}
 }
 
-.normal-font {
-  font-size: 12px;
-  font-weight: 400;
-  color: #fff;
+.normal-font{
+    font-size: 12px;
+    font-weight: 400;
+    color: #fff;
 }
-.bold-font {
-  font-size: 12px;
-  font-weight: 500;
-  color: #fff;
+.bold-font{
+    font-size: 12px;
+    font-weight: 500;
+    color: #fff;
 }
 
-.modal-pop-wrap {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: -webkit-fit-content;
-  height: -moz-fit-content;
-  height: fit-content;
-  border: 1px solid #000;
-  border-radius: 4px;
-  background-color: #272727;
-  z-index: 9999999;
-  &.xsm {
-    width: 200px;
-  }
-  &.xxxm {
-    width: 240px;
-  }
-  &.xxm {
-    width: 270px;
-  }
-  &.xm {
-    width: 300px;
-  }
-  &.ssm {
-    width: 380px;
-  }
-  &.sm {
-    width: 580px;
-  }
-  &.r {
-    width: 400px;
-  }
-  &.lr {
-    width: 440px;
-  }
-  &.lr-2 {
-    width: 450px;
-  }
-  &.lrr {
-    width: 480px;
-  }
-  &.ml {
-    width: 530px;
-  }
-  &.l-2 {
-    width: 640px;
-  }
-  &.lx-2 {
-    width: 740px;
-  }
-  &.lx {
-    width: 770px;
-  }
-  &.l {
-    width: 800px;
-  }
-  &.mount {
-    animation: mountpop 0.17s ease-in-out forwards;
-  }
-  &.unmount {
-    animation: unmountpop 0.17s ease-in-out forwards;
-  }
-  &.alert {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    background-color: transparent;
-    border: none;
-    .modal-head {
-      background-color: transparent;
-      padding: 0 0 8px;
-      .modal-close {
-        width: 20px;
-        height: 20px;
-        background: url(../../public/static/images/canvas/alert_close.svg) no-repeat center;
-      }
+.modal-pop-wrap{
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: -webkit-fit-content;
+    height: -moz-fit-content;
+    height: fit-content;
+    border: 1px solid #000;
+    border-radius: 4px;
+    background-color: #272727;
+    z-index: 9999999;
+    &.xsm{
+        width: 200px;
     }
-    .modal-body {
-      background-color: #fff;
-      padding: 22px;
-      border-radius: 4px;
-      border: 1px solid #101010;
-      color: $alert-color;
-      .alert-title {
+    &.xxxm{
+        width: 240px;
+    }
+    &.xxm{
+        width: 270px;
+    }
+    &.xm{
+        width: 300px;
+    }
+    &.ssm{
+        width: 380px;
+    }
+    &.sm{
+        width: 580px;
+    }
+    &.r{
+        width: 400px;
+    }
+    &.lr{
+        width: 440px;
+    }
+    &.lr-2{
+        width: 450px;
+    }
+    &.lrr{
+        width: 480px;
+    }
+    &.ml{
+        width: 530px;
+    }
+    &.l-2{
+        width: 640px;
+    }
+    &.lx-2{
+        width: 740px;
+    }
+    &.lx{
+        width: 770px;
+    }
+    &.l{
+        width: 800px;
+    }
+    &.mount{
+        animation: mountpop .17s ease-in-out forwards;
+    }
+    &.unmount{
+        animation: unmountpop .17s ease-in-out forwards;
+    }
+    &.alert{
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        background-color: transparent;
+        border: none;
+        .modal-head{
+            background-color: transparent;
+            padding: 0 0 8px;
+            .modal-close{
+                width: 20px;
+                height: 20px;
+                background: url(../../public/static/images/canvas/alert_close.svg)no-repeat center;
+            }
+        }
+        .modal-body{
+            background-color: #fff;
+            padding: 22px;
+            border-radius: 4px;
+            border: 1px solid #101010;
+            color: $alert-color;
+            .alert-title{
+                font-size: 13px;
+                font-weight: 700;
+                color: $alert-color;
+                margin-bottom: 15px;
+            }
+        }
+    }
+}
+.modal-head{
+    display: flex;
+    align-items: center;
+    padding: 10px 24px;
+    background-color: #000;
+    // overflow: hidden;
+    h1.title{
         font-size: 13px;
+        color: $pop-color;
         font-weight: 700;
-        color: $alert-color;
+    }
+    .modal-close{
+        margin-left: auto;
+        color: transparent;
+        font-size: 0;
+        width: 10px;
+        height: 10px;
+        background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+    }
+}
+.modal-body{
+    padding: 24px;
+    .modal-btn-wrap{
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        button{
+            flex: 1;
+        }
+        &.sub{
+            button{
+                flex: 1 1 auto;
+                padding: 0;
+            }
+            margin-bottom: 14px;
+        }
+    }
+    .modal-check-btn-wrap{
+        margin-top: 15px;
+        .check-wrap-title{
+            font-size: $pop-normal-size;
+            color: $pop-color;
+            font-weight: 600;
+            &.light{
+                font-weight: $pop-normal-weight;
+            }
+        }
+        .flex-check-box{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            margin-top: 15px;
+            &.for2{
+                justify-content: flex-end;
+                button{
+                    width: calc(50% - 5px);
+                }
+                &.btn{
+                    gap: 5px;
+                    button{
+                        width: calc(50% - 2.5px);
+                    }
+                }
+            }
+            &.for-line{
+                button{
+                    flex: 1;
+                }
+            }
+        }
+    }
+    .outer-line-wrap{
+        border-top: 1px solid #3C3C3C;
+        margin-top: 10px;
+        padding-top: 15px;
         margin-bottom: 15px;
-      }
+        > div{
+            margin-bottom: 15px;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
     }
-  }
-}
-.modal-head {
-  display: flex;
-  align-items: center;
-  padding: 10px 24px;
-  background-color: #000;
-  // overflow: hidden;
-  h1.title {
-    font-size: 13px;
-    color: $pop-color;
-    font-weight: 700;
-  }
-  .modal-close {
-    margin-left: auto;
-    color: transparent;
-    font-size: 0;
-    width: 10px;
-    height: 10px;
-    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
-  }
-}
-.modal-body {
-  padding: 24px;
-  .modal-btn-wrap {
-    display: flex;
-    align-items: center;
-    gap: 5px;
-    button {
-      flex: 1;
-    }
-    &.sub {
-      button {
-        flex: 1 1 auto;
-        padding: 0;
-      }
-      margin-bottom: 14px;
-    }
-  }
-  .modal-check-btn-wrap {
-    margin-top: 15px;
-    .check-wrap-title {
-      font-size: $pop-normal-size;
-      color: $pop-color;
-      font-weight: 600;
-      &.light {
+    .modal-guide{
+        display: block;
+        font-size: $pop-normal-size;
+        color: $alert-color;
         font-weight: $pop-normal-weight;
-      }
     }
-    .flex-check-box {
-      display: flex;
-      flex-wrap: wrap;
-      gap: 10px;
-      margin-top: 15px;
-      &.for2 {
-        justify-content: flex-end;
-        button {
-          width: calc(50% - 5px);
-        }
-        &.btn {
-          gap: 5px;
-          button {
-            width: calc(50% - 2.5px);
-          }
-        }
-      }
-      &.for-line {
-        button {
-          flex: 1;
-        }
-      }
-    }
-  }
-  .outer-line-wrap {
-    border-top: 1px solid #3c3c3c;
-    margin-top: 10px;
-    padding-top: 15px;
-    margin-bottom: 15px;
-    > div {
-      margin-bottom: 15px;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  .modal-guide {
-    display: block;
-    font-size: $pop-normal-size;
-    color: $alert-color;
-    font-weight: $pop-normal-weight;
-  }
 }
 
-.adsorption-point {
-  display: flex;
-  align-items: center;
-  background-color: #3a3a3a;
-  border-radius: 3px;
-  padding-left: 11px;
-  overflow: hidden;
-  transition: all 0.17s ease-in-out;
-  span {
-    font-size: $pop-normal-size;
-    color: #898989;
-  }
-  i {
+.adsorption-point{
     display: flex;
     align-items: center;
-    padding: 0 7px;
-    margin-left: auto;
-    height: 100%;
-    font-size: 13px;
-    color: #898989;
-  }
-  &.act {
-    i {
-      color: $pop-color;
-      background-color: #1083e3;
+    background-color: #3A3A3A;
+    border-radius: 3px;
+    padding-left: 11px;
+    overflow: hidden;
+    transition: all 0.17s ease-in-out;
+    span{
+        font-size: $pop-normal-size;
+        color: #898989;
+    }
+    i{
+        display: flex;
+        align-items: center;
+        padding: 0 7px;
+        margin-left: auto;
+        height: 100%;
+        font-size: 13px;
+        color: #898989;
+    }
+    &.act{
+        i{
+            color: $pop-color;
+            background-color: #1083E3;
+        }
     }
-  }
 }
 
 // grid-option
-.grid-check-form {
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding-bottom: 15px;
-  &.border {
-    border-bottom: 1px solid #424242;
-  }
-}
-.grid-option-wrap {
-  .grid-option-box {
+.grid-check-form{
     display: flex;
     align-items: center;
-    background-color: transparent;
-    border: 1px solid #3d3d3d;
-    border-radius: 2px;
-    padding: 15px 10px;
-    gap: 20px;
-    margin-bottom: 10px;
-    .grid-input-form {
-      display: flex;
-      align-items: center;
-      span {
-        flex: none;
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        font-weight: $pop-bold-weight;
-      }
-      .input-grid {
-        width: 54px;
-        input {
-          width: 100%;
+    gap: 15px;
+    padding-bottom: 15px;
+    &.border{
+        border-bottom: 1px solid #424242;
+    }
+}
+.grid-option-wrap{
+    .grid-option-box{
+        display: flex;
+        align-items: center;
+        background-color: transparent;
+        border: 1px solid #3D3D3D;
+        border-radius: 2px;
+        padding: 15px 10px;
+        gap: 20px;
+        margin-bottom: 10px;
+        .grid-input-form{
+            display: flex;
+            align-items: center;
+            span{
+                flex: none;
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                font-weight: $pop-bold-weight;
+            }
+            .input-grid{
+                width: 54px;
+                input{
+                    width: 100%;
+                }
+            }
+        }
+        &:last-child{
+            margin-bottom: 0;
         }
-      }
     }
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
 }
-.select-form {
-  .sort-select {
-    width: 100%;
-  }
+.select-form{
+    .sort-select{width: 100%;}
 }
-.grid-select {
-  flex: 1;
-  &.no-flx {
-    flex: unset;
-  }
-  .sort-select {
-    width: 100%;
-    background-color: #313131;
-    min-width: auto;
-    font-size: 12px;
-    border: none;
-    p {
-      font-size: 12px;
+.grid-select{
+    flex: 1;
+    &.no-flx{
+        flex: unset;
     }
-    > ul {
-      border: none;
+    .sort-select{
+        width: 100%;
+        background-color: #313131;
+        min-width: auto;
+        font-size: 12px;
+        border: none;
+        p{
+            font-size: 12px;
+        }
+        > ul{
+            border: none;
+        }
     }
-  }
-  &.right {
-    p {
-      text-align: right;
+    &.right{
+        p{
+            text-align: right;
+        }
+        ul{
+            li{
+                justify-content: flex-end;
+            }
+        }
     }
-    ul {
-      li {
-        justify-content: flex-end;
-      }
-    }
-  }
 }
-.grid-btn-wrap {
-  padding-top: 15px;
-  text-align: right;
-  button {
-    padding: 0 10px;
-  }
+.grid-btn-wrap{
+    padding-top: 15px;
+    text-align: right;
+    button{
+        padding: 0 10px;
+    }
 }
 
 // grid copy
-.grid-option-tit {
-  font-size: $pop-normal-size;
-  color: $pop-color;
-  font-weight: $pop-normal-weight;
-  padding-bottom: 15px;
+.grid-option-tit{
+    font-size: $pop-normal-size;
+    color: $pop-color;
+    font-weight: $pop-normal-weight;
+    padding-bottom: 15px;
+
 }
-.grid-direction {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  flex: 1;
+.grid-direction{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    flex: 1;
 }
-.direction {
-  width: 22px;
-  height: 22px;
-  background-color: #757575;
-  background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 16px 15px;
-  border-radius: 50%;
-  transition: all 0.15s ease-in-out;
-  opacity: 0.6;
-  &.down {
-    transform: rotate(180deg);
-  }
-  &.left {
-    transform: rotate(-90deg);
-  }
-  &.right {
-    transform: rotate(90deg);
-  }
-  &:hover,
-  &.act {
-    opacity: 1;
-  }
+.direction{
+    width: 22px;
+    height: 22px;
+    background-color: #757575;
+    background-image: url(../../public/static/images/canvas/grid_option_arr.svg);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 16px 15px;
+    border-radius: 50%;
+    transition: all .15s ease-in-out;
+    opacity: 0.6;
+    &.down{transform: rotate(180deg);}
+    &.left{transform: rotate(-90deg);}
+    &.right{transform: rotate(90deg);}
+    &:hover,
+    &.act{
+        opacity: 1;
+    }
 }
 
 // grid-move
-.move-form {
-  width: 100%;
-  p {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-  }
-}
-.input-move-wrap {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  span {
-    color: $pop-color;
-    font-size: $pop-normal-size;
-  }
-  .input-move {
-    width: 130px;
-    input {
-      width: 100%;
-    }
-  }
-}
-.direction-move-wrap {
-  flex: none;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 5px;
-  margin-left: auto;
-}
-
-// 배치면 초기 설정
-.placement-table {
-  table {
-    table-layout: fixed;
-    tr {
-      th {
+.move-form{
+    width: 100%;
+    p{
         font-size: $pop-normal-size;
         color: $pop-color;
         font-weight: $pop-bold-weight;
-        padding: 18px 0;
-        border-bottom: 1px solid #424242;
-        vertical-align: middle;
-        .tip-wrap {
-          display: flex;
-          align-items: center;
-        }
-      }
-      td {
-        font-size: $pop-normal-size;
-        color: $pop-color;
-        border-bottom: 1px solid #424242;
-        padding: 18px 0 18px 20px;
-        vertical-align: middle;
-        .flex-box {
-          display: flex;
-          align-items: center;
-          height: 100%;
-        }
-      }
-      &:first-child {
-        td,
-        th {
-          padding-top: 0;
-        }
-      }
     }
-  }
-  .tooltip {
-    position: relative;
-    display: block;
-    width: 15px;
-    height: 15px;
-    margin-left: 5px;
-    background: url(../../public/static/images/canvas/pop_tip.svg) no-repeat center;
-    background-size: cover;
-  }
-  &.light {
-    padding: 0;
-    th,
-    td {
-      color: $alert-color;
-      border-bottom: none;
-      border-top: 1px solid #efefef;
-    }
-    th {
-      padding: 14px 0;
-    }
-    tr {
-      &:first-child {
-        td,
-        th {
-          padding-top: 14px;
-        }
-      }
-      &:last-child {
-        td,
-        th {
-          padding-bottom: 0px;
-        }
-      }
-    }
-  }
 }
-
-.pop-form-radio {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-.placement-option {
-  display: flex;
-  align-items: center;
-  gap: 20px;
-}
-.select-wrap {
-  .sort-select {
-    width: 100%;
-  }
-}
-.flex-ment {
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  span {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-  }
-}
-
-.img-edit-wrap {
-  flex: none;
-  .img-edit-btn {
+.input-move-wrap{
     display: flex;
     align-items: center;
-    height: 30px;
-    padding: 0 10px;
-    font-size: 12px;
-    font-weight: 400;
-    color: #101010;
-    background-color: #fff;
-    border-radius: 2px;
-    cursor: pointer;
-    transition: all 0.15s ease-in-out;
-    .img-edit {
-      width: 16px;
-      height: 16px;
-      background: url(../../public/static/images/canvas/img_edit_ico.svg) no-repeat center;
-      background-size: cover;
-      margin-right: 5px;
+    gap: 5px;
+    span{
+        color: $pop-color;
+        font-size: $pop-normal-size;
     }
-    &:hover {
-      background-color: #ebebeb;
+    .input-move{
+        width: 130px;
+        input{
+            width: 100%;
+        }
     }
-  }
 }
-.img-name-wrap {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  margin-left: 10px;
-  input {
-    flex: 1;
-  }
-  .img-check {
+.direction-move-wrap{
     flex: none;
-    width: 18px;
-    height: 18px;
-    margin-left: 5px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    background-image: url(../../public/static/images/canvas/img_check_fail.svg);
-  }
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 5px;
+    margin-left: auto;
 }
 
-.for-address {
-  input {
-    flex: 1;
-  }
-  .check-address {
+// 배치면 초기 설정
+.placement-table{
+    table{
+        table-layout: fixed;
+        tr{
+            th{
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                font-weight: $pop-bold-weight;
+                padding: 18px 0;
+                border-bottom: 1px solid #424242;
+                vertical-align: middle;
+                .tip-wrap{
+                    display: flex;
+                    align-items: center;
+                }
+            }
+            td{
+                font-size: $pop-normal-size;
+                color: $pop-color;
+                border-bottom: 1px solid #424242;
+                padding: 18px 0 18px 20px;
+                vertical-align: middle;
+                .flex-box{
+                    display: flex;
+                    align-items: center;
+                    height: 100%;
+                }
+            }
+            &:first-child{
+                td,
+                th{
+                    padding-top: 0;
+                }
+            }
+        }
+    }
+    .tooltip{
+        position: relative;
+        display: block;
+        width: 15px;
+        height: 15px;
+        margin-left: 5px;
+        background: url(../../public/static/images/canvas/pop_tip.svg)no-repeat center;
+        background-size: cover;
+    }
+    &.light{
+        padding: 0;
+        th,td{
+            color: $alert-color;
+            border-bottom: none;
+            border-top: 1px solid #EFEFEF;
+        }
+        th{
+            padding: 14px 0;
+        }
+        tr{
+            &:first-child{
+                td,
+                th{
+                    padding-top: 14px;
+                }
+            }
+            &:last-child{
+                td,
+                th{
+                    padding-bottom: 0px;
+                }
+            }
+        }
+    }
+}
+
+.pop-form-radio{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+.placement-option{
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+.select-wrap{
+    .sort-select{
+        width: 100%;
+    }
+}
+.flex-ment{
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    span{
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-normal-weight;
+    }
+
+}
+
+.img-edit-wrap{
     flex: none;
-    width: 18px;
-    height: 18px;
-    margin-left: 5px;
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: cover;
-    &.fail {
-      background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    .img-edit-btn{
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 0 10px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #101010;
+        background-color: #fff;
+        border-radius: 2px;
+        cursor: pointer;
+        transition: all .15s ease-in-out;
+        .img-edit{
+            width: 16px;
+            height: 16px;
+            background: url(../../public/static/images/canvas/img_edit_ico.svg)no-repeat center;
+            background-size: cover;
+            margin-right: 5px;
+        }
+        &:hover{
+            background-color: #ebebeb;
+        }
     }
-    &.success {
-      background-image: url(../../public/static/images/canvas/img_check_success.svg);
+}
+.img-name-wrap{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin-left: 10px;
+    input{
+        flex: 1;
+
+    }
+    .img-check{
+        flex: none;
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        background-image: url(../../public/static/images/canvas/img_check_fail.svg);
+    }
+}
+
+.for-address{
+    input{
+        flex: 1;
+    }
+    .check-address{
+        flex: none;
+        width: 18px;
+        height: 18px;
+        margin-left: 5px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+        &.fail{background-image: url(../../public/static/images/canvas/img_check_fail.svg);}
+        &.success{background-image: url(../../public/static/images/canvas/img_check_success.svg);}
     }
-  }
 }
 
 // 외벽선 그리기
-.outline-wrap {
-  padding: 24px 0;
-  border-top: 1px solid #424242;
-
-  .outline-inner {
+.outline-wrap{
+    padding: 24px 0;
+    border-top: 1px solid #424242;
+    
+    .outline-inner{
+        display: flex;
+        align-items: center;
+        margin-bottom: 14px;
+        &:last-child{
+            margin-bottom: 0;
+        }
+        .outline-form{
+            // width: 50%;
+            margin-right: 15px;
+        }
+    }
+    &:last-child{
+        border-bottom: 1px solid #424242;
+    }
+}
+.outline-form{
     display: flex;
     align-items: center;
-    margin-bottom: 14px;
-    &:last-child {
-      margin-bottom: 0;
+    
+    span{
+        width: 60px;
+        flex: none;
+        font-size: $pop-normal-size;
+        font-weight: $pop-bold-weight;
+        color: $pop-color;
+        margin-right: 10px;
+        &.thin{
+            width: auto;
+            font-weight: $pop-normal-weight;
+            margin-right: 0;
+        }
     }
-    .outline-form {
-      // width: 50%;
-      margin-right: 15px;
-    }
-  }
-  &:last-child {
-    border-bottom: 1px solid #424242;
-  }
-}
-.outline-form {
-  display: flex;
-  align-items: center;
 
-  span {
-    width: 60px;
-    flex: none;
-    font-size: $pop-normal-size;
-    font-weight: $pop-bold-weight;
-    color: $pop-color;
-    margin-right: 10px;
-    &.thin {
-      width: auto;
-      font-weight: $pop-normal-weight;
-      margin-right: 0;
+    .reset-btn{
+        flex: none;
+        width: 30px;
+        height: 30px;
+        background: transparent;
+        border: 1px solid #484848;
+        border-radius: 2px;
+        margin-left: 5px;
+        background-image: url(../../public/static/images/canvas/reset_ico.svg);
+        background-repeat: no-repeat;
+        background-size: 12px 12px;
+        background-position: center;
+    }
+    &:last-child{
+        margin-right: 0;
     }
-  }
-
-  .reset-btn {
-    flex: none;
-    width: 30px;
-    height: 30px;
-    background: transparent;
-    border: 1px solid #484848;
-    border-radius: 2px;
-    margin-left: 5px;
-    background-image: url(../../public/static/images/canvas/reset_ico.svg);
-    background-repeat: no-repeat;
-    background-size: 12px 12px;
-    background-position: center;
-  }
-  &:last-child {
-    margin-right: 0;
-  }
 }
 
-.cul-wrap {
-  display: flex;
-  .outline-box {
-    width: 50%;
-    margin-right: 15px;
-    .outline-form {
-      width: 100%;
-      margin-bottom: 14px;
-      margin-right: 0;
-      &:last-child {
-        margin-bottom: 0;
-      }
-    }
-  }
-  .cul-box {
+.cul-wrap{
     display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 50%;
-    background-color: #3d3d3d;
-    border-radius: 2px;
-  }
+    .outline-box{
+        width: 50%;
+        margin-right: 15px;
+        .outline-form{
+            width: 100%;
+            margin-bottom: 14px;
+            margin-right: 0;
+            &:last-child{
+                margin-bottom: 0;
+            }
+        }
+    }
+    .cul-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50%;
+        background-color: #3D3D3D;
+        border-radius: 2px ;
+    }
 }
 
 // 외벽선 속성 설정
-.properties-guide {
-  font-size: $pop-normal-size;
-  color: #aaa;
-  font-weight: $pop-normal-weight;
-  margin-bottom: 14px;
+.properties-guide{
+    font-size: $pop-normal-size;
+    color: #AAA;
+    font-weight: $pop-normal-weight;
+    margin-bottom: 14px;
 }
 
-.setting-tit {
-  font-size: 13px;
-  color: $pop-color;
-  font-weight: $pop-bold-weight;
-  margin-bottom: 10px;
+.setting-tit{
+    font-size: 13px;
+    color: $pop-color;
+    font-weight: $pop-bold-weight;
+    margin-bottom: 10px;
 }
-.properties-setting-wrap {
-  &.outer {
-    margin-top: 24px;
-  }
-  .setting-btn-wrap {
-    display: flex;
-    align-items: center;
-    padding: 14px 0;
-    border-top: 1px solid #424242;
-    border-bottom: 1px solid #424242;
-    .setting-btn {
-      display: block;
-      width: 100%;
-      height: 40px;
-      font-size: 13px;
-      color: #fff;
-      font-weight: 700;
-      border-radius: 2px;
-      transition: all 0.15s ease-in-out;
-      &.green {
-        background-color: #305941;
-        border: 1px solid #45cd7d;
-        &:hover {
-          background-color: #3a6b4e;
-        }
-      }
-      &.blue {
-        background-color: #2e5360;
-        border: 1px solid #3fbae6;
-        &:hover {
-          background-color: #365f6e;
-        }
-      }
+.properties-setting-wrap{
+    &.outer{
+        margin-top: 24px;
+    }
+    .setting-btn-wrap{
+        display: flex;
+        align-items: center;
+        padding: 14px 0;
+        border-top: 1px solid #424242;
+        border-bottom: 1px solid #424242;
+        .setting-btn{
+            display: block;
+            width: 100%;
+            height: 40px;
+            font-size: 13px;
+            color: #fff;
+            font-weight: 700;
+            border-radius: 2px;
+            transition: all .15s ease-in-out;
+            &.green{
+                background-color: #305941;
+                border: 1px solid #45CD7D;
+                &:hover{
+                    background-color: #3a6b4e;
+                }
+            }
+            &.blue{
+                background-color: #2E5360;
+                border: 1px solid #3FBAE6;
+                &:hover{
+                    background-color: #365f6e;
+                }
+            }
+        }
     }
-  }
 }
 
 // 지붕형상 설정
-.roof-shape-menu {
-  display: grid;
-  grid-template-columns: 1fr 1fr 1fr 1fr;
-  grid-template-rows: 1fr 1fr;
-  gap: 24px 10px;
-  margin-bottom: 24px;
-  .shape-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    padding: 13px;
-    background-color: #3d3d3d;
-    transition: background 0.15s ease-in-out;
-    img {
-      max-width: 100%;
-    }
-  }
-  .shape-title {
-    font-size: $pop-normal-size;
-    font-weight: $pop-bold-weight;
-    color: $pop-color;
-    margin-top: 10px;
-    text-align: center;
-    transition: color 0.15s ease-in-out;
-  }
-  .shape-menu-box {
-    &.act,
-    &:hover {
-      .shape-box {
-        background-color: #008bff;
-      }
-      .shape-title {
-        color: #008bff;
-      }
-    }
-  }
-}
-
-.setting-box {
-  padding: 14px 0;
-  border-top: 1px solid #424242;
-  border-bottom: 1px solid #424242;
-}
-.padding-form {
-  padding-left: 23px;
-}
-.discrimination-box {
-  padding: 16px 12px;
-  border: 1px solid #3d3d3d;
-  border-radius: 2px;
-}
-
-.modal-bottom-border-bx {
-  margin-top: 24px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #424242;
-}
-
-// 처마∙케라바 변경
-.eaves-keraba-table {
-  display: table;
-  border-collapse: collapse;
-  .eaves-keraba-item {
-    display: table-row;
-    .eaves-keraba-th,
-    .eaves-keraba-td {
-      font-size: $pop-normal-size;
-      color: $pop-color;
-      font-weight: $pop-normal-weight;
-      display: table-cell;
-      vertical-align: middle;
-      padding-bottom: 14px;
-    }
-    .eaves-keraba-td {
-      padding-left: 10px;
-    }
-    .eaves-keraba-ico {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 5px;
-      background-color: #3d3d3d;
-      border: 1px solid #3d3d3d;
-      border-radius: 2px;
-      cursor: pointer;
-      &.act {
-        border: 1px solid #ed0004;
-      }
-    }
-    &:last-child {
-      .eaves-keraba-th,
-      .eaves-keraba-td {
-        padding-bottom: 0;
-      }
-    }
-  }
-}
-.guide {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: $pop-color;
-  margin-bottom: 24px;
-  &.sm {
-    margin-bottom: 15px;
-  }
-  span {
-    display: block;
-  }
-}
-
-// 지붕면 할당
-.allocation-select-wrap {
-  display: flex;
-  align-items: center;
-  padding-bottom: 14px;
-  border-bottom: 1px solid #424242;
-  margin-bottom: 14px;
-  span {
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-bold-weight;
-    margin-right: 10px;
-  }
-  .allocation-edit {
-    display: flex;
-    align-items: center;
-    height: 30px;
-    padding: 0 10px;
-    margin-left: 5px;
-    font-size: $pop-normal-size;
-    color: $pop-color;
-    font-weight: $pop-normal-weight;
-    border: 1px solid #484848;
-    background-color: #323234;
-    i {
-      display: block;
-      width: 12px;
-      height: 12px;
-      margin-right: 5px;
-      background: url(../../public/static/images/canvas/allocation_edit.svg) no-repeat center;
-      background-size: cover;
-    }
-  }
-}
-
-.block-box {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 10px;
-  .flex-ment {
-    gap: 10px;
-    .dec {
-      text-decoration: underline;
-    }
-    .delete {
-      display: block;
-      width: 15px;
-      height: 15px;
-      background: url(../../public/static/images/canvas/allocation_delete.svg) no-repeat center;
-      background-size: cover;
-    }
-  }
-  &:last-child {
-    margin-bottom: 0;
-  }
-}
-
-.icon-btn-wrap {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 30px;
-    font-size: $pop-normal-size;
-    font-weight: $pop-normal-weight;
-    color: $pop-color;
-    border: 1px solid #646464;
-    border-radius: 2px;
-    padding: 0 10px;
-    transition: all 0.15s ease-in-out;
-    i {
-      height: 15px;
-      display: block;
-      margin-left: 10px;
-      background-repeat: no-repeat;
-      background-position: center;
-      background-size: cover;
-      transition: all 0.15s ease-in-out;
-      &.allocation01 {
-        background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
-        width: 15px;
-      }
-      &.allocation02 {
-        background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
-        width: 18px;
-      }
-    }
-    &.act,
-    &:hover {
-      color: #101010;
-      border: 1px solid #101010;
-      background-color: #fff;
-      i {
-        &.allocation01 {
-          background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
-        }
-        &.allocation02 {
-          background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
-        }
-      }
-    }
-  }
-}
-
-// 경사설정
-.slope-wrap {
-  padding-bottom: 24px;
-  border-bottom: 1px solid #424242;
-}
-
-// 면형상 배치
-.plane-frame-wrap {
-  display: flex;
-  gap: 10px;
-  .plane-shape-wrap {
-    flex: none;
-    width: 73px;
-  }
-}
-
-.plane-shape-menu {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 5px;
-  .shape-menu-box {
-    border-radius: 2px;
-    width: 34px;
-    height: 34px;
-    background-color: #373737;
-    border: 1px solid #676767;
-    transition:
-      background 0.15s ease-in-out,
-      border 0.15s ease-in-out;
-    .shape-box {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      border-radius: 2px;
-    }
-    &.act,
-    &:hover {
-      border-color: #008bff;
-      background-color: #008bff;
-    }
-  }
-}
-
-.shape-library {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  padding-top: 5px;
-  .library-btn {
-    width: 100%;
-    height: 34px;
-    border: 1px solid #6c6c6c;
-    border-radius: 2px;
-    background-color: #373737;
-    background-repeat: no-repeat;
-    background-position: center;
-    transition: all 0.15s ease-in-out;
-    &.ico01 {
-      background-image: url(../../public/static/images/canvas/shape_labrary01.svg);
-      background-size: 19px 18px;
-    }
-    &.ico02 {
-      background-image: url(../../public/static/images/canvas/shape_labrary02.svg);
-      background-size: 15px 20px;
-    }
-    &.ico03 {
-      background-image: url(../../public/static/images/canvas/shape_labrary03.svg);
-      background-size: 19px 16px;
-    }
-    &:hover {
-      border-color: #1083e3;
-      background-color: #1083e3;
-    }
-  }
-}
-
-.plane-detail-wrap {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-}
-.plane-shape-wrapper {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  .plane-box {
-    width: 100%;
-    padding: 10px 18px;
-    border-radius: 2px;
-    background-color: #313131;
-    border: 1px solid #484848;
-    .plane-box-tit {
-      font-size: $pop-normal-size;
-      font-weight: 600;
-      color: $pop-color;
-      margin-bottom: 10px;
-    }
-    &.shape-box {
-      .shape-box-inner {
-        display: flex;
-        gap: 15px;
-        min-height: 140px;
-        .shape-img {
-          position: relative;
-          flex: none;
-          width: 150px;
-          background-color: #fff;
-          border-radius: 2px;
-          img {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-          }
-        }
-        .shape-data {
-          flex: 1;
-          .eaves-keraba-table {
-            .eaves-keraba-item {
-              .eaves-keraba-th,
-              .eaves-keraba-td {
-                padding-bottom: 10px;
-              }
-              &:last-child {
-                .eaves-keraba-th,
-                .eaves-keraba-td {
-                  padding-bottom: 0px;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-    &.direction-box {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      .plane-direction-box {
-        flex: 1;
+.roof-shape-menu{
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr;
+    gap: 24px 10px;
+    margin-bottom: 24px;
+    .shape-box{
         display: flex;
         align-items: center;
         justify-content: center;
         width: 100%;
-      }
+        padding: 13px;
+        background-color: #3D3D3D;
+        transition: background .15s ease-in-out;
+        img{
+            max-width: 100%;
+        }
     }
-  }
-}
-.plane-direction {
-  width: 150px;
-  position: relative;
-  height: 120px;
-  span {
-    position: absolute;
-    font-size: 12px;
-    font-weight: 500;
-    color: #b1b1b1;
-    &.top {
-      top: 0;
-      left: 50%;
-      transform: translateX(-50%);
+    .shape-title{
+        font-size: $pop-normal-size;
+        font-weight: $pop-bold-weight;
+        color: $pop-color;
+        margin-top: 10px;
+        text-align: center;
+        transition: color .15s ease-in-out;
     }
-    &.right {
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
+    .shape-menu-box{
+        &.act,
+        &:hover{
+            .shape-box{background-color: #008BFF;}
+            .shape-title{color: #008BFF;}
+        }
     }
-    &.bottom {
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &.left {
-      top: 50%;
-      left: 0;
-      transform: translateY(-50%);
-    }
-  }
-  .plane-btn {
-    position: absolute;
-    width: 28px;
-    height: 28px;
-    background-color: #777777;
-    background-image: url(../../public/static/images/canvas/plane_arr.svg);
-    background-size: 12px 13px;
-    background-repeat: no-repeat;
-    background-position: center;
-    border-radius: 50%;
-    transition: all 0.15s ease-in-out;
-    &.up {
-      top: 22px;
-      left: 50%;
-      transform: translateX(-50%);
-    }
-    &.right {
-      top: 50%;
-      right: 32px;
-      transform: translateY(-50%) rotate(90deg);
-    }
-    &.down {
-      bottom: 22px;
-      left: 50%;
-      transform: translateX(-50%) rotate(180deg);
-    }
-    &.left {
-      top: 50%;
-      left: 32px;
-      transform: translateY(-50%) rotate(270deg);
-    }
-    &:hover,
-    &.act {
-      background-color: #fff;
-      background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
-    }
-  }
 }
 
-.plane-tab-guide {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: $pop-color;
-  margin-top: 10px;
+.setting-box{
+    padding: 14px 0;
+    border-top: 1px solid #424242;
+    border-bottom: 1px solid #424242;
 }
-.plane-shape-btn {
-  padding-top: 10px;
-  margin-top: auto;
-  button {
-    display: block;
-    width: 100%;
-  }
+.padding-form{
+    padding-left: 23px;
+}
+.discrimination-box{
+    padding: 16px 12px;
+    border: 1px solid #3D3D3D;
+    border-radius: 2px;
 }
 
-// 오브젝트 배치
-.mb-box {
-  margin-bottom: 24px;
+.modal-bottom-border-bx{
+    margin-top: 24px;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #424242;
 }
 
-.object-direction-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.discrimination-tit {
-  font-size: 13px;
-  color: #fff;
-  font-weight: 500;
-}
-
-.object-size-wrap {
-  display: flex;
-  min-height: 206px;
-  gap: 24px;
-  margin-top: 14px;
-  .object-size-img {
-    position: relative;
-    flex: none;
-    width: 200px;
-    background-color: #fff;
-    img {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
+// 처마∙케라바 변경
+.eaves-keraba-table{
+    display: table;
+    border-collapse: collapse;
+    .eaves-keraba-item{
+        display: table-row;
+        .eaves-keraba-th,
+        .eaves-keraba-td{
+            font-size: $pop-normal-size;
+            color: $pop-color;
+            font-weight: $pop-normal-weight;
+            display: table-cell;
+            vertical-align: middle;
+            padding-bottom: 14px;
+        }
+        .eaves-keraba-td{
+            padding-left: 10px;
+        }
+        .eaves-keraba-ico{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 5px;
+            background-color: #3D3D3D;
+            border: 1px solid #3D3D3D;
+            border-radius: 2px;
+            cursor: pointer;
+            &.act{
+                border: 1px solid #ED0004;
+            }
+        }
+        &:last-child{
+            .eaves-keraba-th,
+            .eaves-keraba-td{
+                padding-bottom: 0;
+            }
+        }
+    }
+}
+.guide{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: $pop-color;
+    margin-bottom: 24px;
+    &.sm{
+        margin-bottom: 15px;
+    }
+    span{
+        display: block;
     }
-  }
 }
 
-// 표시변경
-.display-change-wrap {
-  margin: 24px 0;
-}
-.warning {
-  font-size: $pop-normal-size;
-  font-weight: $pop-normal-weight;
-  color: #ffafaf;
+// 지붕면 할당
+.allocation-select-wrap{
+    display: flex;
+    align-items: center;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #424242;
+    margin-bottom: 14px;
+    span{
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-bold-weight;
+        margin-right: 10px;
+    }
+    .allocation-edit{
+        display: flex;
+        align-items: center;
+        height: 30px;
+        padding: 0 10px;
+        margin-left: 5px;
+        font-size: $pop-normal-size;
+        color: $pop-color;
+        font-weight: $pop-normal-weight;
+        border: 1px solid #484848;
+        background-color: #323234;
+        i{
+            display: block;
+            width: 12px;
+            height: 12px;
+            margin-right: 5px;
+            background: url(../../public/static/images/canvas/allocation_edit.svg)no-repeat center;
+            background-size: cover;
+        }
+    }
 }
 
-// 각 변 속성 변경
-.radio-grid-wrap {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 24px 15px;
+.block-box{
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    margin-bottom: 10px;
+    .flex-ment{
+        gap: 10px;
+        .dec{
+            text-decoration: underline;
+        }
+        .delete{
+            display: block;
+            width: 15px;
+            height: 15px;
+            background: url(../../public/static/images/canvas/allocation_delete.svg)no-repeat center;
+            background-size: cover;
+        }
+    }
+    &:last-child{
+        margin-bottom: 0;
+    }
 }
 
-// 면 흐름 설정
-.drawing-flow-wrap {
-  display: flex;
-  gap: 10px;
-  .discrimination-box {
+.icon-btn-wrap{
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    button{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        height: 30px;
+        font-size: $pop-normal-size;
+        font-weight: $pop-normal-weight;
+        color: $pop-color;
+        border: 1px solid #646464;
+        border-radius: 2px;
+        padding: 0 10px;
+        transition: all .15s ease-in-out;
+        i{
+            height: 15px;
+            display: block;
+            margin-left: 10px;
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: cover;
+            transition: all .15s ease-in-out;
+            &.allocation01{
+                background-image: url(../../public/static/images/canvas/allocation_icon01_white.svg);
+                width: 15px;
+            }
+            &.allocation02{
+                background-image: url(../../public/static/images/canvas/allocation_icon02_white.svg);
+                width: 18px;
+            }
+        }
+        &.act,
+        &:hover{
+            color: #101010;
+            border: 1px solid #101010;
+            background-color: #fff;
+            i{
+                &.allocation01{
+                    background-image: url(../../public/static/images/canvas/allocation_icon01_black.svg);
+                }
+                &.allocation02{
+                    background-image: url(../../public/static/images/canvas/allocation_icon02_black.svg);
+                }
+            }
+        }
+    }
+}
+
+// 경사설정
+.slope-wrap{
+    padding-bottom: 24px;
+    border-bottom: 1px solid #424242;
+}
+
+// 면형상 배치
+.plane-frame-wrap{
+    display: flex;
+    gap: 10px;
+    .plane-shape-wrap{
+        flex: none;
+        width: 73px;
+    }
+}
+
+.plane-shape-menu{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 5px;
+    .shape-menu-box{
+        border-radius: 2px;
+        width: 34px;
+        height: 34px;
+        background-color: #373737;
+        border: 1px solid #676767;
+        transition: background .15s ease-in-out, border .15s ease-in-out;
+        .shape-box{
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            position: relative;
+            width: 100%;
+            height: 100%;
+            border-radius: 2px;
+        }
+        &.act,
+        &:hover{
+            border-color: #008BFF;
+            background-color: #008BFF;
+        }
+    }
+}
+
+.shape-library{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 5px;
+    padding-top: 5px;
+    .library-btn{
+        width: 100%;
+        height: 34px;
+        border: 1px solid #6C6C6C;
+        border-radius: 2px;
+        background-color: #373737;
+        background-repeat: no-repeat;
+        background-position: center;
+        transition: all .15s ease-in-out;
+        &.ico01{background-image: url(../../public/static/images/canvas/shape_labrary01.svg); background-size: 19px 18px;}
+        &.ico02{background-image: url(../../public/static/images/canvas/shape_labrary02.svg); background-size: 15px 20px;}
+        &.ico03{background-image: url(../../public/static/images/canvas/shape_labrary03.svg); background-size: 19px 16px;}
+        &:hover{
+            border-color: #1083E3;
+            background-color: #1083E3;
+        }
+    }
+}
+
+.plane-detail-wrap{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+}
+.plane-shape-wrapper{
     flex: 1;
     display: flex;
     flex-direction: column;
-    .object-direction-wrap {
-      flex: 1;
+    gap: 10px;
+    .plane-box{
+        width: 100%;
+        padding: 10px 18px;
+        border-radius: 2px;
+        background-color: #313131;
+        border: 1px solid #484848;
+        .plane-box-tit{
+            font-size: $pop-normal-size;
+            font-weight: 600;
+            color: $pop-color;
+            margin-bottom: 10px;
+        }
+        &.shape-box{
+            .shape-box-inner{
+                display: flex;
+                gap:15px;
+                min-height: 140px;
+                .shape-img{
+                    position: relative;
+                    flex: none;
+                    width: 150px;
+                    background-color: #fff;
+                    border-radius: 2px;
+                    img{
+                        position: absolute;
+                        top: 50%;
+                        left: 50%;
+                        transform: translate(-50%, -50%);
+                    }
+                }
+                .shape-data{
+                    flex: 1;
+                    .eaves-keraba-table{
+                        .eaves-keraba-item{
+                            .eaves-keraba-th,
+                            .eaves-keraba-td{
+                                padding-bottom: 10px;
+                            }
+                            &:last-child{
+                                .eaves-keraba-th,
+                                .eaves-keraba-td{
+                                    padding-bottom: 0px;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+        &.direction-box{
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            .plane-direction-box{
+                flex: 1;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 100%;
+            }
+        }
+    }
+}
+.plane-direction{
+    width: 150px;
+    position: relative;
+    height: 120px;
+    span{
+        position: absolute;
+        font-size: 12px;
+        font-weight: 500;
+        color: #B1B1B1;
+        &.top{top: 0; left: 50%; transform: translateX(-50%);}
+        &.right{top: 50%; right: 0; transform: translateY(-50%);}
+        &.bottom{bottom: 0; left: 50%; transform: translateX(-50%);}
+        &.left{top: 50%; left: 0; transform: translateY(-50%);}
+    }
+    .plane-btn{
+        position: absolute;
+        width: 28px;
+        height: 28px;
+        background-color: #777777;
+        background-image: url(../../public/static/images/canvas/plane_arr.svg);
+        background-size: 12px 13px;
+        background-repeat: no-repeat;
+        background-position: center;
+        border-radius: 50%;
+        transition: all .15s ease-in-out;
+        &.up{top: 22px; left: 50%; transform: translateX(-50%);}
+        &.right{top: 50%; right: 32px; transform: translateY(-50%) rotate(90deg);}
+        &.down{bottom: 22px; left: 50%; transform: translateX(-50%) rotate(180deg);}
+        &.left{top: 50%; left: 32px; transform: translateY(-50%) rotate(270deg);}
+        &:hover,
+        &.act{
+            background-color: #fff;
+            background-image: url(../../public/static/images/canvas/plane_arr_act.svg);
+        }
     }
-  }
 }
 
-.compas-box {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.plane-tab-guide{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: $pop-color;
+    margin-top: 10px;
+}
+.plane-shape-btn{
+    padding-top: 10px;
+    margin-top: auto;
+    button{
+        display: block;
+        width: 100%;
+    }
+}
+
+// 오브젝트 배치
+.mb-box{
+    margin-bottom: 24px;
+}
+
+.object-direction-wrap{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.discrimination-tit{
+    font-size: 13px;
+    color: #fff;
+    font-weight: 500;
+}
+
+.object-size-wrap{
+    display: flex;
+    min-height: 206px;
+    gap: 24px;
+    margin-top: 14px;
+    .object-size-img{
+        position: relative;
+        flex: none;
+        width: 200px;
+        background-color: #fff;
+        img{
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+        }
+    }
+}
+
+// 표시변경
+.display-change-wrap{
+    margin: 24px 0;
+}
+.warning{
+    font-size: $pop-normal-size;
+    font-weight: $pop-normal-weight;
+    color: #FFAFAF;
+}
+
+// 각 변 속성 변경
+.radio-grid-wrap{
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 24px 15px;
+}
+
+// 면 흐름 설정
+.drawing-flow-wrap{
+    display: flex;
+    gap: 10px;
+    .discrimination-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .object-direction-wrap{
+            flex: 1;
+        }
+        &:first-child{
+            flex: none;
+            width: 195px;
+        }
+    }
+}
+
+.compas-box{
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 .compas-box-inner {
-  position: relative;
-  width: 200px;
-  height: 200px;
-  border-radius: 50%;
-
-  .circle {
-    position: absolute;
-    width: 12px;
-    height: 12px;
-    border: 1px solid #fff;
+    position: relative;
+    width: 200px;
+    height: 200px;
     border-radius: 50%;
-    top: 95%;
-    left: 50%;
-    transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
-    cursor: pointer;
-    z-index: 3;
-    /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
-    i {
-      position: absolute;
-      top: 12.5px;
-      left: 50%;
-      font-size: 11px;
-      color: #8b8b8b;
-      font-weight: 500;
-      -webkit-user-select: none;
-      -moz-user-select: none;
-      -ms-use-select: none;
-      user-select: none;
+    
+    .circle {
+        position: absolute;
+        width: 12px;
+        height: 12px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        top: 95%;
+        left: 50%;
+        transform-origin: 0 -90px; /* 중심에서 반지름 거리만큼 떨어져 위치 */
+        cursor:pointer;
+        z-index: 3;
+        /* 0번을 180도 위치(아래)에, 13번을 0도 위치(위)에 배치 */
+        i{
+            position: absolute;
+            top: 12.5px;
+            left: 50%;
+            font-size: 11px;
+            color: #8B8B8B;
+            font-weight: 500;
+            -webkit-user-select: none;
+            -moz-user-select: none;
+            -ms-use-select: none;
+            user-select: none;
+        }
+        &:nth-child(1) { transform: rotate(180deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(180deg);}}
+        &:nth-child(2) { transform: rotate(195deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(165deg);}}
+        &:nth-child(3) { transform: rotate(210deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(150deg);}}
+        &:nth-child(4) { transform: rotate(225deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(135deg);}}
+        &:nth-child(5) { transform: rotate(240deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(120deg);}}
+        &:nth-child(6) { transform: rotate(255deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(105deg);}}
+        &:nth-child(7) { transform: rotate(270deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(90deg);}}
+        &:nth-child(8) { transform: rotate(285deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(75deg);}}
+        &:nth-child(9) { transform: rotate(300deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(60deg);}}
+        &:nth-child(10) { transform: rotate(315deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(45deg);}}
+        &:nth-child(11) { transform: rotate(330deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(30deg);}}
+        &:nth-child(12) { transform: rotate(345deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(15deg);}}
+        &:nth-child(13) { transform: rotate(0deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(0deg);}}
+        &:nth-child(14) { transform: rotate(15deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-15deg);}}
+        &:nth-child(15) { transform: rotate(30deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-30deg);}}
+        &:nth-child(16) { transform: rotate(45deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-45deg);}}
+        &:nth-child(17) { transform: rotate(60deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-60deg);}}
+        &:nth-child(18) { transform: rotate(75deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-75deg);}}
+        &:nth-child(19) { transform: rotate(90deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-90deg);}}
+        &:nth-child(20) { transform: rotate(105deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-105deg);}}
+        &:nth-child(21) { transform: rotate(120deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-120deg);}}
+        &:nth-child(22) { transform: rotate(135deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-135deg);}}
+        &:nth-child(23) { transform: rotate(150deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-150deg);}}
+        &:nth-child(24) { transform: rotate(165deg) translate(-50%, -50%); i{transform: translateX(-50%) rotate(-165deg);}}
+        &.act{
+            &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 5px;
+                height: 5px;
+                background-color: #fff;
+                border-radius: 50%;
+            }
+            i{
+                color: #fff;
+            }
+        }
     }
-    &:nth-child(1) {
-      transform: rotate(180deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(180deg);
-      }
-    }
-    &:nth-child(2) {
-      transform: rotate(195deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(165deg);
-      }
-    }
-    &:nth-child(3) {
-      transform: rotate(210deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(150deg);
-      }
-    }
-    &:nth-child(4) {
-      transform: rotate(225deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(135deg);
-      }
-    }
-    &:nth-child(5) {
-      transform: rotate(240deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(120deg);
-      }
-    }
-    &:nth-child(6) {
-      transform: rotate(255deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(105deg);
-      }
-    }
-    &:nth-child(7) {
-      transform: rotate(270deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(90deg);
-      }
-    }
-    &:nth-child(8) {
-      transform: rotate(285deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(75deg);
-      }
-    }
-    &:nth-child(9) {
-      transform: rotate(300deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(60deg);
-      }
-    }
-    &:nth-child(10) {
-      transform: rotate(315deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(45deg);
-      }
-    }
-    &:nth-child(11) {
-      transform: rotate(330deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(30deg);
-      }
-    }
-    &:nth-child(12) {
-      transform: rotate(345deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(15deg);
-      }
-    }
-    &:nth-child(13) {
-      transform: rotate(0deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(0deg);
-      }
-    }
-    &:nth-child(14) {
-      transform: rotate(15deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-15deg);
-      }
-    }
-    &:nth-child(15) {
-      transform: rotate(30deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-30deg);
-      }
-    }
-    &:nth-child(16) {
-      transform: rotate(45deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-45deg);
-      }
-    }
-    &:nth-child(17) {
-      transform: rotate(60deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-60deg);
-      }
-    }
-    &:nth-child(18) {
-      transform: rotate(75deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-75deg);
-      }
-    }
-    &:nth-child(19) {
-      transform: rotate(90deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-90deg);
-      }
-    }
-    &:nth-child(20) {
-      transform: rotate(105deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-105deg);
-      }
-    }
-    &:nth-child(21) {
-      transform: rotate(120deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-120deg);
-      }
-    }
-    &:nth-child(22) {
-      transform: rotate(135deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-135deg);
-      }
-    }
-    &:nth-child(23) {
-      transform: rotate(150deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-150deg);
-      }
-    }
-    &:nth-child(24) {
-      transform: rotate(165deg) translate(-50%, -50%);
-      i {
-        transform: translateX(-50%) rotate(-165deg);
-      }
-    }
-    &.act {
-      &::after {
-        content: '';
+    .compas{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 5px;
-        height: 5px;
-        background-color: #fff;
-      }
-      i {
-        color: #fff;
-      }
+        width: 148px;
+        height: 148px;
+        border: 4px solid #fff;
+        border-radius: 50%;
+        .compas-arr{
+            width: 100%;
+            height: 100%;
+            background: url(../../public/static/images/canvas/compas.svg)no-repeat center;
+            background-size: 122px 122px;
+        }
     }
-  }
-  .compas {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 148px;
-    height: 148px;
-    border: 4px solid #fff;
-    border-radius: 50%;
-    .compas-arr {
-      width: 100%;
-      height: 100%;
-      background: url(../../public/static/images/canvas/compas.svg) no-repeat center;
-      background-size: 122px 122px;
-    }
-  }
+}
+
+.draw-flow-wrap{
+    margin: 10px 0;
 }
 
 // 지붕모듈선택
-.roof-module-tab {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 14px;
-  .module-tab-bx {
+.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;
+    .outline-form{
+        flex: 1;
+    }
+}
+
+.module-box-tab{
+    display: flex;
+    .module-btn{
+        flex: 1;
+        border-top: 1px solid #505050;
+        border-bottom: 1px solid #505050;
+        border-right: 1px solid #505050;
+        background-color: #454545;
+        color: #fff;
+        height: 30px;
+        font-size: 12px;
+        font-weight: 400;
+        transition: all .15s ease-in-out;
+        &:first-child{
+            border-left: 1px solid #505050;
+        }
+        &.act{
+            border-color: #fff;
+            background-color: #fff;
+            color: #101010;
+        }
+    }
+}
+
+.module-table-box{
     flex: 1;
-    height: 34px;
-    line-height: 31px;
-    border: 1px solid #484848;
+    background-color: #3D3D3D;
     border-radius: 2px;
-    background-color: transparent;
-    font-size: 12px;
-    color: #aaa;
-    text-align: center;
-    cursor: default;
-    transition: all 0.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 0.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;
+    .module-table-inner{
+        padding: 10px;
+        .outline-form{
+            span{
+                width: auto;
+            }
         }
-      }
-      i {
-        top: 32px;
-      }
-      &.act {
-        i {
-          color: #8b8b8b;
+        .module-table-tit{
+            padding: 10px 0;
+            font-size: 12px;
+            color: #fff;
+            border-bottom: 1px solid #4D4D4D;
+        }
+        .eaves-keraba-table{
+            width: 100%;
+            margin-top: 15px;
+            .eaves-keraba-th{
+                width: 72px;
+            }
+            .eaves-keraba-th,
+            .eaves-keraba-td{
+                padding-bottom: 5px;
+            }
+        }
+        .self-table-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            padding-bottom: 15px;
+        }
+    }
+    .warning-guide{
+        padding: 20px;
+        .warning{
+            color: #FFCACA;
+            max-height: 55px;
+            overflow-y: auto;
+            padding-right: 30px;
+            &::-webkit-scrollbar {
+                width: 4px;
+                background-color: transparent;
+            }
+            &::-webkit-scrollbar-thumb {
+                background-color: #D9D9D9;
+            }
+            &::-webkit-scrollbar-track {
+                background-color: transparent;
+            }
         }
-      }
     }
-  }
-}
-.center-wrap {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 20px;
 }
 
-.module-table-flex-wrap {
-  display: flex;
-  gap: 10px;
-  .outline-form {
-    flex: 1;
-  }
+.module-self-table{
+    display: table;
+    border-top: 1px solid #4D4D4D;
+    border-collapse: collapse;
+    width: 100%;
+    .self-table-item{
+        display: table-row;
+        .self-item-td,
+        .self-item-th{
+            display: table-cell;
+            vertical-align: middle;
+            border-bottom: 1px solid #4D4D4D;
+        }
+        .self-item-th{
+            width: 60px;
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+        }
+        .self-item-td{
+            font-size: 12px;
+            font-weight: 400;
+            color: #fff;
+            padding: 15px 20px;
+        }
+    }
 }
 
-.module-box-tab {
-  display: flex;
-  .module-btn {
-    flex: 1;
-    border-top: 1px solid #505050;
-    border-bottom: 1px solid #505050;
-    border-right: 1px solid #505050;
-    background-color: #454545;
-    color: #fff;
-    height: 30px;
-    font-size: 12px;
-    font-weight: 400;
-    transition: all 0.15s ease-in-out;
-    &:first-child {
-      border-left: 1px solid #505050;
-    }
-    &.act {
-      border-color: #fff;
-      background-color: #fff;
-      color: #101010;
-    }
-  }
-}
-
-.module-table-box {
-  flex: 1;
-  background-color: #3d3d3d;
-  border-radius: 2px;
-  .module-table-inner {
-    padding: 10px;
-    .outline-form {
-      span {
-        width: auto;
-      }
-    }
-    .module-table-tit {
-      padding: 10px 0;
-      font-size: 12px;
-      color: #fff;
-      border-bottom: 1px solid #4d4d4d;
-    }
-    .eaves-keraba-table {
-      width: 100%;
-      margin-top: 15px;
-      .eaves-keraba-th {
-        width: 72px;
-      }
-      .eaves-keraba-th,
-      .eaves-keraba-td {
-        padding-bottom: 5px;
-      }
-    }
-    .self-table-tit {
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-      padding-bottom: 15px;
-    }
-  }
-  .warning-guide {
-    padding: 20px;
-    .warning {
-      color: #ffcaca;
-      max-height: 55px;
-      overflow-y: auto;
-      padding-right: 30px;
-      &::-webkit-scrollbar {
-        width: 4px;
-        background-color: transparent;
-      }
-      &::-webkit-scrollbar-thumb {
-        background-color: #d9d9d9;
-      }
-      &::-webkit-scrollbar-track {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
-.module-self-table {
-  display: table;
-  border-top: 1px solid #4d4d4d;
-  border-collapse: collapse;
-  width: 100%;
-  .self-table-item {
-    display: table-row;
-    .self-item-td,
-    .self-item-th {
-      display: table-cell;
-      vertical-align: middle;
-      border-bottom: 1px solid #4d4d4d;
-    }
-    .self-item-th {
-      width: 60px;
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-    }
-    .self-item-td {
-      font-size: 12px;
-      font-weight: 400;
-      color: #fff;
-      padding: 15px 20px;
-    }
-  }
-}
-
-.self-table-flx {
-  display: flex;
-  align-items: center;
-  margin-top: 15px;
-  button {
-    margin-left: auto;
-  }
-}
-.hexagonal-wrap {
-  .hexagonal-item {
-    padding: 15px 0;
-    border-bottom: 1px solid #4d4d4d;
-    &:first-child {
-      padding-top: 0;
-    }
-    &:last-child {
-      padding-bottom: 0;
-      border: none;
-    }
-    .hexagonal-flx-auto {
-      display: flex;
-      justify-content: space-between;
-    }
-    .hexagonal-flx {
-      display: flex;
-      align-items: center;
-      button {
+.self-table-flx{
+    display: flex;
+    align-items: center;
+    margin-top: 15px;
+    button{
         margin-left: auto;
-      }
     }
-  }
+}
+.hexagonal-wrap{
+    .hexagonal-item{
+        padding: 15px 0;
+        border-bottom: 1px solid #4D4D4D;
+        &:first-child{
+            padding-top: 0;
+        }
+        &:last-child{
+            padding-bottom: 0;
+            border: none;
+        }
+        .hexagonal-flx-auto{
+            display: flex;
+            justify-content: space-between;
+        }
+        .hexagonal-flx{
+            display: flex;
+            align-items: center;
+            button{
+                margin-left: auto;
+            }
+        }
+    }
 }
 
 // 회로 및 가대설정
-.circuit-check-inner {
-  padding: 5px 0;
+.circuit-check-inner{
+    padding: 5px 0;
 }
 
-.x-scroll-table {
-  overflow-x: auto;
-  padding-bottom: 5px;
-  .roof-module-table {
-    min-width: 1200px;
-  }
-  &::-webkit-scrollbar {
-    height: 4px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-}
-
-.circuit-right-wrap {
-  display: flex;
-  justify-content: flex-end;
-}
-
-.circuit-data-form {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  min-height: 60px;
-  padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.2);
-  span {
-    display: inline-flex;
-    align-items: center;
-    .del {
-      display: block;
-      margin-left: 10px;
-      width: 15px;
-      height: 15px;
-      background: url(../../public/static/images/canvas/circuit_del.svg) no-repeat center;
-      background-size: cover;
+.x-scroll-table{
+    overflow-x: auto;
+    padding-bottom: 5px;
+    .roof-module-table{
+        min-width: 1200px;
+    }
+    &::-webkit-scrollbar {
+        height: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
     }
-  }
-}
-.circuit-table-tit {
-  color: #fff;
-  font-size: 12px;
-  font-weight: 600;
-  padding: 11px 10px;
-  background-color: #474747;
-  border: 1px solid #505050;
-  border-bottom: none;
 }
 
-.circuit-overflow {
-  max-height: 400px;
-  overflow-y: auto;
-  margin-bottom: 15px;
-  &::-webkit-scrollbar {
-    width: 4px;
-    background-color: transparent;
-  }
-  &::-webkit-scrollbar-thumb {
-    background-color: #d9d9d9;
-  }
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
+.circuit-right-wrap{
+    display: flex;
+    justify-content: flex-end;
 }
 
-.circuit-table-flx-wrap {
-  display: flex;
-  gap: 10px;
-  margin-bottom: 10px;
-  .circuit-table-flx-box {
-    flex: 1;
+.circuit-data-form{
     display: flex;
     flex-direction: column;
-    .bottom-wrap {
-      margin-top: auto;
+    gap: 5px;
+    min-height: 60px;
+    padding: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.20);
+    span{
+        display: inline-flex;
+        align-items: center;
+        .del{
+            display: block;
+            margin-left: 10px;
+            width: 15px;
+            height: 15px;
+            background: url(../../public/static/images/canvas/circuit_del.svg)no-repeat center;
+            background-size: cover;
+        }
     }
-    .roof-module-table {
-      table {
-        table-layout: fixed;
-      }
-    }
-  }
+}
+.circuit-table-tit{
+    color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+    padding: 11px 10px;
+    background-color: #474747;
+    border: 1px solid #505050;
+    border-bottom: none;
 }
 
-.circuit-count-input {
-  display: flex;
-  align-items: center;
-  gap: 10px;
+.circuit-overflow{
+    max-height: 400px;
+    overflow-y: auto;
+    margin-bottom: 15px;
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #D9D9D9;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+
+.circuit-table-flx-wrap{
+    display: flex;
+    gap: 10px;
+    margin-bottom: 10px;
+    .circuit-table-flx-box{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        .bottom-wrap{
+            margin-top: auto;
+        }
+        .roof-module-table{
+            table{
+                table-layout: fixed;
+            }
+        }
+    }
+}
+
+.circuit-count-input{
+    display: flex;
+    align-items: center;
+    gap: 10px;
 }
 
 // 모듈부가기능
-.additional-radio-wrap {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 15px 0;
-  margin-bottom: 24px;
+.additional-radio-wrap{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px 0;
+    margin-bottom: 24px;
 }
-.additional-wrap {
-  padding: 24px 0;
-  border-top: 1px solid #424242;
+.additional-wrap{
+    padding: 24px 0;
+    border-top: 1px solid #424242;
 }
 
-.additional-color-wrap {
-  display: flex;
-  align-items: center;
-  padding: 5px 0;
-  gap: 15px;
-  .additional-color-box {
+.additional-color-wrap{
     display: flex;
     align-items: center;
-    gap: 8px;
-    .additional-color {
-      display: block;
-      width: 16px;
-      height: 16px;
-      &.pink {
-        border: 2px solid #ce1c9c;
-        background-color: #16417d;
-      }
-      &.white {
-        border: 2px solid #fff;
-        background-color: #001027;
-      }
+    padding: 5px 0;
+    gap: 15px;
+    .additional-color-box{
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        .additional-color{
+            display: block;
+            width: 16px;
+            height: 16px;
+            &.pink{
+                border: 2px solid #ce1c9c;
+                background-color: #16417D;
+            }
+            &.white{
+                border: 2px solid #FFF;
+                background-color: #001027;
+            }
+        }
     }
-  }
 }
 
 // color setting
-.color-setting-wrap {
-  padding-bottom: 15px;
-  border-bottom: 1px solid #424242;
-  .color-tit {
-    font-size: 13px;
-    font-weight: 500;
-    color: #ffffff;
-    margin-bottom: 10px;
-  }
-  .color-picker {
-    .react-colorful {
-      width: 100%;
-      height: auto;
-      gap: 20px;
-      .react-colorful__pointer {
-        width: 15px;
-        height: 15px;
-        border: 4px solid #fff;
-      }
-      .react-colorful__saturation {
-        border-radius: 2px;
-        height: 200px;
-        border-bottom: 5px solid #000;
-      }
-      .react-colorful__last-control {
-        border-radius: 2px;
-        height: 10px;
-      }
-    }
-    .hex-color-box {
-      display: flex;
-      align-items: center;
-      margin-top: 15px;
-      .color-box-tit {
-        font-size: 12px;
-        color: #fff;
+.color-setting-wrap{
+    padding-bottom: 15px;
+    border-bottom: 1px solid #424242;
+    .color-tit{
+        font-size: 13px;
         font-weight: 500;
-        margin-right: 10px;
-      }
-      .color-hex-input {
-        width: 150px;
-        margin-right: 5px;
-        input {
-          width: 100%;
-        }
-      }
-      .color-box {
-        display: block;
-        width: 30px;
-        height: 30px;
-        border-radius: 4px;
-      }
+        color: #ffffff;
+        margin-bottom: 10px;
     }
-    .default-color-wrap {
-      margin-top: 25px;
-      .default-tit {
+    .color-picker{
+        .react-colorful{
+            width: 100%;
+            height: auto;
+            gap: 20px;
+            .react-colorful__pointer{
+                width: 15px;
+                height: 15px;
+                border: 4px solid #Fff;
+            }
+            .react-colorful__saturation{
+                border-radius: 2px;
+                height: 200px;
+                border-bottom: 5px solid #000;
+            }
+            .react-colorful__last-control{
+                border-radius: 2px;
+                height: 10px;
+            }
+        }
+        .hex-color-box{
+            display: flex;
+            align-items: center;
+            margin-top: 15px;
+            .color-box-tit{
+                font-size: 12px;
+                color: #fff;
+                font-weight: 500;
+                margin-right: 10px;
+            }
+            .color-hex-input{
+                width: 150px;
+                margin-right: 5px;
+                input{
+                    width: 100%;
+                }
+            }
+            .color-box{
+                display: block;
+                width: 30px;
+                height: 30px;
+                border-radius: 4px;
+            }
+        }
+        .default-color-wrap{
+            margin-top: 25px;
+            .default-tit{
+                font-size: 12px;
+                font-weight: 500;
+                color: #fff;
+                margin-bottom: 10px;
+            }
+            .color-button-wrap{
+                display: grid;
+                grid-template-columns: repeat(8, 1fr);
+                gap: 21px;
+                .default-color{
+                    display: block;
+                    width: 100%;
+                    height: 30px;
+                    border-radius: 4px;
+                }
+            }
+        }
+    }
+}
+
+// 글꼴 설정 팝업
+.font-option-warp{
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 15px 5px;
+    margin-bottom: 15px;
+    .font-option-item{
+        .option-item-tit{
+            font-size: 12px;
+            font-weight: 500;
+            color: #fff;
+            margin-bottom: 10px;
+        }
+    }
+}
+.font-ex-wrap{
+    margin-bottom: 15px;
+    .font-ex-tit{
         font-size: 12px;
         font-weight: 500;
         color: #fff;
         margin-bottom: 10px;
-      }
-      .color-button-wrap {
-        display: grid;
-        grid-template-columns: repeat(8, 1fr);
-        gap: 21px;
-        .default-color {
-          display: block;
-          width: 100%;
-          height: 30px;
-          border-radius: 4px;
-        }
-      }
     }
-  }
-}
-
-// 글꼴 설정 팝업
-.font-option-warp {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 15px 5px;
-  margin-bottom: 15px;
-  .font-option-item {
-    .option-item-tit {
-      font-size: 12px;
-      font-weight: 500;
-      color: #fff;
-      margin-bottom: 10px;
+    .font-ex-box{
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        min-height: 80px;
+        background-color: #fff;
     }
-  }
-}
-.font-ex-wrap {
-  margin-bottom: 15px;
-  .font-ex-tit {
-    font-size: 12px;
-    font-weight: 500;
-    color: #fff;
-    margin-bottom: 10px;
-  }
-  .font-ex-box {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    min-height: 80px;
-    background-color: #fff;
-  }
+    
 }
 
 // 치수선 설정
-.font-btn-wrap {
-  margin-bottom: 15px;
-  button {
-    width: 100%;
-    height: 30px;
-    line-height: 28px;
-  }
-}
-
-.line-color-wrap {
-  margin-bottom: 15px;
-  .color-btn {
-    display: block;
-    width: 100%;
-    height: 30px;
-    border-radius: 2px;
-  }
-}
-
-.form-box {
-  width: 100%;
-  background-color: #fff;
-  padding: 10px 15px 20px;
-  .line-form {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-end;
-    min-width: 102px;
-    min-height: 40px;
-    margin: 0 auto;
-
-    &::before {
-      content: '';
-      position: absolute;
-      bottom: 0px;
-      left: 0;
-      width: 100%;
-      height: 40px;
-      border-left: 1px dashed #101010;
-      border-right: 1px dashed #101010;
+.font-btn-wrap{
+    margin-bottom: 15px;
+    button{
+        width: 100%;
+        height: 30px;
+        line-height: 28px;
     }
-    .line-font-box {
-      .font {
-        display: block;
-        padding-bottom: 15px;
-        color: #101010;
-        text-align: center;
-        line-height: 1;
-      }
-      .line {
-        position: relative;
+}
+
+.line-color-wrap{
+    margin-bottom: 15px;
+    .color-btn{
         display: block;
         width: 100%;
-        height: 1px;
-        border-radius: 30px;
-        &::before {
-          content: '';
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%) rotate(45deg);
-          left: 1px;
-          width: 9px;
-          height: +9px;
-          border: 1px solid;
-          border-color: inherit;
-          border-top: none;
-          border-right: none;
-        }
-        &::after {
-          content: '';
-          position: absolute;
-          top: 50%;
-          transform: translateY(-50%) rotate(45deg);
-          right: 1px;
-          width: 9px;
-          height: 9px;
-          border: 1px solid;
-          border-color: inherit;
-          border-bottom: none;
-          border-left: none;
-        }
-      }
+        height: 30px;
+        border-radius: 2px;
+    }
+}
+
+.form-box{
+    width: 100%;
+    background-color: #fff;
+    padding: 10px 15px 20px;
+    .line-form{
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
+        min-width: 102px;
+        min-height: 40px;
+        margin: 0 auto;
+
+        &::before{
+            content: '';
+            position: absolute;
+            bottom: 0px;
+            left: 0;
+            width: 100%;
+            height: 40px;
+            border-left: 1px dashed #101010;
+            border-right: 1px dashed #101010;
+        }
+        .line-font-box{
+            .font{
+                display: block;
+                padding-bottom: 15px;
+                color: #101010;
+                text-align: center;
+                line-height: 1;
+            }
+            .line{
+                position: relative;
+                display: block;
+                width: 100%;
+                height: 1px;
+                border-radius: 30px;
+                &::before{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    left: 1px;
+                    width: 9px;
+                    height:+ 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-top: none;
+                    border-right: none;
+                }
+                &::after{
+                    content: '';
+                    position: absolute;
+                    top: 50%;
+                    transform: translateY(-50%) rotate(45deg);
+                    right: 1px;
+                    width: 9px;
+                    height: 9px;
+                    border: 1px solid;
+                    border-color: inherit;
+                    border-bottom: none;
+                    border-left: none;
+                }
+            }
+        }
     }
-  }
 }
 
 // 사이즈 변경
-.size-inner-warp {
-  position: relative;
+.size-inner-warp{
+    position: relative;
 }
-.size-check-wrap {
-  position: relative;
-  display: block;
-  width: 132px;
-  height: 132px;
-  margin: 0 auto;
-  .size-btn {
-    position: absolute;
-    width: 16px;
-    height: 16px;
-    border: 1px solid #fff;
-    border-radius: 50%;
-    &.act {
-      &::after {
-        content: '';
+.size-check-wrap{
+    position: relative;
+    display: block;
+    width: 132px;
+    height: 132px;
+    margin: 0 auto;
+    .size-btn{
+        position: absolute;
+        width: 16px;
+        height: 16px;
+        border: 1px solid #fff;
+        border-radius: 50%;
+        &.act{
+            &::after{
+                content: '';
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                width: 8px;
+                height: 8px;
+                background-color: #fff;
+                border-radius: 50%;
+            }
+        }
+        &:nth-child(1){ top: 0; left: 0; }
+        &:nth-child(2){ top: 0; right: 0; }
+        &:nth-child(3){ bottom: 0; left: 0; }
+        &:nth-child(4){ bottom: 0; right: 0; }
+    }
+    .size-box{
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 8px;
-        height: 8px;
+        width: 100px;
+        height: 100px;
         background-color: #fff;
-        border-radius: 50%;
-      }
     }
-    &:nth-child(1) {
-      top: 0;
-      left: 0;
-    }
-    &:nth-child(2) {
-      top: 0;
-      right: 0;
-    }
-    &:nth-child(3) {
-      bottom: 0;
-      left: 0;
-    }
-    &:nth-child(4) {
-      bottom: 0;
-      right: 0;
-    }
-  }
-  .size-box {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 100px;
-    height: 100px;
-    background-color: #fff;
-  }
 }
 
-.size-option-top {
-  margin-bottom: 15px;
+.size-option-top{
+    margin-bottom: 15px;
 }
-.size-option-side {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  transform: translateY(-50%);
+.size-option-side{
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
 }
-.size-option-wrap {
-  width: 88px;
-  margin: 0 auto;
-  .size-option {
-    display: flex;
-    align-items: center;
-    input {
-      width: 100%;
-      flex: 1;
+.size-option-wrap{
+    width: 88px;
+    margin: 0 auto;
+    .size-option{
+        display: flex;
+        align-items: center;
+        input{
+            width: 100%;
+            flex: 1;
+        }
+        span{
+            flex: none;
+        }
     }
-    span {
-      flex: none;
-    }
-  }
 }
 
 //이미지 크기 설정
-.range-wrap {
-  display: flex;
-  align-items: center;
-  input {
-    flex: 1;
-    margin-right: 10px;
-  }
-  label {
-    flex: none;
-    text-align: right;
-    width: 38px;
-    font-size: 13px;
-    color: #fff;
-    font-weight: 500;
-  }
-}
+.range-wrap{
+    display: flex;
+    align-items: center;
+    input{
+        flex: 1;
+        margin-right: 10px;
+    }
+    label{
+        flex: none;
+        text-align: right;
+        width: 38px;
+        font-size: 13px;
+        color: #fff;
+        font-weight: 500;
+    }
+}
\ No newline at end of file