diff --git a/assets/css/guide.css b/assets/css/guide.css
index 909fd6a..dff2597 100644
--- a/assets/css/guide.css
+++ b/assets/css/guide.css
@@ -2087,6 +2087,13 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   background: transparent;
 }
 
+.btn_xl {
+  height: 48px;
+  font-weight: 700;
+  font-size: 16px;
+  letter-spacing: 0.031rem;
+}
+
 .btn_l {
   height: 40px;
   font-weight: 700;
@@ -2098,7 +2105,6 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   height: 32px;
   font-weight: 700;
   font-size: 14px;
-  letter-spacing: 0.031rem;
 }
 
 .btn_s {
@@ -2744,7 +2750,6 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 
 .put_zone {
   position: relative;
-  width: 100%;
 }
 .put_zone .wrput {
   width: 100%;
@@ -2766,6 +2771,15 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 .put_zone .put_check.dflx {
   display: flex;
 }
+.put_zone .timer {
+  position: absolute;
+  top: 17px;
+  right: 16px;
+  margin-right: auto;
+  color: rgba(255, 255, 255, 0.4);
+  font-size: 12px;
+  font-weight: 400;
+}
 .put_zone .put_see {
   top: 0.25rem;
   display: flex;
@@ -2781,88 +2795,48 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .wrput {
-  font-size: 0.8125rem;
+  font-size: 1rem;
   font-weight: 400;
-  width: 20rem;
-  height: 1.75rem;
-  background-color: var(--more-bright-wh_12-to-6);
-  border: 0.063rem solid rgba(255, 255, 255, 0);
-  border-radius: 0.125rem;
-  color: var(--white-w_87-sec);
-  line-height: 1;
-  letter-spacing: 0.031rem;
-  padding: 0 0.5rem;
-}
-.wrput.line {
+  width: 200px;
   background-color: transparent;
-  border: 0.063rem solid var(--white-w_40);
-}
-.wrput.on, .wrput:focus:not(.read_only):not(.read_error):not(.read_normal):not(.read_success) {
-  border: 0.063rem solid var(--primary-pri_100) !important;
-  outline: 0.188rem solid var(--primary-pri_20);
+  border: 1px solid var(--alpha-bk-to-whbk-20);
+  border-radius: 4px;
+  color: rgba(255, 255, 255, 0.4);
+  line-height: 1;
+  letter-spacing: 0.5px;
+  padding: 0 12px 0 16px;
 }
-.wrput.success {
-  padding: 0 2rem 0 1rem;
+.wrput ::-moz-placeholder {
+  color: var(--alpha-bk-to-whbk-40) !important;
 }
-.wrput.success + .put_check {
-  display: flex;
+.wrput ::placeholder {
+  color: var(--alpha-bk-to-whbk-40) !important;
 }
-.wrput.error {
-  border: 0.063rem solid #D60000;
-  outline: none;
+.wrput.on, .wrput:focus:not(.disabled) {
+  border: 1px solid var(--PRI) !important;
+  color: var(--alpha-bk-to-whbk-87);
 }
-.wrput.etc {
+.wrput.large {
   width: 100%;
-  height: 1.75rem;
-  padding: 0 0.875rem;
-}
-.wrput.usage {
-  color: #00B295;
+  height: 48px;
 }
-.wrput.large {
+.wrput.medium {
   font-size: 0.875rem;
   font-weight: 400;
   width: 100%;
-  height: 2.5rem;
-  padding: 0 1rem;
-}
-.wrput.large.pass {
-  padding: 0 2.5rem 0 1rem;
-}
-.wrput.pass {
-  padding: 0 2.25rem 0 0.5rem;
-}
-.wrput.read_only {
-  background: var(--more-bright-wh_12-to-6);
-  border: 0.063rem solid var(--white-w_20);
-  outline: none;
-}
-.wrput.read_light {
-  background: var(--primary-pri_12);
-  border: 0.063rem solid var(--primary-pri_100);
-  outline: none;
-  color: var(--primary-pri_100);
-}
-.wrput.read_error {
-  background: rgba(219, 0, 0, 0.08);
-  border: 0.063rem solid #D60000;
-  outline: none;
-  color: #FF1F55;
-}
-.wrput.read_normal {
-  background: rgba(0, 104, 230, 0.2);
-  border: 0.063rem solid #0068E6;
-  outline: none;
-  color: #338FFF;
+  height: 40px;
+  padding: 0 8px 0 12px;
 }
-.wrput.read_success {
-  background: rgba(0, 189, 120, 0.1);
-  border: 0.063rem solid #00BD78;
-  outline: none;
-  color: #00BD78;
+.wrput.small {
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 100%;
+  height: 28px;
+  padding: 0 8px 0 12px;
 }
-.wrput.text {
-  color: #ffffff;
+.wrput.disabled {
+  border: 1px solid var(--alpha-bk-to-whbk-20);
+  background: var(--alpha-bk-to-whbk-20);
 }
 
 .sp_name {
@@ -3164,7 +3138,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .login_input {
-  width: 20rem;
+  width: 320px;
 }
 
 .save_group {
@@ -4966,14 +4940,14 @@ header {
   left: 0;
   top: 0;
   width: 100%;
-  height: 2.5rem;
+  height: 48px;
   z-index: 200;
   background-color: var(--bg_01_80);
-  border-bottom: 0.063rem solid var(--line-wh_20-to-100);
 }
 header.two_line {
   height: 5rem;
   background-color: var(--bg_01_80);
+  border-bottom: 0.063rem solid var(--line-wh_20-to-100);
 }
 
 .header_in {
@@ -5009,9 +4983,9 @@ header.two_line {
 .header_left {
   display: flex;
   align-items: center;
-  -moz-column-gap: 1.875rem;
-       column-gap: 1.875rem;
-  padding: 0 1rem 0 0;
+  -moz-column-gap: 16px;
+       column-gap: 16px;
+  padding: 0 16px 0 0;
 }
 
 .header_logo {
@@ -5023,8 +4997,9 @@ header.two_line {
   align-items: center;
 }
 
-.logo_hd_uniplus {
-  width: 9.125rem;
+.logo_hd_kisa {
+  width: 96px;
+  margin-bottom: 8px;
 }
 
 .sp_logo_uniplus {
@@ -5501,137 +5476,33 @@ header.two_line {
 }
 
 .label {
-  font-size: 0.6875rem;
-  font-weight: 400;
+  color: var(--alpha-bk-to-whbk-87);
+  text-align: center;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 8px 12px;
+  height: 28px;
   display: flex;
   align-items: center;
   justify-content: center;
-  min-width: 3.125rem;
-  height: 1rem;
-  padding: 0.1rem 0.25rem 0;
+  border-radius: 50px;
+  padding: 8px 12px;
   overflow: hidden;
-  background-color: #024294;
-  border-radius: 0.125rem;
-  color: #fff;
+  background-color: var(--alpha-bk-to-whbk-10);
   word-break: keep-all;
 }
-.label.morning {
-  background-color: #55BBFF;
-}
-.label.afternoon {
-  background-color: #1BABFF;
-}
-.label.daytime {
-  background-color: #008DFF;
-}
-.label.night {
-  background-color: #024294;
-}
-.label.latenight {
-  background-color: #174BCC;
-}
-.label.etc {
-  background-color: rgba(255, 255, 255, 0.3);
-}
-.label.cross {
-  background-color: rgba(39, 212, 255, 0.8);
-}
-.label.construct {
-  background-color: #937EFF;
-}
-.label.emergency {
-  background-color: #6548F5;
-}
-
-.gr_label {
-  display: flex;
-  align-items: center;
-  margin: 0.5rem 0;
-}
-.gr_label .word {
-  font-size: 0.6875rem;
-  font-weight: 400;
-  color: var(--white-w_87-sec);
-  margin: 0 0 0 0.375rem;
-  line-height: 1.1;
-}
 
-.label_tag {
-  border-radius: 0.125rem;
-  display: inline-block;
-  min-height: 1.125rem;
-  padding: 0 0.25rem;
-  line-height: 1.125rem;
-  text-align: center;
-  color: var(--white-w_100);
-}
-.label_tag.ellipse {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-  width: 2.25rem;
-  height: 2.25rem;
-  font-size: 0.875rem;
-  line-height: 2.25rem;
-  min-width: auto;
-}
-.label_tag.box {
-  padding: 0.125rem 0.25rem;
-  min-width: 1.938rem;
-}
-.label_tag.long {
-  width: 3.5rem;
-}
-.label_tag.card {
-  padding: 0 0.625rem;
-  min-height: 1rem !important;
-  line-height: 1rem;
-}
-.label_tag.small {
-  min-width: 3.063rem;
-}
-.label_tag.x_small {
-  padding: 0.125rem 0;
-  min-width: 1.813rem;
-}
-.label_tag.main_label {
-  background: var(--white-w_30);
-}
-.label_tag.main_info {
-  background: var(--white-w_30);
-}
-.label_tag.grey {
-  background: var(--white-w_40);
-}
-
-.number_default {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  border-radius: 0.125rem;
-}
-.number_default.outline {
-  background: var(--white-w_20);
-  border: 0.063rem solid var(--white-w_40-sec);
-  color: rgba(255, 255, 255, 0.87);
-}
-.number_default.bg_blue {
-  background-color: #0068E6;
-  color: #FFF;
-}
-.number_default.primary {
-  color: var(--primary-pri_100);
-  background-color: var(--bg_02_80);
+.login_txt {
+  color: var(--alpha-bk-to-whbk-100);
+  font-size: 32px;
+  font-weight: 700;
 }
 
-.dashed_box {
-  border-radius: 0.3125rem;
-  background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23FFFFFF' opacity='0.2' stroke-width='4' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+.num_txt {
+  color: var(--alpha-bk-to-whbk-60);
+  font-size: 16px;
+  font-weight: 700;
+  margin-top: 20px;
 }
 
 .preview_box {
@@ -7159,118 +7030,6 @@ header.two_line {
   padding: 0 0;
 }
 
-.marker_numbering_text {
-  transform: translate(0, 0.313rem);
-  color: var(--primary-pri_100);
-}
-
-.marker_layer {
-  border-radius: 50%;
-  background: rgba(214, 0, 0, 0.4);
-}
-
-.route_line {
-  border-radius: 0.625rem;
-}
-
-.marker_departure {
-  border-radius: 50%;
-  border: 0.188rem solid var(--primary-pri_100);
-}
-.marker_departure.blue {
-  border: 0.188rem solid #0068E6;
-}
-.marker_departure.purple {
-  border: 0.188rem solid #8972FF;
-}
-.marker_departure.red {
-  border: 0.188rem solid #D60000;
-}
-
-.pass_car {
-  transform: rotate(255deg) translate(6.688rem, -5.313rem);
-}
-
-.pass_departure {
-  transform: translate(9.063rem, 0.688rem);
-}
-
-.pass_arrival {
-  transform: translate(-2.625rem, -1.875rem);
-}
-
-.pass_departure_marker {
-  transform: translate(7.813rem, 1.063rem);
-}
-
-.pass_arrival_marker {
-  transform: translate(-1.125rem, -2.813rem);
-}
-
-.cluster_count {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  font-size: 0.875rem;
-  font-weight: 500;
-  position: absolute;
-  top: -0.938rem;
-  left: 1.125rem;
-  height: 1.5rem;
-  padding: 0 0.5rem;
-  border: 0.063rem solid var(--white-w_40);
-  border-radius: 1.5rem;
-  background: var(--bg_01_80);
-  line-height: 1.5rem;
-}
-
-.infowindow_box {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  border-radius: 0.125rem;
-  width: auto;
-  padding: 0 0.5rem;
-  cursor: pointer;
-  border: 0.063rem solid rgba(255, 255, 255, 0.38);
-  background: rgba(0, 0, 13, 0.4);
-}
-.infowindow_box .infowindow_title {
-  font-size: 0.875rem;
-  font-weight: 500;
-  min-height: 1.375rem;
-  line-height: 1.375rem;
-  white-space: nowrap;
-  color: #ffffff;
-}
-.infowindow_box .infowindow_content {
-  width: 0;
-  height: 0;
-  overflow: hidden;
-  font-size: 0.75rem;
-}
-.infowindow_box .infowindow_content.map p {
-  font-size: 0.8125rem;
-  font-weight: 400;
-  color: var(--white-w_60);
-  line-height: 1.063rem;
-}
-.infowindow_box:hover:not(.with_marker), .infowindow_box.on, .infowindow_box:focus:not(.with_marker) {
-  width: 10rem;
-  padding: 0.5rem 0.75rem 0.75rem;
-  border: 0.063rem solid var(--primary-pri_40);
-}
-.infowindow_box:hover:not(.with_marker) .infowindow_title, .infowindow_box.on .infowindow_title, .infowindow_box:focus:not(.with_marker) .infowindow_title {
-  font-size: 0.875rem;
-  font-weight: 500;
-}
-.infowindow_box:hover:not(.with_marker) .infowindow_content, .infowindow_box.on .infowindow_content, .infowindow_box:focus:not(.with_marker) .infowindow_content {
-  width: auto;
-  height: auto;
-  padding-top: 0.5rem;
-}
-.infowindow_box.with_marker {
-  position: absolute;
-}
-
 .scroll_bar {
   background-color: var(--white-w_40);
 }
@@ -8624,92 +8383,6 @@ header.two_line {
   background: var(--white-w_20);
 }
 
-.area_group {
-  width: 4.125rem;
-  height: 1.125rem;
-  border-radius: 3.75rem;
-  border: 0.125rem solid var(--primary-pri_100);
-  background: var(--primary-pri_20);
-}
-.area_group.hover, .area_group:hover:not(.large):not(.disabled):not(.selected) {
-  cursor: pointer;
-  border: 0.125rem solid var(--primary-pri_100);
-  background: var(--group-icon-selected);
-}
-.area_group.selected {
-  border: 0.125rem solid rgb(245, 213, 49);
-  background: rgba(255, 224, 67, 0.2);
-}
-.area_group.disabled {
-  cursor: default;
-  border: 0.125rem solid var(--white-w_40);
-  background: var(--white-w_20);
-}
-.area_group.no00 {
-  transform: rotate(-20deg);
-}
-.area_group.no1 {
-  position: absolute;
-  transform: rotate(-20deg);
-  top: 0;
-  bottom: 0;
-  left: 4.375rem;
-  right: 0;
-}
-.area_group.no2 {
-  position: absolute;
-  transform: rotate(-20deg);
-  top: 2.313rem;
-  bottom: 3.75rem;
-  left: 4.375rem;
-  right: 0;
-}
-.area_group.no3 {
-  position: absolute;
-  transform: rotate(20deg);
-  top: 2.813rem;
-  bottom: 0;
-  left: 1.875rem;
-  right: 0.625rem;
-}
-.area_group.no4 {
-  position: absolute;
-  transform: rotate(20deg);
-  top: 4.688rem;
-  bottom: 0;
-  left: 2.5rem;
-  right: 0;
-}
-.area_group.no5 {
-  position: absolute;
-  transform: rotate(20deg);
-  top: 6.25rem;
-  bottom: 0;
-  left: 2rem;
-  right: 0;
-}
-.area_group.no6 {
-  position: absolute;
-  transform: rotate(20deg);
-  top: 7.5rem;
-  bottom: 0;
-  left: 1.563rem;
-  right: 0;
-}
-.area_group.no7 {
-  position: absolute;
-  transform: rotate(-5deg);
-  top: 8.75rem;
-  bottom: 0;
-  left: 1.25rem;
-  right: 0;
-}
-.area_group.large {
-  width: auto;
-  height: 3.5rem;
-  padding: 0.25rem;
-}
-
 .state_box {
   display: flex;
   align-items: center;
@@ -8733,4 +8406,146 @@ header.two_line {
   bottom: 0;
   left: 1.875rem;
   right: 0;
+}
+
+.aside {
+  position: fixed;
+  left: 1rem;
+  top: 5.5rem;
+  width: 13.75rem;
+  height: calc(100% - 6.5rem);
+  max-height: 54rem;
+  background: #fff;
+  border-radius: 10px;
+}
+.aside.respon {
+  width: 64px;
+  width: 4rem;
+}
+.aside.respon .menu_line .menu_icon {
+  margin: 0px;
+}
+.aside.respon .menu_line .menu_tlt {
+  display: none;
+}
+.aside.animate {
+  animation: in-aside 1s ease-in-out !important;
+}
+
+.aside_wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.aside_wrap .aside_arrow {
+  position: absolute;
+  right: -1rem;
+  top: 0.5rem;
+  z-index: 10;
+}
+
+.aside_arrow {
+  width: 33px;
+  width: 2rem;
+  height: 33px;
+  height: 2rem;
+  background: #fff;
+  border-radius: 100%;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+  transition: 0.2s all;
+  cursor: pointer;
+}
+.aside_arrow:hover {
+  opacity: 0.8;
+}
+.aside_arrow .arr_icon_on {
+  display: none;
+}
+.aside_arrow.on .arr_icon {
+  display: none;
+}
+.aside_arrow.on .arr_icon_on {
+  display: block;
+}
+
+.arrow_in {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.aside_nav {
+  width: 100%;
+  overflow: hidden;
+}
+
+.aside_nav li a {
+  display: block;
+}
+
+.Dash_body {
+  background-color: #F0F0F2;
+  width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  padding: 1rem;
+  padding-top: 5.5rem;
+  padding-left: 16.5625rem;
+}
+
+.Dash_body.respon {
+  padding-left: 112px;
+  padding-left: 7rem;
+}
+
+.menu_line {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 56px;
+  padding: 0px 16px;
+  border-left: 4px solid #fff;
+  transition: 0.2s all;
+}
+.menu_line .menu_icon {
+  margin: 0px 10px 0px 0px;
+}
+.menu_line .menu_tlt {
+  padding: 2px 0px 0px 0px;
+}
+.menu_line:hover {
+  background-color: #E4F6F3;
+  border-left: 4px solid #E4F6F3;
+}
+.menu_line:hover .mn_icon {
+  display: none;
+}
+.menu_line:hover .mn_icon_on {
+  display: block;
+}
+.menu_line:hover .menu_tlt {
+  color: #00A388;
+}
+.menu_line.on {
+  background-color: #E4F6F3;
+  border-left: 4px solid #00B295;
+}
+.menu_line.on .mn_icon {
+  display: none;
+}
+.menu_line.on .mn_icon_on {
+  display: block;
+}
+.menu_line.on .menu_tlt {
+  color: #00A388;
+}
+
+.mn_icon {
+  opacity: 0.2;
+}
+
+.mn_icon_on {
+  display: none;
 }
\ No newline at end of file
diff --git a/assets/css/guide.scss b/assets/css/guide.scss
index c8a33cd..48f1484 100644
--- a/assets/css/guide.scss
+++ b/assets/css/guide.scss
@@ -851,9 +851,9 @@ button {
 .icon_ghost {
     background: transparent;
 }
-
+.btn_xl {height: 48px; font-weight: 700; font-size: 16px; letter-spacing: 0.031rem;}
 .btn_l {height: 40px; font-weight: 700; font-size: 16px; letter-spacing: 0.031rem;}
-.btn_m {height: 32px; font-weight: 700; font-size: 14px; letter-spacing: 0.031rem;}
+.btn_m {height: 32px; font-weight: 700; font-size: 14px;}
 .btn_s {height: 28px; width: auto; padding: 10px 8px;}
 .btn_ms {height: 1.75rem; width: auto; padding: 0.1rem 0.5rem 0;}
 .btn_ss {height: 1.5rem; font-size: 0.75rem; width: auto; padding: 0.1rem 0.75rem 0;}
@@ -1374,7 +1374,7 @@ button {
 
 .put_zone{
     position: relative;
-    width: 100%;
+    // width: 100%;
     .wrput{
         width: 100%;
         &.large{
@@ -1397,6 +1397,15 @@ button {
             display: flex;
         }
     }
+    .timer {
+        position: absolute;
+        top: 17px;
+        right: 16px;
+        margin-right: auto;
+        color: rgba(255, 255, 255, 0.40);
+        font-size: 12px;
+        font-weight: 400;
+    }
     .put_see{
         top: 0.25rem;
         display: flex;
@@ -1414,84 +1423,43 @@ button {
     }
 }
 .wrput {
-    @include fs_13_regular;
-    width: 20rem;
-    height: 1.75rem;
-    background-color: var(--more-bright-wh_12-to-6);
-    border: 0.063rem solid rgba(255, 255, 255, 0);
-    border-radius: 0.125rem;
-    color: var(--white-w_87-sec);
+    @include fs_16_regular;
+    width: 200px;
+    background-color: transparent;
+    border: 1px solid var(--alpha-bk-to-whbk-20);
+    border-radius: 4px;
+    color: rgba(255, 255, 255, 0.40);
     line-height: 1;
-    letter-spacing: 0.031rem;
-    padding: 0 0.5rem;
-    &.line{
-        background-color: transparent;
-        border: 0.063rem solid var(--white-w_40);
-    }
-    &.on, &:focus:not(.read_only):not(.read_error):not(.read_normal):not(.read_success){
-        border: 0.063rem solid var(--primary-pri_100) !important;
-        outline: 0.188rem solid var(--primary-pri_20);
+    letter-spacing: 0.5px;
+    padding: 0 12px 0 16px;
+    ::placeholder {
+        color: var(--alpha-bk-to-whbk-40) !important;
     }
-    &.success{
-        padding:0 2rem 0 1rem;
-    }
-    &.success + .put_check{
-        display: flex;
-    }
-    &.error{
-        border: 0.063rem solid #D60000;
-        outline: none;
+    &.on, &:focus:not(.disabled) {
+        border: 1px solid var(--PRI) !important;
+        color: var(--alpha-bk-to-whbk-87);
+        // outline: 1px solid var(--PRI);
     }
-    &.etc{
+    &.large{
         width: 100%;
-        height: 1.75rem;
-        padding: 0 0.875rem;
-    }
-    &.usage{
-        color: #00B295;
+        height: 48px;
     }
-    &.large{
+    &.medium{
         @include fs_14_regular;
         width: 100%;
-        height: 2.5rem;
-        padding: 0 1rem;
-        &.pass{
-            padding: 0 2.5rem 0 1rem;
-        }
-    }
-    &.pass{
-        padding: 0 2.25rem 0 0.5rem;
-    }
-    &.read_only{
-        background: var(--more-bright-wh_12-to-6);
-        border: 0.063rem solid var(--white-w_20);
-        outline: none;
-    }
-    &.read_light{
-        background: var(--primary-pri_12);
-        border: 0.063rem solid var(--primary-pri_100);
-        outline: none;
-        color: var(--primary-pri_100);
-    }
-    &.read_error{
-        background: rgba(219, 0, 0, 0.08);
-        border: 0.063rem solid #D60000;
-        outline: none;
-        color: $bg_error;
+        height: 40px;
+        padding: 0 8px 0 12px;
     }
-    &.read_normal{
-        background: rgba(0, 104, 230, 0.20);
-        border: 0.063rem solid #0068E6;
-        outline: none;
-        color: #338FFF;
+    &.small{
+        @include fs_14_regular;
+        width: 100%;
+        height: 28px;
+        padding: 0 8px 0 12px;
     }
-    &.read_success {
-        background: rgba(0, 189, 120, 0.1);
-        border: 0.063rem solid #00BD78;
-        outline: none;
-        color: #00BD78;
+    &.disabled{
+        border: 1px solid var(--alpha-bk-to-whbk-20);
+        background: var(--alpha-bk-to-whbk-20);
     }
-    &.text {color: $fc_white}
 }
 .sp_name{
     @include fs_13_regular;
@@ -1764,7 +1732,7 @@ button {
     }
 }
 .login_input{
-    width: 20rem;
+    width: 320px;
 }
 .save_group{
 	@include dflx_ac_jbet;
@@ -3302,13 +3270,14 @@ header{
 	left: 0;
 	top: 0;
 	width: 100%;
-	height: 2.5rem;
+	height: 48px;
 	z-index: 200;
     background-color: var(--bg_01_80);
-    border-bottom: 0.063rem solid var(--line-wh_20-to-100);
+   
     &.two_line {
         height: 5rem;
         background-color: var(--bg_01_80);
+        border-bottom: 0.063rem solid var(--line-wh_20-to-100);
     }
 }   
 .header_in{
@@ -3327,8 +3296,8 @@ header{
 }
 .header_left{
     @include dflx_ac;
-    column-gap: 1.875rem;
-    padding:0 1rem 0 0;
+    column-gap: 16px;
+    padding:0 16px 0 0;
 }
 .header_logo{
 	@include dflx_ac;
@@ -3336,8 +3305,9 @@ header{
         @include dflx_ac;
 	}
 }
-.logo_hd_uniplus{
-    width: 9.125rem;
+.logo_hd_kisa{
+    width: 96px;
+    margin-bottom: 8px;
 }
 .sp_logo_uniplus{
     display: block;
@@ -3763,123 +3733,29 @@ header{
     }
 }
 .label{
-    @include fs_11_regular;
+    color: var(--alpha-bk-to-whbk-87);
+    text-align: center;
+    font-size: 14px;
+    font-weight: 500;
+    padding: 8px 12px;
+    height: 28px;
     @include dflx_ac_jcent;
-    min-width: 3.125rem;
-    height: 1rem;
-    padding:0.1rem 0.25rem 0;
+    border-radius: 50px;
+    padding: 8px 12px;
     overflow: hidden;
-    background-color: $ui_blue;
-    border-radius: 0.125rem;
-    color: #fff;
+    background-color: var(--alpha-bk-to-whbk-10);
     word-break: keep-all;
-    &.morning{
-        background-color: #55BBFF;
-    }
-    &.afternoon{
-        background-color: #1BABFF;
-    }
-    &.daytime{
-        background-color: #008DFF;
-    }
-    &.night{
-        background-color: $ui_blue;
-    }
-    &.latenight{
-        background-color: #174BCC;
-    }
-    &.etc{
-        background-color: rgba(255, 255, 255, 0.3);
-    }
-    &.cross{
-        background-color: rgba(39, 212, 255, 0.8);
-    }
-    &.construct{
-        background-color: $fc_purple;
-    }
-    &.emergency{
-        background-color: #6548F5;
-    }
-}
-.gr_label{
-    @include dflx_ac;
-    margin: 0.5rem 0;
-    .word{
-        @include fs_11_regular;
-        color: var(--white-w_87-sec);
-        margin: 0 0 0 0.375rem;
-        line-height: 1.1;
-    }
-}
-
-
-// lmw 작업
-// label
-.label_tag {
-    @include border_radius02;
-    display: inline-block;
-  //  min-width: 2.5rem;
-    min-height: 1.125rem;
-    padding: 0 0.25rem;
-    line-height: 1.125rem;
-    text-align: center;
-    color: var(--white-w_100);
-    &.ellipse {
-        @include dflx_ac_jcent;
-        @include border_radius50;
-        @include numberDefault($width: 2.25rem, $height: 2.25rem);
-        min-width: auto;
-    }
-    &.box{
-        padding: 0.125rem 0.25rem;
-        min-width: 1.938rem
-    }
-    &.long {
-        width: 3.5rem;
-    }
-    &.card {
-        padding: 0 0.625rem;
-        min-height: 1rem !important;
-        line-height: 1rem;
-    }
-    &.small {
-        min-width: 3.063rem;
-    }
-    &.x_small {
-        padding: 0.125rem 0;
-        min-width: 1.813rem;
-    }
-    &.main_label {
-        background: var(--white-w_30)
-    }
-    &.main_info {
-        background: var(--white-w_30)
-    }
-    &.grey {
-        background: var(--white-w_40);
-    }
 }
-.number_default {
-    @include dflx_ac_jcent;
-    @include numberDefault($width: 1.5rem, $height: 1.5rem);
-    @include border_radius02;
-    &.outline {
-        background: var(--white-w_20);
-        border: 0.063rem solid var(--white-w_40-sec);
-        color: $fc_default;
-    }
-    &.bg_blue {
-        background-color: #0068E6;
-        color: #FFF;
-    }
-    &.primary {
-        color: var(--primary-pri_100);
-        background-color: var(--bg_02_80);
-    }
+.login_txt {
+    color: var(--alpha-bk-to-whbk-100);
+    font-size: 32px;
+    font-weight: 700;
 }
-.dashed_box {
-    @include border_radius05;
-    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23FFFFFF' opacity='0.2' stroke-width='4' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
+.num_txt {
+    color: var(--alpha-bk-to-whbk-60);
+    font-size: 16px;
+    font-weight: 700;
+    margin-top: 20px
 }
 .preview_box {
     @include dflx_ac_jcent;
@@ -5313,105 +5189,10 @@ header{
         padding: 0 0;
     }
 }
-// map
-.marker_numbering_text {
-    transform: translate(-0, 0.313rem);
-    color: var(--primary-pri_100)
-}
-.marker_layer {
-    @include border_radius50;
-    background: rgba($color: $fc_error, $alpha: .4);
-}
-.route_line {
-    @include border_radius10;
-}
-.marker_departure {
-    @include border_radius50;
-    border: 0.188rem solid var(--primary-pri_100);
-    &.blue {border: 0.188rem solid #0068E6}
-    &.purple {border: 0.188rem solid #8972FF}
-    &.red {border: 0.188rem solid #D60000}
-}
-.pass_car {
-    transform: rotate(255deg) translate(6.688rem, -5.313rem);
-}
-.pass_departure {
-    transform: translate(9.063rem, 0.688rem);
-}
-.pass_arrival {
-    transform: translate(-2.625rem, -1.875rem);
-}
-.pass_departure_marker {
-    transform: translate(7.813rem, 1.063rem);
-}
-.pass_arrival_marker {
-    transform: translate(-1.125rem, -2.813rem);
-}
-.cluster_count {
-    @include backFilter;
-    @include fs_14_medium;
-    position: absolute;     
-    top: -0.938rem;
-    left: 1.125rem;
-    height: 1.5rem;
-    padding: 0 0.5rem;
-    border: 0.063rem solid var(--white-w_40);
-    -webkit-border-radius: 1.5rem;
-    -moz-border-radius: 1.5rem;
-    border-radius: 1.5rem;
-    background: var(--bg_01_80);
-    line-height: 1.5rem;
-}
-.infowindow_box {
-    @include backFilter;
-    @include border_radius02;
-    width: auto;
-    padding: 0 0.5rem;
-    cursor: pointer;
-    border: 0.063rem solid $bg_grey38;
-    background: rgba(0, 0, 13, 0.4);
-    .infowindow_title {
-        @include fs_14_medium;
-        min-height: 1.375rem;
-        line-height: 1.375rem;
-        white-space: nowrap;
-        color: $fc_white;
-    }
-    .infowindow_content {
-        width: 0;
-        height: 0;
-        overflow: hidden;
-        font-size: 0.75rem;
-        &.map{
-            p{
-                @include fs_13_regular;
-                color: var(--white-w_60);
-                line-height: 1.063rem;
-            }
-        }
-    }
-
-    &:hover:not(.with_marker), &.on, &:focus:not(.with_marker) {
-        width: 10rem;
-        padding: 0.5rem 0.75rem 0.75rem;
-        border: 0.063rem solid var(--primary-pri_40);
-        .infowindow_title {
-            @include fs_14_medium;
-        }
-        .infowindow_content {
-            width: auto;
-            height: auto;
-            padding-top: 0.5rem;
-        }
-    }
-    &.with_marker {
-        position: absolute;
-    }
-}
 .scroll_bar{
     background-color: var(--white-w_40);
 }
-.tooltip_label, .infowindow_box, .legend_label  {    
+.tooltip_label, .infowindow_box, .legend_label  {
     &.top {
         top: auto !important;
         left: 50%;
@@ -6537,91 +6318,6 @@ header{
         background: var(--white-w_20);
     }
 }
-.area_group {
-    width: 4.125rem;
-    height: 1.125rem;
-    border-radius: 3.75rem;
-    border: 0.125rem solid var(--primary-pri_100);
-    background: var(--primary-pri_20);
-    &.hover, &:hover:not(.large):not(.disabled):not(.selected) {
-        cursor: pointer;
-        border: 0.125rem solid var(--primary-pri_100);
-        background: var(--group-icon-selected);
-    }
-    &.selected {
-        border: 0.125rem solid rgba(245, 213, 49, 1);
-        background: rgba(255, 224, 67, 0.2);
-    }
-    &.disabled {
-        cursor: default;
-        border: 0.125rem solid var(--white-w_40);
-        background: var(--white-w_20);
-    }
-    &.no00 {
-        transform: rotate(-20deg);
-    }
-    &.no1 {
-        position: absolute;
-        transform: rotate(-20deg);
-        top: 0;
-        bottom: 0;
-        left: 4.375rem;
-        right: 0;
-    }
-    &.no2 {
-        position: absolute;
-        transform: rotate(-20deg);
-        top: 2.313rem;
-        bottom: 3.75rem;
-        left: 4.375rem;
-        right: 0;
-    }
-    &.no3{
-        position: absolute;
-        transform: rotate(20deg);
-        top: 2.813rem;
-        bottom: 0;
-        left: 1.875rem;
-        right: 0.625rem;
-    }
-    &.no4{
-        position: absolute;
-        transform: rotate(20deg);
-        top: 4.688rem;
-        bottom: 0;
-        left: 2.5rem;
-        right: 0;
-    }
-    &.no5{
-        position: absolute;
-        transform: rotate(20deg);
-        top: 6.25rem;
-        bottom: 0;
-        left: 2rem;
-        right: 0;
-    }
-    &.no6{
-        position: absolute;
-        transform: rotate(20deg);
-        top: 7.5rem;
-        bottom: 0;
-        left: 1.563rem;
-        right: 0;
-    }
-    &.no7{
-        position: absolute;
-        transform: rotate(-5deg);
-        top: 8.75rem;
-        bottom: 0;
-        left: 1.25rem;
-        right: 0;
-    }
-    &.large {
-        width: auto;
-        height: 3.5rem;
-        padding: 0.25rem;
-    }
-}
 .state_box{
     @include dflx_ac_jcent;
     width: 3rem;
@@ -6641,3 +6337,141 @@ header{
     left: 1.875rem;
     right: 0;
 }
+
+
+// netz
+
+.aside{
+	position: fixed;
+	left: 1rem;
+	top: 5.5rem;
+	width: 13.75rem;
+	height: calc(100% - 6.5rem);
+	max-height: 54rem;
+	background: #fff;
+	border-radius: 10px;
+	&.respon{
+		width: 64px;
+		width: 4rem;
+		.menu_line{
+			.menu_icon {
+				margin: 0px;
+			}
+			.menu_tlt {
+				display: none;
+			}
+		}
+	}
+	&.animate{
+		animation: in-aside 1s ease-in-out !important;
+	}
+}
+.aside_wrap{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.aside_arrow{
+		position: absolute;
+		right: -1rem;
+		top: 0.5rem;
+		z-index: 10;
+	}
+}
+.aside_arrow {
+	width: 33px;
+	width: 2rem;
+	height: 33px;
+	height: 2rem;
+	background: #fff;
+	border-radius: 100%;
+	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+	transition: 0.2s all;
+	cursor: pointer;
+	&:hover {
+		opacity: 0.8;
+	}
+	.arr_icon_on{
+		display: none;
+	}
+	&.on{
+		.arr_icon{
+			display: none;
+		}
+		.arr_icon_on{
+			display: block;
+		}
+	}
+}
+.arrow_in {
+	@include dflx_ac_jcent;
+	width: 100%;
+	height: 100%;
+}
+.aside_nav{
+	width: 100%;
+	overflow: hidden;
+}
+.aside_nav li a{
+	display: block;
+}
+.Dash_body {
+    background-color: #F0F0F2;
+    width: 100%;
+    min-height: 100%;
+    overflow: hidden;
+    padding: 1rem;
+    padding-top: 5.5rem;
+    padding-left: 16.5625rem;
+}
+.Dash_body.respon {
+    padding-left: 112px;
+    padding-left: 7rem;
+}
+// menu
+
+.menu_line{
+	@include dflx_ac;
+	width: 100%;
+	height: 56px;
+	padding: 0px 16px;
+	border-left: 4px solid #fff;
+	transition: 0.2s all;
+	.menu_icon{
+		margin: 0px 10px 0px 0px;
+	}
+	.menu_tlt{
+		padding:2px 0px 0px 0px;
+	}
+	&:hover{
+		background-color: #E4F6F3;
+		border-left: 4px solid #E4F6F3;
+		.mn_icon{
+			display: none;
+		}
+		.mn_icon_on{
+			display: block;
+		}
+		.menu_tlt{
+			color: #00A388;
+		}
+	}
+	&.on{
+		background-color: #E4F6F3;
+		border-left: 4px solid #00B295;
+		.mn_icon{
+			display: none;
+		}
+		.mn_icon_on{
+			display: block;
+		}
+		.menu_tlt{
+			color: #00A388;
+		}
+	}
+}
+.mn_icon{
+	opacity: 0.2;
+}
+.mn_icon_on{
+	display: none;
+}
\ No newline at end of file
diff --git a/assets/css/index.css b/assets/css/index.css
new file mode 100644
index 0000000..5e677a3
--- /dev/null
+++ b/assets/css/index.css
@@ -0,0 +1,8 @@
+@charset "utf-8";
+@import "reset.css";
+@import "font.css";
+@import "helper.css";
+@import "layout.css";
+@import "air-datepicker.css";
+@import "guide.css";
+@import "template.css";
\ No newline at end of file
diff --git a/assets/css/layout.css b/assets/css/layout.css
index 6536356..9801f90 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -43,29 +43,12 @@
   --line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40);
   --line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40);
   --icon-pri_20-to-100: rgba(34, 212, 255, 0.20);
-  --more-bright-wh_16-to-6: rgba(255, 255, 255, 0.16);
-  --more-bright-wh_12-to-6: rgba(255, 255, 255, 0.12);
-  --more-visible-wh_20-to-12: rgba(255, 255, 255, 0.2);
-  --more-visible-wh_6-to-100: rgba(255, 255, 255, 0.06);
-  --more-visible-wh_6-to-60: rgba(255, 255, 255, 0.06);
-  --more-visible-wh_6-to-bk: rgba(255, 255, 255, 0.06);
-  --more-visible-wh_60-to-12: rgba(255, 255, 255, 0.6);
-  --more-visible-wh_60-to-100: rgba(255, 255, 255, 0.6);
-  --more-visible-wh_12-to-6: rgba(255, 255, 255, 0.12);
-  --more-visible-wh_16-to-6: rgba(255, 255, 255, 0.16);
-  --more-visible-wh_20-to-12: rgba(255, 255, 255, 0.2);
   --primary-to-grayscale-to-bk: #27D4FF;
   --more-bright-wh_6-to-60: rgba(255, 255, 255, 0.06);
   --white-w_6: rgba(255, 255, 255, 0.06);
   --line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40);
   --etc-bg: #04091A;
   --etc-popup_tit: rgba(39, 212, 255, 0.60);
-  --hero-notification_01: #000;
-  --hero-notification_02: rgba(0, 0, 0, 0.4);
-  --hero-notification_03: rgba(0, 0, 0, 0.4);
-  --hero-notification-border-top: rgba(39, 212, 255, 0.00);
-  --hero-notification-border-bottom: rgba(39, 212, 255, 0.00);
-  --hero-border: rgba(39, 212, 255, 1);
   --background-blur_0260: rgba(56, 61, 82, 0.60);
   --point-error: #D60000;
   --point-error-10: rgba(219, 0, 0, 0.08);
@@ -87,6 +70,16 @@
   --etc-b_text2: #338FFF;
   --PRI: #84C01D;
   --bg_body: #030914;
+  --alpha-bk-to-whbk-20: rgba(255, 255, 255, 0.20);
+  --alpha-wh-to-bkwh-60: rgba(0, 0, 0, 0.60);
+  --alpha-wh-to-bkwh-100: #000;
+  --alpha-white-w_100: ;
+  --wh-12: rgba(255, 255, 255, 0.12);
+  --alpha-bk-to-whbk-10: rgba(255, 255, 255, 0.10);
+  --alpha-bk-to-whbk-87: rgba(255, 255, 255, 0.87);
+  --alpha-bk-to-whbk-100: rgba(255, 255, 255, 0.87);
+  --alpha-bk-to-whbk-60: rgba(255, 255, 255, 0.60);
+  --alpha-bk-to-whbk-40: rgba(255, 255, 255, 0.40);
 }
 
 :root[data-theme=light] {
@@ -125,36 +118,11 @@
   --box1_border: #ffffff;
   --title-color: #0068E6;
   --bg_01_80: rgba(245, 246, 250, 0.90);
-  --line-wh_12-to-40: rgba(255, 255, 255, 0.4);
-  --line-wh_20-to-100: #ffffff;
-  --line-wh_30-to-60: rgba(255, 255, 255, 0.6);
-  --line-wh_12-to-100: #ffffff;
-  --line-pri_40-to-wh_40: rgba(255, 255, 255, 0.4);
-  --line-pri_40-to-bk_40: rgba(0, 0, 0, 0.4);
   --icon-pri_20-to-100: #0067E6;
-  --more-bright-wh_16-to-6: rgba(0, 0, 0, 0.06);
-  --more-bright-wh_12-to-6: rgba(0, 0, 0, 0.06);
-  --more-visible-wh_20-to-12: rgba(0, 0, 0, 0.12);
-  --more-visible-wh_6-to-100: #ffffff;
-  --more-visible-wh_6-to-60: rgba(255, 255, 255, 0.6);
-  --more-visible-wh_6-to-bk: #000;
-  --more-visible-wh_60-to-12: rgba(0, 0, 0, 0.12);
-  --more-visible-wh_60-to-100: #000;
-  --more-visible-wh_12-to-6: rgba(0, 0, 0, 0.06);
-  --more-visible-wh_16-to-6: rgba(0, 0, 0, 0.06);
-  --more-visible-wh_20-to-12: rgba(0, 0, 0, 0.12);
-  --primary-to-grayscale-to-bk: #000;
-  --more-bright-wh_6-to-60: rgba(255, 255, 255, 0.6);
   --white-w_6: rgba(0, 0, 0, 0.06);
   --line-pri_40-to-wh_100: #ffffff;
   --etc-bg: #ffffff;
   --etc-popup_tit: rgba(0, 104, 230, 0.80);
-  --hero-notification_01: rgba(255, 255, 255, 0);
-  --hero-notification_02: rgba(255, 255, 255, 0.6);
-  --hero-notification_03: rgba(255, 255, 255, 0.8);
-  --hero-notification-border-top: rgba(0, 104, 230, 0.00);
-  --hero-notification-border-bottom: rgba(0, 104, 230, 0.00);
-  --hero-border: rgba(0, 104, 230, 0.80);
   --background-blur_0260: rgba(56, 61, 82, 0.60);
   --point-error: #D60000;
   --point-error-10: rgba(219, 0, 0, 0.08);
@@ -166,14 +134,22 @@
   --icon-icon-selected: #ffffff;
   --group-icon-selected: rgba(51, 143, 255, 0.40);
   --map-ver2-hover: rgba(51, 143, 255, 0.4);
-  --background-blur_02_60: rgba(55, 61, 82, 0.60);
-  --background-blur_01_20: rgba(245, 246, 250, 0.90);
   --navigation-bg: #E1E2E5;
   --etc-FNB:rgba(245, 246, 250, 0.90);
   --black-bk_100: #ffffff;
   --etc-b_text: #139DF2;
   --PRI: #87C718;
   --bg_body: #030914;
+  --alpha-bk-to-whbk-20: rgba(0, 0, 0, 0.20);
+  --alpha-wh-to-bkwh-60: rgba(255, 255, 255, 0.20);
+  --alpha-wh-to-bkwh-100: ;
+  --alpha-white-w_100: #FFF;
+  --wh-12: ;
+  --alpha-bk-to-whbk-10: rgba(0, 0, 0, 0.10);
+  --alpha-bk-to-whbk-87: rgba(0, 0, 0, 0.87);
+  --alpha-bk-to-whbk-100: #000;
+  --alpha-bk-to-whbk-60: rgba(0, 0, 0, 0.60);
+  --alpha-bk-to-whbk-40: rgba(0, 0, 0, 0.40);
 }
 
 /*mode button*/
@@ -189,7 +165,16 @@
 }
 
 html[data-theme=light] .lightmode > .inner {
-  background-color: rgba(0, 0, 0, 0.25);
+  background-color: var(--PRI);
+}
+
+.outer {
+  padding: 4px;
+  border-radius: 50px;
+  background-color: var(--wh-12);
+  display: flex;
+  gap: 12px;
+  width: 100%;
 }
 
 .lightmode label {
@@ -197,13 +182,13 @@ html[data-theme=light] .lightmode > .inner {
 }
 
 .lightmode label:first-of-type {
-  padding: 0.313rem 0.313rem 0.313rem 0.625rem;
-  border-radius: 50% 0 0 50%;
+  padding: 2px;
+  border-radius: 50px;
 }
 
 .lightmode label:last-of-type {
-  padding: 0.313rem 0.625rem 0.313rem 0.313rem;
-  border-radius: 0 50% 50% 0;
+  padding: 2px;
+  border-radius: 50px;
 }
 
 .lightmode i {
@@ -220,6 +205,26 @@ html[data-theme=light] .lightmode > .inner {
   transition: all 0.35s ease-in-out;
 }
 
+.circle_dark {
+  background: var(--alpha-wh-to-bkwh-100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  width: 30px;
+  padding: 2px;
+}
+
+.circle_light {
+  background: var(--alpha-white-w_100);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 30px;
+  width: 30px;
+  padding: 2px;
+}
+
 /**/
 /*Contents*/
 .guide_back {
@@ -439,39 +444,6 @@ footer {
   z-index: 100;
 }
 
-.box_line.left {
-  position: absolute;
-  top: 3.5rem;
-  left: 1.25rem;
-  z-index: 100;
-}
-.box_line.right {
-  position: absolute;
-  top: 3.5rem;
-  right: 1.25rem;
-  z-index: 100;
-}
-
-.infowindow_box.main {
-  top: auto;
-  bottom: calc(100% + 0.125rem) !important;
-  left: 50%;
-  transform: translate(-50%, 0);
-  position: absolute;
-  background: var(--bg_01);
-  border: 0.063rem solid var(--line-pri_40-to-wh_100) !important;
-}
-.infowindow_box.main .infowindow_title {
-  color: var(--white-w_87-sec);
-}
-
-.label_tag.main_label {
-  background: var(--white-w_30);
-}
-.label_tag.main_info {
-  background: var(--white-w_30);
-}
-
 .scroll.sc_y.table {
   height: 8.25rem;
   padding: 0;
@@ -481,11 +453,6 @@ footer {
   margin-right: 0.5rem;
 }
 
-.accordion_paragraph.signal {
-  padding: 0 0.75rem 1.25rem 1.25rem;
-  height: 16.75rem;
-}
-
 .footer_in {
   display: flex;
   align-items: flex-start;
@@ -1213,19 +1180,6 @@ footer {
   color: var(--white-w_100-sec) !important;
 }
 
-@media screen and (min-width: 2400px) {
-  body, html {
-    font-size: 1.2rem;
-  }
-  .indi_vert432 {
-    height: auto;
-  }
-}
-@media screen and (min-width: 3800px) {
-  body, html {
-    font-size: 1.7rem;
-  }
-}
 /* html data-theme */
 html[data-theme=light] .sp_logo_uniplus {
   background: url("../images/logo_uniplus_light.svg") no-repeat left center;
@@ -1379,24 +1333,6 @@ html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.pop
 html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover.selected .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:hover:not(.legend) .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:focus .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:active .img_on {
   filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
 }
-html[data-theme=light] .btn_toggle_icon .circle_grey28.icon .img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .btn_toggle_icon .circle_grey28.icon .img_on {
-  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
-}
-html[data-theme=light] .btn_toggle_icon .circle_grey32.line .img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .btn_toggle_icon .circle_grey32.line .img_on {
-  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
-}
-html[data-theme=light] .btn_toggle_icon.selected .img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .btn_toggle_icon.selected .img_on {
-  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
-}
 html[data-theme=light] .btn_file img, html[data-theme=light] .preview_box img {
   filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
 }
@@ -1432,79 +1368,6 @@ html[data-theme=light] .accordion_block div button img {
 html[data-theme=light] .accordion_block.accord_select .accordion_title.on img, html[data-theme=light] .accordion_block.accord_select .accordion_title.hover img, html[data-theme=light] .accordion_block.accord_select .accordion_title:hover img, html[data-theme=light] .accordion_block.accord_select .accordion_title:focus img, html[data-theme=light] .accordion_block.accord_select .accordion_title.selected img {
   filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
 }
-html[data-theme=light] .btn_pagination img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .accordion_title div img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .accordion_title div.on img {
-  filter: brightness(0) saturate(100%) invert(25%) sepia(93%) saturate(1829%) hue-rotate(200deg) brightness(98%) contrast(107%);
-}
-html[data-theme=light] .toggle img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .toggle.on img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .popover_close img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .tree_button button img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .mark_trig_down12 {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-  background: url("../images/triangle_down12.svg") no-repeat center center;
-  background-size: contain;
-}
-html[data-theme=light] .sp_search24 {
-  background: url("../images/search_fff_24_light.svg") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .sp_download20 {
-  background: url("../images/icon_download_20_light.svg") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .sp_cctv20 {
-  background: url("../images/icon_camera_20_light.svg") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .btn_toggle_icon:hover:not(.legend) .sp_cctv20, html[data-theme=light] .btn_toggle_icon:focus .sp_cctv20, html[data-theme=light] .btn_toggle_icon.selected .sp_cctv20 {
-  background: url("../images/icon_camera_sky_20_light.svg") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .sp_x20 {
-  background: url("../images/icon_x_20_light.svg") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .sp_layer24 {
-  background: url("../images/layer_fff_24_light.svg") no-repeat center center;
-  background-size: cover;
-  opacity: 1 !important;
-}
-html[data-theme=light] .icon_ffb:hover .sp_layer24, html[data-theme=light] .icon_ffb.selected .sp_layer24 {
-  background: url("../images/layer_sky_24_light.svg") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .checkbox_type:not(.login) input[type=checkbox]:checked + label:after {
-  background: url(../images/checkbox_accordion_20.svg) center no-repeat;
-}
-html[data-theme=light] .card_box.dark {
-  background: var(--white-w_6);
-}
-html[data-theme=light] .photo_circle img {
-  filter: brightness(0) saturate(100%) invert(70%) sepia(34%) saturate(0%) hue-rotate(73deg) brightness(100%) contrast(97%);
-}
-html[data-theme=light] .tree_button.check button img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .btn_notification img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .profile_box {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
 html[data-theme=light] .action_prev, html[data-theme=light] .action_next {
   filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
 }
@@ -1526,8 +1389,11 @@ html[data-theme=light] .selectbox_arrow img, html[data-theme=light] .selectbox i
 html[data-theme=light] .bt_srch {
   filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
 }
-html[data-theme=light] .logo_hd_uniplus {
-  content: url("../images/gnb_logo_light.svg");
+html[data-theme=light] .hamberger_btn {
+  content: url("../images/hamburger_bk_24.svg");
+}
+html[data-theme=light] .logo_hd_kisa {
+  content: url("../images/logo_light.svg");
 }
 html[data-theme=light] .light_none img {
   display: none;
@@ -1648,20 +1514,8 @@ html[data-theme=light] .main_contents {
   background-size: cover;
   background: url("../images/background_light_img.png") no-repeat center center;
 }
-html[data-theme=light] .main_contents.ver2 {
-  background: url("../images/background_ver2.png") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .main_contents.ver3 {
-  background: url("../images/background_ver3.png") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .main_contents.ver4 {
-  background: url("../images/background_img.png") no-repeat center center;
-  background-size: cover;
-}
-html[data-theme=light] .main_contents.login {
-  background: url("../images/login_background_light.png") no-repeat;
+html[data-theme=light] .main_contents.login_ver1 {
+  background: url("../images/login_light_ver1.png") no-repeat;
 }
 html[data-theme=light] .main_contents.error {
   background: url("../images/error_background_light.png") no-repeat center center;
@@ -1670,32 +1524,8 @@ html[data-theme=light] .main_contents.error2 {
   background: url("../images/error2_background_light.svg") no-repeat center bottom;
   background-size: contain;
 }
-html[data-theme=light] .main_traffic img {
-  content: url("../images/main_traffic_light.svg") no-repeat;
-}
-html[data-theme=light] .signal_body {
-  background-image: url("../images/signal_body_light.png");
-}
-html[data-theme=light] .img_off.marker {
-  content: url("../images/car_accident_light_56.svg");
-}
-html[data-theme=light] .marker_img_selected {
-  content: url("../images/car_accident_selected_light_56.svg");
-}
-html[data-theme=light] .arrow img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .arrow_right_2line img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .chart_cont.record {
-  filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);
-}
-html[data-theme=light] .logo_login {
-  content: url("../images/login_logo_light.svg");
-}
-html[data-theme=light] .wrput.read_success {
-  display: none;
+html[data-theme=light] .login_logo {
+  content: url("../images/logo_light_big.svg");
 }
 html[data-theme=light] .light_none {
   display: none;
diff --git a/assets/css/layout.scss b/assets/css/layout.scss
index 6090ef5..d55e58b 100644
--- a/assets/css/layout.scss
+++ b/assets/css/layout.scss
@@ -46,29 +46,12 @@
     --line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40);
     --line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40);
     --icon-pri_20-to-100: rgba(34, 212, 255, 0.20);
-    --more-bright-wh_16-to-6: #{$bg_grey16};
-    --more-bright-wh_12-to-6: #{$bg_grey12};
-    --more-visible-wh_20-to-12: #{$bg_grey20};
-    --more-visible-wh_6-to-100: #{$bg_grey06};
-    --more-visible-wh_6-to-60: #{$bg_grey06};
-    --more-visible-wh_6-to-bk: #{$bg_grey06};
-    --more-visible-wh_60-to-12: #{$bg_grey60};
-    --more-visible-wh_60-to-100: #{$bg_grey60};
-    --more-visible-wh_12-to-6: #{$bg_grey12};
-    --more-visible-wh_16-to-6: #{$bg_grey16};
-    --more-visible-wh_20-to-12: #{$bg_grey20};
     --primary-to-grayscale-to-bk: #{$ui_sky};
     --more-bright-wh_6-to-60: #{$bg_grey06};
     --white-w_6: #{$bg_grey06};
     --line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40);
     --etc-bg: #04091A;
     --etc-popup_tit: rgba(39, 212, 255, 0.60);
-    --hero-notification_01: #{$bg_black00};
-    --hero-notification_02: #{$bg_black40};
-    --hero-notification_03: #{$bg_black40};
-    --hero-notification-border-top: rgba(39, 212, 255, 0.00);
-    --hero-notification-border-bottom: rgba(39, 212, 255, 0.00);
-    --hero-border : rgba(39, 212, 255, 1);
     --background-blur_0260: rgba(56, 61, 82, 0.60);
     --point-error: #D60000;
     --point-error-10: rgba(219, 0, 0, 0.08);
@@ -92,7 +75,16 @@
     // KISA
     --PRI: #84C01D;
     --bg_body: #030914;
-
+    --alpha-bk-to-whbk-20: rgba(255, 255, 255, 0.20);
+    --alpha-wh-to-bkwh-60: rgba(0, 0, 0, 0.60);
+    --alpha-wh-to-bkwh-100: #000;
+    --alpha-white-w_100: ;
+    --wh-12: rgba(255, 255, 255, 0.12);
+    --alpha-bk-to-whbk-10: rgba(255, 255, 255, 0.10);
+    --alpha-bk-to-whbk-87: rgba(255, 255, 255, 0.87);
+    --alpha-bk-to-whbk-100: rgba(255, 255, 255, 0.87);
+    --alpha-bk-to-whbk-60: rgba(255, 255, 255, 0.60);
+    --alpha-bk-to-whbk-40: rgba(255, 255, 255, 0.40);
 }
 :root[data-theme=light] {
     --bg_02: #{$fc_white};
@@ -130,36 +122,12 @@
     --box1_border: #{$fc_white};
     --title-color: #{$ui_blue_more};
     --bg_01_80: rgba(245, 246, 250, 0.90);
-    --line-wh_12-to-40: #{$bg_grey40};
-    --line-wh_20-to-100: #{$fc_white};
-    --line-wh_30-to-60: #{$bg_grey60};
-    --line-wh_12-to-100: #{$fc_white};
-    --line-pri_40-to-wh_40: #{$bg_grey40};
-    --line-pri_40-to-bk_40: #{$bg_black40};
     --icon-pri_20-to-100 : #0067E6;
-    --more-bright-wh_16-to-6: #{$bg_black06};
-    --more-bright-wh_12-to-6: #{$bg_black06};
-    --more-visible-wh_20-to-12: #{$bg_black12};
-    --more-visible-wh_6-to-100: #{$fc_white};
-    --more-visible-wh_6-to-60: #{$bg_grey60};
-    --more-visible-wh_6-to-bk: #{$bg_black00};
-    --more-visible-wh_60-to-12: #{$bg_black12};
-    --more-visible-wh_60-to-100: #{$bg_black00};
-    --more-visible-wh_12-to-6: #{$bg_black06};
-    --more-visible-wh_16-to-6: #{$bg_black06};
-    --more-visible-wh_20-to-12: #{$bg_black12};
-    --primary-to-grayscale-to-bk: #{$bg_black00};
-    --more-bright-wh_6-to-60 : #{$bg_grey60};
+    
     --white-w_6: #{$bg_black06};
     --line-pri_40-to-wh_100: #{$fc_white};
     --etc-bg: #{$fc_white};
     --etc-popup_tit: rgba(0, 104, 230, 0.80);
-    --hero-notification_01: #{$bg_grey00};
-    --hero-notification_02: #{$bg_grey60};
-    --hero-notification_03: #{$bg_grey80};
-    --hero-notification-border-top: rgba(0, 104, 230, 0.00);
-    --hero-notification-border-bottom: rgba(0, 104, 230, 0.00);
-    --hero-border: rgba(0, 104, 230, 0.80);
     --background-blur_0260: rgba(56, 61, 82, 0.60);
     --point-error: #D60000;
     --point-error-10: rgba(219, 0, 0, 0.08);
@@ -171,8 +139,6 @@
     --icon-icon-selected: #{$fc_white};
     --group-icon-selected: rgba(51, 143, 255, 0.40);
     --map-ver2-hover: #{$fc_normal_more40};
-    --background-blur_02_60: rgba(55, 61, 82, 0.60);
-    --background-blur_01_20: rgba(245, 246, 250, 0.90);
     --navigation-bg: #E1E2E5;
     --etc-FNB:rgba(245, 246, 250, 0.90);
     --black-bk_100: #{$fc_white};
@@ -181,7 +147,16 @@
     // KISA
     --PRI: #87C718;
     --bg_body: #030914;
-
+    --alpha-bk-to-whbk-20: rgba(0, 0, 0, 0.20);
+    --alpha-wh-to-bkwh-60: rgba(255, 255, 255, 0.20);
+    --alpha-wh-to-bkwh-100:  ;
+    --alpha-white-w_100: #FFF;
+    --wh-12: ;
+    --alpha-bk-to-whbk-10: rgba(0, 0, 0, 0.10);
+    --alpha-bk-to-whbk-87: rgba(0, 0, 0, 0.87);
+    --alpha-bk-to-whbk-100: #000;
+    --alpha-bk-to-whbk-60: rgba(0, 0, 0, 0.60);
+    --alpha-bk-to-whbk-40: rgba(0, 0, 0, 0.40);
 }
 /*mode button*/
 .lightmode > .inner{
@@ -195,18 +170,29 @@
     }
 }
 html[data-theme=light] .lightmode > .inner{
-    background-color: rgba(0,0,0,0.25);
+    // background-color: rgba(0,0,0,0.25);
+    background-color: var(--PRI);
+}
+.outer {
+    padding: 4px;
+    border-radius: 50px;
+    background-color: var(--wh-12);
+    display: flex;
+    gap: 12px;
+    width: 100%;
 }
 .lightmode label {
     cursor: pointer;
 }
 .lightmode label:first-of-type{
-    padding: 0.313rem 0.313rem 0.313rem 0.625rem;
-    border-radius: 50% 0 0 50%;
+    padding: 2px;
+    // border-radius: 50% 0 0 50%;
+    border-radius: 50px;
 }
 .lightmode label:last-of-type{
-    padding: 0.313rem 0.625rem 0.313rem 0.313rem;
-    border-radius: 0 50% 50% 0;
+    padding: 2px;
+    // border-radius: 0 50% 50% 0;
+    border-radius: 50px;
 }
 .lightmode i{
     font-size: 1.2em;
@@ -219,6 +205,26 @@ html[data-theme=light] .lightmode > .inner{
     color: rgba(135, 199, 24, 1);
     transition: all 0.35s ease-in-out;
 }
+.circle_dark {
+    // border-radius: 50%;
+    background: var(--alpha-wh-to-bkwh-100);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+    width: 30px;
+    padding: 2px;
+}
+.circle_light {
+    // border-radius: 50%;
+    background: var(--alpha-white-w_100);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 30px;
+    width: 30px;
+    padding: 2px;
+}
 /**/
 
 /*Contents*/
@@ -409,42 +415,6 @@ footer {
         }
     }
 }
-.box_line {
-    &.left {
-        position: absolute;
-        top: 3.5rem;
-        left: 1.25rem;
-        z-index: 100;
-    }
-    &.right {
-        position: absolute;
-        top: 3.5rem;
-        right: 1.25rem;
-        z-index: 100;
-    }
-}
-.infowindow_box {
-    &.main {
-        top: auto;
-        bottom: calc(100% + 0.125rem) !important;
-        left: 50%;
-        transform: translate(-50%, 0);
-        position: absolute;
-        background: var(--bg_01);
-        border: 0.063rem solid var(--line-pri_40-to-wh_100) !important;
-        .infowindow_title {
-            color: var(--white-w_87-sec);
-        }
-    }
-}
-.label_tag {
-    &.main_label {
-        background: var(--white-w_30)
-    }
-    &.main_info {
-        background: var(--white-w_30)
-    }
-}
 // scroll
 .scroll {
     &.sc_y {
@@ -458,13 +428,6 @@ footer {
         }
     }
 }
-// accordion
-.accordion_paragraph {
-    &.signal {
-        padding: 0 0.75rem 1.25rem 1.25rem;
-        height: 16.75rem;
-    }
-}
 .footer_in {
     @include dflx_as_jbet;
     width: 100%;
@@ -1106,21 +1069,7 @@ footer {
 .white_w_87 {color: var(--white-w_87) !important}
 .white_w_bk {color: var(--white-w_87-sec) !important}
 .white_ff_bk {color: var( --white-w_100-sec) !important}
-// 반응형
-@media screen and (min-width: 2400px) {
-    body, html {
-        font-size: 1.2rem;
-    }
-    .indi_vert432{
-        height: auto;
-    }
-}
 
-@media screen and (min-width: 3800px) {
-    body, html {
-        font-size: 1.7rem;
-    }
-}
 
 /* html data-theme */
 html[data-theme=light] {
@@ -1287,21 +1236,6 @@ html[data-theme=light] {
             }
         }
     }
-    // Icon Button 
-    .btn_toggle_icon {
-        .circle_grey28.icon {
-            .img {@include filter_black}
-            .img_on {@include filter_white}
-        }
-        .circle_grey32.line {
-            .img {@include filter_black}
-            .img_on {@include filter_white}
-        }
-        &.selected {
-            .img {@include filter_black}
-            .img_on {@include filter_white}
-        }
-    }
     .btn_file, .preview_box {
         img{@include filter_black}
     }
@@ -1341,106 +1275,6 @@ html[data-theme=light] {
             }
         }
     }
-    // pagination
-    .btn_pagination{
-        img {@include filter_black}
-    }
-    .accordion_title {
-        div{
-            img{@include filter_black;}
-        }
-        div.on{
-            img{
-                filter: brightness(0) saturate(100%) invert(25%) sepia(93%) saturate(1829%) hue-rotate(200deg) brightness(98%) contrast(107%);
-            }
-        }
-    }
-    .toggle {
-        img {@include filter_black}
-        &.on {
-            img {@include filter_blue}
-        }
-    }
-    .popover_close{
-        img {@include filter_black}
-    }
-    .tree_button {
-        button {
-            img {@include filter_blue}
-        }
-    }
-    .mark_trig_down12 {
-        @include filter_black;
-        background: url('../images/triangle_down12.svg') no-repeat center center;
-        background-size: contain;
-    }
-
-    // sp_icon
-    .sp_search24{
-        background: url('../images/search_fff_24_light.svg') no-repeat center center;
-        background-size: cover;
-    }
-    .sp_download20{
-        background: url('../images/icon_download_20_light.svg') no-repeat center center;
-        background-size: cover;
-    }
-    .sp_cctv20{
-        background: url('../images/icon_camera_20_light.svg') no-repeat center center;
-        background-size: cover;
-    }
-    .btn_toggle_icon{
-        &:hover:not(.legend), &:focus, &.selected{
-            .sp_cctv20{
-                background: url('../images/icon_camera_sky_20_light.svg') no-repeat center center;
-                background-size: cover;
-            }
-        }
-    }
-    .sp_x20{
-        background: url('../images/icon_x_20_light.svg') no-repeat center center;
-        background-size: cover;
-    }
-    .sp_layer24{
-        background: url('../images/layer_fff_24_light.svg') no-repeat center center;
-        background-size: cover;
-        opacity: 1 !important;
-    }
-    .icon_ffb{
-        &:hover, &.selected{
-            .sp_layer24{
-                background: url('../images/layer_sky_24_light.svg') no-repeat center center;
-                background-size: cover;
-            }
-        }
-    }
-    .checkbox_type:not(.login) {
-        input[type=checkbox]:checked + label {
-            &:after 
-            {
-                background: url(../images/checkbox_accordion_20.svg) center no-repeat;
-            }
-        }
-    }
-    .card_box{
-        &.dark {background: var(--white-w_6);}
-    }
-    .photo_circle{
-        img{
-            filter: brightness(0) saturate(100%) invert(70%) sepia(34%) saturate(0%) hue-rotate(73deg) brightness(100%) contrast(97%);
-        }
-    }
-    .tree_button.check{
-        button{
-            img {@include filter_blue}
-        }
-    }
-    .btn_notification{
-        img {@include filter_blue}
-    }
-    .profile_box {
-        @include filter_black
-    }
-
     //date picker
     .action_prev, .action_next {
         @include filter_black
@@ -1467,9 +1301,12 @@ html[data-theme=light] {
     .bt_srch{
         @include filter_black
     }
-    // navigation
-    .logo_hd_uniplus{
-        content:  url("../images/gnb_logo_light.svg");
+    // main
+    .hamberger_btn {
+        content:  url("../images/hamburger_bk_24.svg");
+    }
+    .logo_hd_kisa{
+        content: url("../images/logo_light.svg");
     }
     .light_none{
         img{
@@ -1623,26 +1460,15 @@ html[data-theme=light] {
     .upload_btn{
         img{@include filter_black;}
     }
+
     // template
     .main_contents {
         width: 100%;
         height: 100%;
         background-size : cover;
         background: url("../images/background_light_img.png") no-repeat center center;
-        &.ver2 {
-            background: url("../images/background_ver2.png") no-repeat center center;
-            background-size : cover;
-        }
-        &.ver3 {
-            background: url("../images/background_ver3.png") no-repeat center center;
-            background-size : cover;
-        }
-        &.ver4 {
-            background: url("../images/background_img.png") no-repeat center center;
-            background-size : cover;
-        }
-        &.login {
-            background: url("../images/login_background_light.png") no-repeat;
+        &.login_ver1 {
+            background: url("../images/login_light_ver1.png") no-repeat;
         }
         &.error {
             background: url("../images/error_background_light.png") no-repeat center center;
@@ -1652,42 +1478,8 @@ html[data-theme=light] {
             background-size: contain;
         }
     }
-    .main_traffic {
-        img {
-            content: url("../images/main_traffic_light.svg") no-repeat;
-        }
-    }
-    .signal_body {
-        background-image: url("../images/signal_body_light.png");
-    }
-    .img_off.marker {
-        content: url("../images/car_accident_light_56.svg");
-    }
-    .marker_img_selected {
-        content: url("../images/car_accident_selected_light_56.svg");
-    }
-
-    // 신호최적화
-    .arrow {
-        img {@include filter_black}
-    }
-    .arrow_right_2line {
-        img {@include filter_blue}
-    }
-    
-    // 상황관리이력
-    .chart_cont.record {filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);}
-    
-    // login
-    .logo_login {
-        content:  url("../images/login_logo_light.svg");
-    }
-
-    // input
-    .wrput {
-        &.read_success{
-            display: none;
-        }
+    .login_logo {
+        content: url("../images/logo_light_big.svg");
     }
     // light모드 display none
     .light_none {
@@ -1696,7 +1488,6 @@ html[data-theme=light] {
     .light_hidden {
         visibility: hidden;
     }
-
     .grey_box.login{
         border: 0.063rem solid $bg_grey30;
         background: var(--bg_01_80);
diff --git a/assets/css/template.css b/assets/css/template.css
new file mode 100644
index 0000000..2ada715
--- /dev/null
+++ b/assets/css/template.css
@@ -0,0 +1,4362 @@
+@charset "UTF-8";
+/*가이드에서만 쓰이는 레이아웃 스타일*/
+/*template*/
+footer {
+  position: fixed;
+  width: 100%;
+  bottom: 0;
+  z-index: 200;
+}
+
+.main_back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.main_wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background: var(--bg_02_template);
+}
+.main_wrap.main {
+  height: auto;
+  min-height: 100%;
+  overflow: hidden;
+  padding: 16px;
+  padding-top: 88px;
+  padding-left: 244px;
+}
+
+.main_contents {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.main_contents.login_ver1 {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  background: url("../images/login_dark_ver1.png") no-repeat;
+  background-size: cover;
+}
+.main_contents.error {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: url("../images/error_background_img.png") no-repeat center center;
+  background-size: cover;
+}
+.main_contents.error2 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #050A1F;
+  background: url("../images/error2_background_img.png") no-repeat center bottom;
+  background-size: contain;
+}
+
+.login_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 794px;
+  height: 100%;
+  padding: 48px;
+  border-left: 1px solid rgba(255, 255, 255, 0.2);
+  background-color: var(--alpha-wh-to-bkwh-60);
+  box-shadow: -12px 0px 40px 0px rgba(0, 0, 0, 0.4);
+  -webkit-backdrop-filter: blur(30px);
+          backdrop-filter: blur(30px);
+}
+
+.login_logo {
+  position: absolute;
+  height: 120px;
+  bottom: 42px;
+  left: 42px;
+}
+
+.box_line.left {
+  position: absolute;
+  top: 3.5rem;
+  left: 1.25rem;
+  z-index: 100;
+}
+.box_line.right {
+  position: absolute;
+  top: 3.5rem;
+  right: 1.25rem;
+  z-index: 100;
+}
+
+.infowindow_box.main {
+  top: auto;
+  bottom: calc(100% + 0.125rem) !important;
+  left: 50%;
+  transform: translate(-50%, 0);
+  position: absolute;
+}
+
+.scroll.sc_y.table {
+  height: 8.25rem;
+  padding: 0;
+}
+.scroll.sc_y.signal {
+  padding: 0;
+  margin-right: 0.5rem;
+}
+
+.accordion_paragraph.signal {
+  padding: 0 0.75rem 1.25rem 1.25rem;
+  height: 16.75rem;
+}
+
+.footer_in {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  padding-left: 1.25rem;
+  padding-right: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
+.table_box.signal tr.selected, .table_box.signal tr:focus, .table_box.signal tr.hover {
+  background: rgba(39, 212, 255, 0.2);
+}
+.table_box.signal th {
+  position: static;
+  height: 1.75rem;
+}
+.table_box.signal th, .table_box.signal td:not(.disable), .table_box.signal td:not(.disabled) {
+  border-right: 0.063rem solid rgba(255, 255, 255, 0.12);
+}
+.table_box.signal th:last-child, .table_box.signal td:not(.disable):last-child, .table_box.signal td:not(.disabled):last-child {
+  border-right: 0;
+}
+.table_box.signal td {
+  height: 1.75rem;
+  border-top: 0.188rem solid rgb(10, 11, 20) !important;
+}
+.table_box.signal td p {
+  text-align: center !important;
+  cursor: pointer;
+}
+
+.arrow.left {
+  transform: rotate(180deg);
+}
+.arrow.up {
+  transform: rotate(270deg);
+}
+.arrow.down {
+  transform: rotate(90deg);
+}
+
+.login_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login_box.login {
+  z-index: 0;
+  width: 44.563rem;
+  padding: 3rem;
+  border-radius: 0.125rem;
+  border: 0.063rem solid rgba(255, 255, 255, 0.21);
+  background: var(--bg_01_80);
+  -webkit-backdrop-filter: blur(3.75rem);
+          backdrop-filter: blur(3.75rem);
+}
+
+.light_box {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin-right: 20px;
+  margin-top: 8px;
+}
+
+.error_box {
+  display: flex;
+  -webkit-backdrop-filter: blur(1.875rem);
+  backdrop-filter: blur(1.875rem);
+  position: absolute;
+  padding: 3rem;
+  top: 33%;
+  left: 30%;
+  z-index: 0;
+  width: 44.563rem;
+  height: 18.25rem;
+  border-radius: 0.125rem;
+  border: 0.063rem solid rgba(255, 255, 255, 0.21);
+  background: rgba(162, 164, 184, 0.2);
+  -webkit-backdrop-filter: blur(3.75rem);
+          backdrop-filter: blur(3.75rem);
+}
+
+.marker_main {
+  position: absolute;
+  bottom: 40%;
+  left: 50%;
+}
+
+.indicator.main {
+  padding: 1.25rem 0.6rem 1.25rem 1.25rem;
+}
+.indicator.signal {
+  padding: 0;
+}
+
+.indi_conts.del {
+  display: none;
+}
+.indi_conts.signal {
+  margin: 0;
+}
+
+.tmbox_text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.3;
+}
+
+.tmbox.signal {
+  background-color: transparent;
+  padding: 0;
+  margin-bottom: 1.25rem;
+}
+
+.hd_profile {
+  position: relative;
+  width: 1.875rem;
+  height: 1.25rem;
+}
+.hd_profile .member_popover {
+  display: none;
+}
+.hd_profile.profile_open .member_popover, .hd_profile.profile_open .member_toggle {
+  display: block;
+}
+.hd_profile.profile_open .btn_profile .comma_under8 {
+  opacity: 1;
+  transform: rotate(180deg);
+}
+.hd_profile.profile_open .profile20 {
+  opacity: 1;
+}
+
+.marker_main .tooltip_parents, .marker_main .infowindow_box.main.on {
+  display: none;
+}
+.marker_main.marker_hide .tooltip_parents, .marker_main.marker_hide .infowindow_box.main.on {
+  display: block;
+}
+.marker_main.marker_hide .img_off {
+  display: none;
+}
+.marker_main.marker_hide .marker_img_selected {
+  display: block;
+}
+
+.fab_wrap {
+  position: absolute;
+  top: 0%;
+  left: 108%;
+  margin-left: 0.5rem;
+}
+
+.popover_box.main {
+  position: absolute;
+  display: none;
+  bottom: 3rem;
+  left: -2.5rem;
+  z-index: 100;
+}
+.popover_box.main.legend {
+  display: block;
+}
+.popover_box.main.pop {
+  display: block;
+}
+.popover_box.main.pop_hide {
+  display: none;
+}
+
+.signal_board {
+  width: 100%;
+  height: 100%;
+}
+
+.signal_content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  width: 100%;
+  height: 100%;
+  background: var(--bg_02_template);
+}
+
+.signal_body {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url("../images/signal_body_img.png");
+  background-repeat: no-repeat;
+  background-size: cover !important;
+}
+
+.accordion_box {
+  position: absolute;
+  margin-top: 0.5rem;
+}
+
+.indi_top.signal {
+  height: 3.5rem;
+  padding: 1.25rem 1rem 1.25rem;
+}
+
+.signal_dl {
+  display: flex;
+  align-items: center;
+  margin: 0.5rem 0;
+}
+.signal_dl:last-child {
+  margin-bottom: 0;
+}
+.signal_dl dt {
+  font-size: 0.8125rem;
+  font-weight: 300;
+  display: flex;
+  justify-content: space-between;
+  width: 4rem;
+  padding: 0 1rem 0 0;
+  color: var(--white-w_87-sec);
+}
+.signal_dl dd {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+  -moz-column-gap: 0.25rem;
+       column-gap: 0.25rem;
+}
+.signal_dl dd .wrput {
+  width: 100%;
+}
+.signal_dl dd .ch_radio:last-child {
+  padding: 0;
+}
+.signal_dl.check {
+  margin: 1rem 0;
+}
+
+.accordion_block.signal {
+  -webkit-backdrop-filter: blur(1.875rem);
+  backdrop-filter: blur(1.875rem);
+}
+.accordion_block.signal .accordion_title:hover:not(.levle2), .accordion_block.signal .hover.accordion_title,
+.accordion_block.signal .accordion_title:focus {
+  background: var(--primary-pri_20);
+  cursor: pointer;
+}
+.accordion_block.signal .accordion_title {
+  background: var(--primary-pri_20);
+}
+.accordion_block.signal .accordion_title:hover:not(.disabled), .accordion_block.signal .accordion_title:hover:not(.point.disabled), .accordion_block.signal .accordion_title:focus:not(.disabled) {
+  background: var(--primary-pri_20);
+}
+.accordion_block.signal .accordion_contents {
+  background: rgba(255, 255, 255, 0.06);
+}
+.accordion_block.signal .accordion_contents.signal {
+  padding: unset;
+}
+
+.map_label_line {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  width: 100%;
+  bottom: 1.5rem;
+  padding: 0.125rem 0.75rem;
+}
+
+.map_label {
+  font-size: 1.25rem;
+  font-weight: 700;
+  width: auto;
+  padding: 0.125rem 0.75rem 0.25rem;
+  background-color: #0B1129;
+}
+
+.record_wrap {
+  width: 100%;
+  height: 100%;
+  padding-top: 5rem;
+}
+
+.record_content {
+  width: 100%;
+  height: 100%;
+  padding: 1.25rem;
+  display: grid;
+  grid-auto-rows: 25.75rem auto;
+  row-gap: 1rem;
+}
+
+.record_box {
+  width: 100%;
+  height: 100%;
+  border: 0.063rem solid var(--line-pri_40-to-wh_40);
+  background: var(--bg_01_80);
+  box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
+  -webkit-backdrop-filter: blur(1.875rem);
+          backdrop-filter: blur(1.875rem);
+  padding: 0 1.25rem 1.25rem 1.25rem;
+}
+
+.record_title {
+  font-size: 1rem;
+  font-weight: 700;
+  width: 100%;
+  padding: 1.25rem 1rem 1rem 0;
+  color: #27D4FF;
+}
+
+.record_box_content {
+  display: flex;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  width: 100%;
+  height: calc(100% - 3.25rem);
+}
+
+.record_grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr;
+  grid-template-rows: 8.125rem auto;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  row-gap: 1rem;
+  width: 100%;
+  height: 100%;
+}
+
+.record_top {
+  display: grid;
+  grid-column-gap: 1rem;
+  width: 9rem;
+}
+
+.chart_cont_box {
+  height: 100%;
+  width: 9rem;
+}
+
+.diagon_cont_box {
+  display: grid;
+  grid-column-gap: 1rem;
+}
+
+.diagon_cont.record {
+  width: 9rem;
+  height: 4.875rem;
+}
+
+.situation_box {
+  padding: 0.75rem;
+  border-radius: 0.125rem;
+  background: var(--more-visible-wh_6-to-100);
+}
+.situation_box.chart {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  grid-row: 1/3;
+}
+.situation_box.case1 {
+  grid-row: 1/2;
+  grid-column: 5/6;
+}
+.situation_box.case2 {
+  grid-row: 1/2;
+  grid-column: 6/7;
+}
+.situation_box.event {
+  display: grid;
+  grid-column: 5/7;
+  grid-template-columns: 1.5fr 1fr;
+}
+.situation_box h4 {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--white-w_87);
+}
+
+.case_wrap {
+  display: flex;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  width: 100%;
+  height: calc(100% - 1.125rem);
+}
+
+.case_box {
+  padding: 0.25rem;
+  border-radius: 0.125rem;
+  background: var(--white-w_6);
+  width: 100%;
+}
+.case_box .case_number {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: calc(100% - 0.875rem);
+  color: var(--white-w_87);
+}
+
+.case_grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  row-gap: 0.5rem;
+}
+
+.chart_box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: calc(100% - 0.875rem);
+  -moz-column-gap: 2.5rem;
+       column-gap: 2.5rem;
+}
+
+.rate_content {
+  display: grid;
+  row-gap: 1rem;
+  height: calc(100% - 3.25rem);
+}
+
+.rate_box {
+  padding: 0.75rem;
+  border-radius: 0.125rem;
+  background: rgba(255, 255, 255, 0.06);
+  height: 100%;
+  width: 100%;
+}
+
+.ch_label {
+  display: flex;
+  align-items: center;
+}
+.ch_label .word {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  color: rgba(255, 255, 255, 0.87);
+  margin: 0.25rem 0 0.25rem 0.25rem;
+  line-height: 1.1;
+  word-break: keep-all;
+}
+
+.chart_cont {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 9rem;
+  height: 4.891rem;
+  padding: 0.5rem;
+  overflow: hidden;
+  background: url(../images/bg_tract.svg) no-repeat left top;
+  background-size: 100% 100%;
+}
+.chart_cont .chart_tlt {
+  position: absolute;
+  left: 1.25rem;
+  top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+.chart_cont .chart_result {
+  padding: 1rem 0 0;
+}
+
+.chart_tlt {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #27D4FF;
+}
+.chart_tlt.cover {
+  width: 86%;
+  padding: 0.75rem 0 0 0.75rem;
+  background: url(../images/bg_tract_top.svg) no-repeat left top;
+  background-size: 100% auto;
+}
+
+.chart_result {
+  display: flex;
+  align-items: flex-end;
+  color: #27D4FF;
+  font-size: 1.5rem;
+  font-weight: 700;
+  -moz-column-gap: 0.375rem;
+       column-gap: 0.375rem;
+}
+.chart_result .unit {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.7;
+}
+
+.record_radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.record_radio .word {
+  color: rgba(255, 255, 255, 0.87);
+}
+.record_radio.on .radio {
+  background-color: #fff;
+  border: 0.25rem solid #27d4ff;
+}
+.record_radio.on .word {
+  color: rgba(255, 255, 255, 0.87);
+}
+.record_radio .radio {
+  display: inline-block;
+  width: 0.9375rem;
+  height: 0.9375rem;
+  background-color: rgba(255, 255, 255, 0.7);
+  border-radius: 100%;
+  margin: 0 0.5rem 0 0;
+}
+.record_radio .radio.mini {
+  width: 0.625rem;
+  height: 0.625rem;
+  border: 0.125rem solid #27d4ff;
+  margin: 0 0.375rem 0 0;
+}
+.record_radio .radio.green {
+  border: 0.125rem solid #16D9AB;
+}
+.record_radio .radio.blue {
+  border: 0.125rem solid #07F;
+}
+.record_radio .radio.dark_blue {
+  border: 0.125rem solid #0E44E5;
+}
+.record_radio .radio.purple {
+  border: 0.125rem solid #8972FF;
+}
+.record_radio .radio.dark_purple {
+  border: 0.125rem solid #6E3DFF;
+}
+.record_radio .word {
+  font-size: 0.6875rem;
+  font-weight: 300;
+}
+
+.user_wrap {
+  width: 100%;
+  height: 100%;
+  padding-top: 2.5rem;
+}
+
+.user_content {
+  display: flex;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+  width: 100%;
+  height: 100%;
+  padding: 1.25rem;
+}
+
+.personal_box, .system_box {
+  -webkit-backdrop-filter: blur(1.875rem);
+  backdrop-filter: blur(1.875rem);
+  width: 100%;
+  height: 100%;
+  border: 0.063rem solid rgba(39, 212, 255, 0.4);
+  background: var(--bg_01_80);
+  box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16);
+  width: 28.625rem;
+}
+
+.user_box {
+  -webkit-backdrop-filter: blur(1.875rem);
+  backdrop-filter: blur(1.875rem);
+  width: 100%;
+  height: 100%;
+  border: 0.063rem solid rgba(39, 212, 255, 0.4);
+  background: var(--bg_01_80);
+  box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16);
+  flex: 1;
+}
+
+.table_inner {
+  width: 100%;
+  height: calc(100% - 2.625rem);
+  padding: 0.875rem 1.25rem 1.25rem 1.25rem;
+}
+
+.title_box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  padding: 1.25rem 1rem 0 1.25rem;
+}
+
+.user_title {
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--primary-to-grayscale-to-bk);
+  height: 1.5rem;
+}
+
+.user_btn {
+  height: 1.75rem;
+  padding: 0.5rem 0;
+  word-break: keep-all;
+}
+
+.error_logo {
+  position: absolute;
+  top: -10%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 1;
+}
+
+.logo_login {
+  width: 12.5rem;
+}
+
+.hd_profile {
+  position: relative;
+  width: 1.875rem;
+  height: 1.25rem;
+}
+.hd_profile .member_popover {
+  display: none;
+}
+.hd_profile.profile_open .member_popover, .hd_profile.profile_open .member_toggle {
+  display: block;
+}
+.hd_profile.profile_open .btn_profile .comma_under8 {
+  opacity: 1;
+  transform: rotate(180deg);
+}
+.hd_profile.profile_open .profile20 {
+  opacity: 1;
+}
+
+/* html data-theme */
+html[data-theme=light] .main_contents {
+  width: 100%;
+  height: 100%;
+  background-size: cover !important;
+  background: url("../images/background_light_img.png") no-repeat center center;
+}
+
+/* html data-theme End */
+/*reset*/
+* {
+  box-sizing: border-box;
+}
+
+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-size: 100%;
+  font: inherit;
+  vertical-align: top;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+html, body {
+  font-size: 1rem;
+}
+
+body {
+  margin: 0px;
+  padding: 0px;
+  background: #fff;
+  font-family: "Malgun Gothic", "맑은 고딕", "Helvetica", "AppleGothic", sans-serif;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+  font-weight: 400;
+  line-height: 1.3;
+  color: #000000;
+  letter-spacing: 0px;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+img {
+  max-width: 100%;
+}
+
+img.nomax {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+
+a {
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  color: #3b3b3b;
+}
+
+a:visited {
+  text-decoration: none;
+}
+
+a:active {
+  text-decoration: none;
+}
+
+a:link {
+  text-decoration: none;
+}
+
+a:focus, a:hover {
+  text-decoration: none;
+}
+
+input {
+  outline: none;
+  border: none;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+  color: #000;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+
+button {
+  outline: none;
+  border: none;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+  cursor: pointer;
+}
+
+select {
+  outline: none;
+  border: none;
+  font-family: "Spoqa Han Sans Neo", sans-serif;
+  cursor: pointer;
+}
+
+textarea {
+  outline: none;
+  border: none;
+  font-family: "Spoqa Han Sans Neo", "sans-serif";
+  color: #000;
+}
+
+select::-ms-expand {
+  display: none;
+}
+
+.tal {
+  text-align: left !important;
+}
+
+.tac {
+  text-align: center !important;
+}
+
+.tar {
+  text-align: right !important;
+}
+
+.dpblock {
+  display: block !important;
+}
+
+.dpinblock {
+  display: inline-block !important;
+}
+
+.dflx {
+  display: flex !important;
+}
+
+.dgrid {
+  display: grid !important;
+}
+
+.fleft {
+  float: left !important;
+}
+
+.fright {
+  float: right !important;
+}
+
+.lett_sp1 {
+  letter-spacing: 1px !important;
+}
+
+.lett_sp2 {
+  letter-spacing: 2px !important;
+}
+
+.lett_sp3 {
+  letter-spacing: 3px !important;
+}
+
+.cl {
+  clear: both;
+}
+
+.pos_rel {
+  position: relative !important;
+}
+
+.pos_ab {
+  position: absolute !important;
+}
+
+.bold {
+  font-weight: bold !important;
+}
+
+.blue {
+  color: #3ba1fd;
+}
+
+.red {
+  color: #f55;
+}
+
+.hauto {
+  height: auto !important;
+}
+
+input[type=text]::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+input[type=text]::-moz-placeholder {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+input[type=text]:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: rgba(0, 0, 0, 0.5);
+}
+
+input[type=text]::-ms-input-placeholder { /* Microsoft Edge */
+  color: rgba(0, 0, 0, 0.5);
+}
+
+input[type=password]::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.5);
+  letter-spacing: 0.5px;
+}
+
+input[type=password]::-moz-placeholder {
+  color: rgba(0, 0, 0, 0.5);
+  letter-spacing: 0.5px;
+}
+
+input[type=password]:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: rgba(0, 0, 0, 0.5);
+  letter-spacing: 0.5px;
+}
+
+input[type=password]::-ms-input-placeholder { /* Microsoft Edge */
+  color: rgba(0, 0, 0, 0.5);
+  letter-spacing: 0.5px;
+}
+
+input[type=password] {
+  letter-spacing: 1.5px;
+}
+
+textarea::-webkit-input-placeholder {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+textarea::-moz-placeholder {
+  color: rgba(0, 0, 0, 0.5);
+}
+
+textarea:-ms-input-placeholder { /* Internet Explorer 10-11 */
+  color: rgba(0, 0, 0, 0.5);
+}
+
+textarea::-ms-input-placeholder { /* Microsoft Edge */
+  color: rgba(0, 0, 0, 0.5);
+}
+
+body::-webkit-scrollbar {
+  -webkit-appearance: none;
+  background: transparent;
+  width: 7px;
+}
+
+body::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 50px;
+}
+
+body::-webkit-scrollbar-track {
+  background-color: transparent;
+  background-color: rgba(0, 0, 0, 0.2);
+}
+
+body::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+body::-webkit-scrollbar:horizontal {
+  cursor: pointer;
+  height: 6px;
+}
+
+.op03 {
+  opacity: 0.3 !important;
+}
+
+.op04 {
+  opacity: 0.4 !important;
+}
+
+.op05 {
+  opacity: 0.5 !important;
+}
+
+.op06 {
+  opacity: 0.6 !important;
+}
+
+.op07 {
+  opacity: 0.7 !important;
+}
+
+.op1 {
+  opacity: 1 !important;
+}
+
+.dpblock {
+  display: block;
+}
+
+.dpinblock {
+  display: inline-block;
+}
+
+.dpinline {
+  display: inline;
+}
+
+.dpnone {
+  display: none;
+}
+
+.dflx_as {
+  display: flex;
+  align-items: flex-start;
+}
+
+.dflx_ac {
+  display: flex;
+  align-items: center;
+}
+
+.dflx_ae {
+  display: flex;
+  align-items: flex-end;
+}
+
+.dflx_jbet {
+  display: flex;
+  justify-content: space-between;
+}
+
+.dflx_dcol_jbet {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.dflx_jstart {
+  display: flex;
+  justify-content: flex-start;
+}
+
+.dflx_jcent {
+  display: flex;
+  justify-content: center;
+}
+
+.dflx_jend {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.dflx_ac_jcent {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.dflx_as_jbet {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.dflx_ac_jbet {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.dflx_ae_jbet {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+}
+
+.dflx_ac_jend {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+/*reset End*/
+.back {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 1;
+}
+
+.Dash_body {
+  background-color: #F0F0F2;
+  width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  padding: 1rem;
+  padding-top: 5.5rem;
+  padding-left: 16.5625rem;
+}
+.Dash_body.respon {
+  padding-left: 112px;
+  padding-left: 7rem;
+}
+
+@keyframes in-header {
+  from {
+    opacity: 0;
+    top: -70px;
+  }
+  to {
+    opacity: 1;
+    top: 0px;
+  }
+}
+.header_bg {
+  background-color: #F0F0F2;
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  padding: 1rem 1rem 0px;
+  z-index: 100;
+}
+.header_bg.trans {
+  background-color: transparent;
+}
+.header_bg.animate {
+  animation: in-header 1s ease-in-out !important;
+}
+
+header {
+  width: 100%;
+  height: 56px;
+  height: 3.5rem;
+  padding: 8px 20px;
+  padding: 0.5rem 1.25rem;
+  border-radius: 10px;
+}
+
+.header_in {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 100%;
+}
+
+.header_logo {
+  cursor: pointer;
+}
+.header_logo a {
+  display: block;
+}
+
+.header_left {
+  display: flex;
+  align-items: center;
+  padding: 0 1rem 0.25rem 0;
+}
+.header_left .header_title {
+  margin: 5px 0px 0px 15px;
+}
+
+.header_title {
+  font-size: 1.125rem;
+  font-weight: 500;
+  font-weight: 600;
+  color: #fff;
+  letter-spacing: 1px;
+}
+
+.header_right {
+  display: flex;
+  align-items: center;
+  padding: 0 0 0 1rem;
+}
+.header_right .user_zone {
+  margin: 0 0 0 1rem;
+}
+
+.alarm_zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  position: relative;
+  cursor: pointer;
+  transition: 0.2s all;
+}
+.alarm_zone:hover {
+  opacity: 0.8;
+}
+.alarm_zone .dot {
+  position: absolute;
+  right: 4px;
+  top: 5px;
+}
+
+.bell {
+  width: 20px;
+  height: 20px;
+}
+
+.user_zone {
+  display: flex;
+  align-items: center;
+}
+.user_zone .user_txt {
+  margin: 0px 0px 0px 8px;
+}
+
+.user_thumb {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 28px;
+  height: 28px;
+  position: relative;
+  background-color: #4d6586;
+  border-radius: 100%;
+  overflow: hidden;
+  cursor: pointer;
+  transition: 0.2s all;
+}
+.user_thumb:hover {
+  opacity: 0.8;
+}
+.user_thumb .photo_user {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: auto;
+  transform: translate(-50%, -45%);
+}
+
+.user_txt {
+  display: flex;
+  align-items: center;
+}
+.user_txt span {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: #fff;
+}
+.user_txt span.user_name {
+  font-weight: 600;
+}
+
+.user_photo {
+  position: relative;
+  width: 28px;
+  height: 28px;
+  overflow: hidden;
+  cursor: pointer;
+  transition: 0.2s all;
+}
+.user_photo:hover {
+  opacity: 0.8;
+}
+
+@keyframes in-aside {
+  from {
+    opacity: 0;
+    left: -50px;
+  }
+  to {
+    opacity: 1;
+    left: 16px;
+  }
+}
+.aside {
+  position: fixed;
+  left: 1rem;
+  top: 5.5rem;
+  width: 13.75rem;
+  height: calc(100% - 6.5rem);
+  max-height: 54rem;
+  background: #fff;
+  border-radius: 10px;
+}
+.aside.respon {
+  width: 64px;
+  width: 4rem;
+}
+.aside.respon .menu_line .menu_icon {
+  margin: 0px;
+}
+.aside.respon .menu_line .menu_tlt {
+  display: none;
+}
+.aside.animate {
+  animation: in-aside 1s ease-in-out !important;
+}
+
+.aside_wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+.aside_wrap .aside_arrow {
+  position: absolute;
+  right: -1rem;
+  top: 0.5rem;
+  z-index: 10;
+}
+
+.aside_arrow {
+  width: 33px;
+  width: 2rem;
+  height: 33px;
+  height: 2rem;
+  background: #fff;
+  border-radius: 100%;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+  transition: 0.2s all;
+  cursor: pointer;
+}
+.aside_arrow:hover {
+  opacity: 0.8;
+}
+.aside_arrow .arr_icon_on {
+  display: none;
+}
+.aside_arrow.on .arr_icon {
+  display: none;
+}
+.aside_arrow.on .arr_icon_on {
+  display: block;
+}
+
+.arrow_in {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+.aside_nav {
+  width: 100%;
+  overflow: hidden;
+}
+
+.aside_nav li a {
+  display: block;
+}
+
+.menu_line {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 56px;
+  padding: 0px 16px;
+  border-left: 4px solid #fff;
+  transition: 0.2s all;
+}
+.menu_line .menu_icon {
+  margin: 0px 10px 0px 0px;
+}
+.menu_line .menu_tlt {
+  padding: 2px 0px 0px 0px;
+}
+.menu_line:hover {
+  background-color: #E4F6F3;
+  border-left: 4px solid #E4F6F3;
+}
+.menu_line:hover .mn_icon {
+  display: none;
+}
+.menu_line:hover .mn_icon_on {
+  display: block;
+}
+.menu_line:hover .menu_tlt {
+  color: #00A388;
+}
+.menu_line.on {
+  background-color: #E4F6F3;
+  border-left: 4px solid #00B295;
+}
+.menu_line.on .mn_icon {
+  display: none;
+}
+.menu_line.on .mn_icon_on {
+  display: block;
+}
+.menu_line.on .menu_tlt {
+  color: #00A388;
+}
+
+.mn_icon {
+  opacity: 0.2;
+}
+
+.mn_icon_on {
+  display: none;
+}
+
+.menu_tlt {
+  font-size: 0.9375rem;
+  font-weight: 500;
+}
+
+@keyframes in-contents {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+.contents_inner {
+  width: 100%;
+  height: 100%;
+}
+.contents_inner.animate {
+  animation: in-contents 2s ease !important;
+}
+
+.inner_top {
+  width: 100%;
+  padding: 1rem 0px 2.5rem;
+}
+
+.inner_title {
+  flex: 1;
+  padding: 0px;
+}
+.inner_title h1 {
+  padding: 0px 0px 12px;
+  letter-spacing: 0.5px;
+}
+.inner_title .explain {
+  opacity: 0.6;
+  letter-spacing: 0px;
+}
+
+.explain {
+  font-size: 1rem;
+  font-weight: 400;
+}
+
+.inner_btzone {
+  display: flex;
+  justify-content: flex-end;
+  padding: 0 0 0 1.25rem;
+}
+.inner_btzone button {
+  margin: 0 0 0 0.5rem;
+}
+
+.contents_body {
+  width: 100%;
+}
+
+.tab_body {
+  width: 100%;
+  display: none;
+}
+.tab_body.on {
+  display: block;
+}
+
+.conts_top {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0 0 1.25rem;
+}
+
+.cotop_right {
+  padding: 0 0 0 1.25rem;
+}
+.cotop_right .btn_srch.bldark {
+  padding: 0 1rem;
+}
+
+.tabt_line {
+  display: flex;
+  align-items: center;
+}
+.tabt_line .btn_tab {
+  margin: 0 0.5rem 0 0;
+}
+.tabt_line.data {
+  margin-top: 4px;
+  margin-bottom: -0.5rem;
+}
+.tabt_line.idpass {
+  width: 100%;
+  margin: 2.375rem 0 0;
+}
+.tabt_line.idpass .tab_nemo {
+  width: 50%;
+}
+
+.tab_nemo {
+  font-size: 0.9375rem;
+  font-weight: 400;
+  min-width: 8.25rem;
+  height: 2rem;
+  padding: 0 0.6rem;
+  background: #fff;
+  border: 1px solid #ccc;
+  border-radius: 0px;
+  color: #222;
+  transition: 0.2s all;
+}
+.tab_nemo:first-child {
+  border-radius: 4px 0px 0px 4px;
+  border-radius: 0.25rem 0 0 0.25rem;
+}
+.tab_nemo:last-child {
+  border-radius: 0px 4px 4px 0px;
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+.tab_nemo:hover {
+  background-color: #e6e7eb;
+}
+.tab_nemo.on {
+  background: #E4F6F3;
+  border: 1px solid #00B295;
+  color: #00A388;
+  font-weight: 500;
+}
+
+.contents {
+  width: 100%;
+}
+
+.conts_body {
+  width: 100%;
+}
+
+.table_cont {
+  width: 100%;
+  position: relative;
+  overflow: auto;
+  padding: 0 0 0.25rem;
+  min-height: 35.5rem;
+}
+.table_cont.hauto {
+  min-height: auto;
+}
+.table_cont .group_scope {
+  margin: 0 0 2rem;
+}
+
+.netz_table {
+  width: 100%;
+}
+.netz_table thead th {
+  font-size: 0.875rem;
+  font-weight: 500;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.07rem 0.5rem 0rem;
+  height: 2.5rem;
+  background: #E6E7EB;
+  word-break: keep-all;
+  line-height: 1.2;
+}
+.netz_table thead th.rline {
+  border-right: 1px solid #8A8E99;
+}
+.netz_table tbody td {
+  font-size: 0.875rem;
+  font-weight: 400;
+  text-align: center;
+  vertical-align: middle;
+  padding: 0.44rem 0.5rem 0.25rem;
+  height: 3rem;
+  border-bottom: 1px solid #DCDDE0;
+  word-break: keep-all;
+}
+.netz_table tbody td.rline {
+  border-right: 1px solid #8A8E99;
+}
+.netz_table tbody td.td_etc {
+  background: #F0F1F5;
+  position: relative;
+}
+.netz_table tbody td.td_etc .trash {
+  margin: 0px 4px;
+}
+.netz_table tbody td .file_btwrap {
+  margin: 0px 0px 1px;
+}
+.netz_table tbody td .selector, .netz_table tbody td .wrput {
+  width: 100%;
+}
+
+.manager_table tbody td:first-child {
+  width: 4.75rem;
+}
+
+.organ_table tbody td {
+  padding: 0.75rem 0.75rem;
+}
+.organ_table tbody td:first-child {
+  width: 10%;
+  padding-left: 1.25rem;
+}
+.organ_table tbody td:nth-child(3) {
+  width: 50%;
+  padding-left: 1.75rem;
+}
+
+.trash {
+  width: 20px;
+  height: 20px;
+  transition: 0.2s all;
+  cursor: pointer;
+}
+.trash:hover {
+  opacity: 0.8;
+}
+
+.caption_title {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  padding: 0px 0px 14px;
+  display: block;
+  text-align: left;
+}
+
+.group_scope {
+  display: inline-block;
+  height: 32px;
+  padding: 0.125rem 1.25rem 0 1rem;
+  background: rgba(240, 241, 245, 0.4);
+  border: 1px solid #DCDDE0;
+  border-radius: 0.5rem;
+  vertical-align: baseline;
+}
+
+.gr_scope_line {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  -moz-column-gap: 2.25rem;
+       column-gap: 2.25rem;
+}
+
+.scope_total {
+  display: flex;
+  align-items: flex-end;
+  font-size: 1rem;
+  font-weight: 700;
+  padding: 0 1.25rem 0 0;
+  color: #00B295;
+  line-height: 1;
+}
+.scope_total .decimal {
+  font-size: 0.75rem;
+  font-weight: 400;
+}
+
+.scope_text {
+  display: flex;
+  align-items: center;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  font-size: 1rem;
+  font-weight: 500;
+}
+.scope_text span {
+  color: rgba(0, 0, 0, 0.5);
+}
+.scope_text .scope_count {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.scope_count.sc1 {
+  color: #0068E6;
+}
+.scope_count.sc2 {
+  color: #46C2AD;
+}
+.scope_count.sc3 {
+  color: #A7D154;
+}
+
+.td_txt {
+  font-size: 0.875rem;
+  font-weight: 400;
+  word-break: keep-all;
+}
+.td_txt.scp1 {
+  color: #0068E6;
+  opacity: 1;
+}
+.td_txt.scp2 {
+  color: #00A388;
+  opacity: 1;
+}
+.td_txt.use {
+  font-weight: 500;
+  color: #0068E6;
+  opacity: 1;
+}
+.td_txt.un_use {
+  opacity: 0.3;
+}
+.td_txt.use_txt {
+  font-weight: 500;
+  min-width: 3.25rem;
+}
+.td_txt.med {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.6;
+}
+.td_txt.tell {
+  min-width: 7.5rem;
+}
+
+.date_txt {
+  font-size: 0.875rem;
+  font-weight: 400;
+  opacity: 0.4;
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+}
+
+.td_total .td_txt {
+  font-size: 0.75rem;
+  font-weight: 400;
+  line-height: 1.4;
+}
+.td_total.sum .td_txt {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #0068E6;
+}
+
+.td_facility .td_txt {
+  min-width: 7.5rem;
+}
+
+.td_organ .td_txt {
+  min-width: 3.25rem;
+}
+
+.activity_table tbody td {
+  padding: 0.875rem 0.7rem 0.56rem;
+}
+
+.paging_space {
+  width: 100%;
+  padding: 1.45rem 0 0.125rem;
+  padding: 1.125rem 0 0.125rem;
+  text-align: center;
+}
+
+.paging_ul {
+  display: inline-block;
+  text-align: center;
+}
+
+.paging_ul li {
+  display: inline;
+}
+
+.paging_ul li a {
+  font-size: 0.875rem;
+  font-weight: 400;
+  display: inline-block;
+  width: 1.75rem;
+  height: 1.75rem;
+  background: #F7F8F9;
+  border-radius: 4px;
+  padding: 6px 6px 4px;
+  margin: 0px 6px;
+  color: rgba(0, 0, 0, 0.7);
+  transition: 0.2s all;
+}
+.paging_ul li a.arrow {
+  background: transparent;
+  padding: 0px;
+}
+
+.paging_ul li a.on {
+  background: #E6E7EB;
+  color: rgba(0, 0, 0, 0.7);
+  font-weight: 700;
+}
+
+.paging_ul li a:hover {
+  opacity: 0.6;
+}
+
+.evid_table thead th.th_kinds {
+  width: 28%;
+}
+.evid_table thead th.th_upload {
+  width: 15%;
+}
+.evid_table tbody td {
+  height: 2.5rem;
+}
+
+.detail_table tbody td {
+  height: 2.5rem;
+}
+.detail_table tbody td:first-child {
+  width: 23%;
+}
+.detail_table tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.detail_round {
+  width: 100%;
+  border-radius: 0.25rem;
+  overflow: hidden;
+}
+.detail_round.bord {
+  border: 1px solid #DCDDE0;
+}
+
+.file_btwrap {
+  position: relative;
+  cursor: pointer !important;
+}
+.file_btwrap .file_put {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+}
+
+.file_result {
+  display: flex;
+  align-items: center;
+  padding: 0 0 0 0.25rem;
+}
+.file_result.half .p_r12 {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.file_result.half .put_delete {
+  margin: 0;
+}
+.file_result .p_r14 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: calc(100% - 1.25rem);
+}
+.file_result .put_delete {
+  margin: 0;
+}
+
+.plus_zone {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 0.5rem 0;
+}
+
+.enrolls_cont {
+  margin: 1.25rem 0 0;
+}
+
+.enrolls_top {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0px 0px 12px;
+  border-bottom: 1px solid #8A8E99;
+}
+
+.enrolls_enroll {
+  padding: 12px 0px;
+}
+
+.dl_enroll {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0.25rem 0;
+}
+.dl_enroll.trans {
+  padding: 0.5rem 0;
+}
+.dl_enroll.trans dt {
+  opacity: 0.7;
+}
+.dl_enroll.top {
+  padding: 0 0 0.25rem;
+}
+.dl_enroll dt {
+  font-size: 0.875rem;
+  font-weight: 500;
+  width: 6.25rem;
+  padding: 0 0.75rem 0 0;
+  letter-spacing: 0px;
+}
+.dl_enroll dt .selector {
+  width: 100%;
+}
+.dl_enroll dt .quest {
+  margin: 5px 0 0;
+  cursor: pointer;
+}
+.dl_enroll dd {
+  display: flex;
+  flex: 1;
+}
+.dl_enroll dd .selector {
+  width: 100%;
+}
+.dl_enroll dd .wrput {
+  width: 100%;
+}
+.dl_enroll dd .tlt {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.grd_selt_sett {
+  display: grid;
+  grid-template-columns: 6fr 4fr;
+  gap: 0.25rem;
+}
+
+.grd_selt_sett73 {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 7fr 3fr;
+  gap: 0.25rem;
+}
+
+/*Main*/
+.header {
+  width: 100%;
+  height: 56px;
+  height: 3.5rem;
+  padding: 8px 20px;
+  padding: 0.5rem 1.25rem;
+  background: transparent;
+  border: none;
+  border-radius: 0px;
+}
+.header.white .header_title {
+  color: #003278;
+}
+.header.white .btn_login {
+  background: #FFF;
+  border: 1px solid #DCDDE0;
+  color: #000;
+}
+.header.white .btn_sign {
+  background: #00B295;
+  color: #fff;
+}
+.header.white .logo_wh {
+  display: none;
+}
+.header.white .logo_color {
+  display: block;
+}
+
+.logo_color {
+  display: none;
+}
+
+.Main_body {
+  background-color: #F0F0F2;
+  width: 100%;
+  min-height: 100%;
+  overflow: hidden;
+  margin: 0;
+  padding: 0;
+}
+
+.main_art01 {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background-color: #002252;
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-position: 40% center;
+  background-size: cover;
+}
+
+.main_ab_trans {
+  position: absolute;
+  left: 0px;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+
+.main_wrap {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.main_center01 {
+  width: 94.5rem;
+  margin: 0 auto;
+  height: 100%;
+  padding: 2rem;
+  background: transparent;
+}
+
+.mtitle_wrap {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  height: 100%;
+}
+.mtitle_wrap.left {
+  justify-content: flex-start;
+}
+.mtitle_wrap.between {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.mtitle_dl {
+  text-align: left;
+  padding: 0.5rem 1rem 0 0;
+}
+.mtitle_dl dt {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #fff;
+  line-height: 1.3;
+  letter-spacing: 1.8px;
+}
+.mtitle_dl dd .mtitle_exp {
+  font-size: 1rem;
+  font-weight: 400;
+  color: #fff;
+  letter-spacing: 0.8px;
+  margin: 1.3rem 0 0;
+}
+.mtitle_dl dd .btn_default {
+  margin: 2.75rem 0 0;
+}
+
+@keyframes moveScroll {
+  50% {
+    transform: translate(-50%, -20px);
+  }
+}
+.go_ready {
+  position: absolute;
+  left: 50%;
+  bottom: -10px;
+  width: 100px;
+  height: auto;
+  z-index: 10;
+  transform: translateX(-50%);
+  color: #fff;
+  text-align: center;
+}
+.go_ready img {
+  width: 100%;
+  margin-top: -25px;
+}
+.go_ready span {
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+.main_art02 {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background-color: #F0F0F2;
+}
+
+.main_center02 {
+  width: 106rem;
+  margin: 0 auto;
+  height: 100%;
+  padding: 2rem;
+  background: transparent;
+}
+
+.main_art03 {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background-color: #fff;
+}
+
+.msent_dl {
+  color: #000;
+  margin: 0 0 3rem;
+}
+.msent_dl dt {
+  font-size: 1.25rem;
+  font-weight: 700;
+  margin: 0 0 1.25rem;
+  line-height: 1.4;
+}
+.msent_dl dd {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.8;
+}
+
+@keyframes slideRight {
+  0% {
+    opacity: 0;
+    transform: translateX(200px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.art_img_right {
+  max-width: 75%;
+  margin: 1rem -12.5rem 0 0;
+  animation-duration: 1s !important;
+  animation-delay: 0s !important;
+}
+
+.art_img_left {
+  max-width: 75%;
+  margin: 1rem 0 0 -13rem;
+  animation-duration: 1s !important;
+  animation-delay: 0s !important;
+}
+
+.ani_img_right {
+  max-width: 75%;
+  margin: 1rem -12.5rem 0 0;
+}
+
+.ani_img_left {
+  max-width: 75%;
+  margin: 1rem 0 0 -13rem;
+}
+
+.main_art04 {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  background-color: #F0F0F2;
+}
+
+.date_put_wrap {
+  display: flex;
+  align-items: center;
+}
+
+.date_put_dl {
+  display: flex;
+  align-items: center;
+}
+.date_put_dl dt {
+  display: flex;
+  align-items: center;
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin: 0 1.5rem 0 0;
+  line-height: 1;
+  word-break: keep-all;
+}
+.date_put_dl dd {
+  display: flex;
+  align-items: center;
+}
+.date_put_dl dd .selector {
+  width: 8.15rem;
+}
+
+.grd_date_sett {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 0.5rem;
+}
+
+.btzone_last {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  width: 100%;
+  padding: 1.5rem 0 0;
+}
+.btzone_last button {
+  margin: 0 0.25rem;
+}
+
+.list_contain {
+  width: 100%;
+  border-radius: 0.625rem;
+  margin-bottom: 1rem;
+}
+
+.contain_top {
+  width: 100%;
+  height: 3.5rem;
+  padding: 0.8rem 1rem 0.5rem;
+  background-color: #D2D3D6;
+  border-radius: 0.625rem 0.625rem 0 0;
+}
+.contain_top .h3_m16 {
+  letter-spacing: 0.5px;
+}
+
+.contain_body {
+  width: 100%;
+  padding: 1.25rem;
+  background-color: #fff;
+  border-radius: 0 0 0.625rem 0.625rem;
+}
+
+.data_top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.datas_cont {
+  width: 100%;
+  position: relative;
+  overflow: auto;
+}
+.datas_cont .plus_zone {
+  border-top: 1px solid #DCDDE0;
+}
+
+.datas_table {
+  width: 100%;
+}
+.datas_table thead th {
+  background-color: #fff;
+  border-bottom: 1px solid #DCDDE0;
+  text-align: left;
+  vertical-align: top;
+  height: 2rem;
+  padding-top: 4px;
+}
+.datas_table thead th .unit {
+  font-size: 0.75rem;
+  opacity: 0.7;
+  vertical-align: baseline;
+}
+.datas_table tbody tr td {
+  padding: 0.5rem 0.6rem;
+  border: none;
+}
+.datas_table tbody tr td.td_delete {
+  padding: 0.5rem 0rem 0.5rem 0.6rem;
+}
+.datas_table tbody tr td:first-child {
+  padding-left: 0;
+  width: 7%;
+}
+.datas_table tbody tr td:nth-child(3) {
+  width: 15%;
+}
+.datas_table tbody tr:first-child td {
+  padding-top: 1rem;
+}
+.datas_table tbody tr:last-child td {
+  padding-bottom: 1rem;
+}
+
+.tr_datas.del {
+  display: none;
+}
+
+.add_contain {
+  width: 100%;
+  height: 7.25rem;
+  padding: 1.25rem;
+  background: rgba(255, 255, 255, 0.4);
+  border: 1px dashed #bebfc2;
+  border-radius: 0.625rem;
+  cursor: pointer;
+}
+.add_contain:hover {
+  background: #E4F6F3 0% 0%;
+  border: 1px dashed #00B295;
+}
+
+.add_button {
+  display: flex;
+  align-items: center;
+  margin: 5px 0px 0px;
+  cursor: pointer;
+}
+.add_button .plus24 {
+  margin: 0px 6px 0px 0px;
+  opacity: 0.3;
+}
+.add_button span {
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.6;
+}
+
+.grd_month_set {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 0.5rem;
+}
+.grd_month_set .selector {
+  width: 6.5rem;
+}
+.grd_month_set .selector.short {
+  width: 9.5rem;
+}
+
+.anlay_top {
+  width: 100%;
+  padding: 0px 0px 1.5rem;
+  border-bottom: 1px solid #D2D3D6;
+}
+.anlay_top.nobord {
+  border: none;
+  padding: 0 0 2.5rem;
+}
+
+.volume_body {
+  padding: 0.75rem;
+}
+
+.analy_volume {
+  width: 100%;
+  height: 7.44rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  grid-gap: 0.625rem;
+}
+
+.volume_result {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0.75rem 0 0;
+  position: relative;
+}
+.volume_result .top {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: calc(100% - 3rem);
+  display: flex;
+  align-items: center;
+}
+
+.volume_count {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+}
+.volume_count .vol_count {
+  line-height: 1;
+}
+.volume_count .p_r12 {
+  color: rgba(0, 0, 0, 0.5019607843);
+  margin: 0 0.5rem;
+}
+
+.vol_count {
+  font-size: 2.25rem;
+  font-weight: 700;
+  color: #00B295;
+  line-height: 1;
+  word-break: break-all;
+}
+.vol_count + .decimal {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #00B295;
+}
+.vol_count.bldark {
+  color: #002252;
+}
+.vol_count.bldark + .decimal {
+  color: #002252;
+}
+.vol_count.sky {
+  color: #00B8E6;
+}
+.vol_count.sky + .decimal {
+  color: #00B8E6;
+}
+.vol_count.blue {
+  color: #0068E6;
+}
+.vol_count.blue + .decimal {
+  color: #0068E6;
+}
+.vol_count.red {
+  color: #E61717;
+}
+.vol_count.red + .decimal {
+  color: #E61717;
+}
+
+.anlay_conts {
+  width: 100%;
+  padding: 1.25rem 0 0;
+}
+
+.chart_top {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  width: 100%;
+  margin: 0 0 1rem;
+  line-height: 1;
+}
+
+.analy_charts {
+  display: grid;
+  grid-template-columns: repeat(12, 1fr);
+  grid-auto-rows: minmax(20.88rem, auto);
+  grid-gap: 1.25rem;
+}
+.analy_charts .analy_body:first-child {
+  grid-column: 1/7;
+}
+.analy_charts .analy_body:nth-child(2) {
+  grid-column: 7/14;
+}
+.analy_charts .analy_body:nth-child(3) {
+  grid-column: 1/9;
+}
+.analy_charts .analy_body:nth-child(4) {
+  grid-column: 9/14;
+}
+
+.chart_unit {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.chart_cont {
+  width: 100%;
+}
+
+.doub_chart_wrap {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  height: 16.25rem;
+}
+.doub_chart_wrap .chart_cont {
+  flex: 1;
+}
+.doub_chart_wrap .chart_cont.bord_dash {
+  border-right: 1px dashed #BEBFC2;
+}
+.doub_chart_wrap .sales_chart_rcd {
+  margin: 0 0.5rem 0 0;
+}
+.doub_chart_wrap .scope_step {
+  margin-right: -1.2rem;
+}
+
+.sales_chart_rcd {
+  width: 10.875rem;
+  height: 100%;
+  background: rgba(240, 241, 245, 0.4);
+  border: 1px solid rgb(220, 221, 224);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+.sales_chart_rcd .selector.dispose {
+  margin-top: -4px;
+}
+
+.totall_box {
+  display: flex;
+  width: 16.25rem;
+  height: 2rem;
+  padding: 0.3rem 1rem 0.2rem;
+  background: #FFF;
+  border: 1px solid #DCDDE0;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.totall_box .wrput {
+  border: none;
+  width: 100%;
+  height: 100%;
+  text-align: right;
+  padding: 0 4px 0 0;
+}
+.totall_box .unit {
+  font-size: 0.875rem;
+  line-height: 1.6;
+}
+
+.amcharts-amexport-menu {
+  display: none !important;
+}
+
+.sales_dispose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  position: relative;
+}
+.sales_dispose .date {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+.sales_dispose .date.dash {
+  top: auto;
+  bottom: 0px;
+}
+.sales_dispose .selector {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+
+.dispose_result {
+  text-align: center;
+}
+.dispose_result .vol_count {
+  font-size: 2rem;
+  margin: 1rem 0 0.5rem;
+}
+
+.date {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.chart_wrap {
+  width: 100%;
+  height: 16.625rem;
+  overflow: hidden;
+}
+.chart_wrap.reduce {
+  height: 28rem;
+  padding: 1rem 0 0;
+  position: relative;
+}
+.chart_wrap.reduce .chart_unit {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+.chart_wrap .chart_cont {
+  height: 100%;
+}
+
+.ratio_wrap .chart_cont {
+  padding: 1rem;
+}
+
+.scope_zone {
+  width: 100%;
+  height: 100%;
+  padding: 0.75rem;
+  background: rgba(240, 241, 245, 0.4) 0% 0%;
+  border: 1px solid #DCDDE0;
+  border-radius: 0.5rem;
+  position: relative;
+  overflow: hidden;
+}
+.scope_zone .chart_unit {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  position: absolute;
+  right: 12px;
+  top: 8px;
+}
+.scope_zone .chart_cont {
+  width: 100%;
+  height: 145%;
+  margin-top: -0.25rem;
+}
+
+.scope_step {
+  width: auto;
+  padding: 1rem 0px 0px 0.3rem;
+}
+.scope_step .p_r14:first-child {
+  height: 55%;
+}
+.scope_step .p_r14:nth-child(2) {
+  height: 22%;
+}
+
+.reduce_volume {
+  width: 100%;
+  height: 11.25rem;
+  padding: 0 0 0.75rem;
+  display: grid;
+  grid-template-columns: 1.4fr 1fr 1fr 1fr;
+  grid-gap: 0.625rem;
+  border-bottom: 1px solid #D2D3D6;
+}
+.reduce_volume .scope_zone {
+  padding: 1rem;
+}
+.reduce_volume .scope_zone .chart_unit {
+  right: 0;
+  top: 0;
+}
+
+.volume_last {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 1.25rem 0 0.5rem;
+}
+
+.reduce_sett {
+  width: 80%;
+  padding: 0.3rem 0 0 0.5rem;
+}
+.reduce_sett .dl_enroll dt {
+  font-size: 1rem;
+  font-weight: 700;
+  width: 10.5rem;
+  padding: 0 0.5rem 0 0;
+}
+.reduce_sett .dl_enroll dt .mini {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.5);
+  letter-spacing: -0.5px;
+}
+
+footer {
+  width: 100%;
+  height: 8.375rem;
+  background-color: #5C5E66;
+  padding: 2rem 2.25rem;
+}
+
+.footer_in {
+  width: 100%;
+  padding: 2px 0 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer_left {
+  min-width: 15.25rem;
+  padding: 0 1rem 0 0;
+}
+.footer_left .copy {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  font-weight: 300;
+  color: #fff;
+  margin: 3px 0 0;
+}
+
+.footer_right {
+  flex: 1;
+}
+
+.copy_right {
+  width: 100%;
+  padding: 2px 0 0;
+}
+.copy_right p {
+  font-size: 0.75rem;
+  font-weight: 400;
+  font-weight: 300;
+  color: #fff;
+  line-height: 1.8;
+  letter-spacing: 0.8px;
+}
+
+.circle_arrow {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  right: 20px;
+  right: 1.25rem;
+  bottom: 20px;
+  bottom: 1.25rem;
+  width: 3rem;
+  height: 3rem;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 100%;
+  z-index: 100;
+  cursor: pointer;
+  visibility: hidden;
+  opacity: 0;
+  transition: 0.3s all;
+}
+.circle_arrow.on {
+  visibility: visible;
+  opacity: 1;
+}
+.circle_arrow:hover {
+  background: rgb(0, 0, 0);
+}
+
+.analy_charts2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-auto-rows: minmax(21.25rem, auto);
+  grid-gap: 1.25rem;
+}
+
+.charts_line {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.charts_line .half {
+  width: 50%;
+  padding: 0 0 0 1.25rem;
+}
+.charts_line .half:first-child {
+  border-right: 1px solid #DCDDE0;
+  padding: 0 1.25rem 0 0;
+}
+
+.scope_chart {
+  width: 100%;
+  height: 21.25rem;
+  position: relative;
+}
+.scope_chart .scope_sign {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+.scope_chart .chart_unit {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  font-size: 0.6875rem;
+}
+.scope_chart .chart_cont {
+  height: 100%;
+  padding: 0.5rem;
+}
+
+.chart_inner {
+  position: relative;
+  width: 100%;
+  background: rgba(240, 241, 245, 0.4);
+  border: 1px solid #DCDDE0;
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+}
+.chart_inner .top {
+  text-align: center;
+  margin: 0.5rem 0 1rem;
+  line-height: 1.2;
+}
+.chart_inner .chart_unit {
+  font-size: 0.6875rem;
+  font-weight: 400;
+  position: absolute;
+  right: 1rem;
+  top: 1rem;
+}
+
+.scope_sign {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 95px;
+  padding: 0.25rem 1rem 0.23rem;
+  background: #00B295;
+  border-radius: 4px;
+  color: #fff;
+  text-align: center;
+  font-size: 1rem;
+  line-height: 1.2;
+}
+
+.Sign_body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 100%;
+  background-color: #F0F0F2;
+  padding: 1rem;
+}
+
+.Sign_center {
+  width: 50.5rem;
+  margin: 4.3rem auto;
+  background-color: transparent;
+}
+
+.sign_top {
+  width: 100%;
+  height: 5.125rem;
+  padding: 0.75rem;
+  background: #002252;
+  border-radius: 10px;
+  margin: 0 0 1rem;
+}
+
+.sign_contents {
+  width: 100%;
+  background-color: #fff;
+  border-radius: 10px;
+  padding: 1.5rem;
+}
+
+.sign_sequence {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 0 0 5.625rem;
+}
+
+.sequence_cont {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.seq_dl {
+  display: flex;
+  align-items: center;
+  margin: 0 0 0 0.625rem;
+  opacity: 0.3;
+}
+.seq_dl dt {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 400;
+  margin: 0 6px 0 0;
+  width: 26px;
+  height: 26px;
+  border: 1px solid #000;
+  background-color: #fff;
+  border-radius: 100%;
+  line-height: 1;
+}
+.seq_dl dd {
+  display: flex;
+  align-items: center;
+  line-height: 1;
+}
+.seq_dl dd .call {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin: 0 0.5rem 0 0;
+}
+.seq_dl dd .line {
+  width: 30px;
+  height: 1px;
+  background-color: #000;
+}
+.seq_dl.on {
+  opacity: 1;
+}
+.seq_dl.on dt {
+  background: #00B295;
+  border: 1px solid #00B295;
+  color: #fff;
+}
+.seq_dl.on dd .call {
+  color: #00B295;
+}
+.seq_dl.on dd .line {
+  background-color: #00B295;
+}
+
+.terms_contain {
+  width: 100%;
+}
+
+.terms_full {
+  padding: 0 0 5px;
+  border-bottom: 1px solid #8A8E99;
+}
+
+.check_dl {
+  display: flex;
+  width: 100%;
+  padding: 0 0 0.5rem;
+  cursor: pointer;
+}
+.check_dl dt {
+  width: 1.75rem;
+}
+.check_dl dd {
+  flex: 1;
+}
+
+.check_box {
+  width: 1.25rem;
+  height: 1.25rem;
+  cursor: pointer;
+}
+.check_box .icon_on {
+  display: none;
+}
+.check_box.on .icon {
+  display: none;
+}
+.check_box.on .icon_on {
+  display: block;
+}
+
+.terms_sent {
+  font-size: 0.875rem;
+  font-weight: 500;
+  line-height: 1.4;
+}
+.terms_sent.full {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #00A388;
+}
+
+.terms_cont {
+  width: 100%;
+  padding: 0.9375rem 0 0.5rem;
+}
+.terms_cont ::-webkit-scrollbar {
+  width: 8px;
+}
+.terms_cont ::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 50px;
+}
+.terms_cont ::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.terms_cont ::-webkit-scrollbar-track {
+  background-color: none;
+}
+.terms_cont .temrs_text_wrap {
+  border: 1px solid #DCDDE0;
+  padding: 0.875rem 0.25rem 0.25rem 1rem;
+}
+
+.terms_area {
+  width: 100%;
+  height: 8rem;
+  padding-right: 1.5rem;
+  background-color: #fff;
+  overflow: auto;
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.7);
+  line-height: 1.5rem;
+  resize: none;
+}
+
+.btzone_between {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  padding: 1rem 0 0;
+}
+
+.analy_charts3 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  grid-auto-rows: minmax(21.25rem, auto);
+  grid-gap: 1.25rem;
+}
+.analy_charts3 .analy_body:first-child {
+  grid-column: 1/3;
+}
+.analy_charts3 .analy_body:nth-child(2) {
+  grid-column: 3/4;
+}
+.analy_charts3 .analy_body:nth-child(3) {
+  grid-column: 4/5;
+}
+.analy_charts3 .analy_body:nth-child(4) {
+  grid-column: 1/3;
+}
+.analy_charts3 .analy_body:nth-child(5) {
+  grid-column: 3/5;
+}
+.analy_charts3 .analy_body:nth-child(6) {
+  grid-column: 1/5;
+}
+
+.status_vert_wrap {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.status_vert_wrap .chart_cont {
+  height: calc(100% - 1rem);
+  padding: 1.6rem 0 0;
+}
+
+.status_dl {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: 3.75rem;
+  padding: 1.187rem 1.5rem 0.9375rem 1.2rem;
+  background: rgba(240, 241, 245, 0.4);
+  border: 1px solid #DCDDE0;
+  border-radius: 8px;
+}
+.status_dl dt {
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin: 0.25rem 0.25rem 0 0;
+  word-break: keep-all;
+}
+
+.scope_result {
+  color: #00B295;
+  word-break: keep-all;
+}
+.scope_result .unit {
+  margin: 0 0 1px 1px;
+}
+
+.plus20 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.see_more {
+  display: flex;
+  align-items: center;
+  transition: 0.2s all;
+}
+.see_more:hover {
+  opacity: 0.8;
+}
+.see_more .plus20 {
+  opacity: 0.3;
+  margin: 0 0.25rem 0 0;
+}
+
+.profile_photo {
+  width: 5.25rem;
+  height: 5.25rem;
+  margin: 0px 8px 0px 0px;
+  position: relative;
+  cursor: pointer;
+}
+.profile_photo .img_camera {
+  position: absolute;
+  right: 0px;
+  bottom: 0px;
+  z-index: 10;
+}
+
+.circle_photo {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-color: #F0F1F5;
+  border: 1px solid #DCDDE0;
+  border-radius: 100%;
+  overflow: hidden;
+}
+.circle_photo .photo_user {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 100%;
+  height: auto;
+  transform: translate(-50%, -45%);
+  z-index: 1;
+}
+
+.photo_upload {
+  position: absolute;
+  z-index: 9;
+  right: -6px;
+  bottom: 0;
+}
+
+.member_photo {
+  width: 3.375rem;
+  height: 3.375rem;
+  position: relative;
+  overflow: hidden;
+}
+
+.form_inner_phone {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 0.5rem;
+}
+
+.alarm_top {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  border-bottom: 1px solid #DCDDE0;
+  padding: 1.5rem 1.5rem 1.25rem;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+
+.alarm_cont {
+  width: 100%;
+  padding: 1.5rem 1.5rem 1.25rem;
+}
+.alarm_cont.grey {
+  background-color: #F0F1F5;
+}
+.alarm_cont .timer {
+  margin: 0.25rem 0 0;
+}
+
+.point_dl {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+.point_dl dt {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.point_dl dt .point {
+  margin: 0.375rem 0 0;
+}
+.point_dl dd {
+  font-size: 0.875rem;
+  font-weight: 400;
+  flex: 1;
+}
+.point_dl dd .timer {
+  padding: 0.25rem 0 0;
+}
+
+.alarm_inner {
+  padding: 0 0 0 0.875rem;
+}
+
+.alarm_detail {
+  padding: 1rem 0 0;
+}
+.alarm_detail h4 {
+  line-height: 1.6;
+}
+.alarm_detail .p_r14 {
+  letter-spacing: 0.5px;
+}
+
+.point {
+  display: inline-block;
+  width: 0.375rem;
+  height: 0.375rem;
+  background: #C8C9CC;
+  border-radius: 100%;
+}
+.point.on {
+  background: #00B295;
+}
+
+.timer {
+  display: flex;
+  align-items: center;
+  font-size: 0.6875rem;
+  font-weight: 400;
+}
+.timer span {
+  opacity: 0.4;
+}
+
+.right_panel {
+  position: fixed;
+  top: 0px;
+  right: -28rem;
+  width: 25.625rem;
+  height: 100%;
+  padding: 1.25rem 0 1.25rem 1.25rem;
+  background: #fff;
+  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
+  border-radius: 1.25rem 0 0 1.25rem;
+  z-index: 700;
+  transition: 0.3s all;
+}
+.right_panel.on {
+  right: 0px;
+}
+.right_panel .panel_inner {
+  padding: 0 1rem 0 0;
+}
+
+.panel_inner::-webkit-scrollbar {
+  -webkit-appearance: none;
+  width: 8px;
+}
+
+.panel_inner::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 50px;
+  cursor: pointer;
+}
+
+.panel_inner::-webkit-scrollbar-track {
+  width: 8px;
+  background-color: none;
+}
+
+.panel_inner::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+
+.panel_inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.panel_inner .panel_close {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+}
+
+.panel_close {
+  display: inline-block;
+  width: 28px;
+  height: 28px;
+  cursor: pointer;
+}
+.panel_close:hover {
+  opacity: 0.7;
+}
+
+.panel_top {
+  width: 100%;
+  padding: 4.75rem 0 0;
+}
+.panel_top h1 {
+  color: #00A387;
+  margin: 0 0 1.75rem;
+}
+
+.panel_text p {
+  font-size: 1rem;
+  font-weight: 400;
+  font-weight: 300;
+  line-height: 1.6;
+  margin: 0 0 9px;
+}
+.panel_text p strong {
+  font-weight: 500;
+  margin: 0 4px;
+}
+
+.tier_cont {
+  padding: 26px 0 0;
+}
+
+.tier_dl {
+  margin: 24px 0 0;
+}
+.tier_dl dt {
+  font-size: 0.875rem;
+  font-weight: 500;
+  font-weight: 700;
+  margin: 0 0 0.25rem;
+}
+.tier_dl dd {
+  font-size: 0.875rem;
+  font-weight: 400;
+  line-height: 1.5;
+}
+.tier_dl dd strong {
+  color: #00A388;
+}
+
+.tab_line {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 0 0 1.75rem;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
+.tab_radio {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.tab_radio .img_on {
+  display: none;
+}
+.tab_radio.on .img {
+  display: none;
+}
+.tab_radio.on .img_on {
+  display: block;
+}
+.tab_radio.on .word {
+  color: #00A387;
+}
+.tab_radio .word {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: #000000;
+  margin: 0 0 0 0.5rem;
+}
+
+/* 01-10 lee css */
+select option[value=""][disabled] {
+  display: none;
+}
+
+.text_point {
+  color: #00A387;
+}
+
+.button_default {
+  margin: 0 0;
+  padding: 0 0;
+  border: none;
+  background: transparent;
+  transition: 0.2s all;
+}
+.button_default:hover {
+  opacity: 0.8;
+}
+.button_default.lightgrey {
+  border: 1px solid #DCDDE0;
+  background-color: #F0F1F5;
+}
+.button_default.darkgrey {
+  background-color: #5C5E66;
+}
+.button_default.darkgrey:hover {
+  opacity: 0.9;
+}
+.button_default.white {
+  border: 1px solid #DCDDE0;
+}
+
+.td_name {
+  font-size: 0.875rem;
+  font-weight: 400;
+  word-break: nowrap;
+  color: #0069CC;
+}
+
+.td_space {
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 15rem;
+  margin: 0 auto;
+  text-align: left;
+  word-break: keep-all;
+}
+
+.users_table th {
+  width: 7.5rem;
+}
+.users_table th:nth-child(6) {
+  width: 16.5rem;
+}
+.users_table th:nth-child(7) {
+  width: 22.5rem;
+}
+.users_table th:nth-child(1), .users_table td:nth-child(1) {
+  width: 52px;
+  padding-left: 1.25rem;
+}
+
+.custom_checkbox input[type=checkbox] {
+  position: absolute;
+  left: -9999px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+.custom_checkbox label {
+  display: block;
+  min-width: 20px;
+  height: 20px;
+  padding-left: 24px;
+  cursor: pointer;
+  background-image: url(../../public/images/checkbox.svg);
+  background-position: left center;
+}
+.custom_checkbox label.on {
+  background-image: url(../../public/images/checkbox_on.svg);
+}
+
+.users_state {
+  font-size: 0.75rem !important;
+  font-weight: 500 !important;
+  width: 3.5rem;
+  height: 1.375rem;
+  margin: 0 auto;
+  border-radius: 4px;
+  line-height: 1.375rem;
+  text-align: center;
+  padding: 0 0.3rem;
+  overflow: hidden;
+}
+.users_state.users_pending {
+  background: #E9EBEE;
+  color: rgba(0, 0, 0, 0.6);
+}
+.users_state.users_rejection {
+  background: #FFE5ED;
+  color: #DB0000;
+}
+.users_state.users_approval {
+  background: #E3F3FF;
+  color: #0068E6;
+}
+.users_state.manager {
+  background: #0068E6;
+  color: #fff;
+  font-weight: 400;
+  min-width: 3.75rem;
+}
+.users_state.sky {
+  background: #00B8E6;
+}
+.users_state.blue {
+  background: #0068E6;
+}
+.users_state.red {
+  background: #E61717;
+}
+.users_state.auto {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 400;
+  width: auto;
+  min-width: 3.375rem;
+  margin: 0;
+}
+
+.help_information_btn {
+  display: flex;
+  position: fixed;
+  z-index: 50;
+  top: 88px;
+  right: 0;
+  width: 32px;
+  height: 44px;
+  border-radius: 5px 0 0 5px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+  background: #1FB0A6;
+}
+.help_information_btn img {
+  position: absolute;
+  z-index: -1;
+  top: 7px;
+  left: 7px;
+  width: 18px;
+  height: 18px;
+}
+.help_information_btn button {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  width: 100%;
+  padding: 0 0 3px;
+  background: none;
+  letter-spacing: 0.025rem;
+}
+
+.toast_popup_box {
+  position: fixed;
+  z-index: 102;
+  top: 16px;
+  right: 16px;
+}
+
+.toast_popup {
+  display: grid;
+  grid-auto-rows: minmax(60px, auto);
+  row-gap: 12px;
+}
+
+.toast_sett {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.toast_box {
+  display: inline-block;
+  min-width: 354px;
+  min-width: 22rem;
+  margin: 0 0 0.75rem;
+}
+
+.toast_in {
+  display: flex;
+  align-items: center;
+  padding: 16px 12px 16px 18px;
+  border-radius: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  background: #E6E7EB;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+}
+.toast_in .button_default {
+  margin-left: auto;
+}
+.toast_in .button_default img {
+  max-width: -moz-fit-content;
+  max-width: fit-content;
+}
+.toast_in .toast_text {
+  font-size: 0.875rem;
+  font-weight: 400;
+  margin: 0 24px 0 12px;
+  line-height: 1.4;
+}
+
+.pop_users, .pop_users_confirm {
+  width: 24.25rem;
+  padding: 1.5rem;
+}
+
+.pop_users_confirm .pop_cont {
+  padding-bottom: 1.5rem;
+}
+
+.pop_paragraph {
+  color: rgba(0, 0, 0, 0.8);
+}
+
+.user_rejection_list {
+  display: inline-block;
+  margin-top: 12px;
+  padding: 4px 48px 4px 8px;
+  border-radius: 4px;
+  background: #E6E7EB;
+}
+.user_rejection_list li {
+  font-size: 0.875rem;
+  font-weight: 400;
+  position: relative;
+  padding-left: 10px;
+  line-height: 1.4rem;
+  color: rgba(0, 0, 0, 0.6);
+}
+.user_rejection_list li:before {
+  position: absolute;
+  left: 0;
+  content: "-";
+}
+
+.border_list {
+  padding: 20px 0;
+  border-top: 1px solid #8A8E99;
+  border-bottom: 1px solid #DCDDE0;
+}
+
+.user_approval_list li {
+  display: flex;
+  align-items: center;
+  margin-top: 12px;
+}
+.user_approval_list li:first-child {
+  margin-bottom: 0;
+}
+.user_approval_list li .text_01 {
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: 113px;
+  color: rgba(0, 0, 0, 0.7);
+}
+.user_approval_list li .text_02 {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.user_approval_list .additional_file {
+  margin-top: 20px;
+  padding-top: 20px;
+  border-top: 1px solid #DCDDE0;
+}
+.user_approval_list .additional_file .text_02 {
+  font-weight: 400;
+  color: #0068E6;
+  text-decoration: underline;
+}
+
+.member_popup_box {
+  position: fixed;
+  z-index: 101;
+  right: 16px;
+  top: 84px;
+  animation: modal-member 0.3s;
+}
+.member_popup_box .pop_body {
+  width: 21rem;
+  overflow: hidden;
+}
+.member_popup_box .member_information {
+  display: flex;
+  align-items: center;
+  padding: 1.5rem 1.5rem 1.25rem;
+  -moz-column-gap: 1rem;
+       column-gap: 1rem;
+}
+.member_popup_box .member_image {
+  width: 54px;
+  overflow: hidden;
+}
+.member_popup_box .member_text {
+  line-height: 1;
+}
+.member_popup_box .member_name {
+  font-size: 1rem;
+  font-weight: 700;
+  margin-bottom: 7px;
+}
+.member_popup_box .member_email {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.7);
+}
+.member_popup_box .member_modify,
+.member_popup_box .member_logout {
+  font-size: 1rem;
+  font-weight: 400;
+  width: 100%;
+  height: 2.75rem;
+  padding-left: 1.5rem;
+  text-align: left;
+}
+.member_popup_box .member_modify {
+  border-top: 1px solid #DCDDE0;
+  border-bottom: 1px solid #DCDDE0;
+  background: #F0F1F5;
+}
+.member_popup_box .member_logout {
+  background-color: #fff;
+}
+
+.modify_confirm_list {
+  margin-top: 1.25rem;
+}
+.modify_confirm_list li {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  margin-bottom: 8px;
+}
+.modify_confirm_list li:last-child {
+  margin-bottom: 0;
+}
+.modify_confirm_list .modify_password_title {
+  font-size: 1rem;
+  font-weight: 400;
+  width: 100px;
+}
+.modify_confirm_list .modify_password_data {
+  align-self: stretch;
+  flex: 1;
+  line-height: 44px;
+  font-weight: 500;
+}
+.modify_confirm_list .wrput {
+  width: 100%;
+  height: 100%;
+}
+
+.form_error_msg {
+  font-size: 0.8125rem;
+  font-weight: 400;
+  position: absolute;
+  left: 20px;
+  bottom: 1px;
+  color: #DB0000;
+}
+
+.member_modify_form {
+  border-radius: 10px;
+  overflow: hidden;
+}
+.member_modify_form .form_row {
+  display: flex;
+  align-items: stretch;
+  height: 4.5rem;
+  border-bottom: 1px solid #DCDDE0;
+}
+.member_modify_form .form_row .button_default {
+  font-size: 0.875rem;
+  font-weight: 400;
+  height: 2rem;
+  border-radius: 4px;
+  text-align: center;
+}
+.member_modify_form .form_title {
+  font-size: 1rem;
+  font-weight: 500;
+  width: 14.75rem;
+  padding: 1.687rem 1rem 0.5rem 1.25rem;
+  padding: 1.687rem 0.5rem 0.5rem 1.25rem;
+  background: #E6E7EB;
+  color: rgba(0, 0, 0, 0.7);
+}
+.member_modify_form .form_contents {
+  flex: 1;
+  max-width: calc((100% - 29.5rem) / 2);
+  position: relative;
+  padding: 1.25rem 2.5rem 0.5rem 1.25rem;
+}
+.member_modify_form .form_contents .wrput {
+  width: 100%;
+}
+.member_modify_form .form_contents.row_last_contents {
+  padding-right: 1.25rem;
+}
+.member_modify_form .form_error_msg {
+  font-size: 0.8125rem;
+  font-weight: 400;
+  position: absolute;
+  left: 20px;
+  bottom: 1px;
+  color: #DB0000;
+}
+.member_modify_form .remark_msg {
+  font-size: 0.875rem;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.5);
+  margin: 1px 0 0;
+}
+.member_modify_form .form_business_registration {
+  min-height: 100px;
+}
+.member_modify_form .form_business_registration .form_contents {
+  max-width: 100%;
+}
+.member_modify_form .form_company_address {
+  height: 112px;
+}
+.member_modify_form .form_company_phone {
+  height: auto;
+  min-height: 78px;
+}
+.member_modify_form .form_profile_image {
+  height: auto;
+}
+.member_modify_form .form_profile_image .button_default {
+  width: 84px;
+  margin-bottom: 10px;
+}
+.member_modify_form .form_profile_image .form_contents {
+  display: flex;
+  align-items: flex-end;
+  max-width: 100%;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+  padding: 1.25rem 2.5rem 1.25rem 1.25rem;
+}
+.member_modify_form .form_profile_image .profile_thumbnail {
+  margin-right: 9px;
+}
+.member_modify_form .form_admin_email {
+  height: 88px;
+}
+.member_modify_form .form_admin_email .button_default {
+  width: 7rem;
+}
+.member_modify_form .form_admin_email .form_contents {
+  display: flex;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  -moz-column-gap: 8px;
+       column-gap: 8px;
+}
+.member_modify_form .form_admin_email .form_contents .dflx {
+  width: 100%;
+}
+.member_modify_form .form_admin_email .wrput {
+  flex: 1;
+}
+.member_modify_form .form_sms_verification {
+  display: flex;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+.member_modify_form .form_sms_verification .button_default {
+  width: 4.25rem;
+}
+.member_modify_form .form_sms_verification .wrput, .member_modify_form .form_sms_verification .put_zone {
+  flex: 1;
+}
+
+.form_find_address {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+.form_find_address .button_default {
+  width: 84px;
+}
+.form_find_address .input01 {
+  flex: 1;
+  width: auto;
+}
+
+.form_email_line {
+  width: 100%;
+  display: flex;
+  gap: 0.5rem;
+}
+.form_email_line .put_zone {
+  flex: 1;
+}
+
+.form_head_phone {
+  display: grid;
+  grid-template-columns: 7rem 1fr;
+  gap: 0.5rem;
+}
+.form_head_phone .selector {
+  width: 7rem;
+  color: rgba(0, 0, 0, 0.5);
+}
+.form_head_phone .remark_msg {
+  font-size: 0.8125rem;
+  font-weight: 400;
+  left: 8.5rem;
+  bottom: 7px;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.form_file_upload {
+  display: flex;
+  align-items: center;
+}
+.form_file_upload .button_default {
+  width: 84px;
+}
+.form_file_upload .form_file_name {
+  font-size: 0.875rem;
+  font-weight: 400;
+  width: auto;
+  max-width: 532px;
+  margin: 0 8px 0 16px;
+  padding: 0 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.form_file_upload + .remark_msg {
+  margin: 0.5rem 0 0;
+  font-size: 0.75rem;
+}
+.form_file_upload .form_file_remove {
+  cursor: pointer;
+}
+
+.form_admin_email .button_default {
+  width: 112px;
+}
+.form_admin_email .remark_msg {
+  display: flex;
+  align-items: flex-start;
+  font-size: 0.75rem;
+  font-weight: 400;
+  bottom: 10px;
+  line-height: 1.5rem;
+  color: rgba(0, 0, 0, 0.7);
+}
+
+.signup_title {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.signup_step_form {
+  margin: 1rem 0 0.5rem;
+  padding: 2rem 0 1.75rem;
+  border-top: 1px solid #8A8E99;
+  border-bottom: 1px solid #DCDDE0;
+}
+.signup_step_form .form_row {
+  display: flex;
+  align-items: flex-start;
+  min-height: 3.75rem;
+  padding: 0 0 0.5625rem;
+}
+.signup_step_form .form_row:last-child {
+  min-height: 2.2rem;
+  padding: 0;
+}
+.signup_step_form .form_row .button_default {
+  font-size: 0.875rem;
+  font-weight: 400;
+  height: 2rem;
+  border-radius: 4px;
+  text-align: center;
+}
+.signup_step_form .form_title {
+  font-size: 0.875rem;
+  font-weight: 500;
+  width: 10.5rem;
+  padding: 0.5rem 0.5rem 0 0;
+}
+.signup_step_form .form_contents {
+  display: flex;
+  position: relative;
+  flex: 1;
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+.signup_step_form .form_contents .wrput {
+  flex: 1;
+}
+.signup_step_form .form_contents .wrput.input01 {
+  flex: auto;
+}
+.signup_step_form .form_contents .form_error_msg {
+  left: 0;
+  bottom: -21px;
+}
+.signup_step_form .form_contents .put_zone {
+  flex: 1;
+}
+.signup_step_form .form_admin_id .button_default {
+  width: 5.25rem;
+}
+.signup_step_form .duplication_checked {
+  position: absolute;
+  top: 0.3rem;
+  right: 6.5rem;
+}
+.signup_step_form .form_admin_email .remark_msg {
+  position: absolute;
+  bottom: -26px;
+}
+.signup_step_form .form_sms_verification .button_default {
+  width: 4.25rem;
+}
+.signup_step_form .form_signup_phone .selector {
+  width: 8rem;
+  color: rgba(0, 0, 0, 0.5);
+}
+.signup_step_form .form_signup_phone .input02 {
+  width: 9rem;
+}
+.signup_step_form .form_signup_phone .remark_msg {
+  font-size: 0.8125rem;
+  font-weight: 400;
+  position: absolute;
+  left: 0;
+  bottom: -21px;
+  color: rgba(0, 0, 0, 0.7);
+}
+.signup_step_form .form_company_name .button_default {
+  width: 4.25rem;
+}
+.signup_step_form .form_business_registration .form_title {
+  align-self: flex-start;
+  padding-top: 6px;
+}
+.signup_step_form .form_business_registration .form_contents {
+  flex-wrap: wrap;
+}
+.signup_step_form .form_business_registration .form_contents .remark_msg {
+  font-size: 0.75rem;
+  font-weight: 400;
+  width: 100%;
+  line-height: 1.25rem;
+  color: rgba(0, 0, 0, 0.5);
+}
+.signup_step_form .form_business_registration .file_result .p_r14 {
+  max-width: 450px;
+}
+.signup_step_form .form_company_address {
+  min-height: 6.25rem;
+}
+.signup_step_form .form_company_address .form_title {
+  align-self: flex-start;
+  padding-top: 6px;
+}
+.signup_step_form .form_find_address {
+  flex: 1;
+}
+.signup_step_form .form_find_address .input02 {
+  width: 100%;
+  flex: auto;
+}
+
+.signup_success .text_point {
+  font-weight: 700;
+}
+.signup_success .remark_msg {
+  font-size: 0.875rem;
+  font-weight: 500;
+  margin-top: 1rem;
+  color: rgba(0, 0, 0, 0.5);
+}
+
+.pop_address_search {
+  width: 24.25rem;
+  padding: 1.5rem 0;
+}
+.pop_address_search .address_search_list {
+  padding: 1.25rem 0 1.5rem;
+}
+.pop_address_search .address_search_list .put_zone {
+  flex: 1;
+}
+.pop_address_search .address_search_list .put_zone .wrput {
+  width: 100%;
+}
+.pop_address_search .pop_top, .pop_address_search .input_sett, .pop_address_search .pop_bottom {
+  width: calc(100% - 3rem);
+  margin: 0 auto;
+}
+.pop_address_search .pop_top {
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #8A8E99;
+}
+.pop_address_search .search_scrollbox {
+  position: relative;
+  padding: 1.5rem 0;
+}
+.pop_address_search .search_scrollbox:after {
+  position: absolute;
+  left: 1.5rem;
+  bottom: 0;
+  width: calc(100% - 3rem);
+  height: 1px;
+  background: #DCDDE0;
+  content: "";
+}
+.pop_address_search .address_result {
+  height: 13.75rem;
+  max-height: 15rem;
+  overflow-y: auto;
+}
+.pop_address_search .address_result::-webkit-scrollbar {
+  width: 4px;
+}
+.pop_address_search .address_result::-webkit-scrollbar-thumb {
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 50px;
+}
+.pop_address_search .address_result::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.pop_address_search .address_result::-webkit-scrollbar-track {
+  background-color: none;
+}
+.pop_address_search .address_result li {
+  display: flex;
+  justify-content: flex-start;
+  min-height: 4.25rem;
+  padding: 0.675rem 1.5rem;
+  cursor: pointer;
+}
+.pop_address_search .address_result li:hover, .pop_address_search .address_result li.on {
+  background: #F0F1F5;
+}
+.pop_address_search .address_result .list_checked {
+  display: none;
+}
+.pop_address_search .address_result .on .list_checked {
+  display: block;
+  align-self: center;
+  margin-left: auto;
+}
+.pop_address_search .result_text * {
+  flex: 1;
+  padding-right: 1rem;
+  color: rgba(0, 0, 0, 0.8);
+}
+.pop_address_search .result_text01 {
+  font-size: 1rem;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+.pop_address_search .result_text02 {
+  font-size: 0.875rem;
+  font-weight: 400;
+}
+
+.row_sett {
+  width: 50%;
+  height: 100%;
+  display: flex;
+}
+
+/*반응형*/
+@media screen and (max-width: 1664px) {
+  .main_center02, .main_center04, .main_center04 {
+    width: 96%;
+  }
+  .member_modify_form .form_contents {
+    max-width: calc((100% - 24rem) / 2 + 12rem);
+    padding: 1.25rem 1.25rem 0.5rem 1.25rem;
+  }
+  .member_modify_form .form_title {
+    width: 12rem;
+  }
+  .form_head_phone {
+    grid-template-columns: 5.5rem 1fr;
+  }
+  .form_head_phone .selector {
+    width: 5.5rem;
+    padding: 0 1.2rem 0 0.6rem;
+  }
+  .form_inner_phone .wrput {
+    padding: 0px 0.75rem;
+  }
+  .status_dl {
+    padding: 1.187rem 0.6rem 0.9375rem 0.5rem;
+  }
+}
+@media screen and (max-width: 1520px) {
+  .main_center01 {
+    width: 90%;
+  }
+  .art02_img {
+    max-width: 70%;
+  }
+  .ani_img_right {
+    max-width: 70%;
+  }
+  .ani_img_left {
+    max-width: 70%;
+  }
+}
+@media screen and (max-width: 1360px) {
+  html, body {
+    font-size: 0.875rem;
+  }
+  .Dash_body {
+    padding-left: 7rem;
+  }
+  .aside {
+    width: 64px;
+    width: 4rem;
+  }
+  .aside_arrow {
+    display: none;
+  }
+  .menu_line .menu_icon {
+    margin: 0px;
+  }
+  .menu_line .menu_tlt {
+    display: none;
+  }
+  .aside_arrow .arr_icon {
+    display: none;
+  }
+  .aside_arrow .arr_icon_on {
+    display: block;
+  }
+  .put_zone .put_check {
+    top: 4px;
+  }
+  .w260 {
+    width: 16.25rem !important;
+  }
+  .member_modify_form .form_business_registration {
+    min-height: 6.25rem;
+  }
+  .member_modify_form .form_company_address {
+    height: 7rem;
+  }
+  .member_modify_form .form_profile_image {
+    height: auto;
+  }
+  .date_put_dl dt {
+    margin: 0 1rem 0 0;
+  }
+  .date_put_dl dd .selector {
+    width: 7rem;
+  }
+  .totall_box {
+    width: 13rem;
+  }
+  .doub_chart_wrap .sales_chart_rcd {
+    width: 9rem;
+    margin: 0;
+    padding: 0.625rem;
+  }
+  .dispose_result .vol_count {
+    font-size: 1.5rem;
+  }
+}
+@media screen and (max-width: 1200px) {
+  .date_put_wrap .date_put_dl:last-child {
+    margin-left: 0rem;
+  }
+  .date_put_dl dt {
+    margin: 0 0.5rem 0 0;
+  }
+  .ani_img_right {
+    max-width: 65%;
+  }
+  .ani_img_left {
+    max-width: 65%;
+  }
+}
+@media screen and (max-width: 992px) {
+  .main_center02, .main_center04, .main_center04 {
+    width: 100%;
+  }
+  .mtitle_wrap.between {
+    flex-direction: column;
+    justify-content: center;
+  }
+  .ani_img_right {
+    max-width: 100%;
+  }
+  .ani_img_left {
+    max-width: 100%;
+  }
+  .main_art02 .msent_dl, .main_art04 .msent_dl {
+    margin: 0 0 4rem -15rem;
+  }
+  .main_art03 .msent_dl {
+    margin: 4rem -15rem 0 0;
+  }
+  .Sign_center {
+    width: 90%;
+    margin: 0 auto;
+  }
+}
\ No newline at end of file
diff --git a/assets/css/template.scss b/assets/css/template.scss
new file mode 100644
index 0000000..08df523
--- /dev/null
+++ b/assets/css/template.scss
@@ -0,0 +1,3933 @@
+/*가이드에서만 쓰이는 레이아웃 스타일*/
+
+@charset "utf-8";
+@import '_mixin.scss';
+/*template*/
+footer {
+	position: fixed;
+    width: 100%;
+	bottom: 0;
+	z-index: 200;
+}
+.main_back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+.main_wrap {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background: var(--bg_02_template);
+    &.main {
+		height: auto;
+		min-height: 100%;
+		overflow: hidden;
+		padding: 16px;
+		padding-top: 88px;
+		padding-left: 244px;
+	}
+}
+.main_contents {
+    width: 100%;
+    height: 100%;
+    position: relative;
+    // background: url("../images/background_img.png");
+    background-repeat: no-repeat;
+    background-size : cover;
+    &.login_ver1 {
+        @include dflx_ac_jend;
+        background: url("../images/login_dark_ver1.png") no-repeat;
+        background-size : cover;
+    }
+    &.error {
+        @include dflx_ac_jcent;
+        background: url("../images/error_background_img.png") no-repeat center center;
+        background-size : cover;
+    }
+    &.error2 {
+        @include dflx_ac_jcent;
+        background-color: #050A1F;
+        background: url("../images/error2_background_img.png") no-repeat center bottom;
+        background-size: contain;
+    }
+}
+.login_wrap {
+	@include dflx_ac_jcent;
+	position: relative;
+	width: 794px;
+	height: 100%;
+	padding: 48px;
+	border-left: 1px solid rgba(255, 255, 255, 0.20);
+	background-color: var(--alpha-wh-to-bkwh-60);
+	box-shadow: -12px 0px 40px 0px rgba(0, 0, 0, 0.40);
+	backdrop-filter: blur(30px);
+}
+.login_logo {
+	position: absolute;
+	height: 120px;
+	bottom: 42px;
+	left: 42px;
+}
+.box_line {
+    &.left {
+        position: absolute;
+        top: 3.5rem;
+        left: 1.25rem;
+        z-index: 100;
+    }
+    &.right {
+        position: absolute;
+        top: 3.5rem;
+        right: 1.25rem;
+        z-index: 100;
+    }
+}
+.infowindow_box {
+    &.main {
+        top: auto;
+        bottom: calc(100% + 0.125rem) !important;
+        left: 50%;
+        transform: translate(-50%, 0);
+        position: absolute;
+    }
+}
+// scroll
+.scroll {
+    &.sc_y {
+        &.table {
+            height: 8.25rem;
+            padding: 0;
+        }
+        &.signal {
+            padding: 0;
+            margin-right: 0.5rem;
+        }
+    }
+}
+// accordion
+.accordion_paragraph {
+    &.signal {
+        padding: 0 0.75rem 1.25rem 1.25rem;
+        height: 16.75rem;
+    }
+}
+.footer_in {
+    @include dflx_as_jbet;
+    width: 100%;
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+    padding-bottom: 1.25rem;
+}
+// table
+.table_box {
+    &.signal {
+        tr {
+            &.selected, &:focus, &.hover {
+                background: rgba(39, 212, 255, 0.2);
+            }
+        }
+        th {
+            position: static;
+            height: 1.75rem;
+        }
+        th, td:not(.disable), td:not(.disabled) {
+            border-right: 0.063rem solid rgba(255, 255, 255, 0.12);
+            &:last-child {border-right: 0;}
+        }
+        td {
+            height: 1.75rem;
+            border-top: 0.188rem solid $bg_default !important;
+            p { 
+                text-align: center !important;
+                cursor: pointer;
+            }
+        }
+    }
+}
+.arrow {
+    &.left {transform: rotate(180deg);}
+    &.up {transform: rotate(270deg);}
+    &.down {transform: rotate(90deg);}
+}
+.login_box {
+    @include dflx_ac_jcent;
+    // top: 33%;
+    // left: 30%;
+    &.login {
+        z-index: 0;
+        width: 44.563rem;
+        padding: 3rem;
+        border-radius: 0.125rem;
+        border: 0.063rem solid rgba(255, 255, 255, 0.21);
+        background: var(--bg_01_80);
+        backdrop-filter: blur(3.75rem);
+    }
+}
+.light_box {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin-right: 20px;
+	margin-top: 8px;
+}
+.error_box {
+    @include dflx;
+    @include backFilter;
+    position: absolute;
+    padding: 3rem;
+    top: 33%;
+    left: 30%;
+    z-index: 0;
+    width: 44.563rem;
+    height: 18.25rem;
+    border-radius: 0.125rem;
+    border:  0.063rem solid rgba(255, 255, 255, 0.21);
+    background: rgba(162, 164, 184, 0.20);
+    backdrop-filter: blur(3.75rem);
+}
+.marker_main {
+    position: absolute;
+    bottom: 40%;
+    left: 50%;
+}
+.indicator{
+    &.main {
+        padding: 1.25rem 0.6rem 1.25rem 1.25rem;
+    }
+    &.signal {
+        padding: 0;
+    }
+}
+.indi_conts {
+    &.del {display: none}
+    &.signal {margin: 0}
+}
+.tmbox_text {
+    @include fs_14_medium;
+    line-height: 1.3;
+}
+.tmbox{
+    &.signal {
+        background-color: transparent;
+        padding: 0;
+        margin-bottom: 1.25rem;
+    }
+}
+// 프로필
+.hd_profile{
+    position: relative;
+    width: 1.875rem;
+    height: 1.25rem;
+    .member_popover{
+        display: none;
+    }
+    &.profile_open{
+        .member_popover, .member_toggle{
+            display: block;
+        }
+        .btn_profile .comma_under8 {
+            opacity: 1;
+            transform: rotate(180deg);
+        }
+        .profile20{
+            opacity: 1;
+        }
+    }
+}
+// 마커
+.marker_main {
+    .tooltip_parents, .infowindow_box.main.on{
+        display: none;
+    }
+    &.marker_hide {
+        .tooltip_parents, .infowindow_box.main.on{
+            display: block;
+        }
+        .img_off {display: none;}
+        .marker_img_selected {display: block;}
+    }
+}
+.fab_wrap{
+    position: absolute;
+    top: 0%;
+    left: 108%;
+    margin-left: 0.5rem;
+}
+// 범례
+.popover_box {
+    &.main {
+        position: absolute;
+        display: none;
+        bottom: 3rem;
+        left: -2.5rem;
+        z-index: 100;
+        &.legend {
+            display: block;
+        }
+        &.pop {
+           display: block;
+        }
+        &.pop_hide {
+            display: none;
+        }
+    }
+}
+// 신호최적화
+.signal_board {
+    width: 100%;
+    height: 100%;
+}
+.signal_content {
+    @include dflx_ac_jcent;
+    column-gap: 1rem;
+    width: 100%;
+    height: 100%;
+    background: var(--bg_02_template);
+}
+.signal_body {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-image: url("../images/signal_body_img.png");
+    background-repeat: no-repeat;
+    background-size : cover !important;
+}
+.accordion_box {
+    position: absolute;
+    margin-top: 0.5rem;
+}
+.indi_top {
+    &.signal {
+        height: 3.5rem;
+        padding: 1.25rem 1rem 1.25rem;
+    }
+}
+.signal_dl {
+    @include dflx_ac;
+    //width: 100%;
+    margin: 0.5rem 0;
+    &:last-child {
+        margin-bottom: 0;
+    }
+    dt {
+		@include fs_13_light;
+		@include dflx_jbet;
+        width: 4rem;
+        padding: 0 1rem 0 0;
+        color: var(--white-w_87-sec);
+    }
+    dd {
+        @include dflx_ac_jbet;
+        flex: 1;
+		column-gap: 0.25rem;
+        .wrput{
+            width: 100%;
+        }
+        .ch_radio:last-child{
+            padding: 0;
+        }
+    }
+    &.check {
+        margin: 1rem 0;
+    }
+}
+// accordion
+.accordion_block {
+    // 포인트
+    &.signal {
+        @include backFilter;
+        .accordion_title:hover:not(.levle2), .hover.accordion_title,
+        .accordion_title:focus {
+            background: var(--primary-pri_20);
+            cursor: pointer;
+        }
+        .accordion_title {
+            background: var(--primary-pri_20);
+            &:hover:not(.disabled),
+            &:hover:not(.point.disabled),
+            &:focus:not(.disabled) {
+                background: var(--primary-pri_20);
+            }
+        }
+        .accordion_contents {
+            background: $bg_grey06;
+        }
+        .accordion_contents.signal {
+            padding: unset;
+        }
+    }
+}
+// map label
+.map_label_line {
+    @include dflx_ac_jcent;
+    position: absolute;
+    width: 100%;
+    bottom: 1.5rem;
+    padding: 0.125rem 0.75rem;
+}
+.map_label {
+    @include fs_20_bold;
+    width: auto;
+    padding: 0.125rem 0.75rem 0.25rem;
+    background-color: #0B1129;
+}
+// 상황관리이력
+.record_wrap {
+    width: 100%;
+    height: 100%;
+    padding-top: 5rem;
+}
+.record_content {
+    width: 100%;
+    height: 100%;
+    padding: 1.25rem;
+    display: grid;
+    grid-auto-rows: 25.75rem auto;
+    row-gap: 1rem;
+}
+.record_box {
+    width: 100%;
+    height: 100%;
+    border: 0.063rem solid var(--line-pri_40-to-wh_40);
+    background: var(--bg_01_80);
+    box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
+    backdrop-filter: blur(1.875rem);
+    padding: 0 1.25rem 1.25rem 1.25rem;
+}
+.record_title {
+    @include fs_16_bold;
+    width: 100%;
+    padding: 1.25rem 1rem 1rem 0;
+    color: #27D4FF;
+}
+.record_box_content {
+    display: flex;
+    column-gap: 1rem;
+    width: 100%;
+    height: calc(100% - 3.25rem);
+}
+.record_grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr;
+    grid-template-rows: 8.125rem auto;
+    column-gap: 1rem;
+    row-gap: 1rem;
+    width: 100%;
+    height: 100%;
+}
+.record_top {
+    display: grid;
+    grid-column-gap: 1rem;
+    width: 9rem;
+}
+.chart_cont_box {
+    height: 100%;
+    width: 9rem;
+}
+.diagon_cont_box {
+    display: grid;
+    grid-column-gap: 1rem;
+}
+.diagon_cont {
+    &.record {
+        width: 9rem;
+        height: 4.875rem;
+    }
+}
+.situation_box {
+    padding: 0.75rem;
+    border-radius: 0.125rem;
+    background: var(--more-visible-wh_6-to-100);
+    &.chart {
+        @include dflx_dcol_jbet;
+        grid-row: 1/3;
+    }
+    &.case1 {
+        grid-row: 1/2;
+        grid-column: 5/6;
+    }
+    &.case2 {
+        grid-row: 1/2;
+        grid-column: 6/7;
+    }
+    &.event {
+        display: grid;
+        grid-column: 5/7;
+        grid-template-columns: 1.5fr 1fr;
+    }
+    h4{
+        @include fs_14_medium;
+        color: var(--white-w_87);
+    }
+}
+.case_wrap {
+    @include dflx;
+    column-gap: 0.5rem;
+    width: 100%;
+    height: calc(100% - 1.125rem);
+}
+.case_box {
+    padding: 0.25rem;
+    border-radius: 0.125rem;
+    background: var(--white-w_6);
+    width: 100%;
+    .case_number {
+        @include dflx_ac_jcent;
+        width: 100%;
+        height: calc(100% - 0.875rem);
+        color: var(--white-w_87);
+    }
+}
+.case_grid {
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 0.5rem;
+    row-gap: 0.5rem;
+}
+.chart_box {
+    @include dflx_ac_jcent;
+    height: calc(100% - 0.875rem);
+    column-gap: 2.5rem;
+}
+.rate_content {
+    display: grid;
+    row-gap: 1rem;
+    height: calc(100% - 3.25rem);
+}
+.rate_box {
+    padding: 0.75rem;
+    border-radius: 0.125rem;
+    background:$bg_grey06;
+    height: 100%;
+    width: 100%;
+}
+.ch_label{
+    @include dflx_ac;
+    .word{
+        @include fs_11_regular;
+        color: rgba(255, 255, 255, 0.87);
+        margin: 0.25rem 0 0.25rem 0.25rem;
+        line-height: 1.1;
+        word-break: keep-all
+    }
+}
+.chart_cont{
+    @include dflx_ac_jcent;
+    position: relative;
+    width: 9rem;
+    height: 4.891rem;
+    padding: 0.5rem;
+    overflow: hidden;
+    background: url(../images/bg_tract.svg) no-repeat left top;
+    background-size: 100% 100%;
+    .chart_tlt {
+        position: absolute;
+        left: 1.25rem;
+        top: 1.25rem;
+        margin-bottom: 0.5rem;
+    }
+    .chart_result{
+        padding: 1rem 0 0;
+    }
+}
+.chart_tlt{
+    @include fs_14_medium;
+    color: $ui_sky;
+    &.cover {
+        width: 86%;
+        padding: 0.75rem 0 0 0.75rem;
+        background: url(../images/bg_tract_top.svg) no-repeat left top;
+        background-size: 100% auto;
+    }
+}
+.chart_result{
+    @include dflx_ae;
+    color: $ui_sky;
+    font-size: 1.5rem;
+    font-weight: 700;
+    column-gap: 0.375rem;
+    .unit{
+        @include fs_14_regular;
+        line-height: 1.7;
+    }
+}
+// check box
+.record_radio {
+    @include dflx_ac;
+    cursor: pointer;
+    .word {
+        color: rgba(255, 255, 255, 0.87);
+    }
+    &.on {
+        .radio {
+            background-color: #fff;
+            border: 0.25rem solid #27d4ff;
+        }
+        .word {
+            color: rgba(255, 255, 255, 0.87);
+        }
+    }
+    .radio {
+        display: inline-block;
+        width: 0.9375rem;
+        height: 0.9375rem;
+        background-color: rgba(255, 255, 255, 0.7);
+        border-radius: 100%;
+        margin: 0 0.5rem 0 0;
+        &.mini{
+            width: 0.625rem;
+            height: 0.625rem;
+            border: 0.125rem solid #27d4ff;
+            margin: 0 0.375rem 0 0;
+        }
+        &.green {border: 0.125rem solid #16D9AB}
+        &.blue {border: 0.125rem solid #07F}
+        &.dark_blue {border: 0.125rem solid #0E44E5}
+        &.purple {border: 0.125rem solid #8972FF}
+        &.dark_purple {border: 0.125rem solid #6E3DFF}
+    }
+    .word {
+       	@include fs_11_light;
+    }
+}
+// 사용자 관리 user
+.user_wrap {
+    width: 100%;
+    height: 100%;
+    padding-top: 2.5rem;
+}
+.user_content {
+    display: flex;
+    column-gap: 1rem;
+    width: 100%;
+    height: 100%;
+    padding: 1.25rem;
+}
+.personal_box, .system_box {
+    @include backFilter;
+    width: 100%;
+    height: 100%;
+    border:  0.063rem solid  rgba(39, 212, 255, 0.40);
+    background: var(--bg_01_80);
+    box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16);
+    width: 28.625rem;
+}
+.user_box {
+    @include backFilter;
+    width: 100%;
+    height: 100%;
+    border:  0.063rem solid  rgba(39, 212, 255, 0.40);
+    background: var(--bg_01_80);
+    box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16);
+    flex: 1;
+}
+.table_inner {
+    width: 100%;
+    height: calc(100% - 2.625rem);
+    padding: 0.875rem 1.25rem 1.25rem 1.25rem;
+}
+.title_box {
+    @include dflx_ac_jbet;
+    flex-wrap: wrap;
+    padding: 1.25rem 1rem 0 1.25rem;
+}
+.user_title {
+    @include fs_16_bold;
+    color: var(--primary-to-grayscale-to-bk);
+    height: 1.5rem;
+}
+.user_btn {
+    height: 1.75rem;
+    padding: 0.5rem 0;
+    word-break: keep-all;
+}
+// error
+.error_logo {
+    position: absolute;
+    top: -10%;
+    left: 50%;
+    transform: translate(-50%, 0);
+    z-index: 1;
+   // width: 4.5rem;
+}
+// logo
+.logo_login {
+    width: 12.5rem;
+}
+// 프로필
+.hd_profile{
+    position: relative;
+    width: 1.875rem;
+    height: 1.25rem;
+    .member_popover{
+        display: none;
+    }
+    &.profile_open{
+        .member_popover, .member_toggle{
+            display: block;
+        }
+        .btn_profile .comma_under8 {
+            opacity: 1;
+            transform: rotate(180deg);
+        }
+        .profile20{
+            opacity: 1;
+        }
+    }
+}
+
+
+/* html data-theme */
+html[data-theme=light] {
+    .main_contents {
+        width: 100%;
+        height: 100%;
+        background-size : cover !important;
+        background: url("../images/background_light_img.png") no-repeat center center;
+    }
+}
+/* html data-theme End */
+
+// netz 참고
+// @import url('https://spoqa.github.io/spoqa-han-sans/css/SpoqaHanSansNeo.css');
+// @import "_helper.scss";
+// @import "_kit.scss";
+// @import "_mixin.scss";
+
+/*reset*/
+*{box-sizing:border-box;}
+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-size: 100%;
+	font: inherit;
+	vertical-align: top;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+html,body{
+	font-size: 1rem;
+}
+body {
+	margin:0px;padding:0px;
+	background:#fff;
+	font-family:"Malgun Gothic","맑은 고딕","Helvetica","AppleGothic",sans-serif;
+	font-family:'Spoqa Han Sans Neo', 'sans-serif';
+	font-weight:400;
+	line-height: 1.3;
+	color: #000000;
+	letter-spacing:0px;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+img{
+ 	max-width:100%;
+}
+img.nomax{
+	max-width: fit-content;
+}
+a {text-decoration:none;cursor:pointer; outline:none; color:#3b3b3b;}
+a:visited{text-decoration:none;}
+a:active{text-decoration:none;}
+a:link{text-decoration:none;}
+a:focus, a:hover {text-decoration:none;}
+input{outline:none; border:none; font-family:'Spoqa Han Sans Neo', 'sans-serif'; color: #000; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
+button{outline:none; border:none; font-family:'Spoqa Han Sans Neo', 'sans-serif'; cursor: pointer;}
+select {outline: none; border: none;font-family: "Spoqa Han Sans Neo", sans-serif; cursor: pointer;}
+textarea{outline:none; border:none; font-family:'Spoqa Han Sans Neo', 'sans-serif'; color: #000;}
+select::-ms-expand {display: none;}
+.tal{text-align: left !important;}
+.tac{text-align: center !important;}
+.tar{text-align: right !important;}
+.dpblock{display: block !important;}
+.dpinblock{display: inline-block !important;}
+.dflx{display: flex !important;}
+.dgrid{display: grid !important;}
+.fleft{float:left !important;}
+.fright{float:right !important;}
+.lett_sp1 {letter-spacing: 1px !important;}
+.lett_sp2{letter-spacing: 2px !important;}
+.lett_sp3{letter-spacing: 3px !important;}
+
+.cl{clear:both;}
+.pos_rel{position: relative !important;}
+.pos_ab{position: absolute !important;}
+.bold{font-weight: bold !important;}
+.blue{color: #3ba1fd;}
+.red{color: #f55;}
+.hauto{height: auto !important;}
+
+input[type=text]::-webkit-input-placeholder{color:rgba(0, 0, 0, 0.5);}
+input[type=text]::-moz-placeholder{color:rgba(0, 0, 0, 0.5);}
+input[type=text]:-ms-input-placeholder {/* Internet Explorer 10-11 */color:rgba(0, 0, 0, 0.5);}
+input[type=text]::-ms-input-placeholder {/* Microsoft Edge */color:rgba(0, 0, 0, 0.5);}
+input[type=password]::-webkit-input-placeholder{color:rgba(0, 0, 0, 0.5); letter-spacing: 0.5px;}
+input[type=password]::-moz-placeholder{color:rgba(0, 0, 0, 0.5); letter-spacing: 0.5px;}
+input[type=password]:-ms-input-placeholder {/* Internet Explorer 10-11 */color:rgba(0, 0, 0, 0.5); letter-spacing: 0.5px;;}
+input[type=password]::-ms-input-placeholder {/* Microsoft Edge */color:rgba(0, 0, 0, 0.5); letter-spacing: 0.5px;}
+input[type=password]{letter-spacing: 1.5px;}
+textarea::-webkit-input-placeholder{color:rgba(0, 0, 0, 0.5);}
+textarea::-moz-placeholder{color:rgba(0, 0, 0, 0.5);}
+textarea:-ms-input-placeholder {/* Internet Explorer 10-11 */color:rgba(0, 0, 0, 0.5);}
+textarea::-ms-input-placeholder {/* Microsoft Edge */color:rgba(0, 0, 0, 0.5);}
+
+body::-webkit-scrollbar{
+	-webkit-appearance: none;
+	background: transparent;
+    width:7px;
+}
+body::-webkit-scrollbar-thumb{
+    background-color:rgba(0, 0, 0, 0.4);
+    border-radius: 50px;
+}
+body::-webkit-scrollbar-track{
+    background-color: transparent;
+	background-color:rgba(0, 0, 0, 0.2);
+}
+body::-webkit-scrollbar-corner {
+	background-color: transparent;
+}
+body::-webkit-scrollbar:horizontal{
+	cursor: pointer;
+    height:6px;
+}
+
+.op03 {
+	opacity: 0.3 !important;
+}
+.op04 {
+	opacity: 0.4 !important;
+}
+.op05 {
+	opacity: 0.5 !important;
+}
+.op06 {
+	opacity: 0.6 !important;
+}
+.op07 {
+	opacity: 0.7 !important;
+}
+.op1 {
+	opacity: 1 !important;
+}
+.dpblock {
+	display: block;
+}
+.dpinblock {
+	display: inline-block;
+}
+.dpinline {
+	display: inline;
+}
+.dpnone {
+	display: none;
+}
+.dflx_as {
+	display: flex;
+	align-items: flex-start;
+}
+.dflx_ac {
+	display: flex;
+	align-items: center;
+}
+.dflx_ae {
+	display: flex;
+	align-items: flex-end;
+}
+.dflx_jbet {
+	display: flex;
+	justify-content: space-between;
+}
+.dflx_dcol_jbet {
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+}
+.dflx_jstart {
+	display: flex;
+	justify-content: flex-start;
+}
+.dflx_jcent {
+	display: flex;
+	justify-content: center;
+}
+.dflx_jend {
+	display: flex;
+	justify-content: flex-end;
+}
+.dflx_ac_jcent {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+.dflx_as_jbet {
+	display: flex;
+	align-items: flex-start;
+	justify-content: space-between;
+}
+.dflx_ac_jbet {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+}
+.dflx_ae_jbet {
+	display: flex;
+	align-items: flex-end;
+	justify-content: space-between;
+}
+.dflx_ac_jend {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+/*reset End*/
+
+.back {
+	// background-color: $bgfff;
+	// color: $col000;
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	z-index: 1;
+}
+.Dash_body{
+	background-color:#F0F0F2;
+	width: 100%;
+	min-height: 100%;
+	overflow: hidden;
+	padding: 1rem;
+	padding-top: 5.5rem;
+	padding-left: 16.5625rem;
+	//transition: 0.2s all;
+	&.respon{
+		padding-left: 112px;
+		padding-left: 7rem;
+	}
+}
+@keyframes in-header {
+    from {
+        opacity: 0;
+        top:-70px;
+    }
+    to {
+        opacity: 1;
+        top: 0px;
+    }
+}
+.header_bg{
+	background-color: #F0F0F2;
+	position: fixed;
+	left: 0px;
+	top: 0px;
+	width: 100%;
+	padding: 1rem 1rem 0px;
+	z-index: 100;
+	&.trans{
+		background-color: transparent;
+	}
+	&.animate{
+		animation: in-header 1s ease-in-out !important;
+	}
+}
+header {
+	width:100%;
+	height: 56px;
+	height: 3.5rem;
+	padding:8px 20px;
+	padding: 0.5rem 1.25rem;
+	// background: $bgdb;
+	// border: 1px solid #000;
+	border-radius: 10px;
+}
+
+.header_in{
+	@include dflx_ac_jbet;
+	width: 100%;
+	height: 100%;
+}
+.header_logo{
+	cursor: pointer;
+	a{
+		display: block;
+		// &.wht{
+		// 	.logo_wh{
+		// 		display: none;
+		// 	}
+		// 	.logo_color{
+		// 		display: block;
+		// 	}
+		// }
+	}
+}
+.header_left{
+	@include dflx_ac;
+	padding: 0 1rem 0.25rem 0;
+	.header_title{
+		margin: 5px 0px 0px 15px;
+	}
+}
+.header_title{
+	@include fs_18_medium;
+	font-weight: 600;
+	color: #fff;
+	letter-spacing: 1px;
+}
+.header_right {
+	@include dflx_ac;
+	padding: 0 0 0 1rem;
+	.user_zone{
+		margin: 0 0 0 1rem;
+	}
+}
+.alarm_zone{
+	@include dflx_ac_jcent;
+	width: 28px;
+	height: 28px;
+	position: relative;
+	cursor: pointer;
+	transition: 0.2s all;
+	&:hover{
+		opacity: 0.8;
+	}
+	.dot{
+		position: absolute;
+		right: 4px;
+		top: 5px;
+	}
+}
+.bell{
+	width: 20px;
+	height: 20px;
+}
+.user_zone{
+	@include dflx_ac;
+	.user_txt{
+		margin: 0px 0px 0px 8px;
+	}
+}
+.user_thumb{
+	@include dflx_ac_jcent;
+	position: relative;
+	width: 28px;
+	height: 28px;
+    position: relative;
+    background-color: #4d6586;
+    //border: 1px solid #DCDDE0;
+    border-radius: 100%;
+    overflow: hidden;
+	cursor: pointer;
+	transition: 0.2s all;
+	&:hover{
+		opacity: 0.8;
+	}
+    .photo_user{
+		@include ab_trans_center;
+		width: 100%;
+		height: auto;
+		transform: translate(-50%, -45%);
+	}
+}
+.user_txt{
+	@include dflx_ac;
+	span{
+		@include fs_14_regular;
+		color: #fff;
+		&.user_name{
+			font-weight: 600;
+		}
+	}
+}
+.user_photo{
+	position: relative;
+	width: 28px;
+	height: 28px;
+    overflow: hidden;
+	cursor: pointer;
+	transition: 0.2s all;
+	&:hover{
+		opacity: 0.8;
+	}
+}
+@keyframes in-aside {
+    from {
+        opacity: 0;
+        left:-50px;
+    }
+    to {
+        opacity: 1;
+        left: 16px;
+    }
+}
+.aside{
+	position: fixed;
+	left: 1rem;
+	top: 5.5rem;
+	width: 13.75rem;
+	height: calc(100% - 6.5rem);
+	max-height: 54rem;
+	background: #fff;
+	border-radius: 10px;
+	&.respon{
+		width: 64px;
+		width: 4rem;
+		.menu_line{
+			.menu_icon {
+				margin: 0px;
+			}
+			.menu_tlt {
+				display: none;
+			}
+		}
+	}
+	&.animate{
+		animation: in-aside 1s ease-in-out !important;
+	}
+}
+.aside_wrap{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	.aside_arrow{
+		position: absolute;
+		right: -1rem;
+		top: 0.5rem;
+		z-index: 10;
+	}
+}
+.aside_arrow {
+	width: 33px;
+	width: 2rem;
+	height: 33px;
+	height: 2rem;
+	background: #fff;
+	border-radius: 100%;
+	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
+	transition: 0.2s all;
+	cursor: pointer;
+	&:hover {
+		opacity: 0.8;
+	}
+	.arr_icon_on{
+		display: none;
+	}
+	&.on{
+		.arr_icon{
+			display: none;
+		}
+		.arr_icon_on{
+			display: block;
+		}
+	}
+}
+.arrow_in {
+	@include dflx_ac_jcent;
+	width: 100%;
+	height: 100%;
+}
+.aside_nav{
+	width: 100%;
+	overflow: hidden;
+}
+.aside_nav li a{
+	display: block;
+}
+.menu_line{
+	@include dflx_ac;
+	width: 100%;
+	height: 56px;
+	padding: 0px 16px;
+	border-left: 4px solid #fff;
+	transition: 0.2s all;
+	.menu_icon{
+		margin: 0px 10px 0px 0px;
+	}
+	.menu_tlt{
+		padding:2px 0px 0px 0px;
+	}
+	&:hover{
+		background-color: #E4F6F3;
+		border-left: 4px solid #E4F6F3;
+		.mn_icon{
+			display: none;
+		}
+		.mn_icon_on{
+			display: block;
+		}
+		.menu_tlt{
+			color: #00A388;
+		}
+	}
+	&.on{
+		background-color: #E4F6F3;
+		border-left: 4px solid #00B295;
+		.mn_icon{
+			display: none;
+		}
+		.mn_icon_on{
+			display: block;
+		}
+		.menu_tlt{
+			color: #00A388;
+		}
+	}
+}
+.mn_icon{
+	opacity: 0.2;
+}
+.mn_icon_on{
+	display: none;
+}
+.menu_tlt {
+	@include fs_15_medium;
+}
+@keyframes in-contents {
+    0% {
+        opacity: 0;
+    }
+	50%{
+		opacity: 0;
+	}
+    100% {
+        opacity: 1;
+    }
+}
+.contents_inner{
+	width: 100%;
+	height: 100%;
+	&.animate{
+		animation: in-contents 2s ease !important;
+	}
+}
+.inner_top{
+	width: 100%;
+	padding: 1rem 0px 2.5rem;
+}
+.inner_title{
+	flex: 1;
+	padding: 0px;
+	h1{
+		padding: 0px 0px 12px;
+		letter-spacing: 0.5px;
+	}
+	.explain{
+		opacity: 0.6;
+		letter-spacing: 0px;
+	}
+}
+.explain{
+	@include fs_16_regular;
+}
+.inner_btzone{
+	@include dflx_jend;
+	padding: 0 0 0 1.25rem;
+	button{
+		margin: 0 0 0 0.5rem;
+	}
+}
+.contents_body{
+	width: 100%;
+}
+.tab_body{
+	width: 100%;
+	display: none;
+	&.on{
+		display: block;
+	}
+}
+.conts_top{
+	@include dflx_jbet;
+	width: 100%;
+	padding: 0 0 1.25rem;
+}
+.cotop_right{
+	padding: 0 0 0 1.25rem;
+	.btn_srch{
+		&.bldark{
+			padding: 0 1rem;
+		}
+	}
+}
+.tabt_line{
+	@include dflx_ac;
+	.btn_tab{
+		margin: 0 0.5rem 0 0;
+	}
+	&.data{
+		margin-top: 4px;
+		margin-bottom: -0.5rem;
+	}
+	&.idpass{
+		width: 100%;
+		margin: 2.375rem 0 0;
+		.tab_nemo{
+			width: 50%;
+		}
+	}
+}
+.tab_nemo{
+	@include fs_15_regular;
+	min-width: 8.25rem;
+	height: 2rem;
+	padding: 0 0.6rem;
+	background: #fff;
+	border: 1px solid #ccc;
+	border-radius:0px;
+	color: #222;
+	transition: 0.2s all;
+	&:first-child{
+		border-radius: 4px 0px 0px 4px;
+		border-radius: 0.25rem 0 0 0.25rem;
+	}
+	&:last-child{
+		border-radius: 0px 4px 4px 0px;
+		border-radius: 0 0.25rem 0.25rem 0;
+	}
+	&:hover {
+		background-color: #e6e7eb;
+	}
+	&.on{
+		background: #E4F6F3;
+		border: 1px solid #00B295;
+		color: #00A388;
+		font-weight: 500;
+	}
+}
+.contents{
+	width: 100%;
+}
+.conts_body{
+	// @include bgfff_p20;
+	width: 100%;
+}
+
+.table_cont{
+	width: 100%;
+	position: relative;
+	overflow: auto;
+	padding: 0 0 0.25rem;
+	min-height: 35.5rem;
+	&.hauto{
+		min-height: auto;
+	}
+	.group_scope{
+		margin: 0 0 2rem;
+	}
+}
+.netz_table{
+	width: 100%;
+	thead{
+		th{
+			@include fs_14_medium;
+			text-align: center;
+			vertical-align: middle;
+			padding: 0.07rem 0.5rem 0rem;
+			height: 2.5rem;
+			background: #E6E7EB;
+			word-break: keep-all;
+			line-height: 1.2;
+			&.rline {
+				border-right: 1px solid #8A8E99;
+			}
+		}
+	}
+	tbody{
+		td{
+			@include fs_14_regular;
+			text-align: center;
+			vertical-align: middle;
+			padding: 0.44rem 0.5rem 0.25rem;
+			height: 3rem;
+			border-bottom: 1px solid #DCDDE0;
+			word-break: keep-all;
+			&.rline{
+				border-right: 1px solid #8A8E99;
+			}
+			&.td_etc{
+				background: #F0F1F5;
+				position: relative;
+				.trash{
+					margin: 0px 4px;
+				}
+			}
+			.file_btwrap{
+				margin: 0px 0px 1px;
+			}
+			.selector,.wrput{
+				width: 100%;
+			}
+		}
+	}
+}
+.manager_table{
+	tbody{
+		td{
+			&:first-child{
+				width: 4.75rem;
+			}
+		}
+	}
+}
+.organ_table{
+	tbody{
+		td{
+			padding: 0.75rem 0.75rem;
+			&:first-child{
+				width: 10%;
+				padding-left: 1.25rem;
+			}
+			&:nth-child(3){
+				width: 50%;
+				padding-left: 1.75rem;
+			}
+		}
+	}
+}
+
+.trash{
+	width: 20px;
+	height: 20px;
+	transition: 0.2s all;
+	cursor: pointer;
+	&:hover{
+		opacity: 0.8;
+	}
+}
+.caption_title{
+	@include fs_16_bold;
+	letter-spacing: 0.5px;
+	padding: 0px 0px 14px;
+	display: block;
+	text-align: left;
+}
+.group_scope{
+	display: inline-block;
+	height: 32px;
+	padding: 0.125rem 1.25rem 0 1rem;
+	background: #F0F1F566;
+	border: 1px solid #DCDDE0;
+	border-radius: 0.5rem;
+	vertical-align: baseline;
+}
+.gr_scope_line{
+	@include dflx_ac;
+	height: 100%;
+	column-gap: 2.25rem;
+}
+.scope_total{
+	@include dflx_ae;
+	@include fs_16_bold;
+	padding: 0 1.25rem 0 0;
+	color: #00B295;
+	line-height: 1;
+	.decimal{
+		@include fs_12_regular;
+	}
+}
+.scope_text{
+	@include dflx_ac;
+	column-gap: 0.5rem;
+	@include fs_16_medium;
+	span{
+		color: rgba(0, 0, 0, 0.5);
+	}
+	.scope_count{
+		@include fs_16_bold;
+	}
+}
+.scope_count{
+	&.sc1{
+		color: #0068E6;
+	}
+	&.sc2{
+		color: #46C2AD;
+	}
+	&.sc3{
+		color: #A7D154;
+	}
+}
+
+.td_txt{
+	@include fs_14_regular;
+	word-break: keep-all;
+	//opacity: 0.8;
+	&.scp1{
+		color: #0068E6;
+		opacity: 1;
+	}
+	&.scp2{
+		color: #00A388;
+		opacity: 1;
+	}
+	&.use{
+		font-weight: 500;
+		color: #0068E6;
+		opacity: 1;
+	}
+	&.un_use{
+		opacity: 0.3;
+	}
+	&.use_txt{
+		font-weight: 500;
+		min-width: 3.25rem;
+		//pacity: 0.8;
+	}
+	&.med{
+		@include fs_14_medium;
+		line-height: 1.6;
+	}
+	&.tell{
+		min-width: 7.5rem;
+	}
+}
+.date_txt{
+	@include fs_14_regular;
+	opacity: 0.4;
+	line-height: 1.2;
+	letter-spacing: -0.5px;
+}
+.td_total{
+	.td_txt{
+		@include fs_12_regular;
+		line-height: 1.4;
+	}
+	&.sum{
+		.td_txt{
+			@include fs_14_medium;
+			color: #0068E6;
+		}
+	}
+}
+.td_facility{
+	.td_txt{
+		min-width:7.5rem;
+	}
+}
+.td_organ{
+	.td_txt{
+		min-width: 3.25rem;
+	}
+}
+.activity_table{
+	tbody{
+		td{
+			padding: 0.875rem 0.7rem 0.56rem;
+		}
+	}
+}
+.paging_space {
+	width: 100%;
+	padding: 1.45rem 0 0.125rem;
+	padding: 1.125rem 0 0.125rem;
+	text-align: center;
+}
+.paging_ul {
+	display: inline-block;
+	text-align: center;
+}
+.paging_ul li {
+	display: inline;
+}
+.paging_ul li a {
+	@include fs_14_regular;
+	display: inline-block;
+	width: 1.75rem;
+	height: 1.75rem;
+	background: #F7F8F9;
+	border-radius: 4px;
+	padding: 6px 6px 4px;
+	margin: 0px 6px;
+	color: rgba(0, 0, 0, 0.7);
+	transition: 0.2s all;
+	&.arrow{
+		background: transparent;
+		padding: 0px;
+	}
+}
+.paging_ul li a.on {
+	background: #E6E7EB;
+	color: rgba(0, 0, 0, 0.7);
+	font-weight: 700;
+}
+.paging_ul li a:hover {
+	opacity: 0.6;
+}
+.evid_table{
+	thead{
+		th{
+			&.th_kinds{
+				width: 28%;
+			}
+			&.th_upload{
+				width: 15%;
+			}
+		}
+	}
+	tbody{
+		td{
+			height: 2.5rem;
+		}
+	}
+}
+.detail_table{
+	tbody{
+		td{
+			height: 2.5rem;
+			&:first-child{
+				width: 23%;
+			}
+		}
+		tr{
+			&:last-child{
+				td{
+					border-bottom: none;
+				}
+			}
+		}			
+	}
+}
+.detail_round{
+	width: 100%;
+	border-radius:0.25rem;
+	overflow: hidden;
+	&.bord{
+		border:1px solid #DCDDE0;
+	}
+}
+.file_btwrap {
+	position: relative;
+	cursor: pointer !important;
+	.file_put{
+		@include ab_trans_center;
+		width: 100%;
+        height: 100%;
+		opacity: 0;
+	}
+}
+.file_result{
+	@include dflx_ac;
+	padding: 0 0 0 0.25rem;
+	&.half{
+		.p_r12{
+			@include txt_ellip;
+		}
+		.put_delete{
+			margin: 0;
+		}
+	}
+    .p_r14 {
+       // max-width: 532px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+		width: calc(100% - 1.25rem);
+    }
+	.put_delete{
+		margin: 0;
+	}
+}
+.plus_zone{
+	@include dflx_ac_jcent;
+	width: 100%;
+	padding: 0.5rem 0;
+}
+.enrolls_cont{
+	margin: 1.25rem 0 0;
+}
+.enrolls_top{
+	@include dflx_jbet;
+	width: 100%;
+	padding: 0px 0px 12px;
+	border-bottom: 1px solid #8A8E99;
+}
+.enrolls_enroll{
+	padding: 12px 0px;
+}
+.dl_enroll{
+	@include dflx_ac;
+	width: 100%;
+	padding: 0.25rem 0;
+	&.trans{
+		padding: 0.5rem 0;
+		dt{
+			opacity: 0.7;
+		}
+	}
+	&.top{
+		padding: 0 0 0.25rem;
+	}
+	dt{
+		@include fs_14_medium;
+		width: 6.25rem;
+		padding: 0 0.75rem 0 0;
+		letter-spacing: 0px;
+		.selector{
+			width: 100%;
+		}
+		.quest{
+			margin: 5px 0 0;
+			cursor: pointer;
+		}
+	}
+	dd{
+		display: flex;
+		flex: 1;
+		.selector{
+			width: 100%;
+		}
+		.wrput{
+			width: 100%;
+		}
+		.tlt{
+			@include fs_14_medium;
+		}
+	}
+}
+.grd_selt_sett{
+	display: grid;
+	grid-template-columns: 6fr 4fr;
+	gap: 0.25rem;
+}
+.grd_selt_sett73{
+	width: 100%;
+	display: grid;
+	grid-template-columns: 7fr 3fr;
+	gap: 0.25rem;
+}
+
+
+/*Main*/
+.header{
+	width:100%;
+	height: 56px;
+	height: 3.5rem;
+	padding:8px 20px;
+	padding: 0.5rem 1.25rem;
+	background: transparent;
+	border:none;
+	border-radius:0px;
+	&.white{
+		.header_title{
+			color:#003278;
+		}
+		.btn_login{
+			background: #FFF;
+			border: 1px solid #DCDDE0;
+			color: #000;
+		}
+		.btn_sign{
+			background: #00B295;
+			color:#fff;
+		}
+		.logo_wh{
+			display: none;
+		}
+		.logo_color{
+			display: block;
+		}
+	}
+}
+// .btn_login.wht{
+// 	background: #FFF;
+// 	border: 1px solid #DCDDE0;
+// 	color: #000;
+// }
+// .btn_sign.wht{
+// 	background: #00B295;
+// 	color:#fff;
+// }
+.logo_color{
+	display: none;
+}
+.Main_body{
+	background-color: #F0F0F2;
+    width: 100%;
+    min-height: 100%;
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
+}
+.main_art01{
+	width: 100%;
+	height: 100vh;
+	position: relative;
+	background-color: #002252;
+	background-repeat: no-repeat;
+	background-position: center center;
+	background-position: 40% center;
+	background-size: cover;
+}
+.main_ab_trans{
+	position: absolute;
+	left: 0px;
+	top: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 1;
+}
+.main_wrap{
+	position: relative;
+	width: 100%;
+	height: 100%;
+}
+.main_center01{
+	width: 94.5rem;
+	margin: 0 auto;
+	height: 100%;
+	padding:2rem;
+	background: transparent;
+}
+.mtitle_wrap{
+	@include dflx_ac_jend;
+	width: 100%;
+	height: 100%;
+	&.left{
+		justify-content: flex-start;
+	}
+	&.between{
+		@include dflx_ac_jbet;
+	}
+}
+.mtitle_dl{
+	text-align: left;
+	padding: 0.5rem 1rem 0 0;
+	dt{
+		font-size:2rem;
+		font-weight:600;
+		color: #fff;
+		line-height: 1.3;
+		letter-spacing: 1.8px;
+	}
+	dd{
+		.mtitle_exp{
+			@include fs_16_regular;
+			color: #fff;
+			letter-spacing: 0.8px;
+			margin:1.3rem 0 0;
+		}
+		.btn_default{
+			margin:2.75rem 0 0;
+		}
+	}
+}
+
+@keyframes moveScroll {
+	50% {
+		transform: translate(-50%, -20px);
+	}
+}
+.go_ready {
+	position: absolute;
+	left: 50%;
+	bottom: -10px;
+	width:100px;
+	height:auto;
+	z-index: 10;
+	transform: translateX(-50%);
+	//animation: moveScroll 2s infinite;
+	color: #fff;
+	text-align: center;
+	//cursor: pointer;
+	img{
+		width: 100%;
+		margin-top: -25px;
+	}
+	span{
+		@include fs_14_regular;
+	}
+}
+
+.main_art02{
+	width: 100%;
+	height: 100vh;
+	position: relative;
+	background-color: #F0F0F2;
+}
+.main_center02{
+	width: 106rem;
+    margin: 0 auto;
+    height: 100%;
+    padding: 2rem;
+    background: transparent;
+}
+.main_art03{
+	width: 100%;
+	height: 100vh;
+	position: relative;
+	background-color: #fff;
+}
+.msent_dl{
+	color: #000;
+	margin: 0 0 3rem;
+	dt{
+		@include fs_20_bold;
+		margin: 0 0 1.25rem;
+		line-height: 1.4;
+	}
+	dd{
+		@include fs_16_regular;
+		line-height: 1.8;
+	}
+}
+
+@keyframes slideRight{ 
+	0% {
+		opacity:0; 
+		transform:translateX(200px);
+	} 
+	100% {
+		opacity:1; 
+		transform:translateY(0);
+	}
+}
+
+.art_img_right{
+	max-width: 75%;
+	margin: 1rem -12.5rem 0 0;
+	animation-duration: 1s !important;
+	animation-delay: 0s !important;
+}
+.art_img_left{
+	max-width: 75%;
+	margin: 1rem 0 0 -13rem;
+	animation-duration: 1s !important;
+	animation-delay: 0s !important;
+}
+.ani_img_right{
+	max-width: 75%;
+	margin: 1rem -12.5rem 0 0;
+}
+.ani_img_left{
+	max-width: 75%;
+	margin: 1rem 0 0 -13rem;
+}
+
+.main_art04{
+	width: 100%;
+	height: 100vh;
+	position: relative;
+	background-color: #F0F0F2;
+}
+
+.date_put_wrap{
+	@include dflx_ac;
+	// .date_put_dl{
+	// 	&:last-child{
+	// 		margin-left:4.25rem;
+	// 	}
+	// }
+}
+.date_put_dl{
+	@include dflx_ac;
+	dt{
+		@include dflx_ac;
+		@include fs_14_medium;
+		margin: 0 1.5rem 0 0;
+		line-height: 1;
+		word-break: keep-all;
+	}
+	dd{
+		@include dflx_ac;
+		.selector {
+			width: 8.15rem;
+		}
+	}
+}
+.grd_date_sett{
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-gap: 0.5rem;
+}
+.btzone_last{
+	@include dflx_ae_jcent;
+	width: 100%;
+	padding: 1.5rem 0 0;
+	button{
+		margin: 0 0.25rem;
+	}
+}
+.list_contain{
+	width: 100%;
+	border-radius: 0.625rem;
+	margin-bottom: 1rem;
+}
+.contain_top{
+	width: 100%;
+	height: 3.5rem;
+	padding: 0.8rem 1rem 0.5rem;
+	background-color: #D2D3D6;
+	border-radius: 0.625rem 0.625rem 0 0;
+	.h3_m16{
+		letter-spacing: 0.5px;
+	}
+}
+.contain_body{
+	width: 100%;
+	padding: 1.25rem;
+	background-color: #fff;
+	border-radius: 0 0 0.625rem 0.625rem;
+}
+.data_top{
+	@include dflx_ac_jbet;
+	width: 100%;
+}
+.datas_cont {
+	width: 100%;
+	position: relative;
+	overflow: auto;
+	.plus_zone{
+		border-top: 1px solid #DCDDE0;
+	}
+}
+.datas_table{
+	width: 100%;
+	thead{
+		th{
+			background-color: #fff;
+			border-bottom: 1px solid #DCDDE0;
+			text-align: left;
+			vertical-align: top;
+			height: 2rem;
+			padding-top: 4px;
+			.unit{
+				font-size: 0.75rem;
+				opacity: 0.7;
+				vertical-align: baseline;
+			}
+		}
+	}
+	tbody{
+		tr{
+			td {
+				padding: 0.5rem 0.6rem;
+				border: none;
+				&.td_delete {
+					padding: 0.5rem 0rem 0.5rem 0.6rem;
+				}
+				&:first-child{
+					padding-left: 0;
+					width: 7%;
+				}
+				&:nth-child(3){
+					width: 15%;
+				}
+			}
+			&:first-child{
+				td{
+					padding-top: 1rem;
+				}
+			}
+			&:last-child{
+				td{
+					padding-bottom: 1rem;
+				}
+			}
+		}
+	}
+}
+.tr_datas{
+	&.del{
+		display: none;
+	}
+}
+.add_contain{
+	width: 100%;
+	height: 7.25rem;
+	padding: 1.25rem;
+	background: rgba(255, 255, 255, 0.4);
+	border: 1px dashed #bebfc2;
+	border-radius: 0.625rem;
+	cursor: pointer;
+	&:hover{
+		background: #E4F6F3 0% 0%;
+		border: 1px dashed #00B295;
+	}
+}
+.add_button{
+	@include dflx_ac;
+	margin: 5px 0px 0px;
+	cursor: pointer;
+	.plus24{
+		margin: 0px 6px 0px 0px;
+		opacity: 0.3;
+	}
+	span{
+		@include fs_16_medium;
+		line-height: 1.6;
+	}
+}
+.grd_month_set{
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	grid-gap: 0.5rem;
+	.selector{
+		width: 6.5rem;
+		&.short{
+			width: 9.5rem;
+		}
+	}
+}
+.anlay_top{
+	width: 100%;
+	padding: 0px 0px 1.5rem;
+	border-bottom: 1px solid #D2D3D6;
+	&.nobord{
+		border: none;
+		padding: 0 0 2.5rem;
+	}
+}
+.volume_body{
+	// @include bgfff_p20;
+	padding: 0.75rem;
+}
+.analy_volume{
+	width: 100%;
+	height: 7.44rem;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-gap: 0.625rem;
+}
+.volume_result{
+	@include dflx_ac_jcent;
+	width: 100%;
+    height: 100%;
+    padding: 0.75rem 0 0;
+    position: relative;
+	.top{
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: calc(100% - 3rem);
+		display: flex;
+		align-items: center;
+	}
+}
+.volume_count{
+	@include dflx_ae_jcent;
+	.vol_count{
+		line-height: 1;
+	}
+	.p_r12{
+		color: #00000080;
+		margin: 0 0.5rem;
+	}
+}
+.vol_count{
+	font-size: 2.25rem;
+	font-weight: 700;
+	color: #00B295;
+	line-height: 1;
+	word-break: break-all;
+	+ .decimal{
+		@include fs_12_regular;
+		color: #00B295;
+	}
+	&.bldark{
+		color: #002252;
+		+ .decimal{
+			color: #002252;
+		}
+	}
+	&.sky{
+		color: #00B8E6;
+		+ .decimal{
+			color: #00B8E6;
+		}
+	}
+	&.blue{
+		color: #0068E6;
+		+ .decimal{
+			color: #0068E6;
+		}
+	}
+	&.red{
+		color: #E61717;
+		+ .decimal{
+			color: #E61717;
+		}
+	}
+}
+.anlay_conts{
+	width: 100%;
+	padding: 1.25rem 0 0;
+}
+.analy_body{
+	// @include bgfff_p20;
+}
+.chart_top{
+	@include dflx_ae_jbet;
+	width: 100%;
+	margin: 0 0 1rem;
+	line-height: 1;
+}
+.analy_charts{
+	display: grid;
+	grid-template-columns: repeat(12, 1fr);
+	grid-auto-rows: minmax(20.88rem, auto);
+	grid-gap: 1.25rem;
+	.analy_body{
+		&:first-child{
+			grid-column:1/7;
+		}
+		&:nth-child(2){
+			grid-column:7/14;
+		}
+		&:nth-child(3){
+			grid-column:1/9;
+		}
+		&:nth-child(4){
+			grid-column:9/14;
+		}
+	}
+}
+.chart_unit{
+	@include fs_12_regular;
+	color: rgba(0, 0, 0, 0.5);
+}
+.chart_cont{
+	width: 100%;
+}
+.doub_chart_wrap{
+	@include dflx_jbet;
+	width: 100%;
+	height: 16.25rem;
+	.chart_cont{
+		flex: 1;
+		&.bord_dash{
+			border-right: 1px dashed #BEBFC2;
+		}
+	}
+	.sales_chart_rcd{
+		margin: 0 0.5rem 0 0;
+	}
+	.scope_step{
+		margin-right: -1.2rem;
+	}
+}
+.sales_chart_rcd{
+	width: 10.875rem;
+	height: 100%;
+	background: rgba(240, 241, 245, 0.4);
+	border: 1px solid rgba(220, 221, 224, 1);
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+	.selector{
+		&.dispose{
+			margin-top: -4px;
+		}
+	}
+}
+.totall_box{
+	@include dflx;
+	width:16.25rem;
+	height: 2rem;
+	padding: 0.3rem 1rem 0.2rem;
+	background: #FFF;
+	border: 1px solid #DCDDE0;
+	border-radius: 4px;
+	overflow: hidden;
+	.wrput{
+		border: none;
+		width: 100%;
+		height: 100%;
+		text-align: right;
+		padding: 0 4px 0 0;
+	}
+	.unit{
+		font-size: 0.875rem;
+		line-height: 1.6;
+	}
+}
+
+.amcharts-amexport-menu{
+	display: none !important;
+}
+
+.sales_dispose{
+	@include dflx_ac_jcent;
+	width: 100%;
+	height:100%;
+	padding: 0;
+	position: relative;
+	.date{
+		position: absolute;
+		left: 0px;
+		top: 0px;
+		&.dash{
+			top: auto;
+			bottom: 0px;
+		}
+	}
+	.selector{
+		position: absolute;
+		left: 0px;
+		top: 0px;
+	}
+}
+.dispose_result{
+	 text-align: center;
+	.vol_count{
+		font-size: 2rem;
+		margin: 1rem 0 0.5rem;
+	}
+}
+.date{
+	@include fs_12_regular;
+	color: rgba(0, 0, 0, 0.5);
+}
+.chart_wrap {
+	width: 100%;
+	height: 16.625rem;
+	overflow: hidden;
+	&.reduce{
+		height: 28rem;
+		padding: 1rem 0 0;
+		position: relative;
+		.chart_unit{
+			position: absolute;
+			left: 0;
+			top: 0;
+		}
+	}
+	.chart_cont{
+		height: 100%;
+	}
+}
+.ratio_wrap{
+	.chart_cont{
+		padding: 1rem;
+	}
+}
+.scope_zone{
+	width: 100%;
+	height: 100%;
+	padding: 0.75rem;
+	background: #F0F1F566 0% 0%;
+	border: 1px solid #DCDDE0;
+	border-radius: 0.5rem;
+	position: relative;
+	overflow: hidden;
+	.chart_unit{
+		@include fs_11_regular;
+		position: absolute;
+		right: 12px;
+		top: 8px;
+	}
+	.chart_cont{
+		width: 100%;
+		height: 145%;
+    	margin-top: -0.25rem;
+	}
+}
+.scope_step{
+	width: auto;
+    padding: 1rem 0px 0px 0.3rem;
+	.p_r14:first-child{
+		height: 55%;
+	}
+	.p_r14:nth-child(2){
+		height: 22%;
+	}
+}
+
+.reduce_volume{
+	width: 100%;
+    height: 11.25rem;
+	padding: 0 0 0.75rem;
+    display: grid;
+    grid-template-columns:1.4fr 1fr 1fr 1fr;
+    grid-gap: 0.625rem;
+	border-bottom: 1px solid #D2D3D6;
+	.scope_zone{
+		padding: 1rem;
+		.chart_unit{
+			right: 0;
+			top: 0;
+		}
+	}
+}
+.volume_last{
+	@include dflx_jcent;
+	width: 100%;
+	padding: 1.25rem 0 0.5rem;
+}
+.reduce_sett{
+	width: 80%;
+	padding: 0.3rem 0 0 0.5rem;
+	.dl_enroll{
+		dt{
+			@include fs_16_bold;
+			width: 10.5rem;
+			padding: 0 0.5rem 0 0;
+			.mini{
+				@include fs_12_regular;
+				color: rgba(0, 0, 0, 0.5);
+				letter-spacing: -0.5px;
+			}
+		}
+	}
+}
+
+footer{
+	width: 100%;
+	height: 8.375rem;
+	background-color: #5C5E66;
+	padding: 2rem 2.25rem;
+}
+.footer_in{
+	width: 100%;
+	padding: 2px 0 0;
+	@include dflx_jbet;
+}
+.footer_left{
+	min-width:15.25rem;
+	padding: 0 1rem 0 0;
+	.copy{
+		@include fs_11_regular;
+		font-weight: 300;
+		color: #fff;
+		margin: 3px 0 0;
+	}
+}
+.footer_right{
+	flex: 1;
+}
+.copy_right{
+	width: 100%;
+	padding: 2px 0 0;
+	p{
+		@include fs_12_regular;
+		font-weight: 300;
+		color: #fff;
+		line-height: 1.8;
+		letter-spacing: 0.8px;
+	}
+}
+.circle_arrow{
+	position: fixed;
+	@include dflx_ac_jcent;
+	right: 20px;
+	right: 1.25rem;
+	bottom: 20px;
+	bottom: 1.25rem;
+	width: 3rem;
+	height: 3rem;
+	background: rgba(0, 0, 0, 0.6);
+	border-radius: 100%;
+	z-index: 100;
+	cursor: pointer;
+
+	visibility: hidden;
+	opacity: 0;
+	transition: 0.3s all;
+	&.on{
+		visibility: visible;
+		opacity: 1;
+	}
+	&:hover{
+		background: rgba(0, 0, 0, 1);
+	}
+}
+
+.analy_charts2{
+	display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-auto-rows: minmax(21.25rem, auto);
+    grid-gap: 1.25rem;
+	// .analy_body{
+	// 	&:first-child{
+	// 		grid-column:1/2;
+	// 	}
+	// 	&:nth-child(2){
+	// 		grid-column:2/3;
+	// 	}
+	// }
+}
+.charts_line{
+	@include dflx_jbet;
+	width: 100%;
+	.half{
+		width: 50%;
+		padding:0 0 0 1.25rem;
+		&:first-child{
+			border-right: 1px solid #DCDDE0;
+			padding: 0 1.25rem 0 0;
+		}
+	}
+}
+.scope_chart{
+	width: 100%;
+    height: 21.25rem;
+	position: relative;
+	.scope_sign{
+		position: absolute;
+		left: 0px;
+		top:0px;
+	}
+	.chart_unit{
+		position: absolute;
+		right: 0px;
+		top: 0px;
+		font-size: 0.6875rem;
+	}
+	.chart_cont{
+		height: 100%;
+		padding: 0.5rem;
+		//z-index: 5;
+	}
+}
+.chart_inner{
+	position: relative;
+	width: 100%;
+	background: #F0F1F566;
+	border: 1px solid #DCDDE0;
+	border-radius: 0.5rem;
+	padding: 0.75rem;
+	.top{
+		text-align: center;
+		margin: 0.5rem 0 1rem;
+		line-height: 1.2;
+	}
+	.chart_unit{
+		@include fs_11_regular;
+		position: absolute;
+		right: 1rem;
+		top: 1rem;
+	}
+}
+.scope_sign{
+	@include dflx_ac_jcent;
+	min-width: 95px;
+	padding: 0.25rem 1rem 0.23rem;
+	background: #00B295;
+	border-radius: 4px;
+	color: #fff;
+	text-align: center;
+	font-size: 1rem;
+	line-height: 1.2;
+}
+
+.Sign_body{
+	@include dflx_ac_jcent;
+	width: 100%;
+	min-height: 100%;
+	background-color: #F0F0F2;
+	padding: 1rem;
+}
+.Sign_center{
+	width: 50.5rem;
+	margin: 4.3rem auto;
+	background-color: transparent;
+}
+.sign_top{
+	width: 100%;
+	height: 5.125rem;
+	padding: 0.75rem;
+	background: #002252;
+	border-radius: 10px;
+	margin: 0 0 1rem;
+}
+.sign_contents{
+	width: 100%;
+	background-color: #fff;
+	border-radius: 10px;
+	padding: 1.5rem;
+}
+.sign_sequence{
+	@include dflx_ac_jbet;
+	margin: 0 0 5.625rem;
+}
+.sequence_cont{
+	@include dflx_ac_jend;
+}
+.seq_dl{
+	@include dflx_ac;
+	margin: 0 0 0 0.625rem;
+	opacity: 0.3;
+	dt{
+		@include dflx_ac_jcent;
+		@include fs_12_regular;
+		margin: 0 6px 0 0;
+		width: 26px;
+		height: 26px;
+		border: 1px solid #000;
+		background-color: #fff;
+		border-radius: 100%;
+        line-height: 1;
+	}
+	dd{
+		@include dflx_ac;
+		line-height: 1;
+		.call{
+			@include fs_14_medium;
+			margin: 0 0.5rem 0 0;
+		}
+		.line{
+			width: 30px;
+			height: 1px;
+			background-color: #000;
+		}
+	}
+	&.on{
+		opacity: 1;
+		dt{
+			background: #00B295;
+			border: 1px solid #00B295;
+			color: #fff;
+		}
+		dd{
+			.call{
+				color: #00B295;
+			}
+			.line{
+				background-color: #00B295;
+			}
+		}
+	}
+}
+.terms_contain{
+	width: 100%;
+}
+.terms_full{
+	padding: 0 0 5px;
+	border-bottom: 1px solid #8A8E99;
+}
+.check_dl{
+	@include dflx;
+	width: 100%;
+	padding: 0 0 0.5rem;
+	cursor: pointer;
+	dt{
+		width: 1.75rem;
+	}
+	dd{
+		flex: 1;
+	}
+}
+.check_box{
+	width: 1.25rem;
+	height:1.25rem;
+	cursor: pointer;
+	.icon_on{
+		display: none;
+	}
+	&.on{
+		.icon{
+			display: none;
+		}
+		.icon_on{
+			display: block;
+		}
+	}
+}
+.terms_sent{
+	@include fs_14_medium;
+	line-height: 1.4;
+	&.full{
+		@include fs_16_bold;
+		color: #00A388;
+	}
+}
+.terms_cont{
+	width: 100%;
+	padding: 0.9375rem 0 0.5rem;
+    ::-webkit-scrollbar {
+        width: 8px;
+    }
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba(0, 0, 0, 0.4);
+        border-radius: 50px;
+    }
+    ::-webkit-scrollbar-corner {
+        background-color: transparent;
+    }
+    ::-webkit-scrollbar-track {
+        background-color: none;
+    }
+    .temrs_text_wrap {
+        border: 1px solid #DCDDE0;
+        padding:0.875rem 0.25rem 0.25rem 1rem;
+    }
+}
+.terms_area{
+	width: 100%;
+	height: 8rem;
+    padding-right: 1.5rem;
+	background-color: #fff;
+	overflow: auto;
+	font-size: 0.875rem;
+	color: rgba(0, 0, 0, 0.7);
+	line-height: 1.5rem;
+    resize: none
+}
+.btzone_between{
+	@include dflx_jbet;
+	width: 100%;
+	padding: 1rem 0 0;
+}
+.analy_charts3{
+	display: grid;
+	grid-template-columns: repeat(4, 1fr);
+    grid-auto-rows: minmax(21.25rem, auto);
+    grid-gap: 1.25rem;
+	.analy_body{
+		&:first-child{
+			grid-column: 1/3;
+		}
+		&:nth-child(2){
+			grid-column: 3/4;
+		}
+		&:nth-child(3){
+			grid-column: 4/5;
+		}
+		&:nth-child(4){
+			grid-column: 1/3;
+		}
+		&:nth-child(5){
+			grid-column: 3/5;
+		}
+		&:nth-child(6){
+			grid-column: 1/5;
+		}
+	}
+}
+.status_vert_wrap{
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	.chart_cont{
+		height: calc(100% - 1rem);
+		padding: 1.6rem 0 0;
+	}
+}
+.status_dl{
+	@include dflx_ac_jbet;
+	width: 100%;
+	height: 3.75rem;
+	padding: 1.187rem 1.5rem 0.9375rem 1.2rem;
+	background: #F0F1F566;
+	border: 1px solid #DCDDE0;
+	border-radius: 8px;
+	dt{
+		@include fs_14_regular;
+		margin: 0.25rem 0.25rem 0 0;
+		word-break: keep-all;
+	}
+}
+.scope_result{
+	color: #00B295;
+	word-break: keep-all;
+	.unit{
+		margin:0 0 1px 1px;
+	}
+}
+.plus20{
+	@include dflx_ac_jcent;
+	width: 1.25rem;
+	height: 1.25rem;
+}
+.see_more{
+	@include dflx_ac;
+	transition: 0.2s all;
+	&:hover{
+		opacity: 0.8;
+	}
+	.plus20{
+		opacity: 0.3;
+		margin: 0 0.25rem 0 0;
+	}
+}
+
+.profile_photo{
+	width: 5.25rem;
+	height: 5.25rem;
+	margin: 0px 8px 0px 0px;
+	position: relative;
+	cursor: pointer;
+	.img_camera{
+		position: absolute;
+		right: 0px;
+		bottom: 0px;
+		z-index: 10;
+	}
+}
+.circle_photo{
+	position: relative;
+	width:100%;
+	height:100%;
+	background-color: #F0F1F5;
+	border: 1px solid #DCDDE0;
+	border-radius: 100%;
+	overflow: hidden;
+	.photo_user{
+		@include ab_trans_center;
+		width: 100%;
+		height: auto;
+		transform: translate(-50%, -45%);
+		z-index: 1;
+	}
+}
+.photo_upload{
+    position: absolute;
+    z-index: 9;
+    right: -6px;
+    bottom: 0;
+}
+.member_photo{
+	width: 3.375rem;
+	height: 3.375rem;
+	position: relative;
+	overflow: hidden;
+}
+.form_inner_phone{
+	display: grid;
+	grid-template-columns: 2fr 1fr;
+	gap: 0.5rem;
+}
+.alarm_top{
+	@include dflx_jbet;
+	width: 100%;
+	border-bottom: 1px solid #DCDDE0;
+	padding: 1.5rem 1.5rem 1.25rem;
+    column-gap: 1rem;
+}
+.alarm_cont{
+	width: 100%;
+	padding: 1.5rem 1.5rem 1.25rem;
+	&.grey{
+		background-color: #F0F1F5;
+	}
+	.timer{
+		margin: 0.25rem 0 0;
+	}
+}
+.point_dl{
+	@include dflx_as;
+	width: 100%;
+	dt{
+		width: 0.875rem;
+		height: 0.875rem;
+		.point{
+			margin: 0.375rem 0 0;
+		}
+	}
+	dd{
+		@include fs_14_regular;
+		flex: 1;
+		.timer{
+			padding: 0.25rem 0 0;
+		}
+	}
+}
+.alarm_inner{
+	padding: 0 0 0 0.875rem;
+}
+.alarm_detail{
+	padding: 1rem 0 0;
+	h4{
+		line-height: 1.6;
+	}
+	.p_r14{
+		letter-spacing: 0.5px;
+	}
+}
+.point{
+	display: inline-block;
+	width: 0.375rem;
+	height: 0.375rem;
+	background: #C8C9CC;
+	border-radius: 100%;
+	&.on{
+		background: #00B295;
+	}
+}
+.timer{
+	@include dflx_ac;
+	@include fs_11_regular;
+	span{
+		opacity: 0.4;
+	}
+}
+
+.right_panel{
+	position: fixed;
+	top: 0px;
+	right: -28rem;
+	width: 25.625rem;
+	height: 100%;
+	padding: 1.25rem 0 1.25rem 1.25rem;
+	background: #fff;
+	box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
+	border-radius: 1.25rem 0 0 1.25rem;
+	z-index: 700;
+	transition: 0.3s all;
+	&.on{
+		right: 0px;
+	}
+	.panel_inner{
+		padding: 0 1rem 0 0;
+	}
+}
+
+.panel_inner::-webkit-scrollbar{
+	-webkit-appearance: none;
+    width:8px;
+}
+.panel_inner::-webkit-scrollbar-thumb{
+    background-color:rgba(0, 0, 0, 0.4);
+    border-radius: 50px;
+	cursor: pointer;
+}
+.panel_inner::-webkit-scrollbar-track{
+	width:8px;
+    background-color: none;
+}
+.panel_inner::-webkit-scrollbar-corner {
+	background-color: transparent;
+}
+
+.panel_inner{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	padding: 0;
+	overflow: hidden;
+	overflow-y: auto;
+	.panel_close{
+		position: absolute;
+		left: 0px;
+		top: 0px;
+	}
+}
+.panel_close{
+	display: inline-block;
+	width: 28px;
+	height: 28px;
+	cursor: pointer;
+	&:hover{
+		opacity: 0.7;
+	}
+}
+.panel_top{
+	width: 100%;
+	padding: 4.75rem 0 0;
+	h1{
+		color: #00A387;
+		margin: 0 0 1.75rem;
+	}
+}
+.panel_text{
+	p{
+		@include fs_16_regular;
+		font-weight: 300;
+		line-height: 1.6;
+		margin: 0 0 9px;
+		strong{
+			font-weight: 500;
+			margin: 0 4px;
+		}
+	}
+}
+.tier_cont{
+	padding: 26px 0 0;
+}
+.tier_dl{
+	margin: 24px 0 0;
+	dt{
+		@include fs_14_medium;
+		font-weight: 700;
+		margin: 0 0 0.25rem
+	}
+	dd{
+		@include fs_14_regular;
+		line-height: 1.5;
+		strong{
+			color: #00A388;
+		}
+	}
+}
+// .form_contents{
+// 	.put_zone{
+// 		.mess{
+// 			margin: 2px 0 0;
+// 		}
+// 	}
+// }
+.tab_line{
+	@include dflx_ac;
+	width: 100%;
+	padding: 0 0 1.75rem;
+	column-gap: 0.5rem;
+}
+.tab_radio{
+	@include dflx_ac;
+	cursor: pointer;
+	.img_on{
+		display: none;
+	}
+	&.on{
+		.img{
+			display: none;
+		}
+		.img_on{
+			display: block;
+		}
+		.word{
+			color: #00A387;
+		}
+	}
+	.word{
+		@include fs_14_medium;
+		color: #000000;
+		margin: 0 0 0 0.5rem;
+	}
+}
+
+
+/* 01-10 lee css */
+select option[value=""][disabled] {
+	display: none;
+}
+.text_point {
+    color: #00A387;
+}
+.button_default {
+    margin: 0 0;
+    padding: 0 0;
+    border: none;
+    background: transparent;
+    transition: 0.2s all;
+	&:hover{
+		opacity: 0.8;
+	}
+    &.lightgrey {
+        border: 1px solid #DCDDE0;
+        background-color: #F0F1F5;
+    }
+    &.darkgrey {
+        background-color: #5C5E66;
+        // color: $colfff;
+        &:hover{
+			opacity: 0.9;
+		}
+    }
+    &.white {
+        border: 1px solid #DCDDE0;
+        // background-color: $colfff;
+    }
+}
+.td_name {
+    @include fs_14_regular;
+    //cursor: pointer;
+    word-break: nowrap;
+    color: #0069CC;
+}
+.td_space {
+    @include fs_14_regular;
+    width: 15rem;
+	margin: 0 auto;
+	text-align: left;
+    word-break: keep-all;
+    //opacity: 0.8;
+}
+.users_table {
+    th {width: 7.5rem;}
+    th:nth-child(6) {width: 16.5rem;}
+    th:nth-child(7) {width: 22.5rem;}
+    th:nth-child(1), td:nth-child(1) {
+        width: 52px;
+        padding-left: 1.25rem;
+    }
+}
+.custom_checkbox {
+    input[type=checkbox] {
+        position: absolute;
+        left: -9999px;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+    }
+    label {
+        // @include rpno_cent_cent;
+        display: block;
+        min-width: 20px;
+        height: 20px;
+        padding-left: 24px;
+        cursor: pointer;
+        background-image: url(../../public/images/checkbox.svg);
+        background-position: left center;
+    }
+
+    label.on {
+        background-image: url(../../public/images/checkbox_on.svg);
+    }
+}
+.users_state {
+    @include fs_12_medium;
+    width: 3.5rem;
+    height: 1.375rem;
+    margin: 0 auto;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    line-height: 1.375rem;
+    text-align: center;
+	padding: 0 0.3rem;
+    overflow: hidden;
+    &.users_pending {
+        background: #E9EBEE;
+        color: rgba(0, 0, 0, 0.6)
+    }
+    &.users_rejection {
+        background: #FFE5ED;
+        color: #DB0000;
+    }
+    &.users_approval {        
+        background: #E3F3FF;
+        color: #0068E6;
+    }
+	&.manager{
+		background: #0068E6;
+		color: #fff;
+		font-weight: 400;
+		min-width:3.75rem;
+	}
+	&.sky{
+		background: #00B8E6;
+	}
+	&.blue{
+		background: #0068E6;
+	}
+	&.red{
+		background: #E61717;
+	}
+	&.auto{
+		@include dflx_ac_jcent;
+		color: #fff;
+		font-weight: 400;
+		width: auto;
+		min-width: 3.375rem;
+		margin: 0;
+	}
+}
+.help_information_btn {
+    display: flex;
+    position: fixed;
+    z-index: 50;
+    top: 88px;
+    right: 0;
+    width: 32px;
+    height: 44px;
+    border-radius: 5px 0 0 5px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
+    background: #1FB0A6;
+    img {
+        position: absolute;
+        z-index: -1;
+        top: 7px;
+        left: 7px;
+        width: 18px;
+        height: 18px;
+    }
+    button {
+        @include dflx_ae_jcent;
+        @include fs_11_medium;
+        width: 100%;
+        padding: 0 0 3px;
+        background: none;
+        letter-spacing: 0.025rem;
+        // color: $colfff;
+    }
+}
+.toast_popup_box {
+    position: fixed;
+    z-index: 102;
+    top: 16px;
+    right: 16px;
+}
+.toast_popup {
+    display: grid;
+    grid-auto-rows: minmax(60px, auto);
+    row-gap: 12px;
+}
+.toast_sett{
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+}
+.toast_box{
+	display: inline-block;
+	min-width:354px;
+	min-width: 22rem;
+	margin: 0 0 0.75rem;
+}
+.toast_in{
+	@include dflx_ac;
+	padding: 16px 12px 16px 18px;
+	-webkit-border-radius: 8px;
+	-moz-border-radius: 8px;
+	border-radius: 8px;
+	border: 1px solid rgba(255, 255, 255, 0.2);
+	background: #E6E7EB;
+	box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+	.button_default {
+		margin-left: auto;
+		img{
+			max-width: fit-content;
+		}
+	}
+    .toast_text {
+        @include fs_14_regular;
+        margin: 0 24px 0 12px;
+		line-height: 1.4;
+    }
+}
+
+// 이용자 반려 팝업
+.pop_users, .pop_users_confirm {width: 24.25rem; padding: 1.5rem;}
+.pop_users_confirm {
+    .pop_cont {
+        padding-bottom: 1.5rem;
+    }
+}
+.pop_paragraph { 
+    color: rgba(0, 0, 0, 0.8)
+}
+.user_rejection_list {
+    display: inline-block;
+    margin-top: 12px;
+    padding: 4px 48px 4px 8px;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    background: #E6E7EB;
+    li {
+        @include fs_14_regular;
+        position: relative;
+        padding-left: 10px;
+        line-height: 1.4rem;
+        color: rgba(0, 0, 0, 0.6);
+        &:before {
+            position: absolute;
+            left: 0;
+            content: "-";
+        }
+    }
+}
+// 이용자 확인 팝업
+.border_list {    
+    padding: 20px 0;
+    border-top: 1px solid #8A8E99;
+    border-bottom: 1px solid #DCDDE0;
+}
+.user_approval_list {
+    li {
+        @include dflx_ac;
+        margin-top: 12px;
+        &:first-child {margin-bottom: 0}
+        .text_01 {            
+            @include fs_14_regular;
+            width: 113px;
+            color: rgba(0, 0, 0, 0.7);
+        }
+        .text_02 {
+            @include fs_14_medium;
+        }
+    }
+    .additional_file {
+        margin-top: 20px;
+        padding-top: 20px;
+        border-top: 1px solid #DCDDE0;
+        .text_02 {
+            font-weight: 400;
+            color: #0068E6;
+			text-decoration: underline;
+        }
+    }
+}
+// 회원관리 모달
+.member_popup_box {
+    position: fixed;
+    z-index: 101;
+	right: 16px;
+	top: 84px;
+    animation: modal-member .3s;
+    .pop_body {
+        //width: 336px;
+		width: 21rem;
+        overflow: hidden;
+    }
+    .member_information {
+        @include dflx_ac;
+        padding: 1.5rem 1.5rem 1.25rem;
+        column-gap: 1rem;
+    }
+    .member_image {
+        width: 54px;
+        overflow: hidden;
+    }
+    .member_text {
+        line-height: 1;
+    }
+    .member_name {
+        @include fs_16_bold;
+        margin-bottom: 7px;
+    }
+    .member_email {
+        @include fs_14_regular;
+        color: rgba(0, 0, 0, 0.7);
+    }
+    .member_modify,
+    .member_logout {
+        @include fs_16_regular;
+        width: 100%;
+        height: 2.75rem;
+        padding-left: 1.5rem;
+        text-align: left;
+    }
+    .member_modify {
+        border-top: 1px solid #DCDDE0;
+        border-bottom: 1px solid #DCDDE0;
+        background: #F0F1F5;
+    }
+    .member_logout {
+        background-color: #fff;
+    }
+}
+
+// 회원 정보 변경 팝업
+.modify_confirm_list {
+    margin-top: 1.25rem;
+    li {
+        @include dflx_ac;
+        height: 44px;
+        margin-bottom: 8px;
+        &:last-child {margin-bottom: 0}
+    }
+    .modify_password_title {
+        @include fs_16_regular;
+        width: 100px;
+    }
+    .modify_password_data {
+        align-self: stretch;
+        flex: 1;
+        line-height: 44px;
+        font-weight: 500;
+    }
+    .wrput {
+        width: 100%;
+        height: 100%;
+    }
+}
+// 회원정보 변경 입력 폼
+$btn_w84: 84px;
+
+.form_error_msg {
+    @include fs_13_regular;
+    position: absolute;
+    left: 20px;
+    bottom: 1px;
+    color: #DB0000
+}
+.member_modify_form {
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+    overflow: hidden;
+    .form_row {
+        display: flex;
+        align-items: stretch;
+        //height: 72px;
+		height: 4.5rem;
+        border-bottom: 1px solid #DCDDE0;
+        // background: $colfff;
+        //&:last-child {border-bottom: 0;}
+        .button_default {
+            @include fs_14_regular;
+            height: 2rem;
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            border-radius: 4px;
+            text-align: center;
+        }
+    }
+    .form_title {
+        @include fs_16_medium;
+		width: 14.75rem;
+		padding: 1.687rem 1rem 0.5rem 1.25rem;
+		padding: 1.687rem 0.5rem 0.5rem 1.25rem;
+        background: #E6E7EB;
+        color:rgba(0, 0, 0, 0.7);
+    }
+    .form_contents {
+        flex: 1;
+		max-width: calc((100% - 29.5rem) / 2);
+        position: relative;
+		padding: 1.25rem 2.5rem 0.5rem 1.25rem;
+        .wrput {
+            width: 100%;
+            //max-width: 532px;
+			//max-width: 32.5rem;
+        }        
+        &.row_last_contents {
+			padding-right: 1.25rem;
+        }
+    }    
+    .form_error_msg {
+        @include fs_13_regular;
+        position: absolute;
+        left: 20px;
+        bottom: 1px;
+        color: #DB0000
+    }
+    .remark_msg {
+        @include fs_14_regular;
+        // position: absolute;
+        // bottom: 19px;
+        color: rgba(0, 0, 0, 0.5);
+		margin:1px 0 0;
+    }
+    .form_business_registration{
+        min-height: 100px;
+        .form_contents {
+            max-width: 100%;
+        }
+    }
+    .form_company_address{
+        height: 112px;        
+    }
+    .form_company_phone{
+		height: auto;
+        min-height: 78px;
+    }   
+    .form_profile_image {
+        height: auto;
+        .button_default {           
+			width: $btn_w84; 
+            margin-bottom: 10px
+        }
+        .form_contents {
+            @include dflx_ae;
+			max-width: 100%;
+            column-gap: 0.5rem;
+			padding: 1.25rem 2.5rem 1.25rem 1.25rem;
+        }
+        .profile_thumbnail { 
+            margin-right: 9px;
+        }
+    }    
+    .form_admin_email {
+        height: 88px;
+        .button_default {width: 7rem;}
+        .form_contents {
+            @include dflx_as;
+            flex-wrap: wrap;
+            column-gap: 8px;
+            .dflx {    width: 100%;}
+        }
+        .wrput {flex: 1;}
+    }
+    .form_sms_verification {
+        @include dflx;
+        column-gap: 0.5rem;
+        .button_default {width: 4.25rem;}
+        .wrput, .put_zone {flex: 1;}
+    }
+}
+.form_find_address {
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    .button_default {width: $btn_w84;}   
+    .input01 {
+        flex: 1;
+        width: auto;
+    }
+}
+.form_email_line{
+	width: 100%;
+	display: flex;
+	gap: 0.5rem;
+	.put_zone{
+		flex: 1;
+	}
+}
+.form_head_phone {
+	display: grid;
+    grid-template-columns: 7rem 1fr;
+    gap: 0.5rem;
+    .selector {
+        width: 7rem;
+        color:rgba(0, 0, 0, 0.5);
+    }
+    .remark_msg {
+        @include fs_13_regular;     
+        left: 8.5rem;
+        bottom: 7px;       
+        color:rgba(0, 0, 0, 0.7);
+    }
+}
+.form_file_upload {
+    @include dflx_ac;
+    .button_default {width: $btn_w84;}     
+    .form_file_name {
+        @include fs_14_regular;
+        width: auto;
+        max-width: 532px;
+        margin: 0 8px 0 16px;
+        padding: 0 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    + .remark_msg{
+        margin: 0.5rem 0 0;
+		font-size: 0.75rem;
+    }
+	// + .message{
+	// 	margin: 0.5rem 0 0;
+	// }
+    .form_file_remove {cursor: pointer;}
+}
+.form_admin_email {
+    .button_default {width: 112px;}
+    .remark_msg {
+        @include dflx_as;
+        @include fs_12_regular;
+        bottom: 10px;
+        line-height: 1.5rem;
+        color: rgba(0, 0, 0, 0.7);
+    }
+}
+// 회원가입 단계
+.signup_title{
+    @include fs_16_bold;
+}
+.signup_step_form {
+    margin: 1rem 0 0.5rem;
+    padding: 2rem 0 1.75rem;
+    border-top:  1px solid #8A8E99;
+    border-bottom:  1px solid #DCDDE0;
+    .form_row {
+        //@include dflx_ac;
+		@include dflx_as;
+        //height: 2rem;
+        //margin-bottom: 1.75rem;
+		min-height:3.75rem;
+		padding: 0 0 0.5625rem;
+        // background: $colfff;
+        &:last-child {
+			min-height: 2.2rem;
+			padding: 0;
+		}
+        .button_default {
+            @include fs_14_regular;
+            height: 2rem;
+            -webkit-border-radius: 4px;
+            -moz-border-radius: 4px;
+            border-radius: 4px;
+            text-align: center;
+        }
+    }
+    .form_title {
+        @include fs_14_medium;
+        width: 10.5rem;
+		padding: 0.5rem 0.5rem 0 0;
+    }
+    .form_contents {
+        //@include dflx_ac;
+		@include dflx;
+        position: relative;
+        flex: 1;
+        column-gap: 0.5rem;
+        .wrput {
+            flex: 1;
+			&.input01{
+				flex: auto;
+			}
+        }
+        .form_error_msg {
+            left: 0;
+            bottom: -21px;
+        }
+		.put_zone{
+			flex: 1;
+		}
+    }
+    .form_admin_id{
+        .button_default {width: 5.25rem;}
+    }
+    .duplication_checked {
+        position: absolute;
+        top: 0.3rem;
+        right: 6.5rem;
+    }
+    .form_admin_email {
+		//min-height: 2.6rem !important;
+        .remark_msg {
+            position: absolute;
+            bottom: -26px;
+        }
+    }
+    .form_sms_verification {
+        .button_default {
+            width: 4.25rem;
+        }
+    }
+    .form_signup_phone {
+        .selector {
+            width: 8rem;
+            color: rgba(0, 0, 0, 0.5);
+        }
+        .input02 {
+            width: 9rem;
+        }
+        .remark_msg {
+            @include fs_13_regular;
+            position: absolute;
+            left: 0;
+            bottom: -21px;
+            color:rgba(0, 0, 0, 0.7);
+        }
+    }
+    .form_company_name {
+        .button_default {width: 4.25rem;}
+    }
+    .form_business_registration {
+		//min-height: 6.5rem;
+        .form_title {
+            align-self: flex-start;
+            padding-top: 6px;
+        }
+        .form_contents {
+            flex-wrap: wrap;
+            .remark_msg {
+                @include fs_12_regular;
+                width: 100%;
+                line-height: 1.25rem;
+                color: rgba(0, 0, 0, 0.5);
+            }
+        }
+        .file_result .p_r14 {
+            max-width: 450px;
+        }
+    }
+    .form_company_address {
+		min-height: 6.25rem;
+        .form_title {
+            align-self: flex-start;
+            padding-top: 6px;
+        }
+    }
+    .form_find_address { 
+        flex: 1;
+        .input02 {width: 100%; flex: auto;}
+    }
+}
+
+// 가입완료 팝업
+.signup_success {
+    .text_point {
+        font-weight: 700;
+    }
+    .remark_msg {
+        @include fs_14_medium;
+        margin-top: 1rem;
+        color: rgba(0, 0, 0, 0.5);
+    }
+}
+.pop_address_search{
+	width: 24.25rem;
+    padding: 1.5rem 0;
+    
+    .address_search_list {    
+        padding: 1.25rem 0 1.5rem;
+        .put_zone {
+            flex: 1;
+            .wrput {width: 100%;}
+        }
+    }
+    .pop_top, .input_sett, .pop_bottom {
+        width: calc(100% - 3rem);
+        margin: 0 auto;
+    }
+    .pop_top {        
+        padding-bottom: 1rem;
+        border-bottom:  1px solid #8A8E99;
+    }
+    .search_scrollbox{
+        position: relative;
+        padding: 1.5rem 0;      
+        &:after {
+            position: absolute;
+            left: 1.5rem;
+            bottom: 0;
+            width: calc(100% - 3rem);
+            height: 1px;
+            background: #DCDDE0;
+            content: "";
+        }
+    }
+    .address_result {
+        height: 13.75rem;
+        max-height: 15rem;
+        overflow-y: auto;  
+        
+        &::-webkit-scrollbar {
+            width: 4px;
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: rgba(0, 0, 0, 0.4);
+            border-radius: 50px;
+        }
+        &::-webkit-scrollbar-corner {
+            background-color: transparent;
+        }
+        &::-webkit-scrollbar-track {
+            background-color: none;
+        }
+
+        li {
+            @include dflx_jstart;
+            min-height: 4.25rem;
+            padding: 0.675rem 1.5rem;
+            cursor: pointer;
+            &:hover, &.on {
+                background: #F0F1F5;
+            }
+        }
+        .list_checked {display: none;}
+        .on .list_checked {
+            display: block;
+            align-self: center;
+            margin-left: auto;
+        }
+    }
+    .result_text * {
+        flex: 1;
+        padding-right: 1rem;
+        color: rgba(0, 0, 0, 0.8);
+    }
+    .result_text01 {   
+        @include fs_16_medium;
+        margin-bottom: 8px
+    }
+    .result_text02 {
+        @include fs_14_regular;
+    }
+}
+
+.row_sett{
+	width: 50%;
+	height: 100%;
+	display: flex;
+}
+
+
+
+/*반응형*/
+@media screen and (max-width: 1664px) {
+	.main_center02,.main_center04,.main_center04{
+		width: 96%;
+	}
+	.member_modify_form{
+		.form_contents{
+			max-width: calc((100% - 24rem) / 2 + 12rem);
+			padding: 1.25rem 1.25rem 0.5rem 1.25rem;
+		}
+		.form_title{
+			width: 12rem;
+		}
+	}
+	.form_head_phone{
+		grid-template-columns: 5.5rem 1fr;
+		.selector{
+			width: 5.5rem;
+			padding: 0 1.2rem 0 0.6rem;
+		}
+	}
+	.form_inner_phone{
+		.wrput{
+			padding: 0px 0.75rem;
+		}
+	}
+	.status_dl{
+		padding: 1.187rem 0.6rem 0.9375rem 0.5rem;
+	}
+}
+
+@media screen and (max-width: 1520px) {
+	.main_center01{
+		width: 90%;
+	}
+	.art02_img{
+		max-width: 70%;
+	}
+	.ani_img_right{
+		max-width: 70%;
+	}
+	.ani_img_left{
+		max-width: 70%;
+	}
+}
+
+@media screen and (max-width: 1360px) {
+	html, body{
+		font-size: 0.875rem;
+	}
+	.Dash_body{
+		padding-left: 7rem;
+	}
+	.aside {
+		width:64px;
+		width: 4rem;
+	}
+	.aside_arrow{
+		display: none;
+	}
+	.menu_line{
+		.menu_icon{
+			margin: 0px;
+		}
+		.menu_tlt{
+			display: none;
+		}
+	}
+	.aside_arrow .arr_icon{
+		display: none;
+	}
+	.aside_arrow .arr_icon_on{
+		display: block;
+	}
+	.put_zone{
+		.put_check{
+			top:4px;
+		}
+	}
+	.w260{
+		width: 16.25rem !important;
+	}
+	.member_modify_form{
+		.form_business_registration{
+			min-height: 6.25rem;
+		}
+		.form_company_address{
+			height: 7rem;
+		}
+		.form_profile_image{
+			height: auto;
+		}
+	}
+	.date_put_dl{
+		dt{
+			margin: 0 1rem 0 0;
+		}
+		dd{
+			.selector{
+				width: 7rem;
+			}
+		}
+	}
+	.totall_box{
+		width: 13rem;
+	}
+	.doub_chart_wrap{
+		.sales_chart_rcd{
+			width: 9rem;
+			margin: 0;
+			padding: 0.625rem;
+		}
+	}
+	.dispose_result{
+		.vol_count{
+			font-size: 1.5rem;
+		}
+	}
+	
+}
+
+@media screen and (max-width: 1200px) {
+	.date_put_wrap{
+		.date_put_dl{
+			&:last-child{
+				margin-left: 0rem;
+			}
+		}
+	}
+	.date_put_dl{
+		dt{
+			margin: 0 0.5rem 0 0;
+		}
+	}
+	.ani_img_right{
+		max-width: 65%;
+	}
+	.ani_img_left{
+		max-width: 65%;
+	}
+}
+
+@media screen and (max-width: 992px) {
+	.main_center02,.main_center04,.main_center04{
+		width: 100%;
+	}
+	.mtitle_wrap{
+		&.between{
+			flex-direction: column;
+			justify-content: center;
+		}
+	}
+	.ani_img_right{
+		max-width: 100%;
+	}
+	.ani_img_left{
+		max-width: 100%;
+	}
+	.main_art02,.main_art04{
+		.msent_dl{
+			margin: 0 0 4rem -15rem;
+		}
+	}
+	.main_art03{
+		.msent_dl{
+			margin: 4rem -15rem 0 0;
+		}
+	}
+	.Sign_center{
+		width: 90%;
+		margin: 0 auto;
+	}
+}
diff --git a/assets/fonts/.DS_Store b/assets/fonts/.DS_Store
new file mode 100644
index 0000000..66faf17
Binary files /dev/null and b/assets/fonts/.DS_Store differ
diff --git a/assets/fonts/LICENSE b/assets/fonts/LICENSE
new file mode 100644
index 0000000..8d00146
--- /dev/null
+++ b/assets/fonts/LICENSE
@@ -0,0 +1,94 @@
+Copyright (c) 2015-10-09, Spoqa (spoqa.com),
+with Reserved Font Name Spoqa Han Sans.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/assets/fonts/LICENSE_OFL.txt b/assets/fonts/LICENSE_OFL.txt
new file mode 100644
index 0000000..d952d62
--- /dev/null
+++ b/assets/fonts/LICENSE_OFL.txt
@@ -0,0 +1,92 @@
+This Font Software is licensed under the SIL Open Font License,
+Version 1.1.
+
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font
+creation efforts of academic and linguistic communities, and to
+provide a free and open framework in which fonts may be shared and
+improved in partnership with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply to
+any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software
+components as distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to,
+deleting, or substituting -- in part or in whole -- any of the
+components of the Original Version, by changing formats or by porting
+the Font Software to a new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed,
+modify, redistribute, and sell modified and unmodified copies of the
+Font Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components, in
+Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the
+corresponding Copyright Holder. This restriction only applies to the
+primary font name as presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created using
+the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/assets/fonts/glyphs.txt b/assets/fonts/glyphs.txt
new file mode 100644
index 0000000..df72c5a
--- /dev/null
+++ b/assets/fonts/glyphs.txt
@@ -0,0 +1,7 @@
+ㄱㄲㄳㄴㄵㄶㄷㄸㄹㄺㄻㄼㄽㄾㄿㅀㅁㅂㅃㅄㅅㅆㅇㅈㅉㅊㅋㅌㅍㅎㅏㅐㅑㅒㅓㅔㅕㅖㅗㅘㅙㅚㅛㅜㅝㅞㅟㅠㅡㅢㅣㆍㆎⅰⅱⅲⅳⅴⅵⅶⅷⅸⅹⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ
+　、。·‥…¨〃‘’“”‹›«»〔〕[]〈〉《》「」『』【】±×÷≠≤≥∞∴°′″℃Å￠￡￥♂♀∠⊥⌒∂∇≡≒§※☆★○●◎◇◆ □■△▲▽▼→←↑↓↔〓≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃´˜ˇ˘˝˚˙¸˛¡¿∶∮∑∏¤℉‰◁◀▷▶♤♠♡♥♧♣⊙◈▣◐◑▒▤▥▨▧▦▩♨☏☎☜☞¶†‡↕↗↙↖↘♭♩♪♬㉿㈜ №㏇™㏂㏘℡
+¥ $ ₩￦
+㉠㉡㉢㉣㉤㉥㉦㉧㉨㉩㉪㉫㉬㉭㉮㉯㉰㉱㉲㉳㉴㉵㉶㉷㉸㉹㉺㉻ⓐⓑⓒⓓⓔⓕⓖⓗⓘⓙⓚⓛⓜⓝⓞⓟⓠⓡⓢ ⓣⓤⓥⓦⓧⓨⓩ①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮½⅓⅔¼¾⅛⅜⅝⅞
+㈀㈁㈂㈃㈄㈅㈆㈇㈈㈉㈊㈋㈌㈍㈎㈏㈐㈑㈒㈓㈔㈕㈖㈗㈘㈙㈚㈛⒜⒝⒞⒟⒠⒡⒢⒣⒤⒥⒦⒧⒨⒩⒪⒫⒬⒭⒮ ⒯⒰⒱⒲⒳⒴⒵⑴⑵⑶⑷⑸⑹⑺⑻⑼⑽⑾⑿⒀⒁⒂¹²³⁴ⁿ₁₂₃₄
+!"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\]^_`abcdefghijklmnopqrstuvwxyz{|}~가각간갇갈갉갊감갑값갓갔강갖갗같갚갛개객갠갤갬갭갯갰갱갸갹갼걀걋걍걔걘걜거걱건걷걸걺검겁것겄겅겆겉겊겋게겐겔겜겝겟겠겡겨격겪견겯결겸겹겻겼경곁계곈곌곕곗고곡곤곧골곪곬곯곰곱곳공곶과곽관괄괆괌괍괏광괘괜괠괩괬괭괴괵괸괼굄굅굇굉교굔굘굡굣구국군굳굴굵굶굻굼굽굿궁궂궈궉권궐궜궝궤궷귀귁귄귈귐귑귓규균귤그극근귿글긁금급긋긍긔기긱긴긷길긺김깁깃깅깆깊까깍깎깐깔깖깜깝깟깠깡깥깨깩깬깰깸깹깻깼깽꺄꺅꺌꺼꺽꺾껀껄껌껍껏껐껑께껙껜껨껫껭껴껸껼꼇꼈꼍꼐꼬꼭꼰꼲꼴꼼꼽꼿꽁꽂꽃꽈꽉꽐꽜꽝꽤꽥꽹꾀꾄꾈꾐꾑꾕꾜꾸꾹꾼꿀꿇꿈꿉꿋꿍꿎꿔꿜꿨꿩꿰꿱꿴꿸뀀뀁뀄뀌뀐뀔뀜뀝뀨끄끅끈끊끌끎끓끔끕끗끙끝끼끽낀낄낌낍낏낑나낙낚난낟날낡낢남납낫났낭낮낯낱낳내낵낸낼냄냅냇냈냉냐냑냔냘냠냥너넉넋넌널넒넓넘넙넛넜넝넣네넥넨넬넴넵넷넸넹녀녁년녈념녑녔녕녘녜녠노녹논놀놂놈놉놋농높놓놔놘놜놨뇌뇐뇔뇜뇝뇟뇨뇩뇬뇰뇹뇻뇽누눅눈눋눌눔눕눗눙눠눴눼뉘뉜뉠뉨뉩뉴뉵뉼늄늅늉느늑는늘늙늚늠늡늣능늦늪늬늰늴니닉닌닐닒님닙닛닝닢다닥닦단닫달닭닮닯닳담답닷닸당닺닻닿대댁댄댈댐댑댓댔댕댜더덕덖던덛덜덞덟덤덥덧덩덫덮데덱덴델뎀뎁뎃뎄뎅뎌뎐뎔뎠뎡뎨뎬도독돈돋돌돎돐돔돕돗동돛돝돠돤돨돼됐되된될됨됩됫됴두둑둔둘둠둡둣둥둬뒀뒈뒝뒤뒨뒬뒵뒷뒹듀듄듈듐듕드득든듣들듦듬듭듯등듸디딕딘딛딜딤딥딧딨딩딪따딱딴딸땀땁땃땄땅땋때땍땐땔땜땝땟땠땡떠떡떤떨떪떫떰떱떳떴떵떻떼떽뗀뗄뗌뗍뗏뗐뗑뗘뗬또똑똔똘똥똬똴뙈뙤뙨뚜뚝뚠뚤뚫뚬뚱뛔뛰뛴뛸뜀뜁뜅뜨뜩뜬뜯뜰뜸뜹뜻띄띈띌띔띕띠띤띨띰띱띳띵라락란랄람랍랏랐랑랒랖랗래랙랜랠램랩랫랬랭랴략랸럇량러럭런럴럼럽럿렀렁렇레렉렌렐렘렙렛렝려력련렬렴렵렷렸령례롄롑롓로록론롤롬롭롯롱롸롼뢍뢨뢰뢴뢸룀룁룃룅료룐룔룝룟룡루룩룬룰룸룹룻룽뤄뤘뤠뤼뤽륀륄륌륏륑류륙륜률륨륩륫륭르륵른를름릅릇릉릊릍릎리릭린릴림립릿링마막만많맏말맑맒맘맙맛망맞맡맣매맥맨맬맴맵맷맸맹맺먀먁먈먕머먹먼멀멂멈멉멋멍멎멓메멕멘멜멤멥멧멨멩며멱면멸몃몄명몇몌모목몫몬몰몲몸몹못몽뫄뫈뫘뫙뫼묀묄묍묏묑묘묜묠묩묫무묵묶문묻물묽묾뭄뭅뭇뭉뭍뭏뭐뭔뭘뭡뭣뭬뮈뮌뮐뮤뮨뮬뮴뮷므믄믈믐믓미믹민믿밀밂밈밉밋밌밍및밑바박밖밗반받발밝밞밟밤밥밧방밭배백밴밸뱀뱁뱃뱄뱅뱉뱌뱍뱐뱝버벅번벋벌벎범법벗벙벚베벡벤벧벨벰벱벳벴벵벼벽변별볍볏볐병볕볘볜보복볶본볼봄봅봇봉봐봔봤봬뵀뵈뵉뵌뵐뵘뵙뵤뵨부북분붇불붉붊붐붑붓붕붙붚붜붤붰붸뷔뷕뷘뷜뷩뷰뷴뷸븀븃븅브븍븐블븜븝븟비빅빈빌빎빔빕빗빙빚빛빠빡빤빨빪빰빱빳빴빵빻빼빽뺀뺄뺌뺍뺏뺐뺑뺘뺙뺨뻐뻑뻔뻗뻘뻠뻣뻤뻥뻬뼁뼈뼉뼘뼙뼛뼜뼝뽀뽁뽄뽈뽐뽑뽕뾔뾰뿅뿌뿍뿐뿔뿜뿟뿡쀼쁑쁘쁜쁠쁨쁩삐삑삔삘삠삡삣삥사삭삯산삳살삵삶삼삽삿샀상샅새색샌샐샘샙샛샜생샤샥샨샬샴샵샷샹섀섄섈섐섕서석섞섟선섣설섦섧섬섭섯섰성섶세섹센셀셈셉셋셌셍셔셕션셜셤셥셧셨셩셰셴셸솅소속솎손솔솖솜솝솟송솥솨솩솬솰솽쇄쇈쇌쇔쇗쇘쇠쇤쇨쇰쇱쇳쇼쇽숀숄숌숍숏숑수숙순숟술숨숩숫숭숯숱숲숴쉈쉐쉑쉔쉘쉠쉥쉬쉭쉰쉴쉼쉽쉿슁슈슉슐슘슛슝스슥슨슬슭슴습슷승시식신싣실싫심십싯싱싶싸싹싻싼쌀쌈쌉쌌쌍쌓쌔쌕쌘쌜쌤쌥쌨쌩썅써썩썬썰썲썸썹썼썽쎄쎈쎌쏀쏘쏙쏜쏟쏠쏢쏨쏩쏭쏴쏵쏸쐈쐐쐤쐬쐰쐴쐼쐽쑈쑤쑥쑨쑬쑴쑵쑹쒀쒔쒜쒸쒼쓩쓰쓱쓴쓸쓺쓿씀씁씌씐씔씜씨씩씬씰씸씹씻씽아악안앉않알앍앎앓암압앗았앙앝앞애액앤앨앰앱앳앴앵야약얀얄얇얌얍얏양얕얗얘얜얠얩어억언얹얻얼얽얾엄업없엇었엉엊엌엎에엑엔엘엠엡엣엥여역엮연열엶엷염엽엾엿였영옅옆옇예옌옐옘옙옛옜오옥온올옭옮옰옳옴옵옷옹옻와왁완왈왐왑왓왔왕왜왝왠왬왯왱외왹왼욀욈욉욋욍요욕욘욜욤욥욧용우욱운울욹욺움웁웃웅워웍원월웜웝웠웡웨웩웬웰웸웹웽위윅윈윌윔윕윗윙유육윤율윰윱윳융윷으윽은을읊음읍읏응읒읓읔읕읖읗의읜읠읨읫이익인일읽읾잃임입잇있잉잊잎자작잔잖잗잘잚잠잡잣잤장잦재잭잰잴잼잽잿쟀쟁쟈쟉쟌쟎쟐쟘쟝쟤쟨쟬저적전절젊점접젓정젖제젝젠젤젬젭젯젱져젼졀졈졉졌졍졔조족존졸졺좀좁좃종좆좇좋좌좍좔좝좟좡좨좼좽죄죈죌죔죕죗죙죠죡죤죵주죽준줄줅줆줌줍줏중줘줬줴쥐쥑쥔쥘쥠쥡쥣쥬쥰쥴쥼즈즉즌즐즘즙즛증지직진짇질짊짐집짓징짖짙짚짜짝짠짢짤짧짬짭짯짰짱째짹짼쨀쨈쨉쨋쨌쨍쨔쨘쨩쩌쩍쩐쩔쩜쩝쩟쩠쩡쩨쩽쪄쪘쪼쪽쫀쫄쫌쫍쫏쫑쫓쫘쫙쫠쫬쫴쬈쬐쬔쬘쬠쬡쭁쭈쭉쭌쭐쭘쭙쭝쭤쭸쭹쮜쮸쯔쯤쯧쯩찌찍찐찔찜찝찡찢찧차착찬찮찰참찹찻찼창찾채책챈챌챔챕챗챘챙챠챤챦챨챰챵처척천철첨첩첫첬청체첵첸첼쳄쳅쳇쳉쳐쳔쳤쳬쳰촁초촉촌촐촘촙촛총촤촨촬촹최쵠쵤쵬쵭쵯쵱쵸춈추축춘출춤춥춧충춰췄췌췐취췬췰췸췹췻췽츄츈츌츔츙츠측츤츨츰츱츳층치칙친칟칠칡침칩칫칭카칵칸칼캄캅캇캉캐캑캔캘캠캡캣캤캥캬캭컁커컥컨컫컬컴컵컷컸컹케켁켄켈켐켑켓켕켜켠켤켬켭켯켰켱켸코콕콘콜콤콥콧콩콰콱콴콸쾀쾅쾌쾡쾨쾰쿄쿠쿡쿤쿨쿰쿱쿳쿵쿼퀀퀄퀑퀘퀭퀴퀵퀸퀼큄큅큇큉큐큔큘큠크큭큰클큼큽킁키킥킨킬킴킵킷킹타탁탄탈탉탐탑탓탔탕태택탠탤탬탭탯탰탱탸턍터턱턴털턺텀텁텃텄텅테텍텐텔템텝텟텡텨텬텼톄톈토톡톤톨톰톱톳통톺톼퇀퇘퇴퇸툇툉툐투툭툰툴툼툽툿퉁퉈퉜퉤튀튁튄튈튐튑튕튜튠튤튬튱트특튼튿틀틂틈틉틋틔틘틜틤틥티틱틴틸팀팁팃팅파팍팎판팔팖팜팝팟팠팡팥패팩팬팰팸팹팻팼팽퍄퍅퍼퍽펀펄펌펍펏펐펑페펙펜펠펨펩펫펭펴편펼폄폅폈평폐폘폡폣포폭폰폴폼폽폿퐁퐈퐝푀푄표푠푤푭푯푸푹푼푿풀풂품풉풋풍풔풩퓌퓐퓔퓜퓟퓨퓬퓰퓸퓻퓽프픈플픔픕픗피픽핀필핌핍핏핑하학한할핥함합핫항해핵핸핼햄햅햇했행햐향허헉헌헐헒험헙헛헝헤헥헨헬헴헵헷헹혀혁현혈혐협혓혔형혜혠혤혭호혹혼홀홅홈홉홋홍홑화확환활홧황홰홱홴횃횅회획횐횔횝횟횡효횬횰횹횻후훅훈훌훑훔훗훙훠훤훨훰훵훼훽휀휄휑휘휙휜휠휨휩휫휭휴휵휸휼흄흇흉흐흑흔흖흗흘흙흠흡흣흥흩희흰흴흼흽힁히힉힌힐힘힙힛힝
+갋갣걥겷괐괢굠굥궸귕귬긂긇긓깄깯꺆꺍껓껕꼉꼳꽅꽸꿘뀰뀼낻냗냡냣냬넏넢넫녇녱놁놑놰뇄뇡뇸눍눝뉻늗늧늼닁닏닽댠됭둗둚뒙딮딷똠똡똣똭똰뙇뙜뚧뜳뜽뜾랃랟랲럔럲럳렜렫롣롹뢔뤤맜맟맫먄몱뫠뫴뭥뮊뮹믁믕믜밷뱜뱡볌볻볿봥뵴붠붴뷁븡븨빋빧뺜뽓뾱뿕뿝쀠쁭샏샾섁섿셱솀솁솓쇵숖슌싥싳싿쎔쎠쎤쎵쎼쏼쑝쒐쒬씃씿앋앜얬얭옏옝옦옫왘왭왰욷웇웟웻윾읩읭읻잌잍쟵젇젉좬즒즤짣짲쫃쫒쬲쮓찓찟쵀췍칢칮칰칻캨캰컄켘콛쾃쿈쿽퀌퀜퀠큲킄탇턻톧퇻툶퉷팓팤팯펵퐉핰 핳핻햏햔햣헗헠헡헣헿홥홨횽훕흝힣
diff --git a/assets/images/hamburger_bk_24.svg b/assets/images/hamburger_bk_24.svg
new file mode 100644
index 0000000..c9b4f4f
--- /dev/null
+++ b/assets/images/hamburger_bk_24.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="hamburger_bk_24">
+<g id="Vector">
+<path d="M20.4792 13.505H3.49219C3.09436 13.505 2.71283 13.347 2.43153 13.0657C2.15022 12.7844 1.99219 12.4028 1.99219 12.005C1.99219 11.6072 2.15022 11.2256 2.43153 10.9443C2.71283 10.663 3.09436 10.505 3.49219 10.505H20.4792C20.877 10.505 21.2585 10.663 21.5398 10.9443C21.8212 11.2256 21.9792 11.6072 21.9792 12.005C21.9792 12.4028 21.8212 12.7844 21.5398 13.0657C21.2585 13.347 20.877 13.505 20.4792 13.505Z" fill="black"/>
+<path d="M20.4822 7H3.49519C3.2982 7 3.10315 6.9612 2.92116 6.88582C2.73917 6.81044 2.57382 6.69995 2.43453 6.56066C2.29524 6.42137 2.18475 6.25601 2.10937 6.07403C2.03399 5.89204 1.99519 5.69698 1.99519 5.5C1.99519 5.30302 2.03399 5.10796 2.10937 4.92597C2.18475 4.74399 2.29524 4.57863 2.43453 4.43934C2.57382 4.30005 2.73917 4.18956 2.92116 4.11418C3.10315 4.0388 3.2982 4 3.49519 4H20.4822C20.6792 4 20.8742 4.0388 21.0562 4.11418C21.2382 4.18956 21.4036 4.30005 21.5428 4.43934C21.6821 4.57863 21.7926 4.74399 21.868 4.92597C21.9434 5.10796 21.9822 5.30302 21.9822 5.5C21.9822 5.69698 21.9434 5.89204 21.868 6.07403C21.7926 6.25601 21.6821 6.42137 21.5428 6.56066C21.4036 6.69995 21.2382 6.81044 21.0562 6.88582C20.8742 6.9612 20.6792 7 20.4822 7Z" fill="black"/>
+<path d="M20.4792 20.019H3.49219C3.09436 20.019 2.71283 19.861 2.43153 19.5797C2.15022 19.2984 1.99219 18.9168 1.99219 18.519C1.99219 18.1212 2.15022 17.7396 2.43153 17.4583C2.71283 17.177 3.09436 17.019 3.49219 17.019H20.4792C20.877 17.019 21.2585 17.177 21.5398 17.4583C21.8212 17.7396 21.9792 18.1212 21.9792 18.519C21.9792 18.9168 21.8212 19.2984 21.5398 19.5797C21.2585 19.861 20.877 20.019 20.4792 20.019Z" fill="black"/>
+</g>
+</g>
+</svg>
diff --git a/assets/images/hamburger_fff_24.svg b/assets/images/hamburger_fff_24.svg
new file mode 100644
index 0000000..441dbf8
--- /dev/null
+++ b/assets/images/hamburger_fff_24.svg
@@ -0,0 +1,9 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="hamburger_bk_24">
+<g id="Vector">
+<path d="M20.4792 13.505H3.49219C3.09436 13.505 2.71283 13.347 2.43153 13.0657C2.15022 12.7844 1.99219 12.4028 1.99219 12.005C1.99219 11.6072 2.15022 11.2256 2.43153 10.9443C2.71283 10.663 3.09436 10.505 3.49219 10.505H20.4792C20.877 10.505 21.2585 10.663 21.5398 10.9443C21.8212 11.2256 21.9792 11.6072 21.9792 12.005C21.9792 12.4028 21.8212 12.7844 21.5398 13.0657C21.2585 13.347 20.877 13.505 20.4792 13.505Z" fill="white" fill-opacity="0.87"/>
+<path d="M20.4822 7H3.49519C3.2982 7 3.10315 6.9612 2.92116 6.88582C2.73917 6.81044 2.57382 6.69995 2.43453 6.56066C2.29524 6.42137 2.18475 6.25601 2.10937 6.07403C2.03399 5.89204 1.99519 5.69698 1.99519 5.5C1.99519 5.30302 2.03399 5.10796 2.10937 4.92597C2.18475 4.74399 2.29524 4.57863 2.43453 4.43934C2.57382 4.30005 2.73917 4.18956 2.92116 4.11418C3.10315 4.0388 3.2982 4 3.49519 4H20.4822C20.6792 4 20.8742 4.0388 21.0562 4.11418C21.2382 4.18956 21.4036 4.30005 21.5428 4.43934C21.6821 4.57863 21.7926 4.74399 21.868 4.92597C21.9434 5.10796 21.9822 5.30302 21.9822 5.5C21.9822 5.69698 21.9434 5.89204 21.868 6.07403C21.7926 6.25601 21.6821 6.42137 21.5428 6.56066C21.4036 6.69995 21.2382 6.81044 21.0562 6.88582C20.8742 6.9612 20.6792 7 20.4822 7Z" fill="white" fill-opacity="0.87"/>
+<path d="M20.4792 20.019H3.49219C3.09436 20.019 2.71283 19.861 2.43153 19.5797C2.15022 19.2984 1.99219 18.9168 1.99219 18.519C1.99219 18.1212 2.15022 17.7396 2.43153 17.4583C2.71283 17.177 3.09436 17.019 3.49219 17.019H20.4792C20.877 17.019 21.2585 17.177 21.5398 17.4583C21.8212 17.7396 21.9792 18.1212 21.9792 18.519C21.9792 18.9168 21.8212 19.2984 21.5398 19.5797C21.2585 19.861 20.877 20.019 20.4792 20.019Z" fill="white" fill-opacity="0.87"/>
+</g>
+</g>
+</svg>
diff --git a/assets/images/login_dark_ver1.png b/assets/images/login_dark_ver1.png
new file mode 100644
index 0000000..06ca7df
Binary files /dev/null and b/assets/images/login_dark_ver1.png differ
diff --git a/assets/images/login_light_ver1.png b/assets/images/login_light_ver1.png
new file mode 100644
index 0000000..70eef82
Binary files /dev/null and b/assets/images/login_light_ver1.png differ
diff --git a/assets/images/logo_dark.svg b/assets/images/logo_dark.svg
new file mode 100644
index 0000000..fa699c1
--- /dev/null
+++ b/assets/images/logo_dark.svg
@@ -0,0 +1,53 @@
+<svg width="96" height="30" viewBox="0 0 96 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="dark">
+<g id="Group">
+<path id="Vector" d="M32.2078 9.07169V28.8935H27.958V9.07169H32.2078ZM32.3509 18.851L39.9507 9.07169H45.5018L37.219 18.851L45.1096 28.8935H39.5447L32.3509 18.851Z" fill="white"/>
+<path id="Vector_2" d="M47.5688 28.8981V9.07169H51.8187V28.8935H47.5688V28.8981Z" fill="white"/>
+<path id="Vector_3" d="M55.792 28.8981V25.3844H64.8454C66.3035 25.3844 67.2818 25.2412 67.7617 24.9411C68.463 24.521 68.8137 23.893 68.8137 23.0434C68.8137 22.0738 68.403 21.3628 67.5909 20.9103C67.1203 20.6609 66.3773 20.527 65.3576 20.527H61.6799C59.4374 20.527 57.8269 20.1207 56.8349 19.3173C56.2211 18.8048 55.7366 18.1584 55.3906 17.3827C55.0399 16.6024 54.8691 15.7805 54.8691 14.8986C54.8691 13.5088 55.2752 12.2437 56.0873 11.094C56.881 9.9859 58.1546 9.33949 59.8988 9.1548C60.4894 9.09477 61.3708 9.07169 62.5382 9.07169H72.376V12.5808H63.498C62.1783 12.59 61.3016 12.65 60.8678 12.7562C59.9818 12.9733 59.5389 13.652 59.5389 14.7694C59.5389 15.7159 59.908 16.3577 60.6509 16.6855C61.1493 16.9071 61.9799 17.0179 63.1381 17.0179H66.3174C67.9462 17.0179 69.1552 17.1611 69.9627 17.4427C71.3608 17.9137 72.3252 18.7494 72.8467 19.9453C73.2758 20.9057 73.4881 21.9353 73.4881 23.0296C73.4881 24.2347 73.2112 25.3151 72.6621 26.2755C71.8869 27.6376 70.7195 28.4502 69.1644 28.7088C68.4123 28.8335 67.2771 28.8935 65.7682 28.8935H55.7966L55.792 28.8981Z" fill="white"/>
+<path id="Vector_4" d="M87.197 9.07169H82.3334L74.1245 28.8981H79.0803L84.7698 13.8228L90.4501 28.8981H95.4059L87.197 9.07169Z" fill="white"/>
+</g>
+<g id="Group_2">
+<path id="Vector_5" d="M10.3494 14.5431L15.5036 20.6009C15.5359 20.6425 15.5636 20.684 15.5959 20.721L21.4377 27.5222C22.4713 28.718 22.0237 29.6045 20.4502 29.4891L17.0679 29.2444C15.4944 29.129 13.3579 28.0578 12.3289 26.8665L6.49178 20.0607C5.45816 18.8648 5.58736 17.041 6.78248 16.0068L8.80357 14.2568C9.44496 13.8921 10.0125 14.1322 10.354 14.5385L10.3494 14.5431Z" fill="url(#paint0_linear_445_5761)"/>
+<path id="Vector_6" d="M23.0341 10.48L15.8911 16.667C14.7329 17.669 14.5806 19.4051 15.5035 20.6009L10.3493 14.5431C10.0078 14.1368 9.44022 13.8967 8.79883 14.2615L13.9254 9.8243C15.1205 8.79004 17.3861 8.03743 18.9596 8.15287L22.342 8.39758C23.9155 8.51301 24.2292 9.45031 23.0341 10.4846V10.48Z" fill="url(#paint1_linear_445_5761)"/>
+<g id="Group_3">
+<path id="Vector_7" d="M9.2742 11.0479L5.74421 6.92006C6.47328 7.7604 6.38099 9.04399 5.54118 9.76889L0.511532 14.1276C-0.328281 14.8525 -0.111406 15.5127 0.99604 15.5958L3.37705 15.7667C4.48449 15.8452 6.07645 15.3142 6.91626 14.5893L10.8523 11.1448C10.4555 11.4865 9.54644 11.3711 9.26958 11.0525L9.2742 11.0479Z" fill="url(#paint2_linear_445_5761)"/>
+<path id="Vector_8" d="M12.1487 7.38178L7.80201 2.35361C7.07294 1.51327 5.57328 0.760663 4.46583 0.68217L2.08483 0.506715C0.97738 0.428222 0.663603 1.04693 1.39267 1.88727L5.7394 6.91544L9.22324 10.9971C9.64776 11.4865 10.4553 11.4773 10.8567 11.1356L11.9457 10.226C12.7855 9.50109 12.8778 8.2175 12.1534 7.37716L12.1487 7.38178Z" fill="url(#paint3_linear_445_5761)"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_445_5761" x1="7.77546" y1="16.6893" x2="23.8545" y2="34.927" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="0.24" stop-color="#8AC23D"/>
+<stop offset="0.45" stop-color="#81B739"/>
+<stop offset="0.65" stop-color="#73A533"/>
+<stop offset="0.85" stop-color="#5F8C29"/>
+<stop offset="0.93" stop-color="#558025"/>
+</linearGradient>
+<linearGradient id="paint1_linear_445_5761" x1="22.2344" y1="7.98141" x2="11.9401" y2="17.5953" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="0.45" stop-color="#8BC43E"/>
+<stop offset="0.62" stop-color="#86BD3B"/>
+<stop offset="0.73" stop-color="#7CB137"/>
+<stop offset="0.83" stop-color="#6FA031"/>
+<stop offset="0.91" stop-color="#5D8A29"/>
+<stop offset="0.94" stop-color="#558025"/>
+</linearGradient>
+<linearGradient id="paint2_linear_445_5761" x1="1.77587" y1="14.6955" x2="8.30867" y2="9.04802" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BAA"/>
+<stop offset="0.27" stop-color="#0058A6"/>
+<stop offset="0.5" stop-color="#00519B"/>
+<stop offset="0.72" stop-color="#004589"/>
+<stop offset="0.93" stop-color="#003570"/>
+<stop offset="1" stop-color="#002F67"/>
+</linearGradient>
+<linearGradient id="paint3_linear_445_5761" x1="11.7519" y1="10.3968" x2="2.65056" y2="-0.027878" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BAA"/>
+<stop offset="0.27" stop-color="#0058A6"/>
+<stop offset="0.5" stop-color="#00519B"/>
+<stop offset="0.72" stop-color="#004589"/>
+<stop offset="0.93" stop-color="#003570"/>
+<stop offset="1" stop-color="#002F67"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/images/logo_dark_big.svg b/assets/images/logo_dark_big.svg
new file mode 100644
index 0000000..21742d1
--- /dev/null
+++ b/assets/images/logo_dark_big.svg
@@ -0,0 +1,45 @@
+<svg width="403" height="120" viewBox="0 0 403 120" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M135.158 35.4691V117.49H117.324V35.4691H135.158ZM135.758 75.9351L167.65 35.4691H190.945L156.187 75.9351L189.299 117.49H165.946L135.758 75.9351Z" fill="white"/>
+<path d="M199.62 117.509V35.4691H217.454V117.49H199.62V117.509Z" fill="white"/>
+<path d="M234.126 117.509V102.97H272.118C278.237 102.97 282.342 102.378 284.356 101.136C287.299 99.3971 288.771 96.7987 288.771 93.2832C288.771 89.271 287.047 86.3287 283.639 84.4563C281.664 83.4246 278.547 82.8706 274.267 82.8706H258.834C249.424 82.8706 242.666 81.1892 238.502 77.8648C235.927 75.7441 233.894 73.0693 232.442 69.8595C230.97 66.6306 230.253 63.2298 230.253 59.5806C230.253 53.8297 231.957 48.5947 235.365 43.8374C238.696 39.252 244.04 36.5772 251.36 35.813C253.839 35.5646 257.537 35.4691 262.436 35.4691H303.72V49.9895H266.464C260.926 50.0277 257.247 50.2761 255.426 50.7155C251.709 51.6135 249.85 54.422 249.85 59.0456C249.85 62.9623 251.399 65.618 254.516 66.9745C256.608 67.8916 260.093 68.3501 264.953 68.3501H278.295C285.13 68.3501 290.204 68.9424 293.592 70.1079C299.46 72.0567 303.507 75.5148 305.695 80.4632C307.496 84.4372 308.386 88.6978 308.386 93.2259C308.386 98.2125 307.225 102.683 304.92 106.657C301.667 112.293 296.768 115.656 290.243 116.726C287.086 117.242 282.323 117.49 275.991 117.49H234.146L234.126 117.509Z" fill="white"/>
+<path d="M365.916 35.4691H345.507L311.059 117.509H331.855L355.731 55.1289L379.568 117.509H400.365L365.916 35.4691Z" fill="white"/>
+<path d="M43.4301 58.1095L65.0595 83.1763C65.1951 83.3482 65.3113 83.5202 65.4468 83.673L89.9614 111.816C94.2989 116.764 92.4206 120.433 85.8175 119.955L71.6239 118.942C65.0208 118.465 56.0554 114.032 51.7372 109.103L27.242 80.9409C22.9045 75.9925 23.4467 68.4457 28.4619 64.166L36.9433 56.9249C39.6348 55.4155 42.0166 56.409 43.4495 58.0903L43.4301 58.1095Z" fill="url(#paint0_linear_302_12263)"/>
+<path d="M96.6613 41.2963L66.6861 66.8981C61.8258 71.044 61.1868 78.2278 65.0596 83.1762L43.4302 58.1094C41.9973 56.4281 39.6155 55.4346 36.924 56.9439L58.4372 38.5833C63.4524 34.3036 72.96 31.1893 79.5631 31.667L93.7568 32.6796C100.36 33.1572 101.677 37.0357 96.6613 41.3154V41.2963Z" fill="url(#paint1_linear_302_12263)"/>
+<path d="M38.9184 43.6463L24.1051 26.5657C27.1645 30.043 26.7773 35.3544 23.2531 38.354L2.14649 56.3899C-1.37773 59.3895 -0.467628 62.1216 4.17969 62.4655L14.1714 63.1725C18.8187 63.4972 25.4993 61.3001 29.0235 58.3005L45.5408 44.0475C43.8755 45.4614 40.0608 44.9837 38.899 43.6654L38.9184 43.6463Z" fill="url(#paint2_linear_302_12263)"/>
+<path d="M50.9821 28.4763L32.7414 7.67011C29.6819 4.19285 23.3886 1.07861 18.7413 0.753807L8.7496 0.0277866C4.10229 -0.297012 2.78555 2.26316 5.84503 5.74042L24.0857 26.5466L38.7054 43.4362C40.4869 45.4614 43.8756 45.4232 45.5602 44.0093L50.1301 40.2455C53.6543 37.2459 54.0416 31.9345 51.0014 28.4572L50.9821 28.4763Z" fill="url(#paint3_linear_302_12263)"/>
+<defs>
+<linearGradient id="paint0_linear_302_12263" x1="32.6289" y1="66.9902" x2="99.0395" y2="143.381" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="0.24" stop-color="#8AC23D"/>
+<stop offset="0.45" stop-color="#81B739"/>
+<stop offset="0.65" stop-color="#73A533"/>
+<stop offset="0.85" stop-color="#5F8C29"/>
+<stop offset="0.93" stop-color="#558025"/>
+</linearGradient>
+<linearGradient id="paint1_linear_302_12263" x1="93.3053" y1="30.9575" x2="50.6714" y2="71.3363" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="0.45" stop-color="#8BC43E"/>
+<stop offset="0.62" stop-color="#86BD3B"/>
+<stop offset="0.73" stop-color="#7CB137"/>
+<stop offset="0.83" stop-color="#6FA031"/>
+<stop offset="0.91" stop-color="#5D8A29"/>
+<stop offset="0.94" stop-color="#558025"/>
+</linearGradient>
+<linearGradient id="paint2_linear_302_12263" x1="7.45218" y1="58.7399" x2="34.5368" y2="34.9949" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BAA"/>
+<stop offset="0.27" stop-color="#0058A6"/>
+<stop offset="0.5" stop-color="#00519B"/>
+<stop offset="0.72" stop-color="#004589"/>
+<stop offset="0.93" stop-color="#003570"/>
+<stop offset="1" stop-color="#002F67"/>
+</linearGradient>
+<linearGradient id="paint3_linear_302_12263" x1="49.3168" y1="40.9524" x2="11.731" y2="-2.70714" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BAA"/>
+<stop offset="0.27" stop-color="#0058A6"/>
+<stop offset="0.5" stop-color="#00519B"/>
+<stop offset="0.72" stop-color="#004589"/>
+<stop offset="0.93" stop-color="#003570"/>
+<stop offset="1" stop-color="#002F67"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/images/logo_light.svg b/assets/images/logo_light.svg
new file mode 100644
index 0000000..75f0677
--- /dev/null
+++ b/assets/images/logo_light.svg
@@ -0,0 +1,53 @@
+<svg width="96" height="30" viewBox="0 0 96 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="light">
+<g id="Group">
+<path id="Vector" d="M32.2078 9.07172V28.8935H27.958V9.07172H32.2078ZM32.3509 18.851L39.9507 9.07172H45.5018L37.219 18.851L45.1096 28.8935H39.5447L32.3509 18.851Z" fill="#003E7E"/>
+<path id="Vector_2" d="M47.5688 28.8981V9.07172H51.8187V28.8935H47.5688V28.8981Z" fill="#003E7E"/>
+<path id="Vector_3" d="M55.792 28.8981V25.3844H64.8454C66.3035 25.3844 67.2818 25.2413 67.7617 24.9412C68.463 24.521 68.8137 23.893 68.8137 23.0435C68.8137 22.0739 68.403 21.3628 67.5909 20.9103C67.1203 20.661 66.3773 20.5271 65.3576 20.5271H61.6799C59.4374 20.5271 57.8269 20.1208 56.8349 19.3174C56.2211 18.8048 55.7366 18.1584 55.3906 17.3827C55.0399 16.6024 54.8691 15.7806 54.8691 14.8987C54.8691 13.5089 55.2752 12.2438 56.0873 11.0941C56.881 9.98593 58.1546 9.33952 59.8988 9.15483C60.4894 9.0948 61.3708 9.07172 62.5382 9.07172H72.376V12.5808H63.498C62.1783 12.59 61.3016 12.6501 60.8678 12.7563C59.9818 12.9733 59.5389 13.652 59.5389 14.7694C59.5389 15.7159 59.908 16.3577 60.6509 16.6855C61.1493 16.9072 61.9799 17.018 63.1381 17.018H66.3174C67.9462 17.018 69.1552 17.1611 69.9627 17.4428C71.3608 17.9137 72.3252 18.7494 72.8467 19.9453C73.2758 20.9057 73.4881 21.9353 73.4881 23.0296C73.4881 24.2347 73.2112 25.3152 72.6621 26.2755C71.8869 27.6376 70.7195 28.4503 69.1644 28.7088C68.4123 28.8335 67.2771 28.8935 65.7682 28.8935H55.7966L55.792 28.8981Z" fill="#003E7E"/>
+<path id="Vector_4" d="M87.197 9.07172H82.3334L74.1245 28.8981H79.0803L84.7698 13.8229L90.4501 28.8981H95.4059L87.197 9.07172Z" fill="#003E7E"/>
+</g>
+<g id="Group_2">
+<path id="Vector_5" d="M10.3494 14.5431L15.5036 20.6009C15.5359 20.6425 15.5636 20.684 15.5959 20.721L21.4377 27.5221C22.4713 28.718 22.0237 29.6045 20.4502 29.4891L17.0679 29.2444C15.4944 29.1289 13.3579 28.0577 12.3289 26.8665L6.49178 20.0607C5.45816 18.8648 5.58736 17.041 6.78248 16.0068L8.80357 14.2568C9.44496 13.8921 10.0125 14.1322 10.354 14.5385L10.3494 14.5431Z" fill="url(#paint0_linear_445_4298)"/>
+<path id="Vector_6" d="M23.0341 10.48L15.8911 16.667C14.7329 17.669 14.5806 19.4051 15.5035 20.6009L10.3493 14.5431C10.0078 14.1368 9.44022 13.8967 8.79883 14.2615L13.9254 9.8243C15.1205 8.79004 17.3861 8.03743 18.9596 8.15287L22.342 8.39758C23.9155 8.51301 24.2292 9.45031 23.0341 10.4846V10.48Z" fill="url(#paint1_linear_445_4298)"/>
+<g id="Group_3">
+<path id="Vector_7" d="M9.2742 11.0479L5.74421 6.92004C6.47328 7.76038 6.38099 9.04397 5.54118 9.76888L0.511532 14.1275C-0.328281 14.8525 -0.111406 15.5127 0.99604 15.5958L3.37705 15.7667C4.48449 15.8452 6.07645 15.3142 6.91626 14.5893L10.8523 11.1448C10.4555 11.4865 9.54644 11.3711 9.26958 11.0525L9.2742 11.0479Z" fill="url(#paint2_linear_445_4298)"/>
+<path id="Vector_8" d="M12.1487 7.38178L7.80201 2.35361C7.07294 1.51327 5.57328 0.760663 4.46583 0.68217L2.08483 0.506715C0.97738 0.428222 0.663603 1.04693 1.39267 1.88727L5.7394 6.91544L9.22324 10.9971C9.64776 11.4865 10.4553 11.4773 10.8567 11.1356L11.9457 10.226C12.7855 9.50109 12.8778 8.2175 12.1534 7.37716L12.1487 7.38178Z" fill="url(#paint3_linear_445_4298)"/>
+</g>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_445_4298" x1="7.77546" y1="16.6893" x2="23.8545" y2="34.927" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="0.24" stop-color="#8AC23D"/>
+<stop offset="0.45" stop-color="#81B739"/>
+<stop offset="0.65" stop-color="#73A533"/>
+<stop offset="0.85" stop-color="#5F8C29"/>
+<stop offset="0.93" stop-color="#558025"/>
+</linearGradient>
+<linearGradient id="paint1_linear_445_4298" x1="22.2344" y1="7.98141" x2="11.9401" y2="17.5953" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="0.45" stop-color="#8BC43E"/>
+<stop offset="0.62" stop-color="#86BD3B"/>
+<stop offset="0.73" stop-color="#7CB137"/>
+<stop offset="0.83" stop-color="#6FA031"/>
+<stop offset="0.91" stop-color="#5D8A29"/>
+<stop offset="0.94" stop-color="#558025"/>
+</linearGradient>
+<linearGradient id="paint2_linear_445_4298" x1="1.77587" y1="14.6955" x2="8.30867" y2="9.048" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BAA"/>
+<stop offset="0.27" stop-color="#0058A6"/>
+<stop offset="0.5" stop-color="#00519B"/>
+<stop offset="0.72" stop-color="#004589"/>
+<stop offset="0.93" stop-color="#003570"/>
+<stop offset="1" stop-color="#002F67"/>
+</linearGradient>
+<linearGradient id="paint3_linear_445_4298" x1="11.7519" y1="10.3968" x2="2.65056" y2="-0.027878" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BAA"/>
+<stop offset="0.27" stop-color="#0058A6"/>
+<stop offset="0.5" stop-color="#00519B"/>
+<stop offset="0.72" stop-color="#004589"/>
+<stop offset="0.93" stop-color="#003570"/>
+<stop offset="1" stop-color="#002F67"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/images/logo_light_big.svg b/assets/images/logo_light_big.svg
new file mode 100644
index 0000000..35afefe
--- /dev/null
+++ b/assets/images/logo_light_big.svg
@@ -0,0 +1,45 @@
+<svg width="407" height="124" viewBox="0 0 407 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M137.159 37.4691V119.49H119.324V37.4691H137.159ZM137.759 77.9352L169.651 37.4691H192.946L158.188 77.9352L191.3 119.49H167.947L137.759 77.9352Z" fill="#003E7E"/>
+<path d="M201.621 119.509V37.4691H219.455V119.49H201.621V119.509Z" fill="#003E7E"/>
+<path d="M236.128 119.509V104.97H274.12C280.239 104.97 284.344 104.378 286.358 103.136C289.301 101.397 290.773 98.7987 290.773 95.2833C290.773 91.2711 289.049 88.3288 285.641 86.4564C283.666 85.4247 280.548 84.8706 276.269 84.8706H260.836C251.425 84.8706 244.667 83.1893 240.504 79.8649C237.928 77.7441 235.895 75.0693 234.443 71.8596C232.971 68.6307 232.255 65.2298 232.255 61.5806C232.255 55.8298 233.959 50.5948 237.367 45.8375C240.697 41.2521 246.042 38.5773 253.361 37.813C255.84 37.5646 259.539 37.4691 264.438 37.4691H305.722V51.9895H268.465C262.927 52.0277 259.248 52.2761 257.428 52.7155C253.71 53.6135 251.851 56.4221 251.851 61.0457C251.851 64.9624 253.4 67.6181 256.518 68.9746C258.609 69.8917 262.095 70.3502 266.955 70.3502H280.297C287.132 70.3502 292.205 70.9425 295.594 72.1079C301.461 74.0567 305.508 77.5149 307.697 82.4633C309.497 86.4373 310.388 90.6979 310.388 95.226C310.388 100.213 309.226 104.683 306.922 108.657C303.669 114.294 298.77 117.656 292.244 118.726C289.088 119.242 284.324 119.49 277.992 119.49H236.147L236.128 119.509Z" fill="#003E7E"/>
+<path d="M367.918 37.4691H347.509L313.06 119.509H333.857L357.733 57.129L381.57 119.509H402.367L367.918 37.4691Z" fill="#003E7E"/>
+<path d="M45.4304 60.1095L67.0599 85.1763C67.1954 85.3482 67.3116 85.5202 67.4472 85.673L91.9619 113.816C96.2994 118.764 94.4211 122.433 87.818 121.955L73.6243 120.942C67.0212 120.465 58.0557 116.032 53.7375 111.103L29.2421 82.9409C24.9046 77.9925 25.4468 70.4457 30.4621 66.166L38.9435 58.9249C41.635 57.4155 44.0168 58.409 45.4497 60.0903L45.4304 60.1095Z" fill="url(#paint0_linear_327_7973)"/>
+<path d="M98.6618 43.2964L68.6864 68.8981C63.8261 73.0441 63.1871 80.2279 67.0599 85.1763L45.4304 60.1095C43.9974 58.4282 41.6157 57.4346 38.9241 58.944L60.4374 40.5833C65.4527 36.3036 74.9603 33.1894 81.5634 33.667L95.7572 34.6796C102.36 35.1573 103.677 39.0358 98.6618 43.3155V43.2964Z" fill="url(#paint1_linear_327_7973)"/>
+<path d="M40.9186 45.6464L26.1052 28.5658C29.1647 32.0431 28.7774 37.3545 25.2532 40.3541L4.1465 58.3899C0.622264 61.3896 1.53237 64.1217 6.17971 64.4656L16.1715 65.1725C20.8188 65.4973 27.4994 63.3001 31.0236 60.3005L47.5411 46.0476C45.8758 47.4614 42.0611 46.9838 40.8992 45.6655L40.9186 45.6464Z" fill="url(#paint2_linear_327_7973)"/>
+<path d="M52.9824 30.4763L34.7415 9.67011C31.682 6.19285 25.3888 3.07861 20.7414 2.75381L10.7496 2.02779C6.10229 1.70299 4.78554 4.26317 7.84504 7.74042L26.0859 28.5466L40.7056 45.4362C42.4871 47.4614 45.8758 47.4232 47.5605 46.0093L52.1303 42.2455C55.6546 39.2459 56.0419 33.9345 53.0017 30.4572L52.9824 30.4763Z" fill="url(#paint3_linear_327_7973)"/>
+<defs>
+<linearGradient id="paint0_linear_327_7973" x1="34.629" y1="68.9902" x2="101.04" y2="145.382" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="0.24" stop-color="#8AC23D"/>
+<stop offset="0.45" stop-color="#81B739"/>
+<stop offset="0.65" stop-color="#73A533"/>
+<stop offset="0.85" stop-color="#5F8C29"/>
+<stop offset="0.93" stop-color="#558025"/>
+</linearGradient>
+<linearGradient id="paint1_linear_327_7973" x1="95.3058" y1="32.9576" x2="52.6719" y2="73.3366" gradientUnits="userSpaceOnUse">
+<stop stop-color="#8DC63F"/>
+<stop offset="0.45" stop-color="#8BC43E"/>
+<stop offset="0.62" stop-color="#86BD3B"/>
+<stop offset="0.73" stop-color="#7CB137"/>
+<stop offset="0.83" stop-color="#6FA031"/>
+<stop offset="0.91" stop-color="#5D8A29"/>
+<stop offset="0.94" stop-color="#558025"/>
+</linearGradient>
+<linearGradient id="paint2_linear_327_7973" x1="9.45222" y1="60.74" x2="36.5368" y2="36.9948" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BAA"/>
+<stop offset="0.27" stop-color="#0058A6"/>
+<stop offset="0.5" stop-color="#00519B"/>
+<stop offset="0.72" stop-color="#004589"/>
+<stop offset="0.93" stop-color="#003570"/>
+<stop offset="1" stop-color="#002F67"/>
+</linearGradient>
+<linearGradient id="paint3_linear_327_7973" x1="51.3171" y1="42.9524" x2="13.7313" y2="-0.707353" gradientUnits="userSpaceOnUse">
+<stop stop-color="#005BAA"/>
+<stop offset="0.27" stop-color="#0058A6"/>
+<stop offset="0.5" stop-color="#00519B"/>
+<stop offset="0.72" stop-color="#004589"/>
+<stop offset="0.93" stop-color="#003570"/>
+<stop offset="1" stop-color="#002F67"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/assets/images/reset_bk_20.svg b/assets/images/reset_bk_20.svg
new file mode 100644
index 0000000..6f10d7a
--- /dev/null
+++ b/assets/images/reset_bk_20.svg
@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="reset_fff_20">
+<g id="Vector">
+<path d="M10.5027 16.0459C9.5338 16.0461 8.57913 15.8125 7.71979 15.3648C6.86046 14.9172 6.12186 14.2688 5.56671 13.4746C5.01156 12.6805 4.65626 11.7641 4.531 10.8033C4.40573 9.8425 4.5142 8.86565 4.84718 7.95573C5.18017 7.04581 5.72783 6.22969 6.44367 5.57668C7.1595 4.92368 8.02236 4.45308 8.95896 4.20485C9.89556 3.95662 10.8782 3.93809 11.8235 4.15084C12.7688 4.3636 13.6488 4.80134 14.3887 5.42691C14.4798 5.50393 14.5548 5.59813 14.6095 5.70414C14.6641 5.81015 14.6974 5.92589 14.7073 6.04475C14.7173 6.16361 14.7037 6.28326 14.6674 6.39687C14.6311 6.51048 14.5728 6.61583 14.4957 6.70691C14.4187 6.79798 14.3245 6.87299 14.2185 6.92765C14.1125 6.98232 13.9968 7.01557 13.8779 7.0255C13.759 7.03544 13.6394 7.02187 13.5258 6.98556C13.4122 6.94925 13.3068 6.89093 13.2157 6.81391C12.4849 6.19704 11.5654 5.84808 10.6093 5.82473C9.65319 5.80137 8.71775 6.10503 7.95765 6.68548C7.19756 7.26594 6.65833 8.08842 6.42913 9.01694C6.19993 9.94545 6.29449 10.9244 6.69717 11.7919C7.09985 12.6593 7.78654 13.3634 8.64368 13.7876C9.50082 14.2119 10.4771 14.3309 11.411 14.125C12.345 13.919 13.1807 13.4005 13.78 12.6552C14.3792 11.9098 14.7062 10.9823 14.7067 10.0259C14.7067 9.78509 14.8024 9.55414 14.9727 9.38385C15.143 9.21357 15.3739 9.11791 15.6147 9.11791C15.8556 9.11791 16.0865 9.21357 16.2568 9.38385C16.4271 9.55414 16.5227 9.78509 16.5227 10.0259C16.5209 11.6219 15.886 13.1521 14.7575 14.2806C13.6289 15.4092 12.0988 16.0441 10.5027 16.0459Z" fill="black"/>
+<path d="M11.2341 7.54546C11.0005 7.54594 10.7757 7.45638 10.6064 7.29538C10.4372 7.13438 10.3365 6.91434 10.3253 6.68101C10.3141 6.44767 10.3932 6.219 10.5463 6.04252C10.6993 5.86605 10.9145 5.75536 11.1471 5.73346L12.7401 5.57846L12.0691 4.14046C11.9827 3.92502 11.9821 3.68468 12.0674 3.46882C12.1527 3.25295 12.3175 3.07795 12.5278 2.97977C12.7381 2.88158 12.978 2.86767 13.1983 2.94089C13.4186 3.01411 13.6024 3.1689 13.7121 3.37346L14.9251 5.97346C14.9861 6.10479 15.0149 6.24882 15.0089 6.39352C15.0029 6.53822 14.9624 6.67939 14.8908 6.80525C14.8191 6.93111 14.7184 7.03801 14.5971 7.11702C14.4757 7.19603 14.3372 7.24487 14.1931 7.25946L11.3231 7.53846C11.2931 7.54446 11.2631 7.54546 11.2341 7.54546Z" fill="black"/>
+</g>
+</g>
+</svg>
diff --git a/assets/images/reset_fff_20.svg b/assets/images/reset_fff_20.svg
new file mode 100644
index 0000000..cc67470
--- /dev/null
+++ b/assets/images/reset_fff_20.svg
@@ -0,0 +1,4 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5027 16.0459C9.5338 16.0461 8.57913 15.8125 7.71979 15.3648C6.86046 14.9172 6.12186 14.2688 5.56671 13.4746C5.01156 12.6805 4.65626 11.7641 4.531 10.8033C4.40573 9.8425 4.5142 8.86565 4.84718 7.95573C5.18017 7.04581 5.72783 6.22969 6.44367 5.57668C7.1595 4.92368 8.02236 4.45308 8.95896 4.20485C9.89556 3.95662 10.8782 3.93809 11.8235 4.15084C12.7688 4.3636 13.6488 4.80134 14.3887 5.42691C14.4798 5.50393 14.5548 5.59813 14.6095 5.70414C14.6641 5.81015 14.6974 5.92589 14.7073 6.04475C14.7173 6.16361 14.7037 6.28326 14.6674 6.39687C14.6311 6.51048 14.5728 6.61583 14.4957 6.70691C14.4187 6.79798 14.3245 6.87299 14.2185 6.92765C14.1125 6.98232 13.9968 7.01557 13.8779 7.0255C13.759 7.03544 13.6394 7.02187 13.5258 6.98556C13.4122 6.94925 13.3068 6.89093 13.2157 6.81391C12.4849 6.19704 11.5654 5.84808 10.6093 5.82473C9.65319 5.80137 8.71775 6.10503 7.95765 6.68548C7.19756 7.26594 6.65833 8.08842 6.42913 9.01694C6.19993 9.94545 6.29449 10.9244 6.69717 11.7919C7.09985 12.6593 7.78654 13.3634 8.64368 13.7876C9.50082 14.2119 10.4771 14.3309 11.411 14.125C12.345 13.919 13.1807 13.4005 13.78 12.6552C14.3792 11.9098 14.7062 10.9823 14.7067 10.0259C14.7067 9.78509 14.8024 9.55414 14.9727 9.38385C15.143 9.21357 15.3739 9.11791 15.6147 9.11791C15.8556 9.11791 16.0865 9.21357 16.2568 9.38385C16.4271 9.55414 16.5227 9.78509 16.5227 10.0259C16.5209 11.6219 15.886 13.1521 14.7575 14.2806C13.6289 15.4092 12.0988 16.0441 10.5027 16.0459Z" fill="white"/>
+<path d="M11.2341 7.54546C11.0005 7.54594 10.7757 7.45638 10.6064 7.29538C10.4372 7.13438 10.3365 6.91434 10.3253 6.68101C10.3141 6.44767 10.3932 6.219 10.5463 6.04252C10.6993 5.86605 10.9145 5.75536 11.1471 5.73346L12.7401 5.57846L12.0691 4.14046C11.9827 3.92502 11.9821 3.68468 12.0674 3.46882C12.1527 3.25295 12.3175 3.07795 12.5278 2.97977C12.7381 2.88158 12.978 2.86767 13.1983 2.94089C13.4186 3.01411 13.6024 3.1689 13.7121 3.37346L14.9251 5.97346C14.9861 6.10479 15.0149 6.24882 15.0089 6.39352C15.0029 6.53822 14.9624 6.67939 14.8908 6.80525C14.8191 6.93111 14.7184 7.03801 14.5971 7.11702C14.4757 7.19603 14.3372 7.24487 14.1931 7.25946L11.3231 7.53846C11.2931 7.54446 11.2631 7.54546 11.2341 7.54546Z" fill="white"/>
+</svg>
diff --git a/assets/images/reset_green_20.svg b/assets/images/reset_green_20.svg
new file mode 100644
index 0000000..cef122b
--- /dev/null
+++ b/assets/images/reset_green_20.svg
@@ -0,0 +1,8 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="reset_fff_20">
+<g id="Vector">
+<path d="M10.5027 16.0459C9.5338 16.0461 8.57913 15.8125 7.71979 15.3648C6.86046 14.9172 6.12186 14.2688 5.56671 13.4746C5.01156 12.6805 4.65626 11.7641 4.531 10.8033C4.40573 9.8425 4.5142 8.86565 4.84718 7.95573C5.18017 7.04581 5.72783 6.22969 6.44367 5.57668C7.1595 4.92368 8.02236 4.45308 8.95896 4.20485C9.89556 3.95662 10.8782 3.93809 11.8235 4.15084C12.7688 4.3636 13.6488 4.80134 14.3887 5.42691C14.4798 5.50393 14.5548 5.59813 14.6095 5.70414C14.6641 5.81015 14.6974 5.92589 14.7073 6.04475C14.7173 6.16361 14.7037 6.28326 14.6674 6.39687C14.6311 6.51048 14.5728 6.61583 14.4957 6.70691C14.4187 6.79798 14.3245 6.87299 14.2185 6.92765C14.1125 6.98232 13.9968 7.01557 13.8779 7.0255C13.759 7.03544 13.6394 7.02187 13.5258 6.98556C13.4122 6.94925 13.3068 6.89093 13.2157 6.81391C12.4849 6.19704 11.5654 5.84808 10.6093 5.82473C9.65319 5.80137 8.71775 6.10503 7.95765 6.68548C7.19756 7.26594 6.65833 8.08842 6.42913 9.01694C6.19993 9.94545 6.29449 10.9244 6.69717 11.7919C7.09985 12.6593 7.78654 13.3634 8.64368 13.7876C9.50082 14.2119 10.4771 14.3309 11.411 14.125C12.345 13.919 13.1807 13.4005 13.78 12.6552C14.3792 11.9098 14.7062 10.9823 14.7067 10.0259C14.7067 9.78509 14.8024 9.55414 14.9727 9.38385C15.143 9.21357 15.3739 9.11791 15.6147 9.11791C15.8556 9.11791 16.0865 9.21357 16.2568 9.38385C16.4271 9.55414 16.5227 9.78509 16.5227 10.0259C16.5209 11.6219 15.886 13.1521 14.7575 14.2806C13.6289 15.4092 12.0988 16.0441 10.5027 16.0459Z" fill="#87C718"/>
+<path d="M11.2341 7.54546C11.0005 7.54594 10.7757 7.45638 10.6064 7.29538C10.4372 7.13438 10.3365 6.91434 10.3253 6.68101C10.3141 6.44767 10.3932 6.219 10.5463 6.04252C10.6993 5.86605 10.9145 5.75536 11.1471 5.73346L12.7401 5.57846L12.0691 4.14046C11.9827 3.92502 11.9821 3.68468 12.0674 3.46882C12.1527 3.25295 12.3175 3.07795 12.5278 2.97977C12.7381 2.88158 12.978 2.86767 13.1983 2.94089C13.4186 3.01411 13.6024 3.1689 13.7121 3.37346L14.9251 5.97346C14.9861 6.10479 15.0149 6.24882 15.0089 6.39352C15.0029 6.53822 14.9624 6.67939 14.8908 6.80525C14.8191 6.93111 14.7184 7.03801 14.5971 7.11702C14.4757 7.19603 14.3372 7.24487 14.1931 7.25946L11.3231 7.53846C11.2931 7.54446 11.2631 7.54546 11.2341 7.54546Z" fill="#87C718"/>
+</g>
+</g>
+</svg>
diff --git a/pages/Button.html b/pages/Button.html
index 926e26f..808956a 100644
--- a/pages/Button.html
+++ b/pages/Button.html
@@ -19,7 +19,7 @@
                     <div class="header_left">
                         <h1 class="header_logo">
                             <a href="../template/Main.html">
-                                <span class="sp_logo_uniplus"></span>
+                                <span class=""></span>
                             </a>
                         </h1>
                     </div>
@@ -28,6 +28,9 @@
                             <li>
                                 <a href="Button.html" class="on">Button</a>
                             </li>
+                            <li>
+                                <a href="Input.html">Input</a>
+                            </li>
                             <li class="m-t-36">
                                 <div class="lightmode">
                                     <div class="inner">
@@ -58,6 +61,8 @@
                             <dt class="comp_dt w120 m-r-100">Box</dt>
                             <dd class="comp_dd">
                                 <div class="compline m-b-20">
+                                    <p class="comp_size m-r-40 fc_annotation87">Large</p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Pri</p>
                                     <div class="components">
                                         <button class="btn_primary btn_l w160" type="button">Button</button>
                                         <button class="btn_primary btn_l w160 disabled" type="button">Button</button>
@@ -66,6 +71,8 @@
                                 </div>
 
                                 <div class="compline m-b-20">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00">Large</p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Sec</p>
                                     <div class="components">
                                         <button class="btn_secondary btn_l w160" type="button">Button</button>
                                         <button class="btn_secondary btn_l w160 disabled" type="button">Button</button>
@@ -74,6 +81,8 @@
                                 </div>
 
                                 <div class="compline">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00">Large</p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Line</p>
                                     <div class="components">
                                         <button class="btn_line btn_l w160" type="button">Button</button>
                                         <button class="btn_line btn_l disabled w160" type="button">Button</button>
@@ -89,18 +98,24 @@
                             <dt class="comp_dt w120 m-r-100"></dt>
                             <dd class="comp_dd">
                                 <div class="compline m-b-20">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Pri</p>
                                     <div class="components">
                                         <button class="btn_primary btn_l" type="button">Button</button>
                                     </div>
                                 </div>
 
                                 <div class="compline m-b-20">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Sec</p>
                                     <div class="components">
                                         <button class="btn_secondary btn_l" type="button">Button</button>
                                     </div>
                                 </div>
 
                                 <div class="compline">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Line</p>
                                     <div class="components">
                                         <button class="btn_line btn_l" type="button">Button</button>
                                     </div>
@@ -114,18 +129,24 @@
                             <dt class="comp_dt w120 m-r-100"></dt>
                             <dd class="comp_dd">
                                 <div class="compline m-b-20">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Pri</p>
                                     <div class="components">
                                         <button class="btn_primary btn_l" type="button">Button</button>
                                     </div>
                                 </div>
 
                                 <div class="compline m-b-20">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Sec</p>
                                     <div class="components">
                                         <button class="btn_secondary btn_l" type="button">Button</button>
                                     </div>
                                 </div>
 
                                 <div class="compline">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Line</p>
                                     <div class="components">
                                         <button class="btn_line btn_l" type="button">Button</button>
                                     </div>
@@ -135,17 +156,151 @@
                     </section>
                 </article>
 
+
+                <article class="Gr_contents m-t-100">
+                    <section class="comp_conts">
+                        <dl class="comp_dl m-0">
+                            <dt class="comp_dt w120 m-r-100">With icon</dt>
+                            <dd class="comp_dd">
+                                <div class="compline">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Pri</p>
+                                    <div class="components">
+                                        <button class="btn_primary btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                        <button class="btn_primary btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                        <button class="btn_primary btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div class="compline">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Sec</p>
+                                    <div class="components">
+                                        <button class="btn_secondary btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                        <button class="btn_secondary btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                        <button class="btn_secondary btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                    </div>
+                                </div>
+
+                                <div class="compline">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Line</p>
+                                    <div class="components">
+                                        <button class="btn_line btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                        <button class="btn_line btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                        <button class="btn_line btn_l w160" type="button">
+                                            <span class="m-r-6">
+                                                <img src="../assets/images/reset_fff_20.svg" alt="" class="w20" />
+                                            </span>
+                                            <span class="fc_white">Button</span>
+                                        </button>
+                                    </div>
+                                </div>
+                            </dd>
+                        </dl>
+                    </section>
+
+                    <section class="comp_conts m-t-50">
+                        <dl class="comp_dl m-0">
+                            <dt class="comp_dt w120 m-r-100"></dt>
+                            <dd class="comp_dd">
+                                <div class="compline m-b-20">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Pri</p>
+                                    <div class="components">
+                                        <button class="btn_primary btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline m-b-20">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Sec</p>
+                                    <div class="components">
+                                        <button class="btn_secondary btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline">
+                                    <p class="comp_size m-r-40 fc_annotation87 op00"></p>
+                                    <p class="comp_size m-r-40 fc_annotation87">Line</p>
+                                    <div class="components">
+                                        <button class="btn_line btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+                            </dd>
+                        </dl>
+                    </section>
+
+                    <section class="comp_conts m-t-50">
+                        <dl class="comp_dl m-0">
+                            <dt class="comp_dt w120 m-r-100"></dt>
+                            <dd class="comp_dd">
+                                <div class="compline m-b-20">
+                                    <div class="components">
+                                        <button class="btn_primary btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline m-b-20">
+                                    <div class="components">
+                                        <button class="btn_secondary btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+
+                                <div class="compline">
+                                    <div class="components">
+                                        <button class="btn_line btn_l" type="button">Button</button>
+                                    </div>
+                                </div>
+                            </dd>
+                        </dl>
+                    </section>
+                </article>
             </div>
         </div>
     </div>
 
     <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
     <script type="text/javascript" src="../assets/js/common.js"></script>
-    <script>
-        $('.ch_radio').click(function(){
-            $('.ch_radio').removeClass('on');
-            $(this).addClass('on');
-        });
-    </script>
 </body>
 </html>
\ No newline at end of file
diff --git a/template/Login_ver1.html b/template/Login_ver1.html
new file mode 100644
index 0000000..9c7f77b
--- /dev/null
+++ b/template/Login_ver1.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+<meta charset="utf-8">
+<title>KISA</title>
+<meta name="keywords" content="KISA" />
+<meta name="author" content="KISA" />
+<meta name="descripption" content="KISA" />
+<link rel="shortcut icon" href="../assets/images/favicon.ico" />
+<link rel="stylesheet" type="text/css" href="../assets/css/index.css" />
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css" />
+</head>
+<body>
+    <div class="main_back">
+        <div class="main_wrap">
+            <div class="main_contents login_ver1">
+                <div class="login_wrap">
+                    <div class="light_box">
+                        <div class="lightmode outer">
+                            <div class="inner">
+                                <input type="radio" name="toggle" id="toggle-radio-light" />
+                                <label for="toggle-radio-light" class="tolight circle_light">
+                                    <i class="fas fa-sun tolight"></i>
+                                </label>
+                                <input type="radio" name="toggle" id="toggle-radio-dark" checked />
+                                <label for="toggle-radio-dark" class="todark circle_dark">
+                                    <i class="fas fa-moon todark"></i>
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div class="login_box">
+                        <section class="login_input">
+                            <div class="dflx_ac_jbet">
+                                <div class="dflx gap_10 m-b-32">
+                                    <p class="login_txt">Login</p>
+                                    <span class="num_txt">1/2</span>
+                                </div>
+                                <p class="label">회원가입</p>
+                            </div>
+                            <div class="put_zone m-b-20">
+                                <input type="text" class="wrput large" placeholder="ID" />
+                            </div>
+                            <div class="put_zone">
+                                <input type="password" class="wrput pass large" placeholder="Password" />
+                            </div>
+                            <button type="submit" class="btn_primary btn_xl w-100 m-t-20" onclick="location.href='./Main.html'">Login</button>
+                        </section>
+                    </div>
+                </div>
+            </div>
+            <div class="login_logo">
+                <img src="../assets/images/logo_dark_big.svg" alt="kisa big logo" />
+            </div>
+        </div>
+    </div>
+    <script type="text/javascript" src="../assets/js/jquery.min.js"></script>
+    <script type="text/javascript" src="../assets/js/common.js"></script>
+    <script>
+        $('.put_see').click(function(){
+            $(this).toggleClass('on');
+        });
+
+        $('.wrput').keydown(function(){
+            $(this).css('padding-right','2rem');
+            $(this).siblings('.put_delete').css('display','flex');
+            $(this).siblings('.put_see').css('display','flex');
+        });
+
+        $('.put_delete').click(function(){
+            $(this).siblings('.wrput').css('padding-right','0.75rem');
+            $(this).siblings('.wrput').val('');
+            $(this).css('display','none');
+            $(this).parent().siblings('.btn_srch28').removeClass('on');
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file