@charset "UTF-8";
/*가이드에서만 쓰이는 레이아웃 스타일*/
:root {
  --bg_02: #04091A;
  --bg_02_template: #050A1F;
  --bg_01:#0A0F24;
  --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;
  --white-w_87: rgba(255, 255, 255, 0.87);
  --white-w_87-sec: rgba(255, 255, 255, 0.87);
  --white-w_60: rgba(255, 255, 255, 0.6);
  --white-w_40: rgba(255, 255, 255, 0.4);
  --white-w_40-sec: rgba(255, 255, 255, 0.4);
  --white-w_30: rgba(255, 255, 255, 0.3);
  --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);
  --line-wh_30-to-60: rgba(255, 255, 255, 0.3);
  --line-wh_12-to-100: rgba(255, 255, 255, 0.12);
  --line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40);
  --line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40);
  --icon-pri_20-to-100: rgba(34, 212, 255, 0.20);
  --primary-to-grayscale-to-bk: #27D4FF;
  --more-bright-wh_6-to-60: rgba(255, 255, 255, 0.06);
  --white-w_6: rgba(255, 255, 255, 0.06);
  --line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40);
  --etc-bg: #04091A;
  --etc-popup_tit: rgba(39, 212, 255, 0.60);
  --background-blur_0260: rgba(56, 61, 82, 0.60);
  --point-error: #D60000;
  --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);
  --icon-icon-selected: rgba(39, 212, 255, 0.40);
  --group-icon-selected: rgba(39, 212, 255, 0.40);
  --map-ver2-hover: rgba(39, 212, 255, 0.40);
  --background-blur_02_60: rgba(55, 61, 82, 0.60);
  --background-blur_01_20: rgba(162, 164, 184, 0.20);
  --navigation-bg: #1F2333;
  --etc-FNB: rgba(39, 212, 255, 0.12);
  --black-bk_100: #000;
  --etc-b_text: #338FFF;
  --etc-b_text2: #338FFF;
  --PRI: #84C01D;
  --bg_body: #030914;
  --alpha-bk-to-whbk-20: rgba(255, 255, 255, 0.20);
  --alpha-wh-to-bkwh-60: rgba(0, 0, 0, 0.60);
  --alpha-wh-to-bkwh-100: #000;
  --alpha-white-w_100: ;
  --wh-12: rgba(255, 255, 255, 0.12);
  --alpha-bk-to-whbk-10: rgba(255, 255, 255, 0.10);
  --alpha-bk-to-whbk-87: rgba(255, 255, 255, 0.87);
  --alpha-bk-to-whbk-100: rgba(255, 255, 255, 0.87);
  --alpha-bk-to-whbk-60: rgba(255, 255, 255, 0.60);
  --alpha-bk-to-whbk-40: rgba(255, 255, 255, 0.40);
}

:root[data-theme=light] {
  --bg_02: #ffffff;
  --bg_02_template: #DCDDE0;
  --bg_01: #F5F6FA;
  --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;
  --white-w_87: rgba(0, 0, 0, 0.87);
  --white-w_87-sec: #000;
  --white-w_60: rgba(0, 0, 0, 0.6);
  --white-w_40: rgba(0, 0, 0, 0.4);
  --white-w_40-sec: rgba(255, 255, 255, 0.4);
  --white-w_30: rgba(0, 0, 0, 0.3);
  --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);
  --line-pri_40-to-wh_100: #ffffff;
  --etc-bg: #ffffff;
  --etc-popup_tit: rgba(0, 104, 230, 0.80);
  --background-blur_0260: rgba(56, 61, 82, 0.60);
  --point-error: #D60000;
  --point-error-10: rgba(219, 0, 0, 0.08);
  --blur_02_60: rgba(255, 255, 255, 0.9);
  --bg-blur_02_60: rgba(55, 61, 82, 0.60);
  --grade-chart-gco-01: #FC5C34;
  --radio-default: rgba(0, 0, 0, 0.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;
  --etc-b_text: #139DF2;
  --PRI: #87C718;
  --bg_body: #030914;
  --alpha-bk-to-whbk-20: rgba(0, 0, 0, 0.20);
  --alpha-wh-to-bkwh-60: rgba(255, 255, 255, 0.20);
  --alpha-wh-to-bkwh-100: ;
  --alpha-white-w_100: #FFF;
  --wh-12: ;
  --alpha-bk-to-whbk-10: rgba(0, 0, 0, 0.10);
  --alpha-bk-to-whbk-87: rgba(0, 0, 0, 0.87);
  --alpha-bk-to-whbk-100: #000;
  --alpha-bk-to-whbk-60: rgba(0, 0, 0, 0.60);
  --alpha-bk-to-whbk-40: rgba(0, 0, 0, 0.40);
}

