You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
8736 lines
167 KiB
8736 lines
167 KiB
@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;
|
|
}
|