From b2277c7426a5fdecb9ac313bfd4e9ea9a57cb168 Mon Sep 17 00:00:00 2001
From: minjubyun <tommy5042@gmail.com>
Date: Mon, 2 Sep 2024 17:50:08 +0900
Subject: [PATCH] =?UTF-8?q?main=20header=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/_mixin.scss        |   80 +-
 assets/css/guide.css          | 2072 +++++----------------------------
 assets/css/guide.scss         | 1311 ++-------------------
 assets/css/layout.css         |  170 +--
 assets/css/layout.scss        |  137 +--
 assets/css/template.css       |  203 ++--
 assets/css/template.scss      |   34 +-
 assets/images/bell_bk_20.svg  |    5 +
 assets/images/bell_fff_20.svg |    5 +
 assets/images/user_bk_20.svg  |    8 +
 assets/images/user_fff_20.svg |    8 +
 11 files changed, 575 insertions(+), 3458 deletions(-)
 create mode 100644 assets/images/bell_bk_20.svg
 create mode 100644 assets/images/bell_fff_20.svg
 create mode 100644 assets/images/user_bk_20.svg
 create mode 100644 assets/images/user_fff_20.svg

diff --git a/assets/css/_mixin.scss b/assets/css/_mixin.scss
index c4f93ca..971464a 100644
--- a/assets/css/_mixin.scss
+++ b/assets/css/_mixin.scss
@@ -126,123 +126,123 @@ $fc_default: rgba(255, 255, 255, 0.87);
     font-family: 'Spoqa Han Sans Neo', sans-serif;
 }
 @mixin fs_40_bold {
-    font-size: 2.5rem;
+    font-size: 40px;
     font-weight: 700;
 }
 @mixin fs_40_medium {
-    font-size: 2.5rem;
+    font-size: 40px;
     font-weight: 500;
 }
 @mixin fs_28_bold {
-    font-size: 1.75rem;
+    font-size: 28px;
     font-weight: 700;
 }
 @mixin fs_24_bold {
-    font-size: 1.5rem;
+    font-size: 24px;
     font-weight: 700;
 }
 @mixin fs_24_medium {
-    font-size: 1.5rem;
+    font-size: 24px;
     font-weight: 500;
 }
 @mixin fs_20_bold {
-    font-size: 1.25rem;
+    font-size: 20px;
     font-weight: 700;
 }
 @mixin fs_20_medium {
-    font-size: 1.25rem;
+    font-size: 20px;
     font-weight: 500;
 }
 @mixin fs_18_bold {
-    font-size: 1.125rem;
+    font-size: 18px;
     font-weight: 700;
 }
 @mixin fs_18_medium {
-    font-size: 1.125rem;
+    font-size: 18px;
     font-weight: 500;
 }
 @mixin fs_16_bold {
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: 700;
 }
 @mixin fs_16_medium {
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: 500;
 }
 @mixin fs_16_regular {
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: 400;
 }
 @mixin fs_16_light {
-    font-size: 1rem;
+    font-size: 16px;
     font-weight: 300;
 }
 @mixin fs_15_medium {
-    font-size: 0.9375rem;
+    font-size: 15px;
     font-weight: 500;
 }
 @mixin fs_15_regular {
-    font-size: 0.9375rem;
+    font-size: 15px;
     font-weight: 400;
 }
 @mixin fs_14_bold {
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 700;
 }
 @mixin fs_14_medium {
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 500;
 }
 @mixin fs_14_regular {
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 400;
 }
 @mixin fs_14_light {
-    font-size: 0.875rem;
+    font-size: 14px;
     font-weight: 300;
 }
 @mixin fs_13_medium {
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 500;
 }
 @mixin fs_13_regular {
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 400;
 }
 @mixin fs_13_light {
-    font-size: 0.8125rem;
+    font-size: 13px;
     font-weight: 300;
 }
 @mixin fs_12_bold {
-    font-size: 0.75rem !important;
+    font-size: 12px!important;
     font-weight: 700 !important;
 }
 @mixin fs_12_medium {
-    font-size: 0.75rem !important;
+    font-size: 12px !important;
     font-weight: 500 !important;
 }
 @mixin fs_12_regular {
-    font-size: 0.75rem;
+    font-size: 12px;
     font-weight: 400;
 }
 @mixin fs_12_light {
-    font-size: 0.75rem;
+    font-size: 12px;
     font-weight: 300;
 }
 @mixin fs_11_medium {
-    font-size: 0.6875rem;
+    font-size: 12px;
     font-weight: 500;
 }
 @mixin fs_11_regular {
-    font-size: 0.6875rem;
+    font-size: 11px;
     font-weight: 400;
 }
 @mixin fs_11_light {
-    font-size: 0.6875rem;
+    font-size: 11px;
     font-weight: 300;
 }
 @mixin fs_10_regular {
-    font-size: 0.625rem;
+    font-size: 10px;
     font-weight: 400;
 }
 
@@ -252,7 +252,7 @@ $fc_default: rgba(255, 255, 255, 0.87);
     align-items: center;
     justify-content: center;
     width: $width;
-    padding: 0.125rem 0.75rem 0;
+    padding: 2px 12px 0;
     -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
     border-radius: 8px;
@@ -269,7 +269,7 @@ $fc_default: rgba(255, 255, 255, 0.87);
     }
     &.disabled {
         background: var(--white-w_12);
-        box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1);
+        box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1);
         color: var(--white-w_20);
     }
 }
@@ -311,23 +311,23 @@ $fc_default: rgba(255, 255, 255, 0.87);
     @include backFilter;
     @include box_shadow16;
     background: var(--bg_01_80);
-    border: 0.063rem solid var(--line-pri_40-to-wh_40);
+    border: 1px solid var(--line-pri_40-to-wh_40);
     color: var(--white-w_100-sec);
     &:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), &.hover {
         background: var(--btn-btn_hover);
         border: none;
-        box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5);
+        box-shadow: inset 0 0 12px rgba(39, 212, 255, 0.5);
         color: var(--white-w_100);
     }
     &.selected{
         background: var(--btn-btn_default);
         border: none;
-        box-shadow: inset 0 0 0.75rem #0476FF;
+        box-shadow: inset 0 0 12px #0476FF;
         color: var(--white-w_100);
     }
     &.disabled {
         background: var(--bg_01_80);
-        border: 0.063rem solid var(--line-wh_12-to-100);
+        border: 1px solid var(--line-wh_12-to-100);
         box-shadow: none;
         color: var(--white-w_20);
     }
@@ -339,23 +339,23 @@ $fc_default: rgba(255, 255, 255, 0.87);
     @include box_shadow16;
     @include fs_14_medium;
     background: var(--bg_01_80);
-    border: 0.063rem solid var(--line-wh_12-to-40);
+    border: 1px solid var(--line-wh_12-to-40);
     color: var(--white-w_87);
     &:hover:not(.selected):not(.disabled),&.hover {
         background: var(--primary-pri_12);
         color: var(--primary-pri_100);
-        border: 0.063rem solid var(--line-wh_12-to-40);
+        border: 1px solid var(--line-wh_12-to-40);
         font-weight: 700;
     }
     &.selected {
         background: var(--primary-pri_20);
-        border: 0.063rem solid var(--line-wh_12-to-40);
+        border: 1px solid var(--line-wh_12-to-40);
         color: var(--primary-pri_100);
         font-weight: 700;
     }
     &.disabled {
         background: var(--bg_01_40);
-        border: 0.063rem solid var(--white-w_12);
+        border: 1px solid var(--white-w_12);
         color: var(--white-w_20);
     }
 }
diff --git a/assets/css/guide.css b/assets/css/guide.css
index dff2597..f8537fb 100644
--- a/assets/css/guide.css
+++ b/assets/css/guide.css
@@ -239,66 +239,6 @@ input[type=password] {
   background-color: transparent;
 }
 
-.anchor_default {
-  text-decoration: underline;
-  color: #024294 !important;
-}
-.anchor_default:hover, .anchor_default:focus {
-  text-decoration: underline;
-}
-
-.fc_primary {
-  color: #27D4FF !important;
-}
-
-.fc_normal {
-  color: #338FFF !important;
-}
-
-.fc_normal_more40 {
-  color: rgba(51, 143, 255, 0.4) !important;
-}
-
-.fc_purple {
-  color: #FF00FF !important;
-}
-
-.fc_yellow {
-  color: #FFE043 !important;
-}
-
-.fc_yellow_04 {
-  color: #FFBC04 !important;
-}
-
-.fc_yellow_code {
-  color: rgba(255, 255, 128, 0.6823529412) !important;
-}
-
-.fc_green {
-  color: #16D9AB !important;
-}
-
-.fc_code_green {
-  color: #1CAF93 !important;
-}
-
-.fc_light_green {
-  color: #00FF00 !important;
-}
-
-.fc_card_green {
-  color: #1CBD6D;
-}
-
-.fc_code_class {
-  color: deeppink !important;
-}
-
-.fc_blue {
-  color: #024294 !important;
-}
-
 .text_error {
   color: #FF1F55 !important;
 }
@@ -384,97 +324,97 @@ input[type=password] {
 }
 
 .fs_24_bold {
-  font-size: 1.5rem;
+  font-size: 24px;
   font-weight: 700;
 }
 
 .fs_24_medium {
-  font-size: 1.5rem;
+  font-size: 24px;
   font-weight: 500;
 }
 
 .fs_20_medium {
-  font-size: 1.25rem;
+  font-size: 20px;
   font-weight: 500;
 }
 
 .fs_18_bold {
-  font-size: 1.125rem;
+  font-size: 18px;
   font-weight: 700;
 }
 
 .fs_18_medium {
-  font-size: 1.125rem;
+  font-size: 18px;
   font-weight: 500;
 }
 
 .fs_16_bold {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
 }
 
 .fs_16_medium {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
 }
 
 .fs_16 {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
 }
 
 .fs_14_bold {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
 }
 
 .fs_14_medium {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
 }
 
 .fs_14 {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
 }
 
 .fs_14_light {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 300;
 }
 
 .fs_13_medium {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
 }
 
 .fs_13 {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
 }
 
 .fs_12_medium {
-  font-size: 0.75rem !important;
+  font-size: 12px !important;
   font-weight: 500 !important;
 }
 
 .fs_12 {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
 }
 
 .fs_11_medium {
-  font-size: 0.6875rem;
+  font-size: 12px;
   font-weight: 500;
 }
 
 .fs_11 {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
 }
 
 .fs_10 {
-  font-size: 0.625rem;
+  font-size: 10px;
   font-weight: 400;
 }
 
@@ -486,88 +426,6 @@ input[type=password] {
   border-radius: 0 !important;
 }
 
-.border_none {
-  border: none !important;
-}
-
-.border_greyE0 {
-  border: 0.063rem solid #DCDDE0;
-}
-
-.border_greyEb {
-  border: 0.063rem solid #e6e7eb;
-}
-
-.border_greyF5 {
-  border: 0.063rem solid #F0F1F5;
-}
-
-.border_white20 {
-  border: 0.063rem solid rgba(255, 255, 255, 0.2);
-}
-
-.border_white38 {
-  border: 0.063rem solid rgba(255, 255, 255, 0.38);
-}
-
-.border_black30 {
-  border: 0.063rem solid rgba(0, 0, 0, 0.3);
-}
-
-.border_sky40 {
-  border: 0.063rem solid rgba(39, 212, 255, 0.4) !important;
-}
-
-.top_white12 {
-  border-top: 0.063rem solid rgba(255, 255, 255, 0.1);
-}
-
-.rht_white12 {
-  border-right: 0.063rem solid rgba(255, 255, 255, 0.1) !important;
-}
-
-.btm_white20 {
-  color: var(--white-w_60);
-  border-bottom: 0.063rem solid var(--white-w_20);
-}
-.btm_white20 .id, .btm_white20 .name {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--white-w_87);
-}
-
-.btm_white12 {
-  border-bottom: 0.063rem solid rgba(255, 255, 255, 0.1);
-}
-
-.btm_none {
-  border-bottom: none !important;
-}
-
-.route_border_sky40 {
-  border: 0.313rem solid var(--primary-pri_40);
-}
-
-.route_border_sky {
-  border: 0.313rem solid var(--primary-pri_100);
-}
-
-.route_border_yellow {
-  border: 0.313rem solid #FFE043;
-}
-
-.route_border_blue {
-  border: 0.313rem solid rgba(0, 104, 230, 0.6);
-}
-
-.route_border_purple {
-  border: 0.313rem solid #8972FF;
-}
-
-.route_border_red {
-  border: 0.313rem solid #D60000;
-}
-
 .bg_ui_gradation {
   background: transparent linear-gradient(104deg, #0068E6 0%, #27D4FF 100%) 0% 0% no-repeat;
 }
@@ -576,66 +434,6 @@ input[type=password] {
   background-color: rgb(0, 0, 0);
 }
 
-.bg_default {
-  background: rgb(10, 11, 20) !important;
-}
-
-.bg_ui_blue {
-  background: #024294 !important;
-}
-
-.bg_ui_blue_more {
-  background: #0068E6 !important;
-}
-
-.bg_cluster {
-  background: rgb(0, 104, 230) !important;
-}
-
-.bg_white {
-  background: #ffffff !important;
-}
-
-.bg_ui_sky {
-  background: #27D4FF !important;
-}
-
-.bg_ui_sky_blue {
-  background: var(--primary-pri_100) !important;
-}
-
-.bg_ui_sky_10 {
-  background-color: rgba(39, 212, 255, 0.1);
-}
-
-.bg_ui_sky_05 {
-  background-color: rgba(39, 212, 255, 0.05);
-}
-
-.bg_secondary__purple {
-  background: #937EFF;
-}
-
-.bg_secondary__green {
-  background: #16D9AB;
-}
-
-.bg_secondary__yellow {
-  background: #FFE043;
-}
-
-.bg_state__normal {
-  background: #024294;
-}
-
-.bg_state__success {
-  background: #00BD78;
-}
-
-.bg_state__error {
-  background: #D60000;
-}
-
 .bg_grey50 {
   background: rgba(255, 255, 255, 0.5);
 }
@@ -1561,22 +1359,12 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   border: none;
 }
 
-.button_165 {
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.25rem;
-  display: flex;
-  width: 10.3125rem;
-  height: 3rem;
-  background-color: #024294;
-}
-
 .btn_primary {
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   background: var(--PRI);
@@ -1585,7 +1373,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 .btn_primary.disabled {
   background: var(--white-w_12);
-  box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1);
   color: var(--white-w_20);
 }
 
@@ -1594,7 +1382,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   background: transparent;
@@ -1616,7 +1404,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   background: transparent;
@@ -1632,108 +1420,12 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   color: var(--white-w_20);
 }
 
-.btn_floating {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  padding: 0.125rem 0.75rem 0;
-  border-radius: 8px;
-  font-size: 8px;
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
-  background: var(--bg_01_80);
-  border: 0.063rem solid var(--line-pri_40-to-wh_40);
-  color: var(--white-w_100-sec);
-}
-.btn_floating:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), .btn_floating.hover {
-  background: var(--btn-btn_hover);
-  border: none;
-  box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5);
-  color: var(--white-w_100);
-}
-.btn_floating.selected {
-  background: var(--btn-btn_default);
-  border: none;
-  box-shadow: inset 0 0 0.75rem #0476FF;
-  color: var(--white-w_100);
-}
-.btn_floating.card_selected {
-  background: var(--tab-btn_default);
-  border: none;
-  box-shadow: inset 0 0 0.75rem #0476FF;
-  color: var(--white-w_100);
-}
-.btn_floating.disabled {
-  background: var(--bg_01_80);
-  border: 0.063rem solid var(--line-wh_12-to-100);
-  box-shadow: none;
-  color: var(--white-w_20);
-}
-
-.btn_ffb {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  padding: 0.125rem 0.75rem 0;
-  border-radius: 8px;
-  font-size: 8px;
-  box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
-  font-size: 0.875rem;
-  font-weight: 500;
-  background: var(--bg_01_80);
-  border: 0.063rem solid var(--line-wh_12-to-40);
-  color: var(--white-w_87);
-}
-.btn_ffb:hover:not(.selected):not(.disabled), .btn_ffb.hover {
-  background: var(--primary-pri_12);
-  color: var(--primary-pri_100);
-  border: 0.063rem solid var(--line-wh_12-to-40);
-  font-weight: 700;
-}
-.btn_ffb.selected {
-  background: var(--primary-pri_20);
-  border: 0.063rem solid var(--line-wh_12-to-40);
-  color: var(--primary-pri_100);
-  font-weight: 700;
-}
-.btn_ffb.disabled {
-  background: var(--bg_01_40);
-  border: 0.063rem solid var(--white-w_12);
-  color: var(--white-w_20);
-}
-
-.btn_ghost {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: auto;
-  padding: 0.125rem 0.75rem 0;
-  border-radius: 8px;
-  font-size: 8px;
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-}
-.btn_ghost:hover {
-  background: rgba(255, 255, 255, 0.06);
-}
-.btn_ghost.selected {
-  background: transparent;
-  color: #27D4FF;
-}
-.btn_ghost.disabled {
-  background: transparent;
-  color: rgba(255, 255, 255, 0.38);
-}
-
 .btn_line1 {
   display: flex;
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   color: var(--white-w_60);
@@ -1762,7 +1454,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   color: var(--white-w_60);
@@ -1787,10 +1479,10 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   background: var(--white-w_12);
   color: var(--white-w_87);
@@ -1809,7 +1501,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   background: rgba(255, 255, 255, 0.12);
@@ -1835,37 +1527,31 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   -webkit-backdrop-filter: blur(1.875rem);
   backdrop-filter: blur(1.875rem);
   box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
   background: var(--bg_01_80);
-  border: 0.063rem solid var(--line-pri_40-to-wh_40);
+  border: 1px solid var(--line-pri_40-to-wh_40);
   color: var(--white-w_100-sec);
 }
 .btn_toggle_floating:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), .btn_toggle_floating.hover {
   background: var(--btn-btn_hover);
   border: none;
-  box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5);
+  box-shadow: inset 0 0 12px rgba(39, 212, 255, 0.5);
   color: var(--white-w_100);
 }
 .btn_toggle_floating.selected {
   background: var(--btn-btn_default);
   border: none;
-  box-shadow: inset 0 0 0.75rem #0476FF;
-  color: var(--white-w_100);
-}
-.btn_toggle_floating.card_selected {
-  background: var(--tab-btn_default);
-  border: none;
-  box-shadow: inset 0 0 0.75rem #0476FF;
+  box-shadow: inset 0 0 12px #0476FF;
   color: var(--white-w_100);
 }
 .btn_toggle_floating.disabled {
   background: var(--bg_01_80);
-  border: 0.063rem solid var(--line-wh_12-to-100);
+  border: 1px solid var(--line-wh_12-to-100);
   box-shadow: none;
   color: var(--white-w_20);
 }
@@ -1893,12 +1579,12 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   -webkit-backdrop-filter: blur(1.875rem);
   backdrop-filter: blur(1.875rem);
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   background: rgba(10, 11, 20, 0.4);
   border: 0.063rem solid rgba(255, 255, 255, 0.2);
@@ -1906,7 +1592,6 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 .btn_toggle_footer.selected, .btn_toggle_footer:hover, .btn_toggle_footer:focus {
   background: rgba(39, 212, 255, 0.2);
   border: 0.063rem solid rgba(255, 255, 255, 0.12);
-  color: #27D4FF;
 }
 
 .btn_toggle_ffb {
@@ -1914,31 +1599,31 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   background: var(--bg_01_80);
-  border: 0.063rem solid var(--line-wh_12-to-40);
+  border: 1px solid var(--line-wh_12-to-40);
   color: var(--white-w_87);
 }
 .btn_toggle_ffb:hover:not(.selected):not(.disabled), .btn_toggle_ffb.hover {
   background: var(--primary-pri_12);
   color: var(--primary-pri_100);
-  border: 0.063rem solid var(--line-wh_12-to-40);
+  border: 1px solid var(--line-wh_12-to-40);
   font-weight: 700;
 }
 .btn_toggle_ffb.selected {
   background: var(--primary-pri_20);
-  border: 0.063rem solid var(--line-wh_12-to-40);
+  border: 1px solid var(--line-wh_12-to-40);
   color: var(--primary-pri_100);
   font-weight: 700;
 }
 .btn_toggle_ffb.disabled {
   background: var(--bg_01_40);
-  border: 0.063rem solid var(--white-w_12);
+  border: 1px solid var(--white-w_12);
   color: var(--white-w_20);
 }
 .btn_toggle_ffb.disabled {
@@ -1949,7 +1634,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .btn_toggle_icon {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   display: flex;
   align-items: center;
@@ -1984,7 +1669,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   gap: 0.25rem;
@@ -2037,7 +1722,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   padding: 0;
 }
 .btn_icon .word {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   padding: 0;
   color: var(--white-w_87-sec) !important;
@@ -2048,7 +1733,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   background: var(--PRI);
@@ -2058,7 +1743,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 .icon_primary.disabled {
   background: var(--white-w_12);
-  box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1);
+  box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.1);
   color: var(--white-w_20);
 }
 