/*mode button*/
.lightmode > .inner {
  position: relative;
  display: inline-flex;
  padding: 0.313rem;
  border-radius: 1.5em;
  background-color: rgba(237, 237, 237, 0.3);
}
.lightmode > .inner.template {
  padding: unset;
}

html[data-theme=light] .lightmode > .inner {
  background-color: var(--PRI);
}

.outer {
  padding: 4px;
  border-radius: 50px;
  background-color: var(--wh-12);
  display: flex;
  gap: 12px;
  width: 100%;
}

.lightmode label {
  cursor: pointer;
}

.lightmode label:first-of-type {
  padding: 2px;
  border-radius: 50px;
}

.lightmode label:last-of-type {
  padding: 2px;
  border-radius: 50px;
}

.lightmode i {
  font-size: 1.2em;
  color: #aaa;
}

.lightmode input[type=radio] {
  display: none;
}

.lightmode input[type=radio]:checked + label > i {
  color: rgb(135, 199, 24);
  transition: all 0.35s ease-in-out;
}

.circle_dark {
  background: var(--alpha-wh-to-bkwh-100);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  padding: 2px;
}

.circle_light {
  background: var(--alpha-white-w_100);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  width: 30px;
  padding: 2px;
}

/**/
/*Contents*/
.guide_back {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 0;
}

.guide_wrap {
  background: var(--etc-bg);
  color: var(--white-w_87);
  position: relative;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  padding: 1.875rem 0;
}
.guide_wrap.grey {
  background-color: #1A1D29;
}
.guide_wrap.two_line {
  padding: 3.75rem 0;
}
.guide_wrap.cards {
  background: var(--bg_01);
}
.guide_wrap.navigation {
  background: var(--navigation-bg);
}

.guide_center {
  width: 77.5rem;
  margin: 0 auto;
  padding: 1.25rem;
}
.guide_center.width1720 {
  width: 107.5rem;
}

.guide_top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  width: 100%;
  height: 4.75rem;
  padding: 0 0 1rem;
  border-bottom: 0.063rem solid var(--white-w_30);
}
.guide_top h1 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
}

html[data-theme=light] .guide_top h1 {
  color: #000;
}

.Gr_contents {
  width: 100%;
  margin: 2.5rem 0 4.375rem;
}

.comp_top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  width: 100%;
  padding: 0 0 1.875rem;
}
.comp_top h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--white-w_87);
}

.comp_dl {
  width: 100%;
  display: flex;
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
  margin: 0 0 1.5rem;
}

.comp_dt {
  font-size: 1rem;
  font-weight: 500;
  width: 6.25rem;
  padding: 1.25rem 0 0 0;
}

.comp_dd {
  flex: 1;
}

.compline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.75rem 0;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
}
.compline.box {
  background: var(--white-w_6);
}

.comp_size {
  font-size: 0.75rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  width: 2.5rem;
  text-align: center;
}

.components {
  display: flex;
  align-items: center;
  flex: 1;
  gap: 0.75rem;
}

.flex_wrap {
  flex-wrap: wrap !important;
}

.flex_one {
  flex: 1 !important;
}

.usage_box {
  width: 53rem;
  height: 46.688rem;
  padding: 2.5rem;
  border-radius: 0.5rem;
  background: var(--white-w_6);
}

