@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); html { /** * rem의 기준을 절대단위(px)로 명시적으로 설정 * ex) 최상위 요소의 font-size 가 16px 이라면 1rem == 16px 이다. * 하위 요소에서 15px 의 크기는 15 / 16 = 0.9375rem 이다. */ font-size: 16px; } html, body { height: 100%; margin: 0; padding: 0; font-family: 'Pretendard', sans-serif; overflow-x: hidden; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; color: #fff; } ul, ol { list-style-type: none; margin: 0; padding: 0; } p { margin-top: 1rem; margin-bottom: 1rem; } pre { color: #37383a; } input::placeholder { color: #cfcfcf; } button { cursor: pointer; } button:hover { opacity: 0.9; } table caption { display: none; } .d-none { /* eslint-disable-next-line css/no-important */ display: none !important; } .no-margin { margin: 0; } .h-margin-3 { margin: 0 0.1875rem; } .c-red { color: red; } .inline-block { display: inline-block; } [data-form-error] { font-size: 0.875rem; color: red; margin-left: 0.625rem; } .fade { transition: opacity 0.15s linear; } .text-bold { font-weight: bold; } /* =================================================================================================== Position =================================================================================================== */ .c-po-a { position: absolute; } /* =================================================================================================== Flex =================================================================================================== */ .c-flex-sty01 { display: flex; align-items: center; justify-content: space-between; } .c-flex-sty02 { display: flex; align-items: center; } /* =================================================================================================== Width =================================================================================================== */ .c-width-100 { width: 6.25rem; } .c-width-150 { width: 9.375rem; } .c-width-200 { width: 12.5rem; } .c-width-10p { width: 10%; } .c-width-12p { width: 12%; } .c-width-15p { width: 15%; } .c-width-20p { width: 20%; } /* =================================================================================================== Margin, Padding =================================================================================================== */ .c-ma-t5 { /* eslint-disable-next-line css/no-important */ margin-top: 0.3125rem !important; } .c-ma-t10 { /* eslint-disable-next-line css/no-important */ margin-top: 0.625rem !important; } .c-ma-t20 { /* eslint-disable-next-line css/no-important */ margin-top: 1.25rem !important; } .c-ma-t30 { /* eslint-disable-next-line css/no-important */ margin-top: 1.875rem !important; } .c-ma-l10 { /* eslint-disable-next-line css/no-important */ margin-left: 0.625rem !important; } .c-ma-l20 { /* eslint-disable-next-line css/no-important */ margin-left: 1.25rem !important; } .c-ma-l50 { /* eslint-disable-next-line css/no-important */ margin-left: 3.125rem !important; } .c-pa-0 { /* eslint-disable-next-line css/no-important */ padding: 0 !important; } .c-pa-10 { /* eslint-disable-next-line css/no-important */ padding: 0.625rem !important; } .c-pa-20 { /* eslint-disable-next-line css/no-important */ padding: 1.25rem !important; } /* =================================================================================================== Common =================================================================================================== */ .c-dp-inline-block { /* eslint-disable-next-line css/no-important */ display: inline-block !important; } .c-color-white { /* eslint-disable-next-line css/no-important */ color: #fff !important; } .c-color-active, .정상 { /* eslint-disable-next-line css/no-important */ color: #5ef0a7 !important; } .c-color-check, .점검 { /* eslint-disable-next-line css/no-important */ color: #fe8e10 !important; } .c-color-alert, .경고 { /* eslint-disable-next-line css/no-important */ color: #fe0000 !important; } .c-cursor-pointer { /* eslint-disable-next-line css/no-important */ cursor: pointer !important; } .custom-select { position: relative; display: inline-block; width: 15.625rem; padding: 0.5rem 0.75rem; cursor: pointer; } .custom-select select { width: 100%; padding: 0.5rem 2.25rem 0.5rem 0.75rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; border: 0.0625rem solid #c7c7c7; border-radius: 0.1875rem; background: #141414; color: #fff; font-size: 0.875rem; cursor: pointer; } .custom-select::after { content: ''; position: absolute; top: 50%; right: 1.5rem; pointer-events: none; transform: translateY(-50%); border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; border-top: 0.375rem solid #666; width: 0; height: 0; } .form-textarea { padding: 0.9375rem 1.25rem; width: calc(100% - 2.625rem); height: 11.25rem; border-radius: 0.625rem; border: 0.0625rem solid #1a5df4; background-color: #fff; outline: 0; resize: none; font-size: 0.875rem; font-weight: 400; color: #495057; } .form-textarea-line:focus { box-shadow: 0 0 0.25rem 0 #1761de; } .input-write-sty01 { width: 31.25rem; height: 2.375rem; outline: 0; border-top-left-radius: 1.25rem; border-bottom-left-radius: 1.25rem; border: 0.0625rem solid #7f8287; padding: 0 1rem; background-color: #fff; color: #495057; font-size: 0.875rem; } .search-btn { width: 6.25rem; color: #fff; font-size: 0.9375rem; padding-left: 1.25rem; border-top-right-radius: 1.25rem; border-bottom-right-radius: 1.25rem; background-image: url(../images/icon_search.png); background-repeat: no-repeat; background-position: top 0.8125rem left 1.1875rem; background-size: 1.0625rem; background-color: #7f8287; border: 0.0625rem solid #7f8287; } .risk-inspection-wrap { display: flex; width: calc(100% - 6.25rem); height: calc(100% - 6.25rem); padding: 3.125rem; color: #1a5df4; flex-direction: column; justify-content: space-around; } .risk-inspection-wrap.modal { width: calc(100% - 2.5rem); height: auto; padding: 1.25rem; } .risk-inspection-wrap .box1, .risk-inspection-wrap .box2 { width: 100%; height: 35%; } .risk-inspection-wrap .detail_contents { height: 100%; font-size: 0.9375rem; line-height: 1.4rem; letter-spacing: -0.02em; text-align: left; overflow-x: hidden; overflow-y: auto; margin: 0.1875rem; white-space: pre-wrap; font-family: 'Pretendard', sans-serif; } .risk-inspection-wrap .title { margin-bottom: 0.625rem; font-size: 1.125rem; font-weight: 700; } .tab-container .tab-buttons { display: flex; border-bottom: 0.0625rem solid #cececf; margin-bottom: 1.25rem; } .tab-container .tab-btn { padding: 0.625rem 1.25rem; cursor: pointer; border: none; background-color: #f0f0f0; margin-right: 0.3125rem; font-size: 0.875rem; transition: background-color 0.3s ease; } .tab-container .tab-btn.active { background-color: #007bff; color: #fff; } .tab-container .tab-contents { display: none; } .tab-container .tab-contents.active { display: block; } /* =================================================================================================== Alert / Confirm =================================================================================================== */ #alert { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 60%); z-index: 9999; } #alert-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #ffffff; color: #000000; padding: 0.9375rem; border-radius: 0.625rem; width: 21.875rem; height: 10.3125rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #alert-title { font-size: 1.0625rem; font-weight: 200; color: #000000; margin-top: 2.625rem; margin-bottom: 2.0625rem; } #alert-button { display: flex; align-items: center; justify-content: center; line-height: 3.125rem; text-align: center; cursor: pointer; width: 9.6875rem; height: 2.6875rem; border-radius: 2.5rem; font-weight: 400; color: #fff; background-color: #007aff; border: none; font-size: 0.9375rem; } #confirm { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 40%); z-index: 9999; } #confirm-wrapper { display: flex; flex-direction: column; justify-content: center; align-items: center; background-color: #ffffff; color: #000000; padding: 0.9375rem; border-radius: 1.25rem; width: 34.375rem; height: 17.5rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #confirm-title { font-size: 1.5625rem; font-weight: bold; letter-spacing: -0.0625rem; color: #000000; margin-top: 1.875rem; margin-bottom: 1.25rem; } #confirm-title-desc { font-size: 1rem; font-weight: 300; text-align: center; color: #000000; margin-bottom: 3.4375rem; } #confirm-button-wrapper { display: flex; justify-content: center; margin-bottom: -0.4375rem; } #confirm-button1 { display: flex; align-items: center; justify-content: center; line-height: 3.125rem; text-align: center; cursor: pointer; width: 13.4375rem; height: 3rem; border-radius: 2.5rem; font-weight: 400; color: #fff; background-color: #c5c5c5; border: none; font-size: 1.25rem; margin-right: 0.25rem; } #confirm-button2 { display: flex; align-items: center; justify-content: center; line-height: 3.125rem; text-align: center; cursor: pointer; width: 13.4375rem; height: 3rem; border-radius: 2.5rem; font-weight: 400; color: #fff; background-color: #007aff; border: none; font-size: 1.25rem; margin-left: 0.25rem; } /* =================================================================================================== Table =================================================================================================== */ .table-wrap { font-size: 1rem; } .table-wrap .table-sty01 { width: 100%; border-collapse: collapse; border-top: 0.0625rem solid #cececf; color: #37383a; } .table-wrap .table-sty01 th { height: 3.125rem; background: #f3f4f8; border-right: 0.0625rem solid #cececf; font-size: 1rem; font-weight: 500; letter-spacing: -0.0625rem; } .table-wrap.multi-head .table-sty01 th:not(:first-child) { border-left: 0.0625rem solid #cececf; } .table-wrap.multi-head .table-sty01 tr:not(:first-child) th { border-top: 0.0625rem solid #cececf; } .table-wrap .table-sty01 th:last-child, .table-wrap .table-sty01 td:last-child { border-right: 0; } .table-wrap .table-sty01 td { max-width: 12.5rem; height: 3.5625rem; text-align: center; border-right: 0.0625rem solid #cececf; border-bottom: 0.0625rem solid #cececf; } .table-wrap .table-sty01 tr.grade-5 { background: #e8929f; } .table-wrap .table-sty01 tr.grade-4 { background: #efafbb; } .table-wrap .table-sty01 tr.grade-3 { background: #f2cfd6; } .table-wrap .table-btn-sty01 { padding: 0.3125rem 0.9375rem; background-color: #1679ef; border: 0; border-radius: 0.3125rem; color: #ffffff; font-size: 0.8125rem; } .table-wrap .pagination-wrapper { margin-top: 1.25rem; } .table-wrap .pagination-wrapper { width: 100%; display: flex; justify-content: center; } .table-wrap .pagination-wrapper .pagination { width: 26.25rem; display: flex; justify-content: center; margin-top: 0.625rem; } .table-wrap .pagination-wrapper .pagination .paginate_button { width: 1.875rem; height: 1.875rem; text-align: center; line-height: 1.875rem; border-radius: 0.3125rem; margin: 0 0.3125rem; font-size: 0.9375rem; } .table-wrap .pagination-wrapper .pagination .paginate_button.active { background-color: #ebf0ff; } .table-wrap .pagination-wrapper .pagination .paginate_button a { display: inline-block; width: 100%; height: 100%; color: #141616; } .table-wrap .pagination-wrapper .pagination .paginate_button.active a { cursor: auto; } .table-wrap.type1 .table-sty01 { border-top-color: #0d7176; } .table-wrap.type1.deep-indigo .table-sty01 { border-top-color: #3e4a97; } .table-wrap.type1.teal-blue .table-sty01 { border-top-color: #07498f; } .table-wrap.type1.dark-cyan .table-sty01 { border-top-color: #004d54; } .table-wrap.type1.maroon .table-sty01 { border-top-color: #7f3646; } .table-wrap.type1.dark-slate .table-sty01 { border-top-color: #172728; } .table-wrap.type1.dark-navy .table-sty01 { border-top-color: #272953; } .table-wrap.type1.dark-gray .table-sty01 { border-top-color: #1c1c1c; } .table-wrap.type1 .table-sty01 th { height: 2.875rem; color: #ffffff; background-color: #0d7176; } .table-wrap.type1.deep-indigo .table-sty01 th { background-color: #3e4a97; } .table-wrap.type1.teal-blue .table-sty01 th { background-color: #07498f; } .table-wrap.type1.dark-cyan .table-sty01 th { background-color: #004d54; } .table-wrap.type1.maroon .table-sty01 th { background-color: #7f3646; } .table-wrap.type1.dark-slate .table-sty01 th { background-color: #172728; } .table-wrap.type1.dark-navy .table-sty01 th { background-color: #272953; } .table-wrap.type1.dark-gray .table-sty01 th { background-color: #1c1c1c; } .table-wrap.type1 .table-sty01 td { height: 2.875rem; color: #ffffff; } .table-wrap.type1 .table-sty01 tr:last-child td { border-bottom: 0.125rem solid #0d7176; } .table-wrap.type1.deep-indigo .table-sty01 tr:last-child td { border-bottom: 0.125rem solid #3e4a97; } .table-wrap.type1.teal-blue .table-sty01 tr:last-child td { border-bottom: 0.125rem solid #07498f; } .table-wrap.type1.dark-cyan .table-sty01 tr:last-child td { border-bottom: 0.125rem solid #004d54; } .table-wrap.type1.maroon .table-sty01 tr:last-child td { border-bottom: 0.125rem solid #7f3646; } .table-wrap.type1.dark-slate .table-sty01 tr:last-child td { border-bottom: 0.125rem solid #172728; } .table-wrap.type1.dark-navy .table-sty01 tr:last-child td { border-bottom: 0.125rem solid #272953; } .table-wrap.type1.dark-gray .table-sty01 tr:last-child td { border-bottom: 0.125rem solid #1c1c1c; } .table-wrap.type1 .pagination-wrapper { margin-top: 1rem; } .table-wrap.type1 .pagination-wrapper .pagination .paginate_button a { color: #ffffff; } .table-wrap.type1 .pagination-wrapper .pagination .paginate_button.active a { color: #000000; } /* =================================================================================================== File =================================================================================================== */ .file-upload-box { display: flex; width: calc(100% - 2.625rem); min-height: 11.25rem; border: 0.0625rem solid #1a5df4; border-radius: 0.625rem; background-color: #f6f9ff; padding: 1.25rem; text-align: center; letter-spacing: 0; font-size: 0.875rem; font-weight: 500; flex-direction: column; justify-content: center; align-items: center; } .file-upload-box.highlight { /* eslint-disable-next-line css/no-important */ background-color: #f0f8ff !important; /* eslint-disable-next-line css/no-important */ border: 0.0625rem dashed #1a5df4 !important; } .file-upload-box.active { background-color: #f0f8ff; } .file-upload-box .upload-file-list { width: 100%; } .file-upload-box .file-upload-box-title { font-size: 1.25rem; font-weight: bold; color: #000000; margin-bottom: 2.625rem; } .file-upload-icon { width: 3.125rem; height: 4rem; margin-bottom: -0.625rem; } .file-upload-icon img { height: 3.125rem; width: auto; } .file-upload-ok { display: flex; width: 100%; margin: 0.3125rem 0; flex-direction: row; align-items: center; } .file-upload-ok .checked-file { width: 1.5625rem; margin-right: 0.625rem; } .file-upload-ok .file-info { display: flex; width: 100%; height: 1.5625rem; float: left; padding: 0.625rem 1.25rem; background-color: #fff; border: 0.0625rem solid #e8e8e8; border-radius: 0.5rem; justify-content: space-between; background-image: url(../images/icon_file_ok.png); background-repeat: no-repeat; background-position: top 0.6875rem left 0.8125rem; background-size: 1.0625rem; } .file-upload-ok .file-info .file-border { width: 0.0625rem; height: 2.8125rem; margin: 0 0.9375rem 0 1.4375rem; background-color: #ddd; } .file-upload-ok .file-info .file-title { max-width: 25rem; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 400; color: #000; } .file-upload-ok .file-info .file-remove { width: 1.5625rem; height: 1.5625rem; margin-top: 0.1875rem; cursor: pointer; } .file-upload-text { text-align: center; font-size: 0.9375rem; color: #1a5df4; margin-bottom: 0.9375rem; line-height: 1.5; letter-spacing: -0.0625rem; } .file-upload-button { width: 8.125rem; height: 2.1875rem; padding-left: 1.25rem; font-size: 0.875rem; color: #fff; border: none; border-radius: 0.3125rem; cursor: pointer; font-weight: 300; background-color: #004dd7; background-image: url(../images/icon_file_upload.png); background-repeat: no-repeat; background-position: top 0.8125rem left 1.75rem; background-size: 0.6875rem; } /* =================================================================================================== Button =================================================================================================== */ .btn-logout { padding: 0.375rem 0.9375rem; background: #6187ec; border: 0.0625rem solid #416cd4; color: #fff; border-radius: 1.25rem; } .button-wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; padding: 0.75rem; } .button-wrap-po-a { position: absolute; display: flex; flex-wrap: wrap; flex-shrink: 0; align-items: center; justify-content: flex-end; top: 0.5rem; right: 0.625rem; } .btn-sty-01 { width: 80%; height: 2.5rem; padding: 0 0.9375rem; background: #004dd7; border: 0; color: #fff; border-radius: 1.25rem; cursor: pointer; margin: 0 auto; font-size: 0.875rem; text-align: center; } .btn-sty-02 { padding: 0.375rem 2.1875rem; border: 0; color: #fff; border-radius: 0.3125rem; margin: 0 auto; font-size: 0.9375rem; background-image: linear-gradient(to right, #2ab1c5, #496aed); background-size: cover; background-repeat: no-repeat; background-position: center; } .btn-sty-02.btn-download { padding: 0.375rem 2.875rem 0.375rem 1.875rem; background-image: url(../images/download.png), linear-gradient(to right, #2ab1c5, #496aed); background-size: 1rem 1rem, cover; background-repeat: no-repeat, no-repeat; background-position: right 1.25rem center, center; } /* =================================================================================================== Header 영역 =================================================================================================== */ .header-wrapper .header-wrap { display: flex; min-width: 68.75rem; align-items: center; background-color: #070707; border-bottom: 0.0625rem solid #aaa; } .header-wrapper .header-box1 { display: flex; width: 59%; padding: 0.9375rem 1.875rem; flex-direction: row; justify-content: flex-start; align-items: center; border-right: 0.0625rem solid #6b6b6b; } .header-wrapper .header-box1 .top-logo img { width: 7.8125rem; } .header-wrapper .header-box2 { width: 30%; padding: 1.25rem 1.25rem; border-right: 0.0625rem solid #6b6b6b; } .header-wrapper .header-box2 .notice-box { display: flex; width: 100%; height: 2.5rem; background-color: #212121; align-items: center; justify-content: space-between; } .header-wrapper .header-box2 .notice-box .bar { width: 0.625rem; height: 2.4375rem; background: linear-gradient(to bottom, #687cfb, #ab82fe); } .header-wrapper .header-box2 .notice-box .back1 { width: 2.625rem; height: 1.3125rem; background-image: url(../images/alarm.png); background-size: contain; background-position: 0.9375rem; background-repeat: no-repeat; } .header-wrapper .header-box2 .notice-box .contents { margin-left: 1.25rem; color: #fff; font-weight: 300; font-size: 0.9375rem; } .header-wrapper .header-box2 .notice-box .icon-move { width: 1.875rem; height: 1.25rem; margin: 0.25rem; background-image: url(../images/arrow.png); background-size: contain; background-position: top 0 right 0.625rem; background-repeat: no-repeat; cursor: pointer; } .header-wrapper .header-box3 { margin: auto; } .header-wrapper .header-box3 .date { color: #aaa9ae; font-size: 1rem; } /* =================================================================================================== Main 영역 =================================================================================================== */ #main .main-contents { width: calc(100% - 3.8125rem); height: calc(100% - 0.6875rem); padding: 0.625rem 0 2.8125rem 0; margin-left: 3.8125rem; } #main .main-contents .main-contents-contents { min-width: 112.5rem; padding: 0 3.125rem; margin-top: 1.25rem; } #main .main-contents .main-contents-contents .wrap-top h1 { margin: 0; display: inline-block; } #main .main-contents .main-contents-contents .wrap-top .site-logo { width: 6.875rem; } #main .main-contents .main-contents-contents .wrap-top .main-title { color: #fff; font-weight: bold; font-size: 1.875rem; background-repeat: no-repeat; background-position: left center; background-size: 1.8125rem; padding-left: 2.5rem; } #main .main-contents .main-contents-contents .wrap-top .main-title.menu1 { background-image: url(../images/main-on.png); } #main .main-contents .main-contents-contents .wrap-top .main-title.menu2 { background-image: url(../images/2-on.png); } #main .main-contents .main-contents-contents .wrap-top .main-title.menu3 { background-image: url(../images/3-on.png); } #main .main-contents .main-contents-contents .wrap-top .main-title.menu4 { background-image: url(../images/4-on.png); } #main .main-contents .main-contents-contents .wrap-top .main-title.menu5 { background-image: url(../images/5-on.png); } #main .main-contents .main-contents-contents .wrap-top .main-title.menu6 { background-image: url(../images/6-on.png); } #main .main-contents .main-contents-contents .wrap-top .main-title.menu7 { background-image: url(../images/7-on.png); } #main .main-contents .main-contents-contents .wrap-top .main-title.menu8 { background-image: url(../images/8-on.png); } #main .main-contents .main-contents-contents .wrap-top .main-title.menu9 { background-image: url(../images/9-on.png); } #main .main-contents .main-contents-contents .wrap-top .sub-title { margin-left: 0.625rem; color: #fff; font-weight: 300; font-size: 0.9375rem; } #main .main-contents .main-contents-contents .wrap-top .btn-group { float: right; margin-top: 0.3125rem; } #main .main-contents .main-contents-contents .wrap-top .btn-group button { margin-left: 0.3125rem; } .main-contents-contents .wrap-contents { margin-top: 0.9375rem; } .main-contents-contents .wrap-contents .top { display: flex; position: relative; height: 3.125rem; padding: 0.625rem; border-radius: 0.1875rem; border: 0.0625rem solid #606060; justify-content: space-around; align-items: center; color: #fff; } .main-contents-contents .wrap-contents .top .summary { position: absolute; left: 1.25rem; display: flex; } .main-contents-contents .wrap-contents .top .summary .info { font-size: 0.875rem; padding: 0.25rem 0.875rem; border-radius: 0.75rem; } .main-contents-contents .wrap-contents .top .summary .inspection { background-color: #bd8200; } .main-contents-contents .wrap-contents .top .summary .warning { margin-left: 0.625rem; background-color: #ba0000; } .main-contents-contents .wrap-contents .targetDate-wrap .arrow-left, .main-contents-contents .wrap-contents .targetDate-wrap .arrow-right { position: relative; cursor: pointer; } .main-contents-contents .wrap-contents .targetDate-wrap .arrow-left::before { position: absolute; left: 0; top: -0.4375rem; content: ''; width: 0.8125rem; height: 0.8125rem; border-top: 0.1875rem solid #0978dd; border-right: 0.1875rem solid #0978dd; transform: rotate(225deg); } .main-contents-contents .wrap-contents .targetDate-wrap .arrow-right::before { position: absolute; left: 0; top: -0.4375rem; content: ''; width: 0.8125rem; height: 0.8125rem; border-bottom: 0.1875rem solid #0978dd; border-left: 0.1875rem solid #0978dd; transform: rotate(225deg); } .main-contents-contents .wrap-contents .targetDate-wrap.today .arrow-right::before { border-color: #212429; cursor: default; } .main-contents-contents .wrap-contents .targetDate-wrap .data-date { display: flex; margin: 0 3.125rem 0 4.375rem; align-items: center; } .main-contents-contents .wrap-contents .targetDate-wrap .data-date .date { margin-right: 0.9375rem; font-weight: 300; } .main-contents-contents .wrap-contents .targetDate-wrap .data-date .icon-today { padding: 0.3125rem 0.9375rem; background-color: #393939; border-radius: 1.25rem; font-size: 0.8125rem; font-weight: 200; display: none; } .main-contents-contents .wrap-contents .targetDate-wrap.today .data-date .icon-today { display: block; } .main-contents-contents .wrap-contents .contents { margin-top: 1.25rem; } .main-contents-contents .wrap-contents .contents h2.type1 { margin: 1.875rem 0 1.25rem 0; color: #ffffff; font-weight: bold; font-size: 1.375rem; } .main-contents-contents .wrap-contents .contents .status-card { display: flex; width: 100%; justify-content: space-between; flex-direction: row; } .main-contents-contents .wrap-contents .contents .status-card .card { position: relative; display: flex; width: 24%; height: 8.75rem; padding: 1.25rem 1.5rem 1.25rem 6.25rem; border: 0; border-radius: 0.3125rem; font-size: 0.8125rem; font-weight: 300; word-wrap: break-word; background-repeat: no-repeat, no-repeat; background-position: left 1.25rem top 2.8125rem, center; background-size: 3.75rem, cover; justify-content: space-between; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 { display: block; color: #ffffff; padding: 0; background: linear-gradient(100deg, #080808, #212121); } .main-contents-contents .wrap-contents .contents .status-card .card.type1.half { width: calc(50% - 0.625rem); } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box { background-repeat: no-repeat; background-position: left center; padding-left: 3.125rem; margin: 1.375rem 0 0 1.875rem; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu2-1 { background-image: url(../images/2-1.png); background-size: 1.875rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu2-2 { background-image: url(../images/2-2.png); background-size: 1.875rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu2-3 { background-image: url(../images/2-3.png); background-size: 2.125rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu2-4 { background-image: url(../images/2-4.png); background-size: 2.125rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu3-1 { background-image: url(../images/3-1.png); background-size: 1.875rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu3-2 { background-image: url(../images/3-2.png); background-size: 1.875rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu3-3 { background-image: url(../images/3-3.png); background-size: 2.125rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu3-4 { background-image: url(../images/3-4.png); background-size: 2.5rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu4-2, .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu5-2, .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu6-3 { background-image: url(../images/normal.png); background-size: 1.875rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu4-3, .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu5-3, .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu6-4 { background-image: url(../images/caution.png); background-size: 2.5rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu4-4, .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu5-4, .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu6-5 { background-image: url(../images/danger.png); background-size: 2.125rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu7-3 { background-image: url(../images/7-1.png); background-size: 2.125rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu7-4 { background-image: url(../images/7-2.png); background-size: 2.125rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu7-5 { background-image: url(../images/7-3.png); background-size: 2.125rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box.menu7-6 { background-image: url(../images/7-4.png); background-size: 2.125rem auto; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box .card-title { font-size: 1.25rem; margin-bottom: 0.1875rem; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .title-box .card-desc { font-size: 0.8125rem; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .card-content { float: right; margin: 1.25rem 1.875rem 0 0; font-size: 1rem; } .main-contents-contents .wrap-contents .contents .status-card .card.type1 .card-content > span { font-size: 2rem; font-weight: bold; margin-right: 0.3125rem; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.white { border: 1px solid #ffffff; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.white .title-box { color: #ffffff; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.mint { border: 1px solid #5ef0a7; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.mint .title-box { color: #5ef0a7; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.tangerine { border: 1px solid #fe8e10; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.tangerine .title-box { color: #fe8e10; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.red { border: 1px solid #fe0000; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.red .title-box { color: #fe0000; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.three-wide { width: 32.5%; height: 5.625rem; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.three-wide .title-box { float: left; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.three-wide .card-content { margin-top: 26px; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.many-on-many { width: 19%; } .main-contents-contents .wrap-contents .contents .status-card .card.type1.many-on-many.small { width: 16%; } .main-contents-contents .wrap-contents .contents .status-card .card.border { width: 0.0625rem; height: auto; background-color: #ffffff; margin: 0 0.3125rem; padding: 0; display: block; } .main-contents-contents .wrap-contents .contents .status-card .card .text { display: flex; flex-direction: column; justify-content: center; } .main-contents-contents .wrap-contents .contents .status-card .card.card1 { color: #6eb7ff; background-image: url(../images/main_icon1.png), linear-gradient(100deg, #080808, #212121); background-position: left 1.25rem top 2.9375rem, center; background-size: 3.9375rem, cover; } .main-contents-contents .wrap-contents .contents .status-card .card.card2 { color: #04f0fb; background-image: url(../images/main_icon2.png), linear-gradient(100deg, #080808, #212121); background-position: left 1.25rem top 2.5625rem, center; } .main-contents-contents .wrap-contents .contents .status-card .card.card3 { color: #b4b4fc; /* eslint-disable-next-line css/no-important */ background-image: url(../images/main_icon3.png), linear-gradient(100deg, #080808, #212121) !important; background-repeat: no-repeat; } .main-contents-contents .wrap-contents .contents .status-card .card.card4 { color: #5eefa6; background-image: url(../images/main_icon4.png), linear-gradient(100deg, #080808, #212121); } .main-contents-contents .wrap-contents .contents .status-card .card .card-title { font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.04em; font-weight: bold; margin-bottom: 0.3125rem; } .main-contents-contents .wrap-contents .contents .status-card .card .graph { width: 6.25rem; } .main-contents-contents .wrap-contents .contents .status-box { display: flex; width: 100%; justify-content: space-between; flex-direction: row; margin-top: 1.25rem; } .main-contents-contents .wrap-contents .contents .status-box .box { display: flex; width: 49.4%; height: 16.25rem; border: 0; border-radius: 0.3125rem; font-size: 0.8125rem; font-weight: 300; word-wrap: break-word; justify-content: space-between; background: linear-gradient(100deg, #080808, #212121); flex-direction: column; } .main-contents-contents .wrap-contents .contents .status-box .box .box-top { width: 100%; height: 2.5rem; border-top-left-radius: 0.3125rem; border-top-right-radius: 0.3125rem; background: #212429; color: #fff; text-align: center; padding-top: 0.6875rem; font-size: 1rem; font-weight: bold; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents { display: flex; width: 100%; height: calc(100% - 2.5rem); padding: 1.875rem 1.25rem; flex-direction: row; align-items: center; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .graph { width: 11.875rem; height: 9.375rem; margin-top: 0.4375rem; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap { display: flex; width: calc(100% - 13.125rem); margin-left: 0.9375rem; justify-content: space-between; flex-direction: row; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data { display: flex; width: 31.5%; height: 100%; border-radius: 0.3125rem; font-size: 0.9375rem; flex-direction: column; align-items: center; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data1 { border: 0.0625rem solid #a9fcb1; color: #a9fcb1; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data1.type2 { border: 0.0625rem solid #8ca6eb; color: #8ca6eb; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data2 { border: 0.0625rem solid #8bdbf7; color: #8bdbf7; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data2.type2 { border: 0.0625rem solid #5ad0ff; color: #5ad0ff; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data3 { border: 0.0625rem solid #fcc3d0; color: #fcc3d0; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data .data-title { width: 100%; padding: 0.5rem; text-align: center; font-weight: 500; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data1 .data-title { border-bottom: 0.0625rem solid #a9fcb1; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data1.type2 .data-title { border-bottom: 0.0625rem solid #8ca6eb; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data2 .data-title { border-bottom: 0.0625rem solid #8bdbf7; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data2.type2 .data-title { border-bottom: 0.0625rem solid #5ad0ff; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data3 .data-title { border-bottom: 0.0625rem solid #fcc3d0; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data .data-contents { width: 100%; height: 100%; padding: 1.5625rem; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data .data-contents div { padding: 1.25rem; width: 100%; height: 100%; border-radius: 0.3125rem; text-align: center; font-size: 1.25rem; font-weight: 600; line-height: 1.875rem; } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data1 .data-contents div { background: rgba(169, 252, 177, 0.2); } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data2 .data-contents div { background: rgba(139, 219, 247, 0.2); } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data.data3 .data-contents div { background: rgba(252, 195, 208, 0.2); } .main-contents-contents .wrap-contents .contents .status-box .box .box-contents .data-wrap .data .data-contents div span:nth-child(2) { font-size: 0.875rem; font-weight: 300; } .main-contents-contents .wrap-contents .contents .status-box2 { display: flex; width: 100%; justify-content: space-between; flex-direction: row; margin-top: 1.25rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box { display: flex; width: 49.4%; height: 18.75rem; border: 0; border-radius: 0.3125rem; font-size: 0.8125rem; font-weight: 300; word-wrap: break-word; justify-content: space-between; flex-direction: column; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box1 { background: linear-gradient(100deg, #080808, #212121); } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 { display: flex; flex-direction: row; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box { width: 48.4%; background: linear-gradient(100deg, #080808, #212121); border-radius: 0.3125rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.detection-file { padding: 1.25rem 1.5rem 1.25rem 6.25rem; background-repeat: no-repeat; background-size: 3.75rem, cover; background-position: left 1.25rem top 3.4375rem, center; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box { width: 61.4%; display: flex; flex-direction: column; justify-content: space-between; background: none; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner { width: 100%; height: 47.4%; background: linear-gradient(100deg, #080808, #212121); } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box { height: calc(100% - 2.5rem); display: flex; flex-direction: row; justify-content: space-between; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner { width: 48.4%; display: flex; align-items: center; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner .row-box-inner-wrap { width: 100%; display: flex; flex-direction: column; align-items: center; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner .row-box-inner-wrap .inner-title-box { background-repeat: no-repeat; background-position: left center; padding-left: 2.5rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner.llm-analysis-size .row-box-inner-wrap .inner-title-box { background-image: url(../images/1-llm-kb.png); } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner.llm-analysis-count .row-box-inner-wrap .inner-title-box { background-image: url(../images/1-llm-file.png); } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner .card-title { font-size: 1.0625rem; font-weight: bold; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner .card-desc { font-size: 0.6875rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner .text-content { color: #ffffff; margin-top: 0.25rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-box-inner .text-content .file-count { font-size: 1.375rem; font-weight: bold; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner.inner-box2 .row-box { padding: 0.875rem 1.25rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner.inner-box2 .row-box .row-box-inner { width: 31.5%; display: block; border-radius: 0.3125rem; color: #ffffff; font-weight: bold; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner.inner-box2 .row-box .row-box-inner.normal { background-color: #11836c; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner.inner-box2 .row-box .row-box-inner.inspect { background-color: #d19e05; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner.inner-box2 .row-box .row-box-inner.warning { background-color: #9c3e3e; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner.inner-box2 .row-box .row-box-inner .title { height: 2.5rem; line-height: 2.5rem; padding-left: 0.875rem; font-size: 0.875rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner.inner-box2 .row-box .row-box-inner .content { text-align: right; padding-right: 0.875rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner.inner-box2 .row-box .row-box-inner .content > span { font-size: 1.375rem; margin-right: 0.3125rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .llm-analysis-count { color: #5eefa6; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .llm-analysis-size { color: #b4b4fc; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.column-box .column-box-inner .row-box .row-border { width: 0.0625rem; height: 90%; background-color: #ffffff; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.transmission-status { width: 36.4%; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.transmission-status #transmission-channel-pieChart { width: calc(100% - 40px); height: calc(100% - 80px); margin: 20px 0 0 20px; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.detection-file.detection-file-size-box { color: #b4b4fc; background-image: url(../images/main_icon3.png), linear-gradient(100deg, #080808, #212121); } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.detection-file.detection-file-count-box { color: #5eefa6; background-image: url(../images/main_icon4.png), linear-gradient(100deg, #080808, #212121); } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.detection-file .text { display: flex; flex-direction: column; justify-content: center; margin-top: 2.1875rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.detection-file .text-content { font-size: 1.125rem; color: #ffffff; margin-top: 1.25rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.detection-file .text-content .file-count { font-weight: bold; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.detection-file .text-content .num-item { font-size: 0.875rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box.box2 .box-box.detection-file .text .card-title { font-size: 1.125rem; line-height: 1.5rem; letter-spacing: -0.04em; font-weight: bold; margin-bottom: 0.3125rem; } .main-contents-contents .wrap-contents .contents .status-box2 .box .box-top { width: 100%; height: 2.5rem; padding: 1.25rem; color: #fff; font-size: 1rem; font-weight: bold; } .main-contents-contents .wrap-contents .contents .status-box2 .box .box-contents { display: flex; width: 100%; height: calc(100% - 2.5rem); padding: 1.25rem; flex-direction: row; } .main-contents-contents .wrap-contents .contents .status-box2 .box .box-contents .graph { width: 100%; height: 100%; } .main-contents-contents .contents-box { width: 100%; min-height: 34.375rem; margin-top: 1.25rem; border: 0.0625rem solid #bfcdf0; border-radius: 0.625rem; background: #fff; } td.agent-status-indicator { background-image: url(../images/5-off-button.png); background-repeat: no-repeat; background-position: center; background-size: 2rem auto; } td.agent-status-indicator.Y { background-image: url(../images/5-on-button.png); } @media (max-width: 112.5rem) { #main .main-contents { overflow-x: auto; } } /* =================================================================================================== Sidebar 영역 =================================================================================================== */ .sidebar-wrap { text-align: center; } .sidebar-wrap .sidebar-nav .sidebar-menu { width: 3.75rem; height: 3.75rem; border-bottom: 0.0625rem solid #3e3f42; background-size: 1.625rem auto; background-position: center; background-repeat: no-repeat; } .sidebar-wrap .sidebar-nav .sidebar-menu.menu1 { background-image: url(../images/main-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu1:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu1.active { background-image: url(../images/main-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu2 { background-image: url(../images/2-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu2:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu2.active { background-image: url(../images/2-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu3 { background-image: url(../images/3-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu3:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu3.active { background-image: url(../images/3-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu4 { background-image: url(../images/4-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu4:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu4.active { background-image: url(../images/4-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu5 { background-image: url(../images/5-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu5:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu5.active { background-image: url(../images/5-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu6 { background-image: url(../images/6-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu6:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu6.active { background-image: url(../images/6-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu7 { background-image: url(../images/7-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu7:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu7.active { background-image: url(../images/7-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu8 { background-image: url(../images/8-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu8:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu8.active { background-image: url(../images/8-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu9 { background-image: url(../images/9-off.png); } .sidebar-wrap .sidebar-nav .sidebar-menu.menu9:hover, .sidebar-wrap .sidebar-nav .sidebar-menu.menu9.active { background-image: url(../images/9-on.png); } .sidebar-wrap .sidebar-nav .sidebar-menu a { display: block; width: 100%; height: 100%; } /* =================================================================================================== Footer 영역 =================================================================================================== */ .btn-type1 { background-color: #2d2d2d; border: 0.0625rem solid #ffffff; border-radius: 0.1875rem; color: #ffffff; padding: 0.25rem 0.9375rem; font-size: 0.75rem; } .padding-left-0 { /* eslint-disable-next-line css/no-important */ padding-left: 0 !important; }