/*공통으로 쓰일 스타일*/

@import '_mixin.scss';

.cl{clear:both;}
.tal{text-align: left !important;}
.tar{text-align: right !important;}
.tac{text-align: center !important;}
.tae{text-align: end !important;}
.hauto{height: auto !important;}
.wauto{width: auto !important;}
.as_start {align-self: start;}
.as_center {align-self: center;}
.ai_center {align-items: center;}
.ai_end {align-items: flex-end;}
.valign_top {vertical-align: top;}
.flex1 {flex: 1}
.fs_bold {font-weight: 700 !important;}
.fs_medium{font-weight: 500;}
.one_full {width: 100% !important;}
.op00 {opacity: 0 !important;}
.op02 {opacity: 0.2 !important;}
.op04 {opacity: 0.4 !important;}
.op06 {opacity: 0.6 !important;}
.op10 {opacity: 1 !important;}
.dpblock{display: block !important;}
.dpnone{display: none !important;}
.posrel{position: relative !important}
.posab{position:absolute !important}
.ab_trans_center{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}
.lh_28 {line-height: 1.75rem !important}
.lh_21 {line-height: 1.3125rem !important}
.lh_18 {line-height: 1.125rem !important}
.lh_16 {line-height: 1rem !important}
.ls_3 {letter-spacing: 0.1875rem;}
.blind {position:absolute;overflow:hidden;clip:rect(0 0 0 0);margin:-0.063rem;width:0.063rem;height:0.063rem;}
.bd_left1{
    border: none !important;
    border-left: 0.1rem solid $bg_grey20 !important;
}
.bd_right1{
    border: none !important;
    border-right: 0.1rem solid $bg_grey20 !important;
}
.bd_sky{
    border: 0.063rem solid #27D4FF !important;
}

/* placeholder */
input::placeholder,
textarea::placeholder {
    color:var(--white-w_40);
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:var(--white-w_40);
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color:var(--white-w_40);
}
input:-moz-input-placeholder,
textarea:-moz-input-placeholder {
    color:var(--white-w_40);
}
input[type=password]{
    letter-spacing: 0.063rem;
}
/*scroll*/
.scroll, .textarea {
    overflow: overlay;
    &.sc_y{
        overflow: hidden;
        overflow-y: auto;
        padding: 0 0.5rem 0 0;
        &.main{
            max-height: 23.438rem;
        }
        &.user {
            max-height: calc(100% - 2.125rem);
        }
    }
}
.scroll::-webkit-scrollbar {
    width: 0.25rem;
    height: 0.25rem;
}
.textarea::-webkit-scrollbar {
    width: 0.125rem;
    height: 0.125rem;
}
.scroll::-webkit-scrollbar-thumb,
.textarea::-webkit-scrollbar-thumb {
    background-color: #ddd;
    background-color: $bg_grey38;
    background-color: var(--white-w_40);
    border-radius: 0;
}
.scroll::-webkit-scrollbar-track,
.textarea::-webkit-scrollbar-track {
    background-color: none;
}
.scroll::-webkit-scrollbar-corner,
.textarea::-webkit-scrollbar-corner {
    background-color: transparent;
}
// scroll menu
.overflow_y {
    overflow-y: auto;
    &::-webkit-scrollbar {
        width: 0.25rem;
    }    
    &::-webkit-scrollbar-thumb {
        background: var(--white-w_40);
        border-radius: 0.625rem;
    }
    &::-webkit-scrollbar-track {
        background-color: none;
    }
    &::-webkit-scrollbar-corner {
        background-color: transparent;
    }
}

// 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}
.text_error {color:$bg_error !important}
.fc_black99 {color: $bg_black99 !important}
.fc_black60 {color: $bg_black60 !important}
.fc_black87 {color: $bg_black87 !important}
.fc_black40 {color: $bg_black40 !important}
.fc_blackcc {color: $bg_blackcc !important}
.bg_blackde {color:$bg_blackde !important}
.fc_error {color: $fc_error !important}
.fc_999 {color: $fc_999 !important}
.fc_222 {color: $fc_222 !important}
.fc_grey99 {color: $bg_grey99 !important}
.fc_grey87 {color: $bg_grey87 !important}
.fc_grey60 {color: $bg_grey60 !important}
.fc_grey50 {color: $bg_grey50 !important}
.fc_grey40 {color: $bg_grey40 !important}
.fc_grey38 {color: $bg_grey38 !important}
.fc_grey30 {color: $bg_grey30 !important}
.fc_grey20 {color: $bg_grey20 !important}
.fc_grey10 {color: $bg_grey10 !important}
.fc_grey06 {color: $bg_grey06 !important}
.fc_white {color: $fc_white !important}

// font size
.fs_24_bold {@include fs_24_bold}
.fs_24_medium {@include fs_24_medium}
.fs_20_medium {@include fs_20_medium}
.fs_18_bold {@include fs_18_bold}
.fs_18_medium {@include fs_18_medium}
.fs_16_bold {@include fs_16_bold}
.fs_16_medium {@include fs_16_medium}
.fs_16 {@include fs_16_regular}
.fs_14_bold {@include fs_14_bold}
.fs_14_medium {@include fs_14_medium}
.fs_14 {@include fs_14_regular}
.fs_14_light {@include fs_14_light}
.fs_13_medium {@include fs_13_medium}
.fs_13 {@include fs_13_regular}
.fs_12_medium {@include fs_12_medium}
.fs_12 {@include fs_12_regular}
.fs_11_medium {@include fs_11_medium}
.fs_11 {@include fs_11_regular}
.fs_10 {@include fs_10_regular}

// bg, border
.border_radius50 {
    @include border_radius50;
}
.border_radius0 {
    -webkit-border-radius: 0 !important;
    -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;}

.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}

// 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_grey50 {background: $bg_grey50}
.bg_grey40 {background: $bg_grey40}
.bg_grey30 {background: $bg_grey30}
.bg_grey20 {background: $bg_grey20}
.bg_grey16 {background: $bg_grey16}
.bg_grey10 {background: $bg_grey10}
.bg_grey06 {background: $bg_grey06}
.bg_black40 {background: $bg_black40}
.bg_purple {background: rgba(255, 0, 255, 0.4);}
.bg_greyf5 {background: $bg_greyf5}
.bg_greye0 {background: $bg_greye0}