.card_box {
  height: 100%;
  padding: 0.625rem;
  background: var(--white-w_6);
}
.card_box.dark {
  background-color: transparent;
}

.black_box {
  width: 33.75rem;
  padding: 1.25em;
  background: var(--white-w_6);
}

/*template*/
footer {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 200;
}

.main_back {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main_wrap {
  position: relative;
  width: 100%;
  height: 100%;
  background: var(--bg_02_template);
}

.main_contents {
  width: 100%;
  height: 100%;
  position: relative;
  background: url("../images/background_img.png");
  background-repeat: no-repeat;
  background-size: cover !important;
}

.marker_wrap {
  position: absolute;
}

.notification_box.main {
  position: absolute;
  left: 50%;
  top: 3.5rem;
  transform: translateX(-50%);
  z-index: 80;
}
.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);
}

.board_line.signal.right {
  position: absolute;
  display: flex;
  top: 3.5rem;
  right: 1.25rem;
  z-index: 100;
}

.scroll.sc_y.table {
  height: 8.25rem;
  padding: 0;
}
.scroll.sc_y.signal {
  padding: 0;
  margin-right: 0.5rem;
}

.footer_in {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-bottom: 1.25rem;
}

.table_box.signal tr.selected, .table_box.signal tr:focus, .table_box.signal tr.hover {
  background: var(--primary-pri_12);
}
.table_box.signal th {
  position: static;
  height: 2rem;
}
.table_box.signal th, .table_box.signal td:not(.disable), .table_box.signal td:not(.disabled) {
  border-right: 0.063rem solid rgba(255, 255, 255, 0.12);
}
.table_box.signal th:last-child, .table_box.signal td:not(.disable):last-child, .table_box.signal td:not(.disabled):last-child {
  border-right: 0;
}
.table_box.signal td {
  height: 1.75rem;
  border-top: 0.125rem solid var(--etc-bg) !important;
}
.table_box.signal td p {
  text-align: center !important;
  cursor: pointer;
}

.user_table {
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--white-w_87-sec);
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.125rem;
}
.user_table tr.selected, .user_table tr:hover, .user_table tr:focus, .user_table tr.hover {
  background: var(--primary-pri_12);
}
.user_table th {
  position: relative;
  z-index: 1;
  top: 0;
  height: 2.25rem;
  background: rgba(255, 255, 255, 0.16);
  background: var(--more-visible-wh_6-to-100);
  background: var(--more-visible-wh_16-to-6);
  font-weight: 500;
}
.user_table th, .user_table td {
  border-right: 0.063rem solid var(--white-w_12);
}
.user_table th:last-child, .user_table td:last-child {
  border-right: 0;
}
.user_table td {
  height: 2.25rem;
  border-top: 0.188rem solid transparent !important;
}
.user_table td.on {
  background: rgba(39, 212, 255, 0.2);
}
.user_table .row_type1 {
  background: rgba(255, 255, 255, 0.16);
}
.user_table .row_type2 {
  background: var(--more-visible-wh_6-to-100);
}
.user_table .row_error {
  background: rgba(219, 0, 0, 0.08);
  color: #FF1F55;
}

.arrow.left {
  transform: rotate(180deg);
}
.arrow.up {
  transform: rotate(270deg);
}
.arrow.down {
  transform: rotate(90deg);
}

.grey_box {
  display: flex;
  -webkit-backdrop-filter: blur(1.875rem);
  backdrop-filter: blur(1.875rem);
  top: 33%;
  left: 30%;
}
.grey_box.login {
  z-index: 0;
  width: 44.563rem;
  padding: 3rem;
  border-radius: 0.125rem;
  border: 0.063rem solid rgba(255, 255, 255, 0.12);
  background: rgba(162, 164, 184, 0.2);
  -webkit-backdrop-filter: blur(3.75rem);
          backdrop-filter: blur(3.75rem);
}
.grey_box.login p {
  position: relative;
  z-index: 200;
  width: 0.063rem;
  background: rgba(255, 255, 255, 0.2);
  align-self: stretch;
}
.grey_box.error {
  display: block;
  z-index: 0;
  width: 44.563rem;
  padding: 5rem;
  border-radius: 0.125rem;
  border: 0.063rem solid rgba(255, 255, 255, 0.3);
  background: var(--background-blur_01_20);
  -webkit-backdrop-filter: blur(3.75rem);
          backdrop-filter: blur(3.75rem);
  opacity: 1;
}

