commit c283486a32f41959bebf2bc46a7c690863f6df8d Author: minjubyun Date: Wed Aug 28 10:01:15 2024 +0900 1차 커밋 diff --git a/assets/css/_mixin.scss b/assets/css/_mixin.scss new file mode 100644 index 0000000..14b8458 --- /dev/null +++ b/assets/css/_mixin.scss @@ -0,0 +1,700 @@ +// variable +$ui_blue: #024294; +$ui_blue_hover: #0155BD; +$ui_blue_more: #0068E6; +$ui_blue_more80: rgba($color:$ui_blue_more, $alpha: 0.8); +$ui_blue_more60: rgba($color:$ui_blue_more, $alpha: 0.6); +$ui_blue_more50: rgba($color:$ui_blue_more, $alpha: 0.5); +$ui_blue_more40: rgba($color:$ui_blue_more, $alpha: 0.4); +$ui_blue_more30: rgba($color:$ui_blue_more, $alpha: 0.3); +$ui_blue_more20: rgba($color:$ui_blue_more, $alpha: 0.2); +$ui_blue_more12: rgba($color:$ui_blue_more, $alpha: 0.12); +$ui_blue_more06: rgba($color:$ui_blue_more, $alpha: 0.06); +$ui_sky: #27D4FF; +$ui_sky80: rgba($color:$ui_sky, $alpha: 0.8); +$ui_sky60: rgba($color:$ui_sky, $alpha: 0.6); +$ui_sky50: rgba($color:$ui_sky, $alpha: 0.5); +$ui_sky40: rgba($color:$ui_sky, $alpha: 0.4); +$ui_sky30: rgba($color:$ui_sky, $alpha: 0.3); +$ui_sky20: rgba($color:$ui_sky, $alpha: 0.2); +$ui_sky12: rgba($color:$ui_sky, $alpha: 0.12); +$ui_sky06: rgba($color:$ui_sky, $alpha: 0.06); +$bg_cluster: rgba(0, 104, 230, 1); +$fc_normal: #338FFF; +$fc_normal_more40: rgba($color:$fc_normal, $alpha: 0.4); +$fc_purple: #937EFF; +$fc_green: #16D9AB; +$fc_light_green: #00FF00; +$fc_code_green:#1CAF93; +$fc_card_green:#1CBD6D; +$fc_yellow: #FFE043; +$fc_yellow_04: #FFBC04; +$fc_succeses: #00BD78; +$fc_error: #D60000; +$bg_default:rgb(10, 11, 20); +$bg_default04:rgba(10, 11, 20, 0.4); +$bg_guide: rgb(5, 10, 25); +$bg_sky30: rgba(39, 212, 255, 0.3); +$bg_black00: #000; +$bg_black100: rgba(0, 0, 0, 1); +$bg_blackde: rgba(0, 0, 0, 0.871); +$bg_black87: rgba(0, 0, 0, 0.87); +$bg_blackcc: rgba(0, 0, 0, 0.8); +$bg_black99: rgba(0, 0, 0, 0.6); +$bg_black60: rgba(0, 0, 0, 0.6); +$bg_black40: rgba(0, 0, 0, 0.4); +$bg_black30: rgba(0, 0, 0, 0.3); +$bg_black20: rgba(0, 0, 0, 0.2); +$bg_black16: rgba(0, 0, 0, 0.16); +$bg_black12: rgba(0, 0, 0, 0.12); +$bg_black06: rgba(0, 0, 0, 0.06); +$bg_greye0: #DCDDE0; +$bg_greyf5: #F0F1F5; +$bg_grey90: rgba(255, 255, 255, 0.9); +$bg_greyDE: rgba(255, 255, 255, 0.871); +$bg_grey87: rgba(255, 255, 255, 0.87); +$bg_grey80: rgba(255, 255, 255, 0.8); +$bg_grey99: rgba(255, 255, 255, 0.6); +$bg_grey60: rgba(255, 255, 255, 0.6); +$bg_grey50: rgba(255, 255, 255, 0.5); +$bg_grey40: rgba(255, 255, 255, 0.4); +$bg_grey38: rgba(255, 255, 255, 0.38); +$bg_grey30: rgba(255, 255, 255, 0.3); +$bg_grey20: rgba(255, 255, 255, 0.2); +$bg_grey16: rgba(255, 255, 255, 0.16); +$bg_grey12: rgba(255, 255, 255, 0.12); +$bg_grey10: rgba(255, 255, 255, 0.1); +$bg_grey06: rgba(255, 255, 255, 0.06); +$bg_grey00: rgba(255, 255, 255, 0.00); +$bg_error: #FF1F55; +$fc_white: #ffffff; +$fc_999: #999999; +$fc_222: #222222; +$fc_default: rgba(255, 255, 255, 0.87); + +//basic +@mixin bold {font-weight: bold !important;} +@mixin clear {&::after{content:"";display:block;clear:both;}} + +//flex*-/**- +@mixin dflx{ + display: flex; +} +@mixin dflx_as { + display: flex; + align-items: flex-start; +} +@mixin dflx_ac { + display: flex; + align-items: center; +} +@mixin dflx_ae { + display: flex; + align-items: flex-end; +} +@mixin dflx_jbet { + display: flex; + justify-content: space-between; +} +@mixin dflx_jstart{ + display: flex; + justify-content: flex-start; +} +@mixin dflx_jcent{ + display: flex; + justify-content: center; +} +@mixin dflx_jend{ + display: flex; + justify-content: flex-end; +} +@mixin dflx_ac_jcent{ + display: flex; + align-items: center; + justify-content: center; +} +@mixin dflx_ae_jcent { + display: flex; + align-items: flex-end; + justify-content: center; +} +@mixin dflx_as_jbet { + display: flex; + align-items: flex-start; + justify-content: space-between; +} +@mixin dflx_ac_jbet { + display: flex; + align-items: center; + justify-content: space-between; +} +@mixin dflx_ae_jbet { + display: flex; + align-items: flex-end; + justify-content: space-between; +} +@mixin dflx_ac_jend { + display: flex; + align-items: center; + justify-content: flex-end; +} +@mixin flx_wrap { + flex-wrap: wrap; +} +@mixin flx_nowrap { + flex-wrap: nowrap; +} +@mixin dflx_dcol_jbet { + display: flex; + flex-direction: column; + justify-content: space-between; +} + +//font +@mixin fm_spoqa { + font-family: 'Spoqa Han Sans Neo', sans-serif; +} +@mixin fs_40_bold { + font-size: 2.5rem; + font-weight: 700; +} +@mixin fs_40_medium { + font-size: 2.5rem; + font-weight: 500; +} +@mixin fs_28_bold { + font-size: 1.75rem; + font-weight: 700; +} +@mixin fs_24_bold { + font-size: 1.5rem; + font-weight: 700; +} +@mixin fs_24_medium { + font-size: 1.5rem; + font-weight: 500; +} +@mixin fs_20_bold { + font-size: 1.25rem; + font-weight: 700; +} +@mixin fs_20_medium { + font-size: 1.25rem; + font-weight: 500; +} +@mixin fs_18_bold { + font-size: 1.125rem; + font-weight: 700; +} +@mixin fs_18_medium { + font-size: 1.125rem; + font-weight: 500; +} +@mixin fs_16_bold { + font-size: 1rem; + font-weight: 700; +} +@mixin fs_16_medium { + font-size: 1rem; + font-weight: 500; +} +@mixin fs_16_regular { + font-size: 1rem; + font-weight: 400; +} +@mixin fs_16_light { + font-size: 1rem; + font-weight: 300; +} +@mixin fs_15_medium { + font-size: 0.9375rem; + font-weight: 500; +} +@mixin fs_15_regular { + font-size: 0.9375rem; + font-weight: 400; +} +@mixin fs_14_bold { + font-size: 0.875rem; + font-weight: 700; +} +@mixin fs_14_medium { + font-size: 0.875rem; + font-weight: 500; +} +@mixin fs_14_regular { + font-size: 0.875rem; + font-weight: 400; +} +@mixin fs_14_light { + font-size: 0.875rem; + font-weight: 300; +} +@mixin fs_13_medium { + font-size: 0.8125rem; + font-weight: 500; +} +@mixin fs_13_regular { + font-size: 0.8125rem; + font-weight: 400; +} +@mixin fs_13_light { + font-size: 0.8125rem; + font-weight: 300; +} +@mixin fs_12_bold { + font-size: 0.75rem !important; + font-weight: 700 !important; +} +@mixin fs_12_medium { + font-size: 0.75rem !important; + font-weight: 500 !important; +} +@mixin fs_12_regular { + font-size: 0.75rem; + font-weight: 400; +} +@mixin fs_12_light { + font-size: 0.75rem; + font-weight: 300; +} +@mixin fs_11_medium { + font-size: 0.6875rem; + font-weight: 500; +} +@mixin fs_11_regular { + font-size: 0.6875rem; + font-weight: 400; +} +@mixin fs_11_light { + font-size: 0.6875rem; + font-weight: 300; +} +@mixin fs_10_regular { + font-size: 0.625rem; + font-weight: 400; +} + +// button +@mixin button_options ($width: auto, $fontSize: 8px){ + display: flex; + align-items: center; + justify-content: center; + width: $width; + padding: 0.125rem 0.75rem 0; + -webkit-border-radius: 8px; + -moz-border-radius: 8px; + border-radius: 8px; + font-size: $fontSize; +} + +@mixin button_primary { + @include button_options; + background: var(--PRI); + color: var(--white-w_100); + border-radius: 8px; + &:hover:not(.selected):not(.disabled), &.selected, &.hover { + + } + &.disabled { + background: var(--white-w_12); + box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1); + color: var(--white-w_20); + } +} + +@mixin button_secondary { + @include button_options; + background: transparent; + color: var(--PRI); + border: 1px solid var(--PRI); + border-radius: 8px; + + &:hover,&.hover { + background: var(--white-w_16); + } + // &.selected { + // background: var(--btn-btn_selected); + // color: var(--white-w_100); + // } + &.disabled { + background: var(--white-w_12); + border: 1px solid rgba(255, 255, 255, 0.20); + color: var(--white-w_20); + } +} + +@mixin button_line { + @include button_options; + background: transparent; + color: var(--white-w_87-sec); + border: 1px solid rgba(255, 255, 255, 0.20); + border-radius: 8px; + &:hover,&.hover { + background: var(--white-w_16); + } + // &.selected { + // background: var(--btn-btn_selected); + // color: var(--white-w_100); + // } + &.disabled { + background: var(--white-w_12); + color: var(--white-w_20); + } +} + +@mixin button_floating { + @include button_options; + @include backFilter; + @include box_shadow16; + background: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + color: var(--white-w_100-sec); + &:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), &.hover { + background: var(--btn-btn_hover); + border: none; + box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5); + color: var(--white-w_100); + } + &.selected{ + background: var(--btn-btn_default); + border: none; + box-shadow: inset 0 0 0.75rem #0476FF; + color: var(--white-w_100); + } + &.card_selected{ + background: var(--tab-btn_default); + border: none; + box-shadow: inset 0 0 0.75rem #0476FF; + color: var(--white-w_100); + } + &.disabled { + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-100); + box-shadow: none; + color: var(--white-w_20); + } +} + +@mixin button_ffb { + @include button_options; + //@include backFilter; + @include box_shadow16; + @include fs_14_medium; + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-40); + color: var(--white-w_87); + &:hover:not(.selected):not(.disabled),&.hover { + background: var(--primary-pri_12); + color: var(--primary-pri_100); + border: 0.063rem solid var(--line-wh_12-to-40); + font-weight: 700; + } + &.selected { + background: var(--primary-pri_20); + border: 0.063rem solid var(--line-wh_12-to-40); + color: var(--primary-pri_100); + font-weight: 700; + } + &.disabled { + background: var(--bg_01_40); + border: 0.063rem solid var(--white-w_12); + color: var(--white-w_20); + } +} + +@mixin button_ghost { + @include button_options; + @include backFilter; + &:hover { + background: $bg_grey06; + } + &.selected{ + background: transparent; + color: $ui_sky; + } + &.disabled { + background: transparent; + color: $bg_grey38; + } +} + +@mixin button_default { + @include border_radius02; + height: 1.5rem; +} + +@mixin button_outline { + @include border_radius02; + height: 1.5rem; + border: 0.063rem solid #CBCBCB; +} + +//etc +@mixin input_type { + @include border_radius04; + height: 3rem; + padding: 0 1rem; +} + +@mixin search_type { + @include border_radius04; + height: 2rem; + padding: 0 1rem; +} + +@mixin form_outline { + @include border_radius05; + border: 0.063rem solid #DDDDDD; + box-shadow: 0.063rem 0.063rem 0.75rem #00000029; + background: $ui_blue; +} + +@mixin mouseover_bg($border: 0.125rem, $speed: 0.2s, $shadow: 0 0.375rem 0.75rem #00000029) { + border: $border solid #0068E6; + background: #0068E61A 0% 0% no-repeat padding-box; + box-shadow: $shadow; + transition: ease-in $speed; +} + +@mixin backFilter($blur: 1.875rem){ + -webkit-backdrop-filter: blur($blur); + backdrop-filter: blur($blur); +} + +@mixin backFilter_none { + -webkit-backdrop-filter: none; + backdrop-filter: none; +} + +@mixin border_radius50 { + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; +} + +@mixin border_radius10 { + -webkit-border-radius: 0.625rem; + -moz-border-radius: 0.625rem; + border-radius: 0.625rem; +} + +@mixin border_radius06 { + -webkit-border-radius: 0.375rem; + -moz-border-radius: 0.375rem; + border-radius: 0.375rem; +} + +@mixin border_radius05 { + -webkit-border-radius: 0.3125rem; + -moz-border-radius: 0.3125rem; + border-radius: 0.3125rem; +} + +@mixin border_radius04 { + -webkit-border-radius: 0.25rem; + -moz-border-radius: 0.25rem; + border-radius: 0.25rem; +} + +@mixin border_radius03 { + -webkit-border-radius: 0.1875rem; + -moz-border-radius: 0.1875rem; + border-radius: 0.1875rem; +} + +@mixin border_radius02 { + -webkit-border-radius: 0.125rem; + -moz-border-radius: 0.125rem; + border-radius: 0.125rem; +} + +@mixin border_radius00 { + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-radius: 0; +} + +@mixin selector_el { + position: absolute; + content: ''; +} + +@mixin layout_acjc { + align-items: center; + justify-content: center; +} + +@mixin layout_acjb { + align-items: center; + justify-content: space-between; +} + +@mixin row_box { + width: 66.875rem; + max-width: 66.875rem; + margin: 0 auto; +} + +@mixin bg_blur30 { + backdrop-filter: blur(1.875rem); +} + +@mixin bg_blur20 { + backdrop-filter: blur(1.25rem); +} + +@mixin bg_blur10 { + backdrop-filter: blur(0.625rem); +} + +// shadow +@mixin box_shadow16 { + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); +} + +@mixin popup_shadow { + box-shadow: 0.75rem 0.75rem 1.5rem 0 rgba(4, 9, 26, 0.20); +} + +//trans_center +@mixin ab_trans_center { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +//text_overflow +@mixin txt_ellip { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +//box +@mixin box1 { + width: 100%; + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + backdrop-filter: blur(1.875rem); +} + +@mixin dashbox { + width: 100%; + padding: 0.75rem; + overflow: hidden; + background: rgba(255, 255, 255, 0.08); + border-radius: 0.125rem; +} + +@mixin square { + display: inline-block; + width: 0.625rem; + height: 0.625rem; + background-color: $ui_blue_more; +} + +//btn +@mixin btn { + //background-color: #0068e6; + background-color: rgba(0, 104, 230, 0.6); + box-shadow: 0 0 0.75rem 0 inset #0068e6; + border-radius:0.1875rem; + &:hover { + background: #0155BD; + box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5); + } +} + +//tod +@mixin tod_contain{ + display: grid; + grid-template-columns: 5rem auto; + grid-auto-rows: minmax(3.375rem, auto); + gap: 0.125rem; +} + +@mixin tod_block { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + overflow: hidden; + padding:0.125rem; + background: rgba(255, 255, 255, 0.06); + line-height: 1; + letter-spacing: 0.038rem; + text-align: center; +} + +//circle +@mixin circle28{ + @include dflx_ac_jcent; + width: 1.75rem; + height: 1.75rem; + overflow: hidden; + border-radius: 100%; + + .word{ + @include fs_12_regular; + } +} + +@mixin circle32{ + @include dflx_ac_jcent; + width: 2rem; + height: 2rem; + overflow: hidden; + border-radius: 100%; + + .word{ + @include fs_14_regular; + } +} + +// label +@mixin numberDefault($width: 1rem, $height: 1rem, $fs: 0.875rem){ + width: $width; + height: $height; + font-size: $fs; + line-height: $height; +} + +// position +@mixin absolutePos{ + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +//backdrop-filter solve +@mixin backFilter_solve{ + &::before{ + content: ''; + z-index: -1; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + backdrop-filter: blur(1.875rem); + } +} + +//filter +@mixin filter_black { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +@mixin filter_blue { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +@mixin filter_black01 { + filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%); +} +@mixin filter_grey { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +@mixin filter_white { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} \ No newline at end of file diff --git a/assets/css/air-datepicker.css b/assets/css/air-datepicker.css new file mode 100644 index 0000000..42edf87 --- /dev/null +++ b/assets/css/air-datepicker.css @@ -0,0 +1,127 @@ +.air-datepicker-cell.-year-.-other-decade-,.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.air-datepicker-cell.-year-.-other-decade-:hover,.air-datepicker-cell.-day-.-other-month-:hover{color:var(--adp-color-other-month-hover)}.-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-{color:var(--adp-color-other-month)}.-selected-.air-datepicker-cell.-year-.-other-decade-,.-selected-.air-datepicker-cell.-day-.-other-month-{color:#fff;background:var(--adp-background-color-selected-other-month)}.-selected-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-selected-.-focus-.air-datepicker-cell.-day-.-other-month-{background:var(--adp-background-color-selected-other-month-focused)}.-in-range-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range);color:var(--adp-color)}.-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade-,.-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-{background-color:var(--adp-background-color-in-range-focused)}.air-datepicker-cell.-year-.-other-decade-:empty,.air-datepicker-cell.-day-.-other-month-:empty{background:none;border:none}.air-datepicker-cell{border-radius:var(--adp-cell-border-radius);box-sizing:border-box;cursor:pointer;display:flex;position:relative;align-items:center;justify-content:center;z-index:1}.air-datepicker-cell.-focus-{background:var(--adp-cell-background-color-hover)}.air-datepicker-cell.-current-{color:var(--adp-color-current-date)}.air-datepicker-cell.-current-.-focus-{color:var(--adp-color)}.air-datepicker-cell.-current-.-in-range-{color:var(--adp-color-current-date)}.air-datepicker-cell.-disabled-{cursor:default;color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-disabled-.-in-range-{color:var(--adp-color-disabled-in-range)}.air-datepicker-cell.-disabled-.-current-.-focus-{color:var(--adp-color-disabled)}.air-datepicker-cell.-in-range-{background:var(--adp-cell-background-color-in-range);border-radius:0}.air-datepicker-cell.-in-range-:hover{background:var(--adp-cell-background-color-in-range-hover)}.air-datepicker-cell.-range-from-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)}.air-datepicker-cell.-range-to-{border:1px solid var(--adp-cell-border-color-in-range);background-color:var(--adp-cell-background-color-in-range);border-radius:0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0}.air-datepicker-cell.-range-to-.-range-from-{border-radius:var(--adp-cell-border-radius)}.air-datepicker-cell.-selected-{color:#fff;border:none;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-current-{color:#fff;background:var(--adp-cell-background-color-selected)}.air-datepicker-cell.-selected-.-focus-{background:var(--adp-cell-background-color-selected-hover)} +.air-datepicker-body{transition:all var(--adp-transition-duration) var(--adp-transition-ease)}.air-datepicker-body.-hidden-{display:none}.air-datepicker-body--day-names{display:grid;grid-template-columns:repeat(7, var(--adp-day-cell-width));margin:8px 0 3px}.air-datepicker-body--day-name{color:var(--adp-day-name-color);display:flex;align-items:center;justify-content:center;flex:1;text-align:center;text-transform:uppercase;font-size:.8em}.air-datepicker-body--day-name.-clickable-{cursor:pointer}.air-datepicker-body--day-name.-clickable-:hover{color:var(--adp-day-name-color-hover)}.air-datepicker-body--cells{display:grid}.air-datepicker-body--cells.-days-{grid-template-columns:repeat(7, var(--adp-day-cell-width));grid-auto-rows:var(--adp-day-cell-height)}.air-datepicker-body--cells.-months-{grid-template-columns:repeat(3, 1fr);grid-auto-rows:var(--adp-month-cell-height)}.air-datepicker-body--cells.-years-{grid-template-columns:repeat(4, 1fr);grid-auto-rows:var(--adp-year-cell-height)} +.air-datepicker-nav{display:flex;justify-content:space-between;border-bottom:1px solid var(--adp-border-color-inner);min-height:var(--adp-nav-height);padding:var(--adp-padding);box-sizing:content-box}.-only-timepicker- .air-datepicker-nav{display:none}.air-datepicker-nav--title,.air-datepicker-nav--action{display:flex;cursor:pointer;align-items:center;justify-content:center}.air-datepicker-nav--action{width:var(--adp-nav-action-size);border-radius:var(--adp-border-radius);-webkit-user-select:none;-moz-user-select:none;user-select:none}.air-datepicker-nav--action:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--action:active{background:var(--adp-background-color-active)}.air-datepicker-nav--action.-disabled-{visibility:hidden}.air-datepicker-nav--action svg{width:32px;height:32px}.air-datepicker-nav--action path{fill:none;stroke:var(--adp-nav-arrow-color);stroke-width:2px}.air-datepicker-nav--title{border-radius:var(--adp-border-radius);padding:0 8px}.air-datepicker-nav--title i{font-style:normal;color:var(--adp-nav-color-secondary);margin-left:.3em}.air-datepicker-nav--title:hover{background:var(--adp-background-color-hover)}.air-datepicker-nav--title:active{background:var(--adp-background-color-active)}.air-datepicker-nav--title.-disabled-{cursor:default;background:none} +.air-datepicker-buttons{display:grid;grid-auto-columns:1fr;grid-auto-flow:column}.air-datepicker-button{display:inline-flex;color:var(--adp-btn-color);border-radius:var(--adp-btn-border-radius);cursor:pointer;height:var(--adp-btn-height);border:none;background:rgba(255,255,255,0)}.air-datepicker-button:hover{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover)}.air-datepicker-button:focus{color:var(--adp-btn-color-hover);background:var(--adp-btn-background-color-hover);outline:none}.air-datepicker-button:active{background:var(--adp-btn-background-color-active)}.air-datepicker-button span{outline:none;display:flex;align-items:center;justify-content:center;width:100%;height:100%} +.air-datepicker-time{display:grid;grid-template-columns:max-content 1fr;grid-column-gap:12px;align-items:center;position:relative;padding:0 var(--adp-time-padding-inner)}.-only-timepicker- .air-datepicker-time{border-top:none}.air-datepicker-time--current{display:flex;align-items:center;flex:1;font-size:14px;text-align:center}.air-datepicker-time--current-colon{margin:0 2px 3px;line-height:1}.air-datepicker-time--current-hours,.air-datepicker-time--current-minutes{line-height:1;font-size:19px;font-family:"Century Gothic",CenturyGothic,AppleGothic,sans-serif;position:relative;z-index:1}.air-datepicker-time--current-hours:after,.air-datepicker-time--current-minutes:after{content:"";background:var(--adp-background-color-hover);border-radius:var(--adp-border-radius);position:absolute;left:-2px;top:-3px;right:-2px;bottom:-2px;z-index:-1;opacity:0}.air-datepicker-time--current-hours.-focus-:after,.air-datepicker-time--current-minutes.-focus-:after{opacity:1}.air-datepicker-time--current-ampm{text-transform:uppercase;align-self:flex-end;color:var(--adp-time-day-period-color);margin-left:6px;font-size:11px;margin-bottom:1px}.air-datepicker-time--row{display:flex;align-items:center;font-size:11px;height:17px;background:linear-gradient(to right, var(--adp-time-track-color), var(--adp-time-track-color)) left 50%/100% var(--adp-time-track-height) no-repeat}.air-datepicker-time--row:first-child{margin-bottom:4px}.air-datepicker-time--row input[type=range]{background:none;cursor:pointer;flex:1;height:100%;width:100%;padding:0;margin:0;-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{-webkit-appearance:none}.air-datepicker-time--row input[type=range]::-ms-tooltip{display:none}.air-datepicker-time--row input[type=range]:hover::-webkit-slider-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-moz-range-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:hover::-ms-thumb{border-color:var(--adp-time-track-color-hover)}.air-datepicker-time--row input[type=range]:focus{outline:none}.air-datepicker-time--row input[type=range]:focus::-webkit-slider-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-moz-range-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]:focus::-ms-thumb{background:var(--adp-cell-background-color-selected);border-color:var(--adp-cell-background-color-selected)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-webkit-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-moz-range-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-moz-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-ms-thumb{box-sizing:border-box;height:12px;width:12px;border-radius:3px;border:1px solid var(--adp-time-track-color);background:#fff;cursor:pointer;-ms-transition:background var(--adp-transition-duration);transition:background var(--adp-transition-duration)}.air-datepicker-time--row input[type=range]::-webkit-slider-thumb{margin-top:calc(var(--adp-time-thumb-size)/2*-1)}.air-datepicker-time--row input[type=range]::-webkit-slider-runnable-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-moz-range-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-track{border:none;height:var(--adp-time-track-height);cursor:pointer;color:rgba(0,0,0,0);background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-fill-lower{background:rgba(0,0,0,0)}.air-datepicker-time--row input[type=range]::-ms-fill-upper{background:rgba(0,0,0,0)} +.air-datepicker{--adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--adp-font-size: 14px;--adp-width: 246px;--adp-z-index: 100;--adp-padding: 4px;--adp-grid-areas: "nav" "body" "timepicker" "buttons";--adp-transition-duration: .3s;--adp-transition-ease: ease-out;--adp-transition-offset: 8px;--adp-background-color: #fff;--adp-background-color-hover: inherit;--adp-background-color-active: #eaeaea;--adp-background-color-in-range: rgba(92, 196, 239, .1);--adp-background-color-in-range-focused: rgba(92, 196, 239, .2);--adp-background-color-selected-other-month-focused: #8ad5f4;--adp-background-color-selected-other-month: #a2ddf6;--adp-color: #4a4a4a;--adp-color-secondary: #9c9c9c;--adp-accent-color: #4eb5e6;--adp-color-current-date: var(--adp-accent-color);--adp-color-other-month: #dedede;--adp-color-disabled: #aeaeae;--adp-color-disabled-in-range: #939393;--adp-color-other-month-hover: #c5c5c5;--adp-border-color: #dbdbdb;--adp-border-color-inner: #efefef;--adp-border-radius: 4px;--adp-border-color-inline: #d7d7d7;--adp-nav-height: 32px;--adp-nav-arrow-color: var(--adp-color-secondary);--adp-nav-action-size: 32px;--adp-nav-color-secondary: var(--adp-color-secondary);--adp-day-name-color: #ff9a19;--adp-day-name-color-hover: #8ad5f4;--adp-day-cell-width: 1fr;--adp-day-cell-height: 32px;--adp-month-cell-height: 42px;--adp-year-cell-height: 56px;--adp-pointer-size: 10px;--adp-poiner-border-radius: 2px;--adp-pointer-offset: 14px;--adp-cell-border-radius: 4px;--adp-cell-background-color-hover: var(--adp-background-color-hover);--adp-cell-background-color-selected: #5cc4ef;--adp-cell-background-color-selected-hover: #45bced;--adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);--adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);--adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);--adp-btn-height: 32px;--adp-btn-color: var(--adp-accent-color);--adp-btn-color-hover: var(--adp-color);--adp-btn-border-radius: var(--adp-border-radius);--adp-btn-background-color-hover: var(--adp-background-color-hover);--adp-btn-background-color-active: var(--adp-background-color-active);--adp-time-track-height: 1px;--adp-time-track-color: #dedede;--adp-time-track-color-hover: #b1b1b1;--adp-time-thumb-size: 12px;--adp-time-padding-inner: 10px;--adp-time-day-period-color: var(--adp-color-secondary);--adp-mobile-font-size: 16px;--adp-mobile-nav-height: 40px;--adp-mobile-width: 320px;--adp-mobile-day-cell-height: 38px;--adp-mobile-month-cell-height: 48px;--adp-mobile-year-cell-height: 64px}.air-datepicker-overlay{--adp-overlay-background-color: rgba(0, 0, 0, .3);--adp-overlay-transition-duration: .3s;--adp-overlay-transition-ease: ease-out;--adp-overlay-z-index: 99} +.air-datepicker{background:var(--adp-background-color);border:1px solid var(--adp-border-color);box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:var(--adp-border-radius);box-sizing:content-box;display:grid;grid-template-columns:1fr;grid-template-rows:repeat(4, max-content);grid-template-areas:var(--adp-grid-areas);font-family:var(--adp-font-family),sans-serif;font-size:var(--adp-font-size);color:var(--adp-color);width:var(--adp-width);position:absolute;transition:opacity var(--adp-transition-duration) var(--adp-transition-ease),transform var(--adp-transition-duration) var(--adp-transition-ease);z-index:var(--adp-z-index)}.air-datepicker:not(.-custom-position-){opacity:0}.air-datepicker.-from-top-{transform:translateY(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-from-right-{transform:translateX(var(--adp-transition-offset))}.air-datepicker.-from-bottom-{transform:translateY(var(--adp-transition-offset))}.air-datepicker.-from-left-{transform:translateX(calc(var(--adp-transition-offset) * -1))}.air-datepicker.-active-:not(.-custom-position-){transform:translate(0, 0);opacity:1}.air-datepicker.-active-.-custom-position-{transition:none}.air-datepicker.-inline-{border-color:var(--adp-border-color-inline);box-shadow:none;position:static;left:auto;right:auto;opacity:1;transform:none}.air-datepicker.-inline- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-{--adp-font-size: var(--adp-mobile-font-size);--adp-day-cell-height: var(--adp-mobile-day-cell-height);--adp-month-cell-height: var(--adp-mobile-month-cell-height);--adp-year-cell-height: var(--adp-mobile-year-cell-height);--adp-nav-height: var(--adp-mobile-nav-height);--adp-nav-action-size: var(--adp-mobile-nav-height);position:fixed;width:var(--adp-mobile-width);border:none}.air-datepicker.-is-mobile- *{-webkit-tap-highlight-color:rgba(0,0,0,0)}.air-datepicker.-is-mobile- .air-datepicker--pointer{display:none}.air-datepicker.-is-mobile-:not(.-custom-position-){transform:translate(-50%, calc(-50% + var(--adp-transition-offset)))}.air-datepicker.-is-mobile-.-active-:not(.-custom-position-){transform:translate(-50%, -50%)}.air-datepicker.-custom-position-{transition:none}.air-datepicker-global-container{position:absolute;left:0;top:0}.air-datepicker--pointer{--pointer-half-size: calc(var(--adp-pointer-size) / 2);position:absolute;width:var(--adp-pointer-size);height:var(--adp-pointer-size);z-index:-1}.air-datepicker--pointer:after{content:"";position:absolute;background:#fff;border-top:1px solid var(--adp-border-color-inline);border-right:1px solid var(--adp-border-color-inline);border-top-right-radius:var(--adp-poiner-border-radius);width:var(--adp-pointer-size);height:var(--adp-pointer-size);box-sizing:border-box}.-top-left- .air-datepicker--pointer,.-top-center- .air-datepicker--pointer,.-top-right- .air-datepicker--pointer,[data-popper-placement^=top] .air-datepicker--pointer{top:calc(100% - var(--pointer-half-size) + 1px)}.-top-left- .air-datepicker--pointer:after,.-top-center- .air-datepicker--pointer:after,.-top-right- .air-datepicker--pointer:after,[data-popper-placement^=top] .air-datepicker--pointer:after{transform:rotate(135deg)}.-right-top- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer,[data-popper-placement^=right] .air-datepicker--pointer{right:calc(100% - var(--pointer-half-size) + 1px)}.-right-top- .air-datepicker--pointer:after,.-right-center- .air-datepicker--pointer:after,.-right-bottom- .air-datepicker--pointer:after,[data-popper-placement^=right] .air-datepicker--pointer:after{transform:rotate(225deg)}.-bottom-left- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer,[data-popper-placement^=bottom] .air-datepicker--pointer{bottom:calc(100% - var(--pointer-half-size) + 1px)}.-bottom-left- .air-datepicker--pointer:after,.-bottom-center- .air-datepicker--pointer:after,.-bottom-right- .air-datepicker--pointer:after,[data-popper-placement^=bottom] .air-datepicker--pointer:after{transform:rotate(315deg)}.-left-top- .air-datepicker--pointer,.-left-center- .air-datepicker--pointer,.-left-bottom- .air-datepicker--pointer,[data-popper-placement^=left] .air-datepicker--pointer{left:calc(100% - var(--pointer-half-size) + 1px)}.-left-top- .air-datepicker--pointer:after,.-left-center- .air-datepicker--pointer:after,.-left-bottom- .air-datepicker--pointer:after,[data-popper-placement^=left] .air-datepicker--pointer:after{transform:rotate(45deg)}.-top-left- .air-datepicker--pointer,.-bottom-left- .air-datepicker--pointer{left:var(--adp-pointer-offset)}.-top-right- .air-datepicker--pointer,.-bottom-right- .air-datepicker--pointer{right:var(--adp-pointer-offset)}.-top-center- .air-datepicker--pointer,.-bottom-center- .air-datepicker--pointer{left:calc(50% - var(--adp-pointer-size)/2)}.-left-top- .air-datepicker--pointer,.-right-top- .air-datepicker--pointer{top:var(--adp-pointer-offset)}.-left-bottom- .air-datepicker--pointer,.-right-bottom- .air-datepicker--pointer{bottom:var(--adp-pointer-offset)}.-left-center- .air-datepicker--pointer,.-right-center- .air-datepicker--pointer{top:calc(50% - var(--adp-pointer-size)/2)}.air-datepicker--navigation{grid-area:nav}.air-datepicker--content{box-sizing:content-box;padding:var(--adp-padding);grid-area:body}.-only-timepicker- .air-datepicker--content{display:none}.air-datepicker--time{grid-area:timepicker}.air-datepicker--buttons{grid-area:buttons}.air-datepicker--buttons,.air-datepicker--time{padding:var(--adp-padding);border-top:1px solid var(--adp-border-color-inner)}.air-datepicker-overlay{position:fixed;background:var(--adp-overlay-background-color);left:0;top:0;width:0;height:0;opacity:0;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),left 0s,height 0s,width 0s;transition-delay:0s,var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration),var(--adp-overlay-transition-duration);z-index:var(--adp-overlay-z-index)}.air-datepicker-overlay.-active-{opacity:1;width:100%;height:100%;transition:opacity var(--adp-overlay-transition-duration) var(--adp-overlay-transition-ease),height 0s,width 0s} + +/* css 추가 */ +.air-datepicker { + min-width: 13.625rem; + width: auto; + padding: 1.25rem; + border: 1px solid var(--line-pri-40-to-bk_40) !important; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + background: var(--bg_01_80); +} +.air-datepicker-nav { + min-height: 1rem; + margin-bottom: 1.25rem; + border-bottom: 0; +} +.air-datepicker-nav--title { + width: 80%; +} +.air-datepicker-nav--title, .air-datepicker-nav--title i { + padding: 0 0; + font-family: 'Spoqa Han Sans Neo', 'sans-serif' !important; + font-weight: 500; + font-style: inherit; + color: var(--white-w_60); +} +.action_prev, +.action_next { + display:flex; + width: 16px; + height: 16px; + background: url(../images/arrow_left_fill_fff_16.svg); + opacity: 0.6; +} +.action_next { + background: url(../images/arrow_right_fill_fff_16.svg); +} +.air-datepicker-nav--action:active { + background: transparent; +} +.air-datepicker-body--day-name, .air-datepicker-cell { + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + font-size: 0.8125rem; + color: var(--white-w_60); +} +.air-datepicker-cell.-year-.-other-decade-, +.air-datepicker-cell { + color: var(--white-w_60); +} +.air-datepicker-body--day-names { + margin: 0 0 0.5rem; +} +.air-datepicker-global-container .air-datepicker-cell.-current- { + color: var(--background-bg_01); + background: var(--primary-pri-100); +} +.air-datepicker-global-container .air-datepicker-cell.-selected-, +.air-datepicker-global-container .air-datepicker-cell.-focus-, +.air-datepicker-cell.-day-.-other-month-.-selected- { + background: var(--primary-pri-100); + color: var(--background-bg_01); +} +.air-datepicker-nav, +.air-datepicker--content { + padding: 0 0; +} +.air-datepicker-body--day-names, +.air-datepicker-body--cells.-days- { + grid-template-columns: repeat(7, 1.5rem); + grid-auto-rows: 1.5rem; + gap: 0.5rem; +} +.air-datepicker--pointer {display: none;} +.air-datepicker-cell.-disabled- { + color: rgba(255, 255, 255, 0.2) !important; +} +.air-datepicker-cell.-day-.-other-month- { + color: rgba(255, 255, 255, 0.2) ; +} +.air-datepicker-global-container .air-datepicker-cell.-range-from-, +.air-datepicker-global-container .air-datepicker-cell.-range-to- { + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; +} +.air-datepicker-global-container .air-datepicker-cell.-in-range-:hover { + color: var(--white-w_60); +} +.air-datepicker-global-container .air-datepicker-cell.-other-month-:hover { + color: #0A0B14; +} +.air-datepicker-global-container .air-datepicker-cell { + position: relative; + border:none !important; +} +.air-datepicker-global-container .air-datepicker-cell.-in-range- { + background: var(--primary-pri_12); +} +.air-datepicker-global-container .air-datepicker-cell.-range-from-:after, +.air-datepicker-global-container .air-datepicker-cell.-range-to-:after, +.air-datepicker-global-container .air-datepicker-cell.-in-range-:before, +.air-datepicker-global-container .air-datepicker-cell.-in-range-:after { + position: absolute; + top: 0; + width: 4px; + height: 100%; + background: var(--primary-pri_12); + content: ""; +} +.air-datepicker-global-container .air-datepicker-cell.-range-to-:after, +.air-datepicker-global-container .air-datepicker-cell.-in-range-:before { + left: -4px; +} +.air-datepicker-global-container .air-datepicker-cell.-range-from-:after, +.air-datepicker-global-container .air-datepicker-cell.-in-range-:after { + right: -4px; +} \ No newline at end of file diff --git a/assets/css/font.css b/assets/css/font.css new file mode 100644 index 0000000..4296a1f --- /dev/null +++ b/assets/css/font.css @@ -0,0 +1,47 @@ +@charset "utf-8"; + +@font-face { + font-family: 'Spoqa Han Sans Neo'; + font-weight: 700; + src: local('Spoqa Han Sans Neo Bold'), + url('../fonts/SpoqaHanSansNeo-Bold.woff2') format('woff2'), + url('../fonts/SpoqaHanSansNeo-Bold.woff') format('woff'), + url('../fonts/SpoqaHanSansNeo-Bold.ttf') format('truetype'); +} + + +@font-face { + font-family: 'Spoqa Han Sans Neo'; + font-weight: 500; + src: local('Spoqa Han Sans Neo Medium'), + url('../fonts/SpoqaHanSansNeo-Medium.woff2') format('woff2'), + url('../fonts/SpoqaHanSansNeo-Medium.woff') format('woff'), + url('../fonts/SpoqaHanSansNeo-Medium.ttf') format('truetype'); +} + +@font-face { + font-family: 'Spoqa Han Sans Neo'; + font-weight: 400; + src: local('Spoqa Han Sans Neo Regular'), + url('../fonts/SpoqaHanSansNeo-Regular.woff2') format('woff2'), + url('../fonts/SpoqaHanSansNeo-Regular.woff') format('woff'), + url('../fonts/SpoqaHanSansNeo-Regular.ttf') format('truetype'); +} + +@font-face { + font-family: 'Spoqa Han Sans Neo'; + font-weight: 300; + src: local('Spoqa Han Sans Neo Light'), + url('../fonts/SpoqaHanSansNeo-Light.woff2') format('woff2'), + url('../fonts/SpoqaHanSansNeo-Light.woff') format('woff'), + url('../fonts/SpoqaHanSansNeo-Light.ttf') format('truetype'); +} + +@font-face { + font-family: 'Spoqa Han Sans Neo'; + font-weight: 100; + src: local('Spoqa Han Sans Neo Thin'), + url('../fonts/SpoqaHanSansNeo-Thin.woff2') format('woff2'), + url('../fonts/SpoqaHanSansNeo-Thin.woff') format('woff'), + url('../fonts/SpoqaHanSansNeo-Thin.ttf') format('truetype'); +} \ No newline at end of file diff --git a/assets/css/guide.css b/assets/css/guide.css new file mode 100644 index 0000000..909fd6a --- /dev/null +++ b/assets/css/guide.css @@ -0,0 +1,8736 @@ +@charset "UTF-8"; +/*공통으로 쓰일 스타일*/ +.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 rgba(255, 255, 255, 0.2) !important; +} + +.bd_right1 { + border: none !important; + border-right: 0.1rem solid rgba(255, 255, 255, 0.2) !important; +} + +.bd_sky { + border: 0.063rem solid #27D4FF !important; +} + +/* placeholder */ +input::-moz-placeholder, textarea::-moz-placeholder { + color: var(--white-w_40); +} +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; +} +.scroll.sc_y, .textarea.sc_y { + overflow: hidden; + overflow-y: auto; + padding: 0 0.5rem 0 0; +} +.scroll.sc_y.main, .textarea.sc_y.main { + max-height: 23.438rem; +} +.scroll.sc_y.user, .textarea.sc_y.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: rgba(255, 255, 255, 0.38); + 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; +} + +.overflow_y { + overflow-y: auto; +} +.overflow_y::-webkit-scrollbar { + width: 0.25rem; +} +.overflow_y::-webkit-scrollbar-thumb { + background: var(--white-w_40); + border-radius: 0.625rem; +} +.overflow_y::-webkit-scrollbar-track { + background-color: none; +} +.overflow_y::-webkit-scrollbar-corner { + background-color: transparent; +} + +.anchor_default { + text-decoration: underline; + color: #024294 !important; +} +.anchor_default:hover, .anchor_default:focus { + text-decoration: underline; +} + +.fc_primary { + color: #27D4FF !important; +} + +.fc_normal { + color: #338FFF !important; +} + +.fc_normal_more40 { + color: rgba(51, 143, 255, 0.4) !important; +} + +.fc_purple { + color: #FF00FF !important; +} + +.fc_yellow { + color: #FFE043 !important; +} + +.fc_yellow_04 { + color: #FFBC04 !important; +} + +.fc_yellow_code { + color: rgba(255, 255, 128, 0.6823529412) !important; +} + +.fc_green { + color: #16D9AB !important; +} + +.fc_code_green { + color: #1CAF93 !important; +} + +.fc_light_green { + color: #00FF00 !important; +} + +.fc_card_green { + color: #1CBD6D; +} + +.fc_code_class { + color: deeppink !important; +} + +.fc_blue { + color: #024294 !important; +} + +.text_error { + color: #FF1F55 !important; +} + +.fc_black99 { + color: rgba(0, 0, 0, 0.6) !important; +} + +.fc_black60 { + color: rgba(0, 0, 0, 0.6) !important; +} + +.fc_black87 { + color: rgba(0, 0, 0, 0.87) !important; +} + +.fc_black40 { + color: rgba(0, 0, 0, 0.4) !important; +} + +.fc_blackcc { + color: rgba(0, 0, 0, 0.8) !important; +} + +.bg_blackde { + color: rgba(0, 0, 0, 0.871) !important; +} + +.fc_error { + color: #D60000 !important; +} + +.fc_999 { + color: #999999 !important; +} + +.fc_222 { + color: #222222 !important; +} + +.fc_grey99 { + color: rgba(255, 255, 255, 0.6) !important; +} + +.fc_grey87 { + color: rgba(255, 255, 255, 0.87) !important; +} + +.fc_grey60 { + color: rgba(255, 255, 255, 0.6) !important; +} + +.fc_grey50 { + color: rgba(255, 255, 255, 0.5) !important; +} + +.fc_grey40 { + color: rgba(255, 255, 255, 0.4) !important; +} + +.fc_grey38 { + color: rgba(255, 255, 255, 0.38) !important; +} + +.fc_grey30 { + color: rgba(255, 255, 255, 0.3) !important; +} + +.fc_grey20 { + color: rgba(255, 255, 255, 0.2) !important; +} + +.fc_grey10 { + color: rgba(255, 255, 255, 0.1) !important; +} + +.fc_grey06 { + color: rgba(255, 255, 255, 0.06) !important; +} + +.fc_white { + color: #ffffff !important; +} + +.fs_24_bold { + font-size: 1.5rem; + font-weight: 700; +} + +.fs_24_medium { + font-size: 1.5rem; + font-weight: 500; +} + +.fs_20_medium { + font-size: 1.25rem; + font-weight: 500; +} + +.fs_18_bold { + font-size: 1.125rem; + font-weight: 700; +} + +.fs_18_medium { + font-size: 1.125rem; + font-weight: 500; +} + +.fs_16_bold { + font-size: 1rem; + font-weight: 700; +} + +.fs_16_medium { + font-size: 1rem; + font-weight: 500; +} + +.fs_16 { + font-size: 1rem; + font-weight: 400; +} + +.fs_14_bold { + font-size: 0.875rem; + font-weight: 700; +} + +.fs_14_medium { + font-size: 0.875rem; + font-weight: 500; +} + +.fs_14 { + font-size: 0.875rem; + font-weight: 400; +} + +.fs_14_light { + font-size: 0.875rem; + font-weight: 300; +} + +.fs_13_medium { + font-size: 0.8125rem; + font-weight: 500; +} + +.fs_13 { + font-size: 0.8125rem; + font-weight: 400; +} + +.fs_12_medium { + font-size: 0.75rem !important; + font-weight: 500 !important; +} + +.fs_12 { + font-size: 0.75rem; + font-weight: 400; +} + +.fs_11_medium { + font-size: 0.6875rem; + font-weight: 500; +} + +.fs_11 { + font-size: 0.6875rem; + font-weight: 400; +} + +.fs_10 { + font-size: 0.625rem; + font-weight: 400; +} + +.border_radius50 { + border-radius: 50%; +} + +.border_radius0 { + border-radius: 0 !important; +} + +.border_none { + border: none !important; +} + +.border_greyE0 { + border: 0.063rem solid #DCDDE0; +} + +.border_greyEb { + border: 0.063rem solid #e6e7eb; +} + +.border_greyF5 { + border: 0.063rem solid #F0F1F5; +} + +.border_white20 { + border: 0.063rem solid rgba(255, 255, 255, 0.2); +} + +.border_white38 { + border: 0.063rem solid rgba(255, 255, 255, 0.38); +} + +.border_black30 { + border: 0.063rem solid rgba(0, 0, 0, 0.3); +} + +.border_sky40 { + border: 0.063rem solid rgba(39, 212, 255, 0.4) !important; +} + +.top_white12 { + border-top: 0.063rem solid rgba(255, 255, 255, 0.1); +} + +.rht_white12 { + border-right: 0.063rem solid rgba(255, 255, 255, 0.1) !important; +} + +.btm_white20 { + color: var(--white-w_60); + border-bottom: 0.063rem solid var(--white-w_20); +} +.btm_white20 .id, .btm_white20 .name { + font-size: 0.875rem; + font-weight: 500; + color: var(--white-w_87); +} + +.btm_white12 { + border-bottom: 0.063rem solid rgba(255, 255, 255, 0.1); +} + +.btm_none { + border-bottom: none !important; +} + +.route_border_sky40 { + border: 0.313rem solid var(--primary-pri_40); +} + +.route_border_sky { + border: 0.313rem solid var(--primary-pri_100); +} + +.route_border_yellow { + border: 0.313rem solid #FFE043; +} + +.route_border_blue { + border: 0.313rem solid rgba(0, 104, 230, 0.6); +} + +.route_border_purple { + border: 0.313rem solid #8972FF; +} + +.route_border_red { + border: 0.313rem solid #D60000; +} + +.bg_ui_gradation { + background: transparent linear-gradient(104deg, #0068E6 0%, #27D4FF 100%) 0% 0% no-repeat; +} + +.bg_black { + background-color: rgb(0, 0, 0); +} + +.bg_default { + background: rgb(10, 11, 20) !important; +} + +.bg_ui_blue { + background: #024294 !important; +} + +.bg_ui_blue_more { + background: #0068E6 !important; +} + +.bg_cluster { + background: rgb(0, 104, 230) !important; +} + +.bg_white { + background: #ffffff !important; +} + +.bg_ui_sky { + background: #27D4FF !important; +} + +.bg_ui_sky_blue { + background: var(--primary-pri_100) !important; +} + +.bg_ui_sky_10 { + background-color: rgba(39, 212, 255, 0.1); +} + +.bg_ui_sky_05 { + background-color: rgba(39, 212, 255, 0.05); +} + +.bg_secondary__purple { + background: #937EFF; +} + +.bg_secondary__green { + background: #16D9AB; +} + +.bg_secondary__yellow { + background: #FFE043; +} + +.bg_state__normal { + background: #024294; +} + +.bg_state__success { + background: #00BD78; +} + +.bg_state__error { + background: #D60000; +} + +.bg_grey50 { + background: rgba(255, 255, 255, 0.5); +} + +.bg_grey40 { + background: rgba(255, 255, 255, 0.4); +} + +.bg_grey30 { + background: rgba(255, 255, 255, 0.3); +} + +.bg_grey20 { + background: rgba(255, 255, 255, 0.2); +} + +.bg_grey16 { + background: rgba(255, 255, 255, 0.16); +} + +.bg_grey10 { + background: rgba(255, 255, 255, 0.1); +} + +.bg_grey06 { + background: rgba(255, 255, 255, 0.06); +} + +.bg_black40 { + background: rgba(0, 0, 0, 0.4); +} + +.bg_purple { + background: rgba(255, 0, 255, 0.4); +} + +.bg_greyf5 { + background: #F0F1F5; +} + +.bg_greye0 { + background: #DCDDE0; +} + +.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_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_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: rgba(255, 255, 255, 0.12); +} + +.label_color17 { + background: #07F; +} + +.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 { + align-items: center; + justify-content: center; + 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 { + align-items: center; + justify-content: center; +} + +.layout_acjb { + align-items: center; + justify-content: space-between; +} + +.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: 33.3333333333%; +} + +.column_4 { + width: 25%; +} + +.column_5 { + width: 20%; +} + +.column_6 { + width: 16.6666666667%; +} + +.column_7 { + width: 14.2857142857%; +} + +.column_8 { + width: 12.5%; +} + +.column_9 { + width: 11.1111111111%; +} + +.column_10 { + width: 10%; +} + +.column_11 { + width: 9.0909090909%; +} + +.column_12 { + width: 8.3333333333%; +} + +.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 { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.col_gap0 { + -moz-column-gap: 0 !important; + column-gap: 0 !important; +} + +.col_gap2 { + -moz-column-gap: 0.125rem; + column-gap: 0.125rem; +} + +.col_gap4 { + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.col_gap6 { + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} + +.col_gap7 { + -moz-column-gap: 0.438rem; + column-gap: 0.438rem; +} + +.col_gap8 { + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} + +.col_gap10 { + -moz-column-gap: 0.625rem; + column-gap: 0.625rem; +} + +.col_gap12 { + -moz-column-gap: 0.75rem; + column-gap: 0.75rem; +} + +.col_gap16 { + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.col_gap18 { + -moz-column-gap: 1.125rem; + column-gap: 1.125rem; +} + +.col_gap20 { + -moz-column-gap: 1.25rem; + column-gap: 1.25rem; +} + +.col_gap24 { + -moz-column-gap: 1.5rem; + column-gap: 1.5rem; +} + +.col_gap28 { + -moz-column-gap: 1.75rem; + column-gap: 1.75rem; +} + +.col_gap30 { + -moz-column-gap: 1.875rem; + column-gap: 1.875rem; +} + +.col_gap32 { + -moz-column-gap: 2rem; + column-gap: 2rem; +} + +.col_gap40 { + -moz-column-gap: 2.5rem; + column-gap: 2.5rem; +} + +.col_gap48 { + -moz-column-gap: 3rem; + column-gap: 3rem; +} + +.col_gap50 { + -moz-column-gap: 3.125rem; + column-gap: 3.125rem; +} + +.col_gap60 { + -moz-column-gap: 3.75rem; + column-gap: 3.75rem; +} + +.col_gap64 { + -moz-column-gap: 4rem; + column-gap: 4rem; +} + +.col_gap80 { + -moz-column-gap: 5rem; + column-gap: 5rem; +} + +.col_gap100 { + -moz-column-gap: 6.25rem; + column-gap: 6.25rem; +} + +.col_gap164 { + -moz-column-gap: 10.25rem; + column-gap: 10.25rem; +} + +.col_gap200 { + -moz-column-gap: 12.5rem; + column-gap: 12.5rem; +} + +.col_gap250 { + -moz-column-gap: 15.625rem; + column-gap: 15.625rem; +} + +.col_gap272 { + -moz-column-gap: 17rem; + column-gap: 17rem; +} + +.col_gap300 { + -moz-column-gap: 18.75rem; + column-gap: 18.75rem; +} + +.col_gap464 { + -moz-column-gap: 29rem; + column-gap: 29rem; +} + +.col_gap500 { + -moz-column-gap: 31.25rem; + column-gap: 31.25rem; +} + +.col_gap732 { + -moz-column-gap: 45.75rem; + column-gap: 45.75rem; +} + +.col_gap796 { + -moz-column-gap: 49.75rem; + 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 { + border-radius: 0.625rem; +} + +.radius_2 { + border-radius: 0.125rem; +} + +.row_box { + width: 66.875rem; + max-width: 66.875rem; + margin: 0 auto; +} + +button .img { + display: block; +} +button .img_on { + display: none; +} +button:hover:not(.hover):not(.legend):not(.selected):not(.disabled):not(.map) .img, button:active:not(.map):not(.disabled) .img, button.selected .img { + display: none; +} +button:hover:not(.hover):not(.legend):not(.selected):not(.disabled):not(.map) .img_on, button:active:not(.map):not(.disabled) .img_on, button.selected .img_on { + display: block; +} +button:hover:not(.hover):not(.legend):not(.selected):not(.disabled):not(.map) .circle_grey28, button:hover:not(.hover):not(.legend):not(.selected):not(.disabled):not(.map) .circle_grey32, button:active:not(.map):not(.disabled) .circle_grey28, button:active:not(.map):not(.disabled) .circle_grey32, button.selected .circle_grey28, button.selected .circle_grey32 { + background-color: var(--icon-pri_20-to-100); +} +button:hover:not(.hover):not(.legend):not(.selected):not(.disabled):not(.map) .circle_grey28 .map, button:active:not(.map):not(.disabled) .circle_grey28 .map, button.selected .circle_grey28 .map { + background-color: unset; +} +button.disabled .img { + display: block; +} +button.disabled .img_on { + display: none; +} +button.circle32:hover:not(.disabled), button.circle32:focus:not(.disabled), button.circle32.selected { + background-color: var(--white-w_12); + border: none; +} +button.circle32.disabled { + opacity: 0.6; +} +button.circle_grey32.line:hover, button.circle_grey32.line:focus, button.circle_grey32.line.selected { + background-color: rgba(39, 212, 255, 0.3); + border: none; +} + +.button_165 { + align-items: center; + justify-content: center; + border-radius: 0.25rem; + display: flex; + width: 10.3125rem; + height: 3rem; + background-color: #024294; +} + +.btn_primary { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + background: var(--PRI); + color: var(--white-w_100); + border-radius: 8px; +} +.btn_primary.disabled { + background: var(--white-w_12); + box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1); + color: var(--white-w_20); +} + +.btn_secondary { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + background: transparent; + color: var(--PRI); + border: 1px solid var(--PRI); + border-radius: 8px; +} +.btn_secondary:hover, .btn_secondary.hover { + background: var(--white-w_16); +} +.btn_secondary.disabled { + background: var(--white-w_12); + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--white-w_20); +} + +.btn_line { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + background: transparent; + color: var(--white-w_87-sec); + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; +} +.btn_line:hover, .btn_line.hover { + background: var(--white-w_16); +} +.btn_line.disabled { + background: var(--white-w_12); + color: var(--white-w_20); +} + +.btn_floating { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + background: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + color: var(--white-w_100-sec); +} +.btn_floating:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), .btn_floating.hover { + background: var(--btn-btn_hover); + border: none; + box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5); + color: var(--white-w_100); +} +.btn_floating.selected { + background: var(--btn-btn_default); + border: none; + box-shadow: inset 0 0 0.75rem #0476FF; + color: var(--white-w_100); +} +.btn_floating.card_selected { + background: var(--tab-btn_default); + border: none; + box-shadow: inset 0 0 0.75rem #0476FF; + color: var(--white-w_100); +} +.btn_floating.disabled { + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-100); + box-shadow: none; + color: var(--white-w_20); +} + +.btn_ffb { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + font-size: 0.875rem; + font-weight: 500; + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-40); + color: var(--white-w_87); +} +.btn_ffb:hover:not(.selected):not(.disabled), .btn_ffb.hover { + background: var(--primary-pri_12); + color: var(--primary-pri_100); + border: 0.063rem solid var(--line-wh_12-to-40); + font-weight: 700; +} +.btn_ffb.selected { + background: var(--primary-pri_20); + border: 0.063rem solid var(--line-wh_12-to-40); + color: var(--primary-pri_100); + font-weight: 700; +} +.btn_ffb.disabled { + background: var(--bg_01_40); + border: 0.063rem solid var(--white-w_12); + color: var(--white-w_20); +} + +.btn_ghost { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); +} +.btn_ghost:hover { + background: rgba(255, 255, 255, 0.06); +} +.btn_ghost.selected { + background: transparent; + color: #27D4FF; +} +.btn_ghost.disabled { + background: transparent; + color: rgba(255, 255, 255, 0.38); +} + +.btn_line1 { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + color: var(--white-w_60); + background: transparent; + border: 0.063rem solid var(--white-w_20); +} +.btn_line1:hover, .btn_line1:focus, .btn_line1.selected { + color: var(--white-w_87-sec); + border: 0.063rem solid var(--white-w_87-sec); +} +.btn_line1.disabled { + background: transparent; + border: 0.063rem solid var(--white-w_20); + color: rgba(255, 255, 255, 0.38); +} +.btn_line1.withtab { + border: 0.063rem solid var(--white-w_20); +} +.btn_line1.withtab:hover, .btn_line1.withtab:focus, .btn_line1.withtab.selected { + color: var(--white-w_87-sec); + border: 0.063rem solid var(--white-w_87-sec); +} + +.btn_line2 { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + color: var(--white-w_60); + background: transparent; + border: 0.063rem solid var(--white-w_40); +} +.btn_line2:hover, .btn_line2:focus, .btn_line2.selected { + color: var(--primary-pri_100); + border: 0.063rem solid var(--primary-pri_100); +} +.btn_line2.disabled { + border: 0.063rem solid rgba(255, 255, 255, 0.38); + color: rgba(255, 255, 255, 0.2); +} + +.btn_file { + cursor: pointer; +} + +.btn_toggle_primary { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + font-size: 0.875rem; + font-weight: 500; + background: var(--white-w_12); + color: var(--white-w_87); +} +.btn_toggle_primary:hover, .btn_toggle_primary:focus, .btn_toggle_primary.selected { + background: var(--btn-btn_selected); + color: var(--white-w_100); +} +.btn_toggle_primary.disabled { + background: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.38); +} + +.btn_toggle_secondary { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + background: rgba(255, 255, 255, 0.12); +} +.btn_toggle_secondary.selected { + background: #04091A 0% 0%; + border: 0.063rem solid rgba(255, 255, 255, 0.502); +} +.btn_toggle_secondary:hover:not(.selected):not(.disabled), .btn_toggle_secondary:focus:not(.selected):not(.disabled) { + background: rgba(255, 255, 255, 0.16); + border: none; +} +.btn_toggle_secondary:hover:not(.selected):not(.disabled) .circle32, .btn_toggle_secondary:focus:not(.selected):not(.disabled) .circle32 { + background-color: rgba(255, 255, 255, 0.2); +} +.btn_toggle_secondary.disabled { + background: rgba(255, 255, 255, 0.12); + color: rgba(255, 255, 255, 0.38); +} + +.btn_toggle_floating { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + background: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + color: var(--white-w_100-sec); +} +.btn_toggle_floating:hover:not(.selected):not(.card_selected):not(.hover):not(.disabled), .btn_toggle_floating.hover { + background: var(--btn-btn_hover); + border: none; + box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5); + color: var(--white-w_100); +} +.btn_toggle_floating.selected { + background: var(--btn-btn_default); + border: none; + box-shadow: inset 0 0 0.75rem #0476FF; + color: var(--white-w_100); +} +.btn_toggle_floating.card_selected { + background: var(--tab-btn_default); + border: none; + box-shadow: inset 0 0 0.75rem #0476FF; + color: var(--white-w_100); +} +.btn_toggle_floating.disabled { + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-100); + box-shadow: none; + color: var(--white-w_20); +} +.btn_toggle_floating:hover, .btn_toggle_floating:focus { + border-radius: 0 !important; +} +.btn_toggle_floating.disabled { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border: 0.063rem solid var(--line-wh_12-to-100); + background: var(--bg_01_80); + box-shadow: none; + color: var(--white-w_20); +} +.btn_toggle_floating.selected { + background: var(--btn-btn_default); + box-shadow: inset 0 0 0.75rem #0476FF; + border: none; + -webkit-backdrop-filter: unset; + backdrop-filter: unset; +} + +.btn_toggle_footer { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + font-size: 0.875rem; + font-weight: 400; + background: rgba(10, 11, 20, 0.4); + border: 0.063rem solid rgba(255, 255, 255, 0.2); +} +.btn_toggle_footer.selected, .btn_toggle_footer:hover, .btn_toggle_footer:focus { + background: rgba(39, 212, 255, 0.2); + border: 0.063rem solid rgba(255, 255, 255, 0.12); + color: #27D4FF; +} + +.btn_toggle_ffb { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + font-size: 0.875rem; + font-weight: 500; + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-40); + color: var(--white-w_87); +} +.btn_toggle_ffb:hover:not(.selected):not(.disabled), .btn_toggle_ffb.hover { + background: var(--primary-pri_12); + color: var(--primary-pri_100); + border: 0.063rem solid var(--line-wh_12-to-40); + font-weight: 700; +} +.btn_toggle_ffb.selected { + background: var(--primary-pri_20); + border: 0.063rem solid var(--line-wh_12-to-40); + color: var(--primary-pri_100); + font-weight: 700; +} +.btn_toggle_ffb.disabled { + background: var(--bg_01_40); + border: 0.063rem solid var(--white-w_12); + color: var(--white-w_20); +} +.btn_toggle_ffb.disabled { + border: 0.063rem solid rgba(255, 255, 255, 0.12); + background: rgba(10, 11, 20, 0.4); + box-shadow: none; + color: rgba(255, 255, 255, 0.38); +} + +.btn_toggle_icon { + font-size: 0.875rem; + font-weight: 400; + display: flex; + align-items: center; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; + line-height: 1.75rem; + color: var(--white-w_87); +} +.btn_toggle_icon.legend:hover:not(.legend), .btn_toggle_icon.legend:active:not(.legend), .btn_toggle_icon.legend.selected { + color: transparent; +} +.btn_toggle_icon:hover:not(.legend):not(.disabled), .btn_toggle_icon:focus:not(.disabled), .btn_toggle_icon:active:not(.disabled), .btn_toggle_icon.selected { + color: var(--primary-pri_100); +} +.btn_toggle_icon.disabled { + opacity: 0.6; +} + +.img_selected { + display: none; +} + +.on .img_off { + display: none; +} +.on .img_selected { + display: block; +} + +.btn_icon { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + gap: 0.25rem; + min-width: 2.5rem; + padding: 0 0.5rem; + font-weight: 500; + color: var(--white-w_87-sec) !important; +} +.btn_icon .word { + color: var(--white-w_87-sec) !important; +} +.btn_icon .word_grey { + color: var(--white-w_60) !important; +} +.btn_icon:hover:not(.disabled) .word, .btn_icon.selected .word { + opacity: 1; + color: var(--primary-pri_100) !important; + font-weight: 700; +} +.btn_icon:hover:not(.disabled) .word_grey, .btn_icon.selected .word_grey { + opacity: 1; + color: var(--primary-pri_100) !important; + font-weight: 700; +} +.btn_icon.btn_l { + padding: 0 1.25rem; +} +.btn_icon.large { + min-width: auto; + width: 2.5rem; + height: 2.5rem; + padding: 0; +} +.btn_icon.medium { + min-width: auto; + width: 2.25rem; + height: 2.25rem; + padding: 0; +} +.btn_icon.mini { + min-width: auto; + width: 1.5rem; + height: 1.5rem; + padding: 0; +} +.btn_icon.xmini { + min-width: auto; + width: 1.25rem; + height: 1.25rem; + padding: 0; +} +.btn_icon .word { + font-size: 0.875rem; + font-weight: 500; + padding: 0; + color: var(--white-w_87-sec) !important; +} + +.icon_primary { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + background: var(--PRI); + color: var(--white-w_100); + border-radius: 8px; + width: auto; +} +.icon_primary.disabled { + background: var(--white-w_12); + box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1); + color: var(--white-w_20); +} + +.icon_ffb { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-100); + z-index: 1; +} +.icon_ffb:hover, .icon_ffb.selected { + border: 0.063rem solid var(--line-wh_12-to-100); +} +.icon_ffb.line { + border: 0.063rem solid var(--white-w_12); + background: var(--bg_01_80); + -webkit-backdrop-filter: unset; + backdrop-filter: unset; +} +.icon_ffb.disabled { + opacity: 0.6; +} + +.icon_ghost { + background: transparent; +} + +.btn_l { + height: 40px; + font-weight: 700; + font-size: 16px; + letter-spacing: 0.031rem; +} + +.btn_m { + height: 32px; + font-weight: 700; + font-size: 14px; + letter-spacing: 0.031rem; +} + +.btn_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; +} +.btn_s_h28 .word { + font-size: 0.8125rem; + font-weight: 500; +} + +.btn_arrow_circle { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + overflow: hidden; + background: transparent; + border-radius: 100%; +} +.btn_arrow_circle:hover:not(.hover):not(.disabled), .btn_arrow_circle:focus:not(.hover):not(.disabled):not(.selected), .btn_arrow_circle.selected { + background: var(--white-w_16); +} +.btn_arrow_circle.disabled { + background: transparent; +} +.btn_arrow_circle.disabled img { + opacity: 0.2 !important; +} +.btn_arrow_circle.line { + background: var(--bg_02_60); + border: 0.125rem solid var(--white-w_60); +} +.btn_arrow_circle.line:hover:not(.hover):not(.disabled), .btn_arrow_circle.line:active:not(.hover):not(.disabled), .btn_arrow_circle.line.selected { + background: var(--primary-pri_20); + border: 0.125rem solid var(--primary-pri_100); +} +.btn_arrow_circle.line.disabled { + border: 0.125rem solid var(--white-w_20); +} + +.btn_arrow_s { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + overflow: hidden; + background: var(--white-w_12); + border-radius: 0.125rem; +} +.btn_arrow_s:hover:not(.hover), .btn_arrow_s:active, .btn_arrow_s.selected, .btn_arrow_s.hover { + background: var(--white-w_16); +} + +.btn_arrow { + display: flex; + align-items: center; + justify-content: center; + 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; +} +.btn_arrow:hover:not(.hover):not(.disabled), .btn_arrow.hover, .btn_arrow:focus, .btn_arrow.selected { + background: var(--primary-pri_12); + border: 0.063rem solid var(--line-pri_40-to-wh_40); +} +.btn_arrow.disabled { + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-100); +} +.btn_arrow.disabled img { + opacity: 0.2 !important; +} + +.btn_arrow_l { + display: flex; + align-items: center; + justify-content: center; + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border-radius: 0.25rem; + width: 1.75rem; + height: 4.625rem; + overflow: hidden; + background: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); +} +.btn_arrow_l:hover, .btn_arrow_l.hover, .btn_arrow_l.selected { + background: var(--primary-pri_12); + border: 0.063rem solid var(--line-pri_40-to-wh_40); +} +.btn_arrow_l.left { + border-radius: 0.25rem 0 0 0.25rem; +} +.btn_arrow_l.right { + border-radius: 0 0.25rem 0.25rem 0; +} +.btn_arrow_l.disabled { + background: var(--bg_01_80); + border: 0.063rem solid rgba(255, 255, 255, 0.12); +} +.btn_arrow_l.disabled img { + opacity: 0.2 !important; +} + +.put_drop { + width: 1.25rem; + height: 1.25rem; + cursor: pointer; +} +.put_drop.up { + transform: rotate(180deg); +} +.put_drop.down { + transform: rotate(180deg); +} + +.btn_drop { + width: 9.625rem; + justify-content: space-between; + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} +.btn_drop.disabled { + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-100); + color: var(--white-w_20); +} +.btn_drop.disabled .put_drop img, .btn_drop.disabled .put_see img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); + opacity: 0.3; +} +.btn_drop.selected .put_drop { + transform: rotate(180deg); +} +.btn_drop.selected .put_drop.down { + transform: rotate(0deg); +} +.btn_drop .word { + font-size: 0.875rem; + font-weight: 500; + width: calc(100% - 1.25rem); +} +.btn_drop .drop_word { + font-size: 0.875rem; + font-weight: 700; + color: var(--grade-chart-gco-01); + width: calc(100% - 1.25rem); +} + +.drop_wrap { + position: relative; +} +.drop_wrap .drop_content { + position: absolute; + left: 0; + top: 2.5rem; + z-index: 100; +} +.drop_wrap.on .drop_content { + display: block; +} + +.circle_grey28 { + display: flex; + align-items: center; + justify-content: center; + width: 1.75rem; + height: 1.75rem; + overflow: hidden; + border-radius: 100%; + padding: 0; + background-color: var(--white-w_20); +} +.circle_grey28 + .word { + font-size: 0.75rem; + font-weight: 400; +} +.circle_grey28.popover { + background-color: rgba(74, 78, 102, 0.8); +} +.circle_grey28.map { + background-color: #0068E6; + border: 0.063rem solid rgba(0, 0, 0, 0.3); +} + +.circle16, .circle32, .circle48, .circle64 { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + overflow: hidden; + border-radius: 100%; + padding: 0; + background-color: transparent; +} +.circle16 + .word, .circle32 + .word, .circle48 + .word, .circle64 + .word { + font-size: 0.875rem; + font-weight: 400; +} + +.circle16 { + width: 1rem; + height: 1rem; +} + +.circle48 { + width: 3rem; + height: 3rem; +} + +.circle64 { + width: 4rem; + height: 4rem; +} + +.circle_grey32 { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + overflow: hidden; + border-radius: 100%; + padding: 0; + background-color: rgba(255, 255, 255, 0.2); +} +.circle_grey32 + .word { + font-size: 0.875rem; + font-weight: 400; +} +.circle_grey32.line { + background-color: transparent; + border: 0.063rem solid var(--white-w_12); +} +.circle_grey32 + .word_medium { + font-size: 0.875rem; + font-weight: 500; +} +.circle_grey32 + .word_medium.selected, .circle_grey32 + .word_medium:hover { + font-weight: 700; +} + +.tab_line { + display: flex; + align-items: center; +} +.tab_line button { + margin-right: -0.063rem; + border-radius: 0; +} +.tab_line button:first-child { + border-radius: 0.125rem 0 0 0.125rem; +} +.tab_line button:last-child { + border-radius: 0 0.125rem 0.125rem 0; +} +.tab_line.spacing { + gap: 0.125rem; +} +.tab_line.spacing button { + margin: 0; + border-radius: 0.125rem; +} + +.connect_line { + display: flex; + align-items: center; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + background: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-100); + padding: 0 0.5rem; + border-radius: 0.125rem; + position: relative; + overflow: hidden; +} +.connect_line.rounding { + height: 4rem; + padding: 0 0.25rem; + background: rgba(10, 11, 20, 0.4); + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border-radius: 4rem; +} +.connect_line.rounding button { + padding: 0 1rem; +} +.connect_line.box { + padding: 0.75rem 1.25rem; + -moz-column-gap: 1.25rem; + column-gap: 1.25rem; +} +.connect_line.big_box { + padding: 0.75rem 0.75rem 0.75rem 1.25rem; + -moz-column-gap: 1.25rem; + column-gap: 1.25rem; +} +.connect_line.more { + padding: 0.375rem 0.75rem; +} +.connect_line.sky { + border: 0.063rem solid var(--line-pri_40-to-wh_100); +} +.connect_line.none_shadow { + box-shadow: unset; +} +.connect_line .shadow { + position: absolute; + width: 5.25rem; + padding: 0.5rem; +} +.connect_line .shadow.left { + left: 0; + top: 0; + background: linear-gradient(90deg, var(--bg_02) 36%, rgba(4, 9, 26, 0) 100%); +} +.connect_line .shadow.right { + display: flex; + align-items: center; + justify-content: flex-end; + right: 0; + top: 0; + background: linear-gradient(270deg, var(--bg_02) 36%, rgba(4, 9, 26, 0) 100%); +} +.connect_line button { + background: none !important; +} + +.shadow { + display: flex; + align-items: center; + height: 100%; +} + +.horizon_line { + white-space: nowrap; +} +.horizon_line .horibox { + display: inline-block; +} + +.horibox .a_link { + display: block; +} + +.arrow_box { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + background: var(--white-w_12); + border-radius: 0.125rem; + cursor: pointer; +} +.arrow_box:hover, .arrow_box:focus { + background: var(--white-w_16); +} + +/*controll bar*/ +.control_line { + display: flex; + align-items: center; +} +.control_line.mini { + width: 10rem; +} +.control_line.mini .progress_box { + width: 7rem; + height: 1.5rem; +} +.control_line.mini .progress_box .bar { + width: 5.5rem; +} +.control_line .btn_icon:first-child { + margin-right: -0.063rem; +} +.control_line .btn_icon:last-child { + margin-left: -0.063rem; +} +.control_line .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: rgba(255, 255, 255, 0.12); +} + +.progress_box { + display: flex; + align-items: center; + justify-content: center; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + 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); +} +.progress_box .bar { + border-radius: 0.125rem; + width: 6.5rem; + height: 0.25rem; + overflow: hidden; + margin: 0 auto; + background: var(--primary-pri_20); + cursor: pointer !important; +} +.progress_box.line { + border: 0.063rem solid var(--white-w_12); +} + +.scrubber { + border-radius: 0.125rem; + background: rgba(39, 212, 255, 0.2); +} +.scrubber .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 { + border-radius: 0.125rem; + background: var(--primary-pri_100); +} + +.translate3d_100 { + transform: translate3d(0.063rem, 0, 0); +} + +/*controll bar End*/ +.a_link { + font-size: 0.875rem; + font-weight: 500; + padding: 0.625rem 1rem; + cursor: pointer; + color: var(--more-visible-wh_60-to-100); + line-height: 1; +} +.a_link:hover, .a_link:focus { + color: var(--more-visible-wh_60-to-100); +} +.a_link.selected { + color: var(--primary-pri_100); + font-weight: 700; +} +.a_link.disabled { + color: rgba(255, 255, 255, 0.38); +} +.a_link.more { + font-size: 1rem; + font-weight: 700; +} +.a_link.short { + padding: 0.625rem 0.75rem; +} +.a_link.pad12 { + padding: 0.625rem 0.75rem; +} + +.vtline_20 { + display: inline-block; + width: 0.063rem; + height: 1.25rem; + background: var(--primary-pri_20); +} + +.btn_etc { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; +} + +.etc_zone { + position: relative; + width: 1.5rem; + height: 1.5rem; +} +.etc_zone .connect_etc { + position: absolute; + right: -0.8rem; + top: 2.6rem; + z-index: 100; +} +.etc_zone .connect_etc a { + display: block; +} + +.connect_etc { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border-radius: 0.125rem; + background: rgba(39, 212, 255, 0.05); + border: 0.063rem solid rgba(255, 255, 255, 0.12); + 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 { + display: flex; + align-items: center; + cursor: pointer; + width: 2.5rem; + height: 1.5rem; + background: var(--white-w_16); + border-radius: 2rem; + position: relative; + transition: 0.2s; +} +.switch_label.fill_line { + background: var(--more-visible-wh_20-to-12); + border: 0.063rem solid var(--white-w_60); +} +.switch_label.fill_line .switch_button { + background: var(--white-w_60); +} +.switch_label.line { + background: transparent; + border: 0.063rem solid var(--white-w_60); +} +.switch_label.line .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%; +} +.put_zone .wrput { + width: 100%; +} +.put_zone .wrput.large + .put_check { + top: 0.875rem; + right: 1rem; +} +.put_zone .wrput.large + .put_see { + top: 0.7rem; + right: 0.875rem; +} +.put_zone .put_check { + position: absolute; + right: 0.75rem; + top: 0.5rem; + display: none; +} +.put_zone .put_check.dflx { + display: flex; +} +.put_zone .put_see { + top: 0.25rem; + display: flex; +} +.put_zone .mess { + margin: 0.5rem 0 0; +} +.put_zone.normal .mess { + display: none; +} +.put_zone .srch_put { + flex: 1; +} + +.wrput { + font-size: 0.8125rem; + font-weight: 400; + width: 20rem; + height: 1.75rem; + background-color: var(--more-bright-wh_12-to-6); + border: 0.063rem solid rgba(255, 255, 255, 0); + border-radius: 0.125rem; + color: var(--white-w_87-sec); + line-height: 1; + letter-spacing: 0.031rem; + padding: 0 0.5rem; +} +.wrput.line { + background-color: transparent; + border: 0.063rem solid var(--white-w_40); +} +.wrput.on, .wrput:focus:not(.read_only):not(.read_error):not(.read_normal):not(.read_success) { + border: 0.063rem solid var(--primary-pri_100) !important; + outline: 0.188rem solid var(--primary-pri_20); +} +.wrput.success { + padding: 0 2rem 0 1rem; +} +.wrput.success + .put_check { + display: flex; +} +.wrput.error { + border: 0.063rem solid #D60000; + outline: none; +} +.wrput.etc { + width: 100%; + height: 1.75rem; + padding: 0 0.875rem; +} +.wrput.usage { + color: #00B295; +} +.wrput.large { + font-size: 0.875rem; + font-weight: 400; + width: 100%; + height: 2.5rem; + padding: 0 1rem; +} +.wrput.large.pass { + padding: 0 2.5rem 0 1rem; +} +.wrput.pass { + padding: 0 2.25rem 0 0.5rem; +} +.wrput.read_only { + background: var(--more-bright-wh_12-to-6); + border: 0.063rem solid var(--white-w_20); + outline: none; +} +.wrput.read_light { + background: var(--primary-pri_12); + border: 0.063rem solid var(--primary-pri_100); + outline: none; + color: var(--primary-pri_100); +} +.wrput.read_error { + background: rgba(219, 0, 0, 0.08); + border: 0.063rem solid #D60000; + outline: none; + color: #FF1F55; +} +.wrput.read_normal { + background: rgba(0, 104, 230, 0.2); + border: 0.063rem solid #0068E6; + outline: none; + color: #338FFF; +} +.wrput.read_success { + background: rgba(0, 189, 120, 0.1); + border: 0.063rem solid #00BD78; + outline: none; + color: #00BD78; +} +.wrput.text { + color: #ffffff; +} + +.sp_name { + font-size: 0.8125rem; + font-weight: 400; + padding: 0 0.5rem; +} +.sp_name.pink { + color: #FF00FF; +} + +.put_check { + display: flex; + align-items: center; + justify-content: center; + width: 0.75rem; + height: 0.75rem; +} +.put_check.green { + background-image: url("../images/check_green.svg"); + background-size: 1.25rem auto; +} + +.put_delete { + cursor: pointer; +} +.put_delete.on { + display: block; +} + +.img_see_off { + display: none; +} + +.put_see { + width: 1.25rem; + height: 1.25rem; + cursor: pointer; +} +.put_see.on .img_see { + display: none; +} +.put_see.on .img_see_off { + display: block; +} + +.img_down { + display: none; +} + +.put_drop { + width: 1.25rem; + height: 1.25rem; + cursor: pointer; +} +.put_drop.on .img_up { + display: none; +} +.put_drop.on .img_down { + display: block; +} + +.mess { + font-size: 0.75rem; + font-weight: 400; + line-height: 1.2; + color: rgba(0, 0, 0, 0.7); +} +.mess.on { + display: block; +} +.mess.error { + color: #FF1F55; +} + +.btn_srch { + font-size: 0.875rem; + font-weight: 400; + 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; +} +.btn_srch:hover, .btn_srch:focus { + background: #45464D; +} +.btn_srch.bldark { + background: #004099; +} +.btn_srch.bldark.on, .btn_srch.bldark:hover, .btn_srch.bldark:focus { + background: #003580; +} +.btn_srch.more { + padding: 0 1rem; +} +.btn_srch.med { + min-width: 8.875rem; +} +.btn_srch.wht { + background: #fff; + border: 0.063rem solid #dcdde0; + color: #000; +} +.btn_srch.wht.on, .btn_srch.wht:hover, .btn_srch.wht: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; +} +.temrs_text_wrap.line { + background: transparent; + border: 0.063rem solid var(--white-w_40); +} +.temrs_text_wrap.line_fill { + background: var(--more-bright-wh_12-to-6); + border: 0.063rem solid var(--white-w_20); +} +.temrs_text_wrap.line_fill.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; +} +.terms_area.edit { + padding: 0.5rem; + height: 10.5rem; +} + +.input_sett { + display: flex; + align-items: center; + position: relative; +} + +.btn_srch28 { + display: flex; + align-items: center; + justify-content: center; + font-size: 0.875rem; + font-weight: 400; + border-radius: 0.125rem; + color: var(--white-w_40); + width: 1.75rem; + height: 1.75rem; + background-color: var(--white-w_12); + text-indent: -9999px; +} +.btn_srch28:hover:not(.selected):not(.on):not(.disabled), .btn_srch28.selected { + background-color: var(--white-w_16); +} +.btn_srch28.shadow { + box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.1); +} +.btn_srch28.on, .btn_srch28:active:not(.selected):not(.on):not(.disabled) { + color: var(--white-w_100); + background-color: var(--btn-btn_selected); +} +.btn_srch28.on span, .btn_srch28:active:not(.selected):not(.on):not(.disabled) span { + opacity: 1 !important; +} +.btn_srch28.word { + width: auto; + min-width: 1.75rem; + padding: 0 0.5rem; + text-indent: 0; +} +.btn_srch28.srch.on, .btn_srch28.srch:active:not(.selected):not(.on) { + color: var(--white-w_100); + background-color: var(--btn-btn_default); +} +.btn_srch28.srch.on span, .btn_srch28.srch:active:not(.selected):not(.on) span { + opacity: 1 !important; +} +.btn_srch28.disabled { + opacity: 0.6; +} + +.srch_line { + display: flex; + align-items: center; + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} + +.srch_zone { + display: flex; + align-items: center; + border-radius: 0.125rem; + width: 12.5rem; + height: 1.75rem; + padding: 0.25rem 0.5rem; + background: var(--more-visible-wh_12-to-6); +} +.srch_zone.on { + border: 0.063rem solid var(--primary-pri_100) !important; + outline: 0.188rem solid var(--primary-pri_20); +} +.srch_zone.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 { + font-size: 0.8125rem; + font-weight: 400; + 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 { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + 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; +} +.srch_brd.on { + display: block; +} +.srch_brd.bottom_box { + bottom: unset; +} + +.srch_ul { + width: 100%; +} +.srch_ul li { + display: flex; + align-items: center; + height: 1.75rem; + padding: 0.375rem 0.5rem 0.3125rem 1rem; + cursor: pointer; +} +.srch_ul li .p_val { + font-size: 0.875rem; + font-weight: 400; + width: 100%; +} +.srch_ul li:hover, .srch_ul li:focus { + background-color: var(--primary-pri_20); +} +.srch_ul li:hover .p_val, .srch_ul li:focus .p_val { + border-right: 0.25rem solid rgba(255, 255, 255, 0.5); +} +.srch_ul li:hover .p_val.on, .srch_ul li:focus .p_val.on { + border-right: 0.25rem solid rgba(255, 255, 255, 0.5); +} +.srch_ul.hover li.on { + background-color: var(--primary-pri_20); +} +.srch_ul.hover li.on .p_val { + border-right: 0.25rem solid rgba(255, 255, 255, 0.5); +} + +.login_input { + width: 20rem; +} + +.save_group { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + padding: 1rem 0; +} + +.save_line { + display: flex; + align-items: center; +} +.save_line label { + font-size: 0.8125rem; + font-weight: 400; +} + +.pw_initial a { + font-size: 0.8125rem; + font-weight: 400; + color: var(--white-w_87-sec); + cursor: pointer; +} + +.pop_rcd_dl { + display: flex; + width: 100%; + margin: 0 0 0.5rem; +} +.pop_rcd_dl dt { + font-size: 0.8125rem; + font-weight: 400; + color: var(--more-visible-wh_60-to-100); + width: 4.5rem; + padding: 0.375rem 0.5rem 0 0; +} +.pop_rcd_dl dd { + flex: 1; +} +.pop_rcd_dl dd .selector { + width: 100%; +} + +.selector { + font-size: 0.875rem; + font-weight: 400; + border-radius: 0.125rem; + width: 13.5rem; + height: 1.75rem; + padding: 0.1rem 1.5rem 0 0.75rem; + color: var(--white-w_87); + -webkit-appearance: none; + -moz-appearance: none; + 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; +} +.selector.nobord { + width: 10rem; + border: none; +} +.selector.fill { + background-color: var(--more-bright-wh_12-to-6); + border: 0.063rem solid transparent; +} +.selector.fill option { + color: #000; +} +.selector.sm { + font-size: 0.8125rem; + font-weight: 400; + width: 7.5rem; + background-size: 1rem 1rem; +} +.selector.sm.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; +} +.selector.sm.color option { + color: #000; +} +.selector.on, .selector:focus { + border: 0.063rem solid var(--primary-pri_100) !important; + outline: 0.188rem solid var(--primary-pri_20); +} +.selector.detail { + background-color: transparent; +} +.selector.detail option { + color: #000; +} + +.editor_wrap { + width: 100%; + padding: 1.875rem; + border: 0.063rem dashed #555; +} + +.edit_btline { + display: flex; + align-items: center; + -moz-column-gap: 0.125rem; + column-gap: 0.125rem; +} + +.pipe28 { + width: 0.063rem; + height: 1.75rem; + background: rgba(255, 255, 255, 0.2); +} + +.h_tlt { + font-size: 1rem; + font-weight: 400; +} + +button { + font-size: 0.8125rem; + font-weight: 500; +} +button.edit_red { + color: #FF1F55; +} +button.edit_orange { + color: #FC5C34; +} +button.edit_yellow { + color: #FFE043; +} +button.edit_green { + color: #00BD78; +} +button.edit_blue { + color: #338FFF; +} +button.edit_white { + color: #fff; +} + +.vms_text_wrap { + display: flex; + align-items: center; + justify-content: center; + 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; +} +.vms_area.vms720 { + width: 45rem; + height: 9rem; + padding: 2rem 0 0; +} +.vms_area.vms288 { + display: flex; + align-items: center; + justify-content: center; + width: 30rem; + height: 18rem; + padding: 2.5rem; +} + +.indicator_test { + width: 100%; + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + width: 20rem; + padding: 1.25rem 1.25rem 1.25rem; + background: var(--bg_01_80); + overflow: hidden; +} +.indicator_test .indi_top { + padding: 1.25rem 1.25rem 1.25rem; + margin: 0 0 1rem; +} +.indicator_test .indi_shadow { + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); +} +.indicator_test.donot { + background-image: url("../../assets/images/do_not_line.svg"); + background-repeat: no-repeat; + width: 19.875rem; +} +.indicator_test.lay_donot { + height: 8.625rem !important; + background-image: url("../../assets/images/lay_do_not_line.svg"); +} + +.indicator { + width: 100%; + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + width: 20rem; + padding: 1.25rem 1.25rem 1.25rem; + background: var(--bg_01_80); + overflow: hidden; +} +.indicator.overt { + padding: 1.25rem 0.5rem 0rem 1.25rem; +} +.indicator.overt .indi_top { + margin: 0 0 1rem; +} +.indicator.overt .indi_conts { + margin: 0; +} +.indicator.donot { + background-image: url("../../assets/images/do_not_line.svg"); + background-repeat: no-repeat; + background-position: right top; + background-size: cover; +} +.indicator.lay_donot { + height: 8.625rem !important; + background-image: url("../../assets/images/lay_do_not_line.svg"); +} + +.indicator_shadow { + width: 100%; + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + width: 20rem; + padding: 1.25rem 1.25rem 1.25rem; + background: var(--bg_01_80); + overflow: hidden; + -webkit-backdrop-filter: unset; + backdrop-filter: unset; +} +.indicator_shadow.overt { + padding: 1.25rem 0.5rem 0rem 1.25rem; +} +.indicator_shadow.overt .indi_top { + margin: 0 0 1rem; +} +.indicator_shadow.overt .indi_conts { + margin: 0; +} +.indicator_shadow.donot { + background-image: url("../../assets/images/do_not_line.svg"); + background-repeat: no-repeat; + background-position: right top; + background-size: cover; +} +.indicator_shadow.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 { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + cursor: pointer; +} +.arr_up.down { + transform: rotate(180deg); +} + +.indi_top { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + cursor: pointer; +} +.indi_top h1 { + font-size: 1rem; + font-weight: 700; + color: var(--primary-to-grayscale-to-bk); + line-height: 1.1; +} +.indi_top .record_menu.hauto li a { + font-size: 0.875rem; + font-weight: 700; + padding: 0; +} +.indi_top.accord { + padding: 1.25rem 1.25rem 1.25rem; +} +.indi_top.withtab { + justify-content: unset; + -moz-column-gap: 1rem; + column-gap: 1rem; +} + +.indi_conts { + width: 100%; + margin: 1rem 0 0; +} +.indi_conts.del { + display: none; +} + +.indi_etc { + width: 100%; + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + padding: 0.85rem 0.75rem 0.7rem; + border-radius: 0.125rem; + margin: 0 0 0.5rem; + overflow: hidden; + cursor: pointer; +} +.indi_etc.on { + background-color: rgba(0, 104, 230, 0.5); + box-shadow: 0 0 0.75rem 0 inset #0068e6; +} +.indi_etc .indi_tlt { + font-size: 0.875rem; + font-weight: 500; + text-align: center; +} + +.record_menu { + display: flex; + align-items: center; + height: 2.75rem; + padding: 0 1.25rem 0 0; + -moz-column-gap: 1.875rem; + column-gap: 1.875rem; +} +.record_menu li a { + font-size: 0.875rem; + font-weight: 700; + color: var(--more-visible-wh_60-to-100); + display: block; +} +.record_menu li a:hover, .record_menu li a:focus { + color: var(--primary-pri_100); +} +.record_menu li a.on { + color: var(--primary-pri_100); + font-size: 1rem !important; +} +.record_menu li a.selected { + color: var(--primary-pri_100); +} +.record_menu li a.disabled { + color: rgba(255, 255, 255, 0.38); +} +.record_menu.hauto li a { + padding: 0 0 0.75rem; +} +.record_menu.usage li a { + font-size: 0.875rem; + font-weight: 500; + padding: 0 0 0.75rem; +} +.record_menu.main { + color: var(--white-w_87-sec); +} + +.tm_zone { + width: 13.125rem; +} +.tm_zone.hover { + border: 0.063rem solid var(--primary-pri_100); +} +.tm_zone.pressed { + border: 0.063rem solid var(--primary-pri_100); + background: var(--primary-pri_12); +} + +.tm_zone_top { + display: flex; + align-items: center; + justify-content: space-between; + 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); +} +.tm_zone_top h1 { + font-size: 0.875rem; + font-weight: 500; + 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; +} +.tmbox:last-child { + margin: 0; +} +.tmbox .start_dl { + margin-top: -0.5rem; +} +.tmbox.white6 { + background-color: var(--white-w_6); +} + +.tmbox_top { + display: flex; + align-items: center; + justify-content: space-between; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; + margin: 0 0 0.75rem; +} + +.tmbox_date { + font-size: 0.75rem; + font-weight: 300; + 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); +} +.tm_dl dt { + display: flex; + align-items: center; + justify-content: space-between; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; + margin: 0 0 0.5rem; +} +.tm_dl dt p { + font-size: 0.875rem; + font-weight: 500; + line-height: 1.3; +} +.tm_dl.pattern dt p { + font-size: 1rem; + font-weight: 700; +} +.tm_dl dd .badge { + margin: 0 0 0.25rem; + min-width: auto; + letter-spacing: 0.125rem; +} +.tm_dl dd p { + font-size: 0.8125rem; + font-weight: 400; + line-height: 1.4; +} +.tm_dl dd p.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 { + display: flex; + align-items: center; + justify-content: center; + 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_cont .diagon_tlt { + position: absolute; + left: 0.75rem; + top: 0.75rem; +} +.diagon_cont .diagon_result { + padding: 1.5rem 0 0; +} +.diagon_cont.sm { + justify-content: space-between; + width: 8.5rem; + height: 3rem; + padding: 0.8rem 0.7rem 0.5rem 0.6rem; + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; + background: url(../images/bg_tract_sm.svg) no-repeat left top; + background-size: 100% 100%; +} +.diagon_cont.sm .diagon_tlt { + position: static; +} +.diagon_cont.sm .diagon_result { + text-shadow: none; + font-size: 1rem; + padding: 0; + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} +.diagon_cont.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 { + font-size: 0.875rem; + font-weight: 500; + color: var(--primary-pri_100); +} +.diagon_tlt.cover { + width: 86%; + padding: 0.75rem 0 0 0.75rem; + background: url(../images/bg_tract_top.svg) no-repeat left top; + background-size: 100% auto; +} + +.diagon_result { + display: flex; + align-items: flex-end; + font-size: 1.75rem; + font-weight: 700; + color: var(--primary-pri_100); + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} +.diagon_result .unit { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.7; +} + +.indi_share { + display: flex; + align-items: center; + justify-content: space-between; + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; + width: 100%; + margin: 0 0 1rem; +} + +.indi_dl { + display: flex; + align-items: center; + justify-content: center; + 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); +} +.indi_dl.nobord { + border: none; +} +.indi_dl dt { + font-size: 1.25rem; + font-weight: 700; + display: flex; + align-items: flex-end; + color: var(--primary-pri_100); + margin: 0.25rem 0 0 0; +} +.indi_dl dt .unit { + font-size: 0.875rem; + font-weight: 400; + color: var(--primary-pri_60); + margin: 0 0 0 0.125rem; +} +.indi_dl dd { + font-size: 0.8125rem; + font-weight: 500; + color: var(--primary-pri_100); +} +.indi_dl.half { + width: 50%; + height: 5.25rem; +} +.indi_dl.third { + height: 3rem; + width: 33.333%; +} +.indi_dl.third dt { + font-size: 1rem; + font-weight: 700; +} +.indi_dl.green { + border: 0.063rem solid #1CBD6D; +} +.indi_dl.green dt, .indi_dl.green dd { + color: #1CBD6D; +} +.indi_dl.red { + border: 0.063rem solid #D60000; +} +.indi_dl.red dt, .indi_dl.red dd { + color: #D60000; +} + +.indi_chart { + width: 100%; +} +.indi_chart img { + width: 100%; +} + +.chart_text { + font-size: 0.8125rem; + font-weight: 400; + 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; +} +.sign_tri2.jam { + background: url(../images/sign_jam_28.svg) no-repeat center center; + background-size: contain; +} +.sign_tri2.ambulace { + width: 2.125rem; + height: 1rem; + background: url(../images/ambulance.svg) no-repeat center center; + background-size: contain; +} + +.detail_see { + display: flex; + align-items: center; + justify-content: flex-end; + font-size: 0.75rem; + font-weight: 300; + margin: 0.5rem 0 0; + padding: 0; + cursor: pointer; +} +.detail_see:hover, .detail_see:focus { + opacity: 0.8; +} +.detail_see .word { + color: var(--white-w_87); +} +.detail_see .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 { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + width: 100%; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} +.label_line .label { + margin: 0 0 0.5rem; +} + +.map_ex1 { + width: 100%; + height: 6.25rem; + position: relative; + overflow: hidden; + margin: 0 0 0.5rem; +} +.map_ex1 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; +} +.express_wrap.example { + width: 60rem; + height: 27rem; +} +.express_wrap.primary { + padding: 0.75rem; + border-radius: 0.125rem; +} +.express_wrap.primary .monit_top { + padding: 0 0 0.5rem; +} +.express_wrap.hover { + border: 0.063rem solid var(--primary-pri_100); +} +.express_wrap.pressed { + border: 0.063rem solid var(--primary-pri_100); + background: var(--primary-pri_12); +} + +.primary_bg { + width: 100%; + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); +} + +.monit_top { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 0 1rem; +} +.monit_top h1 { + font-size: 1rem; + font-weight: 700; + color: var(--white-w_87); +} +.monit_top h2 { + font-size: 0.875rem; + font-weight: 500; + 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; + font-size: 0.875rem; + font-weight: 400; +} +.exp_cont.hauto { + min-height: auto; +} +.exp_cont.box { + background-color: var(--white-w_6); +} +.exp_cont.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 { + display: flex; + align-items: center; + justify-content: space-between; + -moz-column-gap: 1rem; + column-gap: 1rem; + width: 100%; + height: 2.5rem; + background-color: var(--more-bright-wh_12-to-6); + padding: 0 0.75rem; +} + +.layout_box { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + 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); +} +.layout_box.four { + width: 40rem; +} + +.layout_top { + font-size: 0.875rem; + font-weight: 700; + padding: 1.25rem 1rem 1rem 0; + color: var(--primary-to-grayscale-to-bk); +} + +.layout_boxes { + display: flex; + align-items: center; + justify-content: space-between; + -moz-column-gap: 1rem; + column-gap: 1rem; + width: 100%; + height: 2.5rem; + background-color: var(--white-w_6); + padding: 0 0.75rem; +} + +.exp_dl { + display: flex; + align-items: center; +} +.exp_dl dt { + font-size: 0.8125rem; + font-weight: 400; + width: 3.75rem; + padding: 0 0.5rem 0 0; +} +.exp_dl dd { + flex: 1; +} + +.pressed { + width: 100%; + height: 100%; + background: var(--primary-pri_6); + border: 0.063rem solid var(--primary-pri_100); +} + +.line_contain { + width: 100%; + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-pri_40-to-wh_40); + backdrop-filter: blur(1.875rem); + -webkit-backdrop-filter: none; + backdrop-filter: none; +} +.line_contain.box { + width: 28.625rem; + flex: none; +} + +.line_inner { + width: 100%; + height: calc(100% - 2.625rem); + padding: 1.25rem; +} + +.vert_wrap { + display: flex; + justify-content: space-between; + flex-direction: column; + row-gap: 1.25rem; + width: 100%; + height: 100%; +} + +.line_bottom { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + -moz-column-gap: 0.75rem; + column-gap: 0.75rem; +} + +.pop_top { + display: flex; + align-items: center; + justify-content: space-between; + 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.5); + border: 0.063rem solid var(--primary-pri_100); + background-color: var(--etc-popup_tit); + color: var(--white-w_100); +} + +.check_dl { + display: flex; + align-items: center; + width: 100%; + margin: 1rem 0; +} +.check_dl:last-child { + margin-bottom: 0; +} +.check_dl.current { + margin: 0.5rem 0; +} +.check_dl.current:last-child { + margin-bottom: 0; +} +.check_dl dt { + font-size: 0.8125rem; + font-weight: 300; + display: flex; + justify-content: space-between; + width: 4rem; + padding: 0 1rem 0 0; + color: var(-white-w-60); +} +.check_dl dd { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1; + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} +.check_dl dd .wrput { + width: 100%; +} +.check_dl dd .ch_radio:last-child { + padding: 0; +} + +.ch_radio { + display: flex; + align-items: center; + padding: 0 0.75rem 0 0; + cursor: pointer; +} +.ch_radio.on .radio { + background-color: #fff; + border: 0.25rem solid var(--primary-pri_100); +} +.ch_radio.on .word { + color: var(--primary-pri_100); +} +.ch_radio .radio { + display: inline-block; + width: 0.9375rem; + height: 0.9375rem; + background-color: var(--radio-default); + border-radius: 100%; + margin: 0 0.5rem 0 0; +} +.ch_radio .radio.mini { + width: 0.625rem; + height: 0.625rem; + border: 0.125rem solid var(--primary-pri_100); + margin: 0 0.375rem 0 0; +} +.ch_radio .word { + font-size: 0.8125rem; + font-weight: 300; + color: var(--white-w_87-sec); +} + +.user_info { + width: 100%; +} + +.pr_sign { + font-size: 0.875rem; + font-weight: 400; + min-width: 7rem; + height: 1.75rem; + padding: 0.45rem 0.5rem; + background: rgba(255, 255, 255, 0.12); + border-radius: 0.125rem; + cursor: pointer; +} + +.profile_cont { + display: flex; + justify-content: center; + width: 100%; + padding: 1.25rem 0 3.25rem; + position: relative; +} +.profile_cont .pr_sign, .profile_cont .btn_secondary { + position: absolute; + right: 0; + top: 0; +} + +.circle_g32 { + display: flex; + align-items: center; + justify-content: center; + width: 2rem; + height: 2rem; + background: #4A4E66; + border: 0.125rem solid var(--etc-bg); + border-radius: 100%; + overflow: hidden; +} +.circle_g32:hover, .circle_g32:focus, .circle_g32.hover { + background: #636771; +} +.circle_g32 img { + width: 1rem; +} + +.profile_photo { + position: relative; + width: 5rem; + height: 5rem; +} +.profile_photo .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; +} +.photo_circle img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + width: 100%; +} +.photo_circle img.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; +} +.check_dl.user dt { + width: 7rem; +} +.check_dl.user .ch_radio { + padding: 0 1.875rem 0 0; +} + +.calendar_wrap { + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 0.125rem; + width: 13.75rem; + height: 1.75rem; + padding: 0 0.5rem; + background: rgba(255, 255, 255, 0.12); + cursor: pointer; +} +.calendar_wrap.blue { + background-color: rgba(0, 104, 230, 0.6); + box-shadow: 0 0 0.75rem 0 inset #0068e6; + border-radius: 0.1875rem; + height: 100%; + border-radius: 0; +} +.calendar_wrap.blue:hover { + background: #0155BD; + box-shadow: inset 0 0 0.75rem rgba(39, 212, 255, 0.5); +} +.calendar_wrap.transline { + background: transparent; + background: rgb(10, 11, 20); + border: 0.063rem solid rgba(255, 255, 255, 0.38); +} + +.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 { + display: flex; + align-items: center; + justify-content: space-between; + width: calc(100% - 2rem); + padding: 0.1rem 0.25rem 0; + -moz-column-gap: 0.875rem; + column-gap: 0.875rem; +} +.calen_date span { + font-size: 0.8125rem; + font-weight: 300; + color: rgba(255, 255, 255, 0.87); + letter-spacing: 0.031rem; +} + +.bott_info { + border-radius: 0.125rem; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + 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); +} +.bott_info.hover { + border: 0.063rem solid var(--primary-pri_40); +} +.bott_info.medium { + width: 10.625rem; + height: 8.75rem; + background-color: var(--more-bright-wh_6-to-60); + border: 0.063rem solid #0068E6; +} +.bott_info.small { + width: 8.625rem; + height: 7.5rem; + background-color: var(--more-bright-wh_6-to-60); + border: none; +} +.bott_info.small .smart_top .date { + font-size: 0.6875rem; + font-weight: 400; +} +.bott_info.small .smart_cont { + padding: 0; +} +.bott_info.small .smart_cont .sm_txt { + font-size: 0.75rem; + font-weight: 400; + margin: 0; +} +.bott_info.small .smart_cont .sm_result { + font-size: 1.25rem; +} +.bott_info.small .smart_cont .sm_result .mini { + font-size: 0.8125rem; + font-weight: 400; +} +.bott_info.chart { + height: 10.5rem; +} +.bott_info.donot { + background-image: url("../../assets/images/donot_line_labelbox.svg"); + background-repeat: no-repeat; + background-position: right top; + background-size: cover; +} + +.smart_chart_wrap { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 100%; + height: calc(100% - 1.125rem); +} +.smart_chart_wrap .smart_cont { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); + z-index: 3; +} +.smart_chart_wrap .chart { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + height: 100%; +} + +.smart_top { + display: flex; + align-items: center; + justify-content: space-between; +} +.smart_top .date { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_60); + text-align: right; +} + +.smart_cont { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + width: 100%; + height: calc(100% - 1.125rem); + padding: 7% 0 0; +} +.smart_cont.bott { + padding: 4% 0 0; +} +.smart_cont.bott .sm_result { + margin: 0 0 0.25rem; + font-size: 1.7rem; +} +.smart_cont.bott .sm_txt { + font-size: 0.8125rem; + font-weight: 400; + margin: 0 0 0.25rem; +} +.smart_cont.bott .percent_txt { + font-size: 0.8125rem; + font-weight: 400; +} +.smart_cont .sm_result { + margin: 0 0 0.188rem; +} + +.sm_result { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.5rem; + font-weight: 700; + flex-wrap: wrap; + width: 100%; + letter-spacing: 0; +} +.sm_result .mini { + font-size: 0.875rem; + font-weight: 400; + margin: 0.5rem 0 0 0.25rem; +} + +.sm_txt { + font-size: 0.75rem; + font-weight: 400; + text-align: center; + word-break: keep-all; +} +.sm_txt.mini { + font-size: 0.7rem; +} + +.percent_txt { + display: flex; + align-items: center; + font-size: 0.75rem; + line-height: 1; + margin: 0; +} +.percent_txt.equal { + color: #FFBF00; +} +.percent_txt.up { + color: #E62222; +} +.percent_txt.down { + color: var(--etc-b_text); +} +.percent_txt.down2 { + color: var(--etc-b_text); +} +.percent_txt .mini { + font-size: 0.8125rem; + font-weight: 400; + margin: 0 0.25rem 0 0; +} +.percent_txt .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; + -moz-column-gap: 0.5rem; + 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; +} +.speed_box.table { + background: transparent; + border: 0.063rem solid var(--white-w_20); + padding: 0.3rem 0.6rem; +} +.speed_box.bord { + padding: 0; +} +.speed_box.bord .table_dl { + height: 50%; +} +.speed_box.bord .table_dl dt { + height: 100%; + justify-content: center; +} +.speed_box .img_chart { + height: 100%; +} +.speed_box .speed_result { + padding: 0; +} + +.table_dl { + display: flex; + align-items: center; + justify-content: space-between; + font-size: 0.75rem; + font-weight: 300; + color: var(--white-w_87-sec); + width: 100%; +} +.table_dl dt { + display: flex; + align-items: center; + width: 2.2rem; + height: 1.15rem; + border-right: 0.063rem solid var(--white-w_20); +} +.table_dl dd { + display: flex; + align-items: center; + justify-content: flex-end; + flex: 1; +} + +.speed_result { + font-size: 1.25rem; + font-weight: 700; + color: var(--primary-pri_100); +} +.speed_result .unit { + font-size: 0.75rem; + font-weight: 400; +} + +.exp_weather { + display: flex; + align-items: center; + justify-content: space-between; + 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 { + display: flex; + align-items: center; + justify-content: center; +} + +.weath_record { + font-size: 0.8125rem; + font-weight: 400; + display: block; + letter-spacing: 0.063rem; +} + +.weath_dl { + display: flex; + justify-content: space-between; + width: 100%; + padding: 0.2rem 0; +} +.weath_dl dt { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_87); + padding: 0 0.625rem 0 0; +} +.weath_dl dd { + font-size: 0.75rem; + font-weight: 400; + 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; +} +.weath_mark56.sun { + background: url("../images/sometimes_snow_or_rain_56.svg") no-repeat center center; + background-size: contain; +} + +.dust_cont { + display: flex; + align-items: center; + justify-content: center; + 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; +} +.dust_cont.hauto { + min-height: auto; +} +.dust_cont .unit { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_60); +} + +.fore_box { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + 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%; +} +.fore_dl dt { + font-size: 0.8125rem; + font-weight: 500; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #ffe043; + width: 100%; + padding-top: 0.2rem; +} +.fore_dl dd { + font-size: 0.8125rem; + font-weight: 400; + color: #ffe043; +} + +.fore_cent { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + text-align: center; + padding: 0 0.25rem; + width: 2.25rem; +} +.fore_cent .img_arrow { + width: 2.25rem; + margin-bottom: 0.25rem; +} +.fore_cent .status { + font-size: 0.8125rem; + font-weight: 500; + margin: 0.25rem 0 0; +} +.fore_cent .status.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; +} + +.bb_line { + position: absolute; + left: 2.5rem; + top: 0; + width: 0.125rem; + height: 100%; + background-color: #00bd78; + z-index: 3; +} +.bb_line.org { + background-color: #fc8a18; +} +.bb_line.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 { + font-size: 0.8125rem; + font-weight: 400; + overflow: hidden; + white-space: nowrap; + padding: 0.125rem 0 0 0; +} +.bus_dl dd p.hints { + font-size: 0.75rem; + font-weight: 300; + color: var(--white-w_60); + margin: 0.25rem 0 0; +} + +.emer_vms { + width: 100%; +} + +.vms_top { + display: flex; + align-items: center; + justify-content: center; + width: 100%; + min-height: 1.5rem; + overflow: hidden; + padding: 0 0.5rem; + background: var(--more-visible-wh_6-to-bk); +} +.vms_top .arr_right { + width: 0.75rem; +} +.vms_top.top { + background: var(--more-visible-wh_6-to-60); +} + +.vms_word { + font-size: 0.875rem; + font-weight: 700; + margin: 0 0.625rem; + color: var(--white-w_87-sec); +} +.vms_word.danger { + margin: 0; + color: #ff1f55; +} + +.vms_monit { + width: 100%; + height: 11.75rem; + background-color: #000; + padding: 0.75rem; + overflow: hidden; +} +.vms_monit img { + width: 15.5rem; + height: 10.188rem; +} + +.park_dl { + width: 100%; + display: flex; + padding: 0.375rem 0; + letter-spacing: 0.063rem; +} +.park_dl dt { + width: 4.5rem; + padding: 0 0.625rem 0 0; + font-size: 0.8125rem; + font-weight: 400; +} +.park_dl dd { + flex: 1; + font-size: 0.8125rem; + font-weight: 400; + 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 { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + font-size: 0.8125rem; + font-weight: 400; + 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; +} +.sp_graph.sky { + background-color: #27D4FF; +} + +.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%; +} +.uni_table01.sm thead th { + height: 2rem; + padding: 0.1rem 0.5rem 0; +} +.uni_table01.sm tbody td { + height: 2rem; + padding: 0.1rem 0.5rem 0; +} +.uni_table01 thead th { + font-size: 0.8125rem; + font-weight: 400; + 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; +} +.uni_table01 thead th:last-child { + border-right: none; +} +.uni_table01 tbody tr { + background-color: var(--more-visible-wh_6-to-100); +} +.uni_table01 tbody tr:hover td { + background: rgba(39, 212, 255, 0.2); +} +.uni_table01 tbody tr td { + font-size: 0.8125rem; + font-weight: 400; + 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; +} +.uni_table01 tbody tr td:first-child { + width: 2.75rem; +} +.uni_table01 tbody tr td:last-child { + border-right: none; +} + +/*header*/ +header { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 2.5rem; + z-index: 200; + background-color: var(--bg_01_80); + border-bottom: 0.063rem solid var(--line-wh_20-to-100); +} +header.two_line { + height: 5rem; + background-color: var(--bg_01_80); +} + +.header_in { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; + width: 100%; + height: 100%; + padding: 0 1.25rem; +} +.header_in::before { + content: ""; + z-index: -1; + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); +} +.header_in .gnb { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} +.header_in.navigation { + background: var(--bg_01_80); +} + +.header_left { + display: flex; + align-items: center; + -moz-column-gap: 1.875rem; + column-gap: 1.875rem; + padding: 0 1rem 0 0; +} + +.header_logo { + display: flex; + align-items: center; +} +.header_logo a { + display: flex; + align-items: center; +} + +.logo_hd_uniplus { + width: 9.125rem; +} + +.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%; +} +.gnb ul { + display: flex; + align-items: center; + height: 100%; +} +.gnb ul li a { + font-size: 0.875rem; + font-weight: 500; + display: block; + color: var(--more-visible-wh_60-to-100); + letter-spacing: -0.031rem; + word-break: keep-all; + cursor: pointer; +} +.gnb ul li a.on, .gnb ul li a:hover, .gnb ul li a:focus { + color: var(--primary-pri_100); +} +.gnb.two_line { + height: 100%; +} +.gnb.two_line ul { + display: flex; + align-items: center; + height: 50%; +} +.gnb.two_line ul li a { + font-size: 0.875rem; + font-weight: 400; + display: block; + color: var(--more-visible-wh_60-to-100); + letter-spacing: -0.031rem; + word-break: keep-all; + cursor: pointer; +} +.gnb.two_line ul li a.on, .gnb.two_line ul li a:hover, .gnb.two_line ul li a:focus { + color: var(--primary-pri_100); +} + +.weath_mark32 { + display: inline-block; + width: 2rem; + height: 2rem; +} +.weath_mark32.very_bad { + background: url(../images/air_quality_very_bad_32.svg) no-repeat center center; + background-size: cover; +} +.weath_mark32.sun { + background: url(../images/wt_sun32.svg) no-repeat center center; + background-size: cover; +} +.weath_mark32.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; +} +.time_mark20.clock { + background: url(../images/icon_clock_20.svg) no-repeat center center; + background-size: cover; +} +.time_mark20.clock_direct { + background: url(../images/icon_clock_direction_20.svg) no-repeat center center; + background-size: cover; +} + +.header_right { + display: flex; + align-items: center; + -moz-column-gap: 1.75rem; + column-gap: 1.75rem; + padding: 0 0 0 1rem; +} + +.hd_status { + display: flex; + align-items: center; +} +.hd_status .hd_text { + margin: 0 0 0 0.4rem; +} + +.hd_text { + display: flex; + align-items: center; + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} +.hd_text span { + font-size: 0.875rem; + font-weight: 400; + color: var(--white-w_87-sec); +} + +.hd_profile { + position: relative; + width: 1.875rem; + height: 1.25rem; +} + +.profile_box { + display: flex; + align-items: center; + justify-content: center; + -moz-column-gap: 0.125rem; + column-gap: 0.125rem; + cursor: pointer; +} +.profile_box .profile20 { + opacity: 0.6; +} +.profile_box .comma_under8 { + opacity: 0.6; +} +.profile_box.on .profile20 { + opacity: 1; +} +.profile_box.on .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; +} +.board_line .btn_arrow_l { + position: absolute; + right: -1.7rem; + top: 0; + box-shadow: 1rem 0 1.5rem 0 rgba(4, 9, 26, 0.16); +} +.board_line .btn_arrow_l.left { + right: auto; + left: -1.7rem; +} + +.indi_withtab { + width: 100%; + position: relative; + padding: 2.375rem 0 0; +} +.indi_withtab .indi_tabs { + position: absolute; + left: 0; + top: 0; +} + +.indi_tabs { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; +} +.indi_tabs button { + border-radius: 0; +} +.indi_tabs button:first-child { + border-radius: 0.125rem 0 0 0; +} +.indi_tabs.top { + border-radius: 0.125rem; + 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 { + display: flex; + align-items: center; +} +.busrt_dl dt { + padding: 0 0.625rem 0 0; +} +.busrt_dl dd { + display: flex; + align-items: center; +} + +.busrt_wrap { + display: flex; + align-items: center; + -moz-column-gap: 0.5rem; + 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; +} +.busrt_wrap span { + font-size: 0.6875rem; + font-weight: 400; +} +.busrt_wrap span.green { + color: #008C69; +} +.busrt_wrap span.red { + color: #FF1F55; +} + +.express_paging { + display: flex; + align-items: center; + justify-content: center; + padding: 0.5rem 0 0; +} +.express_paging .pg_ball, .express_paging .pg_prev, .express_paging .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; +} +.pg_ball.on { + background: var(--primary-pri_100); +} + +.pg_prev { + display: inline-block; + width: 0.75rem; + height: 0.75rem; + cursor: pointer; +} + +.pg_next { + display: inline-block; + width: 0.75rem; + height: 0.75rem; + cursor: pointer; +} + +.marker { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; +} +.marker img { + width: 100%; +} +.marker.mk48 { + width: 3rem; + height: 3rem; +} +.marker.mk56 { + width: 3.5rem; + height: 3.5rem; +} + +.toggle { + cursor: pointer; +} + +.heat_box { + display: inline-block; + width: 1rem; + height: 1rem; + background-color: #fff; +} + +.check_text { + display: flex; + align-items: flex-start; + flex-wrap: wrap; + cursor: pointer; +} +.check_text .text { + font-size: 0.8125rem; + font-weight: 400; + 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; +} +.start_dl dt { + display: flex; + justify-content: center; + font-size: 1.5rem; + font-weight: 700; + color: var(--primary-pri_100); +} +.start_dl dd { + font-size: 0.8125rem; + font-weight: 400; + color: var(--primary-pri_100); +} + +.record { + font-size: 0.6875rem; + font-weight: 300; + color: var(--white-w_60); +} + +.park_space { + display: flex; + align-items: center; + justify-content: center; + width: 5.625rem; + height: 2.75rem; +} + +.park_sign { + display: flex; + align-items: center; + justify-content: center; + width: 4.75rem; + height: 1.875rem; + overflow: hidden; + padding: 0 0.125rem 0.3125rem 1.25rem; + text-align: right; + cursor: pointer; +} +.park_sign .park_txt { + font-size: 0.75rem; + font-weight: 400; + display: block; + overflow: hidden; +} +.park_sign.danger { + background: url("../images/park_danger.svg") no-repeat center center; + background-size: contain; +} +.park_sign.danger.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_line .bel_circle { + position: absolute; + top: 50%; + transform: translateY(-50%); +} +.bel_line .bel_circle.left { + left: 0; +} +.bel_line .bel_circle.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; +} +.chart_label.right_top { + left: auto; + transform: none; + right: 0; + top: 0rem; + bottom: auto; +} +.chart_label.left_bottom { + left: 0; + transform: none; + right: auto; + top: auto; + bottom: 0rem; +} + +.xydual_wrap { + display: flex; + align-items: flex-start; + width: 100%; +} +.xydual_wrap #XYChartDual { + transform: translateY(-2rem); +} + +.square { + display: inline-block; + width: 0.625rem; + height: 0.625rem; + background-color: #0068E6; +} +.square.blue { + background-color: #0E44E6; +} +.square.blue_deep { + background-color: #0A2ACC; +} +.square.sky { + background-color: #27D4FF; +} +.square.sky_blue { + background-color: #16A3E9; +} +.square.green_light { + background-color: #9DFFBE; +} +.square.green { + background-color: #16D9AB; +} +.square.purple { + background-color: #937EFF; +} +.square.purple_light { + background-color: #B5A6FF; +} +.square.violet { + background-color: #6548F5; +} +.square.etc { + background-color: rgba(255, 255, 255, 0.3); +} +.square.white { + background-color: #fff; +} + +.label { + font-size: 0.6875rem; + font-weight: 400; + display: flex; + align-items: center; + justify-content: center; + min-width: 3.125rem; + height: 1rem; + padding: 0.1rem 0.25rem 0; + overflow: hidden; + background-color: #024294; + border-radius: 0.125rem; + color: #fff; + word-break: keep-all; +} +.label.morning { + background-color: #55BBFF; +} +.label.afternoon { + background-color: #1BABFF; +} +.label.daytime { + background-color: #008DFF; +} +.label.night { + background-color: #024294; +} +.label.latenight { + background-color: #174BCC; +} +.label.etc { + background-color: rgba(255, 255, 255, 0.3); +} +.label.cross { + background-color: rgba(39, 212, 255, 0.8); +} +.label.construct { + background-color: #937EFF; +} +.label.emergency { + background-color: #6548F5; +} + +.gr_label { + display: flex; + align-items: center; + margin: 0.5rem 0; +} +.gr_label .word { + font-size: 0.6875rem; + font-weight: 400; + color: var(--white-w_87-sec); + margin: 0 0 0 0.375rem; + line-height: 1.1; +} + +.label_tag { + border-radius: 0.125rem; + display: inline-block; + min-height: 1.125rem; + padding: 0 0.25rem; + line-height: 1.125rem; + text-align: center; + color: var(--white-w_100); +} +.label_tag.ellipse { + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + width: 2.25rem; + height: 2.25rem; + font-size: 0.875rem; + line-height: 2.25rem; + min-width: auto; +} +.label_tag.box { + padding: 0.125rem 0.25rem; + min-width: 1.938rem; +} +.label_tag.long { + width: 3.5rem; +} +.label_tag.card { + padding: 0 0.625rem; + min-height: 1rem !important; + line-height: 1rem; +} +.label_tag.small { + min-width: 3.063rem; +} +.label_tag.x_small { + padding: 0.125rem 0; + min-width: 1.813rem; +} +.label_tag.main_label { + background: var(--white-w_30); +} +.label_tag.main_info { + background: var(--white-w_30); +} +.label_tag.grey { + background: var(--white-w_40); +} + +.number_default { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + font-size: 0.875rem; + line-height: 1.5rem; + border-radius: 0.125rem; +} +.number_default.outline { + background: var(--white-w_20); + border: 0.063rem solid var(--white-w_40-sec); + color: rgba(255, 255, 255, 0.87); +} +.number_default.bg_blue { + background-color: #0068E6; + color: #FFF; +} +.number_default.primary { + color: var(--primary-pri_100); + background-color: var(--bg_02_80); +} + +.dashed_box { + border-radius: 0.3125rem; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23FFFFFF' opacity='0.2' stroke-width='4' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); +} + +.preview_box { + display: flex; + align-items: center; + justify-content: center; + 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_100-sec); +} + +.relative { + position: relative; +} + +.upload_box { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column !important; + background: var(--white-w_6); +} +.upload_box.line { + display: flex; + align-items: center; + border-radius: 0.125rem; + flex-direction: unset !important; + border: 0.063rem solid var(--white-w_20); + background-color: transparent; +} + +.image_upload { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + 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 { + border-radius: 0.125rem; + overflow: hidden; +} +.image_modify .image_upload { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); +} + +.image_center { + -o-object-fit: cover; + object-fit: cover; + width: 100%; + height: 100%; +} + +.frame_border { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + position: relative; + border: 0.063rem solid rgba(39, 212, 255, 0.4); + box-shadow: inset 0 0.25rem 0.75rem rgba(39, 212, 255, 0.4); + background: rgba(10, 11, 20, 0.4); +} + +.spin_animation { + animation: spinAni 1.2s infinite linear; +} + +@keyframes spinAni { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +.progress_bar { + background: var(--white-w_20); +} +.progress_bar .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 { + font-size: 0.875rem; + font-weight: 700; + 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_box { + position: relative; +} +.popover_box .placement { + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + display: none; + position: absolute; +} +.popover_box .placement.show { + display: block; +} +.popover_box .placement.top { + bottom: 2.625rem; +} +.popover_box .placement.left { + left: 0; +} +.popover_box .placement.right { + right: 0; +} +.popover_box .placement.bottom { + top: 2.625rem; +} +.popover_box .placement.left_bottom { + left: 2.75rem; + bottom: 0; +} +.popover_box .placement.right_bottom { + right: 2.75rem; + bottom: 0; +} +.popover_box .placement.left_top { + left: 2.75rem; + top: 0; +} +.popover_box .placement.right_top { + right: 2.75rem; + top: 0; +} +.popover_box .placement.top_right { + right: 2.75rem; +} +.popover_box .placement.top_left { + left: 2.75rem; + top: 0; +} + +.popover_title, +.popover_contents { + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + border-style: solid; + border-color: var(--line-wh_30-to-60); + overflow: hidden; +} + +.fc_popover { + font-size: 0.8125rem; + font-weight: 500; + color: var(--white-w_100-sec); +} + +.fs_info { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_100-sec); + text-align: center; +} + +.fs_unit { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_60); + text-align: center; +} + +.popover_title { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + display: flex; + align-items: center; + justify-content: space-between; + 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_title .popover_close { + transform: translate(0, -0.063rem); +} + +.popup_title_bg { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + display: flex; + align-items: center; + justify-content: space-between; + 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_title_bg .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 { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + padding: 1.25rem; + background: var(--bg_02_60); + border-width: 0 0.063rem 0.063rem 0.063rem; + border-radius: 0 0 0.125rem 0.125rem; +} + +.data_contents { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + padding: 1.25rem; + background: var(--bg_02_60); + border-width: 0 0.063rem 0.063rem 0.063rem; + border-radius: 0 0 0.125rem 0.125rem; + border-bottom: 0.063rem solid var(--line-wh_30-to-60); + border-right: 0.063rem solid var(--line-wh_30-to-60); + border-left: 0.063rem solid var(--line-wh_30-to-60); +} + +.status { + border-radius: 0.125rem; + width: 1.625rem; + height: 0.75rem; +} + +.popup_title_bg { + border-radius: 0; + background: var(--etc-popup_tit); + border: 0.063rem solid var(--primary-pri_100); + box-shadow: inset 0 0 0.75rem rgba(255, 255, 255, 0.5); +} + +.popup_title { + font-size: 0.875rem; + font-weight: 700; + color: var(--white-w_100); +} +.popup_title.fs_16_bold { + font-size: 1rem; + font-weight: 700; +} + +.popup_contents { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border-radius: 0; + 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_block.default .accordion_title { + background: var(--more-bright-wh_12-to-6); +} +.accordion_block.default .accordion_title:hover:not(.disabled):not(.accordion_level2), .accordion_block.default .hover.accordion_title, +.accordion_block.default .accordion_title:focus:not(.disabled):not(.accordion_level2) { + background: var(--more-visible-wh_20-to-12); +} +.accordion_block.default .accord_title_in { + background: var(--bg_02_60); +} +.accordion_block.default2 .accordion_title.default { + background: var(--more-bright-wh_12-to-6); +} +.accordion_block.default2 .accordion_title.default:hover:not(.disabled):not(.accordion_level2), .accordion_block.default2 .hover.accordion_title.default, +.accordion_block.default2 .accordion_title.default:focus:not(.disabled):not(.accordion_level2) { + background: var(--more-visible-wh_20-to-12); +} +.accordion_block.default2 .accordion_title { + background: rgba(255, 255, 255, 0.12); +} +.accordion_block.default2 .accord_title_in { + background: var(--bg_02_60); +} +.accordion_block.point { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); +} +.accordion_block.point .accordion_title, +.accordion_block.point .accordion_title:hover:not(.point .disabled) { + background: var(--primary-pri_20); +} +.accordion_block.point .accordion_title:hover:not(.accordion_level2):not(.disabled):not(.point .disabled), .accordion_block.point .hover.accordion_title, +.accordion_block.point .accordion_title:focus { + background: var(--primary-pri_30); +} +.accordion_block.point .accordion_contents { + background: rgba(255, 255, 255, 0.06); +} +.accordion_block.point.disabled { + cursor: default; +} +.accordion_block.point.disabled .accordion_title { + color: var(--white-w_20); +} +.accordion_block.level .accordion_title { + background: transparent; +} +.accordion_block.level .accordion_title:hover:not(.disabled), .accordion_block.level .hover.accordion_title, +.accordion_block.level .accordion_title:focus:not(.disabled) { + background: transparent; +} +.accordion_block.level .accord_title_in { + background: rgba(4, 9, 26, 0.6); +} +.accordion_block.disabled { + cursor: default; +} +.accordion_block.disabled .accordion_title { + background: var(--more-bright-wh_12-to-6); + color: var(--white-w_20); +} +.accordion_block.disabled .accordion_title .toggle { + opacity: 0.4; +} +.accordion_block.disabled .accordion_title .img_with { + opacity: 0.2; +} +.accordion_block.disabled .accordion_toggle { + cursor: default; + opacity: 0.2; +} +.accordion_block.disabled_level2 { + cursor: default; +} +.accordion_block.disabled_level2 .accordion_title { + background: transparent; + color: var(--white-w_20); +} +.accordion_block.disabled_level2 .accordion_title .toggle { + opacity: 0.4; +} +.accordion_block.disabled_level2 .accordion_title .img_with { + opacity: 0.2; +} +.accordion_block.disabled_level2 .accordion_toggle { + cursor: default; + opacity: 0.2; +} +.accordion_block.point.disabled { + cursor: unset; +} +.accordion_block.point.disabled .accordion_title { + background: var(--primary-pri_20); + color: var(--white-w_20); + cursor: default; +} +.accordion_block.select .accordion_title:focus, +.accordion_block.select .accordion_title:hover, +.accordion_block.select .hover.accordion_title { + background: var(--primary-pri_30); + background: var(--primary-pri_20); +} +.accordion_block.select .accordion_title:hover, +.accordion_block.select .hover.accordion_title { + background: var(--primary-pri_30); +} +.accordion_block.select .accordion_title { + background: var(--more-bright-wh_12-to-6); +} +.accordion_block.select .accordion_title.on { + background: var(--primary-pri_30); +} +.accordion_block.select .accordion_title.on img, .accordion_block.select .accordion_title.hover img, .accordion_block.select .accordion_title:hover img, .accordion_block.select .accordion_title:focus img { + filter: brightness(0) saturate(100%) invert(68%) sepia(15%) saturate(4375%) hue-rotate(161deg) brightness(105%) contrast(103%); +} +.accordion_block.select .accordion_contents { + background: rgba(255, 255, 255, 0.06); +} +.accordion_block.select.disabled { + cursor: unset; +} +.accordion_block.select.disabled .accordion_title:hover, .accordion_block.select.disabled .hover.accordion_title, +.accordion_block.select.disabled .accordion_title:focus { + background: var(--more-bright-wh_12-to-6); + color: rgba(255, 255, 255, 0.38); + cursor: not-allowed; +} +.accordion_block.select.disabled .checkbox_type label:after { + border: 0; + background: rgba(255, 255, 255, 0.2); +} +.accordion_block.select.level2 .accordion_title:hover:not(.disabled), .accordion_block.select.level2 .hover.accordion_title, +.accordion_block.select.level2 .accordion_title:focus:not(.disabled) { + background: transparent; + cursor: pointer; +} +.accordion_block.select.level2 .accordion_title { + background: transparent; +} +.accordion_block.select.level2 .accord_title_in { + background: rgba(4, 9, 26, 0.6); +} +.accordion_block.select.level2 .accordion_contents { + background: transparent; +} +.accordion_block.accord_select .accordion_title:focus, +.accordion_block.accord_select .accordion_title:active, +.accordion_block.accord_select .accordion_title:hover, +.accordion_block.accord_select .hover.accordion_title { + background: var(--primary-pri_20); + color: var(--primary-pri_100); +} +.accordion_block.accord_select .accordion_title:hover, +.accordion_block.accord_select .hover.accordion_title { + background: var(--primary-pri_30); + color: var(--primary-pri_100); +} +.accordion_block.accord_select .accordion_title { + background: var(--more-bright-wh_12-to-6); +} +.accordion_block.accord_select .accordion_title.on, .accordion_block.accord_select .accordion_title:active, .accordion_block.accord_select .accordion_title:focus { + background: var(--primary-pri_30); +} +.accordion_block.accord_select .accordion_title.selected { + background: var(--primary-pri_20); +} +.accordion_block.accord_select .accordion_title.on img, .accordion_block.accord_select .accordion_title.hover img, .accordion_block.accord_select .accordion_title:hover img, .accordion_block.accord_select .accordion_title:focus img, .accordion_block.accord_select .accordion_title.selected img, .accordion_block.accord_select .accordion_title:active img { + filter: brightness(0) saturate(100%) invert(68%) sepia(15%) saturate(4375%) hue-rotate(161deg) brightness(105%) contrast(103%); +} +.accordion_block.accord_select .accordion_contents { + background: var(--more-bright-wh_12-to-6); +} +.accordion_block.accord_select .accordion_contents.user { + background: var(--more-bright-wh_6-to-60); +} +.accordion_block.accord_select.disabled { + cursor: unset; +} +.accordion_block.accord_select.disabled .accordion_title:hover, .accordion_block.accord_select.disabled .hover.accordion_title, +.accordion_block.accord_select.disabled .accordion_title:focus { + background: var(--more-bright-wh_12-to-6); + color: rgba(255, 255, 255, 0.38); + cursor: not-allowed; +} +.accordion_block.accord_select.disabled .checkbox_type label:after { + border: 0; + background: rgba(255, 255, 255, 0.2); +} +.accordion_block.accord_select .checkbox_type input[type=checkbox]:checked + label + .accordion_title { + background: var(--primary-pri_20); + color: var(--primary-pri_100); +} +.accordion_block.accord_select .checkbox_type input[type=checkbox]:checked + label + .accordion_title .accordion_title { + background: var(--primary-pri_20); +} +.accordion_block.accord .check_text .text { + margin: 0; +} +.accordion_block.level { + padding: 0 1.063rem 0 3.5rem; +} +.accordion_block.level .accordion_title:hover:not(.disabled), .accordion_block.level .hover.accordion_title, +.accordion_block.level .accordion_title:focus:not(.disabled) { + background: transparent; + cursor: pointer; +} +.accordion_block.level .accordion_title { + background: transparent; +} +.accordion_block.level .accord_title_in { + background: rgba(4, 9, 26, 0.6); +} +.accordion_block.levelwith .accordion_title:hover:not(.disabled), .accordion_block.levelwith .hover.accordion_title, +.accordion_block.levelwith .accordion_title:focus:not(.disabled) { + background: transparent; + cursor: pointer; +} +.accordion_block.levelwith .accordion_title { + background: transparent; +} +.accordion_block.levelwith .accord_title_in { + background: rgba(4, 9, 26, 0.6); +} +.accordion_block.accordion_level2 .accordion_title, +.accordion_block.accordion_level2 .accordion_contents { + padding: 0 1.125rem 0 3.5rem; +} +.accordion_block.accordion_level2:hover { + background: transparent; +} +.accordion_block.accordion_level2:hover .accordion_title, +.accordion_block.accordion_level2:hover .accordion_contents { + padding: 0 1.125rem 0 3.5rem; +} + +.accordion_title { + display: flex; + align-items: center; + font-size: 0.875rem; + font-weight: 500; + position: relative; + height: 2.25rem; + padding: 0 1.125rem 0 1.25rem; + color: var(--white-w_87-sec); +} +.accordion_title.disabled { + background: var(--more-bright-wh_12-to-6); + cursor: not-allowed; + color: var(--white-w_20); +} + +.accordion_contents { + font-size: 0.8125rem; + font-weight: 400; + display: none; + min-height: 2.25rem; + padding: 0 1.125rem 0 1.25rem; + line-height: 1rem; + color: var(--white-w_87); +} +.accordion_contents.show { + display: block; +} +.accordion_contents.inner { + padding: 0 1.125rem 0 3.5rem; +} +.accordion_contents.line { + border-bottom: 0.063rem solid var(--line-wh_30-to-60); +} + +.accordion_paragraph { + padding: 1.25rem 0; + line-height: 1.125rem; +} + +.tree_contents { + display: none; +} +.tree_contents.show { + display: block; +} + +.accordion_toggle { + cursor: pointer; +} +.accordion_toggle.disabled { + cursor: default; +} + +.accordion_up { + display: none; +} + +.accordion_title.on .accordion_up, +.accordion_toggle.on .accordion_up, +.tree_button.on .accordion_up { + display: block; +} +.accordion_title.on .accordion_down, +.accordion_toggle.on .accordion_down, +.tree_button.on .accordion_down { + display: none; +} + +.accordion_title.on + .accordion_contents { + display: block; +} + +.accordion_title.disabled .accordion_up, .accordion_title.disabled .accordion_down { + opacity: 0.4; +} + +.tree_button { + display: flex; + align-items: center; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} +.tree_button.check label { + font-size: 0.8125rem; + font-weight: 400; +} +.tree_button.no_check label { + font-size: 0.8125rem; + font-weight: 400; + color: var(--white-w_100-sec); +} + +.card_block.default, .card_block.label { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + padding: 1.25rem; + background: var(--bg_01_80) 0% 0% no-repeat padding-box; + border: 0.063rem solid var(--line-pri_40-to-wh_40); +} +.card_block.label { + border-radius: 0.125rem; + display: flex; + padding: 0.625rem; +} +.card_block.point { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + background: transparent url("../images/card_point_bg_320px.svg") 0% 0% no-repeat padding-box; +} + +.card_head { + display: flex; + align-items: center; + position: relative; + height: 1.25rem; + cursor: pointer; +} +.card_head.on:after { + transform: rotate(180deg); +} +.card_head:after { + position: absolute; + content: ""; + top: 0; + right: -0.375rem; + width: 1.25rem; + height: 1.25rem; + background-image: url(../images/dropdown_uisky_20px.svg); +} + +.inner_card_type1, +.inner_card_type2 { + background: rgba(255, 255, 255, 0.06); +} +.inner_card_type1 .inner_head, +.inner_card_type2 .inner_head { + height: 2.5rem; + padding: 0.625rem 0.75rem; + line-height: 1.25rem; +} + +.inner_card_type1 { + padding: 0 0.75rem 0.75rem; +} +.inner_card_type1 .inner_body { + background: rgba(255, 255, 255, 0.06); +} + +.inner_card_type2 .inner_head { + background: rgba(255, 255, 255, 0.06); +} + +.map_color__tag { + width: 1rem; + height: 1rem; + font-size: 0.875rem; + line-height: 1rem; + border-radius: 0.125rem; + border: 0.063rem solid #ffffff; +} + +.checkbox_type label { + position: relative; + padding-left: 1.625rem; + cursor: pointer; + line-height: 1rem; +} +.checkbox_type label:after { + position: absolute; + content: ""; + border-radius: 0.125rem; + top: 0.063rem; + left: 0.125rem; + width: 1rem; + height: 1rem; + border: 0.063rem solid var(--white-w_60); + box-sizing: border-box; + opacity: 0.6; +} +.checkbox_type input[type=checkbox]:checked + label { + color: var(--primary-pri_100); +} +.checkbox_type 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; +} +.checkbox_type input[type=checkbox]:disabled + label, .checkbox_type .disabled { + color: var(--white-w_20); +} +.checkbox_type input[type=checkbox]:disabled + label:after, .checkbox_type .disabled:after { + border: none; + background: var(--white-w_20); +} +.checkbox_type.part { + align-self: center; + color: var(--white-w_100-sec); +} +.checkbox_type.part input[type=checkbox]:checked + label { + color: var(--white-w_100-sec); +} +.checkbox_type.part input[type=checkbox]:checked + label:after { + background: url(../images/minus_sky_12.svg) center no-repeat; + opacity: 1; +} +.checkbox_type.tree { + align-self: center; + color: var(--white-w_100-sec); +} +.checkbox_type.tree label:after { + border: 0.063rem solid var(--white-w_100-sec); + opacity: 0.8; +} +.checkbox_type.tree input[type=checkbox]:checked + label { + color: var(--white-w_100-sec); +} +.checkbox_type.tree 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; +} +.checkbox_type.login label:after { + border-radius: 50%; + top: 0; + left: 0; + width: 1rem; + height: 1rem; + border: none; + background: var(--white-w_40); + opacity: 0.6; +} +.checkbox_type.login input[type=checkbox]:checked + label { + color: inherit; +} +.checkbox_type.login input[type=checkbox]:checked + label:after { + border: none; + background: rgb(0, 104, 230) url(../images/checkbox_login_checked.svg) 0.125rem 0.188rem no-repeat; + opacity: 1; +} +.checkbox_type.td label { + padding-left: 1.25rem; +} + +.radio_type label { + position: relative; + padding-left: 1.25rem; + cursor: pointer; +} +.radio_type label:after { + position: absolute; + content: ""; + border-radius: 50%; + top: 0.125rem; + left: 0; + width: 0.875rem; + height: 0.875rem; + box-sizing: border-box; + background: var(--white-w_40); +} +.radio_type input[type=radio]:checked + label { + color: var(--primary-pri_100); +} +.radio_type input[type=radio]:checked + label:after { + border: 0.188rem solid var(--primary-pri_100); + background: #ffffff; +} +.radio_type input[type=radio]:disabled + label, .radio_type .disabled { + color: rgba(255, 255, 255, 0.38); +} +.radio_type input[type=radio]:disabled + label:after, .radio_type .disabled:after { + background: rgba(255, 255, 255, 0.1); +} + +.map_control_line { + position: relative; + overflow: hidden; +} +.map_control_line:after { + background-color: var(--primary-pri_20); +} + +.map_control_line_mini { + position: relative; + overflow: hidden; +} +.map_control_line_mini:after { + background-color: var(--primary-pri_20); +} + +.disabled.map_control_line:after { + background-color: var(--control-disabled); +} +.disabled.map_control_line .map_control_rate:after, +.disabled.map_control_line .rate_block { + background-color: var(--white-w_40); +} + +.map_control_line:after, +.map_control_rate:after { + position: absolute; + content: ""; + border-radius: 0.125rem; + z-index: 0; + top: 0.313rem; + width: 100%; + height: 0.25rem; +} + +.discrete_text { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_60); +} + +.map_control_rate:after { + z-index: 1; +} + +.map_control_rate { + position: relative; + width: 0; + min-width: 0.375rem; +} +.map_control_rate:after { + background-color: var(--primary-pri_100); +} + +.step_cursor { + cursor: pointer; +} + +.rate_block { + border-radius: 0.375rem; + position: absolute; + z-index: 2; + top: 0; + right: 0; + width: 0.375rem; + height: 100%; + cursor: pointer; + background: var(--primary-pri_100); +} + +.map_timeline.small div { + height: 0.25rem; +} +.map_timeline > div { + width: 0.063rem; + height: 0.5rem; + background: var(--white-w_40); +} + +.disabled.map_control_line:after { + background-color: var(--white-w_40); + opacity: 0.1; +} +.disabled.map_control_line .map_control_rate:after, +.disabled.map_control_line .map_control_rate_mini:after, +.disabled.map_control_line .rate_block { + background-color: var(--white-w_100-sec); + opacity: 0.1; +} + +.map_control_line:after, +.map_control_rate:after { + position: absolute; + content: ""; + border-radius: 0.125rem; + z-index: 0; + top: 0.313rem; + width: 100%; + height: 0.25rem; +} + +.map_control_line_mini:after, +.map_control_rate_mini:after { + position: absolute; + content: ""; + border-radius: 0.125rem; + z-index: 0; + top: 0.188rem; + width: 100%; + height: 0.25rem; +} + +.map_control_rate:after .map_control_rate_mini:after { + z-index: 1; +} + +.map_control_rate, +.map_control_rate_mini { + position: relative; + width: 0; + min-width: 0.375rem; +} +.map_control_rate:after, +.map_control_rate_mini:after { + background-color: var(--primary-pri_100); +} + +.step_cursor { + cursor: pointer; +} + +.rate_block { + border-radius: 0.375rem; + position: absolute; + z-index: 2; + top: 0; + right: 0; + width: 0.375rem; + height: 100%; + cursor: pointer; + background: var(--primary-pri_100); +} +.rate_block.small { + width: 0.25rem; +} + +.map_timeline.small div { + height: 0.25rem; +} +.map_timeline > div { + width: 0.063rem; + height: 0.5rem; + background: var(--white-w_40); +} +.map_timeline.xsmall div { + height: 0.2rem; +} + +.map_time_line { + border-top: 0.063rem solid var(--line-wh_12-to-100); + border-bottom: 0.063rem solid var(--line-wh_12-to-100); + background: var(--bg_01_80); +} + +.map_control_outline { + display: flex; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border-radius: 0.125rem; + align-items: stretch; + border: 0.063rem solid var(--line-wh_12-to-100); + background: var(--bg_01_80); +} +.map_control_outline .border_right { + border-right: 0.063rem solid rgba(39, 212, 255, 0.12); +} +.map_control_outline .border_left { + border-left: 0.063rem solid rgba(39, 212, 255, 0.12); +} +.map_control_outline .rate_block { + width: 0.25rem; +} +.map_control_outline .map_control_line:after, .map_control_outline .map_control_rate:after { + top: 0.25rem; +} +.map_control_outline .map_timeline.top { + transform: translate(0, 0.188rem); +} +.map_control_outline .map_timeline.bottom { + transform: translate(0, -0.188rem); +} + +.member_box { + position: relative; +} + +.member_popover { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border-radius: 0.125rem; + display: none; + position: absolute; + right: 0; + top: 1.86rem; + z-index: 11 !important; + background: var(--blur_02_60); + border: 0.063rem solid var(--white-w_12); + box-shadow: 0.75rem 0.75rem 1.5rem 0 rgba(4, 9, 26, 0.2); +} +.member_popover.on { + display: block; +} + +.tooltip_parents { + position: relative; +} +.tooltip_parents:hover .tooltip_label:not(.on), .tooltip_parents:focus .tooltip_label:not(.on) { + display: block; + top: -1.563rem; +} + +.tooltip_label { + border-radius: 0.125rem; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + font-size: 0.75rem !important; + font-weight: 500 !important; + display: none; + position: absolute; + min-height: 1.5rem; + padding: 0 0.5rem; + background: var(--etc-bg); + border: 0.063rem solid var(--white-w_40); + letter-spacing: 0.01em; + line-height: 1.375rem; + white-space: nowrap; + color: var(--white-w_100-sec); + box-shadow: 0 0.25rem 0.75rem 0 rgba(4, 9, 26, 0.2); +} +.tooltip_label.on { + display: block; +} +.tooltip_label.default { + border: 0.063rem solid var(--white-w_40-sec); + opacity: 1; + background: rgba(55, 61, 82, 0.6); + box-shadow: 0 0.25rem 0.75rem 0 rgba(4, 9, 26, 0.2); + color: var(--white-w_100); +} + +.bubble { + color: #FFF; +} +.bubble:before, .bubble:after { + position: absolute; + content: ""; + display: block; + width: 0; + left: 50%; + border-style: solid; +} +.bubble:before { + z-index: 0; +} +.bubble:after { + z-index: 1; +} +.bubble.bb_black { + background: rgb(5, 10, 25); +} +.bubble.bb_black:before { + border-color: #636771 transparent; +} +.bubble.bb_black:after { + border-color: rgb(5, 10, 25) transparent; +} +.bubble.bb_blue { + background: #0068E6; +} +.bubble.bb_blue:before { + border-color: #61a0ef transparent; +} +.bubble.bb_blue:after { + border-color: #0068E6 transparent; +} +.bubble.bb_grey { + background: #4F525E; +} +.bubble.bb_grey:before { + border-color: rgba(255, 255, 255, 0.4) transparent; +} +.bubble.bb_grey:after { + border-color: #4F525E transparent; +} +.bubble.bb_bottom:before { + bottom: -0.469rem; + margin-left: -0.313rem; + border-width: 0.438rem 0.313rem 0; +} +.bubble.bb_bottom:after { + bottom: -0.375rem; + border-width: 0.375rem 0.25rem 0; + margin-left: -0.25rem; +} +.bubble.bb_top:before { + top: -0.469rem; + margin-left: -0.313rem; + border-width: 0 0.313rem 0.438rem; +} +.bubble.bb_top:after { + top: -0.344rem; + border-width: 0 0.25rem 0.375rem; + margin-left: -0.25rem; +} +.bubble.bb_right:before { + top: 50%; + left: auto; + right: -0.531rem; + margin-top: -0.313rem; + border-width: 0 0.25rem 0.438rem; + transform: rotate(90deg); +} +.bubble.bb_right:after { + top: 50%; + left: auto; + right: -0.375rem; + margin-top: -0.313rem; + border-width: 0 0.25rem 0.438rem; + transform: rotate(90deg); +} +.bubble.bb_left:before { + top: 50%; + right: auto; + left: -0.531rem; + margin-top: -0.313rem; + border-width: 0 0.25rem 0.438rem; + transform: rotate(-90deg); +} +.bubble.bb_left:after { + top: 50%; + right: auto; + left: -0.375rem; + margin-top: -0.313rem; + border-width: 0 0.25rem 0.438rem; + transform: rotate(-90deg); +} + +.absolute { + position: absolute; +} + +.swiper_top_text { + width: 100%; + transform: translate(0, -3.75rem); +} + +.swiper_dot { + border-radius: 50%; + width: 0.5rem; + height: 0.5rem; + background: var(--primary-pri_40); +} +.swiper_dot.selected { + background: var(--primary-pri_100); +} +.swiper_dot.small { + width: 0.375rem; + height: 0.375rem; +} + +.btn_pagination { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + font-size: 0.75rem; + line-height: 1.25rem; + border-radius: 0.125rem; + color: var(--white-w_100-sec); + font-weight: 500; +} +.btn_pagination.selected { + background: var(--white-w_16); +} + +.playbar_type1_box { + display: grid; + grid-template-columns: repeat(auto-fit, 2.625rem); +} + +.playbar_type1 { + font-size: 0.75rem; + font-weight: 400; + display: grid; + grid-auto-rows: auto; + position: relative; +} +.playbar_type1 .type1_text, .playbar_type1 .default, .playbar_type1 .played, .playbar_type1 .loaded { + grid-column: 1/1; + grid-row: 1; +} +.playbar_type1 .type1_text { + display: flex; + align-items: center; + justify-content: center; + z-index: 3; +} +.playbar_type1 .default { + z-index: 0; + background: transparent; +} +.playbar_type1 .played { + z-index: 2; + background: var(--primary-pri_80); +} +.playbar_type1 .loaded { + z-index: 1; + background: var(--primary-pri_40); +} +.playbar_type1 .played_text { + color: var(--white-w_100); +} +.playbar_type1 .loaded_text { + color: var(--white-w_100-sec); +} + +.playbar_type2_box { + border-radius: 0.125rem; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + display: flex; + padding: 1.25rem 1.25rem 0.75em 0.75em; + background: var(--blur_02_60); +} +.playbar_type2_box.default { + flex-direction: column; +} +.playbar_type2_box.mini { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + padding: 0.75em 3.75rem; + white-space: nowrap; +} + +.playbar_text { + font-size: 0.875rem; + font-weight: 500; + color: var(--white-w_87); +} + +.playbar_stick { + display: flex; + align-items: center; + justify-content: space-between; + position: relative; +} +.playbar_stick:after { + position: absolute; + content: ""; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: calc(100% - 0.125rem); + height: 0.125rem; + margin: auto; + background: var(--white-w_60); + content: ""; +} +.playbar_stick .playbar_divider { + width: 0.063rem; + height: 0.625rem; + background: var(--white-w_60); +} +.playbar_stick .playbar_divider_ing { + width: 3.125rem; + height: 0.125rem; + background: var(--primary-pri_100); +} + +.playbar_current { + z-index: 10; + transform: translate(-0.625rem, -0.625rem); +} + +.play_time { + font-size: 0.875rem; + font-weight: 500; + color: var(--white-w_87-sec); +} + +.playing_time { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_60); +} + +.map_controller { + position: relative; + width: 8.125rem; + height: 8.125rem; + padding: 1.25rem; +} + +.map_circle, +.circle_piece { + width: 5.625rem; + height: 5.625rem; + padding: 0.25rem; + border-radius: 50%; + border: 0.063rem solid var(--primary-pri_40); + background: rgba(0, 0, 0, 0.25) 0% 0% no-repeat padding-box; + background: var(--etc-bg) 0% 0% no-repeat padding-box; +} + +.map_rotate .map_circle { + position: absolute; + z-index: 2; + background: transparent; +} + +.circle_piece { + position: absolute; + width: 5rem; + height: 5rem; + overflow: hidden; + border: 0.063rem solid var(--primary-pri_100); + background: rgba(0, 0, 0, 0.25) 0% 0% no-repeat padding-box; + background: var(--etc-bg) 0% 0% no-repeat padding-box; +} +.circle_piece .btn_direction { + position: absolute; + bottom: 50%; + right: 50%; + width: 6.25em; + height: 6.25em; + transform-origin: 100% 100%; + overflow: hidden; + margin-top: -0.65em; + margin-left: -5em; + border: 0.063rem solid var(--primary-pri_100); + box-shadow: 0 0 0.625rem 0 rgba(0, 104, 230, 0.4) inset; +} +.circle_piece .direction_01 { + transform: rotate(-23deg) skew(45deg); +} +.circle_piece .direction_02 { + transform: rotate(22deg) skew(45deg); +} +.circle_piece .direction_03 { + transform: rotate(67deg) skew(45deg); +} +.circle_piece .direction_04 { + transform: rotate(112deg) skew(45deg); +} +.circle_piece .direction_05 { + transform: rotate(157deg) skew(45deg); +} +.circle_piece .direction_06 { + transform: rotate(202deg) skew(45deg); +} +.circle_piece .direction_07 { + transform: rotate(247deg) skew(45deg); +} +.circle_piece .direction_08 { + transform: rotate(292deg) skew(45deg); +} +.circle_piece .btn_direction button { + display: block; + position: absolute; + bottom: -3.625em; + right: -3.625em; + height: 7.25em; + width: 7.25em; + border-radius: 50%; + padding-top: 0em; + transform: skew(-45deg) rotate(-70deg) scale(1); + background-color: transparent; +} +.circle_piece .btn_direction button:active, .circle_piece .btn_direction button:hover, .circle_piece .btn_direction button:focus { + background: rgba(39, 212, 255, 0.4) 0% 0% no-repeat padding-box; + background: var(--line-pri_40-to-wh_100); +} + +.circle_pointer { + position: absolute; + z-index: 0; + top: 0; + left: 0; + width: 100%; + height: 100%; +} +.circle_pointer button { + position: absolute; + width: 1rem; + height: 1rem; + margin: auto; + border: none; + background-color: transparent; + background-image: url(../images/mapcontrol_navi_arrow_.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 1rem auto; +} +.circle_pointer .northside_::before { + position: absolute; + content: ""; + z-index: 999 !important; + bottom: 6.4rem; + left: 0; + right: 0; + width: 0.75rem; + height: 0.75rem; + margin: auto; + background-image: url(../images/mapcontrol_navi_north.svg); + background-size: 100% auto; +} +.circle_pointer .northside { + top: 0; + left: 0; + right: 0; +} +.circle_pointer .westside { + top: 0; + left: 0; + bottom: 0; + transform: rotate(-90deg); +} +.circle_pointer .eastside { + top: 0; + right: 0; + bottom: 0; + transform: rotate(90deg); +} +.circle_pointer .southside { + left: 0; + right: 0; + bottom: 0; + transform: rotate(180deg); +} + +.btn_map_anchor button { + position: relative; + width: 2rem; + height: 2rem; + border: 0.063rem solid rgba(39, 212, 255, 0.4); + border-radius: 50%; + background: transparent; +} +.btn_map_anchor button:hover, .btn_map_anchor button:focus { + background-color: rgba(39, 212, 255, 0.2); +} + +.map_scroll_unit { + position: absolute; +} + +.map_scroll_text { + position: absolute; + bottom: -1.875rem; + white-space: nowrap; +} + +.mapcontrol_btn { + display: flex; + align-items: center; + justify-content: center; +} + +.control_pad button { + display: flex; + flex-direction: column; + height: 2.25rem; +} +.control_pad .btn_secondary.selected { + border: none; + background: rgba(255, 255, 255, 0.16); +} +.control_pad .disabled img { + opacity: 0.2; +} + +.control_plus_minus { + display: flex; + flex-direction: column; +} +.control_plus_minus button { + width: 3.5rem; + padding: 0.125rem; +} +.control_plus_minus button.disabled { + color: var(--white-w_20); +} + +.control_direction { + display: flex; + align-items: center; +} +.control_direction button { + width: 2.25rem; + padding: 0 0; +} + +.marker_numbering_text { + transform: translate(0, 0.313rem); + color: var(--primary-pri_100); +} + +.marker_layer { + border-radius: 50%; + background: rgba(214, 0, 0, 0.4); +} + +.route_line { + border-radius: 0.625rem; +} + +.marker_departure { + border-radius: 50%; + border: 0.188rem solid var(--primary-pri_100); +} +.marker_departure.blue { + border: 0.188rem solid #0068E6; +} +.marker_departure.purple { + border: 0.188rem solid #8972FF; +} +.marker_departure.red { + border: 0.188rem solid #D60000; +} + +.pass_car { + transform: rotate(255deg) translate(6.688rem, -5.313rem); +} + +.pass_departure { + transform: translate(9.063rem, 0.688rem); +} + +.pass_arrival { + transform: translate(-2.625rem, -1.875rem); +} + +.pass_departure_marker { + transform: translate(7.813rem, 1.063rem); +} + +.pass_arrival_marker { + transform: translate(-1.125rem, -2.813rem); +} + +.cluster_count { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + font-size: 0.875rem; + font-weight: 500; + position: absolute; + top: -0.938rem; + left: 1.125rem; + height: 1.5rem; + padding: 0 0.5rem; + border: 0.063rem solid var(--white-w_40); + border-radius: 1.5rem; + background: var(--bg_01_80); + line-height: 1.5rem; +} + +.infowindow_box { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border-radius: 0.125rem; + width: auto; + padding: 0 0.5rem; + cursor: pointer; + border: 0.063rem solid rgba(255, 255, 255, 0.38); + background: rgba(0, 0, 13, 0.4); +} +.infowindow_box .infowindow_title { + font-size: 0.875rem; + font-weight: 500; + min-height: 1.375rem; + line-height: 1.375rem; + white-space: nowrap; + color: #ffffff; +} +.infowindow_box .infowindow_content { + width: 0; + height: 0; + overflow: hidden; + font-size: 0.75rem; +} +.infowindow_box .infowindow_content.map p { + font-size: 0.8125rem; + font-weight: 400; + color: var(--white-w_60); + line-height: 1.063rem; +} +.infowindow_box:hover:not(.with_marker), .infowindow_box.on, .infowindow_box:focus:not(.with_marker) { + width: 10rem; + padding: 0.5rem 0.75rem 0.75rem; + border: 0.063rem solid var(--primary-pri_40); +} +.infowindow_box:hover:not(.with_marker) .infowindow_title, .infowindow_box.on .infowindow_title, .infowindow_box:focus:not(.with_marker) .infowindow_title { + font-size: 0.875rem; + font-weight: 500; +} +.infowindow_box:hover:not(.with_marker) .infowindow_content, .infowindow_box.on .infowindow_content, .infowindow_box:focus:not(.with_marker) .infowindow_content { + width: auto; + height: auto; + padding-top: 0.5rem; +} +.infowindow_box.with_marker { + position: absolute; +} + +.scroll_bar { + background-color: var(--white-w_40); +} + +.tooltip_label.top, .infowindow_box.top, .legend_label.top { + top: auto !important; + left: 50%; + bottom: calc(100% + 0.125rem); + transform: translate(-50%, 0); +} +.tooltip_label.bottom, .infowindow_box.bottom, .legend_label.bottom { + top: calc(100% + 0.125rem) !important; + bottom: auto; + left: 50%; + transform: translate(-50%, 0); +} + +.legend_label { + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.125rem; + flex-direction: column; + gap: 0.125rem; + position: absolute; + padding: 0.5rem; + background: rgba(4, 9, 26, 0.8); + border: 0.063rem solid rgba(255, 255, 255, 0.38); + white-space: nowrap; +} + +.custom_overlay { + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + gap: 0.125rem; + padding-top: 0.25rem; + background-image: url(../images/info_window_graphic.svg); + background-size: cover; +} +.custom_overlay.large { + width: 7.5rem; + height: 7.5rem; +} +.custom_overlay.small { + width: 5rem; + height: 5rem; +} + +.snackbar_box { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + box-shadow: 0.75rem 0.75rem 1.5rem 0 rgba(4, 9, 26, 0.2); + padding: 1rem 1.25rem; + background: var(--background-blur_0260); + border: 0.063rem solid var(--white-w_40-sec); +} + +.snack_btn { + font-size: 0.875rem; + font-weight: 500; + background: transparent; + border: transparent; + color: var(--primary-pri_100); +} + +.notification_box { + width: 48.75rem; +} +.notification_box .notification_bg { + display: flex; + align-items: center; + justify-content: center; + -webkit-backdrop-filter: blur(0.156rem); + backdrop-filter: blur(0.156rem); + min-height: 2.625rem; + overflow: hidden; + border-width: 0.063rem 0 63rem 0; + border-style: solid; + -o-border-image: linear-gradient(to right, rgba(39, 212, 255, 0) 0%, var(--hero-border) 50%, rgba(39, 212, 255, 0) 100%); + border-image: linear-gradient(to right, rgba(39, 212, 255, 0) 0%, var(--hero-border) 50%, rgba(39, 212, 255, 0) 100%); + border-top: 0.188rem solid var(--hero-notification-border-top); + border-bottom: 0.188rem solid var(--hero-notification-border-bottom); + border-image-slice: 1; + opacity: 1; + background: linear-gradient(90deg, var(--hero-notification_01) 0%, var(--hero-notification_02) 6.81%, var(--hero-notification_03) 50%, var(--hero-notification_02) 94.31%, var(--hero-notification_01) 100%); +} +.notification_box .notification_title { + font-size: 1.375rem; + font-weight: 700; + text-align: center; + color: var(--primary-pri_100); +} +.notification_box .btn_notification { + display: block; + margin: 0.75rem auto 0; +} +.notification_box.hide .notification_bg { + min-height: 0; + height: 0; + border-width: 0.063rem 0 0 0; +} +.notification_box.hide .btn_notification { + transform: rotate(180deg); +} + +.gnb_box { + display: flex; + align-items: center; + z-index: 1; + padding: 0 1.25rem; + background: var(--bg_01_80); + border-bottom: 0.063rem solid var(--line-wh_20-to-100); +} +.gnb_box:before { + position: absolute; + content: ""; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.lnb_box { + display: flex; + align-items: center; + z-index: 1; + padding: 0 1.25rem; + background: var(--bg_01_80); + border-bottom: 0.063rem solid var(--line-wh_20-to-100); +} +.lnb_box:before { + position: absolute; + content: ""; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + z-index: -1; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: var(--bg_01_80); +} +.lnb_box.center { + display: unset; + padding: 1.25rem 0; +} + +.z_index3 { + z-index: 3 !important; +} + +.gnb_box, .footer_nav { + position: relative; +} +.gnb_box .gnb_anchor, .footer_nav .gnb_anchor { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.btn_gnb_split { + display: flex; + align-items: center; + justify-content: center; + width: auto; + padding: 0.125rem 0.75rem 0; + border-radius: 8px; + font-size: 8px; + background: transparent; + color: var(--PRI); + border: 1px solid var(--PRI); + border-radius: 8px; + width: auto !important; + font-weight: 500; + color: var(--white-w_87); + background: var(--white-w_12); +} +.btn_gnb_split:hover, .btn_gnb_split.hover { + background: var(--white-w_16); +} +.btn_gnb_split.disabled { + background: var(--white-w_12); + border: 1px solid rgba(255, 255, 255, 0.2); + color: var(--white-w_20); +} +.btn_gnb_split.selected { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + background: var(--btn-btn_selected); + color: var(--white-w_100); +} + +.gnb_anchor { + display: flex; + align-items: flex-start; +} +.gnb_anchor a { + font-size: 0.875rem; + font-weight: 500; + color: var(--white-w_60); + color: var(--more-visible-wh_60-to-100); +} +.gnb_anchor a .selected, .gnb_anchor a:hover, .gnb_anchor a:focus, .gnb_anchor a.on { + color: var(--primary-pri_100); + font-weight: 700; +} + +.lnb_anchor, .lnb_sub_anchor { + background: var(--bg_01_80); + display: flex; + align-items: flex-start; +} +.lnb_anchor a, .lnb_sub_anchor a { + font-size: 0.875rem; + font-weight: 500; + color: var(--white-w_60); +} +.lnb_anchor a.selected, .lnb_anchor a:hover, .lnb_anchor a:focus, .lnb_anchor a.on, .lnb_sub_anchor a.selected, .lnb_sub_anchor a:hover, .lnb_sub_anchor a:focus, .lnb_sub_anchor a.on { + color: var(--primary-pri_100); + font-weight: 500; +} +.lnb_anchor a.black, .lnb_sub_anchor a.black { + color: var(--more-visible-wh_60-to-100); +} +.lnb_anchor.fixed a, .lnb_sub_anchor.fixed a { + color: var(--more-visible-wh_60-to-100); +} +.lnb_anchor.fixed a .selected, .lnb_anchor.fixed a:hover, .lnb_anchor.fixed a:focus, .lnb_anchor.fixed a.on, .lnb_sub_anchor.fixed a .selected, .lnb_sub_anchor.fixed a:hover, .lnb_sub_anchor.fixed a:focus, .lnb_sub_anchor.fixed a.on { + color: var(--primary-pri_100); + font-weight: 500; +} +.lnb_anchor.center, .lnb_sub_anchor.center { + justify-content: center; +} + +.gnb_information { + display: flex; + align-items: center; + margin-left: auto; +} +.gnb_information * { + line-height: 1; +} + +.lnb_box { + position: absolute; + top: 2.5625rem; + left: 0; + right: 0; +} + +.lnb_anchor { + align-items: stretch; + width: 100%; +} +.lnb_anchor.on .lnb_sub_anchor { + height: auto; + padding: 1.25rem 0; +} +.lnb_anchor.on:after { + position: absolute; + content: ""; + left: 0; + top: 2.5rem; + width: 100%; + height: 0.063rem; + border-bottom: 0.063rem solid var(--line-wh_20-to-100); +} +.lnb_anchor.center.on:after { + border-bottom: 0.063rem solid transparent; +} + +.lnb_anchor__title { + white-space: nowrap; + color: var(--more-visible-wh_60-to-100); +} + +.lnb_sub_anchor { + display: flex; + flex-direction: column; + height: 0; + overflow: hidden; + padding: 0 0; +} + +.lnb_administrator { + position: relative; +} +.lnb_administrator:after { + position: absolute; + content: ""; + left: -2.5rem; + top: 0; + height: 100%; + border-left: 0.063rem solid rgba(255, 255, 255, 0.2); +} + +.lnb_popup_content { + position: absolute; + left: 0; + right: 0; + background: var(--bg_01_80); + border-top: 0.063rem solid var(--line-wh_20-to-100); +} + +.lnb_popup_title_bg { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + height: 2.5rem; + padding: 0 1.25rem; + background: var(--bg_01_80); + border-bottom: 0.063rem solid var(--line-wh_20-to-100); +} +.lnb_popup_title_bg span { + font-size: 1.25rem; + font-weight: 700; + color: var(--primary-pri_100); +} +.lnb_popup_title_bg span.black { + color: var(--white-w_100-sec); +} +.lnb_popup_title_bg.page { + height: 3.5rem; +} + +.btn_fnb_tab { + display: flex; + align-items: center; + font-size: 0.875rem; + font-weight: 500; + overflow: hidden; + background-color: var(--bg_01_80); +} +.btn_fnb_tab button, .btn_fnb_tab a { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-40); + color: var(--white-w_87-sec); +} +.btn_fnb_tab button:first-child, .btn_fnb_tab a:first-child { + border-right: 0; + border-radius: 0.125rem 0 0 0.125rem; +} +.btn_fnb_tab button:last-child, .btn_fnb_tab a:last-child { + border-radius: 0 0.125rem 0.125rem 0; +} +.btn_fnb_tab .selected, .btn_fnb_tab button:hover:not(.selected), .btn_fnb_tab a:hover:not(.selected), +.btn_fnb_tab button:focus:not(.selected), .btn_fnb_tab a:focus:not(.selected) { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + font-size: 0.875rem; + font-weight: 700; + background: var(--primary-pri_20); + border: 0.063rem solid var(--line-wh_12-to-40); + color: var(--primary-pri_100); + opacity: 1; +} + +.fnb_search_bar { + display: flex; + align-items: center; + border-radius: 0.125rem; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + height: 2.5rem; + background-color: var(--bg_01_80); + border: 0.063rem solid var(--line-wh_12-to-100); +} +.fnb_search_bar.on .search_bar_input { + display: block; +} +.fnb_search_bar .btn_icon:not(:last-child) { + border-right: 0.063rem solid rgba(255, 255, 255, 0.12); +} + +.search_bar_input { + display: none; + padding: 0.375rem 0.5rem; +} + +.btn_fnb_search { + display: flex; + align-items: center; + justify-content: center; + align-self: stretch; +} + +.footer_nav { + display: flex; + align-items: center; + position: absolute; + left: 0; + right: 0; + height: 3rem; + background: var(--etc-FNB); + border-top: 0.063rem solid var(--white-w_12); +} +.footer_nav .icon_ffb { + box-shadow: unset; +} +.footer_nav .footer_ffb { + background: var(--bg_01_80); + box-shadow: unset; +} +.footer_nav .footer_ffb .icon_ffb { + background: var(--etc-FNB); + box-shadow: unset; +} +.footer_nav .footer_ffb .icon_ffb:hover, .footer_nav .footer_ffb .icon_ffb.selected { + background: rgba(39, 212, 255, 0.06); +} + +.footer_nav_ { + display: flex; + align-items: center; + position: absolute; + left: 0; + right: 0; + height: 3rem; + background: var(--bg_01_80); +} + +.footer_ffb .icon_ffb { + display: flex; + align-items: center; + justify-content: center; + border-top: 0; + border-bottom: 0; + border-right: 0; + -webkit-backdrop-filter: unset; + backdrop-filter: unset; +} + +.side_contents { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + 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; + overflow: hidden; +} + +.accordion_block.side .accordion_title:hover:not(.disabled), .accordion_block.side .hover.accordion_title, +.accordion_block.side .accordion_title:focus:not(.disabled) { + background: var(--primary-pri_20); + border-right: 0.125rem solid var(--primary-pri_100); + color: var(--primary-pri_100); +} +.accordion_block.side .accord_title_in { + background: var(--bg_02_60); +} + +.menu_box { + font-size: 0.875rem; + font-weight: 700; + 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; +} +.menu_box.on { + background: var(--primary-pri_20); + color: var(--primary-pri_100); +} + +.selectbox, .selectboxSample { + display: flex; + align-items: center; + justify-content: space-between; + border-radius: 0.125rem; + position: relative; + padding: 0 0.75rem; + cursor: pointer; +} +.selectbox.line, .selectboxSample.line { + box-shadow: 0 0 0 0.063rem inset var(--white-w_40); +} +.selectbox.fill, .selectboxSample.fill { + background: var(--more-visible-wh_12-to-6); +} +.selectbox.fill .selectbox_text, .selectboxSample.fill .selectbox_text { + color: var(--white-w_87-sec); +} +.selectbox.fill.line, .selectboxSample.fill.line { + box-shadow: 0 0 0 0.063rem inset var(--white-w_40); + background-color: var(--more-visible-wh_12-to-6); +} +.selectbox.on:not(.dropdown), .selectboxSample.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.on .selectbox_text, .selectboxSample.on .selectbox_text { + color: var(--white-w_87); +} +.selectbox.on .selectbox_arrow, .selectboxSample.on .selectbox_arrow { + opacity: 1; + transform: rotate(180deg); +} +.selectbox.on .selectbox_options, .selectboxSample.on .selectbox_options { + display: block; +} +.selectbox.on .box_bg, .selectboxSample.on .box_bg { + display: block; +} +.selectbox .selectbox_arrow, .selectboxSample .selectbox_arrow { + opacity: 0.6; +} +.selectbox .selectbox_text, .selectboxSample .selectbox_text { + font-size: 0.8125rem; + font-weight: 400; + overflow: hidden; + line-height: 1; + text-overflow: ellipsis; + color: var(--white-w_40); +} +.selectbox .selectbox_text.selected, .selectboxSample .selectbox_text.selected { + color: var(--white-w_87) !important; +} +.selectbox label, .selectboxSample label { + padding: 0.125rem 0 0; + cursor: pointer; +} +.selectbox.disabled .selectbox_text, .selectboxSample.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; +} +.box_bg.on { + display: block; +} + +.hidden_zone { + display: block; +} + +.selectbox_options { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border-radius: 0.125rem; + 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); +} +.selectbox_options .option { + display: flex; + align-items: center; + font-size: 0.8125rem; + font-weight: 400; + height: 1.75rem; + padding: 0 0.5rem 0 0.75rem; +} +.selectbox_options .option.selected { + background: var(--primary-pri_20); +} +.selectbox_options .option:hover, .selectbox_options .option:focus { + background: var(--primary-pri_20); +} + +.date_wrap .datebox { + width: 100% !important; +} + +.datebox { + display: flex; + align-items: center; + 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; +} +.datebox.line { + background-color: transparent; + border: 0.063rem solid rgba(255, 255, 255, 0.38); +} +.datebox:focus, .datebox.on { + border: 0.063rem solid #27D4FF !important; + outline: 0.188rem solid rgba(39, 212, 255, 0.2); +} + +.datepicker { + font-size: 0.8125rem; + font-weight: 400; + background-image: url(../images/calendar_fff_24.svg); + background-repeat: no-repeat; + background-position: calc(100% - 0.25rem) center; + background-size: 1.5rem auto; + color: var(--white-w_87) !important; +} +.datepicker:focus, .datepicker.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; +} +.datepicker.default { + color: var(--white-w_40) !important; +} + +.stepper_box { + display: grid; +} +.stepper_box .wrput { + grid-row: 1/3; +} +.stepper_box .wrput.selected { + border: 0.063rem solid var(--white-w_60); +} +.stepper_box .wrput.disabled { + border: 0.063rem solid var(--white-w_12); + color: var(--white-w_40); +} + +.stepper_arrow { + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.125rem; + width: 1rem; + height: 0.8125rem; + background: var(--white-w_12); +} +.stepper_arrow:hover img, .stepper_arrow.on img, .stepper_arrow:focus img { + opacity: 1; +} +.stepper_arrow img { + opacity: 0.6; +} +.stepper_arrow.disabled img { + opacity: 0.2; +} +.stepper_arrow.up { + grid-row: 1/1; +} +.stepper_arrow.down { + grid-row: 2/3; +} + +.image_frame { + border-radius: 0.125rem; + position: relative; + border: 0.063rem solid var(--white-w_12); + overflow: hidden; +} +.image_frame .image_dimbg { + background: rgba(10, 11, 20, 0.4); +} +.image_frame:hover .image_dimbg, .image_frame.on .image_dimbg, .image_frame:focus .image_dimbg { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + cursor: pointer; + background: rgba(162, 164, 184, 0.2); +} + +.image_dimbg { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.image_frame_text { + font-size: 0.6875rem; + font-weight: 500; + color: rgba(255, 255, 255, 0.87); +} + +.image_selected { + position: relative; + overflow: hidden; +} +.image_selected:hover, .image_selected.hover, .image_selected:focus { + cursor: pointer; +} +.image_selected:hover .image_dimbg, .image_selected.hover .image_dimbg, .image_selected:focus .image_dimbg { + background: var(--primary-pri_20) !important; +} +.image_selected.on .image_dimbg { + border: 0.125rem solid var(--primary-pri_100); +} + +.list_block { + display: flex; + align-items: center; + border-radius: 0.125rem; + font-size: 0.8125rem; + font-weight: 400; + overflow: hidden; + padding: 0.25rem 0.5rem; + cursor: pointer; + background: var(--white-w_12); + color: var(--white-w_100-sec); +} +.list_block:hover:not(.disabled), .list_block.on, .list_block:focus:not(.disabled) { + background: var(--primary-pri_20); +} +.list_block:hover:not(.disabled) .btn_list_text, .list_block.on .btn_list_text, .list_block:focus:not(.disabled) .btn_list_text { + color: var(--primary-pri_100); +} +.list_block.disabled { + cursor: default; +} +.list_block.disabled .btn_list_text { + color: var(--white-w_40); +} + +.list_block .list_texts { + display: none; +} +.list_block:hover:not(.disabled) .btn_list_text, .list_block.on .btn_list_text, .list_block:focus:not(.disabled) .btn_list_text { + display: block; +} +.list_block:hover:not(.disabled) .list_texts, .list_block.on .list_texts, .list_block:focus:not(.disabled) .list_texts { + display: block; +} +.list_block.disabled { + cursor: default; +} +.list_block.disabled .btn_list_text, .list_block.disabled .list_texts { + display: block; + color: var(--white-w_40); +} + +.btn_list_text { + border-radius: 0.125rem; + font-size: 0.8125rem; + font-weight: 400; + height: 100%; + padding: 0 0.25rem; + background: var(--white-w_12); + line-height: 1rem; + white-space: nowrap; + color: var(--white-w_87); +} +.btn_list_text.no_line { + padding: 0; + background: transparent; +} + +.list_usage_box { + border-radius: 0.125rem; + 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 { + font-size: 0.8125rem; + font-weight: 400; + color: var(--primary-pri_100); +} +.list_texts.disabled { + color: var(--white-w_40); +} + +.dragdrop_box { + border-radius: 0.125rem; + display: grid; + align-items: center; + justify-content: center; + position: relative; + padding: 0.75rem; + overflow: hidden; + cursor: pointer; +} +.dragdrop_box.select .dragdrop_bg, .dragdrop_box.drag .dragdrop_bg { + background: rgba(39, 212, 255, 0.1); + background: var(--primary-pri_12); + border: 0.063rem solid var(--primary-pri_40); +} +.dragdrop_box.drag { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + border: 0.188rem solid var(--primary-pri_20); +} +.dragdrop_box.drag .dragdrop_bg { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); +} + +.dragdrop_text { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + display: flex; + align-items: center; + justify-content: center; + flex-direction: column; + z-index: 1; +} +.dragdrop_text p { + font-size: 0.875rem; + font-weight: 700; + color: var(--white-w_100-sec); +} +.dragdrop_text span { + font-size: 0.8125rem; + font-weight: 400; + color: var(--white-w_60); +} + +.dragdrop_bg { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; + background: var(--white-w_6); +} + +.dragdrop_number { + display: flex; + align-items: center; + justify-content: center; + border-radius: 0.125rem; + width: 1.5rem; + height: 1.5rem; + font-size: 0.875rem; + line-height: 1.5rem; + position: absolute; + z-index: 2; + top: 0.75rem; + left: 0.75rem; + background: rgb(0, 104, 230); + font-weight: 500; + color: #ffffff; +} + +.table_box { + font-size: 0.8125rem; + font-weight: 400; + color: var(--white-w_87-sec); + width: 100%; + border-collapse: separate; +} +.table_box tr.selected, .table_box tr:hover:not(.disabled):not(.disable):not(.row_type2.disabled):not(.hover), .table_box tr:focus, .table_box tr.hover { + background: var(--primary-pri_20); +} +.table_box th { + position: sticky; + z-index: 1; + top: 0; + height: 2.25rem; + background: var(--more-visible-wh_16-to-6); + font-weight: 500; +} +.table_box th, .table_box td:not(.disabled):not(.disable):not(.disable), .table_box td:not(.hover) { + border-right: 0.063rem solid var(--white-w_12); +} +.table_box th:last-child, .table_box td:not(.disabled):not(.disable):not(.disable):last-child, .table_box td:not(.hover):last-child { + border-right: 0; +} +.table_box td { + height: 2.25rem; + border-top: 0.125rem solid var(--etc-bg) !important; +} +.table_box td.hover { + height: 2.25rem; + border-top: 0.125rem solid transparent !important; +} +.table_box .row_type1 { + background: var(--more-visible-wh_16-to-6); +} +.table_box .row_type2 { + background: var(--more-visible-wh_6-to-100); +} +.table_box .row_error { + background: rgba(219, 0, 0, 0.08); + color: #FF1F55; +} + +.table_title { + font-size: 1rem; + font-weight: 700; + color: var(--primary-to-grayscale-to-bk); +} + +.table__cell { + position: relative; + width: auto; + height: 100%; +} +.table__cell.disable .wrput { + color: var(--white-w_40); +} +.table__cell.error_on { + background: var(--primary-pri_20); +} +.table__cell .wrput { + border-radius: 0; + width: 100%; + height: 100%; + background: transparent; +} +.table__cell .wrput:focus:not(.hover):not(.on):not(.error):not(.disable):not(.disabled), .table__cell .wrput.on, .table__cell .wrput: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); +} +.table__cell .wrput:hover:not(.hover):not(.on):not(.error):not(.disable):not(.disabled), .table__cell .wrput.error_on { + background: var(--primary-pri_20); +} +.table__cell .wrput.error, .table__cell .wrput.error:focus { + background: rgba(219, 0, 0, 0.2); + border: 0.063rem solid #D60000 !important; + outline: 0.188rem solid rgba(219, 0, 0, 0.2); +} +.table__cell.disabled { + border-right: 0.063rem rgba(255, 255, 255, 0.12); + background: rgba(255, 255, 255, 0.06); + color: rgba(255, 255, 255, 0.4); +} + +.error_tooltip { + display: flex; + align-items: center; + position: absolute; + z-index: 9; + bottom: calc(100% + 0.188rem); + left: 0; + height: 1rem; + padding: 0 0.25rem; + background: #D60000; +} +.error_tooltip * { + line-height: 1rem; +} + +.sp_search24 { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + background: url("../images/search_fff_24.svg") no-repeat center center; + background-size: cover; +} + +.sp_download20 { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + background: url("../images/icon_download_20.svg") no-repeat center center; + background-size: cover; +} + +.sp_cctv20 { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + background: url("../images/icon_camera_20.svg") no-repeat center center; + background-size: cover; +} + +.sp_x20 { + display: flex; + align-items: center; + justify-content: center; + width: 1.25rem; + height: 1.25rem; + background: url("../images/icon_x_20.svg") no-repeat center center; + background-size: cover; +} + +.sp_layer24 { + display: flex; + align-items: center; + justify-content: center; + width: 1.5rem; + height: 1.5rem; + background: url("../images/layer_fff_24.svg") no-repeat center center; + background-size: cover; +} + +.fc_annotation60 { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_60); +} + +.fc_annotation87 { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_87); +} + +.text_label_box { + font-size: 1.25rem; + font-weight: 500; + border-radius: 0.125rem; + padding: 1.25rem 1.5rem; + background: var(--primary-pri_12-to-bk); +} + +.list_style { + position: relative; + padding-left: 1.375rem; +} +.list_style::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 { + border-radius: 0.125rem; + width: 3.75rem; + height: 3.75rem; +} +.color_box.rainbow1 { + background-color: #27D4FF; +} +.color_box.rainbow2 { + background-color: #0068E6; +} +.color_box.rainbow3 { + background-color: #8972FF; +} +.color_box.rainbow4 { + background-color: #16D9AB; +} +.color_box.rainbows7 { + background-color: #9DFFBE; +} +.color_box.rainbows10 { + background-color: #64EBA7; +} +.color_box.rainbows4 { + background-color: #16D9AB; +} +.color_box.rainbows14 { + background-color: #00CBCB; +} +.color_box.rainbows1 { + background-color: #27D4FF; +} +.color_box.rainbows11 { + background-color: #16A3E9; +} +.color_box.rainbows2 { + background-color: #07F; +} +.color_box.rainbows5 { + background-color: #0E44E5; +} +.color_box.rainbows8 { + background-color: #0A2ACC; +} +.color_box.rainbows12 { + background-color: #4D4DFF; +} +.color_box.rainbows6 { + background-color: #6E3DFF; +} +.color_box.rainbows3 { + background-color: #8972FF; +} +.color_box.rainbows13 { + background-color: #B5A6FF; +} +.color_box.rainbows9 { + background-color: #D4CCFF; +} +.color_box.gradefff { + background-color: #850404; +} +.color_box.gradeff { + background-color: #B31212; +} +.color_box.gradef { + background-color: #E62222; +} +.color_box.gradee { + background-color: #FC5C34; +} +.color_box.graded { + background-color: #FC8A18; +} +.color_box.gradec { + background-color: #FFBC04; +} +.color_box.gradeb { + background-color: #82D971; +} +.color_box.gradea { + background-color: #00BD78; +} +.color_box.grade_less1 { + background-color: #16A3E9; +} +.color_box.grade_less2 { + background-color: #0068E6; +} +.color_box.grade_less3 { + background-color: #636771; +} + +.color_box_mini { + border-radius: 0.125rem; + width: 2.25rem; + height: 2.25rem; + background: #D9D9D9; +} +.color_box_mini.rainbow1 { + background-color: #27D4FF; +} +.color_box_mini.gradec { + background-color: #FFBC04; +} +.color_box_mini.rainbows4 { + background-color: #16D9AB; +} + +.velocity_result { + display: flex; + align-items: center; + justify-content: center; + font-size: 1.25rem; + font-weight: 700; + flex-wrap: wrap; + width: 100%; + letter-spacing: 0; +} +.velocity_result .unit { + font-size: 0.75rem !important; + font-weight: 700 !important; + margin: 0 0 0.25rem 0.25rem; +} + +.number_label { + display: flex; + align-items: center; + justify-content: center; + 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 { + font-size: 1rem; + font-weight: 500; + display: flex; + align-items: center; + padding: 1.25rem 1rem 1rem 0; + color: #27D4FF; +} + +.tab_button.on { + position: relative; +} +.tab_button.on:after { + position: absolute; + content: ""; + border-radius: 50%; + 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 { + font-size: 0.875rem; + font-weight: 400; + color: var(--white-w_60); +} + +.fc_contents { + font-size: 0.875rem; + font-weight: 400; + color: var(--white-w_87-sec); +} + +.play_bar { + display: flex; + align-items: center; + -moz-column-gap: 1.25rem; + column-gap: 1.25rem; + width: 75.5rem; + height: 100%; + padding: 0 0 0 0.75rem; + background: var(--bg_01_80); +} + +.time_bar { + font-size: 0.75rem; + font-weight: 400; + color: var(--white-w_100-sec); +} + +.time_set { + font-size: 0.8125rem; + font-weight: 400; + color: var(--white-w_100-sec); +} + +.imgpopover_box { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + width: 46.25rem; + height: 26.563rem; + padding: 0.625rem; + border: 0.063rem solid var(--primary-pri_40); + background: rgba(10, 15, 36, 0.8); + box-shadow: 0 0 0.75rem 0 rgba(0, 104, 230, 0.4) inset; +} +.imgpopover_box.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.4) inset; +} +.imgpopover_box img { + width: 45rem; + height: 25.313rem; +} + +.map_scale { + display: flex; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; + height: 1.125rem; + padding: 0.25rem; + background: rgba(0, 0, 0, 0.5); +} + +.map_scale_box { + display: flex; + padding: 0.125rem 0.25rem; + align-items: center; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; + background: rgba(0, 0, 0, 0.5); +} +.map_scale_box 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); +} +.map_area_circle.hover, .map_area_circle:hover { + border: 0.188rem solid var(--primary-pri_100); + background: var(--etc-bg); +} +.map_area_circle.selected { + border: 0.125rem solid var(--primary-pri_100); + background: var(--etc-bg); +} +.map_area_circle.disabled { + border: 0.125rem solid var(--primary-pri_40); + background: var(--white-w_20); +} +.map_area_circle.ver2.hover, .map_area_circle.ver2:hover { + border: 0.375rem solid var(--primary-pri_20); + background: var(--map-ver2-hover); +} +.map_area_circle.ver2.selected { + border: 0.125rem solid rgb(245, 213, 49); + 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); +} +.linked_circle.hover, .linked_circle:hover { + border: 0.125rem solid var(--primary-pri_100); + background: var(--group-icon-selected); +} +.linked_circle.selected { + border: 0.125rem solid rgb(245, 213, 49); + background: rgba(255, 224, 67, 0.2); +} +.linked_circle.disabled { + cursor: default; + border: 0.125rem solid var(--white-w_40); + background: var(--white-w_20); +} + +.area_group { + width: 4.125rem; + height: 1.125rem; + border-radius: 3.75rem; + border: 0.125rem solid var(--primary-pri_100); + background: var(--primary-pri_20); +} +.area_group.hover, .area_group:hover:not(.large):not(.disabled):not(.selected) { + cursor: pointer; + border: 0.125rem solid var(--primary-pri_100); + background: var(--group-icon-selected); +} +.area_group.selected { + border: 0.125rem solid rgb(245, 213, 49); + background: rgba(255, 224, 67, 0.2); +} +.area_group.disabled { + cursor: default; + border: 0.125rem solid var(--white-w_40); + background: var(--white-w_20); +} +.area_group.no00 { + transform: rotate(-20deg); +} +.area_group.no1 { + position: absolute; + transform: rotate(-20deg); + top: 0; + bottom: 0; + left: 4.375rem; + right: 0; +} +.area_group.no2 { + position: absolute; + transform: rotate(-20deg); + top: 2.313rem; + bottom: 3.75rem; + left: 4.375rem; + right: 0; +} +.area_group.no3 { + position: absolute; + transform: rotate(20deg); + top: 2.813rem; + bottom: 0; + left: 1.875rem; + right: 0.625rem; +} +.area_group.no4 { + position: absolute; + transform: rotate(20deg); + top: 4.688rem; + bottom: 0; + left: 2.5rem; + right: 0; +} +.area_group.no5 { + position: absolute; + transform: rotate(20deg); + top: 6.25rem; + bottom: 0; + left: 2rem; + right: 0; +} +.area_group.no6 { + position: absolute; + transform: rotate(20deg); + top: 7.5rem; + bottom: 0; + left: 1.563rem; + right: 0; +} +.area_group.no7 { + position: absolute; + transform: rotate(-5deg); + top: 8.75rem; + bottom: 0; + left: 1.25rem; + right: 0; +} +.area_group.large { + width: auto; + height: 3.5rem; + padding: 0.25rem; +} + +.state_box { + display: flex; + align-items: center; + justify-content: center; + width: 3rem; + height: 3rem; +} + +.polygon { + position: relative; + width: 6.25rem; + height: 6.25rem; +} + +.polygon_text { + font-size: 0.875rem; + font-weight: 500; + position: absolute; + color: var(--white-w_87); + top: 2.813rem; + bottom: 0; + left: 1.875rem; + right: 0; +} \ No newline at end of file diff --git a/assets/css/guide.scss b/assets/css/guide.scss new file mode 100644 index 0000000..c8a33cd --- /dev/null +++ b/assets/css/guide.scss @@ -0,0 +1,6643 @@ +/*공통으로 쓰일 스타일*/ + +@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_l {height: 40px; font-weight: 700; font-size: 16px; letter-spacing: 0.031rem;} +.btn_m {height: 32px; font-weight: 700; font-size: 14px; letter-spacing: 0.031rem;} +.btn_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; + } + } + .put_see{ + top: 0.25rem; + display: flex; + } + .mess{ + margin:0.5rem 0 0; + } + &.normal{ + .mess{ + display: none; + } + } + .srch_put{ + flex: 1; + } +} +.wrput { + @include fs_13_regular; + width: 20rem; + height: 1.75rem; + background-color: var(--more-bright-wh_12-to-6); + border: 0.063rem solid rgba(255, 255, 255, 0); + border-radius: 0.125rem; + color: var(--white-w_87-sec); + line-height: 1; + letter-spacing: 0.031rem; + padding: 0 0.5rem; + &.line{ + background-color: transparent; + border: 0.063rem solid var(--white-w_40); + } + &.on, &:focus:not(.read_only):not(.read_error):not(.read_normal):not(.read_success){ + border: 0.063rem solid var(--primary-pri_100) !important; + outline: 0.188rem solid var(--primary-pri_20); + } + &.success{ + padding:0 2rem 0 1rem; + } + &.success + .put_check{ + display: flex; + } + &.error{ + border: 0.063rem solid #D60000; + outline: none; + } + &.etc{ + width: 100%; + height: 1.75rem; + padding: 0 0.875rem; + } + &.usage{ + color: #00B295; + } + &.large{ + @include fs_14_regular; + width: 100%; + height: 2.5rem; + padding: 0 1rem; + &.pass{ + padding: 0 2.5rem 0 1rem; + } + } + &.pass{ + padding: 0 2.25rem 0 0.5rem; + } + &.read_only{ + background: var(--more-bright-wh_12-to-6); + border: 0.063rem solid var(--white-w_20); + outline: none; + } + &.read_light{ + background: var(--primary-pri_12); + border: 0.063rem solid var(--primary-pri_100); + outline: none; + color: var(--primary-pri_100); + } + &.read_error{ + background: rgba(219, 0, 0, 0.08); + border: 0.063rem solid #D60000; + outline: none; + color: $bg_error; + } + &.read_normal{ + background: rgba(0, 104, 230, 0.20); + border: 0.063rem solid #0068E6; + outline: none; + color: #338FFF; + } + &.read_success { + background: rgba(0, 189, 120, 0.1); + border: 0.063rem solid #00BD78; + outline: none; + color: #00BD78; + } + &.text {color: $fc_white} +} +.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: 20rem; +} +.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: 2.5rem; + z-index: 200; + background-color: var(--bg_01_80); + border-bottom: 0.063rem solid var(--line-wh_20-to-100); + &.two_line { + height: 5rem; + background-color: var(--bg_01_80); + } +} +.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: 1.875rem; + padding:0 1rem 0 0; +} +.header_logo{ + @include dflx_ac; + a{ + @include dflx_ac; + } +} +.logo_hd_uniplus{ + width: 9.125rem; +} +.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{ + @include fs_11_regular; + @include dflx_ac_jcent; + min-width: 3.125rem; + height: 1rem; + padding:0.1rem 0.25rem 0; + overflow: hidden; + background-color: $ui_blue; + border-radius: 0.125rem; + color: #fff; + word-break: keep-all; + &.morning{ + background-color: #55BBFF; + } + &.afternoon{ + background-color: #1BABFF; + } + &.daytime{ + background-color: #008DFF; + } + &.night{ + background-color: $ui_blue; + } + &.latenight{ + background-color: #174BCC; + } + &.etc{ + background-color: rgba(255, 255, 255, 0.3); + } + &.cross{ + background-color: rgba(39, 212, 255, 0.8); + } + &.construct{ + background-color: $fc_purple; + } + &.emergency{ + background-color: #6548F5; + } +} +.gr_label{ + @include dflx_ac; + margin: 0.5rem 0; + .word{ + @include fs_11_regular; + color: var(--white-w_87-sec); + margin: 0 0 0 0.375rem; + line-height: 1.1; + } +} + + +// lmw 작업 +// label +.label_tag { + @include border_radius02; + display: inline-block; + // min-width: 2.5rem; + min-height: 1.125rem; + padding: 0 0.25rem; + line-height: 1.125rem; + text-align: center; + color: var(--white-w_100); + &.ellipse { + @include dflx_ac_jcent; + @include border_radius50; + @include numberDefault($width: 2.25rem, $height: 2.25rem); + min-width: auto; + } + &.box{ + padding: 0.125rem 0.25rem; + min-width: 1.938rem + } + &.long { + width: 3.5rem; + } + &.card { + padding: 0 0.625rem; + min-height: 1rem !important; + line-height: 1rem; + } + &.small { + min-width: 3.063rem; + } + &.x_small { + padding: 0.125rem 0; + min-width: 1.813rem; + } + &.main_label { + background: var(--white-w_30) + } + &.main_info { + background: var(--white-w_30) + } + &.grey { + background: var(--white-w_40); + } +} +.number_default { + @include dflx_ac_jcent; + @include numberDefault($width: 1.5rem, $height: 1.5rem); + @include border_radius02; + &.outline { + background: var(--white-w_20); + border: 0.063rem solid var(--white-w_40-sec); + color: $fc_default; + } + &.bg_blue { + background-color: #0068E6; + color: #FFF; + } + &.primary { + color: var(--primary-pri_100); + background-color: var(--bg_02_80); + } +} +.dashed_box { + @include border_radius05; + background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='5' ry='5' stroke='%23FFFFFF' opacity='0.2' stroke-width='4' stroke-dasharray='8' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e"); +} +.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; + } +} +// map +.marker_numbering_text { + transform: translate(-0, 0.313rem); + color: var(--primary-pri_100) +} +.marker_layer { + @include border_radius50; + background: rgba($color: $fc_error, $alpha: .4); +} +.route_line { + @include border_radius10; +} +.marker_departure { + @include border_radius50; + border: 0.188rem solid var(--primary-pri_100); + &.blue {border: 0.188rem solid #0068E6} + &.purple {border: 0.188rem solid #8972FF} + &.red {border: 0.188rem solid #D60000} +} +.pass_car { + transform: rotate(255deg) translate(6.688rem, -5.313rem); +} +.pass_departure { + transform: translate(9.063rem, 0.688rem); +} +.pass_arrival { + transform: translate(-2.625rem, -1.875rem); +} +.pass_departure_marker { + transform: translate(7.813rem, 1.063rem); +} +.pass_arrival_marker { + transform: translate(-1.125rem, -2.813rem); +} +.cluster_count { + @include backFilter; + @include fs_14_medium; + position: absolute; + top: -0.938rem; + left: 1.125rem; + height: 1.5rem; + padding: 0 0.5rem; + border: 0.063rem solid var(--white-w_40); + -webkit-border-radius: 1.5rem; + -moz-border-radius: 1.5rem; + border-radius: 1.5rem; + background: var(--bg_01_80); + line-height: 1.5rem; +} +.infowindow_box { + @include backFilter; + @include border_radius02; + width: auto; + padding: 0 0.5rem; + cursor: pointer; + border: 0.063rem solid $bg_grey38; + background: rgba(0, 0, 13, 0.4); + .infowindow_title { + @include fs_14_medium; + min-height: 1.375rem; + line-height: 1.375rem; + white-space: nowrap; + color: $fc_white; + } + .infowindow_content { + width: 0; + height: 0; + overflow: hidden; + font-size: 0.75rem; + &.map{ + p{ + @include fs_13_regular; + color: var(--white-w_60); + line-height: 1.063rem; + } + } + } + + &:hover:not(.with_marker), &.on, &:focus:not(.with_marker) { + width: 10rem; + padding: 0.5rem 0.75rem 0.75rem; + border: 0.063rem solid var(--primary-pri_40); + .infowindow_title { + @include fs_14_medium; + } + .infowindow_content { + width: auto; + height: auto; + padding-top: 0.5rem; + } + } + &.with_marker { + position: absolute; + } +} +.scroll_bar{ + background-color: var(--white-w_40); +} +.tooltip_label, .infowindow_box, .legend_label { + &.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); + } +} +.area_group { + width: 4.125rem; + height: 1.125rem; + border-radius: 3.75rem; + border: 0.125rem solid var(--primary-pri_100); + background: var(--primary-pri_20); + &.hover, &:hover:not(.large):not(.disabled):not(.selected) { + cursor: pointer; + border: 0.125rem solid var(--primary-pri_100); + background: var(--group-icon-selected); + } + &.selected { + border: 0.125rem solid rgba(245, 213, 49, 1); + background: rgba(255, 224, 67, 0.2); + } + &.disabled { + cursor: default; + border: 0.125rem solid var(--white-w_40); + background: var(--white-w_20); + } + &.no00 { + transform: rotate(-20deg); + } + &.no1 { + position: absolute; + transform: rotate(-20deg); + top: 0; + bottom: 0; + left: 4.375rem; + right: 0; + } + &.no2 { + position: absolute; + transform: rotate(-20deg); + top: 2.313rem; + bottom: 3.75rem; + left: 4.375rem; + right: 0; + } + &.no3{ + position: absolute; + transform: rotate(20deg); + top: 2.813rem; + bottom: 0; + left: 1.875rem; + right: 0.625rem; + } + &.no4{ + position: absolute; + transform: rotate(20deg); + top: 4.688rem; + bottom: 0; + left: 2.5rem; + right: 0; + } + &.no5{ + position: absolute; + transform: rotate(20deg); + top: 6.25rem; + bottom: 0; + left: 2rem; + right: 0; + } + &.no6{ + position: absolute; + transform: rotate(20deg); + top: 7.5rem; + bottom: 0; + left: 1.563rem; + right: 0; + } + &.no7{ + position: absolute; + transform: rotate(-5deg); + top: 8.75rem; + bottom: 0; + left: 1.25rem; + right: 0; + } + &.large { + width: auto; + height: 3.5rem; + padding: 0.25rem; + } +} +.state_box{ + @include dflx_ac_jcent; + width: 3rem; + 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; +} diff --git a/assets/css/layout.css b/assets/css/layout.css new file mode 100644 index 0000000..6536356 --- /dev/null +++ b/assets/css/layout.css @@ -0,0 +1,1717 @@ +@charset "UTF-8"; +/*가이드에서만 쓰이는 레이아웃 스타일*/ +:root { + --bg_02: #04091A; + --bg_02_template: #050A1F; + --bg_01:#0A0F24; + --background-bg_01:#0A0F24; + --bg_01_40: rgba(10, 11, 20, 0.4); + --bg_02_60: rgba(4, 9, 26, 0.60); + --primary-pri_100: #27D4FF; + --primary-pri_80: rgba(39, 212, 255, 0.8); + --primary-pri_60: rgba(39, 212, 255, 0.6); + --primary-pri_50: rgba(39, 212, 255, 0.5); + --primary-pri_40: rgba(39, 212, 255, 0.4); + --primary-pri_30: rgba(39, 212, 255, 0.3); + --primary-pri_20: rgba(39, 212, 255, 0.2); + --primary-pri_12: rgba(39, 212, 255, 0.12); + --primary-pri_12-to-bk: rgba(39, 212, 255, 0.12); + --primary-pri_06: rgba(39, 212, 255, 0.06); + --primary-pri_6: rgba(39, 212, 255, 0.06); + --white-w_100: #ffffff; + --white-w_100-sec: #ffffff; + --white-w_87: rgba(255, 255, 255, 0.87); + --white-w_87-sec: rgba(255, 255, 255, 0.87); + --white-w_60: rgba(255, 255, 255, 0.6); + --white-w_40: rgba(255, 255, 255, 0.4); + --white-w_40-sec: rgba(255, 255, 255, 0.4); + --white-w_30: rgba(255, 255, 255, 0.3); + --white-w_20: rgba(255, 255, 255, 0.2); + --white-w_16: rgba(255, 255, 255, 0.16); + --white-w_12: rgba(255, 255, 255, 0.12); + --tab-btn_default: #024294; + --btn-btn_default: #024294; + --btn-btn_hover: #0155BD; + --btn-btn_selected: #0068E6; + --box1_border:rgba(39, 212, 255, 0.4); + --title-color: #27D4FF; + --bg_01_80: rgba(11, 17, 41, 0.8); + --line-wh_12-to-40: rgba(255, 255, 255, 0.12); + --line-wh_20-to-100: rgba(255, 255, 255, 0.2); + --line-wh_30-to-60: rgba(255, 255, 255, 0.3); + --line-wh_12-to-100: rgba(255, 255, 255, 0.12); + --line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40); + --line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40); + --icon-pri_20-to-100: rgba(34, 212, 255, 0.20); + --more-bright-wh_16-to-6: rgba(255, 255, 255, 0.16); + --more-bright-wh_12-to-6: rgba(255, 255, 255, 0.12); + --more-visible-wh_20-to-12: rgba(255, 255, 255, 0.2); + --more-visible-wh_6-to-100: rgba(255, 255, 255, 0.06); + --more-visible-wh_6-to-60: rgba(255, 255, 255, 0.06); + --more-visible-wh_6-to-bk: rgba(255, 255, 255, 0.06); + --more-visible-wh_60-to-12: rgba(255, 255, 255, 0.6); + --more-visible-wh_60-to-100: rgba(255, 255, 255, 0.6); + --more-visible-wh_12-to-6: rgba(255, 255, 255, 0.12); + --more-visible-wh_16-to-6: rgba(255, 255, 255, 0.16); + --more-visible-wh_20-to-12: rgba(255, 255, 255, 0.2); + --primary-to-grayscale-to-bk: #27D4FF; + --more-bright-wh_6-to-60: rgba(255, 255, 255, 0.06); + --white-w_6: rgba(255, 255, 255, 0.06); + --line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40); + --etc-bg: #04091A; + --etc-popup_tit: rgba(39, 212, 255, 0.60); + --hero-notification_01: #000; + --hero-notification_02: rgba(0, 0, 0, 0.4); + --hero-notification_03: rgba(0, 0, 0, 0.4); + --hero-notification-border-top: rgba(39, 212, 255, 0.00); + --hero-notification-border-bottom: rgba(39, 212, 255, 0.00); + --hero-border: rgba(39, 212, 255, 1); + --background-blur_0260: rgba(56, 61, 82, 0.60); + --point-error: #D60000; + --point-error-10: rgba(219, 0, 0, 0.08); + --blur_02_60: rgba(55, 61, 82, 0.60); + --bg-blur_02_60: rgba(55, 61, 82, 0.60); + --grade-chart-gco-01:#FFE043; + --radio-default: rgba(255, 255, 255, 0.6); + --control-disabled: bg_grey10; + --background-legend: rgba(74, 78, 102, 0.8); + --icon-icon-selected: rgba(39, 212, 255, 0.40); + --group-icon-selected: rgba(39, 212, 255, 0.40); + --map-ver2-hover: rgba(39, 212, 255, 0.40); + --background-blur_02_60: rgba(55, 61, 82, 0.60); + --background-blur_01_20: rgba(162, 164, 184, 0.20); + --navigation-bg: #1F2333; + --etc-FNB: rgba(39, 212, 255, 0.12); + --black-bk_100: #000; + --etc-b_text: #338FFF; + --etc-b_text2: #338FFF; + --PRI: #84C01D; + --bg_body: #030914; +} + +:root[data-theme=light] { + --bg_02: #ffffff; + --bg_02_template: #DCDDE0; + --bg_01: #F5F6FA; + --background-bg_01: #ffffff; + --bg_01_40: #F3F5FD; + --bg_02_60: rgba(245, 247, 255, 0.90); + --primary-pri_100: #0068E6; + --primary-pri_80: rgba(0, 104, 230, 0.8); + --primary-pri_60: rgba(0, 104, 230, 0.6); + --primary-pri_50: rgba(0, 104, 230, 0.5); + --primary-pri_40: rgba(0, 104, 230, 0.4); + --primary-pri_30: rgba(0, 104, 230, 0.3); + --primary-pri_20: rgba(0, 104, 230, 0.2); + --primary-pri_12: rgba(0, 104, 230, 0.12); + --primary-pri_12-to-bk: #000; + --primary-pri_06: rgba(0, 104, 230, 0.06); + --primary-pri_6: rgba(0, 104, 230, 0.06); + --white-w_100: #ffffff; + --white-w_100-sec: #000; + --white-w_87: rgba(0, 0, 0, 0.87); + --white-w_87-sec: #000; + --white-w_60: rgba(0, 0, 0, 0.6); + --white-w_40: rgba(0, 0, 0, 0.4); + --white-w_40-sec: rgba(255, 255, 255, 0.4); + --white-w_30: rgba(0, 0, 0, 0.3); + --white-w_20: rgba(0, 0, 0, 0.2); + --white-w_16: rgba(0, 0, 0, 0.16); + --white-w_12: rgba(0, 0, 0, 0.12); + --tab-btn_default: #024294; + --btn-btn_default: #0155BD; + --btn-btn_hover: #0068E6; + --btn-btn_selected: #338FFF; + --box1_border: #ffffff; + --title-color: #0068E6; + --bg_01_80: rgba(245, 246, 250, 0.90); + --line-wh_12-to-40: rgba(255, 255, 255, 0.4); + --line-wh_20-to-100: #ffffff; + --line-wh_30-to-60: rgba(255, 255, 255, 0.6); + --line-wh_12-to-100: #ffffff; + --line-pri_40-to-wh_40: rgba(255, 255, 255, 0.4); + --line-pri_40-to-bk_40: rgba(0, 0, 0, 0.4); + --icon-pri_20-to-100: #0067E6; + --more-bright-wh_16-to-6: rgba(0, 0, 0, 0.06); + --more-bright-wh_12-to-6: rgba(0, 0, 0, 0.06); + --more-visible-wh_20-to-12: rgba(0, 0, 0, 0.12); + --more-visible-wh_6-to-100: #ffffff; + --more-visible-wh_6-to-60: rgba(255, 255, 255, 0.6); + --more-visible-wh_6-to-bk: #000; + --more-visible-wh_60-to-12: rgba(0, 0, 0, 0.12); + --more-visible-wh_60-to-100: #000; + --more-visible-wh_12-to-6: rgba(0, 0, 0, 0.06); + --more-visible-wh_16-to-6: rgba(0, 0, 0, 0.06); + --more-visible-wh_20-to-12: rgba(0, 0, 0, 0.12); + --primary-to-grayscale-to-bk: #000; + --more-bright-wh_6-to-60: rgba(255, 255, 255, 0.6); + --white-w_6: rgba(0, 0, 0, 0.06); + --line-pri_40-to-wh_100: #ffffff; + --etc-bg: #ffffff; + --etc-popup_tit: rgba(0, 104, 230, 0.80); + --hero-notification_01: rgba(255, 255, 255, 0); + --hero-notification_02: rgba(255, 255, 255, 0.6); + --hero-notification_03: rgba(255, 255, 255, 0.8); + --hero-notification-border-top: rgba(0, 104, 230, 0.00); + --hero-notification-border-bottom: rgba(0, 104, 230, 0.00); + --hero-border: rgba(0, 104, 230, 0.80); + --background-blur_0260: rgba(56, 61, 82, 0.60); + --point-error: #D60000; + --point-error-10: rgba(219, 0, 0, 0.08); + --blur_02_60: rgba(255, 255, 255, 0.9); + --bg-blur_02_60: rgba(55, 61, 82, 0.60); + --grade-chart-gco-01: #FC5C34; + --radio-default: rgba(0, 0, 0, 0.6); + --control-disabled: bg_grey10; + --icon-icon-selected: #ffffff; + --group-icon-selected: rgba(51, 143, 255, 0.40); + --map-ver2-hover: rgba(51, 143, 255, 0.4); + --background-blur_02_60: rgba(55, 61, 82, 0.60); + --background-blur_01_20: rgba(245, 246, 250, 0.90); + --navigation-bg: #E1E2E5; + --etc-FNB:rgba(245, 246, 250, 0.90); + --black-bk_100: #ffffff; + --etc-b_text: #139DF2; + --PRI: #87C718; + --bg_body: #030914; +} + +/*mode button*/ +.lightmode > .inner { + position: relative; + display: inline-flex; + padding: 0.313rem; + border-radius: 1.5em; + background-color: rgba(237, 237, 237, 0.3); +} +.lightmode > .inner.template { + padding: unset; +} + +html[data-theme=light] .lightmode > .inner { + background-color: rgba(0, 0, 0, 0.25); +} + +.lightmode label { + cursor: pointer; +} + +.lightmode label:first-of-type { + padding: 0.313rem 0.313rem 0.313rem 0.625rem; + border-radius: 50% 0 0 50%; +} + +.lightmode label:last-of-type { + padding: 0.313rem 0.625rem 0.313rem 0.313rem; + border-radius: 0 50% 50% 0; +} + +.lightmode i { + font-size: 1.2em; + color: #aaa; +} + +.lightmode input[type=radio] { + display: none; +} + +.lightmode input[type=radio]:checked + label > i { + color: rgb(135, 199, 24); + transition: all 0.35s ease-in-out; +} + +/**/ +/*Contents*/ +.guide_back { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 0; +} + +.guide_wrap { + background: var(--etc-bg); + color: var(--white-w_87); + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + padding: 1.875rem 0; +} +.guide_wrap.grey { + background-color: #1A1D29; +} +.guide_wrap.two_line { + padding: 3.75rem 0; +} +.guide_wrap.cards { + background: var(--bg_01); +} +.guide_wrap.navigation { + background: var(--navigation-bg); +} + +.guide_center { + width: 77.5rem; + margin: 0 auto; + padding: 1.25rem; +} +.guide_center.width1720 { + width: 107.5rem; +} + +.guide_top { + display: flex; + align-items: flex-end; + justify-content: space-between; + -moz-column-gap: 1rem; + column-gap: 1rem; + width: 100%; + height: 4.75rem; + padding: 0 0 1rem; + border-bottom: 0.063rem solid var(--white-w_30); +} +.guide_top h1 { + font-size: 2.5rem; + font-weight: 700; + color: #fff; +} + +html[data-theme=light] .guide_top h1 { + color: #000; +} + +.Gr_contents { + width: 100%; + margin: 2.5rem 0 4.375rem; +} + +.comp_top { + display: flex; + align-items: flex-end; + justify-content: space-between; + -moz-column-gap: 1rem; + column-gap: 1rem; + width: 100%; + padding: 0 0 1.875rem; +} +.comp_top h2 { + font-size: 1.5rem; + font-weight: 700; + color: var(--white-w_87); +} + +.comp_dl { + width: 100%; + display: flex; + -moz-column-gap: 0.75rem; + column-gap: 0.75rem; + margin: 0 0 1.5rem; +} + +.comp_dt { + font-size: 1rem; + font-weight: 500; + width: 6.25rem; + padding: 1.25rem 0 0 0; +} + +.comp_dd { + flex: 1; +} + +.compline { + display: flex; + align-items: center; + flex-wrap: wrap; + margin: 0.75rem 0; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; +} +.compline.box { + background: var(--white-w_6); +} + +.comp_size { + font-size: 0.75rem; + font-weight: 400; + color: rgba(255, 255, 255, 0.6); + width: 2.5rem; + text-align: center; +} + +.components { + display: flex; + align-items: center; + flex: 1; + gap: 0.75rem; +} + +.flex_wrap { + flex-wrap: wrap !important; +} + +.flex_one { + flex: 1 !important; +} + +.usage_box { + width: 53rem; + height: 46.688rem; + padding: 2.5rem; + border-radius: 0.5rem; + background: var(--white-w_6); +} + +.card_box { + height: 100%; + padding: 0.625rem; + background: var(--white-w_6); +} +.card_box.dark { + background-color: transparent; +} + +.black_box { + width: 33.75rem; + padding: 1.25em; + background: var(--white-w_6); +} + +/*template*/ +footer { + position: fixed; + width: 100%; + bottom: 0; + z-index: 200; +} + +.main_back { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} + +.main_wrap { + position: relative; + width: 100%; + height: 100%; + background: var(--bg_02_template); +} + +.main_contents { + width: 100%; + height: 100%; + position: relative; + background: url("../images/background_img.png"); + background-repeat: no-repeat; + background-size: cover !important; +} + +.marker_wrap { + position: absolute; +} + +.notification_box.main { + position: absolute; + left: 50%; + top: 3.5rem; + transform: translateX(-50%); + z-index: 80; +} +.notification_box.hide .notification_bg { + min-height: 0; + height: 0; + border-width: 0.063rem 0 0 0; +} +.notification_box.hide .btn_notification { + transform: rotate(180deg); +} + +.board_line.signal.right { + position: absolute; + display: flex; + top: 3.5rem; + right: 1.25rem; + z-index: 100; +} + +.box_line.left { + position: absolute; + top: 3.5rem; + left: 1.25rem; + z-index: 100; +} +.box_line.right { + position: absolute; + top: 3.5rem; + right: 1.25rem; + z-index: 100; +} + +.infowindow_box.main { + top: auto; + bottom: calc(100% + 0.125rem) !important; + left: 50%; + transform: translate(-50%, 0); + position: absolute; + background: var(--bg_01); + border: 0.063rem solid var(--line-pri_40-to-wh_100) !important; +} +.infowindow_box.main .infowindow_title { + color: var(--white-w_87-sec); +} + +.label_tag.main_label { + background: var(--white-w_30); +} +.label_tag.main_info { + background: var(--white-w_30); +} + +.scroll.sc_y.table { + height: 8.25rem; + padding: 0; +} +.scroll.sc_y.signal { + padding: 0; + margin-right: 0.5rem; +} + +.accordion_paragraph.signal { + padding: 0 0.75rem 1.25rem 1.25rem; + height: 16.75rem; +} + +.footer_in { + display: flex; + align-items: flex-start; + justify-content: space-between; + width: 100%; + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-bottom: 1.25rem; +} + +.table_box.signal tr.selected, .table_box.signal tr:focus, .table_box.signal tr.hover { + background: var(--primary-pri_12); +} +.table_box.signal th { + position: static; + height: 2rem; +} +.table_box.signal th, .table_box.signal td:not(.disable), .table_box.signal td:not(.disabled) { + border-right: 0.063rem solid rgba(255, 255, 255, 0.12); +} +.table_box.signal th:last-child, .table_box.signal td:not(.disable):last-child, .table_box.signal td:not(.disabled):last-child { + border-right: 0; +} +.table_box.signal td { + height: 1.75rem; + border-top: 0.125rem solid var(--etc-bg) !important; +} +.table_box.signal td p { + text-align: center !important; + cursor: pointer; +} + +.user_table { + font-size: 0.8125rem; + font-weight: 400; + color: var(--white-w_87-sec); + width: 100%; + border-collapse: separate; + border-spacing: 0 0.125rem; +} +.user_table tr.selected, .user_table tr:hover, .user_table tr:focus, .user_table tr.hover { + background: var(--primary-pri_12); +} +.user_table th { + position: relative; + z-index: 1; + top: 0; + height: 2.25rem; + background: rgba(255, 255, 255, 0.16); + background: var(--more-visible-wh_6-to-100); + background: var(--more-visible-wh_16-to-6); + font-weight: 500; +} +.user_table th, .user_table td { + border-right: 0.063rem solid var(--white-w_12); +} +.user_table th:last-child, .user_table td:last-child { + border-right: 0; +} +.user_table td { + height: 2.25rem; + border-top: 0.188rem solid transparent !important; +} +.user_table td.on { + background: rgba(39, 212, 255, 0.2); +} +.user_table .row_type1 { + background: rgba(255, 255, 255, 0.16); +} +.user_table .row_type2 { + background: var(--more-visible-wh_6-to-100); +} +.user_table .row_error { + background: rgba(219, 0, 0, 0.08); + color: #FF1F55; +} + +.arrow.left { + transform: rotate(180deg); +} +.arrow.up { + transform: rotate(270deg); +} +.arrow.down { + transform: rotate(90deg); +} + +.grey_box { + display: flex; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + top: 33%; + left: 30%; +} +.grey_box.login { + z-index: 0; + width: 44.563rem; + padding: 3rem; + border-radius: 0.125rem; + border: 0.063rem solid rgba(255, 255, 255, 0.12); + background: rgba(162, 164, 184, 0.2); + -webkit-backdrop-filter: blur(3.75rem); + backdrop-filter: blur(3.75rem); +} +.grey_box.login p { + position: relative; + z-index: 200; + width: 0.063rem; + background: rgba(255, 255, 255, 0.2); + align-self: stretch; +} +.grey_box.error { + display: block; + z-index: 0; + width: 44.563rem; + padding: 5rem; + border-radius: 0.125rem; + border: 0.063rem solid rgba(255, 255, 255, 0.3); + background: var(--background-blur_01_20); + -webkit-backdrop-filter: blur(3.75rem); + backdrop-filter: blur(3.75rem); + opacity: 1; +} + +.error_box { + display: flex; + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + position: absolute; + padding: 3rem; + top: 33%; + left: 30%; + z-index: 0; + width: 44.563rem; + height: 18.25rem; + border-radius: 0.125rem; + border: 0.063rem solid rgba(255, 255, 255, 0.21); + background: rgba(162, 164, 184, 0.2); + -webkit-backdrop-filter: blur(3.75rem); + backdrop-filter: blur(3.75rem); +} + +.marker_main { + position: absolute; + bottom: 40%; + left: 50%; +} + +.indicator.main { + padding: 1.25rem 0.6rem 1.25rem 1.25rem; +} +.indicator.signal { + padding: 0; +} + +.indi_conts.del { + display: none; +} +.indi_conts.signal { + margin: 0; +} + +.tmbox_text { + font-size: 0.875rem; + font-weight: 500; + line-height: 1.3; + color: var(--white-w_87-sec); +} + +.tmbox.signal { + background-color: transparent; + padding: 0; + margin-bottom: 1.25rem; +} + +.hd_profile { + position: relative; + width: 1.875rem; + height: 1.25rem; +} +.hd_profile .member_popover { + display: none; +} +.hd_profile.profile_open .member_popover, .hd_profile.profile_open .member_toggle { + display: block; +} +.hd_profile.profile_open .btn_profile .comma_under8 { + opacity: 1; + transform: rotate(180deg); +} +.hd_profile.profile_open .profile20 { + opacity: 1; +} + +.marker_img_selected { + display: none; +} + +.marker_main .tooltip_parents, .marker_main .infowindow_box.main.on { + display: none; +} +.marker_main.marker_hide .tooltip_parents, .marker_main.marker_hide .infowindow_box.main.on { + display: block; +} +.marker_main.marker_hide .img_off { + display: none !important; +} +.marker_main.marker_hide .marker_img_selected { + display: block !important; +} + +.fab_wrap { + position: absolute; + top: 0%; + left: 108%; + margin-left: 0.5rem; +} + +.popover_box.main { + position: absolute; + display: none; + bottom: 3rem; + left: -2.5rem; + z-index: 100; +} +.popover_box.main.legend { + display: block; +} +.popover_box.main.pop { + display: block; +} +.popover_box.main.pop_hide { + display: none; +} + +.signal_board { + width: 100%; + height: 100%; +} + +.signal_content { + display: flex; + align-items: center; + justify-content: center; + -moz-column-gap: 1rem; + column-gap: 1rem; + width: 100%; + height: 100%; + background: var(--bg_02_template); +} + +.signal_body { + position: relative; + width: 100%; + height: 100%; + background-image: url("../images/signal_body_img.png"); + background-repeat: no-repeat; + background-size: cover !important; +} + +.accordion_box { + position: absolute; + margin-top: 0.5rem; +} + +.indi_top.signal { + height: 3.5rem; + padding: 1.25rem 1rem 1.25rem; +} + +.signal_dl { + display: flex; + align-items: center; + margin: 0.5rem 0; +} +.signal_dl:last-child { + margin-bottom: 0; +} +.signal_dl dt { + font-size: 0.8125rem; + font-weight: 300; + display: flex; + justify-content: space-between; + width: 4rem; + padding: 0 1rem 0 0; + color: var(--white-w_87-sec); +} +.signal_dl dd { + display: flex; + align-items: center; + justify-content: space-between; + flex: 1; + -moz-column-gap: 0.25rem; + column-gap: 0.25rem; +} +.signal_dl dd .wrput { + width: 100%; +} +.signal_dl dd .ch_radio:last-child { + padding: 0; +} +.signal_dl.check { + margin: 1rem 0; +} + +.accordion_block.signal { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); +} +.accordion_block.signal .accordion_title:hover:not(.levle2), .accordion_block.signal .hover.accordion_title, +.accordion_block.signal .accordion_title:focus { + background: var(--primary-pri_20); + cursor: pointer; +} +.accordion_block.signal .accordion_title { + background: var(--primary-pri_20); +} +.accordion_block.signal .accordion_title:hover:not(.disabled), .accordion_block.signal .accordion_title:hover:not(.point.disabled), .accordion_block.signal .accordion_title:focus:not(.disabled) { + background: var(--primary-pri_20); +} +.accordion_block.signal .accordion_contents { + background: rgba(255, 255, 255, 0.06); +} +.accordion_block.signal .accordion_contents.signal { + padding: unset; +} + +.map_label_line { + display: flex; + align-items: center; + justify-content: center; + position: absolute; + width: 100%; + bottom: 1.5rem; + padding: 0.125rem 0.75rem; +} + +.map_label { + font-size: 1.25rem; + font-weight: 700; + width: auto; + padding: 0.125rem 0.75rem 0.25rem; + background-color: #0B1129; + color: #fff; +} + +.record_wrap { + width: 100%; + height: 100%; + padding-top: 5rem; +} + +.record_content { + width: 100%; + height: 100%; + padding: 1.25rem; + display: grid; + grid-auto-rows: 25.75rem auto; + row-gap: 1rem; +} + +.record_box { + width: 100%; + height: 100%; + border: 0.063rem solid var(--line-pri_40-to-wh_40); + background: var(--bg_01_80); + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + padding: 0 1.25rem 1.25rem 1.25rem; +} + +.record_title { + font-size: 1rem; + font-weight: 700; + width: 100%; + padding: 1.25rem 1rem 1rem 0; + color: var(--primary-to-grayscale-to-bk); +} + +.record_box_content { + display: flex; + -moz-column-gap: 1rem; + column-gap: 1rem; + width: 100%; + height: calc(100% - 3.25rem); +} + +.record_grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr; + grid-template-rows: 8.125rem auto; + -moz-column-gap: 1rem; + column-gap: 1rem; + row-gap: 1rem; + width: 100%; + height: 100%; +} + +.record_top { + display: grid; + grid-column-gap: 1rem; + width: 9rem; +} + +.chart_cont_box { + height: 100%; + width: 9rem; +} + +.diagon_cont_box { + display: grid; + grid-column-gap: 1rem; +} + +.diagon_cont.record { + width: 9rem; + height: 4.875rem; +} + +.situation_box { + padding: 0.75rem; + border-radius: 0.125rem; + background: var(--more-visible-wh_6-to-100); +} +.situation_box.chart { + display: flex; + flex-direction: column; + justify-content: space-between; + grid-row: 1/3; +} +.situation_box.case1 { + grid-row: 1/2; + grid-column: 5/6; +} +.situation_box.case2 { + grid-row: 1/2; + grid-column: 6/7; +} +.situation_box.event { + display: grid; + grid-column: 5/7; + grid-template-columns: 1.5fr 1fr; +} +.situation_box h4 { + font-size: 0.875rem; + font-weight: 500; + color: var(--white-w_87-sec); +} + +.case_wrap { + display: flex; + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; + width: 100%; + height: calc(100% - 1.125rem); +} + +.case_box { + padding: 0.25rem; + border-radius: 0.125rem; + background: var(--white-w_6); + width: 100%; +} +.case_box .case_number { + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + width: 100%; + height: calc(100% - 0.875rem); + color: var(--white-w_87); +} + +.case_grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + -moz-column-gap: 0.5rem; + column-gap: 0.5rem; + row-gap: 0.5rem; +} + +.chart_box { + display: flex; + align-items: center; + justify-content: center; + height: calc(100% - 0.875rem); + -moz-column-gap: 2.5rem; + column-gap: 2.5rem; +} + +.rate_content { + display: grid; + row-gap: 1rem; + height: calc(100% - 3.25rem); +} + +.rate_box { + width: 100%; + height: 100%; + padding: 0.75rem; + border-radius: 0.125rem; + background: var(--more-visible-wh_6-to-100); +} + +.ch_label { + display: flex; + align-items: center; +} +.ch_label .word { + font-size: 0.6875rem; + font-weight: 400; + color: var(--white-w_87-sec); + margin: 0.25rem 0 0.25rem 0.25rem; + line-height: 1.1; + word-break: keep-all; +} + +.chart_cont { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 9rem; + height: 4.891rem; + padding: 0.5rem; + overflow: hidden; + background: url(../images/bg_tract.svg) no-repeat left top; + background-size: 100% 100%; +} +.chart_cont .chart_tlt { + position: absolute; + left: 1.25rem; + top: 1.25rem; + margin-bottom: 0.5rem; +} +.chart_cont .chart_result { + padding: 1rem 0 0; +} + +.chart_tlt { + font-size: 0.875rem; + font-weight: 500; + color: #27D4FF; +} +.chart_tlt.cover { + width: 86%; + padding: 0.75rem 0 0 0.75rem; + background: url(../images/bg_tract_top.svg) no-repeat left top; + background-size: 100% auto; +} + +.chart_result { + display: flex; + align-items: flex-end; + color: #27D4FF; + font-size: 1.5rem; + font-weight: 700; + -moz-column-gap: 0.375rem; + column-gap: 0.375rem; +} +.chart_result .unit { + font-size: 0.875rem; + font-weight: 400; + line-height: 1.7; +} + +.record_radio { + display: flex; + align-items: center; + cursor: pointer; +} +.record_radio .word { + color: var(--white-w_87-sec); +} +.record_radio.on .radio { + background-color: #fff; + border: 0.25rem solid #27d4ff; +} +.record_radio.on .word { + color: var(--white-w_87-sec); +} +.record_radio .radio { + display: inline-block; + width: 0.9375rem; + height: 0.9375rem; + background-color: rgba(255, 255, 255, 0.7); + border-radius: 100%; + margin: 0 0.5rem 0 0; +} +.record_radio .radio.mini { + width: 0.625rem; + height: 0.625rem; + border: 0.125rem solid #27d4ff; + margin: 0 0.375rem 0 0; +} +.record_radio .radio.green { + border: 0.125rem solid #16D9AB; +} +.record_radio .radio.blue { + border: 0.125rem solid #07F; +} +.record_radio .radio.dark_blue { + border: 0.125rem solid #0E44E5; +} +.record_radio .radio.purple { + border: 0.125rem solid #8972FF; +} +.record_radio .radio.dark_purple { + border: 0.125rem solid #6E3DFF; +} +.record_radio .word { + font-size: 0.6875rem; + font-weight: 300; +} + +.user_wrap { + width: 100%; + height: 100%; + padding-top: 2.5rem; +} + +.user_content { + display: flex; + -moz-column-gap: 1rem; + column-gap: 1rem; + width: 100%; + height: 100%; + padding: 1.25rem; +} + +.personal_box, .system_box { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + width: 100%; + height: 100%; + border: 0.063rem solid var(--line-pri_40-to-wh_40); + background: var(--bg_01_80); + box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16); + width: 28.625rem; +} + +.user_box { + -webkit-backdrop-filter: blur(1.875rem); + backdrop-filter: blur(1.875rem); + width: 100%; + height: 100%; + padding: 1.25rem; + border: 0.063rem solid var(--line-pri_40-to-wh_40); + background: var(--bg_01_80); + box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16); + flex: 1; +} + +.table_inner { + margin-top: 0.75rem; + width: 100%; + height: calc(100% - 2.625rem); +} + +.title_box { + display: flex; + align-items: center; + justify-content: space-between; + flex-wrap: wrap; +} + +.user_title { + font-size: 1rem; + font-weight: 700; + color: var(--primary-to-grayscale-to-bk); + height: 1.5rem; +} + +.user_btn { + height: 1.75rem; + padding: 0.5rem 0; + word-break: keep-all; +} + +.error_logo { + position: absolute; + top: -10%; + left: 50%; + transform: translate(-50%, 0); + z-index: 1; +} + +.logo_login { + width: 12.5rem; +} + +.hd_profile { + position: relative; + width: 1.875rem; + height: 1.25rem; +} +.hd_profile .member_popover { + display: none; +} +.hd_profile.profile_open .member_popover, .hd_profile.profile_open .member_toggle { + display: block; +} +.hd_profile.profile_open .btn_profile .comma_under8 { + opacity: 1; + transform: rotate(180deg); +} +.hd_profile.profile_open .profile20 { + opacity: 1; +} + +.login_title { + color: var(--white-w_100-sec); +} + +.white_w_87 { + color: var(--white-w_87) !important; +} + +.white_w_bk { + color: var(--white-w_87-sec) !important; +} + +.white_ff_bk { + color: var(--white-w_100-sec) !important; +} + +@media screen and (min-width: 2400px) { + body, html { + font-size: 1.2rem; + } + .indi_vert432 { + height: auto; + } +} +@media screen and (min-width: 3800px) { + body, html { + font-size: 1.7rem; + } +} +/* html data-theme */ +html[data-theme=light] .sp_logo_uniplus { + background: url("../images/logo_uniplus_light.svg") no-repeat left center; + background-size: cover; +} +html[data-theme=light] .gnb ul li a { + color: var(--more-visible-wh_60-to-100); +} +html[data-theme=light] .gnb ul li a.on, html[data-theme=light] .gnb ul li a:hover, html[data-theme=light] .gnb ul li a:focus { + color: #0068E6; +} +html[data-theme=light] .guide_top h1 { + color: #000; +} +html[data-theme=light] button.mode img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] button.mode .img_on { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] button:hover:not(.hover):not(.legend):not(.selected):not(.disabled) .circle_grey28.popover img, html[data-theme=light] button:active .circle_grey28.popover img, html[data-theme=light] button.selected .circle_grey28.popover img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] button:hover:not(.hover):not(.legend):not(.selected):not(.disabled) .circle_grey28.popover .img_on, html[data-theme=light] button:active .circle_grey28.popover .img_on, html[data-theme=light] button.selected .circle_grey28.popover .img_on { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_srch28 span img:not(.on) { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_srch28.mode:active img { + filter: none; +} +html[data-theme=light] .btn_srch28:active:not(.selected) span img:not(.on) { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_srch28.on span img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_floating .put_drop img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_floating .put_see img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_floating .put_see .img_seeoff { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_floating .put_see .img_see { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_floating:hover:not(.disabled) .put_drop img, html[data-theme=light] .btn_floating.hover .put_drop img, html[data-theme=light] .btn_floating.selected .put_drop img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_floating:hover:not(.disabled) .put_see img, html[data-theme=light] .btn_floating.hover .put_see img, html[data-theme=light] .btn_floating.selected .put_see img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_drop .put_drop .img_drop { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_drop .put_see img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_drop.hover p img, html[data-theme=light] .btn_drop.selected p img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_drop.hover img, html[data-theme=light] .btn_drop.selected img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_drop .put_see.off .img_see { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_drop .put_see.off .img_see_off { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_arrow_circle img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_arrow_circle.selected img, html[data-theme=light] .btn_arrow_circle:hover:not(.disabled) img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_arrow_circle.line img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_arrow_circle.line.selected img, html[data-theme=light] .btn_arrow_circle.line:hover:not(.disabled) img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_arrow_l img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_arrow_l.disabled img { + opacity: 0.3; + filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%); +} +html[data-theme=light] .btn_arrow img { + filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%); +} +html[data-theme=light] .btn_arrow.hover img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_arrow.disabled img { + opacity: 0.3; + filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%); +} +html[data-theme=light] .btn_arrow_s img { + filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(150deg) brightness(101%) contrast(102%); + opacity: 0.6; +} +html[data-theme=light] .arrow_box img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_secondary img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_primary.disabled img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); + opacity: 0.6; +} +html[data-theme=light] .btn_toggle_icon :not(.map) span img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_toggle_icon :not(.map) span.circle_grey32 img, html[data-theme=light] .btn_toggle_icon :not(.map) .circle_grey28.popover img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map) span .circle_grey28.icon .img_on { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map):hover span .circle_grey28.popover img, html[data-theme=light] .btn_toggle_icon :not(.map).active span .circle_grey28.popover img, html[data-theme=light] .btn_toggle_icon :not(.map):focus span .circle_grey28.popover img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map):hover span .circle_grey28.popover .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).active span .circle_grey28.popover .img_on, html[data-theme=light] .btn_toggle_icon :not(.map):focus span .circle_grey28.popover .img_on { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map):hover img, html[data-theme=light] .btn_toggle_icon :not(.map).active img, html[data-theme=light] .btn_toggle_icon :not(.map):focus img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map) .circle_grey28 .img_on { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map) span .circle_grey28 .icon .img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey32 img, html[data-theme=light] .btn_toggle_icon :not(.map).legend .circle_grey28.popover img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover.selected img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:hover:not(.legend) img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:focus img, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:active img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover.selected .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:hover:not(.legend) .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:focus .img_on, html[data-theme=light] .btn_toggle_icon :not(.map).legend span.circle_grey28.popover:active .img_on { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon .circle_grey28.icon .img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_toggle_icon .circle_grey28.icon .img_on { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon .circle_grey32.line .img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_toggle_icon .circle_grey32.line .img_on { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_toggle_icon.selected .img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_toggle_icon.selected .img_on { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .btn_file img, html[data-theme=light] .preview_box img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .circle32.icon img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .icon_ffb img, +html[data-theme=light] .btn_icon img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .icon_ffb.selected img, html[data-theme=light] .icon_ffb:hover img, html[data-theme=light] .icon_ffb:active img, html[data-theme=light] .icon_ffb:focus img, +html[data-theme=light] .btn_icon.selected img, +html[data-theme=light] .btn_icon:hover img, +html[data-theme=light] .btn_icon:active img, +html[data-theme=light] .btn_icon:focus img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .arr_up img, html[data-theme=light] .arr_right img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .diagon_cont { + filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%); +} +html[data-theme=light] .datepicker { + background-image: url(../images/calendar_gray_24.svg); +} +html[data-theme=light] .datepicker:focus, html[data-theme=light] .datepicker.on { + background-image: url(../images/calendar_blue_24.svg); +} +html[data-theme=light] .accordion_block div button img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .accordion_block.accord_select .accordion_title.on img, html[data-theme=light] .accordion_block.accord_select .accordion_title.hover img, html[data-theme=light] .accordion_block.accord_select .accordion_title:hover img, html[data-theme=light] .accordion_block.accord_select .accordion_title:focus img, html[data-theme=light] .accordion_block.accord_select .accordion_title.selected img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_pagination img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .accordion_title div img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .accordion_title div.on img { + filter: brightness(0) saturate(100%) invert(25%) sepia(93%) saturate(1829%) hue-rotate(200deg) brightness(98%) contrast(107%); +} +html[data-theme=light] .toggle img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .toggle.on img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .popover_close img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .tree_button button img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .mark_trig_down12 { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); + background: url("../images/triangle_down12.svg") no-repeat center center; + background-size: contain; +} +html[data-theme=light] .sp_search24 { + background: url("../images/search_fff_24_light.svg") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .sp_download20 { + background: url("../images/icon_download_20_light.svg") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .sp_cctv20 { + background: url("../images/icon_camera_20_light.svg") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .btn_toggle_icon:hover:not(.legend) .sp_cctv20, html[data-theme=light] .btn_toggle_icon:focus .sp_cctv20, html[data-theme=light] .btn_toggle_icon.selected .sp_cctv20 { + background: url("../images/icon_camera_sky_20_light.svg") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .sp_x20 { + background: url("../images/icon_x_20_light.svg") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .sp_layer24 { + background: url("../images/layer_fff_24_light.svg") no-repeat center center; + background-size: cover; + opacity: 1 !important; +} +html[data-theme=light] .icon_ffb:hover .sp_layer24, html[data-theme=light] .icon_ffb.selected .sp_layer24 { + background: url("../images/layer_sky_24_light.svg") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .checkbox_type:not(.login) input[type=checkbox]:checked + label:after { + background: url(../images/checkbox_accordion_20.svg) center no-repeat; +} +html[data-theme=light] .card_box.dark { + background: var(--white-w_6); +} +html[data-theme=light] .photo_circle img { + filter: brightness(0) saturate(100%) invert(70%) sepia(34%) saturate(0%) hue-rotate(73deg) brightness(100%) contrast(97%); +} +html[data-theme=light] .tree_button.check button img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .btn_notification img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .profile_box { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .action_prev, html[data-theme=light] .action_next { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .stepper_arrow img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .play_circle img { + content: url("../images/play_circle_light_20.svg"); +} +html[data-theme=light] .play_btn img, html[data-theme=light] .playbar_current img, html[data-theme=light] .pagination_btn img, html[data-theme=light] .pg_prev img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .pause_btn img, html[data-theme=light] .again_btn img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .selectbox_arrow img, html[data-theme=light] .selectbox img, html[data-theme=light] .selectboxSample img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .bt_srch { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .logo_hd_uniplus { + content: url("../images/gnb_logo_light.svg"); +} +html[data-theme=light] .light_none img { + display: none; +} +html[data-theme=light] .lnb_popup_title_bg button img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .btn_fnb_search img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .put_delete img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .selector { + background-image: url("../images/arrow_down_gray_16.svg"); +} +html[data-theme=light] .selector.sm.color { + background-image: url(../images/arrow_down_light_16.svg); + background-repeat: no-repeat; + background-position: 93% 42%; + background-size: 1rem 1rem; +} +html[data-theme=light] .lnb_box img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .arrival_car img { + content: url("../images/marker_arrival_car_selected_100.svg"); +} +html[data-theme=light] .arrival_marker img { + content: url("../images/marker_arrival_area_selected.svg"); +} +html[data-theme=light] .map_frame img { + content: url("../images/map_frame_light.svg"); +} +html[data-theme=light] .eastside, html[data-theme=light] .westside, html[data-theme=light] .southside, html[data-theme=light] .northside { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .mapcontrol_btn { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .polygon.black img { + content: url("../images/Polygon_black_light.svg"); +} +html[data-theme=light] .polygon.blue img { + content: url("../images/Polygon_blue_light.svg"); +} +html[data-theme=light] .polygon.purple img { + content: url("../images/Polygon_purple_light.svg"); +} +html[data-theme=light] .polygon.green img { + content: url("../images/Polygon_green_light.svg"); +} +html[data-theme=light] .polygon.yellow img { + content: url("../images/Polygon_yellow_light.svg"); +} +html[data-theme=light] .pass_road img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .light_conceal { + visibility: hidden; +} +html[data-theme=light] .marker.cctv .img_selected { + content: url("../images/cctv_light_selected_48.svg"); +} +html[data-theme=light] .marker.weather .img_selected { + content: url("../images/weather_center_light_selected_48.svg"); +} +html[data-theme=light] .marker.bus .img_selected { + content: url("../images/bus_light_selected_48.svg"); +} +html[data-theme=light] .marker.depart .img_selected { + content: url("../images/depart_light_selected_48.svg"); +} +html[data-theme=light] .park_sign.danger.on { + background: url("../images/park_danger_light_on.svg") no-repeat center center; +} +html[data-theme=light] .put_check img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .time_mark20 { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .row_type2 .tac img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .ic_artff { + background: url("../images/arr_traff_light_16.svg") no-repeat center center; +} +html[data-theme=light] .pg_prev img, html[data-theme=light] .pg_next img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .sign_tri2.jam { + background: url(../images/sign_jam_light_28.svg) no-repeat center center; + background-size: contain; +} +html[data-theme=light] .sign_tri2.ambulace { + background: url(../images/ambulance_light.svg) no-repeat center center; + background-size: contain; +} +html[data-theme=light] .pos_rel.lightmode { + opacity: 0; +} +html[data-theme=light] .popup_close img { + filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); +} +html[data-theme=light] .wrput.read_success { + display: none; +} +html[data-theme=light] .circle_g32.pencil img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .upload_btn img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .main_contents { + width: 100%; + height: 100%; + background-size: cover; + background: url("../images/background_light_img.png") no-repeat center center; +} +html[data-theme=light] .main_contents.ver2 { + background: url("../images/background_ver2.png") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .main_contents.ver3 { + background: url("../images/background_ver3.png") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .main_contents.ver4 { + background: url("../images/background_img.png") no-repeat center center; + background-size: cover; +} +html[data-theme=light] .main_contents.login { + background: url("../images/login_background_light.png") no-repeat; +} +html[data-theme=light] .main_contents.error { + background: url("../images/error_background_light.png") no-repeat center center; +} +html[data-theme=light] .main_contents.error2 { + background: url("../images/error2_background_light.svg") no-repeat center bottom; + background-size: contain; +} +html[data-theme=light] .main_traffic img { + content: url("../images/main_traffic_light.svg") no-repeat; +} +html[data-theme=light] .signal_body { + background-image: url("../images/signal_body_light.png"); +} +html[data-theme=light] .img_off.marker { + content: url("../images/car_accident_light_56.svg"); +} +html[data-theme=light] .marker_img_selected { + content: url("../images/car_accident_selected_light_56.svg"); +} +html[data-theme=light] .arrow img { + filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); +} +html[data-theme=light] .arrow_right_2line img { + filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); +} +html[data-theme=light] .chart_cont.record { + filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%); +} +html[data-theme=light] .logo_login { + content: url("../images/login_logo_light.svg"); +} +html[data-theme=light] .wrput.read_success { + display: none; +} +html[data-theme=light] .light_none { + display: none; +} +html[data-theme=light] .light_hidden { + visibility: hidden; +} +html[data-theme=light] .grey_box.login { + border: 0.063rem solid rgba(255, 255, 255, 0.3); + background: var(--bg_01_80); +} +html[data-theme=light] .grey_box.login p { + background: rgba(0, 0, 0, 0.2); +} +html[data-theme=light] .indicator { + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); +} + +/* html data-theme End */ \ No newline at end of file diff --git a/assets/css/layout.scss b/assets/css/layout.scss new file mode 100644 index 0000000..6090ef5 --- /dev/null +++ b/assets/css/layout.scss @@ -0,0 +1,1709 @@ +/*가이드에서만 쓰이는 레이아웃 스타일*/ + +@charset "utf-8"; +@import '_mixin.scss'; + +:root{ + --bg_02: #04091A; + --bg_02_template: #050A1F; + --bg_01:#0A0F24; + --background-bg_01:#0A0F24; + --bg_01_40: #{$bg_default04}; + --bg_02_60: rgba(4, 9, 26, 0.60); + --primary-pri_100: #{$ui_sky}; + --primary-pri_80: #{$ui_sky80}; + --primary-pri_60: #{$ui_sky60}; + --primary-pri_50: #{$ui_sky50}; + --primary-pri_40: #{$ui_sky40}; + --primary-pri_30: #{$ui_sky30}; + --primary-pri_20: #{$ui_sky20}; + --primary-pri_12: #{$ui_sky12}; + --primary-pri_12-to-bk: #{$ui_sky12}; + --primary-pri_06: #{$ui_sky06}; + --primary-pri_6: rgba(39, 212, 255, 0.06); + --white-w_100: #{$fc_white}; + --white-w_100-sec: #{$fc_white}; + --white-w_87: #{$bg_grey87}; + --white-w_87-sec: #{$bg_grey87}; + --white-w_60: #{$bg_grey60}; + --white-w_40: #{$bg_grey40}; + --white-w_40-sec: #{$bg_grey40}; + --white-w_30: #{$bg_grey30}; + --white-w_20: #{$bg_grey20}; + --white-w_16: #{$bg_grey16}; + --white-w_12: #{$bg_grey12}; + --tab-btn_default: #{$ui_blue}; + --btn-btn_default: #{$ui_blue}; + --btn-btn_hover: #{$ui_blue_hover}; + --btn-btn_selected: #{$ui_blue_more}; + --box1_border:rgba(39, 212, 255, 0.4); + --title-color: #{$ui_sky}; + --bg_01_80: rgba(11, 17, 41, 0.8); + --line-wh_12-to-40: #{$bg_grey12}; + --line-wh_20-to-100: #{$bg_grey20}; + --line-wh_30-to-60: #{$bg_grey30}; + --line-wh_12-to-100: #{$bg_grey12}; + --line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40); + --line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40); + --icon-pri_20-to-100: rgba(34, 212, 255, 0.20); + --more-bright-wh_16-to-6: #{$bg_grey16}; + --more-bright-wh_12-to-6: #{$bg_grey12}; + --more-visible-wh_20-to-12: #{$bg_grey20}; + --more-visible-wh_6-to-100: #{$bg_grey06}; + --more-visible-wh_6-to-60: #{$bg_grey06}; + --more-visible-wh_6-to-bk: #{$bg_grey06}; + --more-visible-wh_60-to-12: #{$bg_grey60}; + --more-visible-wh_60-to-100: #{$bg_grey60}; + --more-visible-wh_12-to-6: #{$bg_grey12}; + --more-visible-wh_16-to-6: #{$bg_grey16}; + --more-visible-wh_20-to-12: #{$bg_grey20}; + --primary-to-grayscale-to-bk: #{$ui_sky}; + --more-bright-wh_6-to-60: #{$bg_grey06}; + --white-w_6: #{$bg_grey06}; + --line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40); + --etc-bg: #04091A; + --etc-popup_tit: rgba(39, 212, 255, 0.60); + --hero-notification_01: #{$bg_black00}; + --hero-notification_02: #{$bg_black40}; + --hero-notification_03: #{$bg_black40}; + --hero-notification-border-top: rgba(39, 212, 255, 0.00); + --hero-notification-border-bottom: rgba(39, 212, 255, 0.00); + --hero-border : rgba(39, 212, 255, 1); + --background-blur_0260: rgba(56, 61, 82, 0.60); + --point-error: #D60000; + --point-error-10: rgba(219, 0, 0, 0.08); + --blur_02_60: rgba(55, 61, 82, 0.60); + --bg-blur_02_60: rgba(55, 61, 82, 0.60); + --grade-chart-gco-01:#{$fc_yellow}; + --radio-default: #{$bg_grey60}; + --control-disabled: #{bg_grey10}; + --background-legend: rgba(74, 78, 102, 0.8); + --icon-icon-selected: rgba(39, 212, 255, 0.40); + --group-icon-selected: rgba(39, 212, 255, 0.40); + --map-ver2-hover: rgba(39, 212, 255, 0.40); + --background-blur_02_60: rgba(55, 61, 82, 0.60); + --background-blur_01_20: rgba(162, 164, 184, 0.20); + --navigation-bg: #1F2333; + --etc-FNB: rgba(39, 212, 255, 0.12); + --black-bk_100: #{$bg_black00}; + --etc-b_text: #338FFF; + --etc-b_text2: #338FFF; + + // KISA + --PRI: #84C01D; + --bg_body: #030914; + +} +:root[data-theme=light] { + --bg_02: #{$fc_white}; + --bg_02_template: #DCDDE0; + --bg_01: #F5F6FA; + --background-bg_01: #{$fc_white}; + --bg_01_40: #F3F5FD; + --bg_02_60: rgba(245, 247, 255, 0.90); + --primary-pri_100: #{$ui_blue_more}; + --primary-pri_80: #{$ui_blue_more80}; + --primary-pri_60: #{$ui_blue_more60}; + --primary-pri_50: #{$ui_blue_more50}; + --primary-pri_40: #{$ui_blue_more40}; + --primary-pri_30: #{$ui_blue_more30}; + --primary-pri_20: #{$ui_blue_more20}; + --primary-pri_12: #{$ui_blue_more12}; + --primary-pri_12-to-bk: #{$bg_black00}; + --primary-pri_06: #{$ui_blue_more06}; + --primary-pri_6: rgba(0, 104, 230, 0.06); + --white-w_100: #{$fc_white}; + --white-w_100-sec: #{$bg_black00}; + --white-w_87: #{$bg_black87}; + --white-w_87-sec: #{$bg_black00}; + --white-w_60: #{$bg_black60}; + --white-w_40: #{$bg_black40}; + --white-w_40-sec: #{$bg_grey40}; + --white-w_30: #{$bg_black30}; + --white-w_20: #{$bg_black20}; + --white-w_16: #{$bg_black16}; + --white-w_12: #{$bg_black12}; + --tab-btn_default: #{$ui_blue}; + --btn-btn_default: #{$ui_blue_hover}; + --btn-btn_hover: #{$ui_blue_more}; + --btn-btn_selected: #{$fc_normal}; + --box1_border: #{$fc_white}; + --title-color: #{$ui_blue_more}; + --bg_01_80: rgba(245, 246, 250, 0.90); + --line-wh_12-to-40: #{$bg_grey40}; + --line-wh_20-to-100: #{$fc_white}; + --line-wh_30-to-60: #{$bg_grey60}; + --line-wh_12-to-100: #{$fc_white}; + --line-pri_40-to-wh_40: #{$bg_grey40}; + --line-pri_40-to-bk_40: #{$bg_black40}; + --icon-pri_20-to-100 : #0067E6; + --more-bright-wh_16-to-6: #{$bg_black06}; + --more-bright-wh_12-to-6: #{$bg_black06}; + --more-visible-wh_20-to-12: #{$bg_black12}; + --more-visible-wh_6-to-100: #{$fc_white}; + --more-visible-wh_6-to-60: #{$bg_grey60}; + --more-visible-wh_6-to-bk: #{$bg_black00}; + --more-visible-wh_60-to-12: #{$bg_black12}; + --more-visible-wh_60-to-100: #{$bg_black00}; + --more-visible-wh_12-to-6: #{$bg_black06}; + --more-visible-wh_16-to-6: #{$bg_black06}; + --more-visible-wh_20-to-12: #{$bg_black12}; + --primary-to-grayscale-to-bk: #{$bg_black00}; + --more-bright-wh_6-to-60 : #{$bg_grey60}; + --white-w_6: #{$bg_black06}; + --line-pri_40-to-wh_100: #{$fc_white}; + --etc-bg: #{$fc_white}; + --etc-popup_tit: rgba(0, 104, 230, 0.80); + --hero-notification_01: #{$bg_grey00}; + --hero-notification_02: #{$bg_grey60}; + --hero-notification_03: #{$bg_grey80}; + --hero-notification-border-top: rgba(0, 104, 230, 0.00); + --hero-notification-border-bottom: rgba(0, 104, 230, 0.00); + --hero-border: rgba(0, 104, 230, 0.80); + --background-blur_0260: rgba(56, 61, 82, 0.60); + --point-error: #D60000; + --point-error-10: rgba(219, 0, 0, 0.08); + --blur_02_60: #{$bg_grey90}; + --bg-blur_02_60: rgba(55, 61, 82, 0.60); + --grade-chart-gco-01: #FC5C34; + --radio-default: #{$bg_black60}; + --control-disabled: #{bg_grey10}; + --icon-icon-selected: #{$fc_white}; + --group-icon-selected: rgba(51, 143, 255, 0.40); + --map-ver2-hover: #{$fc_normal_more40}; + --background-blur_02_60: rgba(55, 61, 82, 0.60); + --background-blur_01_20: rgba(245, 246, 250, 0.90); + --navigation-bg: #E1E2E5; + --etc-FNB:rgba(245, 246, 250, 0.90); + --black-bk_100: #{$fc_white}; + --etc-b_text: #139DF2; + + // KISA + --PRI: #87C718; + --bg_body: #030914; + +} +/*mode button*/ +.lightmode > .inner{ + position: relative; + display: inline-flex; + padding: 0.313rem; + border-radius: 1.5em; + background-color: rgb(237,237,237, 0.3); + &.template { + padding: unset; + } +} +html[data-theme=light] .lightmode > .inner{ + background-color: rgba(0,0,0,0.25); +} +.lightmode label { + cursor: pointer; +} +.lightmode label:first-of-type{ + padding: 0.313rem 0.313rem 0.313rem 0.625rem; + border-radius: 50% 0 0 50%; +} +.lightmode label:last-of-type{ + padding: 0.313rem 0.625rem 0.313rem 0.313rem; + border-radius: 0 50% 50% 0; +} +.lightmode i{ + font-size: 1.2em; + color: #aaa; +} +.lightmode input[type=radio]{ + display: none; +} +.lightmode input[type=radio]:checked + label > i { + color: rgba(135, 199, 24, 1); + transition: all 0.35s ease-in-out; +} +/**/ + +/*Contents*/ +.guide_back { + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + z-index: 0; +} +.guide_wrap { + background: var(--etc-bg); + color: var(--white-w_87); + position: relative; + width: 100%; + min-height: 100%; + overflow: hidden; + padding: 1.875rem 0; + &.grey{ + background-color: #1A1D29; + } + &.two_line{ + padding: 3.75rem 0; + } + &.cards{ + background: var(--bg_01); + } + &.navigation{ + background: var(--navigation-bg); + } +} +.guide_center{ + width: 77.5rem; + margin: 0 auto; + padding: 1.25rem; + &.width1720 { + width: 107.5rem; + } +} +.guide_top{ + @include dflx_ae_jbet; + column-gap: 1rem; + width: 100%; + height: 4.75rem; + padding: 0 0 1rem; + border-bottom: 0.063rem solid var(--white-w_30); + h1{ + @include fs_40_bold; + color: #fff; + } +} +html[data-theme=light] .guide_top{ + h1{ + color: #000; + } +} +.Gr_contents{ + width: 100%; + margin: 2.5rem 0 4.375rem; +} +.comp_top{ + @include dflx_ae_jbet; + column-gap: 1rem; + width: 100%; + padding: 0 0 1.875rem; + h2{ + @include fs_24_bold; + color: var(--white-w_87); + } +} +.comp_dl{ + width: 100%; + display: flex; + column-gap: 0.75rem; + margin: 0 0 1.5rem; +} +.comp_dt{ + @include fs_16_medium; + width: 6.25rem; + padding: 1.25rem 0 0 0; +} +.comp_dd{ + flex: 1; +} +.compline{ + @include dflx_ac; + flex-wrap: wrap; + margin: 0.75rem 0; + column-gap: 0.5rem; + &.box{ + background: var(--white-w_6); + } +} +.comp_size{ + @include fs_12_regular; + color: $bg_grey60; + width: 2.5rem; + text-align: center; +} +.components{ + @include dflx_ac; + flex: 1; + gap: 0.75rem; +} + +.flex_wrap {flex-wrap: wrap !important} +.flex_one{flex:1 !important} + +.usage_box{ + width: 53rem; + height: 46.688rem; + padding: 2.5rem; + border-radius: 0.5rem; + background: var(--white-w_6); +} +.card_box{ + height: 100%; + padding: 0.625rem; + background: var(--white-w_6); + &.dark { + background-color: transparent; + } +} +.black_box{ + width: 33.75rem; + padding: 1.25em; + background: var(--white-w_6); +} + +/*template*/ +footer { + position: fixed; + width: 100%; + bottom: 0; + z-index: 200; +} +.main_back { + position: absolute; + width: 100%; + height: 100%; + overflow: hidden; +} +.main_wrap { + position: relative; + width: 100%; + height: 100%; + background: var(--bg_02_template); +} +.main_contents { + width: 100%; + height: 100%; + position: relative; + background: url("../images/background_img.png"); + background-repeat: no-repeat; + background-size : cover !important; +} +.marker_wrap { + position: absolute; +} +.notification_box { + &.main { + position: absolute; + left: 50%; + top: 3.5rem; + transform: translateX(-50%); + z-index: 80; + } + &.hide { + .notification_bg { + min-height: 0; + height: 0; + border-width: 0.063rem 0 0 0; + } + .btn_notification { + transform: rotate(180deg); + } + } +} +.board_line { + &.signal { + &.right { + position: absolute; + display: flex; + top: 3.5rem; + right: 1.25rem; + z-index: 100; + } + } +} +.box_line { + &.left { + position: absolute; + top: 3.5rem; + left: 1.25rem; + z-index: 100; + } + &.right { + position: absolute; + top: 3.5rem; + right: 1.25rem; + z-index: 100; + } +} +.infowindow_box { + &.main { + top: auto; + bottom: calc(100% + 0.125rem) !important; + left: 50%; + transform: translate(-50%, 0); + position: absolute; + background: var(--bg_01); + border: 0.063rem solid var(--line-pri_40-to-wh_100) !important; + .infowindow_title { + color: var(--white-w_87-sec); + } + } +} +.label_tag { + &.main_label { + background: var(--white-w_30) + } + &.main_info { + background: var(--white-w_30) + } +} +// scroll +.scroll { + &.sc_y { + &.table { + height: 8.25rem; + padding: 0; + } + &.signal { + padding: 0; + margin-right: 0.5rem; + } + } +} +// accordion +.accordion_paragraph { + &.signal { + padding: 0 0.75rem 1.25rem 1.25rem; + height: 16.75rem; + } +} +.footer_in { + @include dflx_as_jbet; + width: 100%; + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-bottom: 1.25rem; +} +// table +.table_box { + &.signal { + tr { + &.selected, &:focus, &.hover { + background: var(--primary-pri_12); + } + } + th { + position: static; + //height: 2.25rem; + height: 2rem; + } + th, td:not(.disable), td:not(.disabled) { + border-right: 0.063rem solid rgba(255, 255, 255, 0.12); + &:last-child {border-right: 0;} + } + td { + height: 1.75rem; + //height: 2.25rem; + //border-top: 0.188rem solid $bg_default !important; + border-top: 0.125rem solid var(--etc-bg) !important; + p { + text-align: center !important; + cursor: pointer; + } + } + } +} +.user_table { + @include fs_13_regular; + color: var(--white-w_87-sec); + width: 100%; + border-collapse:separate; + border-spacing: 0 0.125rem; + tr { + //background: var(--more-visible-wh_16-to-6); + &.selected, + &:hover, &:focus, &.hover { + //background: rgba(39, 212, 255, 0.2); + background: var(--primary-pri_12); + } + } + th { + position: relative; + z-index: 1; + top: 0; + height: 2.25rem; + background: $bg_grey16; + background: var(--more-visible-wh_6-to-100); + background: var(--more-visible-wh_16-to-6); + //background: #2c313f; + font-weight: 500; + } + th, td { + border-right: 0.063rem solid var(--white-w_12); + &:last-child {border-right: 0;} + } + td { + height: 2.25rem; + border-top: 0.188rem solid transparent !important; + } + td.on { + background: rgba(39, 212, 255, 0.2); + } + .row_type1 { + background: $bg_grey16; + } + // 표 색상 + .row_type2 { + background: var(--more-visible-wh_6-to-100); + } + .row_error { + background: rgba(219, 0, 0, 0.08); + color: #FF1F55; + } +} +.arrow { + &.left {transform: rotate(180deg);} + &.up {transform: rotate(270deg);} + &.down {transform: rotate(90deg);} +} +.grey_box { + @include dflx; + @include backFilter; + top: 33%; + left: 30%; + &.login { + z-index: 0; + width: 44.563rem; + padding: 3rem; + border-radius: 0.125rem; + border: 0.063rem solid $bg_grey12; + background: rgba(162, 164, 184, 0.20); + backdrop-filter: blur(3.75rem); + p { + position: relative; + z-index: 200; + width: 0.063rem; + background: rgba(255, 255, 255, 0.20); + align-self: stretch; + } + } + &.error { + display: block; + z-index: 0; + width: 44.563rem; + padding: 5rem; + border-radius: 0.125rem; + border: 0.063rem solid rgba(255, 255, 255, 0.30); + //background: var(--bg_01_80); + background: var(--background-blur_01_20); + backdrop-filter: blur(3.75rem); + opacity: 1; + } +} +.error_box { + @include dflx; + @include backFilter; + position: absolute; + padding: 3rem; + top: 33%; + left: 30%; + z-index: 0; + width: 44.563rem; + height: 18.25rem; + border-radius: 0.125rem; + border: 0.063rem solid rgba(255, 255, 255, 0.21); + background: rgba(162, 164, 184, 0.20); + backdrop-filter: blur(3.75rem); +} +.marker_main { + position: absolute; + bottom: 40%; + left: 50%; +} +.indicator{ + &.main { + padding: 1.25rem 0.6rem 1.25rem 1.25rem; + } + &.signal { + padding: 0; + } +} +.indi_conts { + &.del {display: none} + &.signal {margin: 0} +} +.tmbox_text { + @include fs_14_medium; + line-height: 1.3; + color: var(--white-w_87-sec); +} +.tmbox{ + &.signal { + background-color: transparent; + padding: 0; + margin-bottom: 1.25rem; + } +} +// 프로필 +.hd_profile{ + position: relative; + width: 1.875rem; + height: 1.25rem; + .member_popover{ + display: none; + } + &.profile_open{ + .member_popover, .member_toggle{ + display: block; + } + .btn_profile .comma_under8 { + opacity: 1; + transform: rotate(180deg); + } + .profile20{ + opacity: 1; + } + } +} +// 마커 +.marker_img_selected { + display: none; +} +.marker_main { + .tooltip_parents, .infowindow_box.main.on{ + display: none; + } + &.marker_hide { + .tooltip_parents, .infowindow_box.main.on{ + display: block; + } + .img_off {display: none !important;} + .marker_img_selected {display: block !important;} + } +} +.fab_wrap{ + position: absolute; + top: 0%; + left: 108%; + margin-left: 0.5rem; +} +// 범례 +.popover_box { + &.main { + position: absolute; + display: none; + bottom: 3rem; + left: -2.5rem; + z-index: 100; + &.legend { + display: block; + } + &.pop { + display: block; + } + &.pop_hide { + display: none; + } + } +} +// 신호최적화 +.signal_board { + width: 100%; + height: 100%; +} +.signal_content { + @include dflx_ac_jcent; + column-gap: 1rem; + width: 100%; + height: 100%; + background: var(--bg_02_template); +} +.signal_body { + position: relative; + width: 100%; + height: 100%; + background-image: url("../images/signal_body_img.png"); + background-repeat: no-repeat; + background-size : cover !important; +} +.accordion_box { + position: absolute; + margin-top: 0.5rem; +} +.indi_top { + &.signal { + height: 3.5rem; + padding: 1.25rem 1rem 1.25rem; + } +} +.signal_dl { + @include dflx_ac; + //width: 100%; + margin: 0.5rem 0; + &:last-child { + margin-bottom: 0; + } + dt { + @include fs_13_light; + @include dflx_jbet; + width: 4rem; + padding: 0 1rem 0 0; + color: var(--white-w_87-sec); + } + dd { + @include dflx_ac_jbet; + flex: 1; + column-gap: 0.25rem; + .wrput{ + width: 100%; + } + .ch_radio:last-child{ + padding: 0; + } + } + &.check { + margin: 1rem 0; + } +} +// accordion +.accordion_block { + // 포인트 + &.signal { + @include backFilter; + .accordion_title:hover:not(.levle2), .hover.accordion_title, + .accordion_title:focus { + background: var(--primary-pri_20); + cursor: pointer; + } + .accordion_title { + background: var(--primary-pri_20); + &:hover:not(.disabled), + &:hover:not(.point.disabled), + &:focus:not(.disabled) { + background: var(--primary-pri_20); + } + } + .accordion_contents { + background: rgba(255, 255, 255, 0.06); + } + .accordion_contents.signal { + padding: unset; + } + } +} +// map label +.map_label_line { + @include dflx_ac_jcent; + position: absolute; + width: 100%; + bottom: 1.5rem; + padding: 0.125rem 0.75rem; +} +.map_label { + @include fs_20_bold; + width: auto; + padding: 0.125rem 0.75rem 0.25rem; + background-color: #0B1129; + color: #fff; +} +// 상황관리이력 +.record_wrap { + width: 100%; + height: 100%; + padding-top: 5rem; +} +.record_content { + width: 100%; + height: 100%; + padding: 1.25rem; + display: grid; + grid-auto-rows: 25.75rem auto; + row-gap: 1rem; +} +.record_box { + width: 100%; + height: 100%; + border: 0.063rem solid var(--line-pri_40-to-wh_40); + background: var(--bg_01_80); + box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); + backdrop-filter: blur(1.875rem); + padding: 0 1.25rem 1.25rem 1.25rem; +} +.record_title { + @include fs_16_bold; + width: 100%; + padding: 1.25rem 1rem 1rem 0; + color: var(--primary-to-grayscale-to-bk); +} +.record_box_content { + display: flex; + column-gap: 1rem; + width: 100%; + height: calc(100% - 3.25rem); +} +.record_grid { + display: grid; + grid-template-columns: 1fr 1fr 1fr 1fr 2fr 1.5fr; + grid-template-rows: 8.125rem auto; + column-gap: 1rem; + row-gap: 1rem; + width: 100%; + height: 100%; +} +.record_top { + display: grid; + grid-column-gap: 1rem; + width: 9rem; +} +.chart_cont_box { + height: 100%; + width: 9rem; +} +.diagon_cont_box { + display: grid; + grid-column-gap: 1rem; +} +.diagon_cont { + &.record { + width: 9rem; + height: 4.875rem; + } +} +.situation_box { + padding: 0.75rem; + border-radius: 0.125rem; + background: var(--more-visible-wh_6-to-100); + &.chart { + @include dflx_dcol_jbet; + grid-row: 1/3; + } + &.case1 { + grid-row: 1/2; + grid-column: 5/6; + } + &.case2 { + grid-row: 1/2; + grid-column: 6/7; + } + &.event { + display: grid; + grid-column: 5/7; + grid-template-columns: 1.5fr 1fr; + } + h4{ + @include fs_14_medium; + color: var(--white-w_87-sec); + } +} +.case_wrap { + @include dflx; + column-gap: 0.5rem; + width: 100%; + height: calc(100% - 1.125rem); +} +.case_box { + padding: 0.25rem; + border-radius: 0.125rem; + background: var(--white-w_6); + width: 100%; + .case_number { + @include dflx_ac_jcent; + font-weight: 700; + width: 100%; + height: calc(100% - 0.875rem); + color: var(--white-w_87); + } +} +.case_grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + column-gap: 0.5rem; + row-gap: 0.5rem; +} +.chart_box { + @include dflx_ac_jcent; + height: calc(100% - 0.875rem); + column-gap: 2.5rem; +} +.rate_content { + display: grid; + row-gap: 1rem; + height: calc(100% - 3.25rem); +} +.rate_box { + width: 100%; + height: 100%; + padding: 0.75rem; + border-radius: 0.125rem; + background: var(--more-visible-wh_6-to-100); +} +.ch_label{ + @include dflx_ac; + .word{ + @include fs_11_regular; + color: var(--white-w_87-sec); + margin: 0.25rem 0 0.25rem 0.25rem; + line-height: 1.1; + word-break: keep-all + } +} +.chart_cont{ + @include dflx_ac_jcent; + position: relative; + width: 9rem; + height: 4.891rem; + padding: 0.5rem; + overflow: hidden; + background: url(../images/bg_tract.svg) no-repeat left top; + background-size: 100% 100%; + .chart_tlt { + position: absolute; + left: 1.25rem; + top: 1.25rem; + margin-bottom: 0.5rem; + } + .chart_result{ + padding: 1rem 0 0; + } +} +.chart_tlt { + @include fs_14_medium; + color: $ui_sky; + &.cover { + width: 86%; + padding: 0.75rem 0 0 0.75rem; + background: url(../images/bg_tract_top.svg) no-repeat left top; + background-size: 100% auto; + } +} +.chart_result { + @include dflx_ae; + color: $ui_sky; + font-size: 1.5rem; + font-weight: 700; + column-gap: 0.375rem; + .unit{ + @include fs_14_regular; + line-height: 1.7; + } +} +// check box +.record_radio { + @include dflx_ac; + cursor: pointer; + .word { + color: var(--white-w_87-sec); + } + &.on { + .radio { + background-color: #fff; + border: 0.25rem solid #27d4ff; + } + .word { + color: var(--white-w_87-sec); + } + } + .radio { + display: inline-block; + width: 0.9375rem; + height: 0.9375rem; + background-color: rgba(255, 255, 255, 0.7); + border-radius: 100%; + margin: 0 0.5rem 0 0; + &.mini{ + width: 0.625rem; + height: 0.625rem; + border: 0.125rem solid #27d4ff; + margin: 0 0.375rem 0 0; + } + &.green {border: 0.125rem solid #16D9AB} + &.blue {border: 0.125rem solid #07F} + &.dark_blue {border: 0.125rem solid #0E44E5} + &.purple {border: 0.125rem solid #8972FF} + &.dark_purple {border: 0.125rem solid #6E3DFF} + } + .word { + @include fs_11_light; + } +} +// 사용자 관리 user +.user_wrap { + width: 100%; + height: 100%; + padding-top: 2.5rem; +} +.user_content { + display: flex; + column-gap: 1rem; + width: 100%; + height: 100%; + padding: 1.25rem; +} +.personal_box, .system_box { + @include backFilter; + width: 100%; + height: 100%; + border: 0.063rem solid var(--line-pri_40-to-wh_40); + background: var(--bg_01_80); + box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16); + width: 28.625rem; +} +.user_box { + @include backFilter; + width: 100%; + height: 100%; + padding: 1.25rem; + border: 0.063rem solid var(--line-pri_40-to-wh_40); + background: var(--bg_01_80); + box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16); + flex: 1; +} +.table_inner { + margin-top: 0.75rem; + width: 100%; + height: calc(100% - 2.625rem); +} +.title_box { + @include dflx_ac_jbet; + flex-wrap: wrap; +} +.user_title { + @include fs_16_bold; + color: var(--primary-to-grayscale-to-bk); + height: 1.5rem; +} +.user_btn { + height: 1.75rem; + padding: 0.5rem 0; + word-break: keep-all; +} +// error +.error_logo { + position: absolute; + top: -10%; + left: 50%; + transform: translate(-50%, 0); + z-index: 1; +} +// logo +.logo_login { + width: 12.5rem; +} +// 프로필 +.hd_profile { + position: relative; + width: 1.875rem; + height: 1.25rem; + .member_popover { + display: none; + } + &.profile_open { + .member_popover, .member_toggle { + display: block; + } + .btn_profile .comma_under8 { + opacity: 1; + transform: rotate(180deg); + } + .profile20{ + opacity: 1; + } + } +} +// login +.login_title { + color: var(--white-w_100-sec); +} +// font +.white_w_87 {color: var(--white-w_87) !important} +.white_w_bk {color: var(--white-w_87-sec) !important} +.white_ff_bk {color: var( --white-w_100-sec) !important} +// 반응형 +@media screen and (min-width: 2400px) { + body, html { + font-size: 1.2rem; + } + .indi_vert432{ + height: auto; + } +} + +@media screen and (min-width: 3800px) { + body, html { + font-size: 1.7rem; + } +} + +/* html data-theme */ +html[data-theme=light] { + header{ + // background: #F3F5FD; + // border-bottom: 0.063rem solid $bg_grey20; + } + .sp_logo_uniplus{ + background: url('../images/logo_uniplus_light.svg') no-repeat left center; + background-size: cover; + } + .gnb { + ul li a { + color: var(--more-visible-wh_60-to-100); + &.on, &:hover, &:focus { + color: $ui_blue_more; + } + } + } + .guide_top h1{color: #000;} + + //img filter + button{ + &.mode{ + img {@include filter_black} + .img_on {@include filter_blue} + } + &:hover:not(.hover):not(.legend):not(.selected):not(.disabled), &:active ,&.selected { + .circle_grey28.popover { + img {@include filter_white} + .img_on {@include filter_white} + } + } + } + .btn_srch28{ + span img:not(.on){@include filter_black} + &.mode{ + &:active{ + img{filter: none;} + } + } + &:active:not(.selected) { + span img:not(.on){@include filter_white} + } + } + .btn_srch28.on{ + span img {@include filter_white} + } + .btn_floating{ + .put_drop img {@include filter_black} + .put_see img {@include filter_blue} + .put_see .img_seeoff {@include filter_white} + .put_see { + .img_see{@include filter_blue} + } + &:hover:not(.disabled),&.hover,&.selected { + .put_drop img {@include filter_white} + .put_see img {@include filter_white} + } + } + .btn_drop { + .put_drop .img_drop {@include filter_black} + .put_see img {@include filter_black} + &.hover, &.selected{ + p { + img {@include filter_white} + } + img {@include filter_blue} + } + // split button + .put_see.off{ + .img_see {@include filter_black} + .img_see_off {@include filter_blue} + } + } + .btn_arrow_circle { + img {@include filter_black} + + &.selected, &:hover:not(.disabled){ + img {@include filter_black} + } + &.disabled{ + // img {@include filter_white} + } + } + .btn_arrow_circle.line { + img {@include filter_black} + &.selected,&:hover:not(.disabled){ + img {@include filter_blue} + } + } + .btn_arrow_l { + img {@include filter_blue} + &.disabled{ + img{ + opacity: 0.3; + @include filter_black01; + } + } + } + .btn_arrow{ + img {@include filter_black01} + &.hover{ + img {@include filter_blue} + } + &.disabled{ + img{ + opacity: 0.3; + @include filter_black01; + } + } + } + .btn_arrow_s { + img {@include filter_black01; + opacity: 0.6; + } + } + .arrow_box { + img {@include filter_black;} + } + .btn_secondary { + img { + @include filter_black; + } + } + .btn_primary.disabled { + img { + @include filter_black; + opacity: 0.6; + } + } + .btn_toggle_icon :not(.map) { + span img {@include filter_black} + span.circle_grey32, .circle_grey28.popover { + img {@include filter_white} + } + span .circle_grey28.icon { + .img_on {@include filter_white} + } + &:hover, &.active, &:focus { + span .circle_grey28.popover { + img{@include filter_white} + .img_on {@include filter_white} + } + img {@include filter_white} + } + .circle_grey28 { + .img_on {@include filter_white} + } + + span .circle_grey28 .icon { + .img {@include filter_white} + } + &.legend { + span.circle_grey32, .circle_grey28.popover { + img {@include filter_white} + } + span.circle_grey28.popover { + img{@include filter_white} + &.selected, &:hover:not(.legend), &:focus, &:active { + img {@include filter_white} + .img_on {@include filter_white} + } + } + } + } + // Icon Button + .btn_toggle_icon { + .circle_grey28.icon { + .img {@include filter_black} + .img_on {@include filter_white} + } + .circle_grey32.line { + .img {@include filter_black} + .img_on {@include filter_white} + } + &.selected { + .img {@include filter_black} + .img_on {@include filter_white} + } + } + .btn_file, .preview_box { + img{@include filter_black} + } + .circle32.icon { + img{@include filter_black} + } + .icon_ffb, + .btn_icon { + img {@include filter_black} + &.selected, &:hover, &:active, &:focus { + img {@include filter_blue} + } + } + .arr_up, .arr_right { + img {@include filter_black} + } + .diagon_cont {filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);} + .datepicker { + background-image: url(../images/calendar_gray_24.svg); + &:focus, &.on { + background-image: url(../images/calendar_blue_24.svg); + } + } + .accordion_block { + div { + button { + img {@include filter_black} + } + } + } + .accordion_block { + &.accord_select { + .accordion_title { + &.on, &.hover, &:hover, &:focus, &.selected { + img {@include filter_blue} + } + } + } + } + // pagination + .btn_pagination{ + img {@include filter_black} + } + .accordion_title { + div{ + img{@include filter_black;} + } + div.on{ + img{ + filter: brightness(0) saturate(100%) invert(25%) sepia(93%) saturate(1829%) hue-rotate(200deg) brightness(98%) contrast(107%); + } + } + } + .toggle { + img {@include filter_black} + &.on { + img {@include filter_blue} + } + } + .popover_close{ + img {@include filter_black} + } + .tree_button { + button { + img {@include filter_blue} + } + } + .mark_trig_down12 { + @include filter_black; + background: url('../images/triangle_down12.svg') no-repeat center center; + background-size: contain; + } + + // sp_icon + .sp_search24{ + background: url('../images/search_fff_24_light.svg') no-repeat center center; + background-size: cover; + } + .sp_download20{ + background: url('../images/icon_download_20_light.svg') no-repeat center center; + background-size: cover; + } + .sp_cctv20{ + background: url('../images/icon_camera_20_light.svg') no-repeat center center; + background-size: cover; + } + .btn_toggle_icon{ + &:hover:not(.legend), &:focus, &.selected{ + .sp_cctv20{ + background: url('../images/icon_camera_sky_20_light.svg') no-repeat center center; + background-size: cover; + } + } + } + .sp_x20{ + background: url('../images/icon_x_20_light.svg') no-repeat center center; + background-size: cover; + } + .sp_layer24{ + background: url('../images/layer_fff_24_light.svg') no-repeat center center; + background-size: cover; + opacity: 1 !important; + } + .icon_ffb{ + &:hover, &.selected{ + .sp_layer24{ + background: url('../images/layer_sky_24_light.svg') no-repeat center center; + background-size: cover; + } + } + } + .checkbox_type:not(.login) { + input[type=checkbox]:checked + label { + &:after + { + background: url(../images/checkbox_accordion_20.svg) center no-repeat; + } + } + } + .card_box{ + &.dark {background: var(--white-w_6);} + } + .photo_circle{ + img{ + filter: brightness(0) saturate(100%) invert(70%) sepia(34%) saturate(0%) hue-rotate(73deg) brightness(100%) contrast(97%); + } + } + .tree_button.check{ + button{ + img {@include filter_blue} + } + } + .btn_notification{ + img {@include filter_blue} + } + .profile_box { + @include filter_black + } + + //date picker + .action_prev, .action_next { + @include filter_black + } + .stepper_arrow{ + img{@include filter_black} + } + .play_circle{ + img{ + content: url("../images/play_circle_light_20.svg"); + } + } + .play_btn, .playbar_current, .pagination_btn, .pg_prev { + img {@include filter_blue} + } + .pause_btn, .again_btn { + img {@include filter_black} + } + // select arrow + .selectbox_arrow, .selectbox, .selectboxSample { + img {@include filter_black} + } + //table + .bt_srch{ + @include filter_black + } + // navigation + .logo_hd_uniplus{ + content: url("../images/gnb_logo_light.svg"); + } + .light_none{ + img{ + display: none; + } + } + .lnb_popup_title_bg { + button{ + img {@include filter_black} + } + } + .btn_fnb_search{ + img {@include filter_blue;} + } + .put_delete{ + img {@include filter_black} + } + .selector { + background-image: url("../images/arrow_down_gray_16.svg"); + &.sm { + &.color{ + background-image: url(../images/arrow_down_light_16.svg); + background-repeat: no-repeat; + background-position: 93% 42%; + background-size: 1rem 1rem; + } + } + } + .lnb_box{ + img{@include filter_black} + } + // map + .arrival_car { + img{ + content: url("../images/marker_arrival_car_selected_100.svg"); + } + } + .arrival_marker { + img{ + content: url("../images/marker_arrival_area_selected.svg"); + } + } + .map_frame{ + img{ + content: url("../images/map_frame_light.svg") + } + } + // 3d map + .eastside, .westside, .southside, .northside{@include filter_blue;} + .mapcontrol_btn {@include filter_blue;} + + // polygon + .polygon{ + &.black{ + img{ + content: url("../images/Polygon_black_light.svg"); + } + } + &.blue{ + img{ + content: url("../images/Polygon_blue_light.svg"); + } + } + &.purple{ + img{ + content: url("../images/Polygon_purple_light.svg"); + } + } + &.green{ + img{ + content: url("../images/Polygon_green_light.svg"); + } + } + &.yellow{ + img{ + content: url("../images/Polygon_yellow_light.svg"); + } + } + } + .pass_road{ + img{@include filter_blue} + } + .light_conceal { + visibility: hidden; + } + .marker.cctv { + .img_selected{ + content: url("../images/cctv_light_selected_48.svg"); + } + } + .marker.weather { + .img_selected{ + content: url("../images/weather_center_light_selected_48.svg"); + } + } + .marker.bus { + .img_selected{ + content: url("../images/bus_light_selected_48.svg"); + } + } + .marker.depart { + .img_selected{ + content: url("../images/depart_light_selected_48.svg"); + } + } + .park_sign.danger.on { + background: url("../images/park_danger_light_on.svg") no-repeat center center; + } + .put_check { + img {@include filter_black} + } + .time_mark20 {@include filter_black} + // table + .row_type2{ + .tac{img{@include filter_black}} + } + // card pattern + .ic_artff{ + background: url('../images/arr_traff_light_16.svg') no-repeat center center; + } + .pg_prev, .pg_next { + img{@include filter_blue} + } + .sign_tri2 { + &.jam { + background: url(../images/sign_jam_light_28.svg) no-repeat center center; + background-size: contain; + } + &.ambulace{ + background: url(../images/ambulance_light.svg) no-repeat center center; + background-size: contain; + } + } + // input + .pos_rel.lightmode{ + opacity: 0; + } + .popup_close{ + img{@include filter_white} + } + .wrput { + &.read_success { + display: none; + } + } + // card + .circle_g32.pencil{ + img {@include filter_black} + } + // upload + .upload_btn{ + img{@include filter_black;} + } + // template + .main_contents { + width: 100%; + height: 100%; + background-size : cover; + background: url("../images/background_light_img.png") no-repeat center center; + &.ver2 { + background: url("../images/background_ver2.png") no-repeat center center; + background-size : cover; + } + &.ver3 { + background: url("../images/background_ver3.png") no-repeat center center; + background-size : cover; + } + &.ver4 { + background: url("../images/background_img.png") no-repeat center center; + background-size : cover; + } + &.login { + background: url("../images/login_background_light.png") no-repeat; + } + &.error { + background: url("../images/error_background_light.png") no-repeat center center; + } + &.error2 { + background: url("../images/error2_background_light.svg") no-repeat center bottom; + background-size: contain; + } + } + .main_traffic { + img { + content: url("../images/main_traffic_light.svg") no-repeat; + } + } + .signal_body { + background-image: url("../images/signal_body_light.png"); + } + .img_off.marker { + content: url("../images/car_accident_light_56.svg"); + } + .marker_img_selected { + content: url("../images/car_accident_selected_light_56.svg"); + } + + // 신호최적화 + .arrow { + img {@include filter_black} + } + .arrow_right_2line { + img {@include filter_blue} + } + + // 상황관리이력 + .chart_cont.record {filter: brightness(0) saturate(100%) invert(23%) sepia(99%) saturate(2905%) hue-rotate(204deg) brightness(96%) contrast(101%);} + + // login + .logo_login { + content: url("../images/login_logo_light.svg"); + } + + // input + .wrput { + &.read_success{ + display: none; + } + } + // light모드 display none + .light_none { + display: none; + } + .light_hidden { + visibility: hidden; + } + + .grey_box.login{ + border: 0.063rem solid $bg_grey30; + background: var(--bg_01_80); + p{ + background: $bg_black20; + } + } + .indicator {box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16);} +} +/* html data-theme End */ \ No newline at end of file diff --git a/assets/css/reset.css b/assets/css/reset.css new file mode 100644 index 0000000..8c2a3ea --- /dev/null +++ b/assets/css/reset.css @@ -0,0 +1,20 @@ +*{box-sizing: border-box;} +body,html{font-size:1rem} +header, footer, main, article,blockquote,body,button,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,select,span,td,textarea,th,ul{margin:0;padding:0;font-family:'Spoqa Han Sans Neo', 'sans-serif';line-height:1;} +fieldset,img{border:0 none} +img{max-width: 100%;vertical-align: top} +dl,li,menu,ol,ul{list-style:none} +blockquote,q{quotes:none} +blockquote:after,blockquote:before,q:after,q:before{content:"";content:none} +button,input,select,textarea{vertical-align:middle;border:none; outline:none;background:0 0} +body{-webkit-text-size-adjust:none} +table{border-collapse:collapse;border-spacing:0;} +input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none} +a{color:#fff;text-decoration:none; cursor: pointer;} +a:active,a:hover{text-decoration:none} +address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:400} +.hidden_tag{display:inline-block;position:absolute;z-index:-1;width:1px;height:1px;overflow:hidden;border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%)} +body{min-height: 100vh; overflow-x:hidden;padding:0;margin:0;border:0;text-align:unset;} +ul{list-style:none;margin-top:0;margin-bottom:1rem;padding-left:2rem} +li,ul{list-style:none;margin:0;padding:0;border:0;font-size:100%;} +button{margin:0;padding:0;border:0;font-size:100%;cursor:pointer;background-color:transparent;line-height:1;word-break:keep-all;} \ No newline at end of file diff --git a/assets/fonts/Spoqa Han Sans Neo Bold.otf b/assets/fonts/Spoqa Han Sans Neo Bold.otf new file mode 100644 index 0000000..1ce57c0 Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Bold.otf differ diff --git a/assets/fonts/Spoqa Han Sans Neo Bold.woff2 b/assets/fonts/Spoqa Han Sans Neo Bold.woff2 new file mode 100644 index 0000000..be4ee5d Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Bold.woff2 differ diff --git a/assets/fonts/Spoqa Han Sans Neo Light.otf b/assets/fonts/Spoqa Han Sans Neo Light.otf new file mode 100644 index 0000000..f371b32 Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Light.otf differ diff --git a/assets/fonts/Spoqa Han Sans Neo Light.woff2 b/assets/fonts/Spoqa Han Sans Neo Light.woff2 new file mode 100644 index 0000000..b88db8d Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Light.woff2 differ diff --git a/assets/fonts/Spoqa Han Sans Neo Medium.otf b/assets/fonts/Spoqa Han Sans Neo Medium.otf new file mode 100644 index 0000000..86c39b7 Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Medium.otf differ diff --git a/assets/fonts/Spoqa Han Sans Neo Medium.woff2 b/assets/fonts/Spoqa Han Sans Neo Medium.woff2 new file mode 100644 index 0000000..7f1de07 Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Medium.woff2 differ diff --git a/assets/fonts/Spoqa Han Sans Neo Regular.otf b/assets/fonts/Spoqa Han Sans Neo Regular.otf new file mode 100644 index 0000000..d382efe Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Regular.otf differ diff --git a/assets/fonts/Spoqa Han Sans Neo Regular.woff2 b/assets/fonts/Spoqa Han Sans Neo Regular.woff2 new file mode 100644 index 0000000..b3ed06e Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Regular.woff2 differ diff --git a/assets/fonts/Spoqa Han Sans Neo Thin.otf b/assets/fonts/Spoqa Han Sans Neo Thin.otf new file mode 100644 index 0000000..b829aad Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Thin.otf differ diff --git a/assets/fonts/Spoqa Han Sans Neo Thin.woff2 b/assets/fonts/Spoqa Han Sans Neo Thin.woff2 new file mode 100644 index 0000000..c590c25 Binary files /dev/null and b/assets/fonts/Spoqa Han Sans Neo Thin.woff2 differ diff --git a/assets/fonts/SpoqaHanSansNeo-Bold.eot b/assets/fonts/SpoqaHanSansNeo-Bold.eot new file mode 100644 index 0000000..3656928 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Bold.eot differ diff --git a/assets/fonts/SpoqaHanSansNeo-Bold.ttf b/assets/fonts/SpoqaHanSansNeo-Bold.ttf new file mode 100644 index 0000000..bf7cae1 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Bold.ttf differ diff --git a/assets/fonts/SpoqaHanSansNeo-Bold.woff b/assets/fonts/SpoqaHanSansNeo-Bold.woff new file mode 100644 index 0000000..57f609e Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Bold.woff differ diff --git a/assets/fonts/SpoqaHanSansNeo-Light.eot b/assets/fonts/SpoqaHanSansNeo-Light.eot new file mode 100644 index 0000000..dc44800 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Light.eot differ diff --git a/assets/fonts/SpoqaHanSansNeo-Light.ttf b/assets/fonts/SpoqaHanSansNeo-Light.ttf new file mode 100644 index 0000000..15e6b7c Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Light.ttf differ diff --git a/assets/fonts/SpoqaHanSansNeo-Light.woff b/assets/fonts/SpoqaHanSansNeo-Light.woff new file mode 100644 index 0000000..c1d4589 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Light.woff differ diff --git a/assets/fonts/SpoqaHanSansNeo-Medium.eot b/assets/fonts/SpoqaHanSansNeo-Medium.eot new file mode 100644 index 0000000..474cb36 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Medium.eot differ diff --git a/assets/fonts/SpoqaHanSansNeo-Medium.ttf b/assets/fonts/SpoqaHanSansNeo-Medium.ttf new file mode 100644 index 0000000..2208350 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Medium.ttf differ diff --git a/assets/fonts/SpoqaHanSansNeo-Medium.woff b/assets/fonts/SpoqaHanSansNeo-Medium.woff new file mode 100644 index 0000000..344d783 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Medium.woff differ diff --git a/assets/fonts/SpoqaHanSansNeo-Regular.eot b/assets/fonts/SpoqaHanSansNeo-Regular.eot new file mode 100644 index 0000000..630775d Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Regular.eot differ diff --git a/assets/fonts/SpoqaHanSansNeo-Regular.ttf b/assets/fonts/SpoqaHanSansNeo-Regular.ttf new file mode 100644 index 0000000..64c4af7 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Regular.ttf differ diff --git a/assets/fonts/SpoqaHanSansNeo-Regular.woff b/assets/fonts/SpoqaHanSansNeo-Regular.woff new file mode 100644 index 0000000..1ddb277 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Regular.woff differ diff --git a/assets/fonts/SpoqaHanSansNeo-Thin.eot b/assets/fonts/SpoqaHanSansNeo-Thin.eot new file mode 100644 index 0000000..f9050b1 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Thin.eot differ diff --git a/assets/fonts/SpoqaHanSansNeo-Thin.ttf b/assets/fonts/SpoqaHanSansNeo-Thin.ttf new file mode 100644 index 0000000..2791258 Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Thin.ttf differ diff --git a/assets/fonts/SpoqaHanSansNeo-Thin.woff b/assets/fonts/SpoqaHanSansNeo-Thin.woff new file mode 100644 index 0000000..fdfcbad Binary files /dev/null and b/assets/fonts/SpoqaHanSansNeo-Thin.woff differ diff --git a/assets/js/air-datepicker.js b/assets/js/air-datepicker.js new file mode 100644 index 0000000..7d4a616 --- /dev/null +++ b/assets/js/air-datepicker.js @@ -0,0 +1,1800 @@ +!(function (e, t) { + "object" == typeof exports && "object" == typeof module + ? (module.exports = t()) + : "function" == typeof define && define.amd + ? define([], t) + : "object" == typeof exports + ? (exports.AirDatepicker = t()) + : (e.AirDatepicker = t()); +})(this, function () { + return (function () { + "use strict"; + var e = { + d: function (t, i) { + for (var s in i) e.o(i, s) && !e.o(t, s) && Object.defineProperty(t, s, { enumerable: !0, get: i[s] }); + }, + o: function (e, t) { + return Object.prototype.hasOwnProperty.call(e, t); + } + }, + t = {}; + e.d(t, { + default: function () { + return K; + } + }); + var i = { + days: "days", + months: "months", + years: "years", + day: "day", + month: "month", + year: "year", + eventChangeViewDate: "changeViewDate", + eventChangeCurrentView: "changeCurrentView", + eventChangeFocusDate: "changeFocusDate", + eventChangeSelectedDate: "changeSelectedDate", + eventChangeTime: "changeTime", + eventChangeLastSelectedDate: "changeLastSelectedDate", + actionSelectDate: "selectDate", + actionUnselectDate: "unselectDate", + cssClassWeekend: "-weekend-" + }, + s = { + classes: "", + inline: !1, + locale: { + days: ["Воскресенье", "Понедельник", "Вторник", "Среда", "Четверг", "Пятница", "Суббота"], + daysShort: ["Вос", "Пон", "Вто", "Сре", "Чет", "Пят", "Суб"], + daysMin: ["Вс", "Пн", "Вт", "Ср", "Чт", "Пт", "Сб"], + months: ["Январь", "Февраль", "Март", "Апрель", "Май", "Июнь", "Июль", "Август", "Сентябрь", "Октябрь", "Ноябрь", "Декабрь"], + monthsShort: ["Янв", "Фев", "Мар", "Апр", "Май", "Июн", "Июл", "Авг", "Сен", "Окт", "Ноя", "Дек"], + today: "Сегодня", + clear: "Очистить", + dateFormat: "dd.MM.yyyy", + timeFormat: "HH:mm", + firstDay: 1 + }, + startDate: new Date(), + firstDay: "", + weekends: [6, 0], + dateFormat: "", + altField: "", + altFieldDateFormat: "T", + toggleSelected: !0, + keyboardNav: !0, + selectedDates: !1, + container: "", + isMobile: !1, + visible: !1, + position: "bottom left", + offset: 12, + view: i.days, + minView: i.days, + showOtherMonths: !0, + selectOtherMonths: !0, + moveToOtherMonthsOnSelect: !0, + showOtherYears: !0, + selectOtherYears: !0, + moveToOtherYearsOnSelect: !0, + minDate: "", + maxDate: "", + disableNavWhenOutOfRange: !0, + multipleDates: !1, + multipleDatesSeparator: ", ", + range: !1, + dynamicRange: !0, + buttons: !1, + monthsField: "monthsShort", + showEvent: "focus", + autoClose: !1, + prevHtml: '', + nextHtml: '', + navTitles: { days: "MMMM, yyyy", months: "yyyy", years: "yyyy1 - yyyy2" }, + timepicker: !1, + onlyTimepicker: !1, + dateTimeSeparator: " ", + timeFormat: "", + minHours: 0, + maxHours: 24, + minMinutes: 0, + maxMinutes: 59, + hoursStep: 1, + minutesStep: 1, + onSelect: !1, + onChangeViewDate: !1, + onChangeView: !1, + onRenderCell: !1, + onShow: !1, + onHide: !1, + onClickDayName: !1 + }; + function a(e) { + let t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : document; + return "string" == typeof e ? t.querySelector(e) : e; + } + function n() { + let { tagName: e = "div", className: t = "", innerHtml: i = "", id: s = "", attrs: a = {} } = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}, + n = document.createElement(e); + return t && n.classList.add(...t.split(" ")), s && (n.id = s), i && (n.innerHTML = i), a && r(n, a), n; + } + function r(e, t) { + for (let [i, s] of Object.entries(t)) void 0 !== s && e.setAttribute(i, s); + return e; + } + function h(e) { + return new Date(e.getFullYear(), e.getMonth() + 1, 0).getDate(); + } + function o(e) { + let t = e.getHours(), + { hours: i, dayPeriod: s } = l(t); + return { + year: e.getFullYear(), + month: e.getMonth(), + fullMonth: e.getMonth() + 1 < 10 ? "0" + (e.getMonth() + 1) : e.getMonth() + 1, + date: e.getDate(), + fullDate: e.getDate() < 10 ? "0" + e.getDate() : e.getDate(), + day: e.getDay(), + hours: t, + fullHours: d(t), + hours12: i, + dayPeriod: s, + fullHours12: d(i), + minutes: e.getMinutes(), + fullMinutes: e.getMinutes() < 10 ? "0" + e.getMinutes() : e.getMinutes() + }; + } + function l(e) { + return { dayPeriod: e > 11 ? "pm" : "am", hours: e % 12 == 0 ? 12 : e % 12 }; + } + function d(e) { + return e < 10 ? "0" + e : e; + } + function c(e) { + let t = 10 * Math.floor(e.getFullYear() / 10); + return [t, t + 9]; + } + function u() { + let e = []; + for (var t = arguments.length, i = new Array(t), s = 0; s < t; s++) i[s] = arguments[s]; + return ( + i.forEach((t) => { + if ("object" == typeof t) for (let i in t) t[i] && e.push(i); + else t && e.push(t); + }), + e.join(" ") + ); + } + function p(e, t) { + let s = arguments.length > 2 && void 0 !== arguments[2] ? arguments[2] : i.days; + if (!e || !t) return !1; + let a = o(e), + n = o(t), + r = { [i.days]: a.date === n.date && a.month === n.month && a.year === n.year, [i.months]: a.month === n.month && a.year === n.year, [i.years]: a.year === n.year }; + return r[s]; + } + function m(e, t, i) { + let s = g(e, !1).getTime(), + a = g(t, !1).getTime(); + return i ? s >= a : s > a; + } + function v(e, t) { + return !m(e, t, !0); + } + function g(e) { + let t = !(arguments.length > 1 && void 0 !== arguments[1]) || arguments[1], + i = new Date(e.getTime()); + return "boolean" != typeof t || t || D(i), i; + } + function D(e) { + return e.setHours(0, 0, 0, 0), e; + } + function y(e, t, i) { + e.length + ? e.forEach((e) => { + e.addEventListener(t, i); + }) + : e.addEventListener(t, i); + } + function f(e, t) { + return !(!e || e === document || e instanceof DocumentFragment) && (e.matches(t) ? e : f(e.parentNode, t)); + } + function w(e, t, i) { + return e > i ? i : e < t ? t : e; + } + function b(e) { + for (var t = arguments.length, i = new Array(t > 1 ? t - 1 : 0), s = 1; s < t; s++) i[s - 1] = arguments[s]; + return ( + i + .filter((e) => e) + .forEach((t) => { + for (let [i, s] of Object.entries(t)) + if (void 0 !== s && "[object Object]" === s.toString()) { + let t = void 0 !== e[i] ? e[i].toString() : void 0, + a = s.toString(), + n = Array.isArray(s) ? [] : {}; + (e[i] = e[i] ? (t !== a ? n : e[i]) : n), b(e[i], s); + } else e[i] = s; + }), + e + ); + } + function k(e) { + let t = e; + return e instanceof Date || (t = new Date(e)), isNaN(t.getTime()) && (console.log(`Unable to convert value "${e}" to Date object`), (t = !1)), t; + } + function C(e) { + let t = "\\s|\\.|-|/|\\\\|,|\\$|\\!|\\?|:|;"; + return new RegExp("(^|>|" + t + ")(" + e + ")($|<|" + t + ")", "g"); + } + function $(e, t, i) { + return ( + (t = (function (e) { + var t = (function (e, t) { + if ("object" != typeof e || null === e) return e; + var i = e[Symbol.toPrimitive]; + if (void 0 !== i) { + var s = i.call(e, t); + if ("object" != typeof s) return s; + throw new TypeError("@@toPrimitive must return a primitive value."); + } + return String(e); + })(e, "string"); + return "symbol" == typeof t ? t : String(t); + })(t)) in e + ? Object.defineProperty(e, t, { value: i, enumerable: !0, configurable: !0, writable: !0 }) + : (e[t] = i), + e + ); + } + class _ { + constructor() { + let { type: e, date: t, dp: i, opts: s, body: a } = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; + $(this, "focus", () => { + this.$cell.classList.add("-focus-"), (this.focused = !0); + }), + $(this, "removeFocus", () => { + this.$cell.classList.remove("-focus-"), (this.focused = !1); + }), + $(this, "select", () => { + this.$cell.classList.add("-selected-"), (this.selected = !0); + }), + $(this, "removeSelect", () => { + this.$cell.classList.remove("-selected-", "-range-from-", "-range-to-"), (this.selected = !1); + }), + $(this, "onChangeSelectedDate", () => { + this.isDisabled || (this._handleSelectedStatus(), this.opts.range && this._handleRangeStatus()); + }), + $(this, "onChangeFocusDate", (e) => { + if (!e) return void (this.focused && this.removeFocus()); + let t = p(e, this.date, this.type); + t ? this.focus() : !t && this.focused && this.removeFocus(), this.opts.range && this._handleRangeStatus(); + }), + $(this, "render", () => ((this.$cell.innerHTML = this._getHtml()), (this.$cell.adpCell = this), this.$cell)), + (this.type = e), + (this.singleType = this.type.slice(0, -1)), + (this.date = t), + (this.dp = i), + (this.opts = s), + (this.body = a), + (this.customData = !1), + this.init(); + } + init() { + let { range: e, onRenderCell: t } = this.opts; + t && (this.customData = t({ date: this.date, cellType: this.singleType, datepicker: this.dp })), + this._createElement(), + this._bindDatepickerEvents(), + this._handleInitialFocusStatus(), + this.dp.hasSelectedDates && (this._handleSelectedStatus(), e && this._handleRangeStatus()); + } + _bindDatepickerEvents() { + this.dp.on(i.eventChangeSelectedDate, this.onChangeSelectedDate), this.dp.on(i.eventChangeFocusDate, this.onChangeFocusDate); + } + unbindDatepickerEvents() { + this.dp.off(i.eventChangeSelectedDate, this.onChangeSelectedDate), this.dp.off(i.eventChangeFocusDate, this.onChangeFocusDate); + } + _createElement() { + var e; + let { year: t, month: i, date: s } = o(this.date), + a = (null === (e = this.customData) || void 0 === e ? void 0 : e.attrs) || {}; + this.$cell = n({ className: this._getClassName(), attrs: { "data-year": t, "data-month": i, "data-date": s, ...a } }); + } + _getClassName() { + var e, t; + let s = new Date(), + { selectOtherMonths: a, selectOtherYears: n } = this.opts, + { minDate: r, maxDate: h } = this.dp, + { day: l } = o(this.date), + d = this._isOutOfMinMaxRange(), + c = null === (e = this.customData) || void 0 === e ? void 0 : e.disabled, + m = u("air-datepicker-cell", `-${this.singleType}-`, { + "-current-": p(s, this.date, this.type), + "-min-date-": r && p(r, this.date, this.type), + "-max-date-": h && p(h, this.date, this.type) + }), + v = ""; + switch (this.type) { + case i.days: + v = u({ "-weekend-": this.dp.isWeekend(l), "-other-month-": this.isOtherMonth, "-disabled-": (this.isOtherMonth && !a) || d || c }); + break; + case i.months: + v = u({ "-disabled-": d || c }); + break; + case i.years: + v = u({ "-other-decade-": this.isOtherDecade, "-disabled-": d || (this.isOtherDecade && !n) || c }); + } + return u(m, v, null === (t = this.customData) || void 0 === t ? void 0 : t.classes); + } + _getHtml() { + var e; + let { year: t, month: s, date: a } = o(this.date), + { showOtherMonths: n, showOtherYears: r } = this.opts; + if (null !== (e = this.customData) && void 0 !== e && e.html) return this.customData.html; + switch (this.type) { + case i.days: + return !n && this.isOtherMonth ? "" : a; + case i.months: + return this.dp.locale[this.opts.monthsField][s]; + case i.years: + return !r && this.isOtherDecade ? "" : t; + } + } + _isOutOfMinMaxRange() { + let { minDate: e, maxDate: t } = this.dp, + { type: s, date: a } = this, + { month: n, year: r, date: h } = o(a), + l = s === i.days, + d = s === i.years, + c = !!e && new Date(r, d ? e.getMonth() : n, l ? h : e.getDate()), + u = !!t && new Date(r, d ? t.getMonth() : n, l ? h : t.getDate()); + return e && t ? v(c, e) || m(u, t) : e ? v(c, e) : t ? m(u, t) : void 0; + } + destroy() { + this.unbindDatepickerEvents(); + } + _handleRangeStatus() { + let { rangeDateFrom: e, rangeDateTo: t } = this.dp, + i = u({ + "-in-range-": e && t && ((s = this.date), (a = e), (n = t), m(s, a) && v(s, n)), + "-range-from-": e && p(this.date, e, this.type), + "-range-to-": t && p(this.date, t, this.type) + }); + var s, a, n; + this.$cell.classList.remove("-range-from-", "-range-to-", "-in-range-"), i && this.$cell.classList.add(...i.split(" ")); + } + _handleSelectedStatus() { + let e = this.dp._checkIfDateIsSelected(this.date, this.type); + e ? this.select() : !e && this.selected && this.removeSelect(); + } + _handleInitialFocusStatus() { + p(this.dp.focusDate, this.date, this.type) && this.focus(); + } + get isDisabled() { + return this.$cell.matches(".-disabled-"); + } + get isOtherMonth() { + return this.dp.isOtherMonth(this.date); + } + get isOtherDecade() { + return this.dp.isOtherDecade(this.date); + } + } + function M(e, t, i) { + return ( + (t = (function (e) { + var t = (function (e, t) { + if ("object" != typeof e || null === e) return e; + var i = e[Symbol.toPrimitive]; + if (void 0 !== i) { + var s = i.call(e, t); + if ("object" != typeof s) return s; + throw new TypeError("@@toPrimitive must return a primitive value."); + } + return String(e); + })(e, "string"); + return "symbol" == typeof t ? t : String(t); + })(t)) in e + ? Object.defineProperty(e, t, { value: i, enumerable: !0, configurable: !0, writable: !0 }) + : (e[t] = i), + e + ); + } + let S = { + [i.days]: `
`, + [i.months]: `
`, + [i.years]: `
` + }; + const T = ".air-datepicker-cell"; + class F { + constructor(e) { + let { dp: t, type: s, opts: a } = e; + M(this, "handleClick", (e) => { + let t = e.target.closest(T).adpCell; + if (t.isDisabled) return; + if (!this.dp.isMinViewReached) return void this.dp.down(); + let i = this.dp._checkIfDateIsSelected(t.date, t.type); + i ? this.dp._handleAlreadySelectedDates(i, t.date) : this.dp.selectDate(t.date); + }), + M(this, "handleDayNameClick", (e) => { + let t = e.target.getAttribute("data-day-index"); + this.opts.onClickDayName({ dayIndex: Number(t), datepicker: this.dp }); + }), + M(this, "onChangeCurrentView", (e) => { + e !== this.type ? this.hide() : (this.show(), this.render()); + }), + M(this, "onMouseOverCell", (e) => { + let t = f(e.target, T); + this.dp.setFocusDate(!!t && t.adpCell.date); + }), + M(this, "onMouseOutCell", () => { + this.dp.setFocusDate(!1); + }), + M(this, "onClickBody", (e) => { + let { onClickDayName: t } = this.opts, + i = e.target; + i.closest(T) && this.handleClick(e), t && i.closest(".air-datepicker-body--day-name") && this.handleDayNameClick(e); + }), + M(this, "onMouseDown", (e) => { + this.pressed = !0; + let t = f(e.target, T), + i = t && t.adpCell; + p(i.date, this.dp.rangeDateFrom) && (this.rangeFromFocused = !0), p(i.date, this.dp.rangeDateTo) && (this.rangeToFocused = !0); + }), + M(this, "onMouseMove", (e) => { + if (!this.pressed || !this.dp.isMinViewReached) return; + e.preventDefault(); + let t = f(e.target, T), + i = t && t.adpCell, + { selectedDates: s, rangeDateTo: a, rangeDateFrom: n } = this.dp; + if (!i || i.isDisabled) return; + let { date: r } = i; + if (2 === s.length) { + if (this.rangeFromFocused && !m(r, a)) { + let { hours: e, minutes: t } = o(n); + r.setHours(e), r.setMinutes(t), (this.dp.rangeDateFrom = r), this.dp.replaceDate(n, r); + } + if (this.rangeToFocused && !v(r, n)) { + let { hours: e, minutes: t } = o(a); + r.setHours(e), r.setMinutes(t), (this.dp.rangeDateTo = r), this.dp.replaceDate(a, r); + } + } + }), + M(this, "onMouseUp", () => { + (this.pressed = !1), (this.rangeFromFocused = !1), (this.rangeToFocused = !1); + }), + M(this, "onChangeViewDate", (e, t) => { + if (!this.isVisible) return; + let s = c(e), + a = c(t); + switch (this.dp.currentView) { + case i.days: + if (p(e, t, i.months)) return; + break; + case i.months: + if (p(e, t, i.years)) return; + break; + case i.years: + if (s[0] === a[0] && s[1] === a[1]) return; + } + this.render(); + }), + M(this, "render", () => { + this.destroyCells(), + this._generateCells(), + this.cells.forEach((e) => { + this.$cells.appendChild(e.render()); + }); + }), + (this.dp = t), + (this.type = s), + (this.opts = a), + (this.cells = []), + (this.$el = ""), + (this.pressed = !1), + (this.isVisible = !0), + this.init(); + } + init() { + this._buildBaseHtml(), this.type === i.days && this.renderDayNames(), this.render(), this._bindEvents(), this._bindDatepickerEvents(); + } + _bindEvents() { + let { range: e, dynamicRange: t } = this.opts; + y(this.$el, "mouseover", this.onMouseOverCell), + y(this.$el, "mouseout", this.onMouseOutCell), + y(this.$el, "click", this.onClickBody), + e && t && (y(this.$el, "mousedown", this.onMouseDown), y(this.$el, "mousemove", this.onMouseMove), y(window.document, "mouseup", this.onMouseUp)); + } + _bindDatepickerEvents() { + this.dp.on(i.eventChangeViewDate, this.onChangeViewDate), this.dp.on(i.eventChangeCurrentView, this.onChangeCurrentView); + } + _buildBaseHtml() { + (this.$el = n({ className: `air-datepicker-body -${this.type}-`, innerHtml: S[this.type] })), + (this.$names = a(".air-datepicker-body--day-names", this.$el)), + (this.$cells = a(".air-datepicker-body--cells", this.$el)); + } + _getDayNamesHtml() { + let e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : this.dp.locale.firstDay, + t = "", + s = this.dp.isWeekend, + { onClickDayName: a } = this.opts, + n = e, + r = 0; + for (; r < 7; ) { + let e = n % 7; + (t += `
${this.dp.locale.daysMin[e]}
`), r++, n++; + } + return t; + } + _getDaysCells() { + let { + viewDate: e, + locale: { firstDay: t } + } = this.dp, + i = h(e), + { year: s, month: a } = o(e), + n = new Date(s, a, 1), + r = new Date(s, a, i), + l = n.getDay() - t, + d = 6 - r.getDay() + t; + (l = l < 0 ? l + 7 : l), (d = d > 6 ? d - 7 : d); + let c = (function (e, t) { + let { year: i, month: s, date: a } = o(e); + return new Date(i, s, a - t); + })(n, l), + u = i + l + d, + p = c.getDate(), + { year: m, month: v } = o(c), + g = 0; + for (; g < u; ) { + let e = new Date(m, v, p + g); + this._generateCell(e), g++; + } + } + _generateCell(e) { + let { type: t, dp: i, opts: s } = this, + a = new _({ type: t, dp: i, opts: s, date: e, body: this }); + return this.cells.push(a), a; + } + _generateDayCells() { + this._getDaysCells(); + } + _generateMonthCells() { + let { year: e } = this.dp.parsedViewDate, + t = 0; + for (; t < 12; ) this.cells.push(this._generateCell(new Date(e, t))), t++; + } + _generateYearCells() { + let e = c(this.dp.viewDate), + t = e[0] - 1, + i = e[1] + 1, + s = t; + for (; s <= i; ) this.cells.push(this._generateCell(new Date(s, 0))), s++; + } + renderDayNames() { + this.$names.innerHTML = this._getDayNamesHtml(); + } + _generateCells() { + switch (this.type) { + case i.days: + this._generateDayCells(); + break; + case i.months: + this._generateMonthCells(); + break; + case i.years: + this._generateYearCells(); + } + } + show() { + (this.isVisible = !0), this.$el.classList.remove("-hidden-"); + } + hide() { + (this.isVisible = !1), this.$el.classList.add("-hidden-"); + } + destroyCells() { + this.cells.forEach((e) => e.destroy()), (this.cells = []), (this.$cells.innerHTML = ""); + } + destroy() { + this.destroyCells(), this.dp.off(i.eventChangeViewDate, this.onChangeViewDate), this.dp.off(i.eventChangeCurrentView, this.onChangeCurrentView); + } + } + function V(e, t, i) { + return ( + (t = (function (e) { + var t = (function (e, t) { + if ("object" != typeof e || null === e) return e; + var i = e[Symbol.toPrimitive]; + if (void 0 !== i) { + var s = i.call(e, t); + if ("object" != typeof s) return s; + throw new TypeError("@@toPrimitive must return a primitive value."); + } + return String(e); + })(e, "string"); + return "symbol" == typeof t ? t : String(t); + })(t)) in e + ? Object.defineProperty(e, t, { value: i, enumerable: !0, configurable: !0, writable: !0 }) + : (e[t] = i), + e + ); + } + class x { + constructor(e) { + let { dp: t, opts: i } = e; + V(this, "onClickNav", (e) => { + let t = f(e.target, ".air-datepicker-nav--action"); + if (!t) return; + let i = t.dataset.action; + this.dp[i](); + }), + V(this, "onChangeViewDate", () => { + this.render(), this._resetNavStatus(), this.handleNavStatus(); + }), + V(this, "onChangeCurrentView", () => { + this.render(), this._resetNavStatus(), this.handleNavStatus(); + }), + V(this, "onClickNavTitle", () => { + this.dp.isFinalView || this.dp.up(); + }), + V(this, "update", () => { + let { prevHtml: e, nextHtml: t } = this.opts; + (this.$prev.innerHTML = e), (this.$next.innerHTML = t), this._resetNavStatus(), this.render(), this.handleNavStatus(); + }), + V(this, "renderDelay", () => { + setTimeout(this.render); + }), + V(this, "render", () => { + (this.$title.innerHTML = this._getTitle()), + (function (e, t) { + for (let i in t) t[i] ? e.classList.add(i) : e.classList.remove(i); + })(this.$title, { "-disabled-": this.dp.isFinalView }); + }), + (this.dp = t), + (this.opts = i), + this.init(); + } + init() { + this._createElement(), this._buildBaseHtml(), this._defineDOM(), this.render(), this.handleNavStatus(), this._bindEvents(), this._bindDatepickerEvents(); + } + _defineDOM() { + (this.$title = a(".air-datepicker-nav--title", this.$el)), (this.$prev = a('[data-action="prev"]', this.$el)), (this.$next = a('[data-action="next"]', this.$el)); + } + _bindEvents() { + this.$el.addEventListener("click", this.onClickNav), this.$title.addEventListener("click", this.onClickNavTitle); + } + _bindDatepickerEvents() { + this.dp.on(i.eventChangeViewDate, this.onChangeViewDate), + this.dp.on(i.eventChangeCurrentView, this.onChangeCurrentView), + this.isNavIsFunction && (this.dp.on(i.eventChangeSelectedDate, this.renderDelay), this.dp.opts.timepicker && this.dp.on(i.eventChangeTime, this.render)); + } + destroy() { + this.dp.off(i.eventChangeViewDate, this.onChangeViewDate), + this.dp.off(i.eventChangeCurrentView, this.onChangeCurrentView), + this.isNavIsFunction && (this.dp.off(i.eventChangeSelectedDate, this.renderDelay), this.dp.opts.timepicker && this.dp.off(i.eventChangeTime, this.render)); + } + _createElement() { + this.$el = n({ tagName: "nav", className: "air-datepicker-nav" }); + } + _getTitle() { + let { dp: e, opts: t } = this, + i = t.navTitles[e.currentView]; + return "function" == typeof i ? i(e) : e.formatDate(e.viewDate, i); + } + handleNavStatus() { + let { disableNavWhenOutOfRange: e } = this.opts, + { minDate: t, maxDate: s } = this.dp; + if ((!t && !s) || !e) return; + let { year: a, month: n } = this.dp.parsedViewDate, + r = !!t && o(t), + h = !!s && o(s); + switch (this.dp.currentView) { + case i.days: + t && r.month >= n && r.year >= a && this._disableNav("prev"), s && h.month <= n && h.year <= a && this._disableNav("next"); + break; + case i.months: + t && r.year >= a && this._disableNav("prev"), s && h.year <= a && this._disableNav("next"); + break; + case i.years: { + let e = c(this.dp.viewDate); + t && r.year >= e[0] && this._disableNav("prev"), s && h.year <= e[1] && this._disableNav("next"); + break; + } + } + } + _disableNav(e) { + a('[data-action="' + e + '"]', this.$el).classList.add("-disabled-"); + } + _resetNavStatus() { + !(function (e) { + for (var t = arguments.length, i = new Array(t > 1 ? t - 1 : 0), s = 1; s < t; s++) i[s - 1] = arguments[s]; + e.length + ? e.forEach((e) => { + e.classList.remove(...i); + }) + : e.classList.remove(...i); + })(this.$el.querySelectorAll(".air-datepicker-nav--action"), "-disabled-"); + } + _buildBaseHtml() { + let { prevHtml: e, nextHtml: t } = this.opts; + this.$el.innerHTML = `
${e}
${t}
`; + } + get isNavIsFunction() { + let { navTitles: e } = this.opts; + return Object.keys(e).find((t) => "function" == typeof e[t]); + } + } + var H = { today: { content: (e) => e.locale.today, onClick: (e) => e.setViewDate(new Date()) }, clear: { content: (e) => e.locale.clear, onClick: (e) => e.clear() } }; + class E { + constructor(e) { + let { dp: t, opts: i } = e; + (this.dp = t), (this.opts = i), this.init(); + } + init() { + this.createElement(), this.render(); + } + createElement() { + this.$el = n({ className: "air-datepicker-buttons" }); + } + destroy() { + this.$el.parentNode.removeChild(this.$el); + } + clearHtml() { + return (this.$el.innerHTML = ""), this; + } + generateButtons() { + let { buttons: e } = this.opts; + Array.isArray(e) || (e = [e]), + e.forEach((e) => { + let t = e; + "string" == typeof e && H[e] && (t = H[e]); + let i = this.createButton(t); + t.onClick && this.attachEventToButton(i, t.onClick), this.$el.appendChild(i); + }); + } + attachEventToButton(e, t) { + e.addEventListener("click", () => { + t(this.dp); + }); + } + createButton(e) { + let { content: t, className: i, tagName: s = "button", attrs: a = {} } = e; + return n({ tagName: s, innerHtml: `${"function" == typeof t ? t(this.dp) : t}`, className: u("air-datepicker-button", i), attrs: a }); + } + render() { + this.generateButtons(); + } + } + function L(e, t, i) { + return ( + (t = (function (e) { + var t = (function (e, t) { + if ("object" != typeof e || null === e) return e; + var i = e[Symbol.toPrimitive]; + if (void 0 !== i) { + var s = i.call(e, t); + if ("object" != typeof s) return s; + throw new TypeError("@@toPrimitive must return a primitive value."); + } + return String(e); + })(e, "string"); + return "symbol" == typeof t ? t : String(t); + })(t)) in e + ? Object.defineProperty(e, t, { value: i, enumerable: !0, configurable: !0, writable: !0 }) + : (e[t] = i), + e + ); + } + class O { + constructor() { + let { opts: e, dp: t } = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; + L(this, "toggleTimepickerIsActive", (e) => { + this.dp.timepickerIsActive = e; + }), + L(this, "onChangeSelectedDate", (e) => { + let { date: t, updateTime: i = !1 } = e; + t && (this.setMinMaxTime(t), this.setCurrentTime(!!i && t), this.addTimeToDate(t)); + }), + L(this, "onChangeLastSelectedDate", (e) => { + e && (this.setTime(e), this.render()); + }), + L(this, "onChangeInputRange", (e) => { + let t = e.target; + (this[t.getAttribute("name")] = t.value), this.updateText(), this.dp.trigger(i.eventChangeTime, { hours: this.hours, minutes: this.minutes }); + }), + L(this, "onMouseEnterLeave", (e) => { + let t = e.target.getAttribute("name"), + i = this.$minutesText; + "hours" === t && (i = this.$hoursText), i.classList.toggle("-focus-"); + }), + L(this, "onFocus", () => { + this.toggleTimepickerIsActive(!0); + }), + L(this, "onBlur", () => { + this.toggleTimepickerIsActive(!1); + }), + (this.opts = e), + (this.dp = t); + let { timeFormat: s } = this.dp.locale; + s && (s.match(C("h")) || s.match(C("hh"))) && (this.ampm = !0), this.init(); + } + init() { + this.setTime(this.dp.lastSelectedDate || this.dp.viewDate), this.createElement(), this.buildHtml(), this.defineDOM(), this.render(), this.bindDatepickerEvents(), this.bindDOMEvents(); + } + bindDatepickerEvents() { + this.dp.on(i.eventChangeSelectedDate, this.onChangeSelectedDate), this.dp.on(i.eventChangeLastSelectedDate, this.onChangeLastSelectedDate); + } + bindDOMEvents() { + let e = "input"; + navigator.userAgent.match(/trident/gi) && (e = "change"), + y(this.$ranges, e, this.onChangeInputRange), + y(this.$ranges, "mouseenter", this.onMouseEnterLeave), + y(this.$ranges, "mouseleave", this.onMouseEnterLeave), + y(this.$ranges, "focus", this.onFocus), + y(this.$ranges, "mousedown", this.onFocus), + y(this.$ranges, "blur", this.onBlur); + } + createElement() { + this.$el = n({ className: u("air-datepicker-time", { "-am-pm-": this.dp.ampm }) }); + } + destroy() { + this.dp.off(i.eventChangeSelectedDate, this.onChangeSelectedDate), this.dp.off(i.eventChangeLastSelectedDate, this.onChangeLastSelectedDate), this.$el.parentNode.removeChild(this.$el); + } + buildHtml() { + let { + ampm: e, + hours: t, + displayHours: i, + minutes: s, + minHours: a, + minMinutes: n, + maxHours: r, + maxMinutes: h, + dayPeriod: o, + opts: { hoursStep: l, minutesStep: c } + } = this; + this.$el.innerHTML = + `
${d( + i + )} : ${d(s)} ` + + (e ? `${o}` : "") + + '
' + + `
` + + `
`; + } + defineDOM() { + let e = (e) => a(e, this.$el); + (this.$ranges = this.$el.querySelectorAll('[type="range"]')), + (this.$hours = e('[name="hours"]')), + (this.$minutes = e('[name="minutes"]')), + (this.$hoursText = e(".air-datepicker-time--current-hours")), + (this.$minutesText = e(".air-datepicker-time--current-minutes")), + (this.$ampm = e(".air-datepicker-time--current-ampm")); + } + setTime(e) { + this.setMinMaxTime(e), this.setCurrentTime(e); + } + addTimeToDate(e) { + e && (e.setHours(this.hours), e.setMinutes(this.minutes)); + } + setMinMaxTime(e) { + if ((this.setMinMaxTimeFromOptions(), e)) { + let { minDate: t, maxDate: i } = this.dp; + t && p(e, t) && this.setMinTimeFromMinDate(t), i && p(e, i) && this.setMaxTimeFromMaxDate(i); + } + } + setCurrentTime(e) { + let { hours: t, minutes: i } = e ? o(e) : this; + (this.hours = w(t, this.minHours, this.maxHours)), (this.minutes = w(i, this.minMinutes, this.maxMinutes)); + } + setMinMaxTimeFromOptions() { + let { minHours: e, minMinutes: t, maxHours: i, maxMinutes: s } = this.opts; + (this.minHours = w(e, 0, 23)), (this.minMinutes = w(t, 0, 59)), (this.maxHours = w(i, 0, 23)), (this.maxMinutes = w(s, 0, 59)); + } + setMinTimeFromMinDate(e) { + let { lastSelectedDate: t } = this.dp; + (this.minHours = e.getHours()), t && t.getHours() > e.getHours() ? (this.minMinutes = this.opts.minMinutes) : (this.minMinutes = e.getMinutes()); + } + setMaxTimeFromMaxDate(e) { + let { lastSelectedDate: t } = this.dp; + (this.maxHours = e.getHours()), t && t.getHours() < e.getHours() ? (this.maxMinutes = this.opts.maxMinutes) : (this.maxMinutes = e.getMinutes()); + } + updateSliders() { + (r(this.$hours, { min: this.minHours, max: this.maxHours }).value = this.hours), (r(this.$minutes, { min: this.minMinutes, max: this.maxMinutes }).value = this.minutes); + } + updateText() { + (this.$hoursText.innerHTML = d(this.displayHours)), (this.$minutesText.innerHTML = d(this.minutes)), this.ampm && (this.$ampm.innerHTML = this.dayPeriod); + } + set hours(e) { + this._hours = e; + let { hours: t, dayPeriod: i } = l(e); + (this.displayHours = this.ampm ? t : e), (this.dayPeriod = i); + } + get hours() { + return this._hours; + } + render() { + this.updateSliders(), this.updateText(); + } + } + function A(e, t, i) { + return ( + (t = (function (e) { + var t = (function (e, t) { + if ("object" != typeof e || null === e) return e; + var i = e[Symbol.toPrimitive]; + if (void 0 !== i) { + var s = i.call(e, t); + if ("object" != typeof s) return s; + throw new TypeError("@@toPrimitive must return a primitive value."); + } + return String(e); + })(e, "string"); + return "symbol" == typeof t ? t : String(t); + })(t)) in e + ? Object.defineProperty(e, t, { value: i, enumerable: !0, configurable: !0, writable: !0 }) + : (e[t] = i), + e + ); + } + class N { + constructor(e) { + let { dp: t, opts: i } = e; + A(this, "pressedKeys", new Set()), + A( + this, + "hotKeys", + new Map([ + [ + [ + ["Control", "ArrowRight"], + ["Control", "ArrowUp"] + ], + (e) => e.month++ + ], + [ + [ + ["Control", "ArrowLeft"], + ["Control", "ArrowDown"] + ], + (e) => e.month-- + ], + [ + [ + ["Shift", "ArrowRight"], + ["Shift", "ArrowUp"] + ], + (e) => e.year++ + ], + [ + [ + ["Shift", "ArrowLeft"], + ["Shift", "ArrowDown"] + ], + (e) => e.year-- + ], + [ + [ + ["Alt", "ArrowRight"], + ["Alt", "ArrowUp"] + ], + (e) => (e.year += 10) + ], + [ + [ + ["Alt", "ArrowLeft"], + ["Alt", "ArrowDown"] + ], + (e) => (e.year -= 10) + ], + [["Control", "Shift", "ArrowUp"], (e, t) => t.up()] + ]) + ), + A(this, "handleHotKey", (e) => { + let t = this.hotKeys.get(e), + i = o(this.getInitialFocusDate()); + t(i, this.dp); + let { year: s, month: a, date: n } = i, + r = h(new Date(s, a)); + r < n && (n = r); + let l = this.dp.getClampedDate(new Date(s, a, n)); + this.dp.setFocusDate(l, { viewDateTransition: !0 }); + }), + A(this, "isHotKeyPressed", () => { + let e = !1, + t = this.pressedKeys.size, + i = (e) => this.pressedKeys.has(e); + for (let [s] of this.hotKeys) { + if (e) break; + if (Array.isArray(s[0])) + s.forEach((a) => { + e || t !== a.length || (e = a.every(i) && s); + }); + else { + if (t !== s.length) continue; + e = s.every(i) && s; + } + } + return e; + }), + A(this, "isArrow", (e) => e >= 37 && e <= 40), + A(this, "onKeyDown", (e) => { + let { key: t, which: i } = e, + { + dp: s, + dp: { focusDate: a }, + opts: n + } = this; + this.registerKey(t); + let r = this.isHotKeyPressed(); + if (r) return e.preventDefault(), void this.handleHotKey(r); + if (this.isArrow(i)) return e.preventDefault(), void this.focusNextCell(t); + if ("Enter" === t) { + if (s.currentView !== n.minView) return void s.down(); + if (a) { + let e = s._checkIfDateIsSelected(a); + return void (e ? s._handleAlreadySelectedDates(e, a) : s.selectDate(a)); + } + } + "Escape" === t && this.dp.hide(); + }), + A(this, "onKeyUp", (e) => { + this.removeKey(e.key); + }), + (this.dp = t), + (this.opts = i), + this.init(); + } + init() { + this.bindKeyboardEvents(); + } + bindKeyboardEvents() { + let { $el: e } = this.dp; + e.addEventListener("keydown", this.onKeyDown), e.addEventListener("keyup", this.onKeyUp); + } + destroy() { + let { $el: e } = this.dp; + e.removeEventListener("keydown", this.onKeyDown), e.removeEventListener("keyup", this.onKeyUp), (this.hotKeys = null), (this.pressedKeys = null); + } + getInitialFocusDate() { + let { + focusDate: e, + currentView: t, + selectedDates: s, + parsedViewDate: { year: a, month: n } + } = this.dp, + r = e || s[s.length - 1]; + if (!r) + switch (t) { + case i.days: + r = new Date(a, n, new Date().getDate()); + break; + case i.months: + r = new Date(a, n, 1); + break; + case i.years: + r = new Date(a, 0, 1); + } + return r; + } + focusNextCell(e) { + let t = this.getInitialFocusDate(), + { currentView: s } = this.dp, + { days: a, months: n, years: r } = i, + h = o(t), + l = h.year, + d = h.month, + c = h.date; + switch (e) { + case "ArrowLeft": + s === a && (c -= 1), s === n && (d -= 1), s === r && (l -= 1); + break; + case "ArrowUp": + s === a && (c -= 7), s === n && (d -= 3), s === r && (l -= 4); + break; + case "ArrowRight": + s === a && (c += 1), s === n && (d += 1), s === r && (l += 1); + break; + case "ArrowDown": + s === a && (c += 7), s === n && (d += 3), s === r && (l += 4); + } + let u = this.dp.getClampedDate(new Date(l, d, c)); + this.dp.setFocusDate(u, { viewDateTransition: !0 }); + } + registerKey(e) { + this.pressedKeys.add(e); + } + removeKey(e) { + this.pressedKeys.delete(e); + } + } + let I = { + on(e, t) { + this.__events || (this.__events = {}), this.__events[e] ? this.__events[e].push(t) : (this.__events[e] = [t]); + }, + off(e, t) { + this.__events && this.__events[e] && (this.__events[e] = this.__events[e].filter((e) => e !== t)); + }, + removeAllEvents() { + this.__events = {}; + }, + trigger(e) { + for (var t = arguments.length, i = new Array(t > 1 ? t - 1 : 0), s = 1; s < t; s++) i[s - 1] = arguments[s]; + this.__events && + this.__events[e] && + this.__events[e].forEach((e) => { + e(...i); + }); + } + }; + function P(e, t, i) { + return ( + (t = (function (e) { + var t = (function (e, t) { + if ("object" != typeof e || null === e) return e; + var i = e[Symbol.toPrimitive]; + if (void 0 !== i) { + var s = i.call(e, t); + if ("object" != typeof s) return s; + throw new TypeError("@@toPrimitive must return a primitive value."); + } + return String(e); + })(e, "string"); + return "symbol" == typeof t ? t : String(t); + })(t)) in e + ? Object.defineProperty(e, t, { value: i, enumerable: !0, configurable: !0, writable: !0 }) + : (e[t] = i), + e + ); + } + let j = "", + R = "", + B = !1; + class K { + static buildGlobalContainer(e) { + (B = !0), (j = n({ className: e, id: e })), a("body").appendChild(j); + } + constructor(e, t) { + var r = this; + if ( + (P(this, "viewIndexes", [i.days, i.months, i.years]), + P(this, "next", () => { + let { year: e, month: t } = this.parsedViewDate; + switch (this.currentView) { + case i.days: + this.setViewDate(new Date(e, t + 1, 1)); + break; + case i.months: + this.setViewDate(new Date(e + 1, t, 1)); + break; + case i.years: + this.setViewDate(new Date(e + 10, 0, 1)); + } + }), + P(this, "prev", () => { + let { year: e, month: t } = this.parsedViewDate; + switch (this.currentView) { + case i.days: + this.setViewDate(new Date(e, t - 1, 1)); + break; + case i.months: + this.setViewDate(new Date(e - 1, t, 1)); + break; + case i.years: + this.setViewDate(new Date(e - 10, 0, 1)); + } + }), + P(this, "_finishHide", () => { + (this.hideAnimation = !1), this._destroyComponents(), this.$container.removeChild(this.$datepicker); + }), + P(this, "setPosition", function (e) { + let t = arguments.length > 1 && void 0 !== arguments[1] && arguments[1]; + if ("function" == typeof (e = e || r.opts.position)) + return void (r.customHide = e({ $datepicker: r.$datepicker, $target: r.$el, $pointer: r.$pointer, isViewChange: t, done: r._finishHide })); + let i, + s, + { isMobile: a } = r.opts, + n = r.$el.getBoundingClientRect(), + h = r.$el.getBoundingClientRect(), + o = r.$datepicker.offsetParent, + l = r.$el.offsetParent, + d = r.$datepicker.getBoundingClientRect(), + c = e.split(" "), + u = window.scrollY, + p = window.scrollX, + m = r.opts.offset, + v = c[0], + g = c[1]; + if (a) r.$datepicker.style.cssText = "left: 50%; top: 50%"; + else { + if ( + (o === l && o !== document.body && ((h = { top: r.$el.offsetTop, left: r.$el.offsetLeft, width: n.width, height: r.$el.offsetHeight }), (u = 0), (p = 0)), + o !== l && o !== document.body) + ) { + let e = o.getBoundingClientRect(); + (h = { top: n.top - e.top, left: n.left - e.left, width: n.width, height: n.height }), (u = 0), (p = 0); + } + switch (v) { + case "top": + i = h.top - d.height - m; + break; + case "right": + s = h.left + h.width + m; + break; + case "bottom": + i = h.top + h.height + m; + break; + case "left": + s = h.left - d.width - m; + } + switch (g) { + case "top": + i = h.top; + break; + case "right": + s = h.left + h.width - d.width; + break; + case "bottom": + i = h.top + h.height - d.height; + break; + case "left": + s = h.left; + break; + case "center": + /left|right/.test(v) ? (i = h.top + h.height / 2 - d.height / 2) : (s = h.left + h.width / 2 - d.width / 2); + } + r.$datepicker.style.cssText = `left: ${s + p}px; top: ${i + u}px`; + } + }), + P(this, "_setInputValue", () => { + let { + opts: e, + $altField: t, + locale: { dateFormat: i } + } = this, + { altFieldDateFormat: s, altField: a } = e; + a && t && (t.value = this._getInputValue(s)), (this.$el.value = this._getInputValue(i)); + }), + P(this, "_getInputValue", (e) => { + let { selectedDates: t, opts: i } = this, + { multipleDates: s, multipleDatesSeparator: a } = i; + if (!t.length) return ""; + let n = "function" == typeof e, + r = n ? e(s ? t : t[0]) : t.map((t) => this.formatDate(t, e)); + return (r = n ? r : r.join(a)), r; + }), + P(this, "_checkIfDateIsSelected", function (e) { + let t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : i.days, + s = !1; + return ( + r.selectedDates.some((i) => { + let a = p(e, i, t); + return (s = a && i), a; + }), + s + ); + }), + P(this, "_scheduleCallAfterTransition", (e) => { + this._cancelScheduledCall(), + e && e(!1), + (this._onTransitionEnd = () => { + e && e(!0); + }), + this.$datepicker.addEventListener("transitionend", this._onTransitionEnd, { once: !0 }); + }), + P(this, "_cancelScheduledCall", () => { + this.$datepicker.removeEventListener("transitionend", this._onTransitionEnd); + }), + P(this, "setViewDate", (e) => { + if (!((e = k(e)) instanceof Date)) return; + if (p(e, this.viewDate)) return; + let t = this.viewDate; + this.viewDate = e; + let { onChangeViewDate: s } = this.opts; + if (s) { + let { month: e, year: t } = this.parsedViewDate; + s({ month: e, year: t, decade: this.curDecade }); + } + this.trigger(i.eventChangeViewDate, e, t); + }), + P(this, "setFocusDate", function (e) { + let t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; + (!e || (e = k(e)) instanceof Date) && ((r.focusDate = e), r.opts.range && e && r._handleRangeOnFocus(), r.trigger(i.eventChangeFocusDate, e, t)); + }), + P(this, "setCurrentView", (e) => { + if (this.viewIndexes.includes(e)) { + if (((this.currentView = e), this.elIsInput && this.visible && this.setPosition(void 0, !0), this.trigger(i.eventChangeCurrentView, e), !this.views[e])) { + let t = (this.views[e] = new F({ dp: this, opts: this.opts, type: e })); + this.shouldUpdateDOM && this.$content.appendChild(t.$el); + } + this.opts.onChangeView && this.opts.onChangeView(e); + } + }), + P(this, "_updateLastSelectedDate", (e) => { + (this.lastSelectedDate = e), this.trigger(i.eventChangeLastSelectedDate, e); + }), + P(this, "destroy", () => { + let { showEvent: e, isMobile: t } = this.opts, + i = this.$datepicker.parentNode; + i && i.removeChild(this.$datepicker), + this.$el.removeEventListener(e, this._onFocus), + this.$el.removeEventListener("blur", this._onBlur), + window.removeEventListener("resize", this._onResize), + t && this._removeMobileAttributes(), + this.keyboardNav && this.keyboardNav.destroy(), + (this.views = null), + (this.nav = null), + (this.$datepicker = null), + (this.opts = null), + (this.$customContainer = null), + (this.viewDate = null), + (this.focusDate = null), + (this.selectedDates = null), + (this.rangeDateFrom = null), + (this.rangeDateTo = null); + }), + P(this, "update", (e) => { + let t = b({}, this.opts); + b(this.opts, e); + let { timepicker: s, buttons: a, range: n, selectedDates: r, isMobile: h } = this.opts, + o = this.visible || this.treatAsInline; + this._createMinMaxDates(), + this._limitViewDateByMaxMinDates(), + this._handleLocale(), + !t.selectedDates && r && this.selectDate(r), + e.view && this.setCurrentView(e.view), + this._setInputValue(), + t.range && !n + ? ((this.rangeDateTo = !1), (this.rangeDateFrom = !1)) + : !t.range && n && this.selectedDates.length && ((this.rangeDateFrom = this.selectedDates[0]), (this.rangeDateTo = this.selectedDates[1])), + t.timepicker && !s + ? (o && this.timepicker.destroy(), (this.timepicker = !1), this.$timepicker.parentNode.removeChild(this.$timepicker)) + : !t.timepicker && s && this._addTimepicker(), + !t.buttons && a + ? this._addButtons() + : t.buttons && !a + ? (this.buttons.destroy(), this.$buttons.parentNode.removeChild(this.$buttons)) + : o && t.buttons && a && this.buttons.clearHtml().render(), + !t.isMobile && h + ? (this.treatAsInline || R || this._createMobileOverlay(), this._addMobileAttributes(), this.visible && this._showMobileOverlay()) + : t.isMobile && !h && (this._removeMobileAttributes(), this.visible && (R.classList.remove("-active-"), "function" != typeof this.opts.position && this.setPosition())), + o && (this.nav.update(), this.views[this.currentView].render(), this.currentView === i.days && this.views[this.currentView].renderDayNames()); + }), + P(this, "isOtherMonth", (e) => { + let { month: t } = o(e); + return t !== this.parsedViewDate.month; + }), + P(this, "isOtherYear", (e) => { + let { year: t } = o(e); + return t !== this.parsedViewDate.year; + }), + P(this, "isOtherDecade", (e) => { + let { year: t } = o(e), + [i, s] = c(this.viewDate); + return t < i || t > s; + }), + P(this, "_onChangeSelectedDate", (e) => { + let { silent: t } = e; + setTimeout(() => { + this._setInputValue(), this.opts.onSelect && !t && this._triggerOnSelect(); + }); + }), + P(this, "_onChangeFocusedDate", function (e) { + let { viewDateTransition: t } = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}; + if (!e) return; + let i = !1; + t && (i = r.isOtherMonth(e) || r.isOtherYear(e) || r.isOtherDecade(e)), i && r.setViewDate(e); + }), + P(this, "_onChangeTime", (e) => { + let { hours: t, minutes: i } = e, + s = new Date(), + { + lastSelectedDate: a, + opts: { onSelect: n } + } = this, + r = a; + a || (r = s); + let h = this.getCell(r, this.currentViewSingular), + o = h && h.adpCell; + (o && o.isDisabled) || (r.setHours(t), r.setMinutes(i), a ? (this._setInputValue(), n && this._triggerOnSelect()) : this.selectDate(r)); + }), + P(this, "_onFocus", (e) => { + this.visible || this.show(); + }), + P(this, "_onBlur", (e) => { + this.inFocus || !this.visible || this.opts.isMobile || this.hide(); + }), + P(this, "_onMouseDown", (e) => { + this.inFocus = !0; + }), + P(this, "_onMouseUp", (e) => { + (this.inFocus = !1), this.$el.focus(); + }), + P(this, "_onResize", () => { + this.visible && "function" != typeof this.opts.position && this.setPosition(); + }), + P(this, "_onClickOverlay", () => { + this.visible && this.hide(); + }), + P(this, "isWeekend", (e) => this.opts.weekends.includes(e)), + P(this, "getClampedDate", (e) => { + let { minDate: t, maxDate: i } = this, + s = e; + return i && m(e, i) ? (s = i) : t && v(e, t) && (s = t), s; + }), + (this.$el = a(e)), + !this.$el) + ) + return; + (this.$datepicker = n({ className: "air-datepicker" })), + (this.opts = b({}, s, t)), + (this.$customContainer = !!this.opts.container && a(this.opts.container)), + (this.$altField = a(this.opts.altField || !1)); + let { view: h, startDate: l } = this.opts; + l || (this.opts.startDate = new Date()), + "INPUT" === this.$el.nodeName && (this.elIsInput = !0), + (this.inited = !1), + (this.visible = !1), + (this.viewDate = k(this.opts.startDate)), + (this.focusDate = !1), + (this.initialReadonly = this.$el.getAttribute("readonly")), + (this.customHide = !1), + (this.currentView = h), + (this.selectedDates = []), + (this.views = {}), + (this.keys = []), + (this.rangeDateFrom = ""), + (this.rangeDateTo = ""), + (this.timepickerIsActive = !1), + (this.treatAsInline = this.opts.inline || !this.elIsInput), + this.init(); + } + init() { + let { + opts: e, + treatAsInline: t, + opts: { inline: i, isMobile: s, selectedDates: n, keyboardNav: r, onlyTimepicker: h } + } = this, + o = a("body"); + (!B || (B && j && !o.contains(j))) && !i && this.elIsInput && !this.$customContainer && K.buildGlobalContainer(K.defaultGlobalContainerId), + !s || R || t || this._createMobileOverlay(), + this._handleLocale(), + this._bindSubEvents(), + this._createMinMaxDates(), + this._limitViewDateByMaxMinDates(), + this.elIsInput && (i || this._bindEvents(), r && !h && (this.keyboardNav = new N({ dp: this, opts: e }))), + n && this.selectDate(n, { silent: !0 }), + this.opts.visible && !t && this.show(), + s && !t && this.$el.setAttribute("readonly", !0), + t && this._createComponents(); + } + _createMobileOverlay() { + (R = n({ className: "air-datepicker-overlay" })), j.appendChild(R); + } + _createComponents() { + let { + opts: e, + treatAsInline: t, + opts: { inline: i, buttons: s, timepicker: a, position: n, classes: r, onlyTimepicker: h, isMobile: o } + } = this; + this._buildBaseHtml(), + this.elIsInput && (i || this._setPositionClasses(n)), + (!i && this.elIsInput) || this.$datepicker.classList.add("-inline-"), + r && this.$datepicker.classList.add(...r.split(" ")), + h && this.$datepicker.classList.add("-only-timepicker-"), + o && !t && this._addMobileAttributes(), + (this.views[this.currentView] = new F({ dp: this, type: this.currentView, opts: e })), + (this.nav = new x({ dp: this, opts: e })), + a && this._addTimepicker(), + s && this._addButtons(), + this.$content.appendChild(this.views[this.currentView].$el), + this.$nav.appendChild(this.nav.$el); + } + _destroyComponents() { + for (let e in this.views) this.views[e].destroy(); + (this.views = {}), this.nav.destroy(), this.timepicker && this.timepicker.destroy(); + } + _addMobileAttributes() { + R.addEventListener("click", this._onClickOverlay), this.$datepicker.classList.add("-is-mobile-"), this.$el.setAttribute("readonly", !0); + } + _removeMobileAttributes() { + R.removeEventListener("click", this._onClickOverlay), + this.$datepicker.classList.remove("-is-mobile-"), + this.initialReadonly || "" === this.initialReadonly || this.$el.removeAttribute("readonly"); + } + _createMinMaxDates() { + let { minDate: e, maxDate: t } = this.opts; + (this.minDate = !!e && k(e)), (this.maxDate = !!t && k(t)); + } + _addTimepicker() { + (this.$timepicker = n({ className: "air-datepicker--time" })), + this.$datepicker.appendChild(this.$timepicker), + (this.timepicker = new O({ dp: this, opts: this.opts })), + this.$timepicker.appendChild(this.timepicker.$el); + } + _addButtons() { + (this.$buttons = n({ className: "air-datepicker--buttons" })), + this.$datepicker.appendChild(this.$buttons), + (this.buttons = new E({ dp: this, opts: this.opts })), + this.$buttons.appendChild(this.buttons.$el); + } + _bindSubEvents() { + this.on(i.eventChangeSelectedDate, this._onChangeSelectedDate), this.on(i.eventChangeFocusDate, this._onChangeFocusedDate), this.on(i.eventChangeTime, this._onChangeTime); + } + _buildBaseHtml() { + let { inline: e } = this.opts; + var t, i; + this.elIsInput + ? e + ? ((t = this.$datepicker), (i = this.$el).parentNode.insertBefore(t, i.nextSibling)) + : this.$container.appendChild(this.$datepicker) + : this.$el.appendChild(this.$datepicker), + (this.$datepicker.innerHTML = '
'), + (this.$content = a(".air-datepicker--content", this.$datepicker)), + (this.$pointer = a(".air-datepicker--pointer", this.$datepicker)), + (this.$nav = a(".air-datepicker--navigation", this.$datepicker)); + } + _handleLocale() { + let { locale: e, dateFormat: t, firstDay: i, timepicker: s, onlyTimepicker: a, timeFormat: n, dateTimeSeparator: r } = this.opts; + var h; + (this.locale = ((h = e), JSON.parse(JSON.stringify(h)))), t && (this.locale.dateFormat = t), void 0 !== n && "" !== n && (this.locale.timeFormat = n); + let { timeFormat: o } = this.locale; + if (("" !== i && (this.locale.firstDay = i), s && "function" != typeof t)) { + let e = o ? r : ""; + this.locale.dateFormat = [this.locale.dateFormat, o || ""].join(e); + } + a && "function" != typeof t && (this.locale.dateFormat = this.locale.timeFormat); + } + _setPositionClasses(e) { + if ("function" == typeof e) return void this.$datepicker.classList.add("-custom-position-"); + let t = (e = e.split(" "))[0], + i = `air-datepicker -${t}-${e[1]}- -from-${t}-`; + this.$datepicker.classList.add(...i.split(" ")); + } + _bindEvents() { + this.$el.addEventListener(this.opts.showEvent, this._onFocus), + this.$el.addEventListener("blur", this._onBlur), + this.$datepicker.addEventListener("mousedown", this._onMouseDown), + this.$datepicker.addEventListener("mouseup", this._onMouseUp), + window.addEventListener("resize", this._onResize); + } + _limitViewDateByMaxMinDates() { + let { viewDate: e, minDate: t, maxDate: i } = this; + i && m(e, i) && this.setViewDate(i), t && v(e, t) && this.setViewDate(t); + } + formatDate() { + let e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : this.viewDate, + t = arguments.length > 1 ? arguments[1] : void 0; + if (((e = k(e)), !(e instanceof Date))) return; + let i = t, + s = this.locale, + a = o(e), + n = a.dayPeriod, + r = c(e), + h = K.replacer, + l = { + T: e.getTime(), + m: a.minutes, + mm: a.fullMinutes, + h: a.hours12, + hh: a.fullHours12, + H: a.hours, + HH: a.fullHours, + aa: n, + AA: n.toUpperCase(), + E: s.daysShort[a.day], + EEEE: s.days[a.day], + d: a.date, + dd: a.fullDate, + M: a.month + 1, + MM: a.fullMonth, + MMM: s.monthsShort[a.month], + MMMM: s.months[a.month], + yy: a.year.toString().slice(-2), + yyyy: a.year, + yyyy1: r[0], + yyyy2: r[1] + }; + for (let [e, t] of Object.entries(l)) i = h(i, C(e), t); + return i; + } + down(e) { + this._handleUpDownActions(e, "down"); + } + up(e) { + this._handleUpDownActions(e, "up"); + } + selectDate(e) { + let t, + s = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {}, + { currentView: a, parsedViewDate: n, selectedDates: r } = this, + { updateTime: h } = s, + { moveToOtherMonthsOnSelect: o, moveToOtherYearsOnSelect: l, multipleDates: d, range: c, autoClose: u } = this.opts, + p = r.length; + if (Array.isArray(e)) + return ( + e.forEach((e) => { + this.selectDate(e, s); + }), + new Promise((e) => { + setTimeout(e); + }) + ); + if ((e = k(e)) instanceof Date) { + if ( + (a === i.days && e.getMonth() !== n.month && o && (t = new Date(e.getFullYear(), e.getMonth(), 1)), + a === i.years && e.getFullYear() !== n.year && l && (t = new Date(e.getFullYear(), 0, 1)), + t && this.setViewDate(t), + d && !c) + ) { + if (p === d) return; + this._checkIfDateIsSelected(e) || r.push(e); + } else if (c) + switch (p) { + case 1: + r.push(e), + this.rangeDateTo || (this.rangeDateTo = e), + m(this.rangeDateFrom, this.rangeDateTo) && ((this.rangeDateTo = this.rangeDateFrom), (this.rangeDateFrom = e)), + (this.selectedDates = [this.rangeDateFrom, this.rangeDateTo]); + break; + case 2: + (this.selectedDates = [e]), (this.rangeDateFrom = e), (this.rangeDateTo = ""); + break; + default: + (this.selectedDates = [e]), (this.rangeDateFrom = e); + } + else this.selectedDates = [e]; + return ( + this.trigger(i.eventChangeSelectedDate, { action: i.actionSelectDate, silent: null == s ? void 0 : s.silent, date: e, updateTime: h }), + this._updateLastSelectedDate(e), + u && !this.timepickerIsActive && this.visible && (d || c ? c && 1 === p && this.hide() : this.hide()), + new Promise((e) => { + setTimeout(e); + }) + ); + } + } + unselectDate(e) { + let t = this.selectedDates, + s = this; + if ((e = k(e)) instanceof Date) + return t.some((a, n) => { + if (p(a, e)) + return ( + t.splice(n, 1), + s.selectedDates.length + ? s._updateLastSelectedDate(s.selectedDates[s.selectedDates.length - 1]) + : ((s.rangeDateFrom = ""), (s.rangeDateTo = ""), s._updateLastSelectedDate(!1)), + this.trigger(i.eventChangeSelectedDate, { action: i.actionUnselectDate, date: e }), + !0 + ); + }); + } + replaceDate(e, t) { + let s = this.selectedDates.find((t) => p(t, e, this.currentView)), + a = this.selectedDates.indexOf(s); + a < 0 || + p(this.selectedDates[a], t, this.currentView) || + ((this.selectedDates[a] = t), this.trigger(i.eventChangeSelectedDate, { action: i.actionSelectDate, date: t, updateTime: !0 }), this._updateLastSelectedDate(t)); + } + clear() { + let e = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : {}; + return ( + (this.selectedDates = []), + (this.rangeDateFrom = !1), + (this.rangeDateTo = !1), + this.trigger(i.eventChangeSelectedDate, { action: i.actionUnselectDate, silent: e.silent }), + new Promise((e) => { + setTimeout(e); + }) + ); + } + show() { + let { onShow: e, isMobile: t } = this.opts; + this._cancelScheduledCall(), + this.visible || this.hideAnimation || this._createComponents(), + this.setPosition(this.opts.position), + this.$datepicker.classList.add("-active-"), + (this.visible = !0), + e && this._scheduleCallAfterTransition(e), + t && this._showMobileOverlay(); + } + hide() { + let { onHide: e, isMobile: t } = this.opts, + i = this._hasTransition(); + (this.visible = !1), + (this.hideAnimation = !0), + this.$datepicker.classList.remove("-active-"), + this.customHide && this.customHide(), + this.elIsInput && this.$el.blur(), + this._scheduleCallAfterTransition((t) => { + !this.customHide && ((t && i) || (!t && !i)) && this._finishHide(), e && e(t); + }), + t && R.classList.remove("-active-"); + } + _triggerOnSelect() { + let e = [], + t = [], + { + selectedDates: i, + locale: s, + opts: { onSelect: a, multipleDates: n, range: r } + } = this, + h = n || r, + o = "function" == typeof s.dateFormat; + i.length && ((e = i.map(g)), (t = o ? (n ? s.dateFormat(e) : e.map((e) => s.dateFormat(e))) : e.map((e) => this.formatDate(e, s.dateFormat)))), + a({ date: h ? e : e[0], formattedDate: h ? t : t[0], datepicker: this }); + } + _handleAlreadySelectedDates(e, t) { + let { range: i, toggleSelected: s } = this.opts; + i ? (s ? this.unselectDate(t) : 2 !== this.selectedDates.length && this.selectDate(t)) : s && this.unselectDate(t), s || this._updateLastSelectedDate(e); + } + _handleUpDownActions(e, t) { + if (!((e = k(e || this.focusDate || this.viewDate)) instanceof Date)) return; + let i = "up" === t ? this.viewIndex + 1 : this.viewIndex - 1; + i > 2 && (i = 2), i < 0 && (i = 0), this.setViewDate(new Date(e.getFullYear(), e.getMonth(), 1)), this.setCurrentView(this.viewIndexes[i]); + } + _handleRangeOnFocus() { + 1 === this.selectedDates.length && + (m(this.selectedDates[0], this.focusDate) + ? ((this.rangeDateTo = this.selectedDates[0]), (this.rangeDateFrom = this.focusDate)) + : ((this.rangeDateTo = this.focusDate), (this.rangeDateFrom = this.selectedDates[0]))); + } + getCell(e) { + let t = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : i.day; + if (!((e = k(e)) instanceof Date)) return; + let { year: s, month: a, date: n } = o(e), + r = `[data-year="${s}"]`, + h = `[data-month="${a}"]`, + l = { [i.day]: `${r}${h}[data-date="${n}"]`, [i.month]: `${r}${h}`, [i.year]: `${r}` }; + return this.views[this.currentView].$el.querySelector(l[t]); + } + _showMobileOverlay() { + R.classList.add("-active-"); + } + _hasTransition() { + return ( + window + .getComputedStyle(this.$datepicker) + .getPropertyValue("transition-duration") + .split(", ") + .reduce((e, t) => parseFloat(t) + e, 0) > 0 + ); + } + get shouldUpdateDOM() { + return this.visible || this.treatAsInline; + } + get parsedViewDate() { + return o(this.viewDate); + } + get currentViewSingular() { + return this.currentView.slice(0, -1); + } + get curDecade() { + return c(this.viewDate); + } + get viewIndex() { + return this.viewIndexes.indexOf(this.currentView); + } + get isFinalView() { + return this.currentView === i.years; + } + get hasSelectedDates() { + return this.selectedDates.length > 0; + } + get isMinViewReached() { + return this.currentView === this.opts.minView || this.currentView === i.days; + } + get $container() { + return this.$customContainer || j; + } + static replacer(e, t, i) { + return e.replace(t, function (e, t, s, a) { + return t + i + a; + }); + } + } + var U; + return P(K, "defaults", s), P(K, "version", "3.3.5"), P(K, "defaultGlobalContainerId", "air-datepicker-global-container"), (U = K.prototype), Object.assign(U, I), t.default; + })(); +}); diff --git a/assets/js/common.js b/assets/js/common.js new file mode 100644 index 0000000..ed60405 --- /dev/null +++ b/assets/js/common.js @@ -0,0 +1,26 @@ +// window.onload = function(){ +// document.documentElement.dataset.theme='dark'; +// }; + +// light-dark mode 클릭 +if(document.querySelector('.lightmode')){ + + if(localStorage.getItem("lightmode") == 'on'){ + document.documentElement.dataset.theme='light'; + document.querySelector('#toggle-radio-light').checked = true; + } + + //이벤트 클릭 + document.querySelector('.lightmode').addEventListener("click", e=>{ + if(e.target.classList.contains('tolight')){ + document.documentElement.dataset.theme='light'; + localStorage.setItem("lightmode", "on"); + }else if(e.target.classList.contains('todark')){ + document.documentElement.dataset.theme='dark'; + localStorage.setItem("lightmode", "off"); + } + },false); + +}else{ + localStorage.removeItem("lightmode"); +} \ No newline at end of file diff --git a/assets/js/jquery.min.js b/assets/js/jquery.min.js new file mode 100644 index 0000000..d467083 --- /dev/null +++ b/assets/js/jquery.min.js @@ -0,0 +1,2 @@ +/*! jQuery v3.5.1 | (c) JS Foundation and other contributors | jquery.org/license */ +!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.5.1",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e.namespaceURI,n=(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},D=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function D(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||j,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,j=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="",y.option=!!ce.lastChild;var ge={thead:[1,"","
"],col:[2,"","
"],tr:[2,"","
"],td:[3,"","
"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n",""]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d\s*$/g;function qe(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function Le(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function He(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Oe(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var Ut,Xt=[],Vt=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=Xt.pop()||S.expando+"_"+Ct.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Vt.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Vt.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Vt,"$1"+r):!1!==e.jsonp&&(e.url+=(Et.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,Xt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((Ut=E.implementation.createHTMLDocument("").body).innerHTML="
",2===Ut.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):("number"==typeof f.top&&(f.top+="px"),"number"==typeof f.left&&(f.left+="px"),c.css(f))}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=$e(y.pixelPosition,function(e,t){if(t)return t=Be(e,n),Me.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0 + + + +KISA + + + + + + + + + +
+
+
+
+
+

+ + + +

+
+ +
+
+ +
+
+

Button

+
+ +
+
+
+
Box
+
+
+
+ + + +
+
+ +
+
+ + + +
+
+ +
+
+ + + +
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+
+ + + + + + \ No newline at end of file