diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss
index c871f7bb..6c65fec7 100644
--- a/src/styles/_reset.scss
+++ b/src/styles/_reset.scss
@@ -1,1106 +1,976 @@
 * {
-  -webkit-text-size-adjust: none;
-  -moz-text-size-adjust: none;
-  -ms-text-size-adjust: none;
-  text-size-adjust: none;
-  box-sizing: content-box;
+    -webkit-text-size-adjust:none;
+    -moz-text-size-adjust:none;
+    -ms-text-size-adjust:none;
+    text-size-adjust: none;
+    box-sizing: content-box
 }
-*,
-::after,
-::before {
-  box-sizing: border-box;
+*, ::after, ::before {
+    box-sizing: border-box;
 }
-html,
-body {
-  font-size: 16px;
+html, body{
+    font-size: 16px;
 }
-html,
-body,
-div,
-span,
-applet,
-object,
-iframe,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-blockquote,
-pre,
-a,
-abbr,
-acronym,
-address,
-big,
-cite,
-code,
-del,
-dfn,
-em,
-img,
-ins,
-kbd,
-q,
-s,
-samp,
-small,
-strike,
-strong,
-sub,
-sup,
-tt,
-var,
-b,
-u,
-i,
-center,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-fieldset,
-form,
-label,
-legend,
-table,
-caption,
-tbody,
-tfoot,
-thead,
-tr,
-th,
-td,
-article,
-aside,
-canvas,
-details,
-embed,
-figure,
-figcaption,
-footer,
-header,
-hgroup,
-menu,
-nav,
-output,
-ruby,
-section,
-summary,
-time,
-mark,
-audio,
-video {
-  margin: 0;
-  padding: 0;
-  border: 0;
-  font: inherit;
-  vertical-align: baseline;
-  font-family: 'Noto Sans JP', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-smooth: never;
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font: inherit;
+	vertical-align: baseline;
+    font-family: 'Noto Sans JP', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-smooth: never;
 }
 /* HTML5 display-role reset for older browsers */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-menu,
-nav,
-section {
-  display: block;
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
 }
 body {
-  line-height: 1.4;
-}
-body:first-of-type caption {
-  display: none;
+	line-height: 1.4;
 }
+body:first-of-type caption { display:none;}
 
-ol,
-ul {
-  list-style: none;
+ol, ul {
+	list-style: none;
 }
-blockquote,
-q {
-  quotes: none;
+blockquote, q {
+	quotes: none;
 }
-blockquote:before,
-blockquote:after,
-q:before,
-q:after {
-  content: '';
-  content: none;
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
 }
 table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  border: 0 none;
+    width: 100%;
+    border-collapse: separate;
+    border-spacing:0;
+    border:0 none;
 }
-caption,
-th,
-td {
-  text-align: left;
-  font-weight: normal;
-  border: 0;
+caption, th, td {
+    text-align:left;
+    font-weight: normal;
+    border:0;
 }
 
-a {
-  cursor: pointer;
-  color: #000;
+a { 
+    cursor:pointer;
+    color:#000;
 }
-a,
-a:hover,
-a:active {
-  text-decoration: none;
-  -webkit-tap-highlight-color: transparent;
+a, a:hover, a:active {
+    text-decoration:none;
+    -webkit-tap-highlight-color: transparent;
 }
 /*form_style*/
-input,
-select,
-textarea,
-button,
-a,
-label {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+input, select, textarea, button, a, label {
+    -webkit-tap-highlight-color:rgba(0,0,0,0);
 }
-button,
-input[type='text'],
-input[type='button'] {
-  -webkit-appearance: none;
-  -webkit-border-radius: 0;
-  -webkit-appearance: none;
-  appearance: none;
-  border-radius: 0;
+button,input[type=text], input[type=button] {
+    -webkit-appearance: none;
+    -webkit-border-radius: 0;
+    -webkit-appearance:none;
+    appearance: none;
+    border-radius: 0
 }
-input[type='checkbox'],
-input[type='radio'] {
-  box-sizing: border-box;
-  padding: 0;
+input[type=checkbox], input[type=radio] {
+    box-sizing: border-box;
+    padding: 0;
 }
-input,
-select,
-button {
-  border: 0 none;
-  outline: none;
-  margin: 0;
+input, select, button {
+    border:0 none;
+    outline:none;
+    margin:0;
 }
 select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
 }
 select::-ms-expand {
-  display: none;
+    display: none;
 }
 ::-webkit-input-placeholder {
-  line-height: 1;
-  font-weight: 300;
-  font-size: 0.938rem;
-  letter-spacing: -0.6px;
-  color: #8b8b8b;
+    line-height:1;
+    font-weight:300;
+    font-size:0.938rem;
+    letter-spacing:-0.6px;
+    color:#8b8b8b;
 }
-.log-box ::-webkit-input-placeholder {
-  color: #8b8b8b;
+.log-box ::-webkit-input-placeholder{
+    color:#8b8b8b;
 }
-button {
-  background: transparent;
-  font-family: 'Noto Sans JP', sans-serif;
-  border: none;
-  padding: 0;
-  margin: 0;
-  line-height: 1.4;
-  color: inherit;
-  outline: none;
-  cursor: pointer;
+button{
+    background: transparent;
+    font-family: 'Noto Sans JP', sans-serif;
+    border: none;
+    padding: 0;
+    margin: 0;
+    line-height: 1.4;
+    color: inherit;
+    outline: none;
+    cursor: pointer;
 }
-.pre {
-  font-family: 'Pretendard', sans-serif !important;
+.pre{
+    font-family: 'Pretendard', sans-serif !important;
 }
 
-.no-click {
-  cursor: no-drop !important;
+.no-click{
+    cursor: no-drop !important;
 }
 
 // margin
-.mt5 {
-  margin-top: 5px !important;
-}
-.mt10 {
-  margin-top: 10px !important;
-}
-.mt15 {
-  margin-top: 15px !important;
-}
-.mb5 {
-  margin-bottom: 5px !important;
-}
-.mb10 {
-  margin-bottom: 10px !important;
-}
-.mb15 {
-  margin-bottom: 15px !important;
-}
-.mr5 {
-  margin-right: 5px !important;
-}
-.mr10 {
-  margin-right: 10px !important;
-}
-.mr15 {
-  margin-right: 15px !important;
-}
-.ml5 {
-  margin-left: 5px !important;
-}
-.ml10 {
-  margin-left: 10px !important;
-}
-.ml15 {
-  margin-left: 15px !important;
-}
+.mt5{margin-top: 5px !important;}
+.mt10{margin-top: 10px !important;}
+.mt15{margin-top: 15px !important;}
+.mb5{margin-bottom: 5px !important;}
+.mb10{margin-bottom: 10px !important;}
+.mb15{margin-bottom: 15px !important;}
+.mr5{margin-right: 5px !important;}
+.mr10{margin-right: 10px !important;}
+.mr15{margin-right: 15px !important;}
+.ml5{margin-left: 5px !important;}
+.ml10{margin-left: 10px !important;}
+.ml15{margin-left: 15px !important;}
 
 // align
-.al-l {
-  text-align: left !important;
-}
-.al-r {
-  text-align: right !important;
-}
-.al-c {
-  text-align: center !important;
-}
+.al-l{text-align: left !important;}
+.al-r{text-align: right !important;}
+.al-c{text-align: center !important;}
+
 
 // button
-.btn-frame {
-  display: inline-block;
-  padding: 0 7px;
-  height: 34px;
-  line-height: 34px;
-  border-radius: 2px;
-  color: #fff;
-  font-size: 12px;
-  font-weight: 400;
-  border: 1px solid #000;
-  text-align: center;
-  font-family: 'Pretendard', sans-serif;
-  transition: all 0.17s ease-in-out;
-  cursor: pointer;
-  &.block {
-    width: 100%;
-  }
-  &.small {
-    font-family: 'Noto Sans JP', sans-serif;
-    height: 30px;
-    line-height: 30px;
-    font-size: 13px;
-  }
+.btn-frame{
+    display: inline-block;
+    padding: 0 7px;
+    height: 34px;
+    line-height: 34px;
+    border-radius: 2px;
+    color: #fff;
+    font-size: 12px;
+    font-weight: 400;
+    border: 1px solid #000;
+    text-align: center;
+    font-family: 'Pretendard', sans-serif;
+    transition: all .17s ease-in-out;
+    cursor: pointer;
+    &.block{
+        width: 100%;
+    }
+    &.small{
+        font-family: 'Noto Sans JP', sans-serif;
+        height: 30px;
+        line-height: 30px;
+        font-size: 13px;
+    }
 
-  &.deepgray {
-    background-color: #2c2c2c;
-    border: 1px solid #484848;
-  }
-  &.gray {
-    background-color: #3c3c3c;
-    border: 1px solid #545454;
-  }
-  &.dark {
-    background-color: #1c1c1c;
-    border: 1px solid #484848;
-  }
-  &.modal {
-    font-family: 'Noto Sans JP', sans-serif;
-    background-color: #272727;
-    border: 1px solid #484848;
-    color: #aaa;
-    &:hover {
-      background-color: #1083e3;
-      border: 1px solid #1083e3;
-      color: #fff;
-      font-weight: 500;
+    &.deepgray{
+        background-color: #2C2C2C;
+        border: 1px solid #484848;
     }
-  }
-  &.sub-tab {
-    height: 30px;
-    padding: 0 10px;
-    line-height: 28px;
-    font-family: 'Noto Sans JP', sans-serif;
-    background-color: #2d2d2d;
-    border: 1px solid #393939;
-    color: #aaa;
-    &.act,
-    &:hover {
-      background-color: #414e6c;
-      border: 1px solid #414e6c;
-      color: #fff;
-      font-weight: 500;
+    &.gray{
+        background-color: #3C3C3C;
+        border: 1px solid #545454;
     }
-  }
-  &.roof {
-    height: 30px;
-    padding: 0 10px;
-    line-height: 28px;
-    font-family: 'Noto Sans JP', sans-serif;
-    background-color: transparent;
-    border: 1px solid #484848;
-    color: #fff;
-    &.blue {
-      background-color: #414e6c;
-      border: 1px solid #414e6c;
-      &:hover {
-        background-color: #414e6c;
-        border: 1px solid #414e6c;
-      }
+    &.dark{
+        background-color: #1C1C1C;
+        border: 1px solid #484848;
     }
-    &.white {
-      background-color: #fff;
-      border: 1px solid #fff;
-      color: #101010;
-      &:hover {
-        background-color: #fff;
-        border: 1px solid #fff;
-        color: #101010;
-      }
+    &.modal{
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: #272727;
+        border: 1px solid #484848;
+        color: #aaa;
+        &:hover{
+            background-color: #1083E3;
+            border: 1px solid #1083E3;
+            color: #fff;
+            font-weight: 500;
+        }
     }
-    &:hover {
-      font-weight: 400;
-      background-color: transparent;
-      border: 1px solid #484848;
-      color: #fff;
+    &.sub-tab{
+        height: 30px;
+        padding: 0 10px;
+        line-height: 28px;
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: #2D2D2D;
+        border: 1px solid #393939;
+        color: #aaa;
+        &.act,
+        &:hover{
+            background-color: #414E6C;
+            border: 1px solid #414E6C;
+            color: #fff;
+            font-weight: 500;
+        }
     }
-  }
-  &.self {
-    height: 30px;
-    padding: 0 10px;
-    line-height: 28px;
-    font-family: 'Noto Sans JP', sans-serif;
-    background-color: transparent;
-    border: 1px solid #676767;
-    color: #aaaaaa;
-    &:hover {
-      background-color: #272727;
-      border-color: #676767;
-      font-weight: 400;
+    &.roof{
+        height: 30px;
+        padding: 0 10px;
+        line-height: 28px;
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: transparent;
+        border: 1px solid #484848;
+        color: #fff;
+        &.blue{
+            background-color: #414E6C;
+            border: 1px solid #414E6C;
+            &:hover{
+                background-color: #414E6C;
+                border: 1px solid #414E6C;
+            }
+        }
+        &.white{
+            background-color: #fff;
+            border: 1px solid #fff;
+            color: #101010;
+            &:hover{
+                background-color: #fff;
+                border: 1px solid #fff;
+                color: #101010;
+            }
+        }
+        &:hover{
+            font-weight: 400;
+            background-color: transparent;
+            border: 1px solid #484848;
+            color: #fff;
+        }
     }
-  }
-  &:hover,
-  &.act {
-    background-color: #1083e3;
-    border: 1px solid #1083e3;
-    color: #fff;
-    font-weight: 500;
-  }
-  &.block {
-    display: block;
-    width: 100%;
-  }
-  &.ico-flx {
-    display: flex;
-    align-items: center;
-    .ico {
-      margin-right: 10px;
+    &.self{
+        height: 30px;
+        padding: 0 10px;
+        line-height: 28px;
+        font-family: 'Noto Sans JP', sans-serif;
+        background-color: transparent;
+        border: 1px solid #676767;
+        color: #AAAAAA;
+        &:hover{
+            background-color: #272727;
+            border-color: #676767;
+            font-weight: 400;
+        }
     }
     &:hover,
-    &.act {
-      font-weight: 400;
+    &.act{
+        background-color: #1083E3;
+        border: 1px solid #1083E3;
+        color: #fff;
+        font-weight: 500;
     }
-  }
+    &.block{
+        display: block;
+        width: 100%;
+    }
+    &.ico-flx{
+        display: flex;
+        align-items: center;
+        .ico{
+            margin-right: 10px;
+        }
+        &:hover,
+        &.act{
+            font-weight: 400;
+        }
+    }    
 }
 
-.btn-origin {
-  display: inline-block;
-  height: 30px;
-  padding: 0 10px;
-  border-radius: 2px;
-  background-color: #101010;
-  color: #fff;
-  font-size: 13px;
-  font-weight: 400;
-  transition: all 0.15s ease-in-out;
-  &.navy {
-    background-color: #304961;
-    &:hover {
-      background-color: #233546;
+.btn-origin{
+    display: inline-block;
+    height: 30px;
+    padding: 0 10px;
+    border-radius: 2px;
+    background-color: #101010;
+    color: #fff;
+    font-size: 13px;
+    font-weight: 400;
+    transition: all .15s ease-in-out;
+    &.navy{
+        background-color: #304961;
+        &:hover{
+            background-color: #233546;
+        }
     }
-  }
-  &.grey {
-    background-color: #94a0ad;
-    &:hover {
-      background-color: #607f9a;
+    &.grey{
+        background-color: #94A0AD;
+        &:hover{
+            background-color: #607F9A;
+        }
     }
-  }
-  &.green {
-    background-color: #a6bba8;
-    &:hover {
-      background-color: #98af9b;
+    &.green{
+        background-color: #A6BBA8;
+        &:hover{
+            background-color: #98af9b;
+        }
     }
-  }
-  &.white {
-    border: 1px solid #94a0ad;
-    background-color: #fff;
-    color: #94a0ad;
-    &:hover {
-      background-color: #fff;
+    &.white{
+        border: 1px solid #94A0AD;
+        background-color: #fff;
+        color: #94A0AD;
+        &:hover{
+            background-color: #fff;
+        }
     }
-  }
 }
 
 // select
-.sort-select {
-  position: relative;
-  display: inline-block;
-  min-width: 100px;
-  height: 30px;
-  line-height: 30px;
-  padding: 0 25px 0 10px;
-  background-color: #373737;
-  border: 1px solid #3f3f3f;
-  border-radius: 2px;
-  border-top-left-radius: 2px;
-  color: #fff;
-  cursor: pointer;
-  p {
-    font-size: 13px;
-    color: #fff;
-    height: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-  }
-  .select-item-wrap {
-    position: absolute;
-    top: 100%;
-    left: -1px;
-    clip-path: inset(0 0 100% 0);
-    width: calc(100% + 2px);
-    padding: 8px 0;
-    max-height: 100px;
-    overflow-y: auto;
-    background-color: #373737;
-    border: 1px solid #3f3f3f;
-    border-radius: 2px;
-    transition: all 0.17s ease-in-out;
-    visibility: hidden;
-    z-index: 999;
-    .select-item {
-      display: flex;
-      align-items: center;
-      padding: 8px 20px;
-      line-height: 1.4;
-      transition: all 0.17s ease-in-out;
-      button {
-        font-size: 12px;
-        color: #fff;
-        line-height: 1.4;
-      }
-      &:hover {
-        background-color: #2c2c2c;
-      }
-    }
-    &::-webkit-scrollbar {
-      width: 2px;
-      background-color: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: #5a5a5a;
-      border-radius: 10px;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: transparent;
-    }
-  }
-  &::after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    right: 7px;
-    transform: translateY(-50%);
-    width: 10px;
-    height: 6px;
-    background: url(/static/images/common/select-arr.svg) no-repeat center;
-    background-size: cover;
-    transition: all 0.17s ease-in-out;
-  }
-  &.active {
-    .select-item-wrap {
-      clip-path: inset(0 0 0 0);
-      visibility: visible;
-    }
-    &:after {
-      transform: translateY(-50%) rotate(-180deg);
-    }
-  }
-}
-
-.select-light {
-  position: relative;
-  display: block;
-  width: 100%;
-  height: 30px;
-  background: #fff url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
-  background-size: 10px 6px;
-  border: 1px solid #eee;
-  padding: 0 30px 0 10px;
-  font-size: 13px;
-  color: #45576f;
-  font-family: 'Noto Sans JP', sans-serif;
-  cursor: pointer;
-  &:disabled {
-    opacity: 1;
-    background-color: #fafafa;
-    color: #999;
-    cursor: default;
-  }
-  &.black {
-    color: #101010;
-  }
-  &.dark {
-    background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
-    color: #898989;
-    font-size: 12px;
-    border-radius: 2px;
-    border: none;
-  }
-}
-
-// input
-.form-input {
-  label {
-    display: block;
-    color: #aaa;
-    font-size: 12px;
-    font-weight: 500;
-    margin-bottom: 10px;
-  }
-}
-input[type='password'],
-input[type='number'],
-input[type='text'] {
-  &.input-origin {
+.sort-select{
+    position: relative;
     display: inline-block;
+    min-width: 100px;
     height: 30px;
     line-height: 30px;
+    padding: 0 25px 0 10px;
+    background-color: #373737;
+    border: 1px solid #3F3F3F;
     border-radius: 2px;
-    background-color: #323234;
-    border: 1px solid #323234;
+    border-top-left-radius: 2px;
     color: #fff;
-    font-size: 12px;
-    font-weight: 500;
-    font-family: 'Pretendard', sans-serif;
-    padding: 0 10px;
-    letter-spacing: 0px;
-    text-align: right;
-    transition: border 0.15s ease-in-out;
-    &:focus {
-      border: 1px solid #1083e3;
+    cursor: pointer;
+    p{
+        font-size: 13px;
+        color: #fff;
+        height: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
     }
-    &::placeholder {
-      font-family: 'Noto Sans JP', sans-serif;
-      opacity: 1;
-      font-size: 12px;
-      letter-spacing: 0px;
+    .select-item-wrap{
+        position: absolute;
+        top: 100%;
+        left: -1px;
+        clip-path:inset(0 0 100% 0);
+        width: calc(100% + 2px);
+        padding: 8px 0;
+        max-height: 100px;
+        overflow-y: auto;
+        background-color: #373737;
+        border: 1px solid #3F3F3F;
+        border-radius: 2px;
+        transition: all 0.17s ease-in-out;
+        visibility: hidden;
+        z-index: 999;
+        .select-item{
+            display: flex;
+            align-items: center;
+            padding: 8px 20px;
+            line-height: 1.4;
+            transition: all .17s ease-in-out;
+            button{
+                font-size: 12px;
+                color: #fff;
+                line-height: 1.4;
+            }
+            &:hover{
+                background-color: #2C2C2C;
+            }
+        }
+        &::-webkit-scrollbar {
+            width: 2px;
+            background-color: transparent;
+            
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: #5a5a5a;
+            border-radius: 10px;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: transparent;
+        }
     }
-    &.block {
-      width: 100%;
+    &::after{
+        content: '';
+        position: absolute;
+        top: 50%;
+        right: 7px;
+        transform: translateY(-50%);
+        width: 10px;
+        height: 6px;
+        background: url(/static/images/common/select-arr.svg) no-repeat center;
+        background-size: cover;
+        transition: all .17s ease-in-out;
     }
-    &:read-only {
-      color: #aaa;
-      &:focus {
-        border: 1px solid #323234;
-      }
+    &.active{
+        .select-item-wrap{
+            clip-path: inset(0 0 0 0);
+            visibility: visible;
+        }
+        &:after{
+            transform: translateY(-50%) rotate(-180deg);
+        }
     }
-    &.plane {
-      font-family: 'Noto Sans JP', sans-serif;
-      border: 1px solid #525252;
-      background-color: transparent;
-    }
-  }
-  &.input-light {
+}
+
+.select-light{
+    position: relative;
     display: block;
     width: 100%;
     height: 30px;
-    padding: 0 10px;
+    background: #FFF url(../../public/static/images/common/select_light_arr.svg) calc(100% - 11px) center no-repeat;
+    background-size: 10px 6px;
     border: 1px solid #eee;
-    border-radius: 2px;
-    background-color: #fff;
-    font-family: 'Noto Sans JP', sans-serif;
+    padding: 0 30px 0 10px;
     font-size: 13px;
-    color: #45576f;
-    font-weight: normal;
-    transition: border-color 0.17s ease-in-out;
-    text-align: left;
-    &:focus {
-      border-color: #94a0ad;
+    color: #45576F;
+    font-family: 'Noto Sans JP', sans-serif;
+    cursor: pointer;
+    &:disabled{
+        opacity: 1;
+        background-color: #FAFAFA;
+        color: #999;
+        cursor: default;
     }
-    &:read-only {
-      background-color: #fafafa;
-      color: #999999;
-      &:focus {
-        border-color: #eee;
-      }
+    &.black{
+        color: #101010;
+    }
+    &.dark{
+        background: #323234 url(../../public/static/images/common/select_dark_arr.svg) calc(100% - 11px) center no-repeat;
+        color: #898989;
+        font-size: 12px;
+        border-radius: 2px;
+        border: none;
     }
-  }
 }
 
+
+// input
+.form-input{
+    label{
+        display: block;
+        color: #aaa;
+        font-size: 12px;
+        font-weight: 500;
+        margin-bottom: 10px;
+    }
+}
+input[type=password],
+input[type=number],
+input[type=text]{
+    &.input-origin{
+        display: inline-block;
+        height: 30px;
+        line-height: 30px;
+        border-radius: 2px;
+        background-color: #323234;
+        border: 1px solid #323234;
+        color: #fff;
+        font-size: 12px;
+        font-weight: 500;
+        font-family: 'Pretendard', sans-serif;
+        padding: 0 10px;
+        letter-spacing: 0px;
+        text-align: right;
+        transition: border .15s ease-in-out;
+        &:focus{
+            border: 1px solid #1083E3;
+        }
+        &::placeholder{
+            font-family: 'Noto Sans JP', sans-serif;
+            opacity: 1;
+            font-size: 12px;
+            letter-spacing: 0px;
+        }
+        &.block{
+            width: 100%;
+        }
+        &:read-only{
+            color: #AAA;
+            &:focus{
+                border: 1px solid #323234;
+            }
+        }
+        &.plane{
+            font-family: 'Noto Sans JP', sans-serif;
+            border: 1px solid #525252;
+            background-color: transparent;
+        }
+    }
+    &.input-light{
+        display: block;
+        width: 100%;
+        height: 30px;
+        padding: 0 10px;
+        border: 1px solid #eee;
+        border-radius: 2px;
+        background-color: #fff;
+        font-family: 'Noto Sans JP', sans-serif;
+        font-size: 13px;
+        color: #45576F;
+        font-weight: normal;
+        transition: border-color .17s ease-in-out;
+        text-align: left;
+        &:focus{
+            border-color: #94A0AD;
+        }
+        &:read-only{
+            background-color: #FAFAFA;
+            color: #999999;
+            &:focus{
+                border-color: #eee;
+            }
+        }
+    }
+}
+
+
+
 // check-btn
-.check-btn {
-  display: flex;
-  align-items: center;
-  height: 30px;
-  background-color: #3a3a3a;
-  border-radius: 3px;
-  transition: all 0.17s ease-in-out;
-  .check-area {
-    flex: none;
-    width: 30px;
-    height: 100%;
-    border-right: 1px solid #272727;
-    background: url(../../public/static/images/canvas/check-grey.svg) no-repeat center;
-    background-size: 11px 9px;
-  }
-  .title-area {
-    padding: 0 10px;
-    font-size: 12px;
-    color: #898989;
-    font-weight: 400;
-  }
-  &.block {
-    width: 100%;
-  }
-  &:hover,
-  &.act {
-    background-color: #fff;
-    .check-area {
-      border-right: 1px solid #101010;
-      background: url(../../public/static/images/canvas/check-black.svg) no-repeat center;
+.check-btn{
+    display: flex;
+    align-items: center;
+    height: 30px;
+    background-color: #3A3A3A;
+    border-radius: 3px;
+    transition: all .17s ease-in-out;
+    .check-area{
+        flex: none;
+        width: 30px;
+        height: 100%;
+        border-right: 1px solid #272727;
+        background: url(../../public/static/images/canvas/check-grey.svg)no-repeat center;
+        background-size: 11px 9px;
     }
-    .title-area {
-      color: #101010;
-      font-weight: 600;
+    .title-area{
+        padding: 0 10px;
+        font-size: 12px;
+        color: #898989;
+        font-weight: 400;
+    }
+    &.block{
+        width: 100%;
+    }
+    &:hover,
+    &.act{
+        background-color: #fff;
+        .check-area{
+            border-right: 1px solid #101010;
+            background: url(../../public/static/images/canvas/check-black.svg)no-repeat center;
+        }
+        .title-area{
+            color: #101010;
+            font-weight: 600;
+        }
     }
-  }
 }
 
 // arr-btn
-.arr-btn {
-  display: block;
-  height: 30px;
-  border-radius: 3px;
-  background-color: #3a3a3a;
-  padding: 0 11px;
-  text-align: left;
-  transition: all 0.17s ease-in-out;
-  span {
-    position: relative;
-    font-size: 12px;
-    color: #898989;
-    font-weight: 400;
-    padding-right: 15px;
-    &:after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      right: 0;
-      transform: translateY(-50%);
-      width: 5px;
-      height: 8px;
-      background: url(../../public/static/images/canvas/arr_btn_ico.svg) no-repeat center;
-    }
-  }
-  &:hover,
-  &.act {
-    background-color: #fff;
-    span {
-      color: #101010;
-      font-weight: 500;
-      &:after {
-        background: url(../../public/static/images/canvas/arr_btn_ico_black.svg) no-repeat center;
-      }
-    }
-  }
-  &.dark {
-    text-align: center;
-    background-color: #272727;
-    border: 1px solid #484848;
-    span {
-      color: #fff;
-      &:after {
-        background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center;
-      }
+.arr-btn{
+    display: block;
+    height: 30px;
+    border-radius: 3px;
+    background-color: #3A3A3A;
+    padding: 0 11px;
+    text-align: left;
+    transition: all .17s ease-in-out;
+    span{
+        position: relative;
+        font-size: 12px;
+        color: #898989;
+        font-weight: 400;
+        padding-right: 15px;
+        &:after{
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 5px;
+            height: 8px;
+            background: url(../../public/static/images/canvas/arr_btn_ico.svg)no-repeat center;
+        }
     }
     &:hover,
-    &.act {
-      background-color: #1083e3;
-      border: 1px solid #1083e3;
+    &.act{
+        background-color: #fff;
+        span{
+            color: #101010;
+            font-weight: 500;
+            &:after{
+                background: url(../../public/static/images/canvas/arr_btn_ico_black.svg)no-repeat center;
+            }
+        }
+    }
+    &.dark{
+        text-align: center;
+        background-color: #272727;
+        border: 1px solid #484848;
+        span{
+            color: #Fff;
+            &:after{
+                background: url(../../public/static/images/canvas/arr_btn_ico_white.svg)no-repeat center;
+            }
+        }
+        &:hover,
+        &.act{
+            background-color: #1083E3;
+            border: 1px solid #1083E3;
+        }
     }
-  }
 }
 
 // radio
 .d-check-radio,
-.d-check-box {
-  line-height: 1.1;
-  cursor: pointer;
-  input[type='checkbox'],
-  input[type='radio'] {
-    position: static;
-    margin-left: 0;
+.d-check-box{
+    line-height: 1.1;
     cursor: pointer;
-    opacity: 0;
-    z-index: 1;
-    flex: 0 0 auto;
-  }
-  label {
-    position: relative;
-    padding-left: 10px;
-    margin-bottom: 0;
-    word-break: break-all;
-    line-height: 1.2;
-    display: inline;
-    vertical-align: top;
-    color: #fff;
-    font-size: 13px;
-    font-weight: 400;
-    cursor: pointer;
-  }
-  &.light {
-    label {
-      color: #45576f;
+    input[type=checkbox],
+    input[type=radio]{
+        position: static;
+        margin-left: 0;
+        cursor: pointer;
+        opacity: 0;
+        z-index: 1;
+        flex: 0 0 auto;
     }
-  }
-  &.no-text {
-    label {
-      padding-left: 0;
+    label{
+        position: relative;
+        padding-left: 10px;
+        margin-bottom: 0;
+        word-break: break-all;
+        line-height: 1.2;
+        display: inline;
+        vertical-align: top;
+        color: #fff;
+        font-size: 13px;
+        font-weight: 400;
+        cursor: pointer;
+    }
+    &.light{
+        label{
+            color: #45576F;
+        }
+    }
+    &.no-text{
+        label{
+            padding-left: 0;
+        }
     }
-  }
 }
 
 .d-check-radio {
-  label {
-    &::before {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 17px;
-      height: 17px;
-      top: 2px;
-      left: 0;
-      margin-left: -12px;
-      border: 1px solid #999999;
-      border-radius: 100%;
-      background-color: transparent;
-      text-align: center;
-      font-size: 13px;
-      line-height: 1.4;
-      transition:
-        border 0.15s ease-in-out,
-        color 0.15s ease-in-out;
+    label{
+        &::before{
+            cursor: pointer;
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 17px;
+            height: 17px;
+            top:2px;
+            left: 0;
+            margin-left: -12px;
+            border: 1px solid #999999;
+            border-radius: 100%;
+            background-color: transparent;
+            text-align:center;
+            font-size:13px;
+            line-height:1.4;
+            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+        }
+        &::after{
+            cursor: pointer;
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 9px;
+            height: 9px;
+            top:6px;
+            left: 4px;
+            margin-left: -12px;
+            border: none;
+            border-radius: 100%;
+            background-color: #fff;
+            text-align:center;
+            font-size:13px;
+            line-height:1.4;
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out;
+        }
     }
-    &::after {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 9px;
-      height: 9px;
-      top: 6px;
-      left: 4px;
-      margin-left: -12px;
-      border: none;
-      border-radius: 100%;
-      background-color: #fff;
-      text-align: center;
-      font-size: 13px;
-      line-height: 1.4;
-      opacity: 0;
-      visibility: hidden;
-      transition:
-        opacity 0.15s ease-in-out,
-        color 0.15s ease-in-out;
+    &.light{
+        label{
+            &:before{
+                border-color: #D6D6D7;
+            }
+            &:after{
+                background-color: #697C8F;
+            }
+        }
     }
-  }
-  &.light {
-    label {
-      &:before {
-        border-color: #d6d6d7;
-      }
-      &:after {
-        background-color: #697c8f;
-      }
+    input[type=radio]:checked + label::after{
+        opacity: 1;
+        visibility: visible;
     }
-  }
-  input[type='radio']:checked + label::after {
-    opacity: 1;
-    visibility: visible;
-  }
-  &.pop {
-    label {
-      font-size: 12px;
-      &:before {
-        width: 16px;
-        height: 16px;
-        border-color: #fff;
-      }
-      &:after {
-        width: 8px;
-        height: 8px;
-        background-color: #fff;
-      }
+    &.pop{
+        label{
+            font-size: 12px;
+            &:before{
+                width: 16px;
+                height: 16px;
+                border-color: #fff;
+            }
+            &:after{
+                width: 8px;
+                height: 8px;
+                background-color: #fff;
+            }
+        }
     }
-  }
 }
 
 // check-box
-.d-check-box {
-  label {
-    &.red {
-      color: #ffcaca;
+.d-check-box{
+    label{
+        &.red{color: #FFCACA;}
+        &::before{
+            cursor: pointer;
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 17px;
+            height: 17px;
+            top: 2px;
+            left: 0;
+            margin-left: -12px;
+            border: 1px solid #D6D6D7;
+            background-color: #fff;
+            transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
+        }
+        &:after{
+            cursor: pointer;
+            content: "";
+            display: inline-block;
+            position: absolute;
+            width: 16px;
+            height: 16px;
+            top:0;
+            left: 0;
+            margin-left: -.8rem;
+            transition: border 0.05s ease-in-out, color 0.05s ease-in-out;
+        }
     }
-    &::before {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 17px;
-      height: 17px;
-      top: 2px;
-      left: 0;
-      margin-left: -12px;
-      border: 1px solid #d6d6d7;
-      background-color: #fff;
-      transition:
-        border 0.15s ease-in-out,
-        color 0.15s ease-in-out;
+    input[type=checkbox]:checked + label::after{
+        content: "";
+        display: inline-block;
+        position: absolute;
+        top: 1px;
+        left: -1px;
+        width: 5px;
+        height: 8px;
+        border: 2px solid #697C8F;
+        border-left: none;
+        border-top: none;
+        transform: translate(7.75px,4.5px) rotate(45deg);
+        -ms-transform: translate(7.75px,4.5px) rotate(45deg);
     }
-    &:after {
-      cursor: pointer;
-      content: '';
-      display: inline-block;
-      position: absolute;
-      width: 16px;
-      height: 16px;
-      top: 0;
-      left: 0;
-      margin-left: -0.8rem;
-      transition:
-        border 0.05s ease-in-out,
-        color 0.05s ease-in-out;
+    input[type=checkbox]:disabled + label::before{
+        background-color: #FAFAFA;
     }
-  }
-  input[type='checkbox']:checked + label::after {
-    content: '';
-    display: inline-block;
-    position: absolute;
-    top: 1px;
-    left: -1px;
-    width: 5px;
-    height: 8px;
-    border: 2px solid #697c8f;
-    border-left: none;
-    border-top: none;
-    transform: translate(7.75px, 4.5px) rotate(45deg);
-    -ms-transform: translate(7.75px, 4.5px) rotate(45deg);
-  }
-  &.pop {
-    label {
-      &:before {
-        background-color: transparent;
-      }
+    input[type=checkbox]:disabled + label::after{
+        border-color: #999;
     }
-    input[type='checkbox']:checked + label::after {
-      border-color: #fff;
+    &.pop{
+        label{
+            &:before{
+                background-color: transparent;
+            }
+        }
+        input[type=checkbox]:checked + label::after{
+            border-color: #fff;
+        }
+        &.no-text{
+            label{
+                padding-left: 0;
+            }
+        }
     }
-    &.no-text {
-      label {
-        padding-left: 0;
-      }
+    &.sel{
+        input[type=checkbox]:checked + label{
+            color: #D7C863;
+        }
+        input[type=checkbox]:checked + label::before,
+        input[type=checkbox]:checked + label::after{
+            border-color: #D7C863;
+        }
     }
-  }
-  &.sel {
-    input[type='checkbox']:checked + label {
-      color: #d7c863;
-    }
-    input[type='checkbox']:checked + label::before,
-    input[type='checkbox']:checked + label::after {
-      border-color: #d7c863;
-    }
-  }
 }
 
 // date-picker
-.date-picker {
-  svg {
-    display: none;
-  }
-  .react-datepicker-wrapper {
-    width: 100%;
-  }
-  input[type='text'] {
-    display: block;
-    width: 100%;
-    height: 30px;
-    padding: 0 34px 0 10px;
-    border-radius: 2px;
-    border: 1px solid #eee;
-    font-size: 13px;
-    color: #45576f;
-    font-weight: normal;
-    font-family: 'Noto Sans JP', sans-serif;
-    background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
-    background-size: 14px 15px;
-    cursor: pointer;
-  }
+.date-picker{
+    svg{display: none;}
+    .react-datepicker-wrapper{
+        width: 100%;
+    }
+    input[type=text]{
+        display: block;
+        width: 100%;
+        height: 30px;
+        padding: 0 34px 0 10px;
+        border-radius: 2px;
+        border: 1px solid #eee;
+        font-size: 13px;
+        color: #45576F;
+        font-weight: normal;
+        font-family: 'Noto Sans JP', sans-serif;
+        background: #fff url(../../public/static/images/common/datepicker.svg) calc(100% - 11px) center no-repeat;
+        background-size: 14px 15px;
+        cursor: pointer;
+    }
 }
 
 // react select
-.react-select-custom {
-  width: 100%;
-  .custom__control {
-    height: 30px;
-    min-height: unset;
-    border-radius: 2px;
-    border-color: #eee;
-    background-color: #fff;
-    &:hover {
-      border-color: #eee;
+.react-select-custom{
+    width: 100%;
+    .custom__control{
+        height: 30px;
+        min-height: unset;
+        border-radius: 2px;
+        border-color: #EEE;
+        background-color: #fff;
+        &:hover{
+            border-color: #EEE;
+        }
     }
-  }
-  .custom__control--is-focused {
-    border-color: #eee;
-    box-shadow: unset;
-    &:hover {
-      border-color: #eee;
-    }
-  }
-  .custom__value-container {
-    height: 100%;
-    padding: 0 10px;
-  }
-  .custom__placeholder,
-  .custom__single-value {
-    margin: 0;
-  }
-  .custom__single-value {
-    font-size: 13px;
-    color: #45576f;
-    font-weight: 400;
-  }
-  .custom__placeholder {
-    font-size: 13px;
-    color: #bbbbbb;
-    font-weight: 400;
-  }
-  .custom__indicator {
-    padding: 0;
-    svg {
-      display: none;
-    }
-  }
-  .custom__clear-indicator {
-    width: 30px;
-    height: 100%;
-    background: url(../../public/static/images/common/select_del.svg) no-repeat center;
-    background-size: 8px 8px;
-  }
-  .custom__dropdown-indicator {
-    width: 30px;
-    height: 100%;
-    background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
-  }
+    .custom__control--is-focused{
+        border-color: #EEE;
+        box-shadow: unset;
+        &:hover{
+            border-color: #EEE;
 
-  .custom__menu {
-    margin: 1px 0;
-    border-radius: 2px;
-    overflow: hidden;
-  }
-  .custom__menu-list {
-    padding: 0;
-  }
-  .custom__option {
-    font-size: 13px;
-    padding: 7px 10px;
-    color: #45576f;
-  }
-  .custom__option--is-selected {
-    color: #fff;
-  }
-  // disable
-  &.custom--is-disabled {
-    .custom__control {
-      background-color: #fafafa;
+        }
     }
-    .custom__single-value {
-      color: #999999;
+    .custom__value-container {
+        height: 100%;
+        padding: 0 10px;
+    }
+    .custom__placeholder,
+    .custom__single-value{
+        margin: 0;
+    }
+    .custom__single-value{
+        font-size: 13px;
+        color: #45576F;
+        font-weight: 400;
+    }
+    .custom__placeholder{
+        font-size: 13px;
+        color: #bbbbbb;
+        font-weight: 400;
+    }
+    .custom__indicator{
+        padding: 0;
+        svg{
+            display: none;
+        }
+    }
+    .custom__clear-indicator{
+        width: 30px;
+        height: 100%;
+        background: url(../../public/static/images/common/select_del.svg) no-repeat center;
+        background-size: 8px 8px;
+    }
+    .custom__dropdown-indicator{
+        width: 30px;
+        height: 100%;
+        background: url(../../public/static/images/common/select_light_arr.svg) no-repeat center;
+    }
+
+    .custom__menu {
+        margin: 1px 0;
+        border-radius: 2px;
+        overflow: hidden;
+    }
+    .custom__menu-list {
+        padding: 0;
+    }
+    .custom__option{
+        font-size: 13px;
+        padding: 7px 10px;
+        color: #45576F;
+    }
+    .custom__option--is-selected{
+        color: #fff;
+    }
+    // disable
+    &.custom--is-disabled{
+        .custom__control{
+            background-color: #FAFAFA ;
+        }
+        .custom__single-value{
+            color: #999999;
+        }
     }
-  }
 }
 
 // toggle
 .toggle-btn {
-  position: relative;
-  display: inline-block;
-  width: 55px;
-  height: 20px;
-  input {
-    display: none;
-  }
+    position: relative;
+    display: inline-block;
+    width: 55px;
+    height: 20px;
+    input {
+        display: none;
+    }
 }
 .slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background-color: #454545;
-  transition: 0.4s;
-  border-radius: 10px;
-  text-align: center;
-  line-height: 20px;
-  color: white;
-  font-size: 12px;
-  font-weight: 400;
-  &:after {
-    content: 'OFF';
     position: absolute;
-    right: 7px;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #454545;
+    transition: .4s;
+    border-radius: 10px;
+    text-align: center;
+    line-height: 20px;
     color: white;
     font-size: 12px;
     font-weight: 400;
-  }
-  &:before {
-    position: absolute;
-    content: '';
-    height: 16px;
-    width: 16px;
-    left: 2px;
-    bottom: 2px;
-    background-color: white;
-    transition: 0.4s;
-    border-radius: 50%;
-  }
+    &:after {
+        content: 'OFF';
+        position: absolute;
+        right: 7px;
+        color: white;
+        font-size: 12px;
+        font-weight: 400;
+    }
+    &:before {
+        position: absolute;
+        content: "";
+        height: 16px;
+        width: 16px;
+        left: 2px;
+        bottom: 2px;
+        background-color: white;
+        transition: .4s;
+        border-radius: 50%;
+    }
 }
 input:checked + .slider {
-  background-color: #2563eb;
-  &:after {
-    content: 'ON';
-    left: 10px;
-    right: auto;
-  }
-  &:before {
-    transform: translateX(35px);
-  }
-}
+    background-color: #2563EB;
+    &:after {
+        content: 'ON';
+        left: 10px;
+        right: auto;
+    }
+    &:before {
+        transform: translateX(35px);
+    }
+}
\ No newline at end of file