/*가이드에서만 쓰이는 레이아웃 스타일*/

@charset "utf-8";
@import '_mixin.scss';

:root{
    --bg_02: #04091A;
    --bg_02_template: #050A1F;
    --bg_01:#0A0F24;
    --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};
    --white-w_87: #{$bg_grey87};
    --white-w_87-sec: #{$bg_grey87};
    --white-w_60: #{$bg_grey60};
    --white-w_40: #{$bg_grey40};
    --white-w_40-sec: #{$bg_grey40};
    --white-w_30: #{$bg_grey30};
    --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};
    --line-wh_30-to-60: #{$bg_grey30};
    --line-wh_12-to-100: #{$bg_grey12};
    --line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40);
    --line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40);
    --icon-pri_20-to-100: rgba(34, 212, 255, 0.20);
    --more-bright-wh_16-to-6: #{$bg_grey16};
    --more-bright-wh_12-to-6: #{$bg_grey12};
    --more-visible-wh_20-to-12: #{$bg_grey20};
    --more-visible-wh_6-to-100: #{$bg_grey06};
    --more-visible-wh_6-to-60: #{$bg_grey06};
    --more-visible-wh_6-to-bk: #{$bg_grey06};
    --more-visible-wh_60-to-12: #{$bg_grey60};
    --more-visible-wh_60-to-100: #{$bg_grey60};
    --more-visible-wh_12-to-6: #{$bg_grey12};
    --more-visible-wh_16-to-6: #{$bg_grey16};
    --more-visible-wh_20-to-12: #{$bg_grey20};
    --primary-to-grayscale-to-bk: #{$ui_sky};
    --more-bright-wh_6-to-60: #{$bg_grey06};
    --white-w_6: #{$bg_grey06};
    --line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40);
    --etc-bg: #04091A;
    --etc-popup_tit: rgba(39, 212, 255, 0.60);
    --hero-notification_01: #{$bg_black00};
    --hero-notification_02: #{$bg_black40};
    --hero-notification_03: #{$bg_black40};
    --hero-notification-border-top: rgba(39, 212, 255, 0.00);
    --hero-notification-border-bottom: rgba(39, 212, 255, 0.00);
    --hero-border : rgba(39, 212, 255, 1);
    --background-blur_0260: rgba(56, 61, 82, 0.60);
    --point-error: #D60000;
    --point-error-10: rgba(219, 0, 0, 0.08);
    --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);
    --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: #{$bg_black00};
    --etc-b_text: #338FFF;
    --etc-b_text2: #338FFF;

    // KISA
    --PRI: #84C01D;
    --bg_body: #030914;

}
:root[data-theme=light] {
    --bg_02: #{$fc_white};
    --bg_02_template: #DCDDE0;
    --bg_01: #F5F6FA;
    --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};
    --white-w_87: #{$bg_black87};
    --white-w_87-sec: #{$bg_black00};
    --white-w_60: #{$bg_black60};
    --white-w_40: #{$bg_black40};
    --white-w_40-sec: #{$bg_grey40};
    --white-w_30: #{$bg_black30};
    --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);
    --line-wh_12-to-40: #{$bg_grey40};
    --line-wh_20-to-100: #{$fc_white};
    --line-wh_30-to-60: #{$bg_grey60};
    --line-wh_12-to-100: #{$fc_white};
    --line-pri_40-to-wh_40: #{$bg_grey40};
    --line-pri_40-to-bk_40: #{$bg_black40};
    --icon-pri_20-to-100 : #0067E6;
    --more-bright-wh_16-to-6: #{$bg_black06};
    --more-bright-wh_12-to-6: #{$bg_black06};
    --more-visible-wh_20-to-12: #{$bg_black12};
    --more-visible-wh_6-to-100: #{$fc_white};
    --more-visible-wh_6-to-60: #{$bg_grey60};
    --more-visible-wh_6-to-bk: #{$bg_black00};
    --more-visible-wh_60-to-12: #{$bg_black12};
    --more-visible-wh_60-to-100: #{$bg_black00};
    --more-visible-wh_12-to-6: #{$bg_black06};
    --more-visible-wh_16-to-6: #{$bg_black06};
    --more-visible-wh_20-to-12: #{$bg_black12};
    --primary-to-grayscale-to-bk: #{$bg_black00};
    --more-bright-wh_6-to-60 : #{$bg_grey60};
    --white-w_6: #{$bg_black06};
    --line-pri_40-to-wh_100: #{$fc_white};
    --etc-bg: #{$fc_white};
    --etc-popup_tit: rgba(0, 104, 230, 0.80);
    --hero-notification_01: #{$bg_grey00};
    --hero-notification_02: #{$bg_grey60};
    --hero-notification_03: #{$bg_grey80};
    --hero-notification-border-top: rgba(0, 104, 230, 0.00);
    --hero-notification-border-bottom: rgba(0, 104, 230, 0.00);
    --hero-border: rgba(0, 104, 230, 0.80);
    --background-blur_0260: rgba(56, 61, 82, 0.60);
    --point-error: #D60000;
    --point-error-10: rgba(219, 0, 0, 0.08);
    --blur_02_60: #{$bg_grey90};
    --bg-blur_02_60: rgba(55, 61, 82, 0.60);
    --grade-chart-gco-01: #FC5C34;
    --radio-default: #{$bg_black60};
    --control-disabled: #{bg_grey10};
    --icon-icon-selected: #{$fc_white};
    --group-icon-selected: rgba(51, 143, 255, 0.40);
    --map-ver2-hover: #{$fc_normal_more40};
    --background-blur_02_60: rgba(55, 61, 82, 0.60);
    --background-blur_01_20: rgba(245, 246, 250, 0.90);
    --navigation-bg: #E1E2E5;
    --etc-FNB:rgba(245, 246, 250, 0.90);
    --black-bk_100: #{$fc_white};
    --etc-b_text: #139DF2;
    
    // KISA
    --PRI: #87C718;
    --bg_body: #030914;

}
/*mode button*/
.lightmode > .inner{
    position: relative;
    display: inline-flex;
    padding: 0.313rem;
    border-radius: 1.5em;
    background-color: rgb(237,237,237, 0.3);
    &.template {
        padding: unset;
    }
}
html[data-theme=light] .lightmode > .inner{
    background-color: rgba(0,0,0,0.25);
}
.lightmode label {
    cursor: pointer;
}
.lightmode label:first-of-type{
    padding: 0.313rem 0.313rem 0.313rem 0.625rem;
    border-radius: 50% 0 0 50%;
}
.lightmode label:last-of-type{
    padding: 0.313rem 0.625rem 0.313rem 0.313rem;
    border-radius: 0 50% 50% 0;
}
.lightmode i{
    font-size: 1.2em;
    color: #aaa;
}
.lightmode input[type=radio]{
    display: none;
}
.lightmode input[type=radio]:checked + label > i {
    color: rgba(135, 199, 24, 1);
    transition: all 0.35s ease-in-out;
}
/**/