.error_box {
  display: flex;
  -webkit-backdrop-filter: blur(1.875rem);
  backdrop-filter: blur(1.875rem);
  position: absolute;
  padding: 3rem;
  top: 33%;
  left: 30%;
  z-index: 0;
  width: 44.563rem;
  height: 18.25rem;
  border-radius: 0.125rem;
  border: 0.063rem solid rgba(255, 255, 255, 0.21);
  background: rgba(162, 164, 184, 0.2);
  -webkit-backdrop-filter: blur(3.75rem);
          backdrop-filter: blur(3.75rem);
}

.marker_main {
  position: absolute;
  bottom: 40%;
  left: 50%;
}

.indicator.main {
  padding: 1.25rem 0.6rem 1.25rem 1.25rem;
}
.indicator.signal {
  padding: 0;
}

.indi_conts.del {
  display: none;
}
.indi_conts.signal {
  margin: 0;
}

.tmbox_text {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--white-w_87-sec);
}

.tmbox.signal {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1.25rem;
}

.hd_profile {
  position: relative;
  width: 1.875rem;
  height: 1.25rem;
}
.hd_profile .member_popover {
  display: none;
}
.hd_profile.profile_open .member_popover, .hd_profile.profile_open .member_toggle {
  display: block;
}
.hd_profile.profile_open .btn_profile .comma_under8 {
  opacity: 1;
  transform: rotate(180deg);
}
.hd_profile.profile_open .profile20 {
  opacity: 1;
}

.marker_img_selected {
  display: none;
}

.marker_main .tooltip_parents, .marker_main .infowindow_box.main.on {
  display: none;
}
.marker_main.marker_hide .tooltip_parents, .marker_main.marker_hide .infowindow_box.main.on {
  display: block;
}
.marker_main.marker_hide .img_off {
  display: none !important;
}
.marker_main.marker_hide .marker_img_selected {
  display: block !important;
}

.fab_wrap {
  position: absolute;
  top: 0%;
  left: 108%;
  margin-left: 0.5rem;
}

.popover_box.main {
  position: absolute;
  display: none;
  bottom: 3rem;
  left: -2.5rem;
  z-index: 100;
}
.popover_box.main.legend {
  display: block;
}
.popover_box.main.pop {
  display: block;
}
.popover_box.main.pop_hide {
  display: none;
}

.signal_board {
  width: 100%;
  height: 100%;
}

.signal_content {
  display: flex;
  align-items: center;
  justify-content: center;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  width: 100%;
  height: 100%;
  background: var(--bg_02_template);
}

.signal_body {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("../images/signal_body_img.png");
  background-repeat: no-repeat;
  background-size: cover !important;
}

.accordion_box {
  position: absolute;
  margin-top: 0.5rem;
}

.indi_top.signal {
  height: 3.5rem;
  padding: 1.25rem 1rem 1.25rem;
}

.signal_dl {
  display: flex;
  align-items: center;
  margin: 0.5rem 0;
}
.signal_dl:last-child {
  margin-bottom: 0;
}
.signal_dl dt {
  font-size: 0.8125rem;
  font-weight: 300;
  display: flex;
  justify-content: space-between;
  width: 4rem;
  padding: 0 1rem 0 0;
  color: var(--white-w_87-sec);
}
.signal_dl dd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  -moz-column-gap: 0.25rem;
       column-gap: 0.25rem;
}
.signal_dl dd .wrput {
  width: 100%;
}
.signal_dl dd .ch_radio:last-child {
  padding: 0;
}
.signal_dl.check {
  margin: 1rem 0;
}

