@charset "utf-8"; @import url("https://fonts.googleapis.com/css2?family=Aldrich&display=swap"); @import url(/index/css/reset.css); @import url(/index/css/system.css); /* js를 위한 id값 ===== ===== ===== ===== ===== */ #mapContainer { position: absolute; width: 100dvw; height: 100dvh; margin: 0; padding: 0; overflow: hidden; z-index: 0; } /* 라디오박스 스타일 변경 ===== ===== ===== ===== ===== */ input[type="radio"] { display: none; } .radio-label { display: inline-flex; align-items: center; cursor: pointer; font-size: 0.75rem; line-height: 1rem; } .radio-custom-inbox { width: 0.75rem; height: 0.75rem; border: 0.0625rem solid #aaa; border-radius: 50%; display: inline-block; position: relative; margin-right: 0.5rem; } .radio-label input[type="radio"]:checked+.radio-custom-inbox::before { content: ""; width: 0.375rem; height: 0.375rem; background: #111; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } input[type="radio"]:checked~.radio-custom-inbox { border-color: #aaa; } /* 스타일 시작 ===== ===== ===== ===== ===== */ .search-box { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0.25rem 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .search-box input[type="text"]::placeholder { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; color: #aaa; } input[type="text"] { font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; color: #111; width: 100%; } input[type="text"]:focus { outline: none; border: none; } main { padding: 0; pointer-events: none; display: flex; height: calc(100dvh - 4.5rem); width: 100%; gap: 0.5rem; position: absolute; z-index: 1; top: 2.25rem; } /* aside { background-color: var(--primary-lv-0); width: 20rem; min-width: 20rem; min-width: 20rem; border-right: 0.0625rem solid var(--primary-lv-2); height: calc(100dvh - 4.5rem); max-height: calc(100dvh - 4.5rem); min-height: calc(100dvh - 4.5rem); pointer-events: all; } */ .tabs { display: flex; } .tab-btn { width: 50%; padding: 0.5rem 0; background-color: #fff; color: #111; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; cursor: pointer; border-bottom: 0.0625rem solid var(--primary-lv-2); } .tab-btn.active { background-color: var(--primary-lv-0); color: var(--primary-lv-6); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; cursor: pointer; border-bottom: none; } .tab-content { padding: 0.5rem 1rem; height: calc(100dvh - 6.75rem); max-height: calc(100dvh - 6.75rem); min-height: calc(100dvh - 6.75rem); overflow: hidden; overflow-y: auto; } .list-set { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; } .list-set--title { color: var(--primary-lv-6); display: flex; align-items: center; gap: 0.5rem; padding-top: 0.25rem; } .list-set--title h4 { color: var(--primary-lv-3); } li { display: flex; align-items: flex-start; gap: 0.5rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; } /* li h4 { flex-grow: 1; } */ li:hover { background-color: var(--primary-lv-1); transition: all 0.1s; } hr { border: none; border-top: 0.0625rem solid var(--primary-lv-2); margin: 0; } .list-inner { padding-left: 1.5rem; } .list-inner li h4 { width: 11rem; /* overflow-wrap: break-word; word-break: break-all; */ } .category { width: 2.5rem; min-width: 2.5rem; max-width: 2.5rem; } .project-name { flex-grow: 1; } .modal-wrap { display: flex; gap: 0.5rem; position: absolute; top: 0.5rem; right: 0.5rem } .window { width: 7.75rem; height: fit-content; display: flex; flex-direction: column; border-radius: 0.25rem; border: 0.0625rem solid #aaa; background-color: #fff; pointer-events: all; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16); } .window__bottom { width: 10.75rem; height: fit-content; display: flex; flex-direction: column; border-radius: 0.25rem; border: 0.0625rem solid #aaa; background-color: #fff; pointer-events: all; position: absolute; bottom: 0; right: 0; margin: 2.375rem 0.5rem; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16); } ._status { width: 14.5rem; display: block; top: 0; } .window-header { display: flex; justify-content: space-between; cursor: pointer; padding: 0.5rem 0.5rem 0.5rem 1rem; } .window-body { display: flex; flex-direction: column; gap: 1rem; padding: 0 0.5rem 1rem; } .window-body-content { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 0.5rem; } /* 텍스트버튼디자인 */ .xs-btn-type-icon { position: absolute; bottom: 0; right: 0; margin: 0.5rem; pointer-events: all; border-color: #111; } .xs-btn-type-icon.on { background-color: var(--primary-lv-2); } .xs-btn-type-icon.on h6 { font-weight: 500; } ._top { position: absolute; top: 0; right: 0; margin: 0.5rem; pointer-events: all; border-color: #111; } .xs-btn-type-icon:hover { background-color: var(--primary-lv-0); } .xs-btn-type-done { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-green-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-green); } .xs-btn-type-active { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-blue-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-blue); } .xs-btn-type-stop { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-steel-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-steel); } .xs-btn-type-bid { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-magenta-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-magenta); } .xs-btn-type-support { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-yellow-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-yellow); } /* overseas용 */ .xs-btn-type-아시아 { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-green-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-green); } .xs-btn-type-아프리카 { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-blue-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-blue); } .xs-btn-type-남아메리카 { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-steel-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-steel); } .xs-btn-type-북아메리카 { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid var(--color-magenta-medium); padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; color: var(--color-magenta); } /* overseas용 end*/ .logout-btn { display: flex; align-items: center; gap: 0.25rem; padding: 0 0.25rem; border-radius: 0.25rem; margin-left: auto; position: absolute; right: 9.75rem; border: 0.0625rem solid #ddd; background-color: #fff; color: #111; min-height: 1.25rem; max-height: 1.25rem; } .logout-btn:hover { background-color: var(--primary-lv-0); cursor: pointer; } .custom-checkbox { display: inline-flex; align-items: center; cursor: pointer; } .custom-checkbox input { display: none; } .custom-checkbox .checkmark { width: 1rem; height: 1rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; margin-right: 0.5rem; position: relative; } .custom-checkbox input:checked+.checkmark::after { display: block; z-index: 999; content: ''; position: absolute; width: 1rem; height: 1rem; background-image: url('/index/img-onpremise/icon__checked--primary-lv-6.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* 텍스트라벨디자인 */ /* .point { text-align: center; pointer-events: all; height: fit-content; } .point-title::before { content: ""; position: absolute; bottom: -14px; left: 50%; transform: translateX(-50%); width: 20px; height: 14px; background: black; clip-path: polygon(50% 100%, 0 0, 100% 0); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; z-index: 0; } .point-title::after { content: ""; position: absolute; bottom: -12px; left: 50%; transform: translateX(-50%); width: 18px; height: 12px; background: white; clip-path: polygon(50% 100%, 0 0, 100% 0); border-bottom-left-radius: 2px; border-bottom-right-radius: 2px; z-index: 1; } .point-title { display: flex; gap: var(--box-gap); border: 0.063rem solid var(--type-lv2-body); background: white; padding: var(--box-gap) var(--box-gap-hz) var(--box-gap) var(--box-gap); border-radius: var(--border-radius); width: max-content; position: relative; box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.2); } */ /* 스크롤바 ===== ===== ===== ===== ===== */ .--scrollbar::-webkit-scrollbar { width: 0.5rem; } .--scrollbar::-webkit-scrollbar-track { background: transparent } .--scrollbar::-webkit-scrollbar-thumb { background-color: #aaa; border: 0.125rem solid transparent; border-radius: 0.25rem; background-clip: padding-box; } .--scrollbar::-webkit-scrollbar-thumb:hover { background-color: #777; cursor: pointer; } /* // 스크롤바 ===== ===== ===== ===== ===== */ /* 아이콘타입 버튼 */ .xs-btn { display: flex; justify-content: center; align-items: center; background-color: #fff; min-height: 1.25rem; max-height: 1.25rem; min-width: 1.25rem; max-width: 1.25rem; border-radius: 0.25rem; border: 0.0625rem solid #ddd; cursor: pointer; } /* 텍스트타입 버튼 */ .xs-btn-type { background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; } /* 아이콘+텍스트타입 버튼 */ .xs-btn-type-icon { display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; padding: 0 0.25rem 0 0.125rem; gap: 0.125rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; } /* 아이콘+텍스트타입 버튼 */ .xs-btn-type-icon-header { display: flex; justify-content: center; align-items: center; background-color: var(--primary-lv-5); border-radius: 0.25rem; border: 0.0625rem solid var(--primary-lv-4); padding: 0 0.25rem 0 0.125rem; color: #fff; gap: 0.125rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; } .xs-btn-type-icon-header:hover { background-color: var(--primary-lv-4); } /* header.css 정의 ===== ===== ===== ===== ===== */ header { background-color: #1E5149; width: 100dvw; min-height: 2.25rem; max-height: 2.25rem; display: flex; align-items: center; padding: 0 1rem; color: #fff; position: absolute; z-index: 3; top: 0; pointer-events: all; gap: 0.825rem; } .--logo__project-master { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-family: "Aldrich"; color: #fff; } header h4 { color: var(--primary-lv-3); } header a { display: flex; justify-content: center; align-items: center; height: 2rem; } .header-left { display: flex; align-items: center; gap: 0.25rem; cursor: pointer; } .end { margin-left: 0.5rem; } .header-left h6 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .header-right h4 { color: var(--primary-lv-3); } .header-right { display: flex; gap: 0.5rem; max-width: fit-content; min-width: fit-content; margin-left: 0.25rem; justify-content: flex-end; align-items: center; } .header-name { display: flex; align-items: center; gap: 0.25rem; } .header-name::before { content: ""; width: 0.0625rem; height: 0.75rem; background-color: var(--primary-lv-2); opacity: 0.4; margin-right: 0.75rem; } .header-others { display: flex; align-items: center; gap: 0.25rem; } .header-permission { display: flex; gap: 0.25rem; } .header-btn-admin { display: flex; gap: 0.125rem; background-color: rgba(0, 0, 0, 0); color: var(--primary-lv-3); font-weight: 500; cursor: pointer; opacity: 0.4; } .header-btn-logout { background-color: rgba(0, 0, 0, 0); color: var(--primary-lv-3); font-weight: 500; cursor: pointer; text-decoration: underline; opacity: 0.4; } img[alt="hambuger"] { display: none; } .header-others-number { display: none; } /* footer.css 정의 ===== ===== ===== ===== ===== */ footer { background-color: #fff; width: 100dvw; min-height: 2.25rem; max-height: 2.25rem; display: flex; justify-content: space-between; padding: 0 1rem; color: #777; position: absolute; z-index: 3; bottom: 0; pointer-events: all; border-top: 0.0625rem solid #ddd; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16); } footer p, footer h5 { color: #777; } .footer-left { display: flex; align-items: center; /* gap: 0.125rem; */ } .footer-left a p { text-decoration: underline; } .footer-middle { display: flex; align-items: center; padding-right: 1rem; } footer button { background-color: rgba(0, 0, 0, 0); } footer button p { text-decoration: underline; } .coordinate { cursor: pointer; } .getComponent { margin-left: 0.25rem; } .footer-section { margin-left: 2rem; display: flex; align-items: center; gap: 0.25rem; } .footer-right { display: flex; align-items: center; gap: 0.5rem; } .footer-gauge { max-width: 6.25rem; min-width: 6.25rem; max-height: 0.25rem; min-height: 0.25rem; border-radius: 0.25rem; background-color: rgba(119, 119, 119, 0.2); margin-left: 0.5rem; } .footer-left span { font-size: 0.75rem; line-height: 1.25rem; color: #777; } #scalebar_wrap { justify-content: left !important; height: 0.25rem; background-color: #ccc; opacity: 0.6; border-radius: 0.25rem; margin-left: 0.5rem; } #scalebar { height: 0.25rem; background-color: #777; border-radius: 0.25rem; } .footer_indicator_latitude, .footer_indicator_longitude { display: block; /* text-align: right; */ min-width: 7.5rem; max-width: 7.5rem; width: 7.5rem; /* letter-spacing: 1px; */ } .footer_indicator_coord-sys { display: block; text-align: right; min-width: 3rem; max-width: 3rem; width: 3rem; } .footer_indicator_scale { display: block; text-align: right; min-width: 3.25rem; max-width: 3.25rem; width: 3.25rem; /* letter-spacing: 1px; */ } .footer_indicator_gpu-memory { padding-left: 1rem; } .icon { height: 1rem; } .header-icon { height: 2.25rem; } .step-wrap { display: flex; align-items: center; gap: 0.5rem; } .step-wrap .step-desc { font-size: 0.75rem; color: #777; } @media screen and (max-width:960px) { .footer-right { display: none; } } /* 좌측 에이사이드 ===== ===== ===== ===== ===== */ .list { position: fixed; z-index: 1; pointer-events: all; /* background-color: var(--primary-lv-0, #E9EEED); */ /* border-right: 0.0625rem solid var(--primary-lv-2, #A5B9B6); */ width: 25rem; /* height: calc(100dvh - 5.5rem); */ top: 2.75rem; left: 0.5rem; background-color: #fff; border: 0.0625rem solid #aaa; border-radius: 0.25rem; box-shadow: 0rem 0.5rem 1.5rem 0rem rgba(0, 0, 0, 0.16); } .list__tabs { display: none; } .list__tabs_button { width: 50%; padding: 0.5rem 0; background-color: #fff; color: #111; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; cursor: pointer; border-bottom: 0.0625rem solid var(--primary-lv-2, #A5B9B6); } .list__contents_search-box { margin: 0.5rem 0.5rem 0 0.5rem; padding: 0.25rem 0.5rem; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #ddd; display: flex; align-items: center; gap: 0.5rem; } .list__contents_search-box_icon { background: url(/index/img-onpremise/icon__search--111.svg) no-repeat center / contain; } .list__contents_search-box_input { width: 100%; font-size: 0.875rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; } .list__contents_search-box_input:focus { outline: none; border: none; } .list__contents_aria { overflow-y: scroll; padding-left: 0.5rem; display: flex; flex-direction: column; max-height: calc(100dvh - 8rem); } .list__contents_aria_group { padding: 0.5rem 0; border-bottom: 0.0625rem solid #ddd; } .list__contents_aria_group_head { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .list__contents_aria_group_head:hover { background-color: var(--primary-lv-0); cursor: pointer; } .list__contents_aria_group_head_icon { background: url(/index/img-overseas/icon__arrow-down--111.svg) no-repeat center / contain; } .list__contents_aria_group_head_label { color: #111; } .list__contents_aria_group_head_count { color: #777; } .list__contents_aria_group_body { display: flex; align-items: flex-start; padding-left: 0.5rem; } .list__contents_aria_group_body_category { display: flex; align-items: flex-start; gap: 0.5rem; padding-top: 0.3125rem; min-width: 6.5rem; max-width: 6.5rem; } .list__contents_aria_group_body_category_label { word-break: break-all; } .list__contents_aria_group_body_category_icon { background: url(/index/img-overseas/icon__bullet--ddd.svg) no-repeat center / contain; } .list__contents_aria_group_body_list { display: flex; flex-direction: column; flex-grow: 1; } .list__contents_aria_group_body_list_item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.25rem 0.5rem; border-radius: 0.25rem; } .list__contents_aria_group_body_list_item:hover { background-color: var(--primary-lv-0); cursor: pointer; } .list__contents_aria_group_body_list_item_type { min-width: 1.875rem; text-align: center; } .list__contents_aria_group_body_list_item_label { flex-grow: 1; word-break: break-all; } .list__contents_aria_group_body_list_item_status { min-width: 1.5rem; } .list__contents_aria_group_body_list_item_bookmark { margin-top: 0.1875rem; background: url(/index/img-onpremise/icon-bookmark-none.svg) no-repeat center / contain; display: none; } .list__contents_aria_group_body_list_item_manager{ min-width: 2rem; text-align: center; } /* //좌측 에이사이드 ===== ===== ===== ===== ===== */ /* 컴포넌트 ===== ===== ===== ===== ===== */ .--icon { min-width: 1rem; min-height: 1rem; } .--tab__active { background-color: var(--primary-lv-0, #E9EEED); color: var(--primary-lv-6, #1E5149); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; cursor: pointer; border-bottom: none; } .--status__step-active { color: var(--color-red); font-size: 0.875rem; font-weight: 300; } .--status__step-stop { color: var(--color-cyan); font-size: 0.875rem; font-weight: 300; } .--status__step-done { color: var(--color-steel); font-size: 0.875rem; font-weight: 300; } .--status__step-wait { color: var(--color-green); font-size: 0.875rem; font-weight: 300; } .--off { visibility: hidden; } .--bookmark__check { background: url(/index/img-onpremise/icon-bookmark-select.svg) no-repeat center / contain !important; } details[open] summary .--icon { transform: rotate(180deg); } /* // 컴포넌트 ===== ===== ===== ===== ===== */ /* */ /* */ /* */ /* */ /* */ /* */ /* 그 외 ===== ===== ===== ===== ===== */ ._top { position: absolute; top: 0; right: 0; margin: 0.5rem; pointer-events: all; border-color: #111; } .xs-btn-type-icon { display: flex; justify-content: center; align-items: center; background-color: #fff; border-radius: 0.25rem; border: 0.0625rem solid #aaa; padding: 0 0.25rem 0 0.125rem; gap: 0.125rem; min-height: 1.25rem; max-height: 1.25rem; max-width: fit-content; min-width: fit-content; cursor: pointer; } .icon { height: 1rem; } .custom-checkbox { display: inline-flex; align-items: center; cursor: pointer; } .custom-checkbox input { display: none; } .custom-checkbox .checkmark { width: 1rem; height: 1rem; border: 0.0625rem solid #ddd; border-radius: 0.25rem; margin-right: 0.5rem; position: relative; } .custom-checkbox input:checked+.checkmark::after { display: block; z-index: 999; content: ''; position: absolute; width: 1rem; height: 1rem; background-image: url('/index/img-onpremise/icon__checked--primary-lv-6.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } ._status { width: 13.125rem; } .window-header { display: flex; justify-content: space-between; padding: 0.5rem 0.5rem 0.5rem 1rem; } .window-header>img { cursor: pointer; } .window-body { display: flex; flex-direction: column; gap: 1rem; padding: 0.5rem 0.5rem 1rem; } .window-body-content { display: flex; flex-direction: column; gap: 0.5rem; padding-left: 0.5rem; } .step-wrap { display: flex; align-items: center; gap: 0.5rem; } .step-desc { font-size: 0.75rem; font-weight: 300; line-height: 1.25rem; letter-spacing: -0.0175rem; color: #777; } .window-subtitle { padding-top: 0.5rem; } .--MP, .--DD, .--FS, .--PD, .--DS, .--CS, .--PMC, .--IDC, .--DR, .--ETC, .--BD { color: #111; min-width: 1.875rem; max-width: 1.875rem; min-height: 1.25rem; max-height: 1.25rem; display: flex; align-items: center; justify-content: center; font-weight: 300; } .--logo__project-master_version { color: #fff; opacity: 0.4; } #type-modal { width: 13.125rem; }