diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss
index 216df145..4513b133 100644
--- a/src/styles/_contents.scss
+++ b/src/styles/_contents.scss
@@ -3,6 +3,7 @@
   height: calc(100vh - 47px);
   display: flex;
   flex-direction: column;
+  background-color: #fff;
 
   .canvas-content {
     flex: 1 1 auto;
diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss
index b1d16e89..856ee2f8 100644
--- a/src/styles/_fonts.scss
+++ b/src/styles/_fonts.scss
@@ -1,199 +1,199 @@
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-ExtraBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-Black.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-ExtraLight.woff') format('woff');
-    font-weight: 200;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-SemiBold.woff') format('woff');
-    font-weight: 600;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Noto Sans JP';
-    src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'),
-        url('/fonts/NotoSansJP-Thin.woff') format('woff');
-    font-weight: 100;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Noto Sans JP';
+  src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'),
+  url('/fonts/NotoSansJP-Thin.woff') format('woff');
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
 }
 
 // pretendard
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
-        url('/fonts/Pretendard-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
+  url('/fonts/Pretendard-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
-        url('/fonts/Pretendard-ExtraBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+  url('/fonts/Pretendard-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
-        url('/fonts/Pretendard-ExtraBold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'),
+  url('/fonts/Pretendard-ExtraBold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
-        url('/fonts/Pretendard-ExtraLight.woff') format('woff');
-    font-weight: 200;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+  url('/fonts/Pretendard-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
-        url('/fonts/Pretendard-ExtraLight.woff') format('woff');
-    font-weight: 200;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'),
+  url('/fonts/Pretendard-ExtraLight.woff') format('woff');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
-        url('/fonts/Pretendard-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
+  url('/fonts/Pretendard-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
-        url('/fonts/Pretendard-Light.woff') format('woff');
-    font-weight: 300;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Light.woff2') format('woff2'),
+  url('/fonts/Pretendard-Light.woff') format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
-        url('/fonts/Pretendard-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
+  url('/fonts/Pretendard-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
-        url('/fonts/Pretendard-Medium.woff') format('woff');
-    font-weight: 500;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Medium.woff2') format('woff2'),
+  url('/fonts/Pretendard-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Regular.woff2') format('woff2'),
-        url('/fonts/Pretendard-Regular.woff') format('woff');
-    font-weight: normal;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Regular.woff2') format('woff2'),
+  url('/fonts/Pretendard-Regular.woff') format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
-        url('/fonts/Pretendard-Black.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
+  url('/fonts/Pretendard-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
-        url('/fonts/Pretendard-Black.woff') format('woff');
-    font-weight: 900;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Black.woff2') format('woff2'),
+  url('/fonts/Pretendard-Black.woff') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 @font-face {
-    font-family: 'Pretendard';
-    src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
-        url('/fonts/Pretendard-Bold.woff') format('woff');
-    font-weight: bold;
-    font-style: normal;
-    font-display: swap;
+  font-family: 'Pretendard';
+  src: url('/fonts/Pretendard-Bold.woff2') format('woff2'),
+  url('/fonts/Pretendard-Bold.woff') format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
 }
 
diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
index e33d75ea..919e80ff 100644
--- a/src/styles/_layout.scss
+++ b/src/styles/_layout.scss
@@ -1,216 +1,250 @@
-.wrap{
-    display: flex;
-    flex-direction: column;
-    min-width: 1600px;
-    min-height: 100vh;
-    overflow-x: hidden;
+.wrap {
+  display: flex;
+  flex-direction: column;
+  min-width: 1600px;
+  min-height: 100vh;
+  overflow-x: hidden;
 }
-.content{
-    flex: 1 1 auto;
-    padding-top: 46px;
+
+.content {
+  position: relative;
+  flex: 1 1 auto;
+  padding-top: 46px;
+  background-color: #F4F4F7;
 }
 
 // header
 // nav item 공통
-@mixin navitem(){
-    position: relative;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    color: #fff;
-    font-weight: 500;
-    height: 100%;
-    padding-right: 12px;
-    transition: color .17s ease-in-out;
-}
-header{
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    min-width: 1600px;
-    height: 46px;
-    background-color: #1C1C1C;
-    border-bottom: 1px solid #000;
-    z-index: 9999;
-    .header-inner{
-        display: flex;
-        align-items: center;
-        height: 100%;
-        padding: 0 40px;
-        .header-right{
-            display: flex;
-            height: 100%;
-            align-items: center;
-            .logo{
-                a{
-                    display: block;
-                    width: 232px;
-                    height: 30px;
-                    background: url(/static/images/common/Logo.svg)no-repeat center;
-                    background-size: contain;
-                }
-            }
-            nav{
-                margin-left: 50px;
-                height: 100%;
-                .nav-list{
-                    display: flex;
-                    align-items: center;
-                    height: 100%;
-                    .nav-item{
-                        position: relative;
-                        margin-right: 62px;
-                        height: 100%;
-                        a{
-                            @include navitem;
-                        }
-                        button{
-                            @include navitem;
-                            &:after{
-                                content: '';
-                                position: absolute;
-                                top: 50%;
-                                right: 0;
-                                transform: translateY(-50%);
-                                width: 6px;
-                                height: 10px;
-                                background: url(/static/images/common/nav-arr.svg)no-repeat center;
-                                transition: all .17s ease-in-out;
-                            }
-                        }
-                        &:last-child{
-                            margin-right: 0;
-                        }
-                        .nav-depth2{
-                            position: absolute;
-                            top: calc(100% - 2px);
-                            left: 50%;
-                            transform: translateX(-50%);
-                            min-width: 100px;
-                            background-color: #1C1C1C;
-                            border: 1px solid #464646;
-                            padding: 24px;
-                            opacity: 0;
-                            visibility: hidden;
-                            transition: all .17s ease-in-out;
-                            .nav-depth2-item{
-                                margin-bottom: 10px;
-                                transition: all .17s ease-in-out;
-                                a{
-                                    font-size: 13px;
-                                    font-weight: normal;
-                                    white-space: nowrap;
-                                }
-                                &:last-child{
-                                    margin-bottom: 0;
-                                }
-                                &.mouse{
-                                    opacity: 0.55;
-                                }
-                            }
-                            &::before{
-                                content: '';
-                                position: absolute;
-                                top: -5px;
-                                left: 50%;
-                                transform: translateX(-50%) rotate(45deg);
-                                width: 8px;
-                                height: 8px;
-                                background-color: #1c1c1c;
-                                border-top: 1px solid #464646;
-                                border-left: 1px solid #464646;
-                            }
-                        }
-                        &.mouse{
-                            > a{
-                                color: rgba(255, 255, 255, 0.30);
-                            }
-                            > button{
-                                color: rgba(255, 255, 255, 0.30);
-                                &:after{
-                                    opacity: 0.3;
-                                }
-                            }
-                        }
-                        &:hover{
-                            .nav-depth2{
-                                opacity: 1;
-                                visibility: visible;
-                            }
-                            > button{
-                                &:after{
-                                    transform: translateY(-50%) rotate(90deg);
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-        .header-left{
-            margin-left: auto;
-            height: 100%;
-            display: flex;
-            align-items: center;
-            .profile-box{
-                position: relative;
-                padding-left: 30px;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                margin-right: 20px;
-                cursor: pointer;
-                .profile{
-                    font-size: 13px;
-                    font-weight: normal;
-                    color: #fff;
-                }
-                &::after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    left: 0;
-                    width: 24px;
-                    height: 24px;
-                    background: url(/static/images/common/profile_icon.svg)no-repeat center;
-                    background-size: cover;
-                }
-            }
-            .sign-out-box{
-                position: relative;
-                padding-left: 30px;
-                height: 100%;
-                display: flex;
-                align-items: center;
-                margin-right: 20px;
-                cursor: pointer;
-                .sign-out{
-                    font-size: 13px;
-                    font-weight: normal;
-                    color: #fff;
-                }
-                &::after{
-                    content: '';
-                    position: absolute;
-                    top: 50%;
-                    transform: translateY(-50%);
-                    left: 0;
-                    width: 24px;
-                    height: 24px;
-                    background: url(../../public/static/images/common/signout_icon.svg)no-repeat center;
-                    background-size: cover;
-                }
-            }
-            .select-box{
-                min-width: 165px;
-                margin-right: 8px;
-                >div{
-                    width: 100%;
-                }
-            }
-        }
-    }
+@mixin navitem() {
+  position: relative;
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  color: #fff;
+  font-weight: 500;
+  height: 100%;
+  padding-right: 12px;
+  transition: color .17s ease-in-out;
+}
+
+header {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  min-width: 1600px;
+  height: 46px;
+  background-color: #1C1C1C;
+  border-bottom: 1px solid #000;
+  z-index: 9999;
+
+  .header-inner {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 40px;
+
+    .header-right {
+      display: flex;
+      height: 100%;
+      align-items: center;
+
+      .logo {
+        a {
+          display: block;
+          width: 232px;
+          height: 30px;
+          background: url(/static/images/common/Logo.svg) no-repeat center;
+          background-size: contain;
+        }
+      }
+
+      nav {
+        margin-left: 50px;
+        height: 100%;
+
+        .nav-list {
+          display: flex;
+          align-items: center;
+          height: 100%;
+
+          .nav-item {
+            position: relative;
+            margin-right: 62px;
+            height: 100%;
+
+            a {
+              @include navitem;
+            }
+
+            button {
+              @include navitem;
+
+              &:after {
+                content: '';
+                position: absolute;
+                top: 50%;
+                right: 0;
+                transform: translateY(-50%);
+                width: 6px;
+                height: 10px;
+                background: url(/static/images/common/nav-arr.svg) no-repeat center;
+                transition: all .17s ease-in-out;
+              }
+            }
+
+            &:last-child {
+              margin-right: 0;
+            }
+
+            .nav-depth2 {
+              position: absolute;
+              top: calc(100% - 2px);
+              left: 50%;
+              transform: translateX(-50%);
+              min-width: 100px;
+              background-color: #1C1C1C;
+              border: 1px solid #464646;
+              padding: 24px;
+              opacity: 0;
+              visibility: hidden;
+              transition: all .17s ease-in-out;
+
+              .nav-depth2-item {
+                margin-bottom: 10px;
+                transition: all .17s ease-in-out;
+
+                a {
+                  font-size: 13px;
+                  font-weight: normal;
+                  white-space: nowrap;
+                }
+
+                &:last-child {
+                  margin-bottom: 0;
+                }
+
+                &.mouse {
+                  opacity: 0.55;
+                }
+              }
+
+              &::before {
+                content: '';
+                position: absolute;
+                top: -5px;
+                left: 50%;
+                transform: translateX(-50%) rotate(45deg);
+                width: 8px;
+                height: 8px;
+                background-color: #1c1c1c;
+                border-top: 1px solid #464646;
+                border-left: 1px solid #464646;
+              }
+            }
+
+            &.mouse {
+              > a {
+                color: rgba(255, 255, 255, 0.30);
+              }
+
+              > button {
+                color: rgba(255, 255, 255, 0.30);
+
+                &:after {
+                  opacity: 0.3;
+                }
+              }
+            }
+
+            &:hover {
+              .nav-depth2 {
+                opacity: 1;
+                visibility: visible;
+              }
+
+              > button {
+                &:after {
+                  transform: translateY(-50%) rotate(90deg);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    .header-left {
+      margin-left: auto;
+      height: 100%;
+      display: flex;
+      align-items: center;
+
+      .profile-box {
+        position: relative;
+        padding-left: 30px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        cursor: pointer;
+
+        .profile {
+          font-size: 13px;
+          font-weight: normal;
+          color: #fff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: 0;
+          width: 24px;
+          height: 24px;
+          background: url(/static/images/common/profile_icon.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+
+      .sign-out-box {
+        position: relative;
+        padding-left: 30px;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+        cursor: pointer;
+
+        .sign-out {
+          font-size: 13px;
+          font-weight: normal;
+          color: #fff;
+        }
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 50%;
+          transform: translateY(-50%);
+          left: 0;
+          width: 24px;
+          height: 24px;
+          background: url(../../public/static/images/common/signout_icon.svg) no-repeat center;
+          background-size: cover;
+        }
+      }
+
+      .select-box {
+        min-width: 165px;
+        margin-right: 8px;
+
+        > div {
+          width: 100%;
+        }
+      }
+    }
+  }
 }
 
diff --git a/src/styles/_main.scss b/src/styles/_main.scss
new file mode 100644
index 00000000..e69de29b
diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss
index 05b0e4a9..c57e5968 100644
--- a/src/styles/_modal.scss
+++ b/src/styles/_modal.scss
@@ -1,91 +1,146 @@
-@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 mountpop {
+  from {
+    opacity: 0;
+    scale: 0.95;
+  }
+  to {
+    opacity: 1;
+    scale: 1;
+  }
 }
 
-.modal-pop-wrap{
-    position: fixed;
-    top: 200px;
-    right: 100px;
-    width: 100%;
-    min-width: 380px;
-    max-width: fit-content;
-    height: -webkit-fit-content;
-    height: -moz-fit-content;
-    height: fit-content;
-    border: 1px solid #000;
-    border-radius: 4px;
-    background-color: #272727;
-    z-index: 9999999;
-    &.sm{
-        max-width: 450px;
-    }
-    &.mount{
-        animation: mountpop .17s ease-in-out forwards;
-    }
-    &.unmount{
-        animation: unmountpop .17s ease-in-out forwards;
-    }
+@keyframes unmountpop {
+  from {
+    opacity: 1;
+    scale: 1;
+  }
+  to {
+    opacity: 0;
+    scale: 0.95;
+  }
 }
-.modal-head{
+
+.modal-pop-wrap {
+  position: fixed;
+  top: 200px;
+  right: 100px;
+  width: 100%;
+  min-width: 380px;
+  max-width: fit-content;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  border: 1px solid #000;
+  border-radius: 4px;
+  background-color: #272727;
+  z-index: 9999999;
+
+  &.sm {
+    max-width: 450px;
+  }
+
+  &.ssm {
+    max-width: 380px;
+  }
+
+  &.mount {
+    animation: mountpop .17s ease-in-out forwards;
+  }
+
+  &.unmount {
+    animation: unmountpop .17s ease-in-out forwards;
+  }
+}
+
+.modal-head {
+  display: flex;
+  align-items: center;
+  padding: 10px 24px;
+  background-color: #000;
+  cursor: pointer;
+
+  h1.title {
+    font-size: 13px;
+    color: #fff;
+    font-weight: 700;
+  }
+
+  .modal-close {
+    margin-left: auto;
+    color: #fff;
+    text-indent: -999999999px;
+    width: 10px;
+    height: 10px;
+    background: url(../../public/static/images/canvas/modal_close.svg) no-repeat center;
+  }
+}
+
+.modal-body {
+  padding: 15px;
+
+  .modal-btn-wrap {
     display: flex;
     align-items: center;
-    padding: 10px 24px;
-    background-color: #000;
-    cursor: pointer;
-    h1.title{
-        font-size: 13px;
-        color: #fff;
-        font-weight: 700;
+    gap: 5px;
+
+    button {
+      flex: 1;
     }
-    .modal-close{
-        margin-left: auto;
-        color: #fff;
-        text-indent: -999999999px;
-        width: 10px;
-        height: 10px;
-        background: url(../../public/static/images/canvas/modal_close.svg)no-repeat center;
+  }
+
+  .modal-check-btn-wrap {
+    margin-top: 15px;
+
+    .check-wrap-title {
+      font-size: 12px;
+      color: #fff;
+      font-weight: 600;
+
+      &.light {
+        font-weight: 400;
+      }
     }
-}
-.modal-body{
-    padding: 15px;
-    .modal-btn-wrap{
-        display: flex;
-        align-items: center;
-        gap: 5px;
-        button{
-            flex: 1;
+
+    .flex-check-box {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+      margin-top: 15px;
+
+      &.for2 {
+        button {
+          width: calc(50% - 5px);
         }
-    }
-    .modal-check-btn-wrap{
-        margin-top: 15px;
-        .check-wrap-title{
-            font-size: 12px;
-            color: #fff;
-            font-weight: 600;
-            &.light{
-                font-weight: 400;
-            }
+
+        &.btn {
+          gap: 5px;
+
+          button {
+            width: calc(50% - 2.5px);
+          }
         }
-        .flex-check-box{
-            display: flex;
-            flex-wrap: wrap;
-            gap: 10px;
-            margin-top: 15px;
-            &.for2{
-                button{
-                    width: calc(50% - 5px);
-                }
-            }
-            &.for-line{
-                button{
-                    flex: 1;
-                }
-            }
+      }
+
+      &.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;
+      }
+    }
+  }
 }
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
index 67e19244..1841ebb9 100644
--- a/src/styles/style.scss
+++ b/src/styles/style.scss
@@ -1,3 +1 @@
-@import '_layout.scss';
-@import '_contents.scss';
-@import '_modal.scss';
\ No newline at end of file
+@import '_main.scss';
\ No newline at end of file