.accordion_block.signal {
  -webkit-backdrop-filter: blur(1.875rem);
  backdrop-filter: blur(1.875rem);
}
.accordion_block.signal .accordion_title:hover:not(.levle2), .accordion_block.signal .hover.accordion_title,
.accordion_block.signal .accordion_title:focus {
  background: var(--primary-pri_20);
  cursor: pointer;
}
.accordion_block.signal .accordion_title {
  background: var(--primary-pri_20);
}
.accordion_block.signal .accordion_title:hover:not(.disabled), .accordion_block.signal .accordion_title:hover:not(.point.disabled), .accordion_block.signal .accordion_title:focus:not(.disabled) {
  background: var(--primary-pri_20);
}
.accordion_block.signal .accordion_contents {
  background: rgba(255, 255, 255, 0.06);
}
.accordion_block.signal .accordion_contents.signal {
  padding: unset;
}

.map_label_line {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  bottom: 1.5rem;
  padding: 0.125rem 0.75rem;
}

.map_label {
  font-size: 1.25rem;
  font-weight: 700;
  width: auto;
  padding: 0.125rem 0.75rem 0.25rem;
  background-color: #0B1129;
  color: #fff;
}

.record_wrap {
  width: 100%;
  height: 100%;
  padding-top: 5rem;
}

.record_content {
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  display: grid;
  grid-auto-rows: 25.75rem auto;
  row-gap: 1rem;
}

.record_box {
  width: 100%;
  height: 100%;
  border: 0.063rem solid var(--line-pri_40-to-wh_40);
  background: var(--bg_01_80);
  box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
  -webkit-backdrop-filter: blur(1.875rem);
          backdrop-filter: blur(1.875rem);
  padding: 0 1.25rem 1.25rem 1.25rem;
}

.record_title {
  font-size: 1rem;
  font-weight: 700;
  width: 100%;
  padding: 1.25rem 1rem 1rem 0;
  color: var(--primary-to-grayscale-to-bk);
}

.record_box_content {
  display: flex;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  width: 100%;
  height: calc(100% - 3.25rem);
}

.record_grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr;
  grid-template-rows: 8.125rem auto;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  row-gap: 1rem;
  width: 100%;
  height: 100%;
}

.record_top {
  display: grid;
  grid-column-gap: 1rem;
  width: 9rem;
}

.chart_cont_box {
  height: 100%;
  width: 9rem;
}

.diagon_cont_box {
  display: grid;
  grid-column-gap: 1rem;
}

.diagon_cont.record {
  width: 9rem;
  height: 4.875rem;
}

.situation_box {
  padding: 0.75rem;
  border-radius: 0.125rem;
  background: var(--more-visible-wh_6-to-100);
}
.situation_box.chart {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  grid-row: 1/3;
}
.situation_box.case1 {
  grid-row: 1/2;
  grid-column: 5/6;
}
.situation_box.case2 {
  grid-row: 1/2;
  grid-column: 6/7;
}
.situation_box.event {
  display: grid;
  grid-column: 5/7;
  grid-template-columns: 1.5fr 1fr;
}
.situation_box h4 {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--white-w_87-sec);
}

.case_wrap {
  display: flex;
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  width: 100%;
  height: calc(100% - 1.125rem);
}

.case_box {
  padding: 0.25rem;
  border-radius: 0.125rem;
  background: var(--white-w_6);
  width: 100%;
}
.case_box .case_number {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  width: 100%;
  height: calc(100% - 0.875rem);
  color: var(--white-w_87);
}

.case_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  -moz-column-gap: 0.5rem;
       column-gap: 0.5rem;
  row-gap: 0.5rem;
}

.chart_box {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100% - 0.875rem);
  -moz-column-gap: 2.5rem;
       column-gap: 2.5rem;
}

.rate_content {
  display: grid;
  row-gap: 1rem;
  height: calc(100% - 3.25rem);
}