// grade color
.grade_color01 {background: #850404}
.grade_color02 {background: #B31212}
.grade_color03 {background: #E62222}
.grade_color04 {background: #FC5C34}
.grade_color05 {background: #FF8000}
.grade_color06 {background: #F0A800}
.grade_color07 {background: #51B448}
.grade_color08 {background: #009961}
.grade_color09 {background: #0085D8}
.grade_color10 {background: #0068E6}
.grade_color11 {background: var(--white-w_40)}
.gradeko_color02 {background: #008FB2}
.grade_color12 {background: #D60000}
.grade_color13 {background: #008C69}

// rainbow color
.rainbow_color01 {background: #9DFFBE}
.rainbow_color02 {background: #55FAA7}
.rainbow_color03 {background: #16D9AB}
.rainbow_color04 {background: #00CBCB}
.rainbow_color05 {background: #27D4FF}
.rainbow_color06 {background: #16A3E9}
.rainbow_color07 {background: #0077FF}
.rainbow_color08 {background: #0E44E5}
.rainbow_color09 {background: #0A2ACC}
.rainbow_color10 {background: #4D4DFF}
.rainbow_color11 {background: #6734FF}
.rainbow_color12 {background: #8972FF}
.rainbow_color13 {background: #B5A6FF}
.rainbow_color14 {background: #D4CCFF}

// label color
.label_color01 {background: #51B448}
.label_color02 {background: #009961}
.label_color03 {background: #00A396}
.label_color04 {background: #0EA3FF}
.label_color05 {background: #1683FF}
.label_color06 {background: #0068E6}
.label_color07 {background: #114FE8}
.label_color08 {background: #1638E0}
.label_color09 {background: #4239EA}
.label_color10 {background: #6440F5}
.label_color11 {background: #7856FE}
.label_color12 {background: #9175FF}
.label_color13 {background: #7230DF}
.label_color14 {background: #8D12B2}
.label_color15 {background: #B81265}
.label_color16 {background: $bg_grey12}
.label_color17 {background: #07F}

// dust color 
.dust_color01 {background: #139DF2}
.dust_color02 {background: #1CBD6D}
.dust_color02_1{background: #82D971}
.dust_color03 {background: #F0A800}
.dust_color03_1{background: #FC8A18}
.dust_color03_2{background: #FC5C34}
.dust_color04 {background: #E62222}

/* flex */
.dflx{
    display: flex;
}
.dflx_as {
	display: flex;
	align-items: flex-start;
}
.dflx_ac {
	display: flex;
	align-items: center;
}
.dflx_ae {
	display: flex;
	align-items: flex-end;
}
.dflx_jbet {
	display: flex;
	justify-content: space-between;
}
.dflx_jard {
	display: flex;
	justify-content: space-around;
}
.dflx_jstart {
	display: flex;
	justify-content: flex-start;
}
.dflx_dcol_jbet {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.dflx_jcent {
	display: flex;
	justify-content: center;
}
.dflx_jend {
	display: flex;
	justify-content: flex-end;
}
.dflx_ac_jcent {
	display: flex;
	align-items: center;
	justify-content: center;
}
.dflx_as_jbet {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}
.dflx_ac_jbet {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.dflx_ae_jbet {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
.dflx_ac_jend {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* grid */
.flow_hidden {overflow: hidden !important}
.display_none {display: none !important}
.display_block {display: block !important}
.display_grid {
    display: grid;
}
.dflx_ac_jc_full {
    @include layout_acjc;
    display: flex;
    flex: auto;
    height: 100%;
}
.display_flex {
    display: flex;
}
.dflx_column {
    display: flex;
    flex-direction: column !important;
}
.flex_column {
    flex-direction: column !important;
}
.grid_column1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
}
.grid_column2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.grid_column3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.grid_column4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.grid_column5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}
.grid_column6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.gird_column8 {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
}
.gird_column10 {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
}
.gird_column11 {
    display: grid;
    grid-template-columns: repeat(11, 1fr);
}
.gird_column13 {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
}
.gird_column14 {
    display: grid;
    grid-template-columns: repeat(14, 1fr);
}
.layout_acjc {@include layout_acjc}
.layout_acjb {@include layout_acjb}
.layout_ac {align-items: center;}
.layout_as {align-items: flex-start}
.align_end {align-self: flex-end}

.column_1 {width: 100% !important}
.column_2 {width: 50% !important}
.column_3 {width: calc(100% / 3)}
.column_4 {width: 25%}
.column_5 {width: 20%}
.column_6 {width: calc(100% / 6)}
.column_7 {width: calc(100% / 7)}
.column_8 {width: calc(100% / 8)}
.column_9 {width: calc(100% / 9)}
.column_10 {width: 10%}
.column_11 {width: calc(100% / 11)}
.column_12 {width: calc(100% / 12)}

.gap_0 {gap:0 !important}
.gap_1 {gap:0.0625rem}
.gap_2 {gap:0.125rem}
.gap_3 {gap:0.1875rem}
.gap_4 {gap:0.25rem}
.gap_5 {gap:0.3125rem}
.gap_6 {gap: 0.375rem;}
.gap_7 {gap:0.4375rem}
.gap_8 {gap:0.5rem}
.gap_9 {gap:0.5625rem}
.gap_10 {gap:0.625rem}
.gap_11 {gap: 0.6875rem;}
.gap_12 {gap: 0.75em;}
.gap_13 {gap: 0.8125rem;}
.gap_14 {gap: 0.875rem;}
.gap_15 {gap: 0.9375rem;}
.gap_16 {gap:1rem}
.gap_17 {gap: 1.0625rem;}
.gap_18 {gap: 1.125rem;}
.gap_19 {gap: 1.1875rem;}
.gap_20 {gap:1.25rem}
.gap_24 {gap:1.5rem}
.gap_30 {gap:1.875rem}
.gap_32 {gap:2rem}
.gap_40 {gap:2.5rem}
.gap_50 {gap:3.125rem}
.gap_60 {gap:3.75rem}
.gap_row8 {row-gap:0.5rem}
.gap_row10 {row-gap:0.625rem}
.gap_row16 {row-gap:1rem}
.auto_row24 {display: grid; grid-auto-rows: 1.5rem}
.auto_row32 {display: grid; grid-auto-rows: 2rem}
.gap_colm8 {column-gap:0.5rem}

.col_gap0 {column-gap: 0 !important}
.col_gap2 {column-gap: 0.125rem}
.col_gap4 {column-gap: 0.25rem}
.col_gap6 {column-gap: 0.375rem}
.col_gap7 {column-gap: 0.438rem}
.col_gap8 {column-gap: 0.5rem}
.col_gap10 {column-gap: 0.625rem}
.col_gap12 {column-gap: 0.75rem}
.col_gap16 {column-gap: 1rem}
.col_gap18 {column-gap: 1.125rem}
.col_gap20 {column-gap: 1.25rem}
.col_gap24 {column-gap: 1.5rem}
.col_gap28 {column-gap: 1.75rem}
.col_gap30 {column-gap: 1.875rem}
.col_gap32 {column-gap: 2rem}
.col_gap40 {column-gap: 2.5rem}
.col_gap48 {column-gap: 3rem}
.col_gap50 {column-gap: 3.125rem}
.col_gap60 {column-gap: 3.75rem}
.col_gap64 {column-gap: 4rem}
.col_gap80 {column-gap: 5rem}
.col_gap100 {column-gap: 6.25rem}
.col_gap164 {column-gap: 10.25rem}
.col_gap200 {column-gap: 12.5rem}
.col_gap250 {column-gap: 15.625rem}
.col_gap272 {column-gap: 17rem}
.col_gap300 {column-gap: 18.75rem}
.col_gap464 {column-gap: 29rem}
.col_gap500 {column-gap: 31.25rem}
.col_gap732 {column-gap: 45.75rem}
.col_gap796 {column-gap: 49.75rem}

.row_gap1 {row-gap: 0.063rem}
.row_gap2 {row-gap: 0.125rem}
.row_gap4 {row-gap: 0.25rem}
.row_gap6 {row-gap: 0.375rem}
.row_gap8 {row-gap: 0.5rem}
.row_gap10 {row-gap: 0.625rem}
.row_gap12 {row-gap: 0.75rem}
.row_gap15 {row-gap: 0.938rem}
.row_gap16 {row-gap: 1rem}
.row_gap18 {row-gap: 1.125rem}
.row_gap20 {row-gap: 1.25rem}
.row_gap24 {row-gap: 1.5rem}
.row_gap28 {row-gap: 1.75rem}
.row_gap30 {row-gap: 1.875rem}
.row_gap32 {row-gap: 2rem}
.row_gap40 {row-gap: 2.5rem}
.row_gap48 {row-gap: 3rem}
.row_gap50 {row-gap: 3.125rem}
.row_gap60 {row-gap: 3.75rem}
.row_gap64 {row-gap: 4rem}
.row_gap80 {row-gap: 5rem}
.row_gap100 {row-gap: 6.25rem}

/* button */
.radius_10 {
    @include border_radius10;
}
.radius_2 {
    @include border_radius02;
}
.row_box {
    @include row_box;
}
button {
    .img {
        display: block;
    }
    .img_on {
        display: none;
    }
    &:hover:not(.hover):not(.legend):not(.selected):not(.disabled):not(.map), &:active:not(.map):not(.disabled), &.selected {
        .img {
            display: none;
        }
        .img_on {
            display: block;
        }
        .circle_grey28, .circle_grey32 {
            background-color: var(--icon-pri_20-to-100);
        }
        .circle_grey28 .map {
            background-color: unset;
        }
    }
    &.disabled{
        .img{
            display: block;
        }
        .img_on{
            display: none;
        }
    }
    &.circle32{
        &:hover:not(.disabled), &:focus:not(.disabled), &.selected {
            background-color: var(--white-w_12);
            border: none;
        }
        &.disabled {
            opacity: 0.6;
        }
    }
    &.circle_grey32{
        &.line{
            &:hover, &:focus, &.selected{
                background-color: $bg_sky30;
                border: none;
           } 
        }
    }
}
.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);
    background: transparent;
    border: 0.063rem solid var(--white-w_20);
    &:hover, &:focus, &.selected {
        color: var(--white-w_87-sec);
        border: 0.063rem solid var(--white-w_87-sec);
    }
    &.disabled {
        background: transparent;
        border: 0.063rem solid var(--white-w_20);
        color: $bg_grey38;
    }
    &.withtab{
        border: 0.063rem solid var(--white-w_20);
        &:hover, &:focus, &.selected {
            color: var(--white-w_87-sec);
            border: 0.063rem solid var(--white-w_87-sec);
        }
    }
}
.btn_line2 {
    @include button_options;
    color: var(--white-w_60);
    background: transparent;
    border: 0.063rem solid var(--white-w_40);
    &:hover, &:focus, &.selected{
        color: var(--primary-pri_100);
        border: 0.063rem solid var(--primary-pri_100);
    }
    &.disabled {
        border: 0.063rem solid $bg_grey38;
        color: $bg_grey20;
    }
}
.btn_file {
    cursor: pointer;
}
.btn_toggle_primary{
    @include button_options;
    @include fs_14_medium;
    background: var(--white-w_12);
    color: var(--white-w_87);
    &:hover, &:focus, &.selected{
        background: var(--btn-btn_selected);
        color: var(--white-w_100);
    }
    &.disabled{
        background: $bg_grey12;
        color: $bg_grey38;
    }
}
.btn_toggle_secondary {
    @include button_options;
    background: $bg_grey12;
    &.selected {
        background: #04091A 0% 0% ;
        border: 0.063rem solid rgba(255, 255, 255, 0.502);
    }
    &:hover:not(.selected):not(.disabled), 
    &:focus:not(.selected):not(.disabled) {
        background: $bg_grey16;
        border: none;
        .circle32{
            background-color: $bg_grey20;
        }
    }
    &.disabled {
        background: $bg_grey12;
        color: $bg_grey38;
    }
}
.btn_toggle_floating {
    @include button_floating;
    &:hover, &:focus {
        border-radius: 0 !important;
    }
    &.disabled {
        @include backFilter;
        border: 0.063rem solid var(--line-wh_12-to-100);
        background: var(--bg_01_80);
        box-shadow: none;
        color: var(--white-w_20);
    }
    &.selected {
        background: var(--btn-btn_default);
        box-shadow: inset 0 0 0.75rem #0476FF;
        border:none;
        backdrop-filter: unset;
    }    
}
.btn_toggle_footer {
    @include button_options;
    @include backFilter;
    @include fs_14_regular;
    background: rgba(10, 11, 20, 0.4);
    border: 0.063rem solid $bg_grey20;
    &.selected, &:hover, &:focus {
        background: rgba(39, 212, 255, 0.2);
        border: 0.063rem solid $bg_grey12;
        color: $ui_sky;
    }    
}
.btn_toggle_ffb {
    @include button_ffb;
    &.disabled {
        border: 0.063rem solid $bg_grey12;
        background: rgba(10, 11, 20, 0.4);
        box-shadow: none;
        color: $bg_grey38;
    }
}
.btn_toggle_icon {
    @include fs_14_regular;
    display: flex;
    align-items: center;
    column-gap: 0.5rem;
    line-height: 1.75rem;
    color: var(--white-w_87);
    &.legend {
        &:hover:not(.legend), &:active:not(.legend), &.selected {
            color:transparent;
        }
    }
    &:hover:not(.legend):not(.disabled), &:focus:not(.disabled), &:active:not(.disabled), &.selected {
        color: var(--primary-pri_100);
    }
    &.disabled {
        opacity: 0.6;
    }
}
.img_selected {display: none;}
.on {
    .img_off {display: none;}
    .img_selected {
        display: block;
    }
}
.btn_icon {
    @include button_options($width: auto);
    gap:0.25rem;
    min-width: 2.5rem;
    padding: 0 0.5rem;
    font-weight: 500;
    color: var(--white-w_87-sec) !important;
    .word{
        color: var(--white-w_87-sec) !important;
    }
    .word_grey {
        color: var(--white-w_60) !important;
    }
    &:hover:not(.disabled), &.selected {
        .word{
            opacity: 1;
            color: var(--primary-pri_100) !important;
            font-weight: 700;
        }
        .word_grey {
            opacity: 1;
            color: var(--primary-pri_100) !important;
            font-weight: 700;
        }
    }
    &.btn_l{
        padding: 0 1.25rem;
    }
    &.large {
        min-width: auto;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0;
    }
    &.medium{
        min-width: auto;
        width: 2.25rem;
        height: 2.25rem;
        padding: 0;
    }
    &.mini{
        min-width: auto;
        width: 1.5rem;
        height: 1.5rem;
        padding: 0;
    }
    &.xmini{
        min-width: auto;
        width: 1.25rem;
        height: 1.25rem;
        padding: 0;
    }
    .word {
        @include fs_14_medium;
        padding: 0;
        //opacity: 0.6;
        color: var(--white-w_87-sec) !important;
    }
}
.icon_primary {
    @include button_primary;
    width: auto;
}
.icon_ffb {
    @include backFilter;
    @include box_shadow16;
    background: var(--bg_01_80);
    border: 0.063rem solid var(--line-wh_12-to-100);
    z-index: 1;
    &:hover, &.selected{
        border: 0.063rem solid var(--line-wh_12-to-100);
    }
    &.line {
        border: 0.063rem solid var(--white-w_12);
        background: var(--bg_01_80);
        backdrop-filter: unset;
    }
    &.disabled {
        opacity: 0.6;
    }
}
.icon_ghost {
    background: transparent;
}
.btn_xl {height: 48px; font-weight: 700; font-size: 16px; letter-spacing: 0.031rem;}
.btn_l {height: 40px; font-weight: 700; font-size: 16px; letter-spacing: 0.031rem;}
.btn_m {height: 32px; font-weight: 700; font-size: 14px;}
.btn_s {height: 28px; width: auto; padding: 10px 8px;}
.btn_ms {height: 1.75rem; width: auto; padding: 0.1rem 0.5rem 0;}
.btn_ss {height: 1.5rem; font-size: 0.75rem; width: auto; padding: 0.1rem 0.75rem 0;}
.btn_xs {height: 1.5rem; font-size: 0.75rem; width: auto; padding: 0.1rem 0.5rem 0;}

.btn_flexible {width: auto;}
.btn_auto {min-width: auto !important}
.btn_s_w28h28 {width: 1.75rem; height: 1.75rem; padding: 0.25rem;}
.btn_s_h28 {
    height: 1.75rem; width: auto; padding: 0.25rem 0.5rem;
    .word {
        @include fs_13_medium;
    }
}

.btn_arrow_circle {
    @include dflx_ac_jcent;
    width: 1.5rem;
    height: 1.5rem;
    overflow: hidden;
    background: transparent;
    border-radius: 100%;
    &:hover:not(.hover):not(.disabled), &:focus:not(.hover):not(.disabled):not(.selected), &.selected {
        background: var(--white-w_16);
    }
    &.disabled{
        background: transparent;
        img {
            opacity: 0.2 !important;
        }
    }
    &.line {
        background: var(--bg_02_60);
        border: 0.125rem solid var(--white-w_60);
        &:hover:not(.hover):not(.disabled), &:active:not(.hover):not(.disabled), &.selected {
            background:var(--primary-pri_20);
            border: 0.125rem solid var(--primary-pri_100);
        }
        &.disabled{
            border: 0.125rem solid var(--white-w_20);
        }
    }
}
.btn_arrow_s {
    @include dflx_ac_jcent;
    width: 1.25rem;
    height: 1.25rem;
    overflow: hidden;
    background: var(--white-w_12);
    border-radius: 0.125rem;
    &:hover:not(.hover), &:active, &.selected, &.hover{
        background: var(--white-w_16);
    }
}
.btn_arrow{
    @include dflx_ac_jcent;
    width: 1.25rem;
    height: 2.5rem;
    overflow: hidden;
    background: var(--bg_01_80);
    border: 0.063rem solid var(--line-wh_20-to-100);
    border-radius: 0.125rem;
    &:hover:not(.hover):not(.disabled), &.hover, &:focus, &.selected{
        background:var(--primary-pri_12);
        border: 0.063rem solid var( --line-pri_40-to-wh_40);
    }
    &.disabled{
        background: var(--bg_01_80);
        border: 0.063rem solid var(--line-wh_12-to-100);
        img{
            opacity: 0.2 !important;
        }
    }
}
.btn_arrow_l{
    @include dflx_ac_jcent;
    @include box_shadow16;
    @include backFilter;
    @include border_radius04;
    width: 1.75rem;
    height: 4.625rem;
    overflow: hidden;
    background: var(--bg_01_80);
    border: 0.063rem solid var( --line-pri_40-to-wh_40);
    &:hover, &.hover, &.selected {
        background: var(--primary-pri_12);
        border: 0.063rem solid var( --line-pri_40-to-wh_40);
    }
    &.left{
        border-radius: 0.25rem 0 0 0.25rem;
    }
    &.right{
        border-radius: 0 0.25rem 0.25rem 0;
    }
    &.disabled{
        background: var(--bg_01_80);
        border: 0.063rem solid $bg_grey12;
        img{
            opacity: 0.2 !important;
        }
    }
}
.put_drop{
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    &.up{
        transform: rotate(180deg);
    }
    &.down{
        transform: rotate(180deg);
    }
}
.btn_drop{
    width: 9.625rem;
    justify-content: space-between;
    column-gap: 0.25rem;
    &.disabled {
        background: var(--bg_01_80);
        border: 0.063rem solid var(--line-wh_12-to-100);
        color: var(--white-w_20);
        .put_drop, .put_see{
            img{
                @include filter_white;
                opacity: 0.3;
            }
        }
    }
    &.selected{
        .put_drop{
            transform: rotate(180deg);
        }
        .put_drop.down{
            transform: rotate(0deg);
        }
    }
    .word {
        @include fs_14_medium;
        width: calc(100% - 1.25rem);
    }
    .drop_word{
        @include fs_14_bold;
        color: var(--grade-chart-gco-01);
        width: calc(100% - 1.25rem);
    }
}
.drop_wrap{
    position: relative;
    .drop_content{
        position: absolute;
        left: 0;
        top: 2.5rem;
        z-index: 100;
    }
    &.on{
        .drop_content{
            display: block;
        }
    }
}

.circle_grey28{
    @include circle28;
    padding: 0;
    background-color: var(--white-w_20);
    &.popover {
        background-color: rgba(74, 78, 102, 0.8);
    }
    &.map {
        background-color: #0068E6;
        border: 0.063rem solid $bg_black30;
    }
}
.circle16, .circle32, .circle48, .circle64{
    @include circle32;
    padding: 0;
    background-color: transparent;
}
.circle16 {
    width: 1rem; 
    height: 1rem;
}
.circle48 {
    width: 3rem;
    height: 3rem;
}
.circle64 {
    width: 4rem;
    height: 4rem;
}
.circle_grey32{
    @include circle32;
    padding: 0;
    background-color: $bg_grey20;
    &.line {
        background-color: transparent;
        border: 0.063rem solid var(--white-w_12);
    }
    + .word_medium {
        @include fs_14_medium;
        &.selected, &:hover{
            font-weight: 700;
        }
    }
}

.tab_line{
    @include dflx_ac;
    button{
        //@include backFilter_none;
        margin-right: -0.063rem;
        border-radius: 0;
        &:first-child{
            border-radius: 0.125rem 0 0 0.125rem;
        }
        &:last-child{
            border-radius: 0 0.125rem 0.125rem 0;
        }
    }
    &.spacing{
        gap:0.125rem;
        button{
            margin: 0;
            border-radius: 0.125rem;
        }
    }
}
.connect_line{
    @include dflx_ac;
    @include backFilter;
    @include box_shadow16;
    background: var(--bg_01_80);
    border: 0.063rem solid var(--line-wh_12-to-100);
    padding: 0 0.5rem;
    border-radius: 0.125rem;
    position: relative;
    overflow: hidden;
    &.rounding{
        height: 4rem;
        padding: 0 0.25rem;
        background: rgba(10, 11, 20, 0.4);
        backdrop-filter: blur(1.875rem);
        border-radius: 4rem;
        button{
            padding: 0 1rem;
        }
    }
    &.box{
        padding: 0.75rem 1.25rem;
        column-gap: 1.25rem;
    }
    &.big_box {
        padding: 0.75rem 0.75rem 0.75rem 1.25rem;
        column-gap: 1.25rem;
    }
    &.more{
        padding: 0.375rem 0.75rem;
    }
    &.sky{
        border: 0.063rem solid var(--line-pri_40-to-wh_100);
    }
    &.none_shadow{
        box-shadow: unset;
    }
    .shadow{
        position: absolute;
        width: 5.25rem;
        padding: 0.5rem;
        &.left{
            left: 0;
            top: 0;
            background: linear-gradient(90deg, var(--bg_02) 36%, rgba(4, 9, 26, 0) 100%);
        }
        &.right{
            @include dflx_ac_jend;
            right: 0;
            top: 0;
            background: linear-gradient(270deg, var(--bg_02) 36%, rgba(4, 9, 26, 0) 100%);
        }
    }
    button{
        background: none !important;
    }
}
.shadow{
    @include dflx_ac;
    height: 100%;
}
.horizon_line{
    //overflow: hidden;
    white-space: nowrap;
    .horibox{
        display: inline-block;
    }
}
.horibox{
    .a_link{
        display: block;
    }
}
.arrow_box{
    @include dflx_ac_jcent;
    width: 1.25rem;
    height: 1.25rem;
    background: var(--white-w_12);
    border-radius: 0.125rem;
    cursor: pointer;
    &:hover, &:focus{
        background: var(--white-w_16);
    }
}
/*controll bar*/
.control_line{
    @include dflx_ac;
    &.mini{
        width: 10rem;
        .progress_box{
            width: 7rem;
            height: 1.5rem;
            .bar{
                width: 5.5rem;
            }
        }
    }
    .btn_icon{
        &:first-child{
            margin-right: -0.063rem;
        }
        &:last-child{
            margin-left: -0.063rem;
        }
    }
    .icon_ffb{
        box-shadow: unset;
    }
}
.timeline_outline {
    height: 1.25rem;
    padding: 0.125rem 0.3125rem;
    background: rgba(10, 11, 20, 0.4);
    border-width: 0.063rem 0;
    border-style: solid;
    border-color: $bg_grey12;
}
.progress_box{
    @include dflx_ac_jcent;
    @include backFilter;
	width: 8rem;
    height: 2.25rem;
    padding: 0 0.625rem;
	position: relative;
    border: 0.063rem solid var(--line-wh_12-to-100);
    background: var(--bg_01_80);
    .bar {
        @include border_radius02;
        width:6.5rem;
        height: 0.25rem;
        overflow: hidden;
        margin: 0 auto;
        background: var(--primary-pri_20);
        cursor: pointer !important;
    }
    &.line {
        border: 0.063rem solid var(--white-w_12);
    }
}
.scrubber {
    @include border_radius02;
    background: rgba(39, 212, 255, 0.2);
    .empty {
        position:absolute;
        width:0.375rem;
        height:0.875rem;
        top: 0.25rem;
        left: 0.625rem;
        top: 50%;
        margin-top: -0.438rem;
        background: var(--primary-pri_100);
        border-radius: 0.375rem;
        cursor: pointer !important;
    }
}
.progress.white {
    @include border_radius02;
    background: var(--primary-pri_100);
}
.translate3d_100 {
    transform: translate3d(0.063rem, 0, 0);
}
/*controll bar End*/

.a_link{
    @include fs_14_medium;
    padding: 0.625rem 1rem;
    cursor: pointer;
    color: var(--more-visible-wh_60-to-100);
    line-height: 1;
    &:hover, &:focus{
        color: var(--more-visible-wh_60-to-100);
    }
    &.selected{
        color: var(--primary-pri_100);
        font-weight: 700;
    }
    &.disabled{
        color: $bg_grey38;
    }
    &.more{
        @include fs_16_bold;
    }
    &.short{
        padding: 0.625rem 0.75rem;
    }
    &.pad12{
        padding: 0.625rem 0.75rem;
    }
}
.vtline_20{
    display: inline-block;
    width: 0.063rem;
    height: 1.25rem;
    background: var(--primary-pri_20);
}
.btn_etc{
    @include dflx_ac_jcent;
    width: 1.5rem;
    height: 1.5rem;
}
.etc_zone{
    position: relative;
    width: 1.5rem;
    height: 1.5rem;
    .connect_etc{
        position: absolute;
        right: -0.8rem;
        top: 2.6rem;
        z-index: 100;
        a{
            display: block;
        }
    }
}
.connect_etc{
    @include backFilter;
    @include border_radius02;
    background: rgba(39, 212, 255, 0.05);
    border: 0.063rem solid $bg_grey12;
    padding: 0.125rem 0.5rem;
}
.swith_room {
    width: 2.5rem;
    height: 1.5rem;
}
.switch_checkbox {
    height: 0;
    width: 0;
    visibility: hidden;
    display: none !important;
}
.switch_label {
    @include dflx_ac;
    cursor: pointer;
    width: 2.5rem;
    height: 1.5rem;
    background: var(--white-w_16);
    border-radius: 2rem;
    position: relative;
    transition: 0.2s;
    &.fill_line {
        background: var(--more-visible-wh_20-to-12);
        border: 0.063rem solid var(--white-w_60);
        .switch_button{
            background: var(--white-w_60);
        }
    }
    &.line {
        background: transparent;
        border: 0.063rem solid var(--white-w_60);
        .switch_button {
            background: var(--white-w_60);
        }
    }
}
.switch_label .switch_button {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -0.5rem;
    left: 0.25rem;
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    transition: 0.2s;
    background: var(--white-w_40);
}
.swith_room.on .switch_label{
    background: #0068E6;
}
.swith_room.on .fill_line{
    background: var(--primary-pri_20);
    border: 0.063rem solid var(--primary-pri_100);
}
.swith_room.on .line{
    background: transparent;
    border: 0.063rem solid var(--primary-pri_100);
}
.swith_room.on .switch_label .switch_button {
    left: calc(100% - 0.25rem);
    transform: translateX(-100%);
    background:#fff;
}
.swith_room.on .fill_line .switch_button{
    background: var(--primary-pri_100);
}
.swith_room.on .line .switch_button{
    background: var(--primary-pri_100);
}

.put_zone{
    position: relative;
    // width: 100%;
    .wrput{
        width: 100%;
        &.large{
            + .put_check{
                top: 0.875rem;
                right: 1rem;
            }
            + .put_see{
                top: 0.7rem;
                right: 0.875rem;
            }
        }
    }
    .put_check{
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
        display: none;
        &.dflx{
            display: flex;
        }
    }
    .timer {
        position: absolute;
        top: 17px;
        right: 16px;
        margin-right: auto;
        color: rgba(255, 255, 255, 0.40);
        font-size: 12px;
        font-weight: 400;
    }
    .put_see{
        top: 0.25rem;
        display: flex;
    }
    .mess{
        margin:0.5rem 0 0;
    }
    &.normal{
        .mess{
            display: none;
        }
    }
    .srch_put{
        flex: 1;
    }
}
.wrput {
    @include fs_16_regular;
    width: 200px;
    background-color: transparent;
    border: 1px solid var(--alpha-bk-to-whbk-20);
    border-radius: 4px;
    color: rgba(255, 255, 255, 0.40);
    line-height: 1;
    letter-spacing: 0.5px;
    padding: 0 12px 0 16px;
    ::placeholder {
        color: var(--alpha-bk-to-whbk-40) !important;
    }
    &.on, &:focus:not(.disabled) {
        border: 1px solid var(--PRI) !important;
        color: var(--alpha-bk-to-whbk-87);
        // outline: 1px solid var(--PRI);
    }
    &.large{
        width: 100%;
        height: 48px;
    }
    &.medium{
        @include fs_14_regular;
        width: 100%;
        height: 40px;
        padding: 0 8px 0 12px;
    }
    &.small{
        @include fs_14_regular;
        width: 100%;
        height: 28px;
        padding: 0 8px 0 12px;
    }
    &.disabled{
        border: 1px solid var(--alpha-bk-to-whbk-20);
        background: var(--alpha-bk-to-whbk-20);
    }
}
.sp_name{
    @include fs_13_regular;
    padding: 0 0.5rem;
    &.pink{
        color: #FF00FF;
    }
}
.put_check{
    @include dflx_ac_jcent;
    width: 0.75rem;
    height: 0.75rem;
    &.green{
        background-image:url('../images/check_green.svg');
        background-size: 1.25rem auto;
    }
}
.put_delete{
    cursor: pointer;
    &.on{
        display: block;
    }
}
.img_see_off {
    display: none;
}
.put_see {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    &.on{
        .img_see{
            display: none;
        }
        .img_see_off{
            display: block;
        }
    }
}
.img_down{
    display: none;
}
.put_drop{
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    &.on {
        .img_up{
            display: none;
        }
        .img_down{
            display: block;
        }
    }
}
.mess{
    @include fs_12_regular;
    line-height: 1.2;
    color: rgba(0, 0, 0, 0.7);
    &.on {
        display: block;
    }
    &.error {
        color: #FF1F55;
    }
}
.btn_srch {
    @include fs_14_regular;
    min-width: 3.625rem;
    height: 2rem;
    padding: 0 0.75rem;
    background: #5C5E66;
    box-shadow: 0 0 0.063rem rgba(0, 0, 0, 0.16);
    border-radius: 0.25rem;
    color: #fff;
    transition: 0.2s all;
    &:hover, &:focus {
        background: #45464D;
    }
    &.bldark {
        background: #004099;
        &.on, &:hover, &:focus {
            background: #003580;
        }
    }
    &.more {
        padding: 0 1rem;
    }
    &.med {
        min-width: 8.875rem;
    }
    &.wht {
        background: #fff;
        border: 0.063rem solid #dcdde0;
        color: #000;
        &.on, &:hover, &:focus{
            background: #e6e7eb;
        }
    }
}
.textarea {
    width: 100%;
    height: 100%;
    resize: none;
}
.temrs_text_wrap {
    background: var(--more-bright-wh_12-to-6);
    border-radius: 0.125rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    position: relative;
    &.line{
        background: transparent;
        border: 0.063rem solid var(--white-w_40);
    }    
    &.line_fill {
        background: var(--more-bright-wh_12-to-6);
        border: 0.063rem solid var(--white-w_20);
        &.pad12 {padding: 0.75rem 0.5rem 0.75rem 1rem;}
    }
}
.terms_area {
    width: 100%;
    height: 4.25rem;
    background: transparent;
    padding-right: 0.375rem;
    overflow: auto;
    font-size: 0.8125rem;
    color: var(--white-w_87-sec);
    line-height: 1.4;
    resize: none;
    &.edit{
        padding: 0.5rem;
        height: 10.5rem;
    }
}
.input_sett{
    @include dflx_ac;
    position: relative;
}
.btn_srch28 {
    @include dflx_ac_jcent;
    @include fs_14_regular;
    @include border_radius02;
    color: var(--white-w_40);
    width: 1.75rem;
    height: 1.75rem;
    background-color: var(--white-w_12);
    text-indent: -9999px;
    &:hover:not(.selected):not(.on):not(.disabled), &.selected {
        background-color: var(--white-w_16);
    }
    &.shadow {
        box-shadow: inset 0 0 0.75rem $bg_grey10;
    }
    &.on, &:active:not(.selected):not(.on):not(.disabled) {
        color: var(--white-w_100);
        background-color: var(--btn-btn_selected);
        span {
            opacity: 1 !important;
        }
    }
    &.word {
        width: auto;
        min-width: 1.75rem;
        padding: 0 0.5rem;
        text-indent:0;
    }
    &.srch {
        &.on, &:active:not(.selected):not(.on) {
            color: var(--white-w_100);
            background-color: var(--btn-btn_default);
            span{
                opacity: 1 !important;
            }
        }
    }
    &.disabled {
        // background-color: rgba(255, 255, 255, 0.12);
        opacity: 0.6;
    }
}
.srch_line {
    @include dflx_ac;
    column-gap: 0.25rem;
}
.srch_zone {
    @include dflx_ac;
    @include border_radius02;
    width: 12.5rem;
    height: 1.75rem;
    padding: 0.25rem 0.5rem;
    background: var(--more-visible-wh_12-to-6);
    &.on {
        border: 0.063rem solid var(--primary-pri_100) !important;
        outline: 0.188rem solid var(--primary-pri_20);
    }
    &.line {
        background-color: transparent;
        border: 0.063rem solid var(--white-w_40);
    }
}
.bt_srch {
    width: 1rem;
    height: 1rem;
    background: url(../images/search_fff_16.svg) no-repeat center center;
    background-size: contain;
    text-indent: -99999px;
}
.srch_put {
    @include fs_13_regular;
    color: var(--white-w_40);
    background: transparent;
    width: calc(100% - 1rem);
    width: 100%;
    padding: 0 0 0 0.25rem;
    line-height: 1;
    color: var(--white-w_87-sec);
}
.pos_rel{
    position: relative !important;
}
.srch_brd {
    @include backFilter;
    display: none;
    position: absolute;
    left: 0;
    bottom: 2rem;
    width: 15rem;
    padding: 0.5rem 0;
    border: 0.063rem solid var(--line-pri_40-to-bk_40);
    background-color: var(--bg_01_80);
    z-index: 400;
    &.on{
        display: block;
    }
    &.bottom_box{
        bottom: unset;
    }
}

.srch_ul {
    width: 100%;
    li {
        @include dflx_ac;
        height: 1.75rem;
        padding: 0.375rem 0.5rem 0.3125rem 1rem;
        cursor: pointer;
        .p_val {
            @include fs_14_regular;
            width: 100%;
        }
        &:hover, &:focus{
            background-color: var(--primary-pri_20);
            .p_val {
                border-right: 0.25rem solid $bg_grey50;
            }
            .p_val.on {
                border-right: 0.25rem solid $bg_grey50;
            }
        }
    }
    &.hover {
        li.on {
            background-color: var(--primary-pri_20);
            .p_val {
                border-right: 0.25rem solid $bg_grey50;
            }
        }
      
    }
}
.login_input{
    width: 320px;
}
.save_group{
	@include dflx_ac_jbet;
	width: 100%;
	padding: 1rem 0;
}
.save_line{
	@include dflx_ac;
	label{
		@include fs_13_regular;
	}
}
.pw_initial{
	a{
		@include fs_13_regular;
		color: var(--white-w_87-sec);
		cursor: pointer;
	}
}

.pop_rcd_dl{
    @include dflx;
    width: 100%;
    margin: 0 0 0.5rem;
    dt {
        @include fs_13_regular;
        color: var(--more-visible-wh_60-to-100);
        width: 4.5rem;
        padding: 0.375rem 0.5rem 0 0;
    }
    dd {
        flex: 1;
        .selector{
            width: 100%;
        }
    }
}
.selector{
    @include fs_14_regular;
    @include border_radius02;
    width: 13.5rem;
    height: 1.75rem;
    padding: 0.1rem 1.5rem 0 0.75rem;
    color: var(--white-w_87);
    appearance: none;
    background-color: var(--bg_01_80);
    border: 0.063rem solid var(--white-w_40);
    background-image: url(../images/arrow_down_grey16.svg);
    background-repeat: no-repeat;
    background-position: 98% 56%;
    background-size: 1rem 1rem;
    cursor: pointer;
    &.nobord{
        width: 10rem;
        border: none;
    }
    &.fill{
        background-color: var(--more-bright-wh_12-to-6);
        border: 0.063rem solid transparent;
        option {
            color: #000;
        }
    }
    &.sm {
        @include fs_13_regular;
        width: 7.5rem;
        background-size: 1rem 1rem;
        &.color{
            width: 4.5rem;
            background: var(--white-w_12);
            border: 0.063rem solid transparent;
            padding: 0.1rem 1rem 0 0.5rem;
            background-image: url(../images/arrow_down_grey16.svg);
            background-repeat: no-repeat;
            background-position: 93% 42%;
            background-size: 1rem 1rem;
            option {
                color: #000;
            }
        }
    }
    &.on, &:focus{
        border: 0.063rem solid var(--primary-pri_100) !important;
        outline: 0.188rem solid var(--primary-pri_20);
    }
    &.detail{
        background-color: transparent;
        option {
            color: #000;
        }
    }
}

.editor_wrap{
    width:100%;
    padding: 1.875rem;
    border: 0.063rem dashed #555;
}
.edit_btline{
    @include dflx_ac;
    column-gap: 0.125rem;
}
.pipe28{
    width: 0.063rem;
    height: 1.75rem;
    background: $bg_grey20;
}
.h_tlt{
    @include fs_16_regular;
}

button{
    @include fs_13_medium;
    &.edit_red{
        color: #FF1F55;
    }
    &.edit_orange{
        color: #FC5C34;
    }
    &.edit_yellow{
        color: #FFE043;
    }
    &.edit_green{
        color: #00BD78;
    }
    &.edit_blue{
        color: #338FFF;
    }
    &.edit_white{
        color: #fff;
    }
}
.vms_text_wrap{
    @include dflx_ac_jcent;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}
.vms_area{
    width: 30rem;
    height: 6rem;
    background: #0B1129;
    border: 0.063rem solid var(--primary-pri_100);
    outline: 0.188rem solid rgba(39, 212, 255, 0.2);
    border-radius: 0.125rem;
    text-align: center;
    font-size: 2rem;
    font-weight: 400;
    color: #FFE043;
    line-height: 2.6rem;
    padding: 0.3rem 0 0;
    &.vms720{
        width: 45rem;
        height: 9rem;
        padding: 2rem 0 0;
    }
    &.vms288{
        @include dflx_ac_jcent;
        width: 30rem;
        height: 18rem;
        padding: 2.5rem;
    }
}
// indicator test
.indicator_test{
    @include box1;
    width: 20rem;
    padding: 1.25rem 1.25rem 1.25rem;
    background: var(--bg_01_80);
    overflow: hidden;
    .indi_top{
        padding: 1.25rem 1.25rem 1.25rem;
        margin: 0 0 1rem;
    }
    .indi_shadow {
        @include box_shadow16;
    }
    &.donot{
        background-image: url("../../assets/images/do_not_line.svg");
        background-repeat: no-repeat;
        width: 19.875rem;
    }
    &.lay_donot{
        height: 8.625rem !important;
        background-image: url("../../assets/images/lay_do_not_line.svg");
    }
}

//indicator
.indicator{
    @include box1;
    width: 20rem;
    padding: 1.25rem 1.25rem 1.25rem;
    background: var(--bg_01_80);
    overflow: hidden;
    &.overt {
        padding: 1.25rem 0.5rem 0rem 1.25rem;
        .indi_top{
            margin: 0 0 1rem;
        }
        .indi_conts{
            margin: 0;
        }
    }
    &.donot{
        background-image: url("../../assets/images/do_not_line.svg");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: cover;
    }
    &.lay_donot{
        height: 8.625rem !important;
        background-image: url("../../assets/images/lay_do_not_line.svg");
    }
}
.indicator_shadow {
    @include box1;
    @include box_shadow16;
    width: 20rem;
    padding: 1.25rem 1.25rem 1.25rem;
    background: var(--bg_01_80);
    overflow: hidden;
    backdrop-filter: unset;
    &.overt{
        padding: 1.25rem 0.5rem 0rem 1.25rem;
        .indi_top{
            margin: 0 0 1rem;
        }
        .indi_conts{
            margin: 0;
        }
    }
    &.donot{
        background-image: url("../../assets/images/do_not_line.svg");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: cover;
    }
    &.lay_donot{
        height: 8.625rem !important;
        background-image: url("../../assets/images/lay_do_not_line.svg");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: cover;
    }
}
.arr_up{
    @include dflx_ac_jcent;
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    &.down{
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }
}
.indi_top {
    @include dflx_ac_jbet;
    width: 100%;
    cursor: pointer;
    h1 {
        @include fs_16_bold;
        color: var(--primary-to-grayscale-to-bk);
        line-height: 1.1;
    }
    .record_menu {
        &.hauto {
            li{
                a{
                    @include fs_14_bold;
                    padding: 0;
                }
            }
        }
    }
    &.accord{
        padding: 1.25rem 1.25rem 1.25rem;
    }
    &.withtab{
        justify-content: unset;
        column-gap: 1rem;
    }
}
.indi_conts {
    width: 100%;
    margin: 1rem 0 0;
    &.del {
        display: none;
    }
}
.indi_etc {
    @include box1;
    padding: 0.85rem 0.75rem 0.7rem;
    border-radius: 0.125rem;
    margin: 0 0 0.5rem;
    overflow: hidden;
    cursor: pointer;
    &.on {
        background-color: rgba(0, 104, 230, 0.5);
        box-shadow: 0 0 0.75rem 0 inset #0068e6;
    }
    .indi_tlt {
        @include fs_14_medium;
        text-align: center;
    }
}

.record_menu {
    @include dflx_ac;
    height: 2.75rem;
    padding: 0 1.25rem 0 0;
    column-gap: 1.875rem;
    li {
        a {
            @include fs_14_bold;
            color: var(--more-visible-wh_60-to-100);
            display: block;
            &:hover, &:focus {
                color: var(--primary-pri_100);
            }
            &.on {
                color: var(--primary-pri_100);
                font-size: 1rem !important;
            }
            &.selected {
                color: var(--primary-pri_100);
            }
            &.disabled {
                color: $bg_grey38;
            }
        }
    }
    &.hauto {
        li{
            a{
                padding: 0 0 0.75rem;
            }
        }
    }
    &.usage {
        li{
            a{
                @include fs_14_medium;
                padding: 0 0 0.75rem;
            }
        }
    }
    &.main {
        color: var(--white-w_87-sec);
    }
}
.tm_zone {
    width: 13.125rem;
    &.hover{
        border: 0.063rem solid var(--primary-pri_100);
    }
    &.pressed{
        border: 0.063rem solid var(--primary-pri_100);
        background: var(--primary-pri_12);
    }
}
.tm_zone_top {
    @include dflx_ac_jbet;
    width: 100%;
    height: 2.25rem;
    background: var(--more-bright-wh_12-to-6);
    padding: 0.25rem 0.25rem 0.25rem 1rem;
    color: var(--white-w_87);
    h1{
        @include fs_14_medium;
        color: var(--white-w_87);
    }
}
.tmbox{
    position: relative;
    width: 100%;
    padding: 1rem;
    background-color: var(--more-bright-wh_6-to-60);
    margin: 0 0 0.75rem;
    &:last-child {
        margin: 0;
    }
    .start_dl {
        margin-top: -0.5rem;
    }
    &.white6 {
        background-color: var(--white-w_6);
    }
}
.tmbox_top {
    @include dflx_ac_jbet;
    column-gap: 0.5rem;
    margin: 0 0 0.75rem;
}
.tmbox_date {
    @include fs_12_light;
    color: var(--white-w_60);
    word-break: keep-all;
    margin: 0 0 0.25rem;
    line-height: 1.2;
}
.tm_dl {
    width: 100%;
    color: var(--white-w_87-sec);
    dt {
        @include dflx_ac_jbet;
        column-gap: 0.5rem;
        margin: 0 0 0.5rem;
        p{
            @include fs_14_medium;
            line-height: 1.3;
        }
    }
    &.pattern{
        dt {p{@include fs_16_bold}}
    }
    dd {
        .badge {
            margin: 0 0 0.25rem;
            min-width: auto;
            letter-spacing: 0.125rem;
        }
        p {
            @include fs_13_regular;
            line-height: 1.4;
            &.pure {
                width: 100%;
                overflow: hidden;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
        }
    }
}
.digon_wrap{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}
.diagon_cont {
    @include dflx_ac_jcent;
    position: relative;
    width: 11.375rem;
    height: 5.75rem;
    padding: 0.5rem;
    overflow: hidden;
    background: url(../images/bg_tract.svg) no-repeat left top;
    background-size: 100% 100%;
    .diagon_tlt{
        position: absolute;
        left: 0.75rem;
        top: 0.75rem;
    }
    .diagon_result{
        padding: 1.5rem 0 0;
    }
    &.sm{
        justify-content: space-between;
        width: 8.5rem;
        height: 3rem;
        padding: 0.8rem 0.7rem 0.5rem 0.6rem;
        column-gap: 0.25rem;
        background: url(../images/bg_tract_sm.svg) no-repeat left top;
        background-size: 100% 100%;
        .diagon_tlt{
            position: static;
        }
        .diagon_result{
            text-shadow: none;
            font-size: 1rem;
            padding: 0;
            column-gap: 0.25rem;
        }
    }
    &.lg{
        width: 12.25rem;
        height: 8.25rem;
        padding: 1rem 0.5rem 0.5rem;
        background: url(../images/bg_tract_lg_.svg) no-repeat left top;
        background-size: 100% 100%;
        flex-direction: column;
    }
}
.diagon_tlt{
    @include fs_14_medium;
    color: var(--primary-pri_100);
    &.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;
    }
}
.diagon_result {
    @include dflx_ae;
    @include fs_28_bold;
    color: var(--primary-pri_100);
    column-gap: 0.375rem;
    .unit{
        @include fs_14_regular;
        line-height: 1.7;
    }
}
.indi_share {
    @include dflx_ac_jbet;
    column-gap: 0.25rem;
    width: 100%;
    margin: 0 0 1rem;
}
.indi_dl {
    @include dflx_ac_jcent;
    flex-direction: column;
    width: 4.25rem;
    height: 4.25rem;
    overflow: hidden;
    padding:0.25rem 0.25rem 0.125rem;
    text-align: center;
    border-radius: 0.125rem;
    border: 0.063rem solid var(--primary-pri_100);
    background-color: var(--etc-bg);
    &.nobord {
        border: none;
    }
    dt {
        @include fs_20_bold;
        @include dflx_ae;
        color: var(--primary-pri_100);
        margin: 0.25rem 0 0 0;
        .unit{
            @include fs_14_regular;
            color: var(--primary-pri_60);
            margin: 0 0 0 0.125rem;
        }
    }
    dd {
        @include fs_13_medium;
        color: var(--primary-pri_100);
    }
    &.half {
        width: 50%;
        height: 5.25rem;
    }
    &.third {
        height: 3rem;
        width: 33.333%;
        dt {
            @include fs_16_bold;
        }
    }
    &.green {
        border: 0.063rem solid #1CBD6D;
        dt, dd {
            color: #1CBD6D;
        }
    }
    &.red {
        border: 0.063rem solid #D60000;
        dt, dd {
            color: #D60000;
        }
    }
}
.indi_chart {
    width: 100%;
    img {
        width: 100%;
    }
}
.chart_text {
    @include fs_13_regular;
    width: 100%;
    min-height:1.375rem;
    padding: 0.25rem 0.125rem 0.125rem;
    text-align: center;
    background-color: var(--white-w_12);
}
.sign_tri2 {
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    cursor: pointer;
    &.jam {
        background: url(../images/sign_jam_28.svg) no-repeat center center;
        background-size: contain;
    }
    &.ambulace {
        width: 2.125rem;
        height: 1rem;
        background: url(../images/ambulance.svg) no-repeat center center;
        background-size: contain;
    }
}
.detail_see {
    @include dflx_ac_jend;
    @include fs_12_light;
    margin: 0.5rem 0 0;
    padding: 0;
    cursor: pointer;
    &:hover, &:focus{
        opacity: 0.8;
    }
    .word {
        color: var(--white-w_87);
    }
    .mark_trig_down12 {
        margin: 0 0 0.1rem 0.25rem;
    }
}
.mark_trig_down12 {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background: url('../images/triangle_down12.svg') no-repeat center center;
    background-size: contain;
}
.label_line{
    @include dflx_as;
    flex-wrap: wrap;
    width: 100%;
    column-gap: 0.5rem;
    .label{
        margin: 0 0 0.5rem;
    }
}
.map_ex1 {
    width: 100%;
    height: 6.25rem;
    position: relative;
    overflow: hidden;
    margin: 0 0 0.5rem;
    img {
        width: 15.5rem;
        height: 6.25rem;
    }
}
.express_wrap {
    width: 100%;
    height: 100%;
    padding: 1.25rem;
    background-color: var(--more-bright-wh_6-to-60);
    display: flex;
    flex-direction: column;
    &.example {
        width: 60rem;
        height: 27rem;
    }
    &.primary {
        padding: 0.75rem;
        border-radius: 0.125rem;
        .monit_top{
            padding: 0 0 0.5rem;
        }
    }
    &.hover {
        border: 0.063rem solid var(--primary-pri_100);
    }
    &.pressed {
        border: 0.063rem solid var(--primary-pri_100);
        background: var(--primary-pri_12);
    }
}
.primary_bg {
    @include box1;
}
.monit_top {
    @include dflx_ac_jbet;
    padding: 0 0 1rem;
    h1{
        @include fs_16_bold;
        color: var(--white-w_87);
    }
    h2{
        @include fs_14_medium;
        color: var(--white-w_87);
    }
}
.exp_cont {
    width: 100%;
    min-height: 6.875rem;
    padding: 1rem;
    background-color: var(--more-bright-wh_6-to-60);
    overflow: hidden;
    @include fs_14_regular;
    &.hauto{
        min-height: auto;
    }
    &.box{
        background-color: var(--white-w_6);
    }
    &.height52{
        min-height: 3.25rem;
        background-color: var(--white-w_6);
    }
}
.exp_cont_text {
    color: var(--primary-pri_100);
}
.express_cont {
    width: 100%;
    height: calc(100% - 2.25rem);
}
.express_board {
    width: 100%;
    margin: 0 0 0.5rem;
}
.exp_top {
    @include dflx_ac_jbet;
    column-gap: 1rem;
    width: 100%;
    height: 2.5rem;
    background-color: var(--more-bright-wh_12-to-6);
    padding: 0 0.75rem;
}
.layout_box{
    @include backFilter;
    padding: 0 1.25rem 1.25rem 1.25rem;
    width: auto;
    border: 0.063rem solid var(--line-pri_40-to-wh_40);
    background: var(--bg_01_80);
    &.four {width: 40rem;}
}
.layout_top{
    @include fs_14_bold;
    padding: 1.25rem 1rem 1rem 0;
    color: var(--primary-to-grayscale-to-bk);
}
.layout_boxes {
    @include dflx_ac_jbet;
    column-gap: 1rem;
    width: 100%;
    height: 2.5rem;
    background-color: var(--white-w_6);
    padding: 0 0.75rem;
}
.exp_dl {
    @include dflx_ac;
    dt {
        @include fs_13_regular;
        width: 3.75rem;
        padding: 0 0.5rem 0 0;
    }
    dd {
        flex: 1;
    }
}
.pressed{
    width: 100%;
    height: 100%;
    background: var(--primary-pri_6);
    border: 0.063rem solid var(--primary-pri_100);
}
.line_contain{
    @include box1;
    @include backFilter_none;
    &.box{
        width: 28.625rem;
        flex: none;
    }
}
.line_inner{
    width: 100%;
    height: calc(100% - 2.625rem);
    padding: 1.25rem;
}
.vert_wrap{
    @include dflx_jbet;
    flex-direction: column;
    row-gap: 1.25rem;
    width: 100%;
    height: 100%;
}
.line_bottom{
    @include dflx_ac_jbet;
    width: 100%;
    column-gap:0.75rem;
}
.pop_top{
    @include dflx_ac_jbet;
    position: relative;
    width: 100%;
    height: 2.625rem;
    padding: 0.5rem 1.25rem 0.4rem;
    box-shadow: inset 0 0 0.375rem 0  rgba(255, 255, 255, 0.50);
    border: 0.063rem solid var(--primary-pri_100);
    background-color: var(--etc-popup_tit);
    color: var(--white-w_100)
}
.check_dl {
    @include dflx_ac;
    width: 100%;
    margin: 1rem 0;
    &:last-child {
        margin-bottom: 0;
    }
    &.current {
        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-60);
    }
    dd {
        @include dflx_ac_jbet;
        flex: 1;
		column-gap: 0.25rem;
        .wrput{
            width: 100%;
        }
        .ch_radio:last-child{
            padding: 0;
        }
    }
}
.ch_radio {
    @include dflx_ac;
    padding: 0 0.75rem 0 0;
    cursor: pointer;
    &.on {
        .radio {
            background-color: #fff;
            border: 0.25rem solid var(--primary-pri_100);
        }
        .word {
            color: var(--primary-pri_100);
        }
    }
    .radio {
        display: inline-block;
        width: 0.9375rem;
        height: 0.9375rem;
        background-color: var(--radio-default);
        border-radius: 100%;
        margin: 0 0.5rem 0 0;
        &.mini {
            width: 0.625rem;
            height: 0.625rem;
            border: 0.125rem solid var(--primary-pri_100);
            margin: 0 0.375rem 0 0;
        }
    }
    .word {
       	@include fs_13_light;
        color: var(--white-w_87-sec);
    }
}
.user_info {
    width: 100%;
}
.pr_sign {
    @include fs_14_regular;
    min-width: 7rem;
    height: 1.75rem;
    padding: 0.45rem 0.5rem;
    background: $bg_grey12;
    border-radius: 0.125rem;
    cursor: pointer;
}
.profile_cont {
    @include dflx_jcent;
    width: 100%;
    padding: 1.25rem 0 3.25rem;
    position: relative;
    .pr_sign, .btn_secondary {
        position: absolute;
        right: 0;
        top: 0;
    }
}
.circle_g32 {
    @include dflx_ac_jcent;
    width: 2rem;
    height: 2rem;
    background: #4A4E66;
    border: 0.125rem solid var(--etc-bg);
    border-radius: 100%;
    overflow: hidden;
    &:hover, &:focus, &.hover{
        background: #636771;
    }
    img {width: 1rem;}
}
.profile_photo {
    position: relative;
    width:5rem;
    height:5rem;
    .circle_g32 {
        position: absolute;
        cursor: pointer;
        right: -0.25rem;
        bottom: -0.25rem;
        z-index: 30;
    }
}
.photo_circle {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: var(--more-visible-wh_60-to-12);
    border-radius: 100%;
    overflow: hidden;
    img {
        @include ab_trans_center;
        width:100%;
        &.img_prof {
            width: 2.5rem;
        }
    }
}
.user_form {
    width: 100%;
}
.check_dl {
    &.user {
        color: var(--white-w_60);
        margin: 0.5rem 0;
        min-height: 1.75rem;
        dt {
            width: 7rem;
        }
        .ch_radio {
            padding: 0 1.875rem 0 0;
        }
    }
}
.calendar_wrap {
    @include dflx_ac_jbet;
    @include border_radius02;
    width: 13.75rem;
    height: 1.75rem;
    padding:0 0.5rem;
    background: $bg_grey12;
    cursor: pointer;
    &.blue {
        @include btn;
        height: 100%;
        border-radius: 0;
    }
    &.transline {
        background: transparent;
        background: $bg_default;
        border: 0.063rem solid $bg_grey38;
    }
}
.icon_calen24 {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background: url(../images/calendar_fff_24.svg) no-repeat center center;
    background-size: 100% 100%;
}
.calen_date {
    @include dflx_ac_jbet;
    width: calc(100% - 2rem);
    padding: 0.1rem 0.25rem 0;
    column-gap: 0.875rem;
    span {
        @include fs_13_light;
        color:$fc_default;
        letter-spacing: 0.031rem;
    }
}
.bott_info {
    @include border_radius02;
    @include backFilter;
    width: 13.125rem;
    height: 11rem;
    overflow: hidden;
    padding: 0.5rem;
    border: 0.063rem solid var(--line-pri_40-to-wh_100);
    background-color:var(--bg_02_60);
    &.hover{
        border: 0.063rem solid var(--primary-pri_40);
    }
    &.medium {
        width: 10.625rem;
        height: 8.75rem;
        background-color :var(--more-bright-wh_6-to-60);
        border: 0.063rem solid #0068E6;
    }
    &.small {
        width: 8.625rem;
        height: 7.5rem;
        background-color: var(--more-bright-wh_6-to-60);
        border: none;
        .smart_top{
            .date{
                @include fs_11_regular;
            }
        }
        .smart_cont {
            padding: 0;
            .sm_txt {
                @include fs_12_regular;
                margin: 0;
            }
            .sm_result {
                font-size: 1.25rem;
                .mini {
                    @include fs_13_regular;
                }
            }
        }
    }
    &.chart {
        height: 10.5rem;
    }
    &.donot {
        background-image: url("../../assets/images/donot_line_labelbox.svg");
        background-repeat: no-repeat;
        background-position: right top;
        background-size: cover;
    }
}
.smart_chart_wrap {
    @include dflx_ac_jcent;
    position: relative;
    width: 100%;
    height: calc(100% - 1.125rem);
    .smart_cont{
        @include ab_trans_center;
        z-index: 3;
    }
    .chart{
        @include dflx_ac_jcent;
        width: 100%;
        height: 100%;
    }
}
.smart_top {
    @include dflx_ac_jbet;
    .date {
        @include fs_12_regular;
        color: var(--white-w_60);
        text-align: right;
    }
}
.smart_cont {
    @include dflx_ac_jcent;
    flex-direction: column;
    width: 100%;
    height: calc(100% - 1.125rem);
    padding: 7% 0 0;
    &.bott {
        padding: 4% 0 0;
        .sm_result {
            margin: 0 0 0.25rem;
            font-size: 1.7rem;
        }
        .sm_txt {
            @include fs_13_regular;
            margin: 0 0 0.25rem;
        }
        .percent_txt {
            @include fs_13_regular;
        }
    }
    .sm_result {
        margin: 0 0 0.188rem;
    }
}
.sm_result {
    @include dflx_ac_jcent;
    @include fs_24_bold;
    flex-wrap: wrap;
    width: 100%;
    letter-spacing: 0;
    .mini {
        @include fs_14_regular;
        margin: 0.5rem 0 0 0.25rem;
    }
}
.sm_txt {
    @include fs_12_regular;
    text-align: center;
    word-break: keep-all;
    &.mini {
        font-size: 0.7rem;
    }
}
.percent_txt {
    @include dflx_ac;
    font-size: 0.75rem;
    line-height: 1;
    margin: 0;
    &.equal {
        color: #FFBF00;
    }
    &.up {
        color: #E62222;
    }
    &.down {
        color: var(--etc-b_text);
    }
    &.down2 {
        color: var(--etc-b_text);
    }
    .mini {
        @include fs_13_regular;
        margin: 0 0.25rem 0 0
    }
    .ic {
        margin: 0 0 0 0.125rem;
    }
}

.ic_equal {
    display: inline-block;
    width: 0.75rem;
    height: 0.875rem;
    background: url('../images/ic_equal.svg') no-repeat center center;
    background-size: auto 100%;
}
.ic_up {
    display: inline-block;
    width: 0.75rem;
    height: 0.875rem;
    background: url('../images/ic_up.svg') no-repeat center center;
    background-size: auto 100%;
}
.ic_down {
    display: inline-block;
    width: 0.75rem;
    height: 0.875rem;
    background: url('../images/arrow_bold_down_fff_12.svg') no-repeat center center;
    background-size: auto 100%;
}
.vert_2line {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 0.5rem;
    margin: 0 0 0.75rem;
}
.speed_box {
    width: 100%;
    height: 3rem;
    padding: 0.25rem;
    overflow: hidden;
    background: var(--more-visible-wh_6-to-60);
    text-align: center;
    &.table {
        background: transparent;
        border: 0.063rem solid var(--white-w_20);
        padding: 0.3rem 0.6rem;
    }
    &.bord {
        padding: 0;
        .table_dl {
            height: 50%;
            dt {
                height: 100%;
                justify-content: center;
            }
        }
    }
    .img_chart {
        height: 100%;
    }
    .speed_result {
        padding: 0;
    }
}
.table_dl {
    @include dflx_ac_jbet;
    @include fs_12_light;
    color: var(--white-w_87-sec);
    width: 100%;
    dt {
        @include dflx_ac;
        width: 2.2rem;
        height: 1.15rem;
        border-right: 0.063rem solid var(--white-w_20);
    }
    dd {
        @include dflx_ac_jend;
        flex: 1;
    }
}
.speed_result {
    @include fs_20_bold;
    color: var(--primary-pri_100);
    .unit {
        @include fs_12_regular;
    }
}
.exp_weather {
    @include dflx_ac_jbet;
    width: 100%;
    height: 6rem;
    margin: 0 0 0.25rem;
    overflow: hidden;
    padding:0.25rem;
    background-color: var(--more-visible-wh_6-to-60);
}
.weather_cont {
    width: 100%;
    height: 100%;
}
.weather_sign {
    @include dflx_ac_jcent;
    //flex-direction: column;
}
.weath_record {
    @include fs_13_regular;
    display: block;
    letter-spacing: 0.063rem;
}
.weath_dl {
    @include dflx_jbet;
    width: 100%;
    padding:0.2rem 0;
    dt {
        @include fs_12_regular;
        color: var(--white-w_87);
        padding: 0 0.625rem 0 0;
    }
    dd {
        @include fs_12_regular;
        color: var(--white-w_87-sec);
    }
}
.weather_box{
    width: 100%;
    height: 100%;
    padding: 0.5rem;
    overflow: hidden;
    border: 0.063rem solid var(--white-w_20);
}
.weath_mark56 {
    display: inline-block;
    width: 2.5rem;
    height: 2.5rem;
    &.sun {
        background: url('../images/sometimes_snow_or_rain_56.svg') no-repeat center center;
        background-size: contain;
    }
}
.dust_cont{
    @include dflx_ac_jcent;
    flex-direction: column;
    width: 100%;
    min-height: 5.25rem;
    text-align: center;
    padding: 0.5rem;
    background-color: var(--more-visible-wh_6-to-60);
    overflow: hidden;
    &.hauto{
        min-height: auto;
    }
    .unit{
        @include fs_12_regular;
        color: var(--white-w_60)
    }
}

.fore_box {
    @include dflx_ac_jcent;
    width: 100%;
    //height: 3.25rem;
    padding:0.5rem;
    margin: 0 0 0.25rem;
    background: var(--more-visible-wh_6-to-bk);
    border-radius: 0.125rem;
}
.fore_dl {
    text-align: center;
    padding: 0;
    letter-spacing: 0.038rem;
    width: 40%;
    dt {
        @include fs_13_medium;
        @include txt_ellip;
        color: #ffe043;
        width: 100%;
        padding-top: 0.2rem;
    }
    dd {
        @include fs_13_regular;
        color: #ffe043;
    }
}
.fore_cent {
    @include dflx_ac_jcent;
    flex-direction: column;
    text-align: center;
    padding: 0 0.25rem;
   //width: 12%;
    width: 2.25rem;
    .img_arrow {
        width: 2.25rem;
        margin-bottom: 0.25rem;
    }
    .status {
        @include fs_13_medium;
        margin: 0.25rem 0 0;
        &.danger {
            color: #FF1F55;
        }
    }
}
.bg_traffic {
    width: 100%;
    background-color: var(--more-visible-wh_6-to-60);
}
.line_bus {
    width: 100%;
    height: 3.25rem;
    display: flex;
    position: relative;
    padding-left: 2.5rem;
}
// .line_bus:first-child .bb_line {
//     height: 50%;
//     top: 50%;
// }
// .line_bus:last-child .bb_line {
//     height: 50%;
//     top: 0px;
// }
.bb_line {
    position: absolute;
    left: 2.5rem;
    top: 0;
    width: 0.125rem;
    height: 100%;
    background-color: #00bd78;
    z-index: 3;
    &.org {
        background-color: #fc8a18;
    }
    &.red {
        background-color: #e62222;
    }
}
.bb_road {
    position: relative;
    width: 100%;
    height: 100%;
}
.ic_artff {
    width: 1rem;
    height: 1rem;
    background: url('../images/arr_traff_16.svg') no-repeat center center;
    background-size: contain;
    position: absolute;
    top: 50%;
    top: 62%;
    left: 2.5rem;
    margin-top: -1rem;
    margin-left: -0.5rem;
    z-index: 5;
}
.list_bus {
    width: 100%;
    padding: 0.4rem 0 0.25rem 1.25rem;
    display: flex;
    align-items: center;
    border-bottom: 0.063rem solid var(--white-w_20);
    overflow: hidden;
}
.bus_dl {
    width: 100%;
}
.bus_dl dd {
    width: 100%;
}
.bus_dl dd p {
    @include fs_13_regular;
    overflow: hidden;
    white-space: nowrap;
    padding: 0.125rem 0 0 0;
    &.hints {
        @include fs_12_light;
        color: var(--white-w_60);
        margin: 0.25rem 0 0;
    }
}

.emer_vms {
    width: 100%;
}
.vms_top {
    @include dflx_ac_jcent;
    width: 100%;
    min-height: 1.5rem;
    overflow: hidden;
    padding: 0 0.5rem;
    background: var(--more-visible-wh_6-to-bk);
    .arr_right {
        width: 0.75rem;
    }
    &.top{
        background: var(--more-visible-wh_6-to-60);
    }
}
.vms_word {
    @include fs_14_bold;
    margin: 0 0.625rem;
    color: var(--white-w_87-sec);
    &.danger {
        margin: 0;
        color: #ff1f55;
    }
}
.vms_monit {
    width: 100%;
    height: 11.75rem;
    background-color: #000;
    padding: 0.75rem;
    overflow: hidden;
    img {
        width: 15.5rem;
        height: 10.188rem;
    }
}
.park_dl {
    width: 100%;
    display: flex;
    padding: 0.375rem 0;
    letter-spacing: 0.063rem;
    dt {
        width: 4.5rem;
        padding: 0 0.625rem 0 0;
        @include fs_13_regular;
    }
    dd {
        flex: 1;
        @include fs_13_regular;
        color: var(--white-w_87-sec);
    }
}
.emer_detail {
    width: 100%;
    padding:1rem;
    border-radius: 0.125rem;
    background-color: var(--more-visible-wh_6-to-60);
}
.label_txt {
    @include txt_ellip;
    @include fs_13_regular;
    flex: 1;
    padding: 0.125rem 0 0 0.5rem;
    line-height: 1;
}
.sp_graph {
    display: inline-block;
    min-width: 0.375rem;
    height: 0.375rem;
    background-color: #0068E6;
    &.sky{
        background-color: $ui_sky;
    }
}
.drop_content {
    width: 100%;
    padding:1.25rem;
    background: var(--bg_01_80);
    border: 0.063rem solid var(--line-pri_40-to-wh_40);
}

.uni_table01{
    width: 100%;
    &.sm{
        thead{
            th{
                height: 2rem;
                padding: 0.1rem 0.5rem 0;
            }
        }
        tbody{
            td{
                height: 2rem;
                padding: 0.1rem 0.5rem 0;
            }
        }
    }
    thead{
        th{
            @include fs_13_regular;
            color: var(--white-w_87);
            line-height: 1.2;
            background-color:var(--more-bright-wh_16-to-6);
            border-right: 0.063rem solid var(--white-w_12);
            text-align: center;
            vertical-align: middle;
            height: 2.25rem;
            padding: 0.1rem 0.75rem 0;
            &:last-child {
                border-right: none;
            }
        }
    }
    tbody{
        tr{
            background-color: var(--more-visible-wh_6-to-100);
            &:hover{
                td{
                    background: rgba(39, 212, 255, 0.2);
                }
            }
            td{
                @include fs_13_regular;
                color: var(--white-w_87);
                line-height: 1.2;
                background: var(--more-bright-wh-6-to-100);
                border-right: 0.0625rem solid var(--white-w_12);
                border-top: 0.125rem solid var(--bg_01_80);
                text-align: center;
                vertical-align: middle;
                height: 2.25rem;
                padding: 0.1rem 0.75rem 0;
                &:first-child{
                    width: 2.75rem;
                }
                &:last-child{
                    border-right: none;
                }
            }
        }
    }
}

/*header*/
header{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 48px;
	z-index: 200;
    background-color: var(--bg_01_80);
   
    &.two_line {
        height: 5rem;
        background-color: var(--bg_01_80);
        border-bottom: 0.063rem solid var(--line-wh_20-to-100);
    }
}   
.header_in{
    @include dflx_ac_jbet;
    @include backFilter_solve;
    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;
    column-gap: 16px;
    padding:0 16px 0 0;
}
.header_logo{
	@include dflx_ac;
	a{
        @include dflx_ac;
	}
}
.logo_hd_kisa{
    width: 96px;
    margin-bottom: 8px;
}
.sp_logo_uniplus{
    display: block;
    width: 9.125rem;
    height: 1.25rem;
    background: url('../images/logo_uniplus.svg') no-repeat left center;
    background-size: cover;
}
.gnb{
    height: 100%;
    ul{
        @include dflx_ac;
        height: 100%;
        li{
            a{
                @include fs_14_medium;
                display: block;
                color: var(--more-visible-wh_60-to-100);
                letter-spacing: -0.031rem;
                word-break: keep-all;
                cursor: pointer;
                &.on, &:hover, &:focus{
                    color: var(--primary-pri_100);
                }
            }
        }
    }
    &.two_line{
        height: 100%;
        ul{
            @include dflx_ac;
            height: 50%;
            li{
                a{
                    @include fs_14_regular;
                    display: block;
                    color: var(--more-visible-wh_60-to-100);
                    letter-spacing: -0.031rem;
                    word-break: keep-all;
                    cursor: pointer;
                    &.on, &:hover, &:focus{
                        color: var(--primary-pri_100);
                    }
                }
            }
        }
    }
}
.weath_mark32 {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    &.very_bad{
        background: url(../images/air_quality_very_bad_32.svg) no-repeat center center;
        background-size: cover;
    }
    &.sun{
        background: url(../images/wt_sun32.svg) no-repeat center center;
        background-size: cover;
    }
    &.some_snow_rain{
        background: url(../images/sometimes_snow_or_rain_32.svg) no-repeat center center;
        background-size: cover;
    }
}
.time_mark20{
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    &.clock{
        background: url(../images/icon_clock_20.svg) no-repeat center center;
        background-size: cover;
    }
    &.clock_direct{
        background: url(../images/icon_clock_direction_20.svg) no-repeat center center;
        background-size: cover;
    }
}
.header_right{
	@include dflx_ac;
    column-gap: 1.75rem;
    padding:0 0 0 1rem;
}
.hd_status{
    @include dflx_ac;
    .hd_text{
        margin: 0 0 0 0.4rem;
    }
}
.hd_text{
    @include dflx_ac;
    column-gap: 0.25rem;
    span{
        @include fs_14_regular;
        color: var(--white-w_87-sec);
    }
}
.hd_profile{
    position: relative;
    width: 1.875rem;
    height: 1.25rem;
}
.profile_box{
    @include dflx_ac_jcent;
    column-gap: 0.125rem;
    cursor: pointer;
    .profile20{
        opacity: 0.6;
    }
    .comma_under8{
        opacity: 0.6;
    }
    &.on{
        .profile20{
            opacity: 1;
        }
        .comma_under8{
            opacity: 1;
            transform: rotate(180deg);
        }
    }
}
.profile20{
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/member_fff_20.svg) no-repeat center center;
    background-size: cover;
}
.comma_under8{
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    background: url(../images/arrow_down_fill_fff_12.svg) no-repeat center center;
    background-size: cover;
}
.board_line {
    position: relative;
    //width: 20rem;
    .btn_arrow_l{
        position: absolute;
        right: -1.7rem;
        top: 0;
        box-shadow: 1rem 0 1.5rem 0 rgba(4, 9, 26, 0.16);
        &.left{
            right: auto;
            left: -1.7rem;
        }
    }
}
.indi_withtab{
    width: 100%;
    position: relative;
    padding:2.375rem 0 0;
    .indi_tabs{
        position: absolute;
        left: 0;
        top: 0;
    }
}
.indi_tabs{
    @include dflx_ac_jbet;
    width: 100%;
    button{
        border-radius: 0;
        &:first-child{
            border-radius: 0.125rem 0 0 0;
        }
    }
    &.top{
        @include border_radius02;
        background-color: var(--bg_01_80);
        height: 2.5rem;
        padding: 0 0.5rem;

        border-top: 0.063rem solid var(--box1_border);
        border-left: 0.063rem solid var(--box1_border);
        border: 0.063rem solid var(--line-pri_40-to-wh_100);
    }
}
.busrt_dl{
    @include dflx_ac;
    dt{
        padding: 0 0.625rem 0 0;
    }
    dd{
        @include dflx_ac;
    }
}
.busrt_wrap{
    @include dflx_ac;
    column-gap: 0.5rem;
    height: 1.25rem;
    padding: 0 0.125rem;
    background: transparent;
    border: 0.063rem solid var(--white-w_20);
    border-radius: 0.125rem;
    span{
        @include fs_11_regular;
        &.green{
            color: #008C69;
        }
        &.red{
            color: #FF1F55;
        }
    }
}
.express_paging{
    @include dflx_ac_jcent;
    padding: 0.5rem 0 0;
    .pg_ball,.pg_prev,.pg_next {
        margin: 0 0.25rem;
    }
}
.pg_ball {
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    background: var(--primary-pri_40);
    border-radius: 100%;
    cursor: pointer;
    &.on {
        background: var(--primary-pri_100);
    }
    //&:hover{
    //    background: var(--primary-pri_100);
    //}
}
.pg_prev {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
  //  background: url(../images/arrow_left_sky_12.svg) no-repeat center center;
   // background-size: contain;
    cursor: pointer;
}
.pg_next {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    //background: url(../images/arrow_right_sky_12.svg) no-repeat center center;
    //background-size: contain;
    cursor: pointer;
}

//marker
.marker{
    @include dflx_ac_jcent;
    cursor: pointer;
    img{
        width: 100%;
    }
    &.mk48{
        width: 3rem;
        height: 3rem;
    }
    &.mk56{
        width: 3.5rem;
        height: 3.5rem;
    }
}

.toggle{
    cursor: pointer;
}
.heat_box{
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: #fff;
}
.check_text{
    @include dflx_as;
    flex-wrap: wrap;
    cursor: pointer;
    .text{
        @include fs_13_regular;
        margin: 0.25rem 0 0 0.375rem;
    }
}
.select_wrap{
    .selectbox{
        width: 100% !important;
    }
}

.start_dl {
    width: 100%;
    padding: 0;
    text-align: center;
    line-height: 1.3;
    dt {
        @include dflx_jcent;
        @include fs_24_bold;
        color: var(--primary-pri_100);
      //  text-shadow: 0 0 0.375rem rgba(39, 212, 255, 0.5);
    }
    dd {
        @include fs_13_regular;
        color: var(--primary-pri_100);
    }
}
.record {
    @include fs_11_light;
    color: var(--white-w_60);
}

.park_space {
    @include dflx_ac_jcent;
    width: 5.625rem;
    height: 2.75rem;
}
.park_sign {
    @include dflx_ac_jcent;
    width: 4.75rem;
    height: 1.875rem;
    overflow: hidden;
    padding: 0 0.125rem 0.3125rem 1.25rem;
    text-align: right;
    cursor: pointer;
    .park_txt {
        @include fs_12_regular;
        display: block;
        overflow: hidden;
    }
    &.danger {
        background: url('../images/park_danger.svg') no-repeat center center;
        background-size: contain;
        &.on {
            width: 5.5625rem;
            height: 2.875rem;
            background: url('../images/park_danger_on.svg') no-repeat center center;
            background-size: contain;
        }
    }
}
.bel_line{
    position: relative;
    width: 2.5rem;
    height: 0.0625rem;
    background :var(--primary-pri_100);
    .bel_circle{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        &.left{
            left: 0;
        }
        &.right{
            right: 0;
        }
    }
}
.bel_circle{
    width: 0.375rem;
    height: 0.375rem;
    display: inline-block;
    background: #fff;
    border: 0.063rem solid var(--primary-pri_100);
    border-radius: 100%;
}
.chart_label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    &.right_top{
        left: auto;
        transform: none;
        right: 0;
        top: 0rem;
        bottom: auto;
    }
    &.left_bottom{
        left: 0;
        transform: none;
        right: auto;
        top: auto;
        bottom:0rem;
    }
}
.xydual_wrap {
    @include dflx_as;
    width: 100%;
    #XYChartDual{
        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;
    font-size: 14px;
    font-weight: 500;
    padding: 8px 12px;
    height: 28px;
    @include dflx_ac_jcent;
    border-radius: 50px;
    padding: 8px 12px;
    overflow: hidden;
    background-color: var(--alpha-bk-to-whbk-10);
    word-break: keep-all;
}
.login_txt {
    color: var(--alpha-bk-to-whbk-100);
    font-size: 32px;
    font-weight: 700;
}
.num_txt {
    color: var(--alpha-bk-to-whbk-60);
    font-size: 16px;
    font-weight: 700;
    margin-top: 20px
}
.preview_box {
    @include dflx_ac_jcent;
    flex-direction: column;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.file_realname {
    padding: 0 0.5rem;
    overflow: hidden;
    line-height: 1rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    // color: var(--white-w_60);
    color: var(--white-w_100-sec);
}
.relative {position: relative;}
.upload_box {
    @include dflx_ac_jcent;
    flex-direction: column !important;
    background: var(--white-w_6);
    &.line{
        @include dflx_ac;
        @include border_radius02;
        flex-direction: unset !important;
        border: 0.063rem solid var(--white-w_20);
        background-color: transparent;
    }
}
.image_upload {
    @include backFilter;
    position: absolute;
    z-index: 9;
    top: 0.5rem;
    right: 0.5rem;
    cursor: pointer;
}
.dim_bg {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}
.image_modify {
    @include border_radius02;
    overflow: hidden;
    .image_upload {
        @include backFilter;
    }
}
.image_center {
    object-fit: cover;
    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;
}
@keyframes spinAni {
    0% {transform: rotate(0deg);}
    100% {transform: rotate(360deg);}
}
.progress_bar {
    background: var(--white-w_20);
    .progress_percetage {
        width: 30%;
        height: 100%;
        background-color: var(--primary-pri_100);
    }
}
.text_shadow50 {text-shadow: 0 0 0.75rem var(--primary-pri_100)}
.loading_text_animation {
    @include fs_14_bold;
    opacity: 0;
    overflow: hidden;
    animation: loadingText 1.5s infinite linear;
    color: var(--primary-pri_100);
}
@keyframes loadingText {
    0% {opacity: 0;}
    30%,100% {opacity: 100;}
}
.pd-2-12{padding: 0.125rem 0.75rem}
.pd-20-24{padding:1.25rem 1.5rem}

// popover
.popover_box {
    position: relative;
    //@include popup_shadow;
    .placement {
        @include box_shadow16;
        display: none;
        position: absolute;
        &.show {display: block;}
        &.top {bottom: 2.625rem;}
        &.left {left: 0;}
        &.right{right: 0;}
        &.bottom {top: 2.625rem}
        &.left_bottom {
            left: 2.75rem;
            bottom: 0;
        }        
        &.right_bottom {
            right: 2.75rem;
            bottom: 0;
        }
        &.left_top {
            left: 2.75rem;
            top: 0;
        }        
        &.right_top {
            right: 2.75rem;
            top: 0;
        }  
        &.top_right {
            right: 2.75rem;
        }
        &.top_left {
            left: 2.75rem;
            top: 0;
        } 
    }
   // border-bottom: 0.063rem solid var(--line-wh_30-to-60);
}
.popover_title,
.popover_contents {
    @include box_shadow16;
    border-style: solid;
    border-color: var(--line-wh_30-to-60);
    overflow: hidden;
}
.fc_popover {
    @include fs_13_medium;
    color: var(--white-w_100-sec);
}
.fs_info {
    @include fs_12_regular;
    color: var(--white-w_100-sec);
    text-align: center;
}
.fs_unit {
    @include fs_12_regular;
    color: var(--white-w_60);
    text-align: center;
}
.popover_title {
    @include backFilter;
    @include dflx_ac_jbet;
    height: 2.625rem;
    padding: 0 1rem 0 1.25rem;
    border-width: 0.063rem 0.063rem 0 0.063rem;
    border-radius: 0.125rem 0.125rem 0 0;
    background: rgba(0, 0, 13, 0.4);
    font-weight: 500;
    color: var(--white-w_100-sec);
    .popover_close {transform: translate(0, -0.063rem);}
}
.popup_title_bg {
    @include backFilter;
    @include dflx_ac_jbet;
    height: 2.625rem;
    padding: 0 1rem 0 1.25rem;
    border-width: 0.063rem 0.063rem 0 0.063rem;
    border-radius: 0.125rem 0.125rem 0 0;
    background: rgba(0, 0, 13, 0.4);
    font-weight: 500;
    color: var(--white-w_100);
    .popup_close {transform: translate(0, -0.063rem);}
  
}
.pop_span {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
}
.popover_title{
    background-color: var(--black-bk_100);
}
.popover_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;
}
.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;
    height: 0.75rem;
}
// popup
.popup_title_bg {
    @include border_radius00;
    background: var(--etc-popup_tit);
    border: 0.063rem solid var(--primary-pri_100);
    box-shadow: inset 0 0 0.75rem $bg_grey50;
}
.popup_title{
    @include fs_14_bold;
    color: var(--white-w_100);
    &.fs_16_bold {
        @include fs_16_bold;
    }
}
.popup_contents {
    @include backFilter;
    @include border_radius00;
    min-height: 9.625rem;
    padding: 0 0;
    background: var(--bg_01_80);
    border-width: 0 0.063rem 0.063rem 0.063rem;
    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  {
        @include backFilter;
        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);
    }
    &.label {
        @include border_radius02;
        display: flex;
        padding: 0.625rem;
    }
    &.point {
        @include backFilter;
        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;
    &.on {
        &:after {
            transform: rotate(180deg);
        }
    }
    &:after {
        @include selector_el;
        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: $bg_grey06;
    .inner_head {
        height: 2.5rem;
        padding: 0.625rem 0.75rem;
        line-height: 1.25rem;
    }
}
.inner_card_type1 {
    padding: 0 0.75rem 0.75rem;
    .inner_body {
        background: $bg_grey06;
    }
}
.inner_card_type2 {
    .inner_head {
        background: $bg_grey06;
    }
}

.map_color__tag {
    @include numberDefault();
    @include border_radius02;
    border: 0.063rem solid $fc_white;
}
// checkbox, radio
.checkbox_type {
    label {
        position: relative;
        padding-left: 1.625rem;
        cursor: pointer;
        line-height: 1rem;
        &:after {
            @include selector_el;
            @include border_radius02;
            top: 0.063rem;
            left: 0.125rem;
            width: 1rem;
            height: 1rem;
            border: 0.063rem solid var(--white-w_60);
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            opacity: 0.6;
        }
    }
    input[type=checkbox]:checked + label {
        &:after {
            border: 0.063rem solid var(--primary-pri_100);
            background: url(../images/checkbox_checked.svg) 0.125rem center no-repeat;
            background-size: 0.625rem auto;
            opacity: 1;
        }
        color: var(--primary-pri_100)
    }
    input[type=checkbox]:disabled + label, .disabled {
        &:after {
            border:none;
            background: var(--white-w_20);
        }
        color: var(--white-w_20);
    }
    &.part {
        align-self: center;
        color: var(--white-w_100-sec);
        input[type=checkbox]:checked + label {
            &:after {
                background: url(../images/minus_sky_12.svg) center no-repeat;
                opacity: 1;
            }
            color: var(--white-w_100-sec);
        }
    }
    &.tree {
        label {
            &:after {
                border: 0.063rem solid var(--white-w_100-sec);
                opacity: 0.8;
            }
        }
        align-self: center;
        color: var(--white-w_100-sec);
        input[type=checkbox]:checked + label {
            &:after {
                border: 0.063rem solid var(--primary-pri_100);
                background: url(../images/checkbox_checked.svg) 0.125rem center no-repeat;
                background-size: 0.625rem auto;
                opacity: 1;
            }
            color: var(--white-w_100-sec);
        }
    }
    &.login {
        label {
            &:after {
                @include border_radius50;
                top: 0;
                left: 0;
                width: 1rem;
                height: 1rem;
                border: none;
                background: var(--white-w_40);
                opacity: 0.6;
            }
        }
        input[type=checkbox]:checked + label {
            &:after { 
                border:none;
                background:  rgba(0, 104, 230, 1) url(../images/checkbox_login_checked.svg) 0.125rem 0.188rem no-repeat;
                opacity: 1;
            }
            color: inherit;
        }
    }
    &.td label {padding-left: 1.25rem;}
}
.radio_type {
    label {
        position: relative;
        padding-left: 1.25rem;
        cursor: pointer;
        &:after {
            @include selector_el;
            @include border_radius50;
            top: 0.125rem;
            left: 0;
            width: 0.875rem;
            height: 0.875rem;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            background: var(--white-w_40);
        }
    }
    input[type=radio]:checked + label {
        &:after {
            border: 0.188rem solid var(--primary-pri_100);
            background: $fc_white;
        }
        color: var(--primary-pri_100);
    }
    input[type=radio]:disabled + label, .disabled {
        &:after {
            background: $bg_grey10;
        }
        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);
    }
    .map_control_rate:after,
    .rate_block {
        background-color: var(--white-w_40);
    }
}
.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;
}
.discrete_text{
    @include fs_12_regular;
    color: var(--white-w_60);
}
.map_control_rate:after {z-index: 1;}
.map_control_rate {
    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);
}
.map_timeline {
    &.small {
        div {height: 0.25rem;}
    }
    > div {
        width: 0.063rem;
        height: 0.5rem;
        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;
    }
}
.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;
    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;
    &: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;
    }
}
// pagination
.btn_pagination{
    @include dflx_ac_jcent;
    @include numberDefault($width: 1.25rem, $height: 1.25rem, $fs: 0.75rem);
    @include border_radius02;
    color: var(--white-w_100-sec);
    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;
    display: flex;
    padding: 1.25rem 1.25rem 0.75em 0.75em;
    background: var(--blur_02_60);
    &.default {
        flex-direction: column;
    }
    &.mini {
       // @include box_shadow16;
        @include bg_blur30;
        padding: 0.75em 3.75rem;
        white-space: nowrap;
    }
}
.playbar_text{
    @include fs_14_medium;
    color: var(--white-w_87);
}

.playbar_stick {
    @include dflx_ac_jbet;
    position: relative;
    &:after{
        @include selector_el;
        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_divider {
        width: 0.063rem;
        height: 0.625rem;
        background: var(--white-w_60);
    }
    .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{
    @include fs_14_medium;
    color:var(--white-w_87-sec);
}
.playing_time{
    @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;
    flex-direction: column;
    gap: 0.125rem;
    position: absolute;
    padding: 0.5rem;
    background: rgba(4, 9, 26, 0.8);
    border: 0.063rem solid $bg_grey38;
    white-space: nowrap;
}
.custom_overlay{
    @include dflx_ac_jcent;
    flex-direction: column;
    gap: 0.125rem;
    padding-top: 0.25rem;
    background-image: url(../images/info_window_graphic.svg);
    background-size: cover;
    &.large {
        width: 7.5rem;
        height: 7.5rem;
    }
    &.small {
        width: 5rem;
        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;
    // @include backFilter;
    z-index: 1;
    padding: 0 1.25rem;
    background: var(--bg_01_80);
    border-bottom: 0.063rem solid var(--line-wh_20-to-100);
    &:before {
        @include selector_el;
        @include backFilter;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    //div {z-index: 1;}
}
.lnb_box {
    @include dflx_ac;
    z-index: 1;
    padding: 0 1.25rem;
    background: var(--bg_01_80);
    border-bottom: 0.063rem solid var(--line-wh_20-to-100);
    &:before {
        @include selector_el;
        @include backFilter;
        z-index: -1;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--bg_01_80);
    }
    //div {z-index: 1;}
    &.center {
        display: unset;
        padding: 1.25rem 0;
    }
}
.z_index3{z-index: 3 !important;}
.gnb_box, .footer_nav {
    position: relative;
    .gnb_anchor {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
}
.btn_gnb_split {
    @include button_secondary;      
    width: auto !important;
    font-weight: 500;
    color: var(--white-w_87);
    background: var(--white-w_12);
    &.selected {
        @include backFilter;
        background: var(--btn-btn_selected);
        color: var(--white-w_100);
    }
}
.gnb_anchor {
    @include dflx_as;
    a {
        @include fs_14_medium;
        color: var(--white-w_60);
        color: var(--more-visible-wh_60-to-100);
        .selected,
        &:hover, &:focus, &.on {
            color: var(--primary-pri_100);
            font-weight: 700;
        }
    }
}
.lnb_anchor, .lnb_sub_anchor  {
    background: var(--bg_01_80);
    @include dflx_as;
    a {
        @include fs_14_medium;
        color: var(--white-w_60);
        &.selected,
        &:hover, &:focus, &.on {
            color: var(--primary-pri_100);
            font-weight: 500;
        }
        &.black{
            color: var(--more-visible-wh_60-to-100);
        }
    }
    &.fixed{
        a{
            color: var(--more-visible-wh_60-to-100);
            .selected,
            &:hover, &:focus, &.on {
                color: var(--primary-pri_100);
                font-weight: 500;
            }
        }
    }
    &.center {
        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;
    @include backFilter;
    height: 2.5rem;
    background-color: var(--bg_01_80);
    border: 0.063rem solid var(--line-wh_12-to-100);
    &.on {
        .search_bar_input {
            display: block;
        }
    }
    .btn_icon {
        &:not(:last-child) {
            border-right: 0.063rem solid $bg_grey12;
        }
    }
}
.search_bar_input {
    display: none;
    padding: 0.375rem 0.5rem;
}
.btn_fnb_search {
    @include dflx_ac_jcent;
    align-self: stretch;
}
.footer_nav {
    @include dflx_ac;
    position: absolute;
    left: 0;
    right: 0;
    height: 3rem;
    background: var(--etc-FNB);
    border-top: 0.063rem solid var(--white-w_12);
    .icon_ffb{
        box-shadow: unset;
    }
    .footer_ffb{
        background: var(--bg_01_80);
        box-shadow: unset;
        .icon_ffb {
            background: var(--etc-FNB);
            box-shadow: unset;
            &:hover, &.selected{
                background: rgba(39, 212, 255, 0.06);
            }
        }
    }
}
.footer_nav_ {
    @include dflx_ac;
    position: absolute;
    left: 0;
    right: 0;
    height: 3rem;
    background: var(--bg_01_80);
}
.footer_ffb {
    .icon_ffb {
        @include dflx_ac_jcent;
        border-top: 0;
        border-bottom: 0;
        border-right: 0;
        backdrop-filter: unset;
    }
}
.side_contents {
    @include backFilter;
    @include box_shadow16;
    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-style: solid;
    // 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;
    padding: 0.5rem 1rem;
    border-radius: 0.125rem;
    border: 0.063rem solid rgba(255, 255, 255, 0.12);
    color: var(--white-w_87);
    width: 9rem;
    &.on {
        background: var(--primary-pri_20);
        color: var(--primary-pri_100);
    }
}
// selectbox
.selectbox, .selectboxSample {
    @include dflx_ac_jbet;
    @include border_radius02;
    position: relative;
    padding: 0 0.75rem;
    cursor: pointer;
    &.line {
        box-shadow: 0 0 0 0.063rem inset var(--white-w_40);
    }
    &.fill {
        background: var(--more-visible-wh_12-to-6);
        .selectbox_text {
            color: var(--white-w_87-sec);
        }
    }
    &.fill.line {
        box-shadow: 0 0 0 0.063rem inset var(--white-w_40);
        background-color: var(--more-visible-wh_12-to-6);
    }
    &.on {
        &:not(.dropdown) {
            box-shadow: 0 0 0 0.063rem inset var(--primary-pri_100) !important;
            outline: 0.188rem solid var(--primary-pri_20);
        }
        .selectbox_text {
            color: var(--white-w_87);
        }
        .selectbox_arrow {
            opacity: 1;
            transform: rotate(180deg);
        }
        .selectbox_options {
            display: block;
        }
        .box_bg {
            display: block;
        }
    }    
    .selectbox_arrow {opacity: 0.6}
    .selectbox_text {
        @include fs_13_regular;
        overflow: hidden;
        line-height: 1;
        text-overflow: ellipsis;
        color: var(--white-w_40);
        &.selected {
            color: var(--white-w_87) !important;
        }
    }
    label {
        padding: 0.125rem 0 0;
        cursor: pointer;
    }
    &.disabled {
        .selectbox_text {
            color: var(--white-w_20);
        }
    }
}
.box_bg {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    &.on {
        display: block;
    }
}
.hidden_zone {
    display: block;
}
.selectbox_options {
    @include backFilter;
    @include border_radius02;
    display: none;
    position: absolute;
    z-index: 9;
    top: 1.875rem;
    left: 0;
    right: 0;
    max-height: 7.5rem;
    padding: 0.1875rem 0;
    background-color: var(--bg_01_80);
    border: 0.063rem solid var(--line-pri_40-to-bk_40);
    .option {
        @include dflx_ac;
        @include fs_13_regular;
        height: 1.75rem;
        padding: 0 0.5rem 0 0.75rem;
        &.selected {
            background: var(--primary-pri_20);
        }
        &:hover, &:focus {
            background: var(--primary-pri_20);
        }
    }
}
.date_wrap {
    .datebox {
        width: 100% !important;
    }
}
.datebox {
    @include dflx_ac;
    height: 1.75rem;
    background-color: rgba(255, 255, 255, 0.1);
    border: 0.063rem solid rgba(255, 255, 255, 0);
    border-radius: 0.125rem;
    line-height: 1;
    padding: 0 0.75rem;
    &.line {
        background-color: transparent;
        border: 0.063rem solid $bg_grey38;
    }
    &:focus, &.on {
        border: 0.063rem solid #27D4FF !important;
        outline: 0.188rem solid rgba(39, 212, 255, 0.2);
    }
}
.datepicker {
    @include fs_13_regular;
    background-image: url(../images/calendar_fff_24.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 0.25rem) center;
    background-size: 1.5rem auto;
    &:focus, &.on {
        background-image: url(../images/calendar_sky_24.svg);
        background-size: 1.5rem auto;
        background-repeat: no-repeat;
        outline: 0.188rem solid var(--primary-pri_20);
        border: 0.063rem solid var(--primary-pri_100);
        color: var(--white-w_87) !important;
    }
    color: var(--white-w_87) !important;
    &.default {
        color: var(--white-w_40) !important;
    }
}
.stepper_box {
    display: grid;
    .wrput {grid-row: 1/3}
    .wrput.selected {            
        border: 0.063rem solid var(--white-w_60);
    }
    .wrput.disabled {        
        border: 0.063rem solid var(--white-w_12);
        color: var(--white-w_40);
    }
}
.stepper_arrow {
    @include dflx_ac_jcent;
    @include border_radius02;
    width: 1rem;
    height: 0.8125rem;
    background: var(--white-w_12); 
    &:hover img, &.on img, &:focus img {
        opacity: 1;
    }
    img {
        opacity: 0.6;
    }    
    &.disabled img {
        opacity: 0.2;
    }
    &.up {
        grid-row: 1/1;
    }
    &.down {
        grid-row: 2/3;
    }
}
.image_frame {
    @include border_radius02;
    position: relative;
    border: 0.063rem solid var(--white-w_12);
    overflow: hidden;
    .image_dimbg {
        background: rgba(10, 11, 20, 0.4);
    }
    &:hover .image_dimbg, &.on .image_dimbg, &:focus .image_dimbg {
        @include backFilter;
        cursor: pointer;
      //  background: var(--primary-pri_20) !important;
        background: rgba(162, 164, 184, 0.2);
    }
}
.image_dimbg{
    @include dflx_ac_jcent;
    @include absolutePos;
}
.image_frame_text {
    @include fs_11_medium;
    color: $bg_grey87;
}
.image_selected {
    position: relative;
    overflow: hidden;
    &:hover, &.hover, &:focus {
        cursor: pointer;
        .image_dimbg {
            background: var(--primary-pri_20) !important;
        }
    }
    &.on .image_dimbg {
        border: 0.125rem solid var(--primary-pri_100);
    }
}
.list_block {
    @include dflx_ac;
    @include border_radius02;
    @include fs_13_regular;
    overflow: hidden;
    padding: 0.25rem 0.5rem;
    cursor: pointer;
    background: var(--white-w_12);
    color: var(--white-w_100-sec);
    &:hover:not(.disabled), &.on, &:focus:not(.disabled) {
        background: var(--primary-pri_20);
        .btn_list_text {
            color: var(--primary-pri_100);
        }
    }
    &.disabled {
        cursor: default;
        .btn_list_text {
            color: var(--white-w_40);
        }
    }
}
.list_block{
  //  .btn_list_text{display: none}
    .list_texts {display: none}
    &:hover:not(.disabled), &.on, &:focus:not(.disabled) {
        .btn_list_text {
            display: block;
        }
        .list_texts {
            display: block;
        }
    }
    &.disabled {
        cursor: default;
        .btn_list_text, .list_texts {
            display: block;
            color: var(--white-w_40);
        }
    }
}

.btn_list_text {
    @include border_radius02;
    @include fs_13_regular;
    height: 100%;
    padding: 0 0.25rem;
    background: var(--white-w_12);
    line-height: 1rem;
    white-space: nowrap;
    color:  var(--white-w_87);
    &.no_line{
        padding: 0;
        background: transparent;
    }
}
.list_usage_box {
    @include border_radius02;
    display: grid;
    border: 0.063rem solid var(--white-w_20);
    background: var(--white-w_6);
}
.list_text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list_texts{
    @include fs_13_regular;
    color: var(--primary-pri_100);
    &.disabled {
        color: var(--white-w_40);
    }
}
.dragdrop_box {
    @include border_radius02;    
    display: grid;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    &.select .dragdrop_bg, &.drag .dragdrop_bg {
        background: rgba(39, 212, 255, 0.1);
        background: var(--primary-pri_12);
        border: 0.063rem solid var(--primary-pri_40);
    }
    &.drag {
        @include backFilter;
        border: 0.188rem solid var(--primary-pri_20);
        .dragdrop_bg {
            @include backFilter;
        }
    }
}
.dragdrop_text {
    @include absolutePos;
    @include dflx_ac_jcent;
    flex-direction: column;
    z-index: 1;
    p{
        @include fs_14_bold;
        color: var(--white-w_100-sec);
    }
    span{
        @include fs_13_regular;
        color: var(--white-w_60);
    }
}
.dragdrop_bg {
    @include absolutePos;
    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 {
    @include fs_13_regular;
    color: var(--white-w_87-sec);
    width: 100%;
    border-collapse:separate; 
    tr {
        &.selected,
        &:hover:not(.disabled):not(.disable):not(.row_type2.disabled):not(.hover), &:focus, &.hover {
            background: var(--primary-pri_20);
        }
    }
    th {
        position: sticky;
        z-index: 1;
        top: 0;
        height: 2.25rem;
        background: var(--more-visible-wh_16-to-6);
        font-weight: 500;
    }
    th, td:not(.disabled):not(.disable):not(.disable), td:not(.hover) {
        border-right: 0.063rem solid var(--white-w_12);
        &:last-child {border-right: 0;}
    }
    td {
        height: 2.25rem;
        border-top: 0.125rem solid var(--etc-bg) !important;
        // &:hover, &:focus {
        //     background: rgba(39, 212, 255, 0.2);    
        // }
    }
    td.hover {
        height: 2.25rem;
        border-top: 0.125rem solid transparent !important;
        // &:hover, &:focus {
        //     background: rgba(39, 212, 255, 0.2);    
        // }
    }
    td.on {
       // background: var(--primary-pri_20);
    }
    .row_type1 {        
        background: var(--more-visible-wh_16-to-6);
    }
    .row_type2 {
        background: var(--more-visible-wh_6-to-100);
        &.disabled {

        }
    }
    .row_error {
        background: rgba(219, 0, 0, 0.08);
        color: #FF1F55;
    }
}
.table_title{
    @include fs_16_bold;
    color: var(--primary-to-grayscale-to-bk);
}
.table__cell {
    position: relative;
    width: auto;
    height: 100%;
    &.disable .wrput {color: var(--white-w_40)}
    &.error_on {
        background: var(--primary-pri_20);
    }
    .wrput {
        @include border_radius00;
        width: 100%;
        height: 100%;
        background: transparent;
        &:focus:not(.hover):not(.on):not(.error):not(.disable):not(.disabled), &.on , &:active:not(.error):not(.disable) {
            border: 0.063rem solid var(--primary-pri_100);
            outline: 0.188rem solid var(--primary-pri_20);
            background: var(--primary-pri_20);
        }
        //
        &:hover:not(.hover):not(.on):not(.error):not(.disable):not(.disabled), &.error_on {
            // border: 0.063rem solid var(--primary-pri_100);
            // outline: 0.188rem solid var(--primary-pri_20);
            background: var(--primary-pri_20);
        }
        &.error, &.error:focus {
            background: rgba(219, 0, 0, 0.2);
            border: 0.063rem solid $fc_error !important;
            outline: 0.188rem solid rgba(219, 0, 0, 0.2);
        }
    }     
    &.disabled {
        border-right: 0.063rem $bg_grey12;
        background: $bg_grey06;
        color: $bg_grey40;
    } 
}
.error_tooltip {
    @include dflx_ac;
    position: absolute;
    z-index: 9;
    bottom: calc(100% + 0.188rem);
    left: 0;
    height: 1rem;
    padding: 0 0.25rem;
    background: $fc_error;
    * {line-height: 1rem;}
}

// sp_icon
.sp_search24{
    @include dflx_ac_jcent;
    width: 1.5rem;
    height: 1.5rem;
    background: url('../images/search_fff_24.svg') no-repeat center center;
    background-size: cover;
}
.sp_download20{
    @include dflx_ac_jcent;
    width: 1.25rem;
    height: 1.25rem;
    background: url('../images/icon_download_20.svg') no-repeat center center;
    background-size: cover;
}
.sp_cctv20{
    @include dflx_ac_jcent;
    width: 1.25rem;
    height: 1.25rem;
    background: url('../images/icon_camera_20.svg') no-repeat center center;
    background-size: cover;
}
.sp_x20{
    @include dflx_ac_jcent;
    width: 1.25rem;
    height: 1.25rem;
    background: url('../images/icon_x_20.svg') no-repeat center center;
    background-size: cover;
}
.sp_layer24{
    @include dflx_ac_jcent;
    width: 1.5rem;
    height: 1.5rem;
    background: url('../images/layer_fff_24.svg') no-repeat center center;
    background-size: cover;
}
.fc_annotation60 {
    @include fs_12_regular;
    color: var(--white-w_60);
}
.fc_annotation87 {
    @include fs_12_regular;
    color: var(--white-w_87);
}
.text_label_box{
    @include fs_20_medium;
    @include border_radius02;
    padding: 1.25rem 1.5rem;
    background: var(--primary-pri_12-to-bk);
}
.list_style {
    position: relative;
    padding-left: 1.375rem;
    &::before{
        content: '';
        display: block;
        position: absolute;
        top: 0.25rem;
        left: 0.5rem;
        width: 0.188rem;
        height: 0.188rem;
        background-color: var(--white-w_60);
        border-radius: 100%;
    }
}
.color_box{
    @include border_radius02;
    width: 3.75rem;
    height: 3.75rem;
    &.rainbow1 {background-color: #27D4FF;}
    &.rainbow2 {background-color: #0068E6;}
    &.rainbow3 {background-color: #8972FF;}
    &.rainbow4 {background-color: #16D9AB;}
    &.rainbows7 {background-color: #9DFFBE;}
    &.rainbows10 {background-color: #64EBA7;}
    &.rainbows4 {background-color: #16D9AB;}
    &.rainbows14 {background-color: #00CBCB;}
    &.rainbows1 {background-color: #27D4FF;}
    &.rainbows11 {background-color: #16A3E9;}
    &.rainbows2 {background-color: #07F;}
    &.rainbows5 {background-color: #0E44E5;}
    &.rainbows8 {background-color: #0A2ACC;}
    &.rainbows12 {background-color: #4D4DFF;}
    &.rainbows6 {background-color: #6E3DFF;}
    &.rainbows3 {background-color: #8972FF;}
    &.rainbows13 {background-color: #B5A6FF;}
    &.rainbows9 {background-color: #D4CCFF;}

    &.gradefff {background-color: #850404;}
    &.gradeff {background-color: #B31212;}
    &.gradef {background-color: #E62222;}
    &.gradee {background-color: #FC5C34;}
    &.graded {background-color: #FC8A18;}
    &.gradec {background-color: #FFBC04;}
    &.gradeb {background-color: #82D971;}
    &.gradea {background-color: #00BD78;}
    &.grade_less1 {background-color: #16A3E9;}
    &.grade_less2 {background-color: #0068E6;}
    &.grade_less3 {background-color: #636771;}
}
.color_box_mini{
    @include border_radius02;
    width: 2.25rem;
    height: 2.25rem;
    background: #D9D9D9;
    &.rainbow1 {background-color: #27D4FF;}
    &.gradec {background-color: #FFBC04;}
    &.rainbows4 {background-color: #16D9AB;}
}
.velocity_result {
    @include dflx_ac_jcent;
    @include fs_20_bold;
    flex-wrap: wrap;
    width: 100%;
    letter-spacing: 0;
    .unit {
        @include fs_12_bold;
        margin: 0 0 0.25rem 0.25rem;
    }
}
.number_label {
    @include dflx_ac_jcent;
    flex-direction: column;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.75rem;
    background: rgba(0, 255, 0, 0.87);
    font-size: 0.5rem;
    font-weight: 700;
    color: #0A0B14;
}
.inner_title {
    @include fs_16_medium;
    @include dflx_ac;
    padding: 1.25rem 1rem 1rem 0;
    color: #27D4FF;
}
.tab_button.on {
    position: relative;
    &:after {
        @include selector_el;
        @include border_radius50;
        top: 0.438rem;
        right: 1.625rem;
        width: 0.25rem;
        height: 0.25rem;
        background: var(--point-error);
    }
}
.inner_box {
    width: 60.75rem;
    height: auto;
    padding: 0.625rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.06);
}
.fc_sub {
    @include fs_14_regular;
    color: var(--white-w_60);
}
.fc_contents {
    @include fs_14_regular;
    color: var(--white-w_87-sec);
}
.play_bar{
    @include dflx_ac;
    column-gap: 1.25rem;
    width: 75.5rem;
    height: 100%;
    padding: 0 0 0 0.75rem;
    background: var(--bg_01_80);
}
.time_bar {
    @include fs_12_regular;
    color: var(--white-w_100-sec);
}
.time_set {
    @include fs_13_regular;
    color: var(--white-w_100-sec);
}
// popover
.imgpopover_box {
    @include backFilter;
    width: 46.25rem;
    height: 26.563rem;
    padding: 0.625rem;
    border: 0.063rem solid var(--primary-pri_40);
    background: rgba(10, 15, 36, 0.80);
    box-shadow: 0 0 0.75rem 0 rgba(0, 104, 230, 0.40) inset;
    &.front{
        border: 0.063rem solid var(--primary-pri_40);
        background: var(--bg_01_80);
        box-shadow: 0 0 0.75rem 0 rgba(0, 104, 230, 0.40) inset;
    }
    img{
        width: 45rem;
        height: 25.313rem;
    }
}
.map_scale {
    @include dflx;
    column-gap: 0.5rem;
  //  width: 6.625rem;
    height: 1.125rem;
    padding: 0.25rem;
    background: rgba(0, 0, 0, 0.50);
}
.map_scale_box {
    display: flex;
    padding: 0.125rem 0.25rem;
    align-items: center;
    column-gap: 0.5rem;
    background: rgba(0, 0, 0, 0.50);
    img{
        width: 4.313rem;
        height: 0.563rem;
    }
}
.map_area_circle {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 3.75rem;
    border: 0.125rem solid var(--primary-pri_100);
    background: var(--etc-bg);
    &.hover, &:hover{
        border: 0.188rem solid var(--primary-pri_100);
        background: var(--etc-bg);
    }
    &.selected{
        border: 0.125rem solid var(--primary-pri_100);
        background: var(--etc-bg);
    }
    &.disabled{
        border: 0.125rem solid var(--primary-pri_40);
        background: var(--white-w_20);
    }
    &.ver2 {
        &.hover, &:hover{
            border: 0.375rem solid var(--primary-pri_20);
            background: var(--map-ver2-hover);
        }
        &.selected{
            border: 0.125rem solid rgba(245, 213, 49, 1);
            background: rgba(255, 224, 67, 0.2);
        }
    }
}
.linked_circle {
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 3.75rem;
    border: 0.125rem solid var(--primary-pri_100);
    background: var(--primary-pri_20);
    &.hover, &:hover {
        border: 0.125rem solid var(--primary-pri_100);
        background: var(--group-icon-selected);
    }
    &.selected{
        border: 0.125rem solid rgba(245, 213, 49, 1);
        background: rgba(255, 224, 67, 0.2);
    }
    &.disabled {
        cursor: default;
        border: 0.125rem solid var(--white-w_40);
        background: var(--white-w_20);
    }
}
.state_box{
    @include dflx_ac_jcent;
    width: 3rem;
    height: 3rem;
}
.polygon{
    position: relative;
    width: 6.25rem;
    height: 6.25rem;
}
.polygon_text{
    @include fs_14_medium;
    position: absolute;
    color: var(--white-w_87);
    top: 2.813rem;
    bottom: 0;
    left: 1.875rem;
    right: 0;
}


// netz

.aside{
	position: fixed;
	left: 1rem;
	top: 5.5rem;
	width: 13.75rem;
	height: calc(100% - 6.5rem);
	max-height: 54rem;
	background: #fff;
	border-radius: 10px;
	&.respon{
		width: 64px;
		width: 4rem;
		.menu_line{
			.menu_icon {
				margin: 0px;
			}
			.menu_tlt {
				display: none;
			}
		}
	}
	&.animate{
		animation: in-aside 1s ease-in-out !important;
	}
}
.aside_wrap{
	position: relative;
	width: 100%;
	height: 100%;
	.aside_arrow{
		position: absolute;
		right: -1rem;
		top: 0.5rem;
		z-index: 10;
	}
}
.aside_arrow {
	width: 33px;
	width: 2rem;
	height: 33px;
	height: 2rem;
	background: #fff;
	border-radius: 100%;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2);
	transition: 0.2s all;
	cursor: pointer;
	&:hover {
		opacity: 0.8;
	}
	.arr_icon_on{
		display: none;
	}
	&.on{
		.arr_icon{
			display: none;
		}
		.arr_icon_on{
			display: block;
		}
	}
}
.arrow_in {
	@include dflx_ac_jcent;
	width: 100%;
	height: 100%;
}
.aside_nav{
	width: 100%;
	overflow: hidden;
}
.aside_nav li a{
	display: block;
}
.Dash_body {
    background-color: #F0F0F2;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    padding: 1rem;
    padding-top: 5.5rem;
    padding-left: 16.5625rem;
}
.Dash_body.respon {
    padding-left: 112px;
    padding-left: 7rem;
}
// menu

.menu_line{
	@include dflx_ac;
	width: 100%;
	height: 56px;
	padding: 0px 16px;
	border-left: 4px solid #fff;
	transition: 0.2s all;
	.menu_icon{
		margin: 0px 10px 0px 0px;
	}
	.menu_tlt{
		padding:2px 0px 0px 0px;
	}
	&:hover{
		background-color: #E4F6F3;
		border-left: 4px solid #E4F6F3;
		.mn_icon{
			display: none;
		}
		.mn_icon_on{
			display: block;
		}
		.menu_tlt{
			color: #00A388;
		}
	}
	&.on{
		background-color: #E4F6F3;
		border-left: 4px solid #00B295;
		.mn_icon{
			display: none;
		}
		.mn_icon_on{
			display: block;
		}
		.menu_tlt{
			color: #00A388;
		}
	}
}
.mn_icon{
	opacity: 0.2;
}
.mn_icon_on{
	display: none;
}