/*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;
    &.grey{
        background-color: #1A1D29;
    }
    &.two_line{
        padding: 3.75rem 0;
    }
    &.cards{
        background: var(--bg_01);
    }
    &.navigation{
        background: var(--navigation-bg);
    }
}
.guide_center{
    width: 77.5rem;
    margin: 0 auto;
    padding: 1.25rem;
    &.width1720 {
        width: 107.5rem;
    }
}
.guide_top{
    @include dflx_ae_jbet;
    column-gap: 1rem;
    width: 100%;
    height: 4.75rem;
    padding: 0 0 1rem;
    border-bottom: 0.063rem solid var(--white-w_30);
    h1{
        @include fs_40_bold;
        color: #fff;
    }
}
html[data-theme=light] .guide_top{
    h1{
        color: #000;
    }
}
.Gr_contents{
    width: 100%;
    margin: 2.5rem 0 4.375rem;
}
.comp_top{
    @include dflx_ae_jbet;
    column-gap: 1rem;
    width: 100%;
    padding: 0 0 1.875rem;
    h2{
        @include fs_24_bold;
        color: var(--white-w_87);
    }
}
.comp_dl{
    width: 100%;
    display: flex;
    column-gap: 0.75rem;
    margin: 0 0 1.5rem;
}
.comp_dt{
    @include fs_16_medium;
    width: 6.25rem;
    padding: 1.25rem 0 0 0;
}
.comp_dd{
    flex: 1;
}
.compline{
    @include dflx_ac;
    flex-wrap: wrap;
    margin: 0.75rem 0;
    column-gap: 0.5rem;
    &.box{
        background: var(--white-w_6);
    }
}
.comp_size{
    @include fs_12_regular;
    color: $bg_grey60;
    width: 2.5rem;
    text-align: center;
}
.components{
    @include dflx_ac;
    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);
    &.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;
    }
    &.hide {
        .notification_bg {
            min-height: 0;
            height: 0;
            border-width: 0.063rem 0 0 0;
        }
        .btn_notification {
            transform: rotate(180deg);
        }
    }
}
.board_line {
    &.signal {
        &.right {
            position: absolute;
            display: flex;
            top: 3.5rem;
            right: 1.25rem;
            z-index: 100;
        }
    }
}
.box_line {
    &.left {
        position: absolute;
        top: 3.5rem;
        left: 1.25rem;
        z-index: 100;
    }
    &.right {
        position: absolute;
        top: 3.5rem;
        right: 1.25rem;
        z-index: 100;
    }
}
.infowindow_box {
    &.main {
        top: auto;
        bottom: calc(100% + 0.125rem) !important;
        left: 50%;
        transform: translate(-50%, 0);
        position: absolute;
        background: var(--bg_01);
        border: 0.063rem solid var(--line-pri_40-to-wh_100) !important;
        .infowindow_title {
            color: var(--white-w_87-sec);
        }
    }
}
.label_tag {
    &.main_label {
        background: var(--white-w_30)
    }
    &.main_info {
        background: var(--white-w_30)
    }
}
// scroll
.scroll {
    &.sc_y {
        &.table {
            height: 8.25rem;
            padding: 0;
        }
        &.signal {
            padding: 0;
            margin-right: 0.5rem;
        }
    }
}
// accordion
.accordion_paragraph {
    &.signal {
        padding: 0 0.75rem 1.25rem 1.25rem;
        height: 16.75rem;
    }
}
.footer_in {
    @include dflx_as_jbet;
    width: 100%;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-bottom: 1.25rem;
}
// table
.table_box {
    &.signal {
        tr {
            &.selected, &:focus, &.hover {
                background: var(--primary-pri_12);
            }
        }
        th {
            position: static;
            //height: 2.25rem;
            height: 2rem;
        }
        th, td:not(.disable), td:not(.disabled) {
            border-right: 0.063rem solid rgba(255, 255, 255, 0.12);
            &:last-child {border-right: 0;}
        }
        td {
            height: 1.75rem;
            //height: 2.25rem;
            //border-top: 0.188rem solid $bg_default !important;
            border-top: 0.125rem solid var(--etc-bg) !important;
            p { 
                text-align: center !important;
                cursor: pointer;
            }
        }
    }
}
.user_table {
    @include fs_13_regular;
    color: var(--white-w_87-sec);
    width: 100%;
    border-collapse:separate; 
    border-spacing: 0 0.125rem;
    tr {
        //background: var(--more-visible-wh_16-to-6);
        &.selected,
        &:hover, &:focus, &.hover {
            //background: rgba(39, 212, 255, 0.2);
            background: var(--primary-pri_12);
        }
    }
    th {
        position: relative;
        z-index: 1;
        top: 0;
        height: 2.25rem;
        background: $bg_grey16;
        background: var(--more-visible-wh_6-to-100);
        background: var(--more-visible-wh_16-to-6);
        //background: #2c313f;
        font-weight: 500;
    }
    th, td {
        border-right: 0.063rem solid var(--white-w_12);
        &:last-child {border-right: 0;}
    }
    td {
        height: 2.25rem;
        border-top: 0.188rem solid transparent !important;
    }
    td.on {
        background: rgba(39, 212, 255, 0.2);
    }    
    .row_type1 {        
        background: $bg_grey16;
    }
    // 표 색상
    .row_type2 {
        background: var(--more-visible-wh_6-to-100);
    }
    .row_error {
        background: rgba(219, 0, 0, 0.08);
        color: #FF1F55;
    }
}
.arrow {
    &.left {transform: rotate(180deg);}
    &.up {transform: rotate(270deg);}
    &.down {transform: rotate(90deg);}
}
.grey_box {
    @include dflx;
    @include backFilter;
    top: 33%;
    left: 30%;
    &.login {
        z-index: 0;
        width: 44.563rem;
        padding: 3rem;
        border-radius: 0.125rem;
        border: 0.063rem solid $bg_grey12;
        background: rgba(162, 164, 184, 0.20);
        backdrop-filter: blur(3.75rem);
        p {
            position: relative;
            z-index: 200;
            width: 0.063rem;
            background: rgba(255, 255, 255, 0.20);
            align-self: stretch;
        }
    }
    &.error {
        display: block;
        z-index: 0;
        width: 44.563rem;
        padding: 5rem;
        border-radius: 0.125rem;
        border: 0.063rem solid rgba(255, 255, 255, 0.30);
        //background: var(--bg_01_80);
        background: var(--background-blur_01_20);
        backdrop-filter: blur(3.75rem);
        opacity: 1;
    }
}
.error_box {
    @include dflx;
    @include backFilter;
    position: absolute;
    padding: 3rem;
    top: 33%;
    left: 30%;
    z-index: 0;
    width: 44.563rem;
    height: 18.25rem;
    border-radius: 0.125rem;
    border:  0.063rem solid rgba(255, 255, 255, 0.21);
    background: rgba(162, 164, 184, 0.20);
    backdrop-filter: blur(3.75rem);
}
.marker_main {
    position: absolute;
    bottom: 40%;
    left: 50%;
}
.indicator{
    &.main {
        padding: 1.25rem 0.6rem 1.25rem 1.25rem;
    }
    &.signal {
        padding: 0;
    }
}
.indi_conts {
    &.del {display: none}
    &.signal {margin: 0}
}
.tmbox_text {
    @include fs_14_medium;
    line-height: 1.3;
    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;
    .member_popover{
        display: none;
    }
    &.profile_open{
        .member_popover, .member_toggle{
            display: block;
        }
        .btn_profile .comma_under8 {
            opacity: 1;
            transform: rotate(180deg);
        }
        .profile20{
            opacity: 1;
        }
    }
}
// 마커
.marker_img_selected {
    display: none;
}
.marker_main {
    .tooltip_parents, .infowindow_box.main.on{
        display: none;
    }
    &.marker_hide {
        .tooltip_parents, .infowindow_box.main.on{
            display: block;
        }
        .img_off {display: none !important;}
        .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;
        &.legend {
            display: block;
        }
        &.pop {
           display: block;
        }
        &.pop_hide {
            display: none;
        }
    }
}
// 신호최적화
.signal_board {
    width: 100%;
    height: 100%;
}
.signal_content {
    @include dflx_ac_jcent;
    column-gap: 1rem;
    width: 100%;
    height: 100%;
    background: var(--bg_02_template);
}
.signal_body {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url("../images/signal_body_img.png");
    background-repeat: no-repeat;
    background-size : cover !important;
}
.accordion_box {
    position: absolute;
    margin-top: 0.5rem;
}
.indi_top {
    &.signal {
        height: 3.5rem;
        padding: 1.25rem 1rem 1.25rem;
    }
}
.signal_dl {
    @include dflx_ac;
    //width: 100%;
    margin: 0.5rem 0;
    &:last-child {
        margin-bottom: 0;
    }
    dt {
		@include fs_13_light;
		@include dflx_jbet;
        width: 4rem;
        padding: 0 1rem 0 0;
        color: var(--white-w_87-sec);
    }
    dd {
        @include dflx_ac_jbet;
        flex: 1;
		column-gap: 0.25rem;
        .wrput{
            width: 100%;
        }
        .ch_radio:last-child{
            padding: 0;
        }
    }
    &.check {
        margin: 1rem 0;
    }
}
// accordion
.accordion_block {
    // 포인트
    &.signal {
        @include backFilter;
        .accordion_title:hover:not(.levle2), .hover.accordion_title,
        .accordion_title:focus {
            background: var(--primary-pri_20);
            cursor: pointer;
        }
        .accordion_title {
            background: var(--primary-pri_20);
            &:hover:not(.disabled),
            &:hover:not(.point.disabled),
            &:focus:not(.disabled) {
                background: var(--primary-pri_20);
            }
        }
        .accordion_contents {
            background: rgba(255, 255, 255, 0.06);
        }
        .accordion_contents.signal {
            padding: unset;
        }
    }
}
// map label
.map_label_line {
    @include dflx_ac_jcent;
    position: absolute;
    width: 100%;
    bottom: 1.5rem;
    padding: 0.125rem 0.75rem;
}
.map_label {
    @include fs_20_bold;
    width: auto;
    padding: 0.125rem 0.75rem 0.25rem;
    background-color: #0B1129;
    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);
    backdrop-filter: blur(1.875rem);
    padding: 0 1.25rem 1.25rem 1.25rem;
}
.record_title {
    @include fs_16_bold;
    width: 100%;
    padding: 1.25rem 1rem 1rem 0;
    color: var(--primary-to-grayscale-to-bk);
}
.record_box_content {
    display: flex;
    column-gap: 1rem;
    width: 100%;
    height: calc(100% - 3.25rem);
}
.record_grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr;
    grid-template-rows: 8.125rem auto;
    column-gap: 1rem;
    row-gap: 1rem;
    width: 100%;
    height: 100%;
}
.record_top {
    display: grid;
    grid-column-gap: 1rem;
    width: 9rem;
}
.chart_cont_box {
    height: 100%;
    width: 9rem;
}
.diagon_cont_box {
    display: grid;
    grid-column-gap: 1rem;
}
.diagon_cont {
    &.record {
        width: 9rem;
        height: 4.875rem;
    }
}
.situation_box {
    padding: 0.75rem;
    border-radius: 0.125rem;
    background: var(--more-visible-wh_6-to-100);
    &.chart {
        @include dflx_dcol_jbet;
        grid-row: 1/3;
    }
    &.case1 {
        grid-row: 1/2;
        grid-column: 5/6;
    }
    &.case2 {
        grid-row: 1/2;
        grid-column: 6/7;
    }
    &.event {
        display: grid;
        grid-column: 5/7;
        grid-template-columns: 1.5fr 1fr;
    }
    h4{
        @include fs_14_medium;
        color: var(--white-w_87-sec);
    }
}
.case_wrap {
    @include dflx;
    column-gap: 0.5rem;
    width: 100%;
    height: calc(100% - 1.125rem);
}
.case_box {
    padding: 0.25rem;
    border-radius: 0.125rem;
    background: var(--white-w_6);
    width: 100%;
    .case_number {
        @include dflx_ac_jcent;
        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);
    column-gap: 0.5rem;
    row-gap: 0.5rem;
}
.chart_box {
    @include dflx_ac_jcent;
    height: calc(100% - 0.875rem);
    column-gap: 2.5rem;
}
.rate_content {
    display: grid;
    row-gap: 1rem;
    height: calc(100% - 3.25rem);
}
.rate_box {
    width: 100%;
    height: 100%;
    padding: 0.75rem;
    border-radius: 0.125rem;
    background: var(--more-visible-wh_6-to-100);
}
.ch_label{
    @include dflx_ac;
    .word{
        @include fs_11_regular;
        color: var(--white-w_87-sec);
        margin: 0.25rem 0 0.25rem 0.25rem;
        line-height: 1.1;
        word-break: keep-all
    }
}
.chart_cont{
    @include dflx_ac_jcent;
    position: relative;
    width: 9rem;
    height: 4.891rem;
    padding: 0.5rem;
    overflow: hidden;
    background: url(../images/bg_tract.svg) no-repeat left top;
    background-size: 100% 100%;
    .chart_tlt {
        position: absolute;
        left: 1.25rem;
        top: 1.25rem;
        margin-bottom: 0.5rem;
    }
    .chart_result{
        padding: 1rem 0 0;
    }
}
.chart_tlt {
    @include fs_14_medium;
    color: $ui_sky;
    &.cover {
        width: 86%;
        padding: 0.75rem 0 0 0.75rem;
        background: url(../images/bg_tract_top.svg) no-repeat left top;
        background-size: 100% auto;
    }
}
.chart_result {
    @include dflx_ae;
    color: $ui_sky;
    font-size: 1.5rem;
    font-weight: 700;
    column-gap: 0.375rem;
    .unit{
        @include fs_14_regular;
        line-height: 1.7;
    }
}
// check box
.record_radio {
    @include dflx_ac;
    cursor: pointer;
    .word {
        color: var(--white-w_87-sec);
    }
    &.on {
        .radio {
            background-color: #fff;
            border: 0.25rem solid #27d4ff;
        }
        .word {
            color: var(--white-w_87-sec);
        }
    }
    .radio {
        display: inline-block;
        width: 0.9375rem;
        height: 0.9375rem;
        background-color: rgba(255, 255, 255, 0.7);
        border-radius: 100%;
        margin: 0 0.5rem 0 0;
        &.mini{
            width: 0.625rem;
            height: 0.625rem;
            border: 0.125rem solid #27d4ff;
            margin: 0 0.375rem 0 0;
        }
        &.green {border: 0.125rem solid #16D9AB}
        &.blue {border: 0.125rem solid #07F}
        &.dark_blue {border: 0.125rem solid #0E44E5}
        &.purple {border: 0.125rem solid #8972FF}
        &.dark_purple {border: 0.125rem solid #6E3DFF}
    }
    .word {
       	@include fs_11_light;
    }
}
// 사용자 관리 user
.user_wrap {
    width: 100%;
    height: 100%;
    padding-top: 2.5rem;
}
.user_content {
    display: flex;
    column-gap: 1rem;
    width: 100%;
    height: 100%;
    padding: 1.25rem;
}
.personal_box, .system_box {
    @include backFilter;
    width: 100%;
    height: 100%;
    border: 0.063rem solid 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 {
    @include backFilter;
    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 {
    @include dflx_ac_jbet;
    flex-wrap: wrap;
}
.user_title {
    @include fs_16_bold;
    color: var(--primary-to-grayscale-to-bk);
    height: 1.5rem;
}
.user_btn {
    height: 1.75rem;
    padding: 0.5rem 0;
    word-break: keep-all;
}
// error
.error_logo {
    position: absolute;
    top: -10%;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: 1;
}
// logo
.logo_login {
    width: 12.5rem;
}
// 프로필
.hd_profile {
    position: relative;
    width: 1.875rem;
    height: 1.25rem;
    .member_popover {
        display: none;
    }
    &.profile_open {
        .member_popover, .member_toggle {
            display: block;
        }
        .btn_profile .comma_under8 {
            opacity: 1;
            transform: rotate(180deg);
        }
        .profile20{
            opacity: 1;
        }
    }
}
// login
.login_title {
    color: var(--white-w_100-sec);
}
// font
.white_w_87 {color: var(--white-w_87) !important}
.white_w_bk {color: var(--white-w_87-sec) !important}
.white_ff_bk {color: var( --white-w_100-sec) !important}
// 반응형
@media screen and (min-width: 2400px) {
    body, html {
        font-size: 1.2rem;
    }
    .indi_vert432{
        height: auto;
    }
}

@media screen and (min-width: 3800px) {
    body, html {
        font-size: 1.7rem;
    }
}

/* html data-theme */
html[data-theme=light] {
    header{
       // background: #F3F5FD;
       // border-bottom: 0.063rem solid $bg_grey20;
    }
    .sp_logo_uniplus{
        background: url('../images/logo_uniplus_light.svg') no-repeat left center;
        background-size: cover;
    }
    .gnb {
        ul li a {
            color: var(--more-visible-wh_60-to-100);
            &.on, &:hover, &:focus {
                color: $ui_blue_more;
            }
        }
    }
    .guide_top h1{color: #000;}

    //img filter
    button{
        &.mode{
            img {@include filter_black}
            .img_on {@include filter_blue}
        }
        &:hover:not(.hover):not(.legend):not(.selected):not(.disabled), &:active ,&.selected {
            .circle_grey28.popover {
                img {@include filter_white}
                .img_on {@include filter_white}
            }
        }
    }
    .btn_srch28{
        span img:not(.on){@include filter_black}
        &.mode{
            &:active{
                img{filter: none;}
            }
        }
        &:active:not(.selected) {
            span img:not(.on){@include filter_white}
        }
    }
    .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 {
        img {@include filter_black}
        
        &.selected, &:hover:not(.disabled){
            img {@include filter_black}
        }
        &.disabled{
            // img {@include filter_white}
        }
    }
    .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;}
    }
    .btn_secondary {
        img {
            @include filter_black;
        }
    }
    .btn_primary.disabled {
        img {
            @include filter_black;
            opacity: 0.6;
        }
    }
    .btn_toggle_icon :not(.map) {
        span img {@include filter_black}
        span.circle_grey32, .circle_grey28.popover {
            img {@include filter_white}
        }
        span .circle_grey28.icon {
            .img_on {@include filter_white}
        }
        &:hover, &.active, &:focus {
            span .circle_grey28.popover {
                img{@include filter_white}
                .img_on {@include filter_white}
            }
            img {@include filter_white}
        }
        .circle_grey28 {
            .img_on {@include filter_white}
        }
       
        span .circle_grey28 .icon {
            .img {@include filter_white}
        }
        &.legend {
            span.circle_grey32, .circle_grey28.popover {
                img {@include filter_white}
            }
            span.circle_grey28.popover {
                img{@include filter_white}
                &.selected, &:hover:not(.legend), &:focus, &:active {
                    img {@include filter_white}
                    .img_on {@include filter_white}
                }
            }
        }
    }
    // Icon Button 
    .btn_toggle_icon {
        .circle_grey28.icon {
            .img {@include filter_black}
            .img_on {@include filter_white}
        }
        .circle_grey32.line {
            .img {@include filter_black}
            .img_on {@include filter_white}
        }
        &.selected {
            .img {@include filter_black}
            .img_on {@include filter_white}
        }
    }
    .btn_file, .preview_box {
        img{@include filter_black}
    }
    .circle32.icon {
        img{@include filter_black}
    }
    .icon_ffb, 
    .btn_icon {
        img {@include filter_black}
        &.selected, &:hover, &:active, &:focus {
            img {@include filter_blue}
        }
    }
    .arr_up, .arr_right {
        img {@include filter_black}
    }
    .diagon_cont {filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);}
    .datepicker {
        background-image: url(../images/calendar_gray_24.svg);
        &:focus, &.on {
            background-image: url(../images/calendar_blue_24.svg);
        }
    }
    .accordion_block {
        div {
            button {
                img {@include filter_black}
            }
        }
    }
    .accordion_block {
        &.accord_select {
            .accordion_title {
                &.on, &.hover, &:hover, &:focus, &.selected {
                    img {@include filter_blue}
                }
            }
        }
    }
    // pagination
    .btn_pagination{
        img {@include filter_black}
    }
    .accordion_title {
        div{
            img{@include filter_black;}
        }
        div.on{
            img{
                filter: brightness(0) saturate(100%) invert(25%) sepia(93%) saturate(1829%) hue-rotate(200deg) brightness(98%) contrast(107%);
            }
        }
    }
    .toggle {
        img {@include filter_black}
        &.on {
            img {@include filter_blue}
        }
    }
    .popover_close{
        img {@include filter_black}
    }
    .tree_button {
        button {
            img {@include filter_blue}
        }
    }
    .mark_trig_down12 {
        @include filter_black;
        background: url('../images/triangle_down12.svg') no-repeat center center;
        background-size: contain;
    }

    // sp_icon
    .sp_search24{
        background: url('../images/search_fff_24_light.svg') no-repeat center center;
        background-size: cover;
    }
    .sp_download20{
        background: url('../images/icon_download_20_light.svg') no-repeat center center;
        background-size: cover;
    }
    .sp_cctv20{
        background: url('../images/icon_camera_20_light.svg') no-repeat center center;
        background-size: cover;
    }
    .btn_toggle_icon{
        &:hover:not(.legend), &:focus, &.selected{
            .sp_cctv20{
                background: url('../images/icon_camera_sky_20_light.svg') no-repeat center center;
                background-size: cover;
            }
        }
    }
    .sp_x20{
        background: url('../images/icon_x_20_light.svg') no-repeat center center;
        background-size: cover;
    }
    .sp_layer24{
        background: url('../images/layer_fff_24_light.svg') no-repeat center center;
        background-size: cover;
        opacity: 1 !important;
    }
    .icon_ffb{
        &:hover, &.selected{
            .sp_layer24{
                background: url('../images/layer_sky_24_light.svg') no-repeat center center;
                background-size: cover;
            }
        }
    }
    .checkbox_type:not(.login) {
        input[type=checkbox]:checked + label {
            &:after 
            {
                background: url(../images/checkbox_accordion_20.svg) center no-repeat;
            }
        }
    }
    .card_box{
        &.dark {background: var(--white-w_6);}
    }
    .photo_circle{
        img{
            filter: brightness(0) saturate(100%) invert(70%) sepia(34%) saturate(0%) hue-rotate(73deg) brightness(100%) contrast(97%);
        }
    }
    .tree_button.check{
        button{
            img {@include filter_blue}
        }
    }
    .btn_notification{
        img {@include filter_blue}
    }
    .profile_box {
        @include filter_black
    }

    //date picker
    .action_prev, .action_next {
        @include filter_black
    }
    .stepper_arrow{
        img{@include filter_black}
    }
    .play_circle{
        img{
           content: url("../images/play_circle_light_20.svg");
        }
    }
    .play_btn, .playbar_current, .pagination_btn, .pg_prev {
        img {@include filter_blue}
    }
    .pause_btn, .again_btn {
        img {@include filter_black}
    }
    // select arrow
    .selectbox_arrow, .selectbox, .selectboxSample  {
        img {@include filter_black}
    }
    //table
    .bt_srch{
        @include filter_black
    }
    // navigation
    .logo_hd_uniplus{
        content:  url("../images/gnb_logo_light.svg");
    }
    .light_none{
        img{
            display: none;
        }
    }
    .lnb_popup_title_bg {
        button{
            img {@include filter_black}
        }
    }
    .btn_fnb_search{
        img {@include filter_blue;}
    }
    .put_delete{
        img {@include filter_black}
    }
    .selector { 
        background-image: url("../images/arrow_down_gray_16.svg");
        &.sm {
            &.color{
                background-image: url(../images/arrow_down_light_16.svg);
                background-repeat: no-repeat;
                background-position: 93% 42%;
                background-size: 1rem 1rem;
            }
        }
    }
    .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")
        }  
    }
    // 3d map
    .eastside, .westside, .southside, .northside{@include filter_blue;}
    .mapcontrol_btn {@include filter_blue;}

    // polygon
    .polygon{
        &.black{
            img{
                content: url("../images/Polygon_black_light.svg");
            }
        }
        &.blue{
            img{
                content: url("../images/Polygon_blue_light.svg");
            }
        }
        &.purple{
            img{
                content: url("../images/Polygon_purple_light.svg");
            }
        }
        &.green{
            img{
                content: url("../images/Polygon_green_light.svg");
            }
        }
        &.yellow{
            img{
                content: url("../images/Polygon_yellow_light.svg");
            }
        }
    }
    .pass_road{
        img{@include filter_blue}
    }
    .light_conceal {
        visibility: hidden;
    }
    .marker.cctv {
        .img_selected{
            content: url("../images/cctv_light_selected_48.svg");
        }
    }
    .marker.weather {
        .img_selected{
            content: url("../images/weather_center_light_selected_48.svg");
        }
    }
    .marker.bus {
        .img_selected{
            content: url("../images/bus_light_selected_48.svg");
        }
    }
    .marker.depart {
        .img_selected{
            content: url("../images/depart_light_selected_48.svg");
        }
    }
    .park_sign.danger.on {
        background: url("../images/park_danger_light_on.svg") no-repeat center center;
    }
    .put_check {
        img {@include filter_black}
    }
    .time_mark20 {@include filter_black}
    // table
    .row_type2{
        .tac{img{@include filter_black}}
    }
    // card pattern
    .ic_artff{
        background: url('../images/arr_traff_light_16.svg') no-repeat center center;
    }
    .pg_prev, .pg_next {
        img{@include filter_blue}
    }
    .sign_tri2 {
        &.jam {
            background: url(../images/sign_jam_light_28.svg) no-repeat center center;
            background-size: contain;
        }
        &.ambulace{
            background: url(../images/ambulance_light.svg) no-repeat center center;
            background-size: contain;
        }
    }
    // input
    .pos_rel.lightmode{
        opacity: 0;
    }
    .popup_close{
        img{@include filter_white}
    }
    .wrput {
        &.read_success {
            display: none;
        }
    }
    // card
    .circle_g32.pencil{
        img {@include filter_black}
    }
    // upload
    .upload_btn{
        img{@include filter_black;}
    }
    // template
    .main_contents {
        width: 100%;
        height: 100%;
        background-size : cover;
        background: url("../images/background_light_img.png") no-repeat center center;
        &.ver2 {
            background: url("../images/background_ver2.png") no-repeat center center;
            background-size : cover;
        }
        &.ver3 {
            background: url("../images/background_ver3.png") no-repeat center center;
            background-size : cover;
        }
        &.ver4 {
            background: url("../images/background_img.png") no-repeat center center;
            background-size : cover;
        }
        &.login {
            background: url("../images/login_background_light.png") no-repeat;
        }
        &.error {
            background: url("../images/error_background_light.png") no-repeat center center;
        }
        &.error2 {
            background: url("../images/error2_background_light.svg") no-repeat center bottom;
            background-size: contain;
        }
    }
    .main_traffic {
        img {
            content: url("../images/main_traffic_light.svg") no-repeat;
        }
    }
    .signal_body {
        background-image: url("../images/signal_body_light.png");
    }
    .img_off.marker {
        content: url("../images/car_accident_light_56.svg");
    }
    .marker_img_selected {
        content: url("../images/car_accident_selected_light_56.svg");
    }

    // 신호최적화
    .arrow {
        img {@include filter_black}
    }
    .arrow_right_2line {
        img {@include filter_blue}
    }
    
    // 상황관리이력
    .chart_cont.record {filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);}
    
    // login
    .logo_login {
        content:  url("../images/login_logo_light.svg");
    }

    // input
    .wrput {
        &.read_success{
            display: none;
        }
    }
    // light모드 display none
    .light_none {
        display: none;
    }
    .light_hidden {
        visibility: hidden;
    }

    .grey_box.login{
        border: 0.063rem solid $bg_grey30;
        background: var(--bg_01_80);
        p{
            background: $bg_black20;
        }
    }
    .indicator {box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);}
}
/* html data-theme End */