.rate_box {
  width: 100%;
  height: 100%;
  padding: 0.75rem;
  border-radius: 0.125rem;
  background: var(--more-visible-wh_6-to-100);
}

.ch_label {
  display: flex;
  align-items: center;
}
.ch_label .word {
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--white-w_87-sec);
  margin: 0.25rem 0 0.25rem 0.25rem;
  line-height: 1.1;
  word-break: keep-all;
}

.chart_cont {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 9rem;
  height: 4.891rem;
  padding: 0.5rem;
  overflow: hidden;
  background: url(../images/bg_tract.svg) no-repeat left top;
  background-size: 100% 100%;
}
.chart_cont .chart_tlt {
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  margin-bottom: 0.5rem;
}
.chart_cont .chart_result {
  padding: 1rem 0 0;
}

.chart_tlt {
  font-size: 0.875rem;
  font-weight: 500;
  color: #27D4FF;
}
.chart_tlt.cover {
  width: 86%;
  padding: 0.75rem 0 0 0.75rem;
  background: url(../images/bg_tract_top.svg) no-repeat left top;
  background-size: 100% auto;
}

.chart_result {
  display: flex;
  align-items: flex-end;
  color: #27D4FF;
  font-size: 1.5rem;
  font-weight: 700;
  -moz-column-gap: 0.375rem;
       column-gap: 0.375rem;
}
.chart_result .unit {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.7;
}

.record_radio {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.record_radio .word {
  color: var(--white-w_87-sec);
}
.record_radio.on .radio {
  background-color: #fff;
  border: 0.25rem solid #27d4ff;
}
.record_radio.on .word {
  color: var(--white-w_87-sec);
}
.record_radio .radio {
  display: inline-block;
  width: 0.9375rem;
  height: 0.9375rem;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 100%;
  margin: 0 0.5rem 0 0;
}
.record_radio .radio.mini {
  width: 0.625rem;
  height: 0.625rem;
  border: 0.125rem solid #27d4ff;
  margin: 0 0.375rem 0 0;
}
.record_radio .radio.green {
  border: 0.125rem solid #16D9AB;
}
.record_radio .radio.blue {
  border: 0.125rem solid #07F;
}
.record_radio .radio.dark_blue {
  border: 0.125rem solid #0E44E5;
}
.record_radio .radio.purple {
  border: 0.125rem solid #8972FF;
}
.record_radio .radio.dark_purple {
  border: 0.125rem solid #6E3DFF;
}
.record_radio .word {
  font-size: 0.6875rem;
  font-weight: 300;
}

.user_wrap {
  width: 100%;
  height: 100%;
  padding-top: 2.5rem;
}

.user_content {
  display: flex;
  -moz-column-gap: 1rem;
       column-gap: 1rem;
  width: 100%;
  height: 100%;
  padding: 1.25rem;
}

.personal_box, .system_box {
  -webkit-backdrop-filter: blur(1.875rem);
  backdrop-filter: blur(1.875rem);
  width: 100%;
  height: 100%;
  border: 0.063rem solid var(--line-pri_40-to-wh_40);
  background: var(--bg_01_80);
  box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16);
  width: 28.625rem;
}

.user_box {
  -webkit-backdrop-filter: blur(1.875rem);
  backdrop-filter: blur(1.875rem);
  width: 100%;
  height: 100%;
  padding: 1.25rem;
  border: 0.063rem solid var(--line-pri_40-to-wh_40);
  background: var(--bg_01_80);
  box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16);
  flex: 1;
}

.table_inner {
  margin-top: 0.75rem;
  width: 100%;
  height: calc(100% - 2.625rem);
}

.title_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.user_title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--primary-to-grayscale-to-bk);
  height: 1.5rem;
}

.user_btn {
  height: 1.75rem;
  padding: 0.5rem 0;
  word-break: keep-all;
}

.error_logo {
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
}

.logo_login {
  width: 12.5rem;
}

.hd_profile {
  position: relative;
  width: 1.875rem;
  height: 1.25rem;
}
.hd_profile .member_popover {
  display: none;
}
.hd_profile.profile_open .member_popover, .hd_profile.profile_open .member_toggle {
  display: block;
}
.hd_profile.profile_open .btn_profile .comma_under8 {
  opacity: 1;
  transform: rotate(180deg);
}
.hd_profile.profile_open .profile20 {
  opacity: 1;
}

.login_title {
  color: var(--white-w_100-sec);
}

.white_w_87 {
  color: var(--white-w_87) !important;
}

.white_w_bk {
  color: var(--white-w_87-sec) !important;
}

.white_ff_bk {
  color: var(--white-w_100-sec) !important;
}

/* html data-theme */
html[data-theme=light] .sp_logo_uniplus {
  background: url("../images/logo_uniplus_light.svg") no-repeat left center;
  background-size: cover;
}
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;
}
html[data-theme=light] button.mode img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] button.mode .img_on {
  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] button:hover:not(.hover):not(.legend):not(.selected):not(.disabled) .circle_grey28.popover img, html[data-theme=light] button:active .circle_grey28.popover img, html[data-theme=light] button.selected .circle_grey28.popover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] button:hover:not(.hover):not(.legend):not(.selected):not(.disabled) .circle_grey28.popover .img_on, html[data-theme=light] button:active .circle_grey28.popover .img_on, html[data-theme=light] button.selected .circle_grey28.popover .img_on {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_srch28 span img:not(.on) {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_srch28.mode:active img {
  filter: none;
}
html[data-theme=light] .btn_srch28:active:not(.selected) span img:not(.on) {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
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 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.selected img, html[data-theme=light] .btn_arrow_circle:hover:not(.disabled) 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 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%);
}
html[data-theme=light] .btn_secondary img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_primary.disabled img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
  opacity: 0.6;
}
html[data-theme=light] .btn_toggle_icon :not(.map) span img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_toggle_icon :not(.map) span.circle_grey32 img, html[data-theme=light] .btn_toggle_icon :not(.map) .circle_grey28.popover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map) span .circle_grey28.icon .img_on {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map):hover span .circle_grey28.popover img, html[data-theme=light] .btn_toggle_icon :not(.map).active span .circle_grey28.popover img, html[data-theme=light] .btn_toggle_icon :not(.map):focus span .circle_grey28.popover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map):hover span .circle_grey28.popover .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).active span .circle_grey28.popover .img_on, html[data-theme=light] .btn_toggle_icon :not(.map):focus span .circle_grey28.popover .img_on {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map):hover img, html[data-theme=light] .btn_toggle_icon :not(.map).active img, html[data-theme=light] .btn_toggle_icon :not(.map):focus img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map) .circle_grey28 .img_on {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map) span .circle_grey28 .icon .img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey32 img, html[data-theme=light] .btn_toggle_icon :not(.map).legend .circle_grey28.popover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover.selected img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:hover:not(.legend) img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:focus img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:active img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover.selected .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:hover:not(.legend) .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:focus .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:active .img_on {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .btn_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%);
}
html[data-theme=light] .diagon_cont {
  filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);
}
html[data-theme=light] .datepicker {
  background-image: url(../images/calendar_gray_24.svg);
}
html[data-theme=light] .datepicker:focus, html[data-theme=light] .datepicker.on {
  background-image: url(../images/calendar_blue_24.svg);
}
html[data-theme=light] .accordion_block div button img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .accordion_block.accord_select .accordion_title.on img, html[data-theme=light] .accordion_block.accord_select .accordion_title.hover img, html[data-theme=light] .accordion_block.accord_select .accordion_title:hover img, html[data-theme=light] .accordion_block.accord_select .accordion_title:focus img, html[data-theme=light] .accordion_block.accord_select .accordion_title.selected img {
  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .action_prev, html[data-theme=light] .action_next {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .stepper_arrow img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
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%);
}
html[data-theme=light] .bt_srch {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .hamberger_btn {
  content: url("../images/hamburger_bk_24.svg");
}
html[data-theme=light] .logo_hd_kisa {
  content: url("../images/logo_light.svg");
}
html[data-theme=light] .light_none img {
  display: none;
}
html[data-theme=light] .lnb_popup_title_bg button img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .btn_fnb_search img {
  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .put_delete img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .selector {
  background-image: url("../images/arrow_down_gray_16.svg");
}
html[data-theme=light] .selector.sm.color {
  background-image: url(../images/arrow_down_light_16.svg);
  background-repeat: no-repeat;
  background-position: 93% 42%;
  background-size: 1rem 1rem;
}
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] .eastside, html[data-theme=light] .westside, html[data-theme=light] .southside, html[data-theme=light] .northside {
  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .mapcontrol_btn {
  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .polygon.black img {
  content: url("../images/Polygon_black_light.svg");
}
html[data-theme=light] .polygon.blue img {
  content: url("../images/Polygon_blue_light.svg");
}
html[data-theme=light] .polygon.purple img {
  content: url("../images/Polygon_purple_light.svg");
}
html[data-theme=light] .polygon.green img {
  content: url("../images/Polygon_green_light.svg");
}
html[data-theme=light] .polygon.yellow img {
  content: url("../images/Polygon_yellow_light.svg");
}
html[data-theme=light] .pass_road img {
  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .light_conceal {
  visibility: hidden;
}
html[data-theme=light] .marker.cctv .img_selected {
  content: url("../images/cctv_light_selected_48.svg");
}
html[data-theme=light] .marker.weather .img_selected {
  content: url("../images/weather_center_light_selected_48.svg");
}
html[data-theme=light] .marker.bus .img_selected {
  content: url("../images/bus_light_selected_48.svg");
}
html[data-theme=light] .marker.depart .img_selected {
  content: url("../images/depart_light_selected_48.svg");
}
html[data-theme=light] .park_sign.danger.on {
  background: url("../images/park_danger_light_on.svg") no-repeat center center;
}
html[data-theme=light] .put_check img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .time_mark20 {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .row_type2 .tac img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .ic_artff {
  background: url("../images/arr_traff_light_16.svg") no-repeat center center;
}
html[data-theme=light] .pg_prev img, html[data-theme=light] .pg_next img {
  filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%);
}
html[data-theme=light] .sign_tri2.jam {
  background: url(../images/sign_jam_light_28.svg) no-repeat center center;
  background-size: contain;
}
html[data-theme=light] .sign_tri2.ambulace {
  background: url(../images/ambulance_light.svg) no-repeat center center;
  background-size: contain;
}
html[data-theme=light] .pos_rel.lightmode {
  opacity: 0;
}
html[data-theme=light] .popup_close img {
  filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%);
}
html[data-theme=light] .wrput.read_success {
  display: none;
}
html[data-theme=light] .circle_g32.pencil img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .upload_btn img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%);
}
html[data-theme=light] .main_contents {
  width: 100%;
  height: 100%;
  background-size: cover;
  background: url("../images/background_light_img.png") no-repeat center center;
}
html[data-theme=light] .main_contents.login_ver1 {
  background: url("../images/login_light_ver1.png") no-repeat;
}
html[data-theme=light] .main_contents.error {
  background: url("../images/error_background_light.png") no-repeat center center;
}
html[data-theme=light] .main_contents.error2 {
  background: url("../images/error2_background_light.svg") no-repeat center bottom;
  background-size: contain;
}
html[data-theme=light] .login_logo {
  content: url("../images/logo_light_big.svg");
}
html[data-theme=light] .light_none {
  display: none;
}
html[data-theme=light] .light_hidden {
  visibility: hidden;
}
html[data-theme=light] .grey_box.login {
  border: 0.063rem solid rgba(255, 255, 255, 0.3);
  background: var(--bg_01_80);
}
html[data-theme=light] .grey_box.login p {
  background: rgba(0, 0, 0, 0.2);
}
html[data-theme=light] .indicator {
  box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);
}

/* html data-theme End */