@@ -2153,7 +1838,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   padding: 0.25rem 0.5rem;
 }
 .btn_s_h28 .word {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
 }
 
@@ -2291,12 +1976,12 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   transform: rotate(0deg);
 }
 .btn_drop .word {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   width: calc(100% - 1.25rem);
 }
 .btn_drop .drop_word {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   color: var(--grade-chart-gco-01);
   width: calc(100% - 1.25rem);
@@ -2327,7 +2012,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   background-color: var(--white-w_20);
 }
 .circle_grey28 + .word {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
 }
 .circle_grey28.popover {
@@ -2350,7 +2035,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   background-color: transparent;
 }
 .circle16 + .word, .circle32 + .word, .circle48 + .word, .circle64 + .word {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
 }
 
@@ -2381,7 +2066,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   background-color: rgba(255, 255, 255, 0.2);
 }
 .circle_grey32 + .word {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
 }
 .circle_grey32.line {
@@ -2389,7 +2074,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   border: 0.063rem solid var(--white-w_12);
 }
 .circle_grey32 + .word_medium {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
 }
 .circle_grey32 + .word_medium.selected, .circle_grey32 + .word_medium:hover {
@@ -2602,7 +2287,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 
 /*controll bar End*/
 .a_link {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   padding: 0.625rem 1rem;
   cursor: pointer;
@@ -2620,7 +2305,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   color: rgba(255, 255, 255, 0.38);
 }
 .a_link.more {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
 }
 .a_link.short {
@@ -2795,7 +2480,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .wrput {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
   width: 200px;
   background-color: transparent;
@@ -2821,14 +2506,14 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   height: 48px;
 }
 .wrput.medium {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   width: 100%;
   height: 40px;
   padding: 0 8px 0 12px;
 }
 .wrput.small {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   width: 100%;
   height: 28px;
@@ -2840,7 +2525,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .sp_name {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   padding: 0 0.5rem;
 }
@@ -2900,7 +2585,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .mess {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   line-height: 1.2;
   color: rgba(0, 0, 0, 0.7);
@@ -2913,7 +2598,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .btn_srch {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   min-width: 3.625rem;
   height: 2rem;
@@ -2998,7 +2683,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   border-radius: 0.125rem;
   color: var(--white-w_40);
@@ -3071,7 +2756,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .srch_put {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_40);
   background: transparent;
@@ -3117,7 +2802,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   cursor: pointer;
 }
 .srch_ul li .p_val {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   width: 100%;
 }
@@ -3154,12 +2839,12 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   align-items: center;
 }
 .save_line label {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
 }
 
 .pw_initial a {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_87-sec);
   cursor: pointer;
@@ -3171,7 +2856,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   margin: 0 0 0.5rem;
 }
 .pop_rcd_dl dt {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--more-visible-wh_60-to-100);
   width: 4.5rem;
@@ -3185,7 +2870,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .selector {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   border-radius: 0.125rem;
   width: 13.5rem;
@@ -3215,7 +2900,7 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
   color: #000;
 }
 .selector.sm {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   width: 7.5rem;
   background-size: 1rem 1rem;
@@ -3264,12 +2949,12 @@ button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_
 }
 
 .h_tlt {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
 }
 
 button {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
 }
 button.edit_red {
@@ -3446,13 +3131,13 @@ button.edit_white {
   cursor: pointer;
 }
 .indi_top h1 {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   color: var(--primary-to-grayscale-to-bk);
   line-height: 1.1;
 }
 .indi_top .record_menu.hauto li a {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   padding: 0;
 }
@@ -3490,7 +3175,7 @@ button.edit_white {
   box-shadow: 0 0 0.75rem 0 inset #0068e6;
 }
 .indi_etc .indi_tlt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   text-align: center;
 }
@@ -3504,7 +3189,7 @@ button.edit_white {
        column-gap: 1.875rem;
 }
 .record_menu li a {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   color: var(--more-visible-wh_60-to-100);
   display: block;
@@ -3526,7 +3211,7 @@ button.edit_white {
   padding: 0 0 0.75rem;
 }
 .record_menu.usage li a {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   padding: 0 0 0.75rem;
 }
@@ -3556,7 +3241,7 @@ button.edit_white {
   color: var(--white-w_87);
 }
 .tm_zone_top h1 {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   color: var(--white-w_87);
 }
@@ -3588,7 +3273,7 @@ button.edit_white {
 }
 
 .tmbox_date {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 300;
   color: var(--white-w_60);
   word-break: keep-all;
@@ -3609,12 +3294,12 @@ button.edit_white {
   margin: 0 0 0.5rem;
 }
 .tm_dl dt p {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
 }
 .tm_dl.pattern dt p {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
 }
 .tm_dl dd .badge {
@@ -3623,7 +3308,7 @@ button.edit_white {
   letter-spacing: 0.125rem;
 }
 .tm_dl dd p {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   line-height: 1.4;
 }
@@ -3691,7 +3376,7 @@ button.edit_white {
 }
 
 .diagon_tlt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   color: var(--primary-pri_100);
 }
@@ -3705,14 +3390,14 @@ button.edit_white {
 .diagon_result {
   display: flex;
   align-items: flex-end;
-  font-size: 1.75rem;
+  font-size: 28px;
   font-weight: 700;
   color: var(--primary-pri_100);
   -moz-column-gap: 0.375rem;
        column-gap: 0.375rem;
 }
 .diagon_result .unit {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   line-height: 1.7;
 }
@@ -3745,7 +3430,7 @@ button.edit_white {
   border: none;
 }
 .indi_dl dt {
-  font-size: 1.25rem;
+  font-size: 20px;
   font-weight: 700;
   display: flex;
   align-items: flex-end;
@@ -3753,13 +3438,13 @@ button.edit_white {
   margin: 0.25rem 0 0 0;
 }
 .indi_dl dt .unit {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   color: var(--primary-pri_60);
   margin: 0 0 0 0.125rem;
 }
 .indi_dl dd {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
   color: var(--primary-pri_100);
 }
@@ -3772,7 +3457,7 @@ button.edit_white {
   width: 33.333%;
 }
 .indi_dl.third dt {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
 }
 .indi_dl.green {
@@ -3796,7 +3481,7 @@ button.edit_white {
 }
 
 .chart_text {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   width: 100%;
   min-height: 1.375rem;
@@ -3826,7 +3511,7 @@ button.edit_white {
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 300;
   margin: 0.5rem 0 0;
   padding: 0;
@@ -3916,12 +3601,12 @@ button.edit_white {
   padding: 0 0 1rem;
 }
 .monit_top h1 {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   color: var(--white-w_87);
 }
 .monit_top h2 {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   color: var(--white-w_87);
 }
@@ -3932,7 +3617,7 @@ button.edit_white {
   padding: 1rem;
   background-color: var(--more-bright-wh_6-to-60);
   overflow: hidden;
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
 }
 .exp_cont.hauto {
@@ -3985,7 +3670,7 @@ button.edit_white {
 }
 
 .layout_top {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   padding: 1.25rem 1rem 1rem 0;
   color: var(--primary-to-grayscale-to-bk);
@@ -4008,7 +3693,7 @@ button.edit_white {
   align-items: center;
 }
 .exp_dl dt {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   width: 3.75rem;
   padding: 0 0.5rem 0 0;
@@ -4091,7 +3776,7 @@ button.edit_white {
   margin-bottom: 0;
 }
 .check_dl dt {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 300;
   display: flex;
   justify-content: space-between;
@@ -4142,7 +3827,7 @@ button.edit_white {
   margin: 0 0.375rem 0 0;
 }
 .ch_radio .word {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 300;
   color: var(--white-w_87-sec);
 }
@@ -4152,7 +3837,7 @@ button.edit_white {
 }
 
 .pr_sign {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   min-width: 7rem;
   height: 1.75rem;
@@ -4287,7 +3972,7 @@ button.edit_white {
        column-gap: 0.875rem;
 }
 .calen_date span {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 300;
   color: rgba(255, 255, 255, 0.87);
   letter-spacing: 0.031rem;
@@ -4320,14 +4005,14 @@ button.edit_white {
   border: none;
 }
 .bott_info.small .smart_top .date {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
 }
 .bott_info.small .smart_cont {
   padding: 0;
 }
 .bott_info.small .smart_cont .sm_txt {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   margin: 0;
 }
@@ -4335,7 +4020,7 @@ button.edit_white {
   font-size: 1.25rem;
 }
 .bott_info.small .smart_cont .sm_result .mini {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
 }
 .bott_info.chart {
@@ -4377,7 +4062,7 @@ button.edit_white {
   justify-content: space-between;
 }
 .smart_top .date {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_60);
   text-align: right;
@@ -4400,12 +4085,12 @@ button.edit_white {
   font-size: 1.7rem;
 }
 .smart_cont.bott .sm_txt {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   margin: 0 0 0.25rem;
 }
 .smart_cont.bott .percent_txt {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
 }
 .smart_cont .sm_result {
@@ -4416,20 +4101,20 @@ button.edit_white {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.5rem;
+  font-size: 24px;
   font-weight: 700;
   flex-wrap: wrap;
   width: 100%;
   letter-spacing: 0;
 }
 .sm_result .mini {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   margin: 0.5rem 0 0 0.25rem;
 }
 
 .sm_txt {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   text-align: center;
   word-break: keep-all;
@@ -4458,7 +4143,7 @@ button.edit_white {
   color: var(--etc-b_text);
 }
 .percent_txt .mini {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   margin: 0 0.25rem 0 0;
 }
@@ -4533,7 +4218,7 @@ button.edit_white {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 300;
   color: var(--white-w_87-sec);
   width: 100%;
@@ -4553,12 +4238,12 @@ button.edit_white {
 }
 
 .speed_result {
-  font-size: 1.25rem;
+  font-size: 20px;
   font-weight: 700;
   color: var(--primary-pri_100);
 }
 .speed_result .unit {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
 }
 
@@ -4586,7 +4271,7 @@ button.edit_white {
 }
 
 .weath_record {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   display: block;
   letter-spacing: 0.063rem;
@@ -4599,13 +4284,13 @@ button.edit_white {
   padding: 0.2rem 0;
 }
 .weath_dl dt {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_87);
   padding: 0 0.625rem 0 0;
 }
 .weath_dl dd {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_87-sec);
 }
@@ -4644,7 +4329,7 @@ button.edit_white {
   min-height: auto;
 }
 .dust_cont .unit {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_60);
 }
@@ -4667,7 +4352,7 @@ button.edit_white {
   width: 40%;
 }
 .fore_dl dt {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
   overflow: hidden;
   white-space: nowrap;
@@ -4677,7 +4362,7 @@ button.edit_white {
   padding-top: 0.2rem;
 }
 .fore_dl dd {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: #ffe043;
 }
@@ -4696,7 +4381,7 @@ button.edit_white {
   margin-bottom: 0.25rem;
 }
 .fore_cent .status {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
   margin: 0.25rem 0 0;
 }
@@ -4771,14 +4456,14 @@ button.edit_white {
 }
 
 .bus_dl dd p {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   overflow: hidden;
   white-space: nowrap;
   padding: 0.125rem 0 0 0;
 }
 .bus_dl dd p.hints {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 300;
   color: var(--white-w_60);
   margin: 0.25rem 0 0;
@@ -4806,7 +4491,7 @@ button.edit_white {
 }
 
 .vms_word {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   margin: 0 0.625rem;
   color: var(--white-w_87-sec);
@@ -4837,12 +4522,12 @@ button.edit_white {
 .park_dl dt {
   width: 4.5rem;
   padding: 0 0.625rem 0 0;
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
 }
 .park_dl dd {
   flex: 1;
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_87-sec);
 }
@@ -4858,7 +4543,7 @@ button.edit_white {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   flex: 1;
   padding: 0.125rem 0 0 0.5rem;
@@ -4871,9 +4556,6 @@ button.edit_white {
   height: 0.375rem;
   background-color: #0068E6;
 }
-.sp_graph.sky {
-  background-color: #27D4FF;
-}
 
 .drop_content {
   width: 100%;
@@ -4894,7 +4576,7 @@ button.edit_white {
   padding: 0.1rem 0.5rem 0;
 }
 .uni_table01 thead th {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_87);
   line-height: 1.2;
@@ -4915,7 +4597,7 @@ button.edit_white {
   background: rgba(39, 212, 255, 0.2);
 }
 .uni_table01 tbody tr td {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_87);
   line-height: 1.2;
@@ -4957,7 +4639,6 @@ header.two_line {
   position: relative;
   width: 100%;
   height: 100%;
-  padding: 0 1.25rem;
 }
 .header_in::before {
   content: "";
@@ -4970,15 +4651,6 @@ header.two_line {
   -webkit-backdrop-filter: blur(1.875rem);
           backdrop-filter: blur(1.875rem);
 }
-.header_in .gnb {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-}
-.header_in.navigation {
-  background: var(--bg_01_80);
-}
 
 .header_left {
   display: flex;
@@ -5019,7 +4691,7 @@ header.two_line {
   height: 100%;
 }
 .gnb ul li a {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   display: block;
   color: var(--more-visible-wh_60-to-100);
@@ -5039,7 +4711,7 @@ header.two_line {
   height: 50%;
 }
 .gnb.two_line ul li a {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   display: block;
   color: var(--more-visible-wh_60-to-100);
@@ -5106,7 +4778,7 @@ header.two_line {
        column-gap: 0.25rem;
 }
 .hd_text span {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   color: var(--white-w_87-sec);
 }
@@ -5226,7 +4898,7 @@ header.two_line {
   border-radius: 0.125rem;
 }
 .busrt_wrap span {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
 }
 .busrt_wrap span.green {
@@ -5308,7 +4980,7 @@ header.two_line {
   cursor: pointer;
 }
 .check_text .text {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   margin: 0.25rem 0 0 0.375rem;
 }
@@ -5326,18 +4998,18 @@ header.two_line {
 .start_dl dt {
   display: flex;
   justify-content: center;
-  font-size: 1.5rem;
+  font-size: 24px;
   font-weight: 700;
   color: var(--primary-pri_100);
 }
 .start_dl dd {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--primary-pri_100);
 }
 
 .record {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 300;
   color: var(--white-w_60);
 }
@@ -5362,7 +5034,7 @@ header.two_line {
   cursor: pointer;
 }
 .park_sign .park_txt {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   display: block;
   overflow: hidden;
@@ -5435,46 +5107,6 @@ header.two_line {
   transform: translateY(-2rem);
 }
 
-.square {
-  display: inline-block;
-  width: 0.625rem;
-  height: 0.625rem;
-  background-color: #0068E6;
-}
-.square.blue {
-  background-color: #0E44E6;
-}
-.square.blue_deep {
-  background-color: #0A2ACC;
-}
-.square.sky {
-  background-color: #27D4FF;
-}
-.square.sky_blue {
-  background-color: #16A3E9;
-}
-.square.green_light {
-  background-color: #9DFFBE;
-}
-.square.green {
-  background-color: #16D9AB;
-}
-.square.purple {
-  background-color: #937EFF;
-}
-.square.purple_light {
-  background-color: #B5A6FF;
-}
-.square.violet {
-  background-color: #6548F5;
-}
-.square.etc {
-  background-color: rgba(255, 255, 255, 0.3);
-}
-.square.white {
-  background-color: #fff;
-}
-
 .label {
   color: var(--alpha-bk-to-whbk-87);
   text-align: center;
@@ -5579,15 +5211,6 @@ header.two_line {
   height: 100%;
 }
 
-.frame_border {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  position: relative;
-  border: 0.063rem solid rgba(39, 212, 255, 0.4);
-  box-shadow: inset 0 0.25rem 0.75rem rgba(39, 212, 255, 0.4);
-  background: rgba(10, 11, 20, 0.4);
-}
-
 .spin_animation {
   animation: spinAni 1.2s infinite linear;
 }
@@ -5614,7 +5237,7 @@ header.two_line {
 }
 
 .loading_text_animation {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   opacity: 0;
   overflow: hidden;
@@ -5694,20 +5317,20 @@ header.two_line {
 }
 
 .fc_popover {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 500;
   color: var(--white-w_100-sec);
 }
 
 .fs_info {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_100-sec);
   text-align: center;
 }
 
 .fs_unit {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_60);
   text-align: center;
@@ -5768,18 +5391,6 @@ header.two_line {
   border-radius: 0 0 0.125rem 0.125rem;
 }
 
-.data_contents {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  padding: 1.25rem;
-  background: var(--bg_02_60);
-  border-width: 0 0.063rem 0.063rem 0.063rem;
-  border-radius: 0 0 0.125rem 0.125rem;
-  border-bottom: 0.063rem solid var(--line-wh_30-to-60);
-  border-right: 0.063rem solid var(--line-wh_30-to-60);
-  border-left: 0.063rem solid var(--line-wh_30-to-60);
-}
-
 .status {
   border-radius: 0.125rem;
   width: 1.625rem;
@@ -5794,12 +5405,12 @@ header.two_line {
 }
 
 .popup_title {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   color: var(--white-w_100);
 }
 .popup_title.fs_16_bold {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
 }
 
@@ -5815,408 +5426,80 @@ header.two_line {
   border-color: var(--line-pri_40-to-wh_40);
 }
 
-.accordion_block.default .accordion_title {
-  background: var(--more-bright-wh_12-to-6);
-}
-.accordion_block.default .accordion_title:hover:not(.disabled):not(.accordion_level2), .accordion_block.default .hover.accordion_title,
-.accordion_block.default .accordion_title:focus:not(.disabled):not(.accordion_level2) {
-  background: var(--more-visible-wh_20-to-12);
-}
-.accordion_block.default .accord_title_in {
-  background: var(--bg_02_60);
-}
-.accordion_block.default2 .accordion_title.default {
-  background: var(--more-bright-wh_12-to-6);
-}
-.accordion_block.default2 .accordion_title.default:hover:not(.disabled):not(.accordion_level2), .accordion_block.default2 .hover.accordion_title.default,
-.accordion_block.default2 .accordion_title.default:focus:not(.disabled):not(.accordion_level2) {
-  background: var(--more-visible-wh_20-to-12);
-}
-.accordion_block.default2 .accordion_title {
-  background: rgba(255, 255, 255, 0.12);
+.card_block.default, .card_block.label {
+  -webkit-backdrop-filter: blur(1.875rem);
+  backdrop-filter: blur(1.875rem);
+  padding: 1.25rem;
+  background: var(--bg_01_80) 0% 0% no-repeat padding-box;
+  border: 0.063rem solid var(--line-pri_40-to-wh_40);
 }
-.accordion_block.default2 .accord_title_in {
-  background: var(--bg_02_60);
+.card_block.label {
+  border-radius: 0.125rem;
+  display: flex;
+  padding: 0.625rem;
 }
-.accordion_block.point {
+.card_block.point {
   -webkit-backdrop-filter: blur(1.875rem);
   backdrop-filter: blur(1.875rem);
+  background: transparent url("../images/card_point_bg_320px.svg") 0% 0% no-repeat padding-box;
 }
-.accordion_block.point .accordion_title,
-.accordion_block.point .accordion_title:hover:not(.point .disabled) {
-  background: var(--primary-pri_20);
-}
-.accordion_block.point .accordion_title:hover:not(.accordion_level2):not(.disabled):not(.point .disabled), .accordion_block.point .hover.accordion_title,
-.accordion_block.point .accordion_title:focus {
-  background: var(--primary-pri_30);
+
+.card_head {
+  display: flex;
+  align-items: center;
+  position: relative;
+  height: 1.25rem;
+  cursor: pointer;
 }
-.accordion_block.point .accordion_contents {
-  background: rgba(255, 255, 255, 0.06);
+.card_head.on:after {
+  transform: rotate(180deg);
 }
-.accordion_block.point.disabled {
-  cursor: default;
+.card_head:after {
+  position: absolute;
+  content: "";
+  top: 0;
+  right: -0.375rem;
+  width: 1.25rem;
+  height: 1.25rem;
+  background-image: url(../images/dropdown_uisky_20px.svg);
 }
-.accordion_block.point.disabled .accordion_title {
-  color: var(--white-w_20);
+
+.inner_card_type1,
+.inner_card_type2 {
+  background: rgba(255, 255, 255, 0.06);
 }
-.accordion_block.level .accordion_title {
-  background: transparent;
+.inner_card_type1 .inner_head,
+.inner_card_type2 .inner_head {
+  height: 2.5rem;
+  padding: 0.625rem 0.75rem;
+  line-height: 1.25rem;
 }
-.accordion_block.level .accordion_title:hover:not(.disabled), .accordion_block.level .hover.accordion_title,
-.accordion_block.level .accordion_title:focus:not(.disabled) {
-  background: transparent;
+
+.inner_card_type1 {
+  padding: 0 0.75rem 0.75rem;
 }
-.accordion_block.level .accord_title_in {
-  background: rgba(4, 9, 26, 0.6);
+.inner_card_type1 .inner_body {
+  background: rgba(255, 255, 255, 0.06);
 }
-.accordion_block.disabled {
-  cursor: default;
+
+.inner_card_type2 .inner_head {
+  background: rgba(255, 255, 255, 0.06);
 }
-.accordion_block.disabled .accordion_title {
-  background: var(--more-bright-wh_12-to-6);
-  color: var(--white-w_20);
+
+.map_color__tag {
+  width: 1rem;
+  height: 1rem;
+  font-size: 0.875rem;
+  line-height: 1rem;
+  border-radius: 0.125rem;
+  border: 0.063rem solid #ffffff;
 }
-.accordion_block.disabled .accordion_title .toggle {
-  opacity: 0.4;
-}
-.accordion_block.disabled .accordion_title .img_with {
-  opacity: 0.2;
-}
-.accordion_block.disabled .accordion_toggle {
-  cursor: default;
-  opacity: 0.2;
-}
-.accordion_block.disabled_level2 {
-  cursor: default;
-}
-.accordion_block.disabled_level2 .accordion_title {
-  background: transparent;
-  color: var(--white-w_20);
-}
-.accordion_block.disabled_level2 .accordion_title .toggle {
-  opacity: 0.4;
-}
-.accordion_block.disabled_level2 .accordion_title .img_with {
-  opacity: 0.2;
-}
-.accordion_block.disabled_level2 .accordion_toggle {
-  cursor: default;
-  opacity: 0.2;
-}
-.accordion_block.point.disabled {
-  cursor: unset;
-}
-.accordion_block.point.disabled .accordion_title {
-  background: var(--primary-pri_20);
-  color: var(--white-w_20);
-  cursor: default;
-}
-.accordion_block.select .accordion_title:focus,
-.accordion_block.select .accordion_title:hover,
-.accordion_block.select .hover.accordion_title {
-  background: var(--primary-pri_30);
-  background: var(--primary-pri_20);
-}
-.accordion_block.select .accordion_title:hover,
-.accordion_block.select .hover.accordion_title {
-  background: var(--primary-pri_30);
-}
-.accordion_block.select .accordion_title {
-  background: var(--more-bright-wh_12-to-6);
-}
-.accordion_block.select .accordion_title.on {
-  background: var(--primary-pri_30);
-}
-.accordion_block.select .accordion_title.on img, .accordion_block.select .accordion_title.hover img, .accordion_block.select .accordion_title:hover img, .accordion_block.select .accordion_title:focus img {
-  filter: brightness(0) saturate(100%) invert(68%) sepia(15%) saturate(4375%) hue-rotate(161deg) brightness(105%) contrast(103%);
-}
-.accordion_block.select .accordion_contents {
-  background: rgba(255, 255, 255, 0.06);
-}
-.accordion_block.select.disabled {
-  cursor: unset;
-}
-.accordion_block.select.disabled .accordion_title:hover, .accordion_block.select.disabled .hover.accordion_title,
-.accordion_block.select.disabled .accordion_title:focus {
-  background: var(--more-bright-wh_12-to-6);
-  color: rgba(255, 255, 255, 0.38);
-  cursor: not-allowed;
-}
-.accordion_block.select.disabled .checkbox_type label:after {
-  border: 0;
-  background: rgba(255, 255, 255, 0.2);
-}
-.accordion_block.select.level2 .accordion_title:hover:not(.disabled), .accordion_block.select.level2 .hover.accordion_title,
-.accordion_block.select.level2 .accordion_title:focus:not(.disabled) {
-  background: transparent;
-  cursor: pointer;
-}
-.accordion_block.select.level2 .accordion_title {
-  background: transparent;
-}
-.accordion_block.select.level2 .accord_title_in {
-  background: rgba(4, 9, 26, 0.6);
-}
-.accordion_block.select.level2 .accordion_contents {
-  background: transparent;
-}
-.accordion_block.accord_select .accordion_title:focus,
-.accordion_block.accord_select .accordion_title:active,
-.accordion_block.accord_select .accordion_title:hover,
-.accordion_block.accord_select .hover.accordion_title {
-  background: var(--primary-pri_20);
-  color: var(--primary-pri_100);
-}
-.accordion_block.accord_select .accordion_title:hover,
-.accordion_block.accord_select .hover.accordion_title {
-  background: var(--primary-pri_30);
-  color: var(--primary-pri_100);
-}
-.accordion_block.accord_select .accordion_title {
-  background: var(--more-bright-wh_12-to-6);
-}
-.accordion_block.accord_select .accordion_title.on, .accordion_block.accord_select .accordion_title:active, .accordion_block.accord_select .accordion_title:focus {
-  background: var(--primary-pri_30);
-}
-.accordion_block.accord_select .accordion_title.selected {
-  background: var(--primary-pri_20);
-}
-.accordion_block.accord_select .accordion_title.on img, .accordion_block.accord_select .accordion_title.hover img, .accordion_block.accord_select .accordion_title:hover img, .accordion_block.accord_select .accordion_title:focus img, .accordion_block.accord_select .accordion_title.selected img, .accordion_block.accord_select .accordion_title:active img {
-  filter: brightness(0) saturate(100%) invert(68%) sepia(15%) saturate(4375%) hue-rotate(161deg) brightness(105%) contrast(103%);
-}
-.accordion_block.accord_select .accordion_contents {
-  background: var(--more-bright-wh_12-to-6);
-}
-.accordion_block.accord_select .accordion_contents.user {
-  background: var(--more-bright-wh_6-to-60);
-}
-.accordion_block.accord_select.disabled {
-  cursor: unset;
-}
-.accordion_block.accord_select.disabled .accordion_title:hover, .accordion_block.accord_select.disabled .hover.accordion_title,
-.accordion_block.accord_select.disabled .accordion_title:focus {
-  background: var(--more-bright-wh_12-to-6);
-  color: rgba(255, 255, 255, 0.38);
-  cursor: not-allowed;
-}
-.accordion_block.accord_select.disabled .checkbox_type label:after {
-  border: 0;
-  background: rgba(255, 255, 255, 0.2);
-}
-.accordion_block.accord_select .checkbox_type input[type=checkbox]:checked + label + .accordion_title {
-  background: var(--primary-pri_20);
-  color: var(--primary-pri_100);
-}
-.accordion_block.accord_select .checkbox_type input[type=checkbox]:checked + label + .accordion_title .accordion_title {
-  background: var(--primary-pri_20);
-}
-.accordion_block.accord .check_text .text {
-  margin: 0;
-}
-.accordion_block.level {
-  padding: 0 1.063rem 0 3.5rem;
-}
-.accordion_block.level .accordion_title:hover:not(.disabled), .accordion_block.level .hover.accordion_title,
-.accordion_block.level .accordion_title:focus:not(.disabled) {
-  background: transparent;
-  cursor: pointer;
-}
-.accordion_block.level .accordion_title {
-  background: transparent;
-}
-.accordion_block.level .accord_title_in {
-  background: rgba(4, 9, 26, 0.6);
-}
-.accordion_block.levelwith .accordion_title:hover:not(.disabled), .accordion_block.levelwith .hover.accordion_title,
-.accordion_block.levelwith .accordion_title:focus:not(.disabled) {
-  background: transparent;
-  cursor: pointer;
-}
-.accordion_block.levelwith .accordion_title {
-  background: transparent;
-}
-.accordion_block.levelwith .accord_title_in {
-  background: rgba(4, 9, 26, 0.6);
-}
-.accordion_block.accordion_level2 .accordion_title,
-.accordion_block.accordion_level2 .accordion_contents {
-  padding: 0 1.125rem 0 3.5rem;
-}
-.accordion_block.accordion_level2:hover {
-  background: transparent;
-}
-.accordion_block.accordion_level2:hover .accordion_title,
-.accordion_block.accordion_level2:hover .accordion_contents {
-  padding: 0 1.125rem 0 3.5rem;
-}
-
-.accordion_title {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  font-weight: 500;
-  position: relative;
-  height: 2.25rem;
-  padding: 0 1.125rem 0 1.25rem;
-  color: var(--white-w_87-sec);
-}
-.accordion_title.disabled {
-  background: var(--more-bright-wh_12-to-6);
-  cursor: not-allowed;
-  color: var(--white-w_20);
-}
-
-.accordion_contents {
-  font-size: 0.8125rem;
-  font-weight: 400;
-  display: none;
-  min-height: 2.25rem;
-  padding: 0 1.125rem 0 1.25rem;
-  line-height: 1rem;
-  color: var(--white-w_87);
-}
-.accordion_contents.show {
-  display: block;
-}
-.accordion_contents.inner {
-  padding: 0 1.125rem 0 3.5rem;
-}
-.accordion_contents.line {
-  border-bottom: 0.063rem solid var(--line-wh_30-to-60);
-}
-
-.accordion_paragraph {
-  padding: 1.25rem 0;
-  line-height: 1.125rem;
-}
-
-.tree_contents {
-  display: none;
-}
-.tree_contents.show {
-  display: block;
-}
-
-.accordion_toggle {
-  cursor: pointer;
-}
-.accordion_toggle.disabled {
-  cursor: default;
-}
-
-.accordion_up {
-  display: none;
-}
-
-.accordion_title.on .accordion_up,
-.accordion_toggle.on .accordion_up,
-.tree_button.on .accordion_up {
-  display: block;
-}
-.accordion_title.on .accordion_down,
-.accordion_toggle.on .accordion_down,
-.tree_button.on .accordion_down {
-  display: none;
-}
-
-.accordion_title.on + .accordion_contents {
-  display: block;
-}
-
-.accordion_title.disabled .accordion_up, .accordion_title.disabled .accordion_down {
-  opacity: 0.4;
-}
-
-.tree_button {
-  display: flex;
-  align-items: center;
-  -moz-column-gap: 0.5rem;
-       column-gap: 0.5rem;
-}
-.tree_button.check label {
-  font-size: 0.8125rem;
-  font-weight: 400;
-}
-.tree_button.no_check label {
-  font-size: 0.8125rem;
-  font-weight: 400;
-  color: var(--white-w_100-sec);
-}
-
-.card_block.default, .card_block.label {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  padding: 1.25rem;
-  background: var(--bg_01_80) 0% 0% no-repeat padding-box;
-  border: 0.063rem solid var(--line-pri_40-to-wh_40);
-}
-.card_block.label {
-  border-radius: 0.125rem;
-  display: flex;
-  padding: 0.625rem;
-}
-.card_block.point {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  background: transparent url("../images/card_point_bg_320px.svg") 0% 0% no-repeat padding-box;
-}
-
-.card_head {
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: 1.25rem;
-  cursor: pointer;
-}
-.card_head.on:after {
-  transform: rotate(180deg);
-}
-.card_head:after {
-  position: absolute;
-  content: "";
-  top: 0;
-  right: -0.375rem;
-  width: 1.25rem;
-  height: 1.25rem;
-  background-image: url(../images/dropdown_uisky_20px.svg);
-}
-
-.inner_card_type1,
-.inner_card_type2 {
-  background: rgba(255, 255, 255, 0.06);
-}
-.inner_card_type1 .inner_head,
-.inner_card_type2 .inner_head {
-  height: 2.5rem;
-  padding: 0.625rem 0.75rem;
-  line-height: 1.25rem;
-}
-
-.inner_card_type1 {
-  padding: 0 0.75rem 0.75rem;
-}
-.inner_card_type1 .inner_body {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.inner_card_type2 .inner_head {
-  background: rgba(255, 255, 255, 0.06);
-}
-
-.map_color__tag {
-  width: 1rem;
-  height: 1rem;
-  font-size: 0.875rem;
-  line-height: 1rem;
-  border-radius: 0.125rem;
-  border: 0.063rem solid #ffffff;
-}
-
-.checkbox_type label {
-  position: relative;
-  padding-left: 1.625rem;
-  cursor: pointer;
-  line-height: 1rem;
+
+.checkbox_type label {
+  position: relative;
+  padding-left: 1.625rem;
+  cursor: pointer;
+  line-height: 1rem;
 }
 .checkbox_type label:after {
   position: absolute;
@@ -6326,22 +5609,6 @@ header.two_line {
   background: rgba(255, 255, 255, 0.1);
 }
 
-.map_control_line {
-  position: relative;
-  overflow: hidden;
-}
-.map_control_line:after {
-  background-color: var(--primary-pri_20);
-}
-
-.map_control_line_mini {
-  position: relative;
-  overflow: hidden;
-}
-.map_control_line_mini:after {
-  background-color: var(--primary-pri_20);
-}
-
 .disabled.map_control_line:after {
   background-color: var(--control-disabled);
 }
@@ -6362,7 +5629,7 @@ header.two_line {
 }
 
 .discrete_text {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_60);
 }
@@ -6405,275 +5672,15 @@ header.two_line {
   background: var(--white-w_40);
 }
 
-.disabled.map_control_line:after {
-  background-color: var(--white-w_40);
-  opacity: 0.1;
+.tooltip_parents {
+  position: relative;
 }
-.disabled.map_control_line .map_control_rate:after,
-.disabled.map_control_line .map_control_rate_mini:after,
-.disabled.map_control_line .rate_block {
-  background-color: var(--white-w_100-sec);
-  opacity: 0.1;
+.tooltip_parents:hover .tooltip_label:not(.on), .tooltip_parents:focus .tooltip_label:not(.on) {
+  display: block;
+  top: -1.563rem;
 }
 
-.map_control_line:after,
-.map_control_rate:after {
-  position: absolute;
-  content: "";
-  border-radius: 0.125rem;
-  z-index: 0;
-  top: 0.313rem;
-  width: 100%;
-  height: 0.25rem;
-}
-
-.map_control_line_mini:after,
-.map_control_rate_mini:after {
-  position: absolute;
-  content: "";
-  border-radius: 0.125rem;
-  z-index: 0;
-  top: 0.188rem;
-  width: 100%;
-  height: 0.25rem;
-}
-
-.map_control_rate:after .map_control_rate_mini:after {
-  z-index: 1;
-}
-
-.map_control_rate,
-.map_control_rate_mini {
-  position: relative;
-  width: 0;
-  min-width: 0.375rem;
-}
-.map_control_rate:after,
-.map_control_rate_mini:after {
-  background-color: var(--primary-pri_100);
-}
-
-.step_cursor {
-  cursor: pointer;
-}
-
-.rate_block {
-  border-radius: 0.375rem;
-  position: absolute;
-  z-index: 2;
-  top: 0;
-  right: 0;
-  width: 0.375rem;
-  height: 100%;
-  cursor: pointer;
-  background: var(--primary-pri_100);
-}
-.rate_block.small {
-  width: 0.25rem;
-}
-
-.map_timeline.small div {
-  height: 0.25rem;
-}
-.map_timeline > div {
-  width: 0.063rem;
-  height: 0.5rem;
-  background: var(--white-w_40);
-}
-.map_timeline.xsmall div {
-  height: 0.2rem;
-}
-
-.map_time_line {
-  border-top: 0.063rem solid var(--line-wh_12-to-100);
-  border-bottom: 0.063rem solid var(--line-wh_12-to-100);
-  background: var(--bg_01_80);
-}
-
-.map_control_outline {
-  display: flex;
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  border-radius: 0.125rem;
-  align-items: stretch;
-  border: 0.063rem solid var(--line-wh_12-to-100);
-  background: var(--bg_01_80);
-}
-.map_control_outline .border_right {
-  border-right: 0.063rem solid rgba(39, 212, 255, 0.12);
-}
-.map_control_outline .border_left {
-  border-left: 0.063rem solid rgba(39, 212, 255, 0.12);
-}
-.map_control_outline .rate_block {
-  width: 0.25rem;
-}
-.map_control_outline .map_control_line:after, .map_control_outline .map_control_rate:after {
-  top: 0.25rem;
-}
-.map_control_outline .map_timeline.top {
-  transform: translate(0, 0.188rem);
-}
-.map_control_outline .map_timeline.bottom {
-  transform: translate(0, -0.188rem);
-}
-
-.member_box {
-  position: relative;
-}
-
-.member_popover {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  border-radius: 0.125rem;
-  display: none;
-  position: absolute;
-  right: 0;
-  top: 1.86rem;
-  z-index: 11 !important;
-  background: var(--blur_02_60);
-  border: 0.063rem solid var(--white-w_12);
-  box-shadow: 0.75rem 0.75rem 1.5rem 0 rgba(4, 9, 26, 0.2);
-}
-.member_popover.on {
-  display: block;
-}
-
-.tooltip_parents {
-  position: relative;
-}
-.tooltip_parents:hover .tooltip_label:not(.on), .tooltip_parents:focus .tooltip_label:not(.on) {
-  display: block;
-  top: -1.563rem;
-}
-
-.tooltip_label {
-  border-radius: 0.125rem;
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  font-size: 0.75rem !important;
-  font-weight: 500 !important;
-  display: none;
-  position: absolute;
-  min-height: 1.5rem;
-  padding: 0 0.5rem;
-  background: var(--etc-bg);
-  border: 0.063rem solid var(--white-w_40);
-  letter-spacing: 0.01em;
-  line-height: 1.375rem;
-  white-space: nowrap;
-  color: var(--white-w_100-sec);
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(4, 9, 26, 0.2);
-}
-.tooltip_label.on {
-  display: block;
-}
-.tooltip_label.default {
-  border: 0.063rem solid var(--white-w_40-sec);
-  opacity: 1;
-  background: rgba(55, 61, 82, 0.6);
-  box-shadow: 0 0.25rem 0.75rem 0 rgba(4, 9, 26, 0.2);
-  color: var(--white-w_100);
-}
-
-.bubble {
-  color: #FFF;
-}
-.bubble:before, .bubble:after {
-  position: absolute;
-  content: "";
-  display: block;
-  width: 0;
-  left: 50%;
-  border-style: solid;
-}
-.bubble:before {
-  z-index: 0;
-}
-.bubble:after {
-  z-index: 1;
-}
-.bubble.bb_black {
-  background: rgb(5, 10, 25);
-}
-.bubble.bb_black:before {
-  border-color: #636771 transparent;
-}
-.bubble.bb_black:after {
-  border-color: rgb(5, 10, 25) transparent;
-}
-.bubble.bb_blue {
-  background: #0068E6;
-}
-.bubble.bb_blue:before {
-  border-color: #61a0ef transparent;
-}
-.bubble.bb_blue:after {
-  border-color: #0068E6 transparent;
-}
-.bubble.bb_grey {
-  background: #4F525E;
-}
-.bubble.bb_grey:before {
-  border-color: rgba(255, 255, 255, 0.4) transparent;
-}
-.bubble.bb_grey:after {
-  border-color: #4F525E transparent;
-}
-.bubble.bb_bottom:before {
-  bottom: -0.469rem;
-  margin-left: -0.313rem;
-  border-width: 0.438rem 0.313rem 0;
-}
-.bubble.bb_bottom:after {
-  bottom: -0.375rem;
-  border-width: 0.375rem 0.25rem 0;
-  margin-left: -0.25rem;
-}
-.bubble.bb_top:before {
-  top: -0.469rem;
-  margin-left: -0.313rem;
-  border-width: 0 0.313rem 0.438rem;
-}
-.bubble.bb_top:after {
-  top: -0.344rem;
-  border-width: 0 0.25rem 0.375rem;
-  margin-left: -0.25rem;
-}
-.bubble.bb_right:before {
-  top: 50%;
-  left: auto;
-  right: -0.531rem;
-  margin-top: -0.313rem;
-  border-width: 0 0.25rem 0.438rem;
-  transform: rotate(90deg);
-}
-.bubble.bb_right:after {
-  top: 50%;
-  left: auto;
-  right: -0.375rem;
-  margin-top: -0.313rem;
-  border-width: 0 0.25rem 0.438rem;
-  transform: rotate(90deg);
-}
-.bubble.bb_left:before {
-  top: 50%;
-  right: auto;
-  left: -0.531rem;
-  margin-top: -0.313rem;
-  border-width: 0 0.25rem 0.438rem;
-  transform: rotate(-90deg);
-}
-.bubble.bb_left:after {
-  top: 50%;
-  right: auto;
-  left: -0.375rem;
-  margin-top: -0.313rem;
-  border-width: 0 0.25rem 0.438rem;
-  transform: rotate(-90deg);
-}
-
-.absolute {
+.absolute {
   position: absolute;
 }
 
@@ -6700,351 +5707,87 @@ header.two_line {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
-  font-size: 0.75rem;
-  line-height: 1.25rem;
-  border-radius: 0.125rem;
-  color: var(--white-w_100-sec);
-  font-weight: 500;
-}
-.btn_pagination.selected {
-  background: var(--white-w_16);
-}
-
-.playbar_type1_box {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, 2.625rem);
-}
-
-.playbar_type1 {
-  font-size: 0.75rem;
-  font-weight: 400;
-  display: grid;
-  grid-auto-rows: auto;
-  position: relative;
-}
-.playbar_type1 .type1_text, .playbar_type1 .default, .playbar_type1 .played, .playbar_type1 .loaded {
-  grid-column: 1/1;
-  grid-row: 1;
-}
-.playbar_type1 .type1_text {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 3;
-}
-.playbar_type1 .default {
-  z-index: 0;
-  background: transparent;
-}
-.playbar_type1 .played {
-  z-index: 2;
-  background: var(--primary-pri_80);
-}
-.playbar_type1 .loaded {
-  z-index: 1;
-  background: var(--primary-pri_40);
-}
-.playbar_type1 .played_text {
-  color: var(--white-w_100);
-}
-.playbar_type1 .loaded_text {
-  color: var(--white-w_100-sec);
-}
-
-.playbar_type2_box {
-  border-radius: 0.125rem;
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  display: flex;
-  padding: 1.25rem 1.25rem 0.75em 0.75em;
-  background: var(--blur_02_60);
-}
-.playbar_type2_box.default {
-  flex-direction: column;
-}
-.playbar_type2_box.mini {
-  -webkit-backdrop-filter: blur(1.875rem);
-          backdrop-filter: blur(1.875rem);
-  padding: 0.75em 3.75rem;
-  white-space: nowrap;
-}
-
-.playbar_text {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--white-w_87);
-}
-
-.playbar_stick {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-}
-.playbar_stick:after {
-  position: absolute;
-  content: "";
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  width: calc(100% - 0.125rem);
-  height: 0.125rem;
-  margin: auto;
-  background: var(--white-w_60);
-  content: "";
-}
-.playbar_stick .playbar_divider {
-  width: 0.063rem;
-  height: 0.625rem;
-  background: var(--white-w_60);
-}
-.playbar_stick .playbar_divider_ing {
-  width: 3.125rem;
-  height: 0.125rem;
-  background: var(--primary-pri_100);
-}
-
-.playbar_current {
-  z-index: 10;
-  transform: translate(-0.625rem, -0.625rem);
-}
-
-.play_time {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--white-w_87-sec);
-}
-
-.playing_time {
-  font-size: 0.75rem;
-  font-weight: 400;
-  color: var(--white-w_60);
-}
-
-.map_controller {
-  position: relative;
-  width: 8.125rem;
-  height: 8.125rem;
-  padding: 1.25rem;
-}
-
-.map_circle,
-.circle_piece {
-  width: 5.625rem;
-  height: 5.625rem;
-  padding: 0.25rem;
-  border-radius: 50%;
-  border: 0.063rem solid var(--primary-pri_40);
-  background: rgba(0, 0, 0, 0.25) 0% 0% no-repeat padding-box;
-  background: var(--etc-bg) 0% 0% no-repeat padding-box;
-}
-
-.map_rotate .map_circle {
-  position: absolute;
-  z-index: 2;
-  background: transparent;
-}
-
-.circle_piece {
-  position: absolute;
-  width: 5rem;
-  height: 5rem;
-  overflow: hidden;
-  border: 0.063rem solid var(--primary-pri_100);
-  background: rgba(0, 0, 0, 0.25) 0% 0% no-repeat padding-box;
-  background: var(--etc-bg) 0% 0% no-repeat padding-box;
-}
-.circle_piece .btn_direction {
-  position: absolute;
-  bottom: 50%;
-  right: 50%;
-  width: 6.25em;
-  height: 6.25em;
-  transform-origin: 100% 100%;
-  overflow: hidden;
-  margin-top: -0.65em;
-  margin-left: -5em;
-  border: 0.063rem solid var(--primary-pri_100);
-  box-shadow: 0 0 0.625rem 0 rgba(0, 104, 230, 0.4) inset;
-}
-.circle_piece .direction_01 {
-  transform: rotate(-23deg) skew(45deg);
-}
-.circle_piece .direction_02 {
-  transform: rotate(22deg) skew(45deg);
-}
-.circle_piece .direction_03 {
-  transform: rotate(67deg) skew(45deg);
-}
-.circle_piece .direction_04 {
-  transform: rotate(112deg) skew(45deg);
-}
-.circle_piece .direction_05 {
-  transform: rotate(157deg) skew(45deg);
-}
-.circle_piece .direction_06 {
-  transform: rotate(202deg) skew(45deg);
-}
-.circle_piece .direction_07 {
-  transform: rotate(247deg) skew(45deg);
-}
-.circle_piece .direction_08 {
-  transform: rotate(292deg) skew(45deg);
-}
-.circle_piece .btn_direction button {
-  display: block;
-  position: absolute;
-  bottom: -3.625em;
-  right: -3.625em;
-  height: 7.25em;
-  width: 7.25em;
-  border-radius: 50%;
-  padding-top: 0em;
-  transform: skew(-45deg) rotate(-70deg) scale(1);
-  background-color: transparent;
-}
-.circle_piece .btn_direction button:active, .circle_piece .btn_direction button:hover, .circle_piece .btn_direction button:focus {
-  background: rgba(39, 212, 255, 0.4) 0% 0% no-repeat padding-box;
-  background: var(--line-pri_40-to-wh_100);
-}
-
-.circle_pointer {
-  position: absolute;
-  z-index: 0;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-}
-.circle_pointer button {
-  position: absolute;
-  width: 1rem;
-  height: 1rem;
-  margin: auto;
-  border: none;
-  background-color: transparent;
-  background-image: url(../images/mapcontrol_navi_arrow_.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 1rem auto;
-}
-.circle_pointer .northside_::before {
-  position: absolute;
-  content: "";
-  z-index: 999 !important;
-  bottom: 6.4rem;
-  left: 0;
-  right: 0;
-  width: 0.75rem;
-  height: 0.75rem;
-  margin: auto;
-  background-image: url(../images/mapcontrol_navi_north.svg);
-  background-size: 100% auto;
-}
-.circle_pointer .northside {
-  top: 0;
-  left: 0;
-  right: 0;
-}
-.circle_pointer .westside {
-  top: 0;
-  left: 0;
-  bottom: 0;
-  transform: rotate(-90deg);
-}
-.circle_pointer .eastside {
-  top: 0;
-  right: 0;
-  bottom: 0;
-  transform: rotate(90deg);
-}
-.circle_pointer .southside {
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transform: rotate(180deg);
-}
-
-.btn_map_anchor button {
-  position: relative;
-  width: 2rem;
-  height: 2rem;
-  border: 0.063rem solid rgba(39, 212, 255, 0.4);
-  border-radius: 50%;
-  background: transparent;
-}
-.btn_map_anchor button:hover, .btn_map_anchor button:focus {
-  background-color: rgba(39, 212, 255, 0.2);
-}
-
-.map_scroll_unit {
-  position: absolute;
-}
-
-.map_scroll_text {
-  position: absolute;
-  bottom: -1.875rem;
-  white-space: nowrap;
-}
-
-.mapcontrol_btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.control_pad button {
-  display: flex;
-  flex-direction: column;
-  height: 2.25rem;
-}
-.control_pad .btn_secondary.selected {
-  border: none;
-  background: rgba(255, 255, 255, 0.16);
+  width: 1.25rem;
+  height: 1.25rem;
+  font-size: 0.75rem;
+  line-height: 1.25rem;
+  border-radius: 0.125rem;
+  color: var(--white-w_100-sec);
+  font-weight: 500;
 }
-.control_pad .disabled img {
-  opacity: 0.2;
+.btn_pagination.selected {
+  background: var(--white-w_16);
 }
 
-.control_plus_minus {
+.playbar_type2_box {
+  border-radius: 0.125rem;
+  -webkit-backdrop-filter: blur(1.875rem);
+  backdrop-filter: blur(1.875rem);
   display: flex;
+  padding: 1.25rem 1.25rem 0.75em 0.75em;
+  background: var(--blur_02_60);
+}
+.playbar_type2_box.default {
   flex-direction: column;
 }
-.control_plus_minus button {
-  width: 3.5rem;
-  padding: 0.125rem;
+.playbar_type2_box.mini {
+  -webkit-backdrop-filter: blur(1.875rem);
+          backdrop-filter: blur(1.875rem);
+  padding: 0.75em 3.75rem;
+  white-space: nowrap;
 }
-.control_plus_minus button.disabled {
-  color: var(--white-w_20);
+
+.playbar_text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--white-w_87);
 }
 
-.control_direction {
+.playbar_stick {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  position: relative;
 }
-.control_direction button {
-  width: 2.25rem;
-  padding: 0 0;
+.playbar_stick:after {
+  position: absolute;
+  content: "";
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: calc(100% - 0.125rem);
+  height: 0.125rem;
+  margin: auto;
+  background: var(--white-w_60);
+  content: "";
+}
+.playbar_stick .playbar_divider {
+  width: 0.063rem;
+  height: 0.625rem;
+  background: var(--white-w_60);
+}
+.playbar_stick .playbar_divider_ing {
+  width: 3.125rem;
+  height: 0.125rem;
+  background: var(--primary-pri_100);
 }
 
-.scroll_bar {
-  background-color: var(--white-w_40);
+.playbar_current {
+  z-index: 10;
+  transform: translate(-0.625rem, -0.625rem);
 }
 
-.tooltip_label.top, .infowindow_box.top, .legend_label.top {
-  top: auto !important;
-  left: 50%;
-  bottom: calc(100% + 0.125rem);
-  transform: translate(-50%, 0);
+.play_time {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--white-w_87-sec);
 }
-.tooltip_label.bottom, .infowindow_box.bottom, .legend_label.bottom {
-  top: calc(100% + 0.125rem) !important;
-  bottom: auto;
-  left: 50%;
-  transform: translate(-50%, 0);
+
+.playing_time {
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--white-w_60);
 }
 
 .legend_label {
@@ -7080,63 +5823,6 @@ header.two_line {
   height: 5rem;
 }
 
-.snackbar_box {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  box-shadow: 0.75rem 0.75rem 1.5rem 0 rgba(4, 9, 26, 0.2);
-  padding: 1rem 1.25rem;
-  background: var(--background-blur_0260);
-  border: 0.063rem solid var(--white-w_40-sec);
-}
-
-.snack_btn {
-  font-size: 0.875rem;
-  font-weight: 500;
-  background: transparent;
-  border: transparent;
-  color: var(--primary-pri_100);
-}
-
-.notification_box {
-  width: 48.75rem;
-}
-.notification_box .notification_bg {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  -webkit-backdrop-filter: blur(0.156rem);
-          backdrop-filter: blur(0.156rem);
-  min-height: 2.625rem;
-  overflow: hidden;
-  border-width: 0.063rem 0 63rem 0;
-  border-style: solid;
-  -o-border-image: linear-gradient(to right, rgba(39, 212, 255, 0) 0%, var(--hero-border) 50%, rgba(39, 212, 255, 0) 100%);
-     border-image: linear-gradient(to right, rgba(39, 212, 255, 0) 0%, var(--hero-border) 50%, rgba(39, 212, 255, 0) 100%);
-  border-top: 0.188rem solid var(--hero-notification-border-top);
-  border-bottom: 0.188rem solid var(--hero-notification-border-bottom);
-  border-image-slice: 1;
-  opacity: 1;
-  background: linear-gradient(90deg, var(--hero-notification_01) 0%, var(--hero-notification_02) 6.81%, var(--hero-notification_03) 50%, var(--hero-notification_02) 94.31%, var(--hero-notification_01) 100%);
-}
-.notification_box .notification_title {
-  font-size: 1.375rem;
-  font-weight: 700;
-  text-align: center;
-  color: var(--primary-pri_100);
-}
-.notification_box .btn_notification {
-  display: block;
-  margin: 0.75rem auto 0;
-}
-.notification_box.hide .notification_bg {
-  min-height: 0;
-  height: 0;
-  border-width: 0.063rem 0 0 0;
-}
-.notification_box.hide .btn_notification {
-  transform: rotate(180deg);
-}
-
 .gnb_box {
   display: flex;
   align-items: center;
@@ -7201,7 +5887,7 @@ header.two_line {
   align-items: center;
   justify-content: center;
   width: auto;
-  padding: 0.125rem 0.75rem 0;
+  padding: 2px 12px 0;
   border-radius: 8px;
   font-size: 8px;
   background: transparent;
@@ -7233,7 +5919,7 @@ header.two_line {
   align-items: flex-start;
 }
 .gnb_anchor a {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   color: var(--white-w_60);
   color: var(--more-visible-wh_60-to-100);
@@ -7249,7 +5935,7 @@ header.two_line {
   align-items: flex-start;
 }
 .lnb_anchor a, .lnb_sub_anchor a {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   color: var(--white-w_60);
 }
@@ -7271,130 +5957,6 @@ header.two_line {
   justify-content: center;
 }
 
-.gnb_information {
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-}
-.gnb_information * {
-  line-height: 1;
-}
-
-.lnb_box {
-  position: absolute;
-  top: 2.5625rem;
-  left: 0;
-  right: 0;
-}
-
-.lnb_anchor {
-  align-items: stretch;
-  width: 100%;
-}
-.lnb_anchor.on .lnb_sub_anchor {
-  height: auto;
-  padding: 1.25rem 0;
-}
-.lnb_anchor.on:after {
-  position: absolute;
-  content: "";
-  left: 0;
-  top: 2.5rem;
-  width: 100%;
-  height: 0.063rem;
-  border-bottom: 0.063rem solid var(--line-wh_20-to-100);
-}
-.lnb_anchor.center.on:after {
-  border-bottom: 0.063rem solid transparent;
-}
-
-.lnb_anchor__title {
-  white-space: nowrap;
-  color: var(--more-visible-wh_60-to-100);
-}
-
-.lnb_sub_anchor {
-  display: flex;
-  flex-direction: column;
-  height: 0;
-  overflow: hidden;
-  padding: 0 0;
-}
-
-.lnb_administrator {
-  position: relative;
-}
-.lnb_administrator:after {
-  position: absolute;
-  content: "";
-  left: -2.5rem;
-  top: 0;
-  height: 100%;
-  border-left: 0.063rem solid rgba(255, 255, 255, 0.2);
-}
-
-.lnb_popup_content {
-  position: absolute;
-  left: 0;
-  right: 0;
-  background: var(--bg_01_80);
-  border-top: 0.063rem solid var(--line-wh_20-to-100);
-}
-
-.lnb_popup_title_bg {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  height: 2.5rem;
-  padding: 0 1.25rem;
-  background: var(--bg_01_80);
-  border-bottom: 0.063rem solid var(--line-wh_20-to-100);
-}
-.lnb_popup_title_bg span {
-  font-size: 1.25rem;
-  font-weight: 700;
-  color: var(--primary-pri_100);
-}
-.lnb_popup_title_bg span.black {
-  color: var(--white-w_100-sec);
-}
-.lnb_popup_title_bg.page {
-  height: 3.5rem;
-}
-
-.btn_fnb_tab {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  font-weight: 500;
-  overflow: hidden;
-  background-color: var(--bg_01_80);
-}
-.btn_fnb_tab button, .btn_fnb_tab a {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  background-color: var(--bg_01_80);
-  border: 0.063rem solid var(--line-wh_12-to-40);
-  color: var(--white-w_87-sec);
-}
-.btn_fnb_tab button:first-child, .btn_fnb_tab a:first-child {
-  border-right: 0;
-  border-radius: 0.125rem 0 0 0.125rem;
-}
-.btn_fnb_tab button:last-child, .btn_fnb_tab a:last-child {
-  border-radius: 0 0.125rem 0.125rem 0;
-}
-.btn_fnb_tab .selected, .btn_fnb_tab button:hover:not(.selected), .btn_fnb_tab a:hover:not(.selected),
-.btn_fnb_tab button:focus:not(.selected), .btn_fnb_tab a:focus:not(.selected) {
-  -webkit-backdrop-filter: blur(1.875rem);
-  backdrop-filter: blur(1.875rem);
-  font-size: 0.875rem;
-  font-weight: 700;
-  background: var(--primary-pri_20);
-  border: 0.063rem solid var(--line-wh_12-to-40);
-  color: var(--primary-pri_100);
-  opacity: 1;
-}
-
 .fnb_search_bar {
   display: flex;
   align-items: center;
@@ -7481,18 +6043,8 @@ header.two_line {
   overflow: hidden;
 }
 
-.accordion_block.side .accordion_title:hover:not(.disabled), .accordion_block.side .hover.accordion_title,
-.accordion_block.side .accordion_title:focus:not(.disabled) {
-  background: var(--primary-pri_20);
-  border-right: 0.125rem solid var(--primary-pri_100);
-  color: var(--primary-pri_100);
-}
-.accordion_block.side .accord_title_in {
-  background: var(--bg_02_60);
-}
-
 .menu_box {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   height: 2.125rem;
   padding: 0.5rem 1rem;
@@ -7549,7 +6101,7 @@ header.two_line {
   opacity: 0.6;
 }
 .selectbox .selectbox_text, .selectboxSample .selectbox_text {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   overflow: hidden;
   line-height: 1;
@@ -7602,7 +6154,7 @@ header.two_line {
 .selectbox_options .option {
   display: flex;
   align-items: center;
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   height: 1.75rem;
   padding: 0 0.5rem 0 0.75rem;
@@ -7638,7 +6190,7 @@ header.two_line {
 }
 
 .datepicker {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   background-image: url(../images/calendar_fff_24.svg);
   background-repeat: no-repeat;
@@ -7725,7 +6277,7 @@ header.two_line {
 }
 
 .image_frame_text {
-  font-size: 0.6875rem;
+  font-size: 12px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.87);
 }
@@ -7748,7 +6300,7 @@ header.two_line {
   display: flex;
   align-items: center;
   border-radius: 0.125rem;
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   overflow: hidden;
   padding: 0.25rem 0.5rem;
@@ -7788,7 +6340,7 @@ header.two_line {
 
 .btn_list_text {
   border-radius: 0.125rem;
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   height: 100%;
   padding: 0 0.25rem;
@@ -7817,7 +6369,7 @@ header.two_line {
 }
 
 .list_texts {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--primary-pri_100);
 }
@@ -7863,12 +6415,12 @@ header.two_line {
   z-index: 1;
 }
 .dragdrop_text p {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 700;
   color: var(--white-w_100-sec);
 }
 .dragdrop_text span {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_60);
 }
@@ -7883,26 +6435,8 @@ header.two_line {
   background: var(--white-w_6);
 }
 
-.dragdrop_number {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 0.125rem;
-  width: 1.5rem;
-  height: 1.5rem;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  position: absolute;
-  z-index: 2;
-  top: 0.75rem;
-  left: 0.75rem;
-  background: rgb(0, 104, 230);
-  font-weight: 500;
-  color: #ffffff;
-}
-
 .table_box {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_87-sec);
   width: 100%;
@@ -7945,7 +6479,7 @@ header.two_line {
 }
 
 .table_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   color: var(--primary-to-grayscale-to-bk);
 }
@@ -8052,19 +6586,19 @@ header.two_line {
 }
 
 .fc_annotation60 {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_60);
 }
 
 .fc_annotation87 {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_87);
 }
 
 .text_label_box {
-  font-size: 1.25rem;
+  font-size: 20px;
   font-weight: 500;
   border-radius: 0.125rem;
   padding: 1.25rem 1.5rem;
@@ -8200,14 +6734,14 @@ header.two_line {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 1.25rem;
+  font-size: 20px;
   font-weight: 700;
   flex-wrap: wrap;
   width: 100%;
   letter-spacing: 0;
 }
 .velocity_result .unit {
-  font-size: 0.75rem !important;
+  font-size: 12px !important;
   font-weight: 700 !important;
   margin: 0 0 0.25rem 0.25rem;
 }
@@ -8227,7 +6761,7 @@ header.two_line {
 }
 
 .inner_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
   display: flex;
   align-items: center;
@@ -8258,13 +6792,13 @@ header.two_line {
 }
 
 .fc_sub {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   color: var(--white-w_60);
 }
 
 .fc_contents {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   color: var(--white-w_87-sec);
 }
@@ -8281,13 +6815,13 @@ header.two_line {
 }
 
 .time_bar {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: var(--white-w_100-sec);
 }
 
 .time_set {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_100-sec);
 }
@@ -8398,7 +6932,7 @@ header.two_line {
 }
 
 .polygon_text {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   position: absolute;
   color: var(--white-w_87);
@@ -8548,4 +7082,12 @@ header.two_line {
 
 .mn_icon_on {
   display: none;
+}
+
+.mode_box {
+  display: flex;
+  padding: 4px 12px 4px 4px;
+  gap: 12px;
+  border-radius: 50px;
+  background: var(--wh-12);
 }
\ No newline at end of file
diff --git a/assets/css/guide.scss b/assets/css/guide.scss
index 48f1484..3a1ca17 100644
--- a/assets/css/guide.scss
+++ b/assets/css/guide.scss
@@ -123,24 +123,19 @@ input[type=password]{
 }
 
 // font color
-.anchor_default {
-    text-decoration: underline;
-    color: $ui_blue !important;
-    &:hover, &:focus {text-decoration: underline;}
-}
-.fc_primary {color: $ui_sky !important}
-.fc_normal {color: $fc_normal !important}
-.fc_normal_more40 {color: $fc_normal_more40 !important}
-.fc_purple {color: #FF00FF !important}
-.fc_yellow {color: $fc_yellow !important}
-.fc_yellow_04 {color: $fc_yellow_04 !important}
-.fc_yellow_code {color:#ffff80ae !important}
-.fc_green {color: $fc_green !important}
-.fc_code_green {color: $fc_code_green !important}
-.fc_light_green {color: $fc_light_green !important}
-.fc_card_green {color: $fc_card_green;}
-.fc_code_class{color: deeppink !important}
-.fc_blue {color: $ui_blue !important}
+// .fc_primary {}
+// .fc_normal {}
+// .fc_normal_more40 {color: $fc_normal_more40 !important}
+// .fc_purple {color: #FF00FF !important}
+// .fc_yellow {color: $fc_yellow !important}
+// .fc_yellow_04 {color: $fc_yellow_04 !important}
+// .fc_yellow_code {color:#ffff80ae !important}
+// .fc_green {color: $fc_green !important}
+// .fc_code_green {color: $fc_code_green !important}
+// .fc_light_green {color: $fc_light_green !important}
+// .fc_card_green {color: $fc_card_green;}
+// .fc_code_class{color: deeppink !important}
+// .fc_blue {color: $ui_blue !important}
 .text_error {color:$bg_error !important}
 .fc_black99 {color: $bg_black99 !important}
 .fc_black60 {color: $bg_black60 !important}
@@ -193,55 +188,55 @@ input[type=password]{
     -moz-border-radius: 0 !important;
     border-radius: 0 !important;
 }
-.border_none {border: none !important}
-.border_greyE0 {border: 0.063rem solid $bg_greye0}
-.border_greyEb {border: 0.063rem solid #e6e7eb}
-.border_greyF5 {border: 0.063rem solid #F0F1F5;}
-.border_white20 {border: 0.063rem solid $bg_grey20}
-.border_white38 {border: 0.063rem solid $bg_grey38}
-.border_black30 {border: 0.063rem solid $bg_black30}
-.border_sky40 {border: 0.063rem solid rgba($color: $ui_sky, $alpha: .4) !important;}
-.top_white12 {border-top: 0.063rem solid $bg_grey10}
-.rht_white12 {border-right: 0.063rem solid $bg_grey10 !important}
-.btm_white20 {
-    color: var(--white-w_60);
-    border-bottom: 0.063rem solid var(--white-w_20);
-    .id, .name {
-        @include fs_14_medium;
-        color : var(--white-w_87);
-    }
-}
-.btm_white12{border-bottom: 0.063rem solid $bg_grey10}
-.btm_none {border-bottom: none !important;}
+// .border_none {border: none !important}
+// .border_greyE0 {border: 0.063rem solid $bg_greye0}
+// .border_greyEb {border: 0.063rem solid #e6e7eb}
+// .border_greyF5 {border: 0.063rem solid #F0F1F5;}
+// .border_white20 {border: 0.063rem solid $bg_grey20}
+// .border_white38 {border: 0.063rem solid $bg_grey38}
+// .border_black30 {border: 0.063rem solid $bg_black30}
+// .border_sky40 {border: 0.063rem solid rgba($color: $ui_sky, $alpha: .4) !important;}
+// .top_white12 {border-top: 0.063rem solid $bg_grey10}
+// .rht_white12 {border-right: 0.063rem solid $bg_grey10 !important}
+// .btm_white20 {
+//     color: var(--white-w_60);
+//     border-bottom: 0.063rem solid var(--white-w_20);
+//     .id, .name {
+//         @include fs_14_medium;
+//         color : var(--white-w_87);
+//     }
+// // }
+// .btm_white12{border-bottom: 0.063rem solid $bg_grey10}
+// .btm_none {border-bottom: none !important;}
 
-.route_border_sky40{border: 0.313rem solid var(--primary-pri_40)}
-.route_border_sky{border: 0.313rem solid var(--primary-pri_100)}
-.route_border_yellow{border: 0.313rem solid $fc_yellow}
+// .route_border_sky40{border: 0.313rem solid var(--primary-pri_40)}
+// .route_border_sky{border: 0.313rem solid var(--primary-pri_100)}
+// .route_border_yellow{border: 0.313rem solid $fc_yellow}
 
-.route_border_blue {border: 0.313rem solid rgba(0, 104, 230, 0.60)}
-.route_border_purple {border: 0.313rem solid #8972FF}
-.route_border_red {border: 0.313rem solid #D60000}
+// .route_border_blue {border: 0.313rem solid rgba(0, 104, 230, 0.60)}
+// .route_border_purple {border: 0.313rem solid #8972FF}
+// .route_border_red {border: 0.313rem solid #D60000}
 
 // web color, bg
 .bg_ui_gradation {
     background: transparent linear-gradient(104deg, #0068E6 0%, #27D4FF 100%) 0% 0% no-repeat
 }
 .bg_black {background-color:  $bg_black100;}
-.bg_default {background: $bg_default !important}
-.bg_ui_blue {background: $ui_blue !important}
-.bg_ui_blue_more {background: $ui_blue_more !important}
-.bg_cluster {background: $bg_cluster !important}
-.bg_white {background: $fc_white !important}
-.bg_ui_sky {background: $ui_sky !important}
-.bg_ui_sky_blue {background: var(--primary-pri_100) !important}
-.bg_ui_sky_10 {background-color: rgba($color: $ui_sky, $alpha: .1);}
-.bg_ui_sky_05 {background-color: rgba($color: $ui_sky, $alpha: .05);}
-.bg_secondary__purple {background: $fc_purple}
-.bg_secondary__green {background: $fc_green}
-.bg_secondary__yellow {background: $fc_yellow}
-.bg_state__normal {background: $ui_blue}
-.bg_state__success {background: $fc_succeses}
-.bg_state__error {background: $fc_error}
+// .bg_default {background: $bg_default !important}
+// .bg_ui_blue {background: $ui_blue !important}
+// .bg_ui_blue_more {background: $ui_blue_more !important}
+// .bg_cluster {background: $bg_cluster !important}
+// .bg_white {background: $fc_white !important}
+// .bg_ui_sky {background: $ui_sky !important}
+// .bg_ui_sky_blue {background: var(--primary-pri_100) !important}
+// .bg_ui_sky_10 {background-color: rgba($color: $ui_sky, $alpha: .1);}
+// .bg_ui_sky_05 {background-color: rgba($color: $ui_sky, $alpha: .05);}
+// .bg_secondary__purple {background: $fc_purple}
+// .bg_secondary__green {background: $fc_green}
+// .bg_secondary__yellow {background: $fc_yellow}
+// .bg_state__normal {background: $ui_blue}
+// .bg_state__success {background: $fc_succeses}
+// .bg_state__error {background: $fc_error}
 .bg_grey50 {background: $bg_grey50}
 .bg_grey40 {background: $bg_grey40}
 .bg_grey30 {background: $bg_grey30}
@@ -613,21 +608,11 @@ button {
         }
     }
 }
-.button_165 {
-    @include layout_acjc;
-    @include border_radius04;
-    display: flex;
-    width: 10.3125rem;
-    height: 3rem;
-    background-color: $ui_blue;
-}
+
 .btn_primary {@include button_primary}
 .btn_secondary {@include button_secondary}
 .btn_line {@include button_line}
 
-.btn_floating {@include button_floating}
-.btn_ffb {@include button_ffb}
-.btn_ghost {@include button_ghost}
 .btn_line1 {
     @include button_options;
     color: var(--white-w_60);
@@ -729,7 +714,7 @@ button {
     &.selected, &:hover, &:focus {
         background: rgba(39, 212, 255, 0.2);
         border: 0.063rem solid $bg_grey12;
-        color: $ui_sky;
+        // color: $ui_sky;
     }    
 }
 .btn_toggle_ffb {
@@ -3191,9 +3176,6 @@ button{
     min-width: 0.375rem;
     height: 0.375rem;
     background-color: #0068E6;
-    &.sky{
-        background-color: $ui_sky;
-    }
 }
 .drop_content {
     width: 100%;
@@ -3286,13 +3268,6 @@ header{
     position: relative;
     width: 100%;
     height: 100%;
-    padding: 0 1.25rem;
-    .gnb{
-        @include ab_trans_center;
-    }
-    &.navigation{
-        background: var(--bg_01_80);
-    }
 }
 .header_left{
     @include dflx_ac;
@@ -3696,42 +3671,6 @@ header{
         transform: translateY(-2rem);
     }
 }
-.square {
-    @include square;
-    &.blue{
-        background-color: #0E44E6;
-    }
-    &.blue_deep{
-        background-color: #0A2ACC;
-    }
-    &.sky{
-        background-color: $ui_sky;
-    }
-    &.sky_blue{
-        background-color: #16A3E9;
-    }
-    &.green_light{
-        background-color: #9DFFBE;
-    }
-    &.green{
-        background-color: $fc_green;
-    }
-    &.purple{
-        background-color: $fc_purple;
-    }
-    &.purple_light{
-        background-color: #B5A6FF;
-    }
-    &.violet{
-        background-color: #6548F5;
-    }
-    &.etc{
-        background-color: $bg_grey30;
-    }
-    &.white{
-        background-color: #fff;
-    }
-}
 .label{
     color: var(--alpha-bk-to-whbk-87);
     text-align: center;
@@ -3814,13 +3753,6 @@ header{
     width: 100%;
     height: 100%;
 }
-.frame_border {
-    @include backFilter;
-    position: relative;
-    border: 0.063rem solid rgba($color: $ui_sky, $alpha: .4);
-    box-shadow:inset 0 0.25rem 0.75rem rgba($color: $ui_sky, $alpha: .4);
-    background: rgba(10, 11, 20, 0.4);
-}
 .spin_animation {
     animation: spinAni 1.2s infinite linear;
 }
@@ -3951,16 +3883,6 @@ header{
     border-width: 0 0.063rem 0.063rem 0.063rem;
     border-radius: 0 0 0.125rem 0.125rem;
 }
-.data_contents {
-    @include backFilter;
-    padding: 1.25rem;
-    background: var(--bg_02_60);
-    border-width: 0 0.063rem 0.063rem 0.063rem;
-    border-radius: 0 0 0.125rem 0.125rem;
-    border-bottom: 0.063rem solid var(--line-wh_30-to-60);
-    border-right: 0.063rem solid var(--line-wh_30-to-60);
-    border-left: 0.063rem solid var(--line-wh_30-to-60);
-}
 .status {
     @include border_radius02;
     width: 1.625rem;
@@ -3990,362 +3912,6 @@ header{
     border-style: solid;
     border-color: var(--line-pri_40-to-wh_40);
 }
-
-// accordion
-.accordion_block {
-
-    // 기본
-    &.default {
-        .accordion_title {
-            background: var(--more-bright-wh_12-to-6);
-        }
-        .accordion_title:hover:not(.disabled):not(.accordion_level2), .hover.accordion_title,
-        .accordion_title:focus:not(.disabled):not(.accordion_level2) {
-            background: var(--more-visible-wh_20-to-12);
-        }
-        .accord_title_in{
-            background: var(--bg_02_60);
-        }
-    }
-   // 기본2
-   &.default2 {
-        .accordion_title.default {
-            background: var(--more-bright-wh_12-to-6);
-        }
-        .accordion_title.default:hover:not(.disabled):not(.accordion_level2), .hover.accordion_title.default,
-        .accordion_title.default:focus:not(.disabled):not(.accordion_level2) {
-            background: var(--more-visible-wh_20-to-12);
-        }
-        .accordion_title {
-            background: $bg_grey12;
-        }
-        .accord_title_in{
-            background: var(--bg_02_60);
-        }
-    }
-    // 포인트
-    &.point {
-        @include backFilter;
-        .accordion_title,
-        .accordion_title:hover:not(.point .disabled){
-            background: var(--primary-pri_20);
-        }
-        .accordion_title:hover:not(.accordion_level2):not(.disabled):not(.point .disabled), .hover.accordion_title,
-        .accordion_title:focus {
-            background: var(--primary-pri_30);
-        }
-        .accordion_contents {
-            background: rgba(255, 255, 255, 0.06);
-        }
-        &.disabled {
-            cursor: default;
-            .accordion_title{
-              //  background: var(--primary-pri_20);
-                color: var(--white-w_20);
-            }
-        }
-    }
-    &.level{
-        .accordion_title {
-            background: transparent;
-        }
-        .accordion_title:hover:not(.disabled), .hover.accordion_title,
-        .accordion_title:focus:not(.disabled) {
-            background: transparent;
-        }
-        .accord_title_in{
-            background: rgba(4, 9, 26, 0.6);
-        }
-    }
-    // 비활성
-    &.disabled {
-        cursor: default;
-        .accordion_title{
-            background: var(--more-bright-wh_12-to-6);
-            color: var(--white-w_20);
-            .toggle{opacity: 0.4;}
-            .img_with{opacity: 0.2;}
-        }
-        .accordion_toggle{
-            cursor: default;
-            opacity: 0.2;
-        }
-    }
-    &.disabled_level2 {
-        cursor: default;
-        .accordion_title{
-            background:transparent;
-            color: var(--white-w_20);
-            .toggle{opacity: 0.4;}
-            .img_with{opacity: 0.2;}
-        }
-        .accordion_toggle{
-            cursor: default;
-            opacity: 0.2;
-        }
-    }
-
-    // 포인트 & 비활성
-    &.point.disabled {
-        cursor: unset;
-        .accordion_title{
-            background: var(--primary-pri_20);
-            color: var(--white-w_20);
-          //  cursor: not-allowed;
-            cursor: default;
-        }
-    }
-
-    // 체크박스
-    &.select {
-        .accordion_title:focus,
-        .accordion_title:hover,
-        .hover.accordion_title {
-            background: var(--primary-pri_30);
-            background: var(--primary-pri_20);
-            //color: var(--primary-pri_100);
-        }
-        .accordion_title:hover,
-        .hover.accordion_title {
-            background: var(--primary-pri_30);
-            //color: var(--primary-pri_100);
-        }
-        .accordion_title {
-            background: var(--more-bright-wh_12-to-6);
-            &.on {
-                //background: var(--primary-pri_20);
-                background: var(--primary-pri_30);
-            }
-            &.on, &.hover, &:hover, &:focus {
-                img {
-                    filter: brightness(0) saturate(100%) invert(68%) sepia(15%) saturate(4375%) hue-rotate(161deg) brightness(105%) contrast(103%);
-                }
-            }
-        }
-        .accordion_contents {
-            background: rgba(255, 255, 255, 0.06);
-        }
-        &.disabled {
-            cursor: unset;
-            .accordion_title:hover, .hover.accordion_title,
-            .accordion_title:focus {
-                background: var(--more-bright-wh_12-to-6);
-                color: $bg_grey38;
-                cursor: not-allowed;
-            }
-            .checkbox_type {
-                label:after {
-                    border: 0;
-                    background: $bg_grey20;
-                }
-            }
-        }
-        &.level2 {
-            .accordion_title:hover:not(.disabled), .hover.accordion_title,
-            .accordion_title:focus:not(.disabled) {
-                background:transparent;
-                cursor: pointer;
-            }
-            .accordion_title {
-                background: transparent;
-            }
-            .accord_title_in{
-                background: rgba(4, 9, 26, 0.6);
-            }
-            .accordion_contents {
-                background: transparent;
-            }
-        }
-    }
-    // 아코디언 체크박스
-    &.accord_select {
-        .accordion_title:focus,
-        .accordion_title:active,
-        .accordion_title:hover,
-        .hover.accordion_title {
-            background: var(--primary-pri_20);
-            color: var(--primary-pri_100);
-        }
-        .accordion_title:hover,
-        .hover.accordion_title {
-            background: var(--primary-pri_30);
-            color: var(--primary-pri_100);
-        }
-        .accordion_title {
-            background: var(--more-bright-wh_12-to-6);
-            &.on, &:active, &:focus {
-                background: var(--primary-pri_30);
-            }
-            &.selected {
-                background: var(--primary-pri_20);
-            }
-            &.on, &.hover, &:hover, &:focus, &.selected, &:active {
-                img {
-                    filter: brightness(0) saturate(100%) invert(68%) sepia(15%) saturate(4375%) hue-rotate(161deg) brightness(105%) contrast(103%);
-                }
-            }
-        }
-        .accordion_contents {
-            background: var(--more-bright-wh_12-to-6);
-            &.user {
-                background: var(--more-bright-wh_6-to-60);
-            }
-        }
-        &.disabled {
-            cursor: unset;
-            .accordion_title:hover, .hover.accordion_title,
-            .accordion_title:focus {
-                background: var(--more-bright-wh_12-to-6);
-                color: $bg_grey38;
-                cursor: not-allowed;
-            }
-            .checkbox_type {
-                label:after {
-                    border: 0;
-                    background: $bg_grey20;
-                }
-            }
-        }
-        .checkbox_type{
-            input[type=checkbox]:checked + label + .accordion_title{
-                background: var(--primary-pri_20);
-                color: var(--primary-pri_100);
-                .accordion_title {
-                    background: var(--primary-pri_20);
-                }
-            }
-        }
-    }
-    &.accord{
-        .check_text{
-            .text{
-                margin: 0;
-            }
-        }
-    }
-    // Level2 default
-    &.level {
-        padding: 0 1.063rem 0 3.5rem;
-        .accordion_title:hover:not(.disabled), .hover.accordion_title,
-        .accordion_title:focus:not(.disabled) {
-            background:transparent;
-            cursor: pointer;
-        }
-        .accordion_title {
-            background: transparent;
-        }
-        .accord_title_in{
-            background: rgba(4, 9, 26, 0.6);
-        }
-    }
-    // Level2 
-    &.levelwith {
-        .accordion_title:hover:not(.disabled), .hover.accordion_title,
-        .accordion_title:focus:not(.disabled) {
-            background:transparent;
-            cursor: pointer;
-        }
-        .accordion_title {
-            background: transparent;
-        }
-        .accord_title_in{
-            background: rgba(4, 9, 26, 0.6);
-        }
-    }
-    &.accordion_level2 {
-        .accordion_title,
-        .accordion_contents {
-            padding: 0 1.125rem 0 3.5rem;
-        }
-        &:hover{
-            .accordion_title,
-            .accordion_contents {
-                padding: 0 1.125rem 0 3.5rem;
-            }
-            background: transparent;
-        }
-    }
-}
-.accordion_title{
-    @include dflx_ac;
-    @include fs_14_medium;
-    position: relative;
-    height: 2.25rem;
-    padding: 0 1.125rem 0  1.25rem;
-    color: var(--white-w_87-sec);
-    &.disabled {
-        background: var(--more-bright-wh_12-to-6);
-        cursor: not-allowed;
-        color: var(--white-w_20); 
-    }
-}
-.accordion_contents {
-    @include fs_13_regular;
-    display: none;
-    min-height: 2.25rem;
-    padding: 0 1.125rem 0 1.25rem;
-    line-height: 1rem;
-    color: var(--white-w_87);
-    &.show {
-        display: block;
-    }
-    &.inner{
-        padding: 0 1.125rem 0 3.5rem;
-    }
-    &.line{
-        border-bottom: 0.063rem solid var(--line-wh_30-to-60);
-    }
-}
-.accordion_paragraph {
-    padding: 1.25rem 0;
-    line-height: 1.125rem;
-}
-.tree_contents {
-    display: none;
-    &.show {
-        display: block;
-    }
-}
-.accordion_toggle {
-    cursor: pointer;
-    &.disabled{
-        cursor: default;
-    }
-}
-.accordion_up {
-    display: none;
-}
-.accordion_title.on,
-.accordion_toggle.on,
-.tree_button.on {
-    .accordion_up {
-        display: block;
-    }
-    .accordion_down {
-        display: none;
-    }
-}
-.accordion_title.on + .accordion_contents {
-    display: block;
-}
-.accordion_title.disabled {
-    .accordion_up, .accordion_down {opacity: 0.4}
-}
-.tree_button {
-    @include dflx_ac;
-    column-gap: 0.5rem;
-    &.check{
-        label{
-            @include fs_13_regular;
-        }
-    }
-    &.no_check{
-        label{
-            @include fs_13_regular;
-            color: var(--white-w_100-sec);
-        }
-    }
-}
 // card
 .card_block {
     &.default, &.label  {
@@ -4533,21 +4099,6 @@ header{
         color: $bg_grey38;
     }
 }
-// map control bar
-.map_control_line {
-    position: relative;
-    overflow: hidden;
-    &:after {
-        background-color: var(--primary-pri_20);
-    }
-}
-.map_control_line_mini {
-    position: relative;
-    overflow: hidden;
-    &:after {
-        background-color: var(--primary-pri_20)
-    }
-}
 .disabled.map_control_line {
     &:after {
         background-color: var(--control-disabled);
@@ -4603,287 +4154,33 @@ header{
         background: var(--white-w_40);
     }
 }
-
-// map control bar
-.disabled.map_control_line {
-    &:after {            
-        background-color: var(--white-w_40);
-        opacity: 0.1;
-    }
-    .map_control_rate:after,
-    .map_control_rate_mini:after,
-    .rate_block {
-        background-color: var(--white-w_100-sec);
-        opacity: 0.1;
+// label
+.tooltip_parents {
+    position: relative;
+    &:hover, &:focus {
+        .tooltip_label:not(.on) {
+            display: block;
+            top: -1.563rem; 
+        }
     }
 }
-.map_control_line:after,
-.map_control_rate:after{
-    @include selector_el;
-    @include border_radius02;
-    z-index: 0;
-    top: 0.313rem;
-    width: 100%;
-    height: 0.25rem;
-}
-.map_control_line_mini:after, 
-.map_control_rate_mini:after {
-    @include selector_el;
-    @include border_radius02;
-    z-index: 0;
-    top: 0.188rem;
+// swiper
+.absolute {position: absolute;}
+.swiper_top_text {
     width: 100%;
-    height: 0.25rem;
-}
-.map_control_rate:after
-.map_control_rate_mini:after {
-    z-index: 1;
+    transform: translate(0, -3.75rem);
 }
-.map_control_rate,
-.map_control_rate_mini {
-    position: relative;
-    width: 0;
-    min-width: 0.375rem;
-    &:after {
-        background-color: var(--primary-pri_100);
-    }
-}
-.step_cursor {
-    cursor: pointer;
-}
-.rate_block {
-    @include border_radius06;
-    position: absolute;
-    z-index: 2;
-    top: 0;
-    right: 0;
-    width: 0.375rem;
-    height: 100%;
-    cursor: pointer;
-    background: var(--primary-pri_100);
-    &.small {
-        width: 0.25rem;
-    }
-}
-.map_timeline {
-    &.small {
-        div {height: 0.25rem;}
-    }
-    > div {
-        width: 0.063rem;
-        height: 0.5rem;
-        background: var(--white-w_40);
-    }
-    &.xsmall {
-        div {height: 0.2rem;}
-    }
-}
-.map_time_line{
-    border-top: 0.063rem solid var(--line-wh_12-to-100);
-    border-bottom: 0.063rem solid var(--line-wh_12-to-100);
-    background:var(--bg_01_80);
-}
-.map_control_outline {
-    @include dflx;
-    @include backFilter;
-    @include border_radius02;
-    align-items: stretch;
-    border: 0.063rem solid var(--line-wh_12-to-100);
-    background: var(--bg_01_80);
-    .border_right {        
-        border-right: 0.063rem solid rgba($color: $ui_sky, $alpha: .12);
-    }
-    .border_left {        
-        border-left: 0.063rem solid rgba($color: $ui_sky, $alpha: .12);
-    }
-    .rate_block {width: 0.25rem}
-    .map_control_line:after, .map_control_rate:after {
-        top: 0.25rem
-    }
-    .map_timeline {
-        &.top {transform:translate(0, 0.188rem)}
-        &.bottom {transform:translate(0, -0.188rem)}
-    }
-}
-
-// member
-.member_box {
-    position: relative;
-}
-.member_popover {
-    @include backFilter;
-    @include border_radius02;
-    display: none;
-    position: absolute;
-    right: 0;
-    top: 1.86rem;
-    z-index: 11 !important;
-    background: var(--blur_02_60);
-    border: 0.063rem solid var(--white-w_12);
-    box-shadow: 0.75rem 0.75rem 1.5rem 0 rgba(4, 9, 26, 0.20);
-    &.on {
-        display: block;
-    }
-}
-// label
-.tooltip_parents {
-    position: relative;
-    &:hover, &:focus {
-        .tooltip_label:not(.on) {
-            display: block;
-            top: -1.563rem; 
-        }
-    }
-}
-.tooltip_label {
-    @include border_radius02;
-    @include backFilter;
-    @include fs_12_medium;
-    display: none;
-    position: absolute;
-    min-height: 1.5rem;
-    padding: 0 0.5rem;
-    background: var(--etc-bg);
-    border: 0.063rem solid var(--white-w_40);
-    letter-spacing: 0.01em;
-    line-height: 1.375rem;
-    white-space: nowrap;
-    color: var(--white-w_100-sec);
-    box-shadow: 0 0.25rem 0.75rem 0 rgba(4, 9, 26, 0.20);
-    &.on {display: block;}
-    &.default{
-        border: 0.063rem solid var(--white-w_40-sec);
-        opacity:  1;
-        background: rgba(55, 61, 82, 0.60);
-        box-shadow: 0 0.25rem 0.75rem 0 rgba(4, 9, 26, 0.20);
-        color: var(--white-w_100);
-    }
-}
-.bubble {
-    color: #FFF;
-    &:before,
-    &:after {
-        @include selector_el;
-        display: block;
-        width: 0;
-        left: 50%;
-        border-style: solid;
-    }
-    &:before {
-        z-index: 0;
-    }
-    &:after {
-        z-index: 1;
-    }
-    // color
-    &.bb_black {
-        background: $bg_guide;
-        &:before {
-            border-color: #636771 transparent;
-        }
-        &:after {            
-            border-color: $bg_guide transparent;
-        }
-    }
-    &.bb_blue {
-        background: #0068E6;
-        &:before {
-            border-color: #61a0ef transparent;
-        }
-        &:after {            
-            border-color: #0068E6 transparent;
-        }
-    }
-    &.bb_grey {
-        background :#4F525E;
-        &:before {
-            border-color: $bg_grey40 transparent;
-          
-        }
-        &:after {            
-            border-color: #4F525E transparent;
-        }
-    }
-
-    // position
-    &.bb_bottom {
-        &:before {
-            bottom: -0.469rem;
-            margin-left: -0.313rem;
-            border-width: 0.438rem 0.313rem 0;
-        }
-        &:after {            
-            bottom: -0.375rem;
-            border-width: 0.375rem 0.25rem 0;
-            margin-left: -0.25rem;
-        }
-    }
-    &.bb_top {
-        &:before {
-            top: -0.469rem;
-            margin-left: -0.313rem;
-            border-width: 0 0.313rem 0.438rem;
-        }
-        &:after {            
-            top: -0.344rem;
-            border-width: 0 0.25rem 0.375rem;
-            margin-left: -0.25rem;
-        }
-    }    
-    &.bb_right {
-        &:before {
-            top: 50%;
-            left: auto;
-            right: -0.531rem;
-            margin-top: -0.313rem;
-            border-width: 0 0.25rem 0.438rem;
-            transform: rotate(90deg);
-        }
-        &:after {           
-            top: 50%; 
-            left: auto;
-            right: -0.375rem;
-            margin-top: -0.313rem;
-            border-width: 0 0.25rem 0.438rem;
-            transform: rotate(90deg);
-        }
-    }
-    &.bb_left {
-        &:before {
-            top: 50%;
-            right: auto;
-            left: -0.531rem;
-            margin-top: -0.313rem;
-            border-width: 0 0.25rem 0.438rem;
-            transform: rotate(-90deg);
-        }
-        &:after {           
-            top: 50%; 
-            right: auto;
-            left: -0.375rem;
-            margin-top: -0.313rem;
-            border-width: 0 0.25rem 0.438rem;
-            transform: rotate(-90deg);
-        }
-    }
-}
-// swiper
-.absolute {position: absolute;}
-.swiper_top_text {
-    width: 100%;
-    transform: translate(0, -3.75rem);
-}
-.swiper_dot {
-    @include border_radius50;
-    width: 0.5rem;
-    height: 0.5rem;
-    background: var(--primary-pri_40);
-    &.selected {
-        background: var(--primary-pri_100);
-    }
-    &.small {
-        width: 0.375rem;
-        height: 0.375rem;
+.swiper_dot {
+    @include border_radius50;
+    width: 0.5rem;
+    height: 0.5rem;
+    background: var(--primary-pri_40);
+    &.selected {
+        background: var(--primary-pri_100);
+    }
+    &.small {
+        width: 0.375rem;
+        height: 0.375rem;
     }
 }
 // pagination
@@ -4895,39 +4192,6 @@ header{
     font-weight: 500;
     &.selected {background: var(--white-w_16)}
 }
-// playbar 
-.playbar_type1_box {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, 2.625rem);
-}
-.playbar_type1 {
-    @include fs_12_regular;
-    display: grid;
-    grid-auto-rows: auto;
-    position: relative;
-    .type1_text, .default, .played, .loaded {
-        grid-column: 1 / 1;
-        grid-row: 1;
-    }
-    .type1_text {        
-        @include dflx_ac_jcent;
-        z-index: 3;
-    }
-    .default {
-        z-index: 0;
-        background: transparent;
-    }
-    .played {
-        z-index: 2;
-        background: var(--primary-pri_80);
-    }
-    .loaded {
-        z-index: 1;
-        background: var(--primary-pri_40);
-    }
-    .played_text{color: var(--white-w_100)}
-    .loaded_text{color: var(--white-w_100-sec)}
-}
 .playbar_type2_box {
     @include border_radius02;
     @include backFilter;
@@ -4987,225 +4251,6 @@ header{
     @include fs_12_regular;
     color:var(--white-w_60);
 }
-// map circle controller
-.map_controller {
-    position: relative;
-    width: 8.125rem;
-    height: 8.125rem;
-    padding: 1.25rem;
-}
-.map_circle,
-.circle_piece {
-    width: 5.625rem;
-    height: 5.625rem;
-    padding: 0.25rem;
-    -moz-border-radius: 50%;
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
-    border: 0.063rem solid var(--primary-pri_40);
-    background: rgba(0, 0, 0, 0.25) 0% 0% no-repeat padding-box;
-    background: var(--etc-bg) 0% 0% no-repeat padding-box;
-}
-.map_rotate .map_circle {
-    position: absolute; z-index: 2;
-    background: transparent;
-}
-.circle_piece {
-    position: absolute;
-    width: 5rem;
-    height: 5rem;
-    overflow: hidden;
-    border: 0.063rem solid var(--primary-pri_100);
-    background: rgba(0, 0, 0, 0.25) 0% 0% no-repeat padding-box;
-    background: var(--etc-bg) 0% 0% no-repeat padding-box;
-    .btn_direction {
-        position: absolute;
-        bottom: 50%;
-        right: 50%;
-        width: 6.25em;
-        height: 6.25em;
-        transform-origin: 100% 100%;
-        overflow: hidden;
-        margin-top: -0.65em;
-        margin-left: -5em;
-        border: 0.063rem solid var(--primary-pri_100);
-        //opacity: var(--line-line-weight, 1);
-        box-shadow: 0 0 0.625rem 0 rgba(0, 104, 230, 0.40) inset;
-    }
-    .direction_01 {
-        transform: rotate(-23deg) skew(45deg);
-    }
-    .direction_02 {
-        transform: rotate(22deg) skew(45deg);
-    }
-    .direction_03 {
-        transform: rotate(67deg) skew(45deg);
-    }
-    .direction_04 {
-        transform: rotate(112deg) skew(45deg);
-    }
-    .direction_05 {
-        transform: rotate(157deg) skew(45deg);
-    }
-    .direction_06 {
-        transform: rotate(202deg) skew(45deg);
-    }
-    .direction_07 {
-        transform: rotate(247deg) skew(45deg);
-    }
-    .direction_08 {
-        transform: rotate(292deg) skew(45deg);
-    }
-    .btn_direction button {
-        display: block;
-        position: absolute;
-        bottom: -3.625em;
-        right: -3.625em;
-        height: 7.25em;
-        width: 7.25em;
-        border-radius: 50%;
-        padding-top: 0em;
-        transform: skew(-45deg) rotate(-70deg) scale(1);
-        background-color: transparent;
-        &:active, &:hover, &:focus {
-            background: rgba(39, 212, 255, 0.4) 0% 0% no-repeat padding-box;
-            background: var(--line-pri_40-to-wh_100);
-        }
-    }
-}
-.circle_pointer {
-    position: absolute;
-    z-index: 0;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    button {
-        position: absolute;
-        width: 1rem;
-        height: 1rem;
-        margin: auto;
-        border:none;
-        background-color: transparent;
-        background-image: url(../images/mapcontrol_navi_arrow_.svg);
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: 1rem auto;
-    }
-    .northside_ {
-        &::before {
-            @include selector_el;
-            z-index: 999 !important;
-            bottom: 6.4rem;
-            left: 0;
-            right: 0;
-            width: 0.75rem;
-            height: 0.75rem;
-            margin:auto;
-            background-image: url(../images/mapcontrol_navi_north.svg);
-            background-size: 100% auto;
-        }
-    }
-    .northside {
-        top:0;
-        left: 0;
-        right: 0;
-    }
-    .westside {
-        top:0;
-        left: 0;
-        bottom: 0;
-        transform: rotate(-90deg);
-    }
-    .eastside {
-        top:0;
-        right: 0;
-        bottom: 0;
-        transform: rotate(90deg);
-    }
-    .southside {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        transform: rotate(180deg);
-    }
-}
-.btn_map_anchor {
-    button {
-        position: relative;
-        width: 2rem;
-        height: 2rem;
-        border: 0.063rem solid #27D4FF66;
-        -moz-border-radius: 50%;
-        -webkit-border-radius: 50%;
-        border-radius: 50%;
-        background: transparent;
-        &:hover, &:focus {
-            background-color: #27D4FF33;
-        }
-    }
-}
-.map_scroll_unit {
-    position: absolute;
-}
-.map_scroll_text {    
-    position: absolute;
-    bottom: -1.875rem;
-    white-space: nowrap;
-}
-.mapcontrol_btn{
-    @include dflx_ac_jcent;
-}
-// control pad
-.control_pad {
-    button {
-        display: flex;
-        flex-direction: column;
-        height: 2.25rem;
-    }    
-    .btn_secondary.selected {
-        border:none;
-        background: $bg_grey16;
-    }
-    .disabled img {
-        opacity: 0.2;
-    }
-}
-.control_plus_minus {
-    display: flex;
-    flex-direction: column;
-    button {
-        width: 3.5rem;
-        padding: 0.125rem;
-        &.disabled {
-            color: var(--white-w_20);
-        }
-    }
-}
-.control_direction {
-    @include dflx_ac;
-    button {        
-        width: 2.25rem;
-        padding: 0 0;
-    }
-}
-.scroll_bar{
-    background-color: var(--white-w_40);
-}
-.tooltip_label, .infowindow_box, .legend_label  {
-    &.top {
-        top: auto !important;
-        left: 50%;
-        bottom: calc(100% + 0.125rem);
-        transform: translate(-50%, 0);
-    }
-    &.bottom {
-        top: calc(100% + 0.125rem) !important;
-        bottom: auto;
-        left: 50%;
-        transform: translate(-50%, 0);
-    }
-}
 .legend_label {
     @include dflx_ac_jcent;
     @include border_radius02;
@@ -5233,60 +4278,6 @@ header{
         height: 5rem;
     }
 }
-// snackbar
-.snackbar_box {
-    @include backFilter;
-    @include popup_shadow;
-    padding: 1rem 1.25rem;
-    background: var( --background-blur_0260);
-    border: 0.063rem solid var(--white-w_40-sec);
-}
-.snack_btn {
-    @include fs_14_medium;
-    background: transparent;
-    border: transparent;
-    color: var(--primary-pri_100);
-}
-
-// notification
-.notification_box {
-    width: 48.75rem;
-    .notification_bg {
-        @include dflx_ac_jcent;
-        backdrop-filter: blur(0.156rem);
-        min-height: 2.625rem;
-        overflow: hidden;
-        border-width: 0.063rem 0 063rem 0;
-        border-style: solid;
-        border-image: linear-gradient(to right, rgba(39, 212, 255, 0) 0%, var(--hero-border) 50%, rgba(39, 212, 255, 0) 100%);
-        border-top: 0.188rem solid var(--hero-notification-border-top);
-        border-bottom: 0.188rem solid var(--hero-notification-border-bottom); 
-        border-image-slice: 1;
-        opacity: 1;
-        //background: linear-gradient(90deg, var(--hero-notification_01) 0%, var(--hero-notification_02) 19.27%, var(--hero-notification_03) 50.52%, var(--hero-notification_02) 80.73%,var(--hero-notification_01) 100%);
-        background: linear-gradient(90deg, var(--hero-notification_01) 0%, var(--hero-notification_02) 6.81%, var(--hero-notification_03) 50%, var(--hero-notification_02) 94.31%,var(--hero-notification_01) 100%);
-    }
-    .notification_title {
-        font-size: 1.375rem;
-        font-weight: 700;
-        text-align: center;
-        color: var(--primary-pri_100);
-    }
-    .btn_notification {
-        display: block;
-        margin: 0.75rem auto 0;
-    }
-    &.hide {
-        .notification_bg {
-            min-height: 0;
-            height: 0;
-            border-width: 0.063rem 0 0 0;
-        }
-        .btn_notification {
-            transform: rotate(180deg);
-        }
-    }
-}
 // navigation
 .gnb_box {
     @include dflx_ac;
@@ -5392,111 +4383,6 @@ header{
         justify-content: center;
     }
 }
-.gnb_information {
-    @include dflx_ac;
-    margin-left: auto;
-    * {line-height: 1}
-}
-.lnb_box {
-    position: absolute;
-    top: 2.5625rem;
-    left: 0;
-    right: 0;
-}
-.lnb_anchor  {
-    align-items: stretch;    
-    width: 100%;
-    &.on {
-        .lnb_sub_anchor {
-            height: auto;
-            padding: 1.25rem 0;
-        }
-    }
-    &.on:after {
-        @include selector_el;
-        left: 0;
-        top: 2.5rem;
-        width: 100%;
-        height: 0.063rem;
-        border-bottom: 0.063rem solid var(--line-wh_20-to-100);
-    }
-    &.center.on:after {
-        border-bottom: 0.063rem solid transparent;
-    }
-}
-.lnb_anchor__title {
-    white-space: nowrap;
-    color: var(--more-visible-wh_60-to-100);
-}
-.lnb_sub_anchor {
-    @include dflx;
-    flex-direction: column;
-    height: 0;
-    overflow: hidden;
-    padding: 0 0;
-}
-.lnb_administrator{
-    position: relative;
-    &:after {
-        @include selector_el;        
-        left: -2.5rem;
-        top: 0;
-        height: 100%;
-        border-left: 0.063rem solid $bg_grey20;
-    }
-} 
-.lnb_popup_content {
-    position: absolute;
-    left: 0;
-    right: 0;
-    background: var(--bg_01_80);
-    border-top: 0.063rem solid var(--line-wh_20-to-100);
-}
-.lnb_popup_title_bg {
-    @include backFilter;
-    height: 2.5rem;
-    padding: 0 1.25rem;
-    background: var(--bg_01_80);
-    border-bottom: 0.063rem solid var(--line-wh_20-to-100);
-    span{
-        @include fs_20_bold;
-        color: var(--primary-pri_100);
-        &.black {
-            color: var(--white-w_100-sec);
-        }
-    }
-    &.page {
-        height: 3.5rem;
-    }
-}
-.btn_fnb_tab {
-    @include dflx_ac;
-    @include fs_14_medium;
-    overflow: hidden;
-    background-color: var(--bg_01_80);
-    button, a {
-        @include backFilter;
-        background-color: var(--bg_01_80);
-        border: 0.063rem solid var(--line-wh_12-to-40);
-        color: var(--white-w_87-sec);
-        &:first-child {
-            border-right: 0;
-            border-radius: 0.125rem 0 0 0.125rem;
-        }
-        &:last-child {
-            border-radius: 0 0.125rem 0.125rem 0;
-        }
-    }
-    .selected, button:hover:not(.selected), a:hover:not(.selected),
-    button:focus:not(.selected), a:focus:not(.selected) {
-        @include backFilter;
-        @include fs_14_bold;
-        background: var(--primary-pri_20);
-        border: 0.063rem solid var(--line-wh_12-to-40);
-        color: var(--primary-pri_100);
-        opacity: 1;
-    }
-}
 .fnb_search_bar {
     @include dflx_ac;
     @include border_radius02;
@@ -5574,23 +4460,6 @@ header{
     // border-color: var(--line-wh_30-to-60);
     overflow: hidden;
 }
-.accordion_block {
-    // 기본
-    &.side {
-        .accordion_title {
-            // background: var(--more-bright-wh_12-to-6);
-        }
-        .accordion_title:hover:not(.disabled), .hover.accordion_title,
-        .accordion_title:focus:not(.disabled) {
-            background: var(--primary-pri_20);
-            border-right: 0.125rem solid var(--primary-pri_100);
-            color: var(--primary-pri_100);
-        }
-        .accord_title_in {
-            background: var(--bg_02_60);
-        }
-    }
-}
 .menu_box {
     @include fs_14_bold;
     height: 2.125rem;
@@ -5931,18 +4800,6 @@ header{
     z-index: 0;
     background: var(--white-w_6);
 }
-.dragdrop_number {
-    @include dflx_ac_jcent;
-    @include border_radius02;
-    @include numberDefault($width: 1.5rem, $height: 1.5rem, $fs: 0.875rem);
-    position: absolute;
-    z-index: 2;
-    top: 0.75rem;
-    left: 0.75rem;
-    background: $bg_cluster;
-    font-weight: 500;
-    color: $fc_white
-}
 
 // table
 .table_box {
@@ -6427,8 +5284,8 @@ header{
     padding-left: 112px;
     padding-left: 7rem;
 }
-// menu
 
+// menu
 .menu_line{
 	@include dflx_ac;
 	width: 100%;
@@ -6474,4 +5331,12 @@ header{
 }
 .mn_icon_on{
 	display: none;
+}
+
+.mode_box {
+    display: flex;
+    padding: 4px 12px 4px 4px;
+    gap: 12px;
+    border-radius: 50px;
+    background: var(--wh-12);
 }
\ No newline at end of file
diff --git a/assets/css/layout.css b/assets/css/layout.css
index fa01087..4f080cc 100644
--- a/assets/css/layout.css
+++ b/assets/css/layout.css
@@ -7,16 +7,6 @@
   --background-bg_01:#0A0F24;
   --bg_01_40: rgba(10, 11, 20, 0.4);
   --bg_02_60: rgba(4, 9, 26, 0.60);
-  --primary-pri_100: #27D4FF;
-  --primary-pri_80: rgba(39, 212, 255, 0.8);
-  --primary-pri_60: rgba(39, 212, 255, 0.6);
-  --primary-pri_50: rgba(39, 212, 255, 0.5);
-  --primary-pri_40: rgba(39, 212, 255, 0.4);
-  --primary-pri_30: rgba(39, 212, 255, 0.3);
-  --primary-pri_20: rgba(39, 212, 255, 0.2);
-  --primary-pri_12: rgba(39, 212, 255, 0.12);
-  --primary-pri_12-to-bk: rgba(39, 212, 255, 0.12);
-  --primary-pri_06: rgba(39, 212, 255, 0.06);
   --primary-pri_6: rgba(39, 212, 255, 0.06);
   --white-w_100: #ffffff;
   --white-w_100-sec: #ffffff;
@@ -29,12 +19,7 @@
   --white-w_20: rgba(255, 255, 255, 0.2);
   --white-w_16: rgba(255, 255, 255, 0.16);
   --white-w_12: rgba(255, 255, 255, 0.12);
-  --tab-btn_default: #024294;
-  --btn-btn_default: #024294;
-  --btn-btn_hover: #0155BD;
-  --btn-btn_selected: #0068E6;
   --box1_border:rgba(39, 212, 255, 0.4);
-  --title-color: #27D4FF;
   --bg_01_80: rgba(11, 17, 41, 0.8);
   --line-wh_12-to-40: rgba(255, 255, 255, 0.12);
   --line-wh_20-to-100: rgba(255, 255, 255, 0.2);
@@ -43,7 +28,6 @@
   --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);
-  --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);
@@ -54,7 +38,6 @@
   --point-error-10: rgba(219, 0, 0, 0.08);
   --blur_02_60: rgba(55, 61, 82, 0.60);
   --bg-blur_02_60: rgba(55, 61, 82, 0.60);
-  --grade-chart-gco-01:#FFE043;
   --radio-default: rgba(255, 255, 255, 0.6);
   --control-disabled: bg_grey10;
   --background-legend: rgba(74, 78, 102, 0.8);
@@ -89,16 +72,7 @@
   --background-bg_01: #ffffff;
   --bg_01_40: #F3F5FD;
   --bg_02_60: rgba(245, 247, 255, 0.90);
-  --primary-pri_100: #0068E6;
-  --primary-pri_80: rgba(0, 104, 230, 0.8);
-  --primary-pri_60: rgba(0, 104, 230, 0.6);
-  --primary-pri_50: rgba(0, 104, 230, 0.5);
-  --primary-pri_40: rgba(0, 104, 230, 0.4);
-  --primary-pri_30: rgba(0, 104, 230, 0.3);
-  --primary-pri_20: rgba(0, 104, 230, 0.2);
-  --primary-pri_12: rgba(0, 104, 230, 0.12);
   --primary-pri_12-to-bk: #000;
-  --primary-pri_06: rgba(0, 104, 230, 0.06);
   --primary-pri_6: rgba(0, 104, 230, 0.06);
   --white-w_100: #ffffff;
   --white-w_100-sec: #000;
@@ -111,12 +85,7 @@
   --white-w_20: rgba(0, 0, 0, 0.2);
   --white-w_16: rgba(0, 0, 0, 0.16);
   --white-w_12: rgba(0, 0, 0, 0.12);
-  --tab-btn_default: #024294;
-  --btn-btn_default: #0155BD;
-  --btn-btn_hover: #0068E6;
-  --btn-btn_selected: #338FFF;
   --box1_border: #ffffff;
-  --title-color: #0068E6;
   --bg_01_80: rgba(245, 246, 250, 0.90);
   --icon-pri_20-to-100: #0067E6;
   --white-w_6: rgba(0, 0, 0, 0.06);
@@ -133,7 +102,6 @@
   --control-disabled: bg_grey10;
   --icon-icon-selected: #ffffff;
   --group-icon-selected: rgba(51, 143, 255, 0.40);
-  --map-ver2-hover: rgba(51, 143, 255, 0.4);
   --navigation-bg: #E1E2E5;
   --etc-FNB:rgba(245, 246, 250, 0.90);
   --black-bk_100: #ffffff;
@@ -160,14 +128,9 @@
   border-radius: 1.5em;
   background-color: rgba(237, 237, 237, 0.3);
 }
-.lightmode > .inner.template {
-  padding: unset;
-}
-
-html[data-theme=light] .lightmode > .inner {
+html[data-theme=light] .lightmode > .inner.ver1 {
   background-color: var(--PRI);
 }
-
 .outer {
   padding: 4px;
   border-radius: 50px;
@@ -204,7 +167,6 @@ html[data-theme=light] .lightmode > .inner {
   color: rgb(135, 199, 24);
   transition: all 0.35s ease-in-out;
 }
-
 .circle_dark {
   background: var(--alpha-wh-to-bkwh-100);
   display: flex;
@@ -273,7 +235,7 @@ html[data-theme=light] .lightmode > .inner {
   border-bottom: 0.063rem solid var(--white-w_30);
 }
 .guide_top h1 {
-  font-size: 2.5rem;
+  font-size: 40px;
   font-weight: 700;
   color: #fff;
 }
@@ -297,7 +259,7 @@ html[data-theme=light] .guide_top h1 {
   padding: 0 0 1.875rem;
 }
 .comp_top h2 {
-  font-size: 1.5rem;
+  font-size: 24px;
   font-weight: 700;
   color: var(--white-w_87);
 }
@@ -311,7 +273,7 @@ html[data-theme=light] .guide_top h1 {
 }
 
 .comp_dt {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
   width: 6.25rem;
   padding: 1.25rem 0 0 0;
@@ -334,7 +296,7 @@ html[data-theme=light] .guide_top h1 {
 }
 
 .comp_size {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.6);
   width: 2.5rem;
@@ -441,7 +403,7 @@ footer {
 }
 
 .user_table {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   color: var(--white-w_87-sec);
   width: 100%;
@@ -634,7 +596,7 @@ footer {
   align-items: center;
 }
 .ch_label .word {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
   color: var(--white-w_87-sec);
   margin: 0.25rem 0 0.25rem 0.25rem;
@@ -664,29 +626,16 @@ footer {
   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-size: 14px;
   font-weight: 400;
   line-height: 1.7;
 }
@@ -743,7 +692,7 @@ footer {
 }
 
 .user_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   color: var(--primary-to-grayscale-to-bk);
   height: 1.5rem;
@@ -798,9 +747,6 @@ html[data-theme=light] .sp_logo_uniplus {
 html[data-theme=light] .gnb ul li a {
   color: var(--more-visible-wh_60-to-100);
 }
-html[data-theme=light] .gnb ul li a.on, html[data-theme=light] .gnb ul li a:hover, html[data-theme=light] .gnb ul li a:focus {
-  color: #0068E6;
-}
 html[data-theme=light] .guide_top h1 {
   color: #000;
 }
@@ -828,69 +774,6 @@ html[data-theme=light] .btn_srch28:active:not(.selected) span img:not(.on) {
 html[data-theme=light] .btn_srch28.on span img {
   filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
 }
-html[data-theme=light] .btn_floating .put_drop img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .btn_floating .put_see img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .btn_floating .put_see .img_seeoff {
-  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
-}
-html[data-theme=light] .btn_floating .put_see .img_see {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .btn_floating:hover:not(.disabled) .put_drop img, html[data-theme=light] .btn_floating.hover .put_drop img, html[data-theme=light] .btn_floating.selected .put_drop img {
-  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
-}
-html[data-theme=light] .btn_floating:hover:not(.disabled) .put_see img, html[data-theme=light] .btn_floating.hover .put_see img, html[data-theme=light] .btn_floating.selected .put_see img {
-  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
-}
-html[data-theme=light] .btn_drop .put_drop .img_drop {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .btn_drop .put_see img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .btn_drop.hover p img, html[data-theme=light] .btn_drop.selected p img {
-  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
-}
-html[data-theme=light] .btn_drop.hover img, html[data-theme=light] .btn_drop.selected img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .btn_drop .put_see.off .img_see {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .btn_drop .put_see.off .img_see_off {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .btn_arrow_circle.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_arrow_circle.line.selected img, html[data-theme=light] .btn_arrow_circle.line:hover:not(.disabled) img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .btn_arrow_l img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .btn_arrow_l.disabled img {
-  opacity: 0.3;
-  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
-}
-html[data-theme=light] .btn_arrow img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
-}
-html[data-theme=light] .btn_arrow.hover img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .btn_arrow.disabled img {
-  opacity: 0.3;
-  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
-}
-html[data-theme=light] .btn_arrow_s img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%);
-  opacity: 0.6;
-}
 html[data-theme=light] .arrow_box img {
   filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
 }
@@ -904,20 +787,6 @@ html[data-theme=light] .btn_primary.disabled img {
 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%);
 }
-html[data-theme=light] .circle32.icon img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .icon_ffb img,
-html[data-theme=light] .btn_icon img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
-html[data-theme=light] .icon_ffb.selected img, html[data-theme=light] .icon_ffb:hover img, html[data-theme=light] .icon_ffb:active img, html[data-theme=light] .icon_ffb:focus img,
-html[data-theme=light] .btn_icon.selected img,
-html[data-theme=light] .btn_icon:hover img,
-html[data-theme=light] .btn_icon:active img,
-html[data-theme=light] .btn_icon:focus img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
 html[data-theme=light] .arr_up img, html[data-theme=light] .arr_right img {
   filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
 }
@@ -936,12 +805,6 @@ html[data-theme=light] .stepper_arrow img {
 html[data-theme=light] .play_circle img {
   content: url("../images/play_circle_light_20.svg");
 }
-html[data-theme=light] .play_btn img, html[data-theme=light] .playbar_current img, html[data-theme=light] .pagination_btn img, html[data-theme=light] .pg_prev img {
-  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
-}
-html[data-theme=light] .pause_btn img, html[data-theme=light] .again_btn img {
-  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
-}
 html[data-theme=light] .selectbox_arrow img, html[data-theme=light] .selectbox img, html[data-theme=light] .selectboxSample img {
   filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
 }
@@ -960,15 +823,6 @@ html[data-theme=light] .selector.sm.color {
 html[data-theme=light] .lnb_box img {
   filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
 }
-html[data-theme=light] .arrival_car img {
-  content: url("../images/marker_arrival_car_selected_100.svg");
-}
-html[data-theme=light] .arrival_marker img {
-  content: url("../images/marker_arrival_area_selected.svg");
-}
-html[data-theme=light] .map_frame img {
-  content: url("../images/map_frame_light.svg");
-}
 html[data-theme=light] .main_contents {
   width: 100%;
   height: 100%;
@@ -994,6 +848,12 @@ html[data-theme=light] .hamberger_btn {
 html[data-theme=light] .logo_hd_kisa {
   content: url("../images/logo_light.svg");
 }
+html[data-theme=light] .bell img {
+  content: url("../images/bell_bk_20.svg");
+}
+html[data-theme=light] .user img {
+  content: url("../images/user_bk_20.svg");
+}
 html[data-theme=light] .light_none {
   display: none;
 }
diff --git a/assets/css/layout.scss b/assets/css/layout.scss
index b6ab1a2..5cef6d1 100644
--- a/assets/css/layout.scss
+++ b/assets/css/layout.scss
@@ -10,16 +10,6 @@
     --background-bg_01:#0A0F24;
     --bg_01_40: #{$bg_default04};
     --bg_02_60: rgba(4, 9, 26, 0.60);
-    --primary-pri_100: #{$ui_sky};
-    --primary-pri_80: #{$ui_sky80};
-    --primary-pri_60: #{$ui_sky60};
-    --primary-pri_50: #{$ui_sky50};
-    --primary-pri_40: #{$ui_sky40};
-    --primary-pri_30: #{$ui_sky30};
-    --primary-pri_20: #{$ui_sky20};
-    --primary-pri_12: #{$ui_sky12};
-    --primary-pri_12-to-bk: #{$ui_sky12};
-    --primary-pri_06: #{$ui_sky06};
     --primary-pri_6: rgba(39, 212, 255, 0.06);
     --white-w_100: #{$fc_white};
     --white-w_100-sec: #{$fc_white};
@@ -32,12 +22,7 @@
     --white-w_20: #{$bg_grey20};
     --white-w_16: #{$bg_grey16};
     --white-w_12: #{$bg_grey12};
-    --tab-btn_default: #{$ui_blue};
-    --btn-btn_default: #{$ui_blue};
-    --btn-btn_hover: #{$ui_blue_hover};
-    --btn-btn_selected: #{$ui_blue_more};
     --box1_border:rgba(39, 212, 255, 0.4);
-    --title-color: #{$ui_sky};
     --bg_01_80: rgba(11, 17, 41, 0.8);
     --line-wh_12-to-40: #{$bg_grey12};
     --line-wh_20-to-100: #{$bg_grey20};
@@ -46,7 +31,6 @@
     --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);
-    --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);
@@ -57,7 +41,6 @@
     --point-error-10: rgba(219, 0, 0, 0.08);
     --blur_02_60: rgba(55, 61, 82, 0.60);
     --bg-blur_02_60:  rgba(55, 61, 82, 0.60);
-    --grade-chart-gco-01:#{$fc_yellow};
     --radio-default: #{$bg_grey60};
     --control-disabled: #{bg_grey10};
     --background-legend: rgba(74, 78, 102, 0.8);
@@ -93,16 +76,7 @@
     --background-bg_01: #{$fc_white};
     --bg_01_40: #F3F5FD;
     --bg_02_60: rgba(245, 247, 255, 0.90);
-    --primary-pri_100: #{$ui_blue_more};
-    --primary-pri_80: #{$ui_blue_more80};
-    --primary-pri_60: #{$ui_blue_more60};
-    --primary-pri_50: #{$ui_blue_more50};
-    --primary-pri_40: #{$ui_blue_more40};
-    --primary-pri_30: #{$ui_blue_more30};
-    --primary-pri_20: #{$ui_blue_more20};
-    --primary-pri_12: #{$ui_blue_more12};
     --primary-pri_12-to-bk: #{$bg_black00};
-    --primary-pri_06: #{$ui_blue_more06};
     --primary-pri_6: rgba(0, 104, 230, 0.06);
     --white-w_100: #{$fc_white};
     --white-w_100-sec: #{$bg_black00};
@@ -115,12 +89,7 @@
     --white-w_20: #{$bg_black20};
     --white-w_16: #{$bg_black16};
     --white-w_12: #{$bg_black12};
-    --tab-btn_default: #{$ui_blue};
-    --btn-btn_default: #{$ui_blue_hover};
-    --btn-btn_hover: #{$ui_blue_more};
-    --btn-btn_selected: #{$fc_normal};
     --box1_border: #{$fc_white};
-    --title-color: #{$ui_blue_more};
     --bg_01_80: rgba(245, 246, 250, 0.90);
     --icon-pri_20-to-100 : #0067E6;
     
@@ -138,7 +107,6 @@
     --control-disabled: #{bg_grey10};
     --icon-icon-selected: #{$fc_white};
     --group-icon-selected: rgba(51, 143, 255, 0.40);
-    --map-ver2-hover: #{$fc_normal_more40};
     --navigation-bg: #E1E2E5;
     --etc-FNB:rgba(245, 246, 250, 0.90);
     --black-bk_100: #{$fc_white};
@@ -166,12 +134,10 @@
     border-radius: 1.5em;
     background-color: rgb(237,237,237, 0.3);
     &.template {
-        padding: unset;
+        // padding: unset;
     }
 }
 html[data-theme=light] .lightmode > .inner{
-    // background-color: rgba(0,0,0,0.25);
-   
     &.ver1 {
         background-color: var(--PRI);
     }
@@ -192,12 +158,10 @@ html[data-theme=light] .lightmode > .inner{
 }
 .lightmode label:first-of-type{
     padding: 2px;
-    // border-radius: 50% 0 0 50%;
     border-radius: 50px;
 }
 .lightmode label:last-of-type{
     padding: 2px;
-    // border-radius: 0 50% 50% 0;
     border-radius: 50px;
 }
 .lightmode i{
@@ -633,19 +597,8 @@ footer {
         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;
@@ -757,7 +710,7 @@ html[data-theme=light] {
         ul li a {
             color: var(--more-visible-wh_60-to-100);
             &.on, &:hover, &:focus {
-                color: $ui_blue_more;
+                // color: $ui_blue_more;
             }
         }
     }
@@ -790,65 +743,6 @@ html[data-theme=light] {
     .btn_srch28.on{
         span img {@include filter_white}
     }
-    .btn_floating{
-        .put_drop img {@include filter_black}
-        .put_see img {@include filter_blue}
-        .put_see .img_seeoff {@include filter_white}
-        .put_see {
-            .img_see{@include filter_blue}
-        }
-        &:hover:not(.disabled),&.hover,&.selected {
-            .put_drop img {@include filter_white}
-            .put_see img {@include filter_white}
-        }
-    }
-    .btn_drop {
-        .put_drop .img_drop {@include filter_black}
-        .put_see img {@include filter_black}
-        &.hover, &.selected{
-            p {
-                img {@include filter_white}
-            }
-            img {@include filter_blue}
-        }
-        // split button 
-        .put_see.off{
-            .img_see {@include filter_black}
-            .img_see_off {@include filter_blue} 
-        }
-    }
-    .btn_arrow_circle.line {
-        img {@include filter_black}
-        &.selected,&:hover:not(.disabled){
-            img {@include filter_blue}
-        }
-    }
-    .btn_arrow_l {
-        img {@include filter_blue}
-        &.disabled{
-            img{
-                opacity: 0.3;
-                @include filter_black01;
-            }
-        }
-    }
-    .btn_arrow{
-        img {@include filter_black01}
-        &.hover{
-            img {@include filter_blue}
-        }
-        &.disabled{
-            img{
-                opacity: 0.3;
-                @include filter_black01;
-            }
-        }
-    }
-    .btn_arrow_s {
-        img {@include filter_black01;
-            opacity: 0.6;
-        }
-    }
     .arrow_box {
         img {@include filter_black;}
     }
@@ -910,23 +804,6 @@ html[data-theme=light] {
     .lnb_box{
         img{@include filter_black}
     }
-    // map
-    .arrival_car {
-        img{
-            content: url("../images/marker_arrival_car_selected_100.svg");
-        }
-    }
-    .arrival_marker {
-        img{
-            content: url("../images/marker_arrival_area_selected.svg");
-        }
-    }
-    .map_frame{
-        img{
-            content: url("../images/map_frame_light.svg")
-        }  
-    }
-
     // template
     .main_contents {
         width: 100%;
@@ -954,6 +831,16 @@ html[data-theme=light] {
     .logo_hd_kisa{
         content: url("../images/logo_light.svg");
     }
+    .bell{
+        img {
+            content: url("../images/bell_bk_20.svg");
+        }
+    }
+    .user{
+        img {
+            content: url("../images/user_bk_20.svg");
+        }
+    }
     // light모드 display none
     .light_none {
         display: none;
diff --git a/assets/css/template.css b/assets/css/template.css
index 3395a7a..b79e6ce 100644
--- a/assets/css/template.css
+++ b/assets/css/template.css
@@ -223,7 +223,7 @@ footer {
 }
 
 .tmbox_text {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   line-height: 1.3;
 }
@@ -334,7 +334,7 @@ footer {
   margin-bottom: 0;
 }
 .signal_dl dt {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 300;
   display: flex;
   justify-content: space-between;
@@ -393,7 +393,7 @@ footer {
 }
 
 .map_label {
-  font-size: 1.25rem;
+  font-size: 20px;
   font-weight: 700;
   width: auto;
   padding: 0.125rem 0.75rem 0.25rem;
@@ -427,7 +427,7 @@ footer {
 }
 
 .record_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   width: 100%;
   padding: 1.25rem 1rem 1rem 0;
@@ -499,7 +499,7 @@ footer {
   grid-template-columns: 1.5fr 1fr;
 }
 .situation_box h4 {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   color: var(--white-w_87);
 }
@@ -563,7 +563,7 @@ footer {
   align-items: center;
 }
 .ch_label .word {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
   color: rgba(255, 255, 255, 0.87);
   margin: 0.25rem 0 0.25rem 0.25rem;
@@ -638,7 +638,7 @@ footer {
   border: 0.125rem solid #6E3DFF;
 }
 .record_radio .word {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 300;
 }
 
@@ -694,7 +694,7 @@ footer {
 }
 
 .user_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   color: var(--primary-to-grayscale-to-bk);
   height: 1.5rem;
@@ -1200,11 +1200,8 @@ body::-webkit-scrollbar:horizontal {
 
 header {
   width: 100%;
-  height: 56px;
-  height: 3.5rem;
-  padding: 8px 20px;
-  padding: 0.5rem 1.25rem;
-  border-radius: 10px;
+  height: 48px;
+  padding: 0px 20px 0px 18px;
 }
 
 .header_in {
@@ -1232,7 +1229,7 @@ header {
 }
 
 .header_title {
-  font-size: 1.125rem;
+  font-size: 18px;
   font-weight: 500;
   font-weight: 600;
   color: #fff;
@@ -1248,38 +1245,6 @@ header {
   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;
@@ -1312,7 +1277,7 @@ header {
   align-items: center;
 }
 .user_txt span {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   color: #fff;
 }
@@ -1470,7 +1435,7 @@ header {
 }
 
 .menu_tlt {
-  font-size: 0.9375rem;
+  font-size: 15px;
   font-weight: 500;
 }
 
@@ -1512,7 +1477,7 @@ header {
 }
 
 .explain {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
 }
 
@@ -1571,7 +1536,7 @@ header {
 }
 
 .tab_nemo {
-  font-size: 0.9375rem;
+  font-size: 15px;
   font-weight: 400;
   min-width: 8.25rem;
   height: 2rem;
@@ -1626,7 +1591,7 @@ header {
   width: 100%;
 }
 .netz_table thead th {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   text-align: center;
   vertical-align: middle;
@@ -1640,7 +1605,7 @@ header {
   border-right: 1px solid #8A8E99;
 }
 .netz_table tbody td {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   text-align: center;
   vertical-align: middle;
@@ -1693,7 +1658,7 @@ header {
 }
 
 .caption_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   letter-spacing: 0.5px;
   padding: 0px 0px 14px;
@@ -1722,14 +1687,14 @@ header {
 .scope_total {
   display: flex;
   align-items: flex-end;
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   padding: 0 1.25rem 0 0;
   color: #00B295;
   line-height: 1;
 }
 .scope_total .decimal {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
 }
 
@@ -1738,14 +1703,14 @@ header {
   align-items: center;
   -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
 }
 .scope_text span {
   color: rgba(0, 0, 0, 0.5);
 }
 .scope_text .scope_count {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
 }
 
@@ -1760,7 +1725,7 @@ header {
 }
 
 .td_txt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   word-break: keep-all;
 }
@@ -1785,7 +1750,7 @@ header {
   min-width: 3.25rem;
 }
 .td_txt.med {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   line-height: 1.6;
 }
@@ -1794,7 +1759,7 @@ header {
 }
 
 .date_txt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   opacity: 0.4;
   line-height: 1.2;
@@ -1802,12 +1767,12 @@ header {
 }
 
 .td_total .td_txt {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   line-height: 1.4;
 }
 .td_total.sum .td_txt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   color: #0068E6;
 }
@@ -1841,7 +1806,7 @@ header {
 }
 
 .paging_ul li a {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   display: inline-block;
   width: 1.75rem;
@@ -1974,7 +1939,7 @@ header {
   padding: 0 0 0.25rem;
 }
 .dl_enroll dt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   width: 6.25rem;
   padding: 0 0.75rem 0 0;
@@ -1998,7 +1963,7 @@ header {
   width: 100%;
 }
 .dl_enroll dd .tlt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
 }
 
@@ -2120,7 +2085,7 @@ header {
   letter-spacing: 1.8px;
 }
 .mtitle_dl dd .mtitle_exp {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
   color: #fff;
   letter-spacing: 0.8px;
@@ -2151,7 +2116,7 @@ header {
   margin-top: -25px;
 }
 .go_ready span {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
 }
 
@@ -2182,13 +2147,13 @@ header {
   margin: 0 0 3rem;
 }
 .msent_dl dt {
-  font-size: 1.25rem;
+  font-size: 20px;
   font-weight: 700;
   margin: 0 0 1.25rem;
   line-height: 1.4;
 }
 .msent_dl dd {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
   line-height: 1.8;
 }
@@ -2246,7 +2211,7 @@ header {
 .date_put_dl dt {
   display: flex;
   align-items: center;
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   margin: 0 1.5rem 0 0;
   line-height: 1;
@@ -2383,7 +2348,7 @@ header {
   opacity: 0.3;
 }
 .add_button span {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
   line-height: 1.6;
 }
@@ -2461,7 +2426,7 @@ header {
   word-break: break-all;
 }
 .vol_count + .decimal {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: #00B295;
 }
@@ -2524,7 +2489,7 @@ header {
 }
 
 .chart_unit {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.5);
 }
@@ -2623,7 +2588,7 @@ header {
 }
 
 .date {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.5);
 }
@@ -2662,7 +2627,7 @@ header {
   overflow: hidden;
 }
 .scope_zone .chart_unit {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
   position: absolute;
   right: 12px;
@@ -2714,13 +2679,13 @@ header {
   padding: 0.3rem 0 0 0.5rem;
 }
 .reduce_sett .dl_enroll dt {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   width: 10.5rem;
   padding: 0 0.5rem 0 0;
 }
 .reduce_sett .dl_enroll dt .mini {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.5);
   letter-spacing: -0.5px;
@@ -2745,7 +2710,7 @@ footer {
   padding: 0 1rem 0 0;
 }
 .footer_left .copy {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
   font-weight: 300;
   color: #fff;
@@ -2761,7 +2726,7 @@ footer {
   padding: 2px 0 0;
 }
 .copy_right p {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   font-weight: 300;
   color: #fff;
@@ -2852,7 +2817,7 @@ footer {
   line-height: 1.2;
 }
 .chart_inner .chart_unit {
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
   position: absolute;
   right: 1rem;
@@ -2928,7 +2893,7 @@ footer {
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   margin: 0 6px 0 0;
   width: 26px;
@@ -2944,7 +2909,7 @@ footer {
   line-height: 1;
 }
 .seq_dl dd .call {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   margin: 0 0.5rem 0 0;
 }
@@ -3006,12 +2971,12 @@ footer {
 }
 
 .terms_sent {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   line-height: 1.4;
 }
 .terms_sent.full {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   color: #00A388;
 }
@@ -3105,7 +3070,7 @@ footer {
   border-radius: 8px;
 }
 .status_dl dt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   margin: 0.25rem 0.25rem 0 0;
   word-break: keep-all;
@@ -3228,7 +3193,7 @@ footer {
   margin: 0.375rem 0 0;
 }
 .point_dl dd {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   flex: 1;
 }
@@ -3264,7 +3229,7 @@ footer {
 .timer {
   display: flex;
   align-items: center;
-  font-size: 0.6875rem;
+  font-size: 11px;
   font-weight: 400;
 }
 .timer span {
@@ -3345,7 +3310,7 @@ footer {
 }
 
 .panel_text p {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
   font-weight: 300;
   line-height: 1.6;
@@ -3364,13 +3329,13 @@ footer {
   margin: 24px 0 0;
 }
 .tier_dl dt {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   font-weight: 700;
   margin: 0 0 0.25rem;
 }
 .tier_dl dd {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   line-height: 1.5;
 }
@@ -3405,7 +3370,7 @@ footer {
   color: #00A387;
 }
 .tab_radio .word {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   color: #000000;
   margin: 0 0 0 0.5rem;
@@ -3445,14 +3410,14 @@ select option[value=""][disabled] {
 }
 
 .td_name {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   word-break: nowrap;
   color: #0069CC;
 }
 
 .td_space {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   width: 15rem;
   margin: 0 auto;
@@ -3495,7 +3460,7 @@ select option[value=""][disabled] {
 }
 
 .users_state {
-  font-size: 0.75rem !important;
+  font-size: 12px !important;
   font-weight: 500 !important;
   width: 3.5rem;
   height: 1.375rem;
@@ -3568,7 +3533,7 @@ select option[value=""][disabled] {
   display: flex;
   align-items: flex-end;
   justify-content: center;
-  font-size: 0.6875rem;
+  font-size: 12px;
   font-weight: 500;
   width: 100%;
   padding: 0 0 3px;
@@ -3619,7 +3584,7 @@ select option[value=""][disabled] {
   max-width: fit-content;
 }
 .toast_in .toast_text {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   margin: 0 24px 0 12px;
   line-height: 1.4;
@@ -3646,7 +3611,7 @@ select option[value=""][disabled] {
   background: #E6E7EB;
 }
 .user_rejection_list li {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   position: relative;
   padding-left: 10px;
@@ -3674,13 +3639,13 @@ select option[value=""][disabled] {
   margin-bottom: 0;
 }
 .user_approval_list li .text_01 {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   width: 113px;
   color: rgba(0, 0, 0, 0.7);
 }
 .user_approval_list li .text_02 {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
 }
 .user_approval_list .additional_file {
@@ -3720,18 +3685,18 @@ select option[value=""][disabled] {
   line-height: 1;
 }
 .member_popup_box .member_name {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
   margin-bottom: 7px;
 }
 .member_popup_box .member_email {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.7);
 }
 .member_popup_box .member_modify,
 .member_popup_box .member_logout {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
   width: 100%;
   height: 2.75rem;
@@ -3760,7 +3725,7 @@ select option[value=""][disabled] {
   margin-bottom: 0;
 }
 .modify_confirm_list .modify_password_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 400;
   width: 100px;
 }
@@ -3776,7 +3741,7 @@ select option[value=""][disabled] {
 }
 
 .form_error_msg {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   position: absolute;
   left: 20px;
@@ -3795,14 +3760,14 @@ select option[value=""][disabled] {
   border-bottom: 1px solid #DCDDE0;
 }
 .member_modify_form .form_row .button_default {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   height: 2rem;
   border-radius: 4px;
   text-align: center;
 }
 .member_modify_form .form_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
   width: 14.75rem;
   padding: 1.687rem 1rem 0.5rem 1.25rem;
@@ -3823,7 +3788,7 @@ select option[value=""][disabled] {
   padding-right: 1.25rem;
 }
 .member_modify_form .form_error_msg {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   position: absolute;
   left: 20px;
@@ -3831,7 +3796,7 @@ select option[value=""][disabled] {
   color: #DB0000;
 }
 .member_modify_form .remark_msg {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   color: rgba(0, 0, 0, 0.5);
   margin: 1px 0 0;
@@ -3930,7 +3895,7 @@ select option[value=""][disabled] {
   color: rgba(0, 0, 0, 0.5);
 }
 .form_head_phone .remark_msg {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   left: 8.5rem;
   bottom: 7px;
@@ -3945,7 +3910,7 @@ select option[value=""][disabled] {
   width: 84px;
 }
 .form_file_upload .form_file_name {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   width: auto;
   max-width: 532px;
@@ -3969,7 +3934,7 @@ select option[value=""][disabled] {
 .form_admin_email .remark_msg {
   display: flex;
   align-items: flex-start;
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   bottom: 10px;
   line-height: 1.5rem;
@@ -3977,7 +3942,7 @@ select option[value=""][disabled] {
 }
 
 .signup_title {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 700;
 }
 
@@ -3998,14 +3963,14 @@ select option[value=""][disabled] {
   padding: 0;
 }
 .signup_step_form .form_row .button_default {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
   height: 2rem;
   border-radius: 4px;
   text-align: center;
 }
 .signup_step_form .form_title {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   width: 10.5rem;
   padding: 0.5rem 0.5rem 0 0;
@@ -4053,7 +4018,7 @@ select option[value=""][disabled] {
   width: 9rem;
 }
 .signup_step_form .form_signup_phone .remark_msg {
-  font-size: 0.8125rem;
+  font-size: 13px;
   font-weight: 400;
   position: absolute;
   left: 0;
@@ -4071,7 +4036,7 @@ select option[value=""][disabled] {
   flex-wrap: wrap;
 }
 .signup_step_form .form_business_registration .form_contents .remark_msg {
-  font-size: 0.75rem;
+  font-size: 12px;
   font-weight: 400;
   width: 100%;
   line-height: 1.25rem;
@@ -4099,7 +4064,7 @@ select option[value=""][disabled] {
   font-weight: 700;
 }
 .signup_success .remark_msg {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 500;
   margin-top: 1rem;
   color: rgba(0, 0, 0, 0.5);
@@ -4181,12 +4146,12 @@ select option[value=""][disabled] {
   color: rgba(0, 0, 0, 0.8);
 }
 .pop_address_search .result_text01 {
-  font-size: 1rem;
+  font-size: 16px;
   font-weight: 500;
   margin-bottom: 8px;
 }
 .pop_address_search .result_text02 {
-  font-size: 0.875rem;
+  font-size: 14px;
   font-weight: 400;
 }
 
diff --git a/assets/css/template.scss b/assets/css/template.scss
index 0d72c3e..fdd2909 100644
--- a/assets/css/template.scss
+++ b/assets/css/template.scss
@@ -944,13 +944,11 @@ body::-webkit-scrollbar:horizontal{
 }
 header {
 	width:100%;
-	height: 56px;
-	height: 3.5rem;
-	padding:8px 20px;
-	padding: 0.5rem 1.25rem;
+	height: 48px;
+	padding: 0px 20px 0px 18px;
 	// background: $bgdb;
 	// border: 1px solid #000;
-	border-radius: 10px;
+	// border-radius: 10px;
 }
 
 .header_in{
@@ -992,32 +990,6 @@ header {
 		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;
diff --git a/assets/images/bell_bk_20.svg b/assets/images/bell_bk_20.svg
new file mode 100644
index 0000000..3120c36
--- /dev/null
+++ b/assets/images/bell_bk_20.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bell">
+<path id="Icon" d="M12.4998 15.8334C12.4998 17.2141 11.3805 18.3334 9.99977 18.3334C8.61906 18.3334 7.49977 17.2141 7.49977 15.8334M11.4969 5.19882C11.8598 4.82389 12.0831 4.31304 12.0831 3.75002C12.0831 2.59943 11.1504 1.66669 9.99977 1.66669C8.84917 1.66669 7.91643 2.59943 7.91643 3.75002C7.91643 4.31304 8.13977 4.82389 8.50268 5.19882M14.9998 9.33335C14.9998 8.18408 14.473 7.08188 13.5353 6.26922C12.5976 5.45657 11.3258 5.00002 9.99977 5.00002C8.67368 5.00002 7.40192 5.45657 6.46423 6.26922C5.52655 7.08188 4.99977 8.18408 4.99977 9.33335C4.99977 11.2349 4.52821 12.6255 3.93982 13.6206C3.26922 14.7547 2.93391 15.3218 2.94715 15.4572C2.9623 15.6122 2.9902 15.6611 3.11588 15.753C3.22574 15.8334 3.77769 15.8334 4.88159 15.8334H15.1179C16.2218 15.8334 16.7738 15.8334 16.8837 15.753C17.0093 15.6611 17.0372 15.6122 17.0524 15.4572C17.0656 15.3218 16.7303 14.7547 16.0597 13.6206C15.4713 12.6255 14.9998 11.2349 14.9998 9.33335Z" stroke="black" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/assets/images/bell_fff_20.svg b/assets/images/bell_fff_20.svg
new file mode 100644
index 0000000..a628564
--- /dev/null
+++ b/assets/images/bell_fff_20.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="bell">
+<path id="Icon" d="M12.4998 15.8333C12.4998 17.2141 11.3805 18.3333 9.99977 18.3333C8.61906 18.3333 7.49977 17.2141 7.49977 15.8333M11.4969 5.1988C11.8598 4.82387 12.0831 4.31302 12.0831 3.75001C12.0831 2.59941 11.1504 1.66667 9.99977 1.66667C8.84917 1.66667 7.91643 2.59941 7.91643 3.75001C7.91643 4.31302 8.13977 4.82387 8.50268 5.1988M14.9998 9.33334C14.9998 8.18407 14.473 7.08187 13.5353 6.26921C12.5976 5.45655 11.3258 5.00001 9.99977 5.00001C8.67368 5.00001 7.40192 5.45655 6.46423 6.26921C5.52655 7.08187 4.99977 8.18407 4.99977 9.33334C4.99977 11.2348 4.52821 12.6255 3.93982 13.6206C3.26922 14.7547 2.93391 15.3218 2.94715 15.4572C2.9623 15.6122 2.9902 15.6611 3.11588 15.753C3.22574 15.8333 3.77769 15.8333 4.88159 15.8333H15.1179C16.2218 15.8333 16.7738 15.8333 16.8837 15.753C17.0093 15.6611 17.0372 15.6122 17.0524 15.4572C17.0656 15.3218 16.7303 14.7547 16.0597 13.6206C15.4713 12.6255 14.9998 11.2348 14.9998 9.33334Z" stroke="white" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git a/assets/images/user_bk_20.svg b/assets/images/user_bk_20.svg
new file mode 100644
index 0000000..9c28a9d
--- /dev/null
+++ b/assets/images/user_bk_20.svg
@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="user-02">
+<g id="Icon">
+<path d="M10 12.5C7.35831 12.5 5.00904 13.7755 3.51337 15.755C3.19146 16.181 3.0305 16.394 3.03577 16.6819C3.03984 16.9043 3.17951 17.1849 3.35451 17.3222C3.58103 17.5 3.89493 17.5 4.52273 17.5H15.4773C16.1051 17.5 16.4191 17.5 16.6456 17.3222C16.8206 17.1849 16.9602 16.9043 16.9643 16.6819C16.9696 16.394 16.8086 16.181 16.4867 15.755C14.991 13.7755 12.6418 12.5 10 12.5Z" stroke="black" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 10C12.0711 10 13.75 8.32107 13.75 6.25C13.75 4.17893 12.0711 2.5 10 2.5C7.92897 2.5 6.25004 4.17893 6.25004 6.25C6.25004 8.32107 7.92897 10 10 10Z" stroke="black" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>
diff --git a/assets/images/user_fff_20.svg b/assets/images/user_fff_20.svg
new file mode 100644
index 0000000..c00e979
--- /dev/null
+++ b/assets/images/user_fff_20.svg
@@ -0,0 +1,8 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="user-02">
+<g id="Icon">
+<path d="M10 12.5C7.35831 12.5 5.00904 13.7755 3.51337 15.755C3.19146 16.181 3.0305 16.394 3.03577 16.6819C3.03984 16.9043 3.17951 17.1849 3.35451 17.3222C3.58103 17.5 3.89493 17.5 4.52273 17.5H15.4773C16.1051 17.5 16.4191 17.5 16.6456 17.3222C16.8206 17.1849 16.9602 16.9043 16.9643 16.6819C16.9696 16.394 16.8086 16.181 16.4867 15.755C14.991 13.7755 12.6418 12.5 10 12.5Z" stroke="white" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M10 10C12.0711 10 13.75 8.32107 13.75 6.25C13.75 4.17893 12.0711 2.5 10 2.5C7.92897 2.5 6.25004 4.17893 6.25004 6.25C6.25004 8.32107 7.92897 10 10 10Z" stroke="white" stroke-opacity="0.87" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+</svg>