@charset "UTF-8"; /*가이드에서만 쓰이는 레이아웃 스타일*/ :root { --bg_02: #04091A; --bg_02_template: #050A1F; --bg_01:#0A0F24; --background-bg_01:#0A0F24; --bg_01_40: rgba(10, 11, 20, 0.4); --bg_02_60: rgba(4, 9, 26, 0.60); --primary-pri_6: rgba(39, 212, 255, 0.06); --white-w_100: #ffffff; --white-w_100-sec: #ffffff; --white-w_87: rgba(255, 255, 255, 0.87); --white-w_87-sec: rgba(255, 255, 255, 0.87); --white-w_60: rgba(255, 255, 255, 0.6); --white-w_40: rgba(255, 255, 255, 0.4); --white-w_40-sec: rgba(255, 255, 255, 0.4); --white-w_30: rgba(255, 255, 255, 0.3); --white-w_20: rgba(255, 255, 255, 0.2); --white-w_16: rgba(255, 255, 255, 0.16); --white-w_12: rgba(255, 255, 255, 0.12); --box1_border:rgba(39, 212, 255, 0.4); --bg_01_80: rgba(11, 17, 41, 0.8); --line-wh_12-to-40: rgba(255, 255, 255, 0.12); --line-wh_20-to-100: rgba(255, 255, 255, 0.2); --line-wh_30-to-60: rgba(255, 255, 255, 0.3); --line-wh_12-to-100: rgba(255, 255, 255, 0.12); --line-pri_40-to-wh_40: rgba(39, 212, 255, 0.40); --line-pri_40-to-bk_40: rgba(39, 212, 255, 0.40); --icon-pri_20-to-100: rgba(34, 212, 255, 0.20); --more-bright-wh_6-to-60: rgba(255, 255, 255, 0.06); --white-w_6: rgba(255, 255, 255, 0.06); --line-pri_40-to-wh_100: rgba(39, 212, 255, 0.40); --etc-bg: #04091A; --etc-popup_tit: rgba(39, 212, 255, 0.60); --background-blur_0260: rgba(56, 61, 82, 0.60); --point-error: #D60000; --point-error-10: rgba(219, 0, 0, 0.08); --blur_02_60: rgba(55, 61, 82, 0.60); --bg-blur_02_60: rgba(55, 61, 82, 0.60); --radio-default: rgba(255, 255, 255, 0.6); --control-disabled: bg_grey10; --background-legend: rgba(74, 78, 102, 0.8); --icon-icon-selected: rgba(39, 212, 255, 0.40); --group-icon-selected: rgba(39, 212, 255, 0.40); --map-ver2-hover: rgba(39, 212, 255, 0.40); --background-blur_02_60: rgba(55, 61, 82, 0.60); --background-blur_01_20: rgba(162, 164, 184, 0.20); --navigation-bg: #1F2333; --etc-FNB: rgba(39, 212, 255, 0.12); --black-bk_100: #000; --etc-b_text: #338FFF; --etc-b_text2: #338FFF; --PRI: #84C01D; --bg_body: #030914; --alpha-bk-to-whbk-20: rgba(255, 255, 255, 0.20); --alpha-wh-to-bkwh-60: rgba(0, 0, 0, 0.60); --alpha-wh-to-bkwh-100: #000; --alpha-white-w_100: ; --wh-12: rgba(255, 255, 255, 0.12); --alpha-bk-to-whbk-10: rgba(255, 255, 255, 0.10); --alpha-bk-to-whbk-87: rgba(255, 255, 255, 0.87); --alpha-bk-to-whbk-100: rgba(255, 255, 255, 0.87); --alpha-bk-to-whbk-60: rgba(255, 255, 255, 0.60); --alpha-bk-to-whbk-40: rgba(255, 255, 255, 0.40); } :root[data-theme=light] { --bg_02: #ffffff; --bg_02_template: #DCDDE0; --bg_01: #F5F6FA; --background-bg_01: #ffffff; --bg_01_40: #F3F5FD; --bg_02_60: rgba(245, 247, 255, 0.90); --primary-pri_12-to-bk: #000; --primary-pri_6: rgba(0, 104, 230, 0.06); --white-w_100: #ffffff; --white-w_100-sec: #000; --white-w_87: rgba(0, 0, 0, 0.87); --white-w_87-sec: #000; --white-w_60: rgba(0, 0, 0, 0.6); --white-w_40: rgba(0, 0, 0, 0.4); --white-w_40-sec: rgba(255, 255, 255, 0.4); --white-w_30: rgba(0, 0, 0, 0.3); --white-w_20: rgba(0, 0, 0, 0.2); --white-w_16: rgba(0, 0, 0, 0.16); --white-w_12: rgba(0, 0, 0, 0.12); --box1_border: #ffffff; --bg_01_80: rgba(245, 246, 250, 0.90); --icon-pri_20-to-100: #0067E6; --white-w_6: rgba(0, 0, 0, 0.06); --line-pri_40-to-wh_100: #ffffff; --etc-bg: #ffffff; --etc-popup_tit: rgba(0, 104, 230, 0.80); --background-blur_0260: rgba(56, 61, 82, 0.60); --point-error: #D60000; --point-error-10: rgba(219, 0, 0, 0.08); --blur_02_60: rgba(255, 255, 255, 0.9); --bg-blur_02_60: rgba(55, 61, 82, 0.60); --grade-chart-gco-01: #FC5C34; --radio-default: rgba(0, 0, 0, 0.6); --control-disabled: bg_grey10; --icon-icon-selected: #ffffff; --group-icon-selected: rgba(51, 143, 255, 0.40); --navigation-bg: #E1E2E5; --etc-FNB:rgba(245, 246, 250, 0.90); --black-bk_100: #ffffff; --etc-b_text: #139DF2; --PRI: #87C718; --bg_body: #030914; --alpha-bk-to-whbk-20: rgba(0, 0, 0, 0.20); --alpha-wh-to-bkwh-60: rgba(255, 255, 255, 0.20); --alpha-wh-to-bkwh-100: ; --alpha-white-w_100: #FFF; --wh-12: ; --alpha-bk-to-whbk-10: rgba(0, 0, 0, 0.10); --alpha-bk-to-whbk-87: rgba(0, 0, 0, 0.87); --alpha-bk-to-whbk-100: #000; --alpha-bk-to-whbk-60: rgba(0, 0, 0, 0.60); --alpha-bk-to-whbk-40: rgba(0, 0, 0, 0.40); } /*mode button*/ .lightmode > .inner { position: relative; display: inline-flex; padding: 0.313rem; border-radius: 1.5em; background-color: rgba(237, 237, 237, 0.3); } html[data-theme=light] .lightmode > .inner.ver1 { background-color: var(--PRI); } .outer { padding: 4px; border-radius: 50px; background-color: var(--wh-12); display: flex; gap: 12px; width: 100%; } .lightmode label { cursor: pointer; } .lightmode label:first-of-type { padding: 2px; border-radius: 50px; } .lightmode label:last-of-type { padding: 2px; border-radius: 50px; } .lightmode i { font-size: 1.2em; color: #aaa; } .lightmode input[type=radio] { display: none; } .lightmode input[type=radio]:checked + label > i { color: rgb(135, 199, 24); transition: all 0.35s ease-in-out; } .circle_dark { background: var(--alpha-wh-to-bkwh-100); display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; padding: 2px; } .circle_light { background: var(--alpha-white-w_100); display: flex; align-items: center; justify-content: center; height: 30px; width: 30px; padding: 2px; } /**/ /*Contents*/ .guide_back { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0; } .guide_wrap { background: var(--etc-bg); color: var(--white-w_87); position: relative; width: 100%; min-height: 100%; overflow: hidden; padding: 1.875rem 0; } .guide_wrap.grey { background-color: #1A1D29; } .guide_wrap.two_line { padding: 3.75rem 0; } .guide_center { width: 77.5rem; margin: 0 auto; padding: 1.25rem; } .guide_center.width1720 { width: 107.5rem; } .guide_top { display: flex; align-items: flex-end; justify-content: space-between; -moz-column-gap: 1rem; column-gap: 1rem; width: 100%; height: 4.75rem; padding: 0 0 1rem; border-bottom: 0.063rem solid var(--white-w_30); } .guide_top h1 { font-size: 40px; font-weight: 700; color: #fff; } html[data-theme=light] .guide_top h1 { color: #000; } .Gr_contents { width: 100%; margin: 2.5rem 0 4.375rem; } .comp_top { display: flex; align-items: flex-end; justify-content: space-between; -moz-column-gap: 1rem; column-gap: 1rem; width: 100%; padding: 0 0 1.875rem; } .comp_top h2 { font-size: 24px; font-weight: 700; color: var(--white-w_87); } .comp_dl { width: 100%; display: flex; -moz-column-gap: 0.75rem; column-gap: 0.75rem; margin: 0 0 1.5rem; } .comp_dt { font-size: 16px; font-weight: 500; width: 6.25rem; padding: 1.25rem 0 0 0; } .comp_dd { flex: 1; } .compline { display: flex; align-items: center; flex-wrap: wrap; margin: 0.75rem 0; -moz-column-gap: 0.5rem; column-gap: 0.5rem; } .compline.box { background: var(--white-w_6); } .comp_size { font-size: 12px; font-weight: 400; color: rgba(255, 255, 255, 0.6); width: 2.5rem; text-align: center; } .components { display: flex; align-items: center; flex: 1; gap: 0.75rem; } .flex_wrap { flex-wrap: wrap !important; } .flex_one { flex: 1 !important; } /*template*/ footer { position: fixed; width: 100%; bottom: 0; z-index: 200; } .main_back { position: absolute; width: 100%; height: 100%; overflow: hidden; } .main_wrap { position: relative; width: 100%; height: 100%; background: var(--bg_02_template); } .main_contents { width: 100%; height: 100%; position: relative; background: url("../images/background_img.png"); background-repeat: no-repeat; background-size: cover !important; } .marker_wrap { position: absolute; } .board_line.signal.right { position: absolute; display: flex; top: 3.5rem; right: 1.25rem; z-index: 100; } .scroll.sc_y.table { height: 8.25rem; padding: 0; } .scroll.sc_y.signal { padding: 0; margin-right: 0.5rem; } .footer_in { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; padding-left: 1.25rem; padding-right: 1.25rem; padding-bottom: 1.25rem; } .table_box.signal tr.selected, .table_box.signal tr:focus, .table_box.signal tr.hover { background: var(--primary-pri_12); } .table_box.signal th { position: static; height: 2rem; } .table_box.signal th, .table_box.signal td:not(.disable), .table_box.signal td:not(.disabled) { border-right: 0.063rem solid rgba(255, 255, 255, 0.12); } .table_box.signal th:last-child, .table_box.signal td:not(.disable):last-child, .table_box.signal td:not(.disabled):last-child { border-right: 0; } .table_box.signal td { height: 1.75rem; border-top: 0.125rem solid var(--etc-bg) !important; } .table_box.signal td p { text-align: center !important; cursor: pointer; } .user_table { font-size: 13px; font-weight: 400; color: var(--white-w_87-sec); width: 100%; border-collapse: separate; border-spacing: 0 0.125rem; } .user_table tr.selected, .user_table tr:hover, .user_table tr:focus, .user_table tr.hover { background: var(--primary-pri_12); } .user_table th { position: relative; z-index: 1; top: 0; height: 2.25rem; background: rgba(255, 255, 255, 0.16); background: var(--more-visible-wh_6-to-100); background: var(--more-visible-wh_16-to-6); font-weight: 500; } .user_table th, .user_table td { border-right: 0.063rem solid var(--white-w_12); } .user_table th:last-child, .user_table td:last-child { border-right: 0; } .user_table td { height: 2.25rem; border-top: 0.188rem solid transparent !important; } .user_table td.on { background: rgba(39, 212, 255, 0.2); } .user_table .row_type1 { background: rgba(255, 255, 255, 0.16); } .user_table .row_type2 { background: var(--more-visible-wh_6-to-100); } .user_table .row_error { background: rgba(219, 0, 0, 0.08); color: #FF1F55; } .arrow.left { transform: rotate(180deg); } .arrow.up { transform: rotate(270deg); } .arrow.down { transform: rotate(90deg); } .grey_box { display: flex; -webkit-backdrop-filter: blur(1.875rem); backdrop-filter: blur(1.875rem); top: 33%; left: 30%; } .grey_box.login { z-index: 0; width: 44.563rem; padding: 3rem; border-radius: 0.125rem; border: 0.063rem solid rgba(255, 255, 255, 0.12); background: rgba(162, 164, 184, 0.2); -webkit-backdrop-filter: blur(3.75rem); backdrop-filter: blur(3.75rem); } .grey_box.login p { position: relative; z-index: 200; width: 0.063rem; background: rgba(255, 255, 255, 0.2); align-self: stretch; } .grey_box.error { display: block; z-index: 0; width: 44.563rem; padding: 5rem; border-radius: 0.125rem; border: 0.063rem solid rgba(255, 255, 255, 0.3); background: var(--background-blur_01_20); -webkit-backdrop-filter: blur(3.75rem); backdrop-filter: blur(3.75rem); opacity: 1; } .marker_main { position: absolute; bottom: 40%; left: 50%; } .hd_profile { position: relative; width: 1.875rem; height: 1.25rem; } .hd_profile .member_popover { display: none; } .hd_profile.profile_open .member_popover, .hd_profile.profile_open .member_toggle { display: block; } .hd_profile.profile_open .btn_profile .comma_under8 { opacity: 1; transform: rotate(180deg); } .hd_profile.profile_open .profile20 { opacity: 1; } .popover_box.main { position: absolute; display: none; bottom: 3rem; left: -2.5rem; z-index: 100; } .popover_box.main.legend { display: block; } .popover_box.main.pop { display: block; } .popover_box.main.pop_hide { display: none; } .case_wrap { display: flex; -moz-column-gap: 0.5rem; column-gap: 0.5rem; width: 100%; height: calc(100% - 1.125rem); } .case_box { padding: 0.25rem; border-radius: 0.125rem; background: var(--white-w_6); width: 100%; } .case_box .case_number { display: flex; align-items: center; justify-content: center; font-weight: 700; width: 100%; height: calc(100% - 0.875rem); color: var(--white-w_87); } .case_grid { display: grid; grid-template-columns: repeat(3, 1fr); -moz-column-gap: 0.5rem; column-gap: 0.5rem; row-gap: 0.5rem; } .chart_box { display: flex; align-items: center; justify-content: center; height: calc(100% - 0.875rem); -moz-column-gap: 2.5rem; column-gap: 2.5rem; } .rate_content { display: grid; row-gap: 1rem; height: calc(100% - 3.25rem); } .rate_box { width: 100%; height: 100%; padding: 0.75rem; border-radius: 0.125rem; background: var(--more-visible-wh_6-to-100); } .ch_label { display: flex; align-items: center; } .ch_label .word { font-size: 11px; font-weight: 400; color: var(--white-w_87-sec); margin: 0.25rem 0 0.25rem 0.25rem; line-height: 1.1; word-break: keep-all; } .chart_cont { display: flex; align-items: center; justify-content: center; position: relative; width: 9rem; height: 4.891rem; padding: 0.5rem; overflow: hidden; background: url(../images/bg_tract.svg) no-repeat left top; background-size: 100% 100%; } .chart_cont .chart_tlt { position: absolute; left: 1.25rem; top: 1.25rem; margin-bottom: 0.5rem; } .chart_cont .chart_result { padding: 1rem 0 0; } .chart_result { display: flex; align-items: flex-end; font-size: 1.5rem; font-weight: 700; -moz-column-gap: 0.375rem; column-gap: 0.375rem; } .chart_result .unit { font-size: 14px; font-weight: 400; line-height: 1.7; } .user_wrap { width: 100%; height: 100%; padding-top: 2.5rem; } .user_content { display: flex; -moz-column-gap: 1rem; column-gap: 1rem; width: 100%; height: 100%; padding: 1.25rem; } .personal_box, .system_box { -webkit-backdrop-filter: blur(1.875rem); backdrop-filter: blur(1.875rem); width: 100%; height: 100%; border: 0.063rem solid var(--line-pri_40-to-wh_40); background: var(--bg_01_80); box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16); width: 28.625rem; } .user_box { -webkit-backdrop-filter: blur(1.875rem); backdrop-filter: blur(1.875rem); width: 100%; height: 100%; padding: 1.25rem; border: 0.063rem solid var(--line-pri_40-to-wh_40); background: var(--bg_01_80); box-shadow: 0.25rem 0.25rem 1rem 1rem rgba(4, 9, 26, 0.16); flex: 1; } .table_inner { margin-top: 0.75rem; width: 100%; height: calc(100% - 2.625rem); } .title_box { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .user_title { font-size: 16px; font-weight: 700; color: var(--primary-to-grayscale-to-bk); height: 1.5rem; } .user_btn { height: 1.75rem; padding: 0.5rem 0; word-break: keep-all; } .error_logo { position: absolute; top: -10%; left: 50%; transform: translate(-50%, 0); z-index: 1; } .logo_login { width: 12.5rem; } .hd_profile { position: relative; width: 1.875rem; height: 1.25rem; } .hd_profile .member_popover { display: none; } .hd_profile.profile_open .member_popover, .hd_profile.profile_open .member_toggle { display: block; } .hd_profile.profile_open .btn_profile .comma_under8 { opacity: 1; transform: rotate(180deg); } .hd_profile.profile_open .profile20 { opacity: 1; } .login_title { color: var(--white-w_100-sec); } /* html data-theme */ html[data-theme=light] .sp_logo_uniplus { background: url("../images/logo_uniplus_light.svg") no-repeat left center; background-size: cover; } html[data-theme=light] .gnb ul li a { color: var(--more-visible-wh_60-to-100); } html[data-theme=light] .guide_top h1 { color: #000; } html[data-theme=light] button.mode img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] button.mode .img_on { filter: invert(41%) sepia(90%) saturate(6305%) hue-rotate(205deg) brightness(94%) contrast(101%); } html[data-theme=light] button:hover:not(.hover):not(.legend):not(.selected):not(.disabled) .circle_grey28.popover img, html[data-theme=light] button:active .circle_grey28.popover img, html[data-theme=light] button.selected .circle_grey28.popover img { filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); } html[data-theme=light] button:hover:not(.hover):not(.legend):not(.selected):not(.disabled) .circle_grey28.popover .img_on, html[data-theme=light] button:active .circle_grey28.popover .img_on, html[data-theme=light] button.selected .circle_grey28.popover .img_on { filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); } html[data-theme=light] .btn_srch28 span img:not(.on) { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .btn_srch28.mode:active img { filter: none; } html[data-theme=light] .btn_srch28:active:not(.selected) span img:not(.on) { filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); } html[data-theme=light] .btn_srch28.on span img { filter: brightness(0) saturate(100%) invert(100%) sepia(5%) saturate(0%) hue-rotate(72deg) brightness(103%) contrast(102%); } html[data-theme=light] .arrow_box img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .btn_secondary img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .btn_primary.disabled img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); opacity: 0.6; } html[data-theme=light] .btn_file img, html[data-theme=light] .preview_box img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .arr_up img, html[data-theme=light] .arr_right img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .datepicker { background-image: url(../images/calendar_gray_24.svg); } html[data-theme=light] .datepicker:focus, html[data-theme=light] .datepicker.on { background-image: url(../images/calendar_blue_24.svg); } html[data-theme=light] .action_prev, html[data-theme=light] .action_next { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .stepper_arrow img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .play_circle img { content: url("../images/play_circle_light_20.svg"); } html[data-theme=light] .selectbox_arrow img, html[data-theme=light] .selectbox img, html[data-theme=light] .selectboxSample img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .bt_srch { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .selector { background-image: url("../images/arrow_down_gray_16.svg"); } html[data-theme=light] .selector.sm.color { background-image: url(../images/arrow_down_light_16.svg); background-repeat: no-repeat; background-position: 93% 42%; background-size: 1rem 1rem; } html[data-theme=light] .lnb_box img { filter: brightness(0) saturate(100%) invert(0%) sepia(96%) saturate(7483%) hue-rotate(231deg) brightness(99%) contrast(104%); } html[data-theme=light] .main_contents { width: 100%; height: 100%; background-size: cover; background: url("../images/background_light_img.png") no-repeat center center; } html[data-theme=light] .main_contents.login_ver1 { background: url("../images/login_light_ver1.png") no-repeat; } html[data-theme=light] .main_contents.error { background: url("../images/error_background_light.png") no-repeat center center; } html[data-theme=light] .main_contents.error2 { background: url("../images/error2_background_light.svg") no-repeat center bottom; background-size: contain; } html[data-theme=light] .login_logo { content: url("../images/logo_light_big.svg"); } html[data-theme=light] .hamberger_btn { content: url("../images/hamburger_bk_24.svg"); } html[data-theme=light] .logo_hd_kisa { content: url("../images/logo_light.svg"); } html[data-theme=light] .bell img { content: url("../images/bell_bk_20.svg"); } html[data-theme=light] .user img { content: url("../images/user_bk_20.svg"); } html[data-theme=light] .light_none { display: none; } html[data-theme=light] .light_hidden { visibility: hidden; } html[data-theme=light] .grey_box.login { border: 0.063rem solid rgba(255, 255, 255, 0.3); background: var(--bg_01_80); } html[data-theme=light] .grey_box.login p { background: rgba(0, 0, 0, 0.2); } html[data-theme=light] .indicator { box-shadow: 0.25rem 0.25rem 1rem 0 rgba(4, 9, 26, 0.16); } /* html data-theme End */