/*------------------------------------------------------------------- font -------------------------------------------------------------------*/ @import url('https://cdn.jsdelivr.net/npm/font-applesdgothicneo@1.0.3/css/all.css'); @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0/css/all.min.css'); /*------------------------------------------------------------------- reset -------------------------------------------------------------------*/ * { margin: 0; padding: 0; font: inherit; color: inherit; } *, :after, :before { box-sizing: border-box; flex-shrink: 0; } :root { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; cursor: default; line-height: 1.5; overflow-wrap: keep-all; word-break: keep-all; tab-size: 4 } /*html, body { height: 100%; }*/ img, picture, video, canvas, svg { display: block; max-width: 100%; } button { background: none; border: 0; cursor: pointer; } a { text-decoration: none } table { border-collapse: collapse; border-spacing: 0 } fieldset { border: none; } button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } input[type=text], input[type=password], input[type=date], input[type=number], textarea { -webkit-appearance: none; -webkit-border-radius: 0; } input[type=text]:focus, input[type=password]:focus, input[type=date]:focus, input[type=number]:focus, textarea:focus { outline: none; } select { -webkit-border-radius: 0; outline: none; } ol, ul, li { list-style: none; } @media (max-width: 767.98px) { /* 모바일 대응 */ html, body { width: 100%; overflow-x: hidden; } } /*------------------------------------------------------------------- common -------------------------------------------------------------------*/ html, body { font-size: 14px; font-weight: 300; font-family: 'Apple SD Gothic Neo', sans-serif; color: #373737; } caption, .hidden { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } .wrapper { display: flex; /*position:fixed; width:100%; height:100%;*/ overflow: hidden; } .nowrap { white-space: nowrap; } main { flex: 1; min-height: 100vh; padding: 77px 0 0 65px; } main .title-wrapper { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; min-height: 68px; border-bottom: 1px solid rgba(218, 220, 224, 0.5); letter-spacing: -0.025em; padding: 20px 30px 10px 30px; } main .title-wrapper h2 { font-size: 24px; font-weight: 400; } main .title-wrapper h2 span { font-size: 14px; font-weight: 200; color: #6e6e6e; } main .title-wrapper nav { display: flex; align-items: center; gap: 5px; font-weight: 300; color: #7a7a7a; margin-bottom: 10px; } main .title-wrapper nav a { color: #373737; } main .title-wrapper .btn-wrapper { margin-left: auto; } @media (max-width: 767.98px) { /* 모바일 대응 */ main { width: 100vw; /*height: fit-content;*/ padding: 75px 0 0; /*margin: 0 0 30px;*/ } main .title-wrapper { padding: 20px 15px 10px; margin-bottom: 20px; } .batch-lyr { margin: 45px 0 0 70px !important; } } /*------------------------------------------------------------------- header -------------------------------------------------------------------*/ header { letter-spacing: -0.025em; position: fixed; top: 0; left: 0; z-index: 10; } header > div.head { display: flex; align-items: center; gap: 20px; width: 100%; height: 77px; background: #fff; border-bottom: 1px solid rgba(100, 120, 140, 0.25); padding: 0 30px 0 15px; position: fixed; top: 0; right: 0; z-index: -1; } header > div.head > div { display: none; align-items: center; justify-content: flex-end; gap: 20px; flex: 1; margin-left: auto; } header > div.lnb { display: flex; flex-direction: column; width: 65px; height: 100vh; min-height: 100%; background: #fff; border-right: 1px solid rgba(100, 120, 140, 0.25); padding: 0 15px 0; margin-top: 77px; overflow: hidden; } header h1 { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 20px; font-weight: 700; color: #373737; padding: 0 8px; } header h1 a { display: flex; align-items: center; gap: 10px; } header h2 { height: 36px; font-size: 20px; font-weight: 700; color: #bdbdbd; position: relative; } header h2 img { max-width: 39px; position: absolute; top: -4px; left: 50%; transform: translateX(-50%); } header h2 span { display: none; white-space: nowrap; } header .title-container { display: flex; flex-wrap: wrap; flex: 1; gap: 0 20px; margin-left: -10px; } header .dashbr-links { display: flex; gap: 5px; } header .dashbr-links a { font-size: 14px; font-weight: 400; color: rgba(66, 133, 244, 1); border: 1px solid rgba(100, 120, 140, 0.25); border-radius: 4px; padding: 2px 10px; } header .search-wrapper { gap: 6px; } header .search-wrapper input { width: 150px; } header .select-box { display: block; min-width: 150px; } header .login-info { display: none; flex-direction: column; align-items: flex-start; min-height: 148px; font-size: 14px; font-weight: 400; letter-spacing: 0; background: url(../images/cover-sidebar-user.jpg) no-repeat 0 0; background-size: 100% auto; padding: 20px 15px 0; margin: 0 -15px 15px; position: relative; } header .login-info > button { display: flex; justify-content: center; align-items: center; gap: 5px; padding: 5px 0; margin-top: 10px; } header .login-info > button::after { content: ''; display: inline-block; width: 0; height: 0; border: 5px solid transparent; border-top-color: #868686; margin-left: 5px; } header .login-info p { font-weight: 200; margin: -5px 0 10px; } header .login-info img { width: 60px; height: 60px; border-radius: 100%; margin-right: -10px; } header .login-info.active .user-info-lyr { display: block; } header .login-info.active > button::after { transform: rotate(180deg); transform-origin: 5px 2px; } header .user-info-lyr { display: none; width: 100%; min-width: 156px; font-weight: 300; transition: all 0.2s ease-out; } header .user-info-lyr > div { width: calc(100% + 30px); height: 100%; padding: 15px 0; margin: 0 -15px; text-align: center; border-bottom: 1px solid rgba(100, 120, 140, 0.25); } header .user-info-lyr p { display: block; font-size: 12px; color: #373737; border: 1px solid #606473; padding: 1px 5px 0; /*margin: -37px 0 19px 32px;*/ } header .user-info-lyr ul { width: 100%; } header .user-info-lyr li button { display: flex; align-items: center; width: calc(100% - 34px); height: 32px; padding-left: 10px; border-radius: 0 24px 24px 0; } header .user-info-lyr li button:hover { background: #f2f3f4; } header .user-info-lyr li button::before { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 18px; font-family: "Font Awesome 6 Free"; font-weight: 600; } header .user-info-lyr li button.btn-member::before { content: '\f2bd'; } header .user-info-lyr li button.btn-logout::before { content: '\f08b'; } header .user-info-lyr .btn-manual { display: flex; align-items: center; width: calc(100% - 34px); height: 32px; padding-left: 10px; white-space: nowrap; border-radius: 0 24px 24px 0; } header .user-info-lyr .btn-manual::before { content: '\f019'; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 18px; font-family: "Font Awesome 6 Free"; font-weight: 600; } header .user-info-lyr .btn-manual:hover { background: #f2f3f4; } header menu { font-size: 14px; margin: 10px 5px; } header menu > ul > li > a { display: flex; align-items: center; width: calc(100% + 16px); height: 32px; margin: 0 -20px; padding: 0 18px; } header menu > ul > li > a.active { color: #3871cf; margin-right: 34px; border-radius: 0 24px 24px 0; } header menu > ul > li > a span { display: inline-block; text-indent: -999em;} header menu > ul > li > a i { display: flex !important; justify-content: center; width: 26px; font-size: 1.1em; } header menu > ul > li > ul { width: calc(100% + 60px); height: 0; font-size: 14px; margin: 0 -30px; overflow: hidden; } header menu > ul > li > ul.active { height: 100%; padding: 0 0 10px; transition: all 0.2s ease-out; } header menu > ul > li > ul > li { padding: 0; } header menu > ul > li > ul > li a { display: block; padding: 5px 0 3px 60px; margin-right: 34px; border-radius: 0 24px 24px 0; white-space: nowrap; } header menu > ul > li > ul > li:hover a { background: #f2f3f4; } header.wide > div.lnb { width: 210px; } header.wide > div.lnb h2 img { display: none; } header.wide > div.lnb h2 span { display: block; } header.wide > div.lnb menu > ul > li > a { gap: 5px; } header.wide > div.lnb menu > ul > li > a span { text-indent: 0; } header.wide .login-info { display: flex; } header.wide + main { width: calc(100% - 210px); padding-left: 210px; } header.wide menu > ul > li > a.active { background: #e3edfd; } header .btn-menu { display: none; } header .btn-close { display: none; } .scrollDown > div.head { height: 70px; } .scrollDown > div.head > div { display: none; } @media (max-width: 767.98px) { /* 모바일 대응 */ header > div.head { height: 75px; gap: 10px; padding: 0; } header > div.head > div { width: 100%; border-top: 1px solid #2e2e2e; padding: 5px 20px; } header > div.lnb.active { display: block; transition: all 0.2s ease-out; } header > div.lnb { display: none; margin: 0; } header > div.lnb::after { content: ''; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); position: fixed; top: 0; z-index: -1; } header h1 { width: 100%; padding: 0 20px 0 15px; } header .btn-wide { display: none; } header .btn-menu { display: block; margin-left: auto; } header .btn-close { display: block; position: fixed; top: 10px; left: 185px; z-index: 10; } header .search-wrapper { flex: 1; } header .search-wrapper input { width: 100% !important; } header .select-box { flex: 1; } header.wide + main { padding-left: 0; } header .dashbr-links { display: flex; gap: 5px; } header .dashbr-links a { font-size: 12px; padding: 2px 5px 0; } } /*------------------------------------------------------------------- datepicker.js custom -------------------------------------------------------------------*/ .daterangepicker { min-width: 300px; font-weight: 200; font-family: 'Apple SD Gothic Neo', sans-serif; padding: 0 0 7px 0; box-shadow: 4px 7px 8px 0px rgba(0, 0, 0, 0.1); margin-top: 2px; } .daterangepicker.show-calendar .ranges { margin: 0; } .daterangepicker:before { display: none; } /*.daterangepicker.show-calendar:before { content:''; display: block; width: calc(100% + 2px); height: 40px; background: rgba(233, 233, 233, 0.7); border: 1px solid #181515; margin: -1px; position: absolute; top: 0; left: 0; z-index: -1; } .daterangepicker.show-calendar:after { content:''; display: block; width: calc(100% - 2px); height: 1px; background: #454545; border: none; position: absolute; top: 0; left: 1px; z-index: 0; }*/ .daterangepicker:after { display: none; } .daterangepicker .drp-calendar { max-width: none; } .daterangepicker .drp-calendar.left, .daterangepicker .drp-calendar.right { padding: 0; } .daterangepicker .drp-calendar.right { margin-left: 20px; } /*.daterangepicker .drp-calendar.right::after { content: ''; display: block; width: 1px; height: 180px; background: #2e2b2b; position: absolute; top: 80px; right: 50%; } .daterangepicker .drp-calendar.right::before { content: ''; display: block; width: 1px; height: 180px; background: #515151; position: absolute; top: 80px; margin-left: -10px; }*/ .daterangepicker .calendar-table { background: none; border: none; padding: 0 !important; } .daterangepicker .calendar-table table { color: rgba(55,55,55,.65); border-spacing: 13px 4px; border-collapse: separate; } .daterangepicker .calendar-table th, .daterangepicker .calendar-table td { width: 28px; height: 28px; min-width: auto; font-size: 14px; line-height: 26px; border: none; border-radius: 50%; } .daterangepicker .calendar-table th { font-weight: 600; } .daterangepicker .calendar-table td { opacity: 0.8; } .daterangepicker .calendar-table th:first-child, .daterangepicker .calendar-table td:first-child { color:#f27474; opacity: 1; } .daterangepicker .calendar-table th:last-child, .daterangepicker .calendar-table td:last-child { color:#7190f5; opacity: 1; } .daterangepicker .calendar-table .next span, .daterangepicker .calendar-table .prev span { border-color:#7c7c7b; border-width: 0 1px 1px 0; padding: 4px; } .daterangepicker thead tr:first-child th { height: 35px; } .daterangepicker thead tr:last-child th { padding-top: 7px; cursor: default; } .daterangepicker th.month { font-size: 16px; font-weight: 600; color: #373737; cursor: default; } .daterangepicker td.in-range { background-color: #e3edfd; } .daterangepicker td.off, .daterangepicker td.off.in-range, .daterangepicker td.off.start-date, .daterangepicker td.off.end-date { background-color: transparent; opacity: 0.3 !important; } .daterangepicker td.active, .daterangepicker td.active:hover, .daterangepicker td.available:hover { color: #fff !important; background: #4285f4 !important; } .daterangepicker th.available:hover { background: transparent; } .daterangepicker td.start-date.end-date { border-radius: 50%; } @media (max-width: 660px){ .daterangepicker { width: 300px; } .daterangepicker .drp-calendar.right { margin: 0; position: relative; } .daterangepicker .drp-calendar.right::before, .daterangepicker .drp-calendar.right::after { display: none; } .daterangepicker .drp-calendar.right::before { content: ''; display: block; width: calc(100% + 2px); height: 40px; background: rgba(233, 233, 233, 0.7); border: 1px solid #181515; margin: -1px; position: absolute; top: 0; left: 0; z-index: -1; } } /*------------------------------------------------------------------- moth/year only calendar -------------------------------------------------------------------*/ .mrp-date-input { width: 175px; height: 32px; font-size: 14px; font-weight: 300; line-height: 2.1; color: #bababa; border-radius: 4px; border: none; background: #dadce0 url(../images/ico_cal.png) no-repeat right 10px center; padding: 3px 40px 3px 15px; cursor: pointer; } .mrp-date-input.mrp-yeardisplay { width: 135px; } .mrp-container { margin-top:10px; width: 200px; } .mpr-MonthsWrapper { display: grid; grid-template-columns: repeat(4,1fr); gap: 15px; font-weight: 400; color: rgba(55,55,55,.65); padding: 23px 32px; } .mpr-calendar { display:inline-block; width: 100%; } .mpr-month { display: inline-block; padding: 2px 5px; font-size: 16px; text-align: center; border-radius: 15px; } .mpr-year { cursor: pointer; } .mpr-calendar h5 { display: flex; justify-content: space-between; align-items: center; width: calc(100% + 2px); height: 40px; text-align: center; font-weight: 400; font-size: 16px; color: #fffefe; border: 1px solid #181515; border-radius: 1px; background: rgba(233, 233, 233, 0.7); padding: 4px 16px 0; margin: -1px; } .mpr-calendar h5 span { display: block; width: calc(100% - 30px); } .mpr-selected { background: rgba(90,207,167,0.5); color: #fff; } .mpr-selected.highlight{ background: rgba(90,207,167,1); } .mpr-month:hover { cursor:pointer; } .mpr-calholder { display: flex; width: fit-content; background: #3b3b3b; position: absolute; top: 0; right: 0; margin: 58px -30px 0; border: 1px solid #2e2b2b; box-shadow: 4px 7px 8px 0px rgba(0, 0, 0, 0.4); } .mpr-calholder::before { content: ''; display: block; width: calc(100% - 2px); height: 1px; background: #454545; border: none; position: absolute; top: 0; left: 1px; z-index: 0; } .mpr-calholder > div { width: 280px; } .mpr-calholder > div:nth-of-type(1) h5 { border-right: none; } .mpr-calholder > div:nth-of-type(2) h5 { border-left: none; } .mpr-calholder > div:nth-of-type(1) .mpr-yearup, .mpr-calholder > div:nth-of-type(2) .mpr-yeardown { display: none; } .mpr-calholder > div:nth-of-type(2)::before { content: ''; display: block; width: 1px; height: 115px; background: #515151; position: absolute; top: 60px; margin-left: 5px; } .mpr-calholder > div:nth-of-type(2)::after { content: ''; display: block; width: 1px; height: 115px; background: #2e2b2b; position: absolute; top: 60px; right: 50%; margin-right: -5px; } .mpr-yearholder > div:nth-of-type(2)::before, .mpr-yearholder > div:nth-of-type(2)::after { display: none; } .mpr-yeardown, .mpr-yearup { margin-left: 5px; cursor: pointer; border: 1px solid #7c7c7b; border-width: 0 1px 1px 0; padding: 4px; } .mpr-yeardown { float:left; transform: rotate(135deg); } .mpr-yearup { float:right; transform: rotate(-45deg); } .mrp-date-input { display: none; } /*------------------------------------------------------------------- jstree.js custom -------------------------------------------------------------------*/ .jstree-default { height: 100%; overflow-y: scroll; padding: 20px; border: 1px solid #dadce0; } .jstree-default .jstree-node { min-height: 26px; line-height: 26px; font-weight: 400; position: relative; } .jstree-default .jstree-node::before { content: ''; position: absolute; top: 0; bottom: 1px; left: 10px; z-index: 1; border-left: 1px dotted #dadce0; } .jstree-default .jstree-node:last-child:before { bottom: 16px; } .jstree-default .jstree-node .jstree-icon.jstree-ocl::before { content: ''; position: absolute; left: 50%; right: 0; top: 50%; z-index: 0; border-top: 1px dotted #dadce0; } .jstree-default .jstree-node .jstree-icon.jstree-ocl::after { content: ''; position: absolute; top: 50%; left: 50%; margin-left: -4px; margin-top: -4px; border: 5px solid transparent; border-left-color: rgba(55, 55, 55, 0.25) !important; transition: all 0.2s linear; } .jstree-default .jstree-node.jstree-open > .jstree-ocl::after { transform: rotate(45deg); } .jstree-default .jstree-wholerow { height: auto; } .jstree-default .jstree-node:has(> .jstree-wholerow-clicked), .jstree-default .jstree-wholerow-hovered, .jstree-default .jstree-wholerow-clicked { background: #f2f3f4 !important; } .jstree-default .jstree-hovered, .jstree-default .jstree-clicked { background:transparent !important; } .jstree-default > .jstree-wholerow-ul .jstree-hovered, .jstree-default > .jstree-wholerow-ul .jstree-clicked, .jstree-default > .jstree-wholerow-ul .jstree-clicked .jstree-themeicon { color: #373737; } .jstree-default .jstree-node, .jstree-default .jstree-icon { background: none; } .jstree-default .jstree-anchor { padding-top: 2px; margin: 0 4px; color: rgba(55, 55, 55, 0.75); } .jstree-default .jstree-anchor:hover { color: #373737; } .jstree-default .jstree-themeicon { display: inline-block !important; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px; color: rgba(55, 55, 55, 0.35); background: none; } .jstree-default .jstree-open .jstree-themeicon::before { content: '\f07c'; } .jstree-default .jstree-closed .jstree-themeicon::before { content: '\e185'; } .jstree-default .jstree-leaf > .jstree-ocl::after { border: none !important; } .jstree-default .jstree-wholerow-clicked + .jstree-themeicon { color: #373737; } .jstree-default .jstree-checkbox:empty { width: 16px; height: 16px; border-radius: 4px; background: #fff; border: 1px solid #dadce0; margin: 2px 3px 0 0; } .jstree-default .jstree-clicked > .jstree-checkbox { position: relative; } .jstree-default .jstree-clicked > .jstree-checkbox::after { content: ''; display: block; width: 4.5px; height: 8px; border-bottom: 1px solid rgba(55, 55, 55, 0.75); border-right: 1px solid rgba(55, 55, 55, 0.75);; position: absolute; left: 5px; top: 1px; transform: rotate(55deg); cursor: pointer; } .jstree-default .jstree-anchor .fa-solid { color: #ffeb12; } .jstree-default .jstree-search { font-style: italic; font-weight: 200; } .jstree-default.jstree-checkbox-no-clicked .jstree-clicked.jstree-hovered, .jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked, .jstree-default.jstree-checkbox-no-clicked > .jstree-wholerow-ul .jstree-wholerow-clicked.jstree-wholerow-hovered { background: transparent; } .jstree-default .msg-bookmark::after { content: '\f005'; font-family: "Font Awesome 6 Free"; font-weight: 600; color: #ffeb12; margin-left: 5px; } .jstree-default .is-data::after { content: '\f055'; font-family: "Font Awesome 6 Free"; font-weight: 600; color: #4285f4; margin-left: 5px; } .jstree-select { height: 100%; overflow-y: scroll; } .jstree-select .jstree-node { min-height: 28px; line-height: 28px; font-weight: 200;} .jstree-select .jstree-node .jstree-node { margin-left: 20px; } .jstree-select .jstree-wholerow { height: auto; margin-top: -2px; } .jstree-select > .jstree-no-dots .jstree-leaf > .jstr1ee-ocl{ background:transparent; } .jstree-select .jstree-clicked > .jstree-checkbox { display: inline-flex; justify-content: center; align-items: center; } .jstree-select .jstree-clicked > .jstree-checkbox::after { content: ''; display: block; width: 8px; height: 8px; border-radius: 50%; background: #22ade8; } .jstree-select .jstree-checkbox:empty { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1px solid #b9b9b9; margin: 3px 4px 0 4px; } @media (max-width: 768px) { /* 모바일 대응 */ .jstree-default-responsive .jstree-wholerow { background: none; border: none; } .jstree-default-responsive .jstree-wholerow-hovered, .jstree-default-responsive .jstree-wholerow-clicked { background: #4c4c4c; } .jstree-default-responsive .jstree-children .jstree-open > .jstree-wholerow, .jstree-default-responsive .jstree-children .jstree-last > .jstree-wholerow { border: none; box-shadow: none; } .jstree-default-responsive .jstree-anchor { height: auto; font-size: 14px; font-weight: 400; text-shadow: none; line-height: 26px; } .jstree-default-responsive .jstree-icon, .jstree-default-responsive .jstree-icon:empty { width: 20px; height: 20px; line-height: 20px; background: none; } .jstree-default-responsive .jstree-node { margin-left: 20px; } } /*------------------------------------------------------------------- datatable.js custom -------------------------------------------------------------------*/ .dataTables_wrapper { max-width: 100%; min-height: 100px; margin-bottom: 30px; } .dataTables_wrapper:has(.dataTables_filter) { margin-top: -46px; } .dataTables_wrapper .dataTables_processing { min-height: 50px; height: calc(100% - 44px); font-size: 14px; background: rgba(255,255,255,0.7); backdrop-filter: blur(5px); padding-top: 15px; margin-top: 0; top: 0; z-index: 1; } .dataTables_wrapper .dataTables_filter { float: right; margin: 4px 0 5px 19px; } .dataTables_wrapper .dataTables_length { position: absolute; bottom: 0; } .dataTables_wrapper .dataTables_length::after { content: ''; display: block; width: 6px; height: 6px; border-bottom: 2px solid #a5a5a5; border-right: 2px solid #a5a5a5; position: absolute; right: 15px; top: 50%; margin-top: -5px; transform: rotate(45deg); cursor: pointer; } .dataTables_wrapper .dataTables_length select { min-width: 66px; height: 30px; font-size: 14px; line-height: 1; color: #373737; border: 1px solid #dadce0; border-radius: 4px; padding: 3px 30px 0 10px; appearance: none; cursor: pointer; } .dataTables_wrapper .dataTables_filter input { width: 200px; height: 37px; font-size: 14px; font-weight: 300; line-height: 1; color: #bababa; background: url(../images/ico_search2.png) no-repeat right 10px center; border: 1px solid #dadce0; border-radius: 4px; padding: 3px 35px 3px 15px; margin-left: 0; position: relative; z-index: 1; } .dataTables_wrapper .dataTables_filter input::-webkit-search-decoration, .dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button, .dataTables_wrapper .dataTables_filter input::-webkit-search-results-button, .dataTables_wrapper .dataTables_filter input::-webkit-search-results-decoration{ display:none; } .dataTables_wrapper .dataTables_filter input::placeholder { color: #bababa; } .dataTables_wrapper table { width: 100%; line-height: 1; border-collapse: collapse; border: 1px solid #dadce0; margin-left: 0; } .dataTables_wrapper table thead th:not(:nth-of-type(1)) { width: auto !important; } .dataTables_wrapper table thead th { height: 21px; font-size: 14px; font-weight: 400; color: #373737; border: 1px solid #dadce0; vertical-align: middle; } /*.dataTables_wrapper table thead th { max-width: 50px; }*/ .dataTables_wrapper table thead .sorting_disabled { cursor: default; } .dataTables_wrapper table thead .sorting, table.data_table thead .sorting_asc { background-image: none !important; } .dataTables_wrapper table tbody th, .dataTables_wrapper table tbody td { height: 21px; color: #373737; font-size: 14px; text-align: center; border: 1px solid #dadce0; vertical-align: middle; } .dataTables_wrapper table tbody td.tit-data { width: 60%; } .dataTables_wrapper table thead th:first-child, table.data_table tbody td:first-child { border-left: none; } .dataTables_wrapper table thead th:last-child, table.data_table tbody td:last-child { border-right: none; } .dataTables_wrapper table tbody tr { background: none; } .dataTables_wrapper table tbody tr:not(.child):nth-child(odd) { background: rgba(233, 233, 233, 0.7); } .dataTables_wrapper table tbody tr:hover, .dataTables_wrapper table tbody tr.select { background: #e3edfd !important; cursor: pointer; } .dataTables_wrapper table thead th.date-column { width: 190px !important; } .dataTables_wrapper table input[type=checkbox] + label { display: inline-flex; justify-content: center; /*gap: 5px; width: 46px;*/ padding: 0; vertical-align: middle; text-indent: -999em; font-size: 0.1px; color: transparent; margin: 0 -10px; } .dataTables_wrapper table input[type=checkbox] + label i { position: relative; bottom: 1px; text-indent: 0; } .dataTables_wrapper table.selectable td { cursor: pointer; } .dataTables_wrapper table button { min-width: auto; height: 25px; padding: 2px 10px 0 10px; } .popup-wrapper table.data_table { border-top: none;} .popup-wrapper table.data_table thead th { font-weight: 300; color: #9b9a9a; } .popup-wrapper table.data_table tbody td { font-size: 14px; } .popup-wrapper .dataTables_wrapper { margin: 0 30px; } .popup-wrapper .dataTables_length { display: none; } .popup-wrapper table.data_table, .popup-wrapper .dataTables_scrollBody, .popup-wrapper .dataTables_wrapper.no-page .dataTables_scroll { background: none; } .popup-wrapper .dataTables_scrollBody::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 1px; background-clip: content-box; } .popup-wrapper .dataTables_scrollBody::-webkit-scrollbar-track { background: #1d1d1d; } .dataTables_wrapper .dataTables_paginate, .paging_wrap { display: flex; color: #858484; float: none; clear: both; max-width: max-content; margin: 10px 0 0 auto; } .dataTables_wrapper .dataTables_paginate .paginate_button { background: #fff; height: 30px; min-width: 30px; font-size: 14px; line-height: 30px; color: rgba(55, 55, 55, 0.75) !important; border: 1px solid #dadce0 !important; border-radius: 6px; padding: 0 3px; margin-left: 5px; } .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: #4285f4; border-color: #4285f4 !important; color: #fff !important; position: relative; z-index: 2; } .dataTables_wrapper .dataTables_paginate .paginate_button.previous, .dataTables_wrapper .dataTables_paginate .paginate_button.next { display: flex; align-items: center; justify-content: center; background: #fff !important; text-indent: -999em; line-height: 0; } .dataTables_wrapper .dataTables_paginate .paginate_button.previous::after, .dataTables_wrapper .dataTables_paginate .paginate_button.next::after { content: ''; display: block; width: 7px; height: 7px; border-top: 1px solid #606060; border-right: 1px solid #606060; } .dataTables_wrapper .dataTables_paginate .paginate_button.previous::after { transform: rotate(225deg); margin-left: 4px; } .dataTables_wrapper .dataTables_paginate .paginate_button.next:after { transform: rotate(45deg); margin-right: 4px; } .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):hover { background: #efefef !important; color: #373737 !important; position: relative; z-index: 1; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover:after { background: #efefef !important; border-color: #373737 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):active { box-shadow: none !important; background: #efefef !important; } .dataTables_info { display: none; } .dataTables_wrapper.no-page .dataTables_scroll { background: rgba(233, 233, 233, 0.7); } .dataTables_scrollHead { background: rgba(233, 233, 233, 0.7); } .dataTables_scrollBody { background: #3b3b3b; border: none !important; } .dataTables_scrollBody::-webkit-scrollbar { width: 10px; height: 10px; } .dataTables_scrollBody::-webkit-scrollbar-thumb { background: #4e4c4c; border: 2px solid transparent; border-radius: 1px; background-clip: content-box; } .dataTables_scrollBody::-webkit-scrollbar-track { background: #2f2e2e; } table.dataTable.no-footer { border-bottom: 1px solid #dadce0; } table.dataTable td.dataTables_empty { height: 100px; } table.dataTable > tbody > tr.child ul.dtr-details { width: 100%; } table.dataTable > tbody > tr.child ul.dtr-details li { display: flex; align-items: center; font-size: 14px; border: none; padding: 0; } table.dataTable > tbody > tr.child span { padding: 0.5em; } table.dataTable > tbody > tr.child span > i { text-align: center; margin-top: -4px; } table.dataTable > tbody > tr.child span.dtr-title { min-width: auto; font-weight: 300; } table.dataTable > tbody > tr.child span.dtr-title::after { content: ' :'; display: inline; } table.dataTable > tbody > tr.child span.dtr-data { flex: 1; text-align: left; word-break: break-word; white-space: pre-wrap; padding-left: 0; } table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control { white-space: nowrap; } table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before, table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before { border-left-color: #e3edfd; } table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > td.dtr-control:before, table.dataTable.dtr-inline.collapsed > tbody > tr.dtr-expanded > th.dtr-control:before { border-top-color: #e3edfd; } table.dataTable.dtr-inline.collapsed > tbody > tr > td.child, table.dataTable.dtr-inline.collapsed > tbody > tr > th.child { text-align: left; background: rgba(0, 0, 0, 0.3); padding: 0; } table.dataTable.dtr-column > tbody > tr > td.dtr-control.arrow-right::before, table.dataTable.dtr-column > tbody > tr > th.dtr-control.arrow-right::before, table.dataTable.dtr-column > tbody > tr > td.control.arrow-right::before, table.dataTable.dtr-column > tbody > tr > th.control.arrow-right::before { width: 20px; height: 20px; line-height: 1.6; color: #373737; border-radius: 4px; background: #fff; border: 1px solid #dadce0; box-shadow: none; margin: 0; position: static; /* left: auto; right: 7px; transform: translateY(-50%);*/ margin: 0 auto; } table.dataTable.dtr-column > tbody > tr.dtr-expanded td.dtr-control:before, table.dataTable.dtr-column > tbody > tr.dtr-expanded th.dtr-control:before, table.dataTable.dtr-column > tbody > tr.dtr-expanded td.control:before, table.dataTable.dtr-column > tbody > tr.dtr-expanded th.control:before { background: #303030; } table.dataTable thead th, table.dataTable thead td { box-sizing: border-box; } div.dtfc-left-top-blocker, div.dtfc-right-top-blocker { display: none !important; } @media (max-width: 767.98px) { /* 모바일 대응 */ .dataTables_wrapper .dataTables_processing { height: calc(100% - 96px); } .dataTables_wrapper .dataTables_length { bottom: 40px; } .dataTables_wrapper .dataTables_paginate { margin: 50px auto 0; } .dataTables_wrapper .dataTables_filter { width: calc(100% - 85px); margin: 4px 0 10px 0; float: left; } .dataTables_wrapper .dataTables_filter input { width: 100%; } } /*------------------------------------------------------------------- 서브페이지 공통 -------------------------------------------------------------------*/ .sub-wrapper { min-height: calc(100vh - 200px); margin: 0 30px 35px; padding: 20px 0 25px; } .sub-wrapper .btn-wrapper { justify-content: flex-start; position: relative; z-index: 1; width: fit-content /*padding: 5px 0 10px;*/ } .sub-wrapper .btn-wrapper button { height: 32px; } .sub-wrapper .sub-bar { width: calc(100% + 60px); height: 1px; background: #606060; margin: 30px -30px 10px; } .main-wrapper .sub-wrapper { padding: 0; margin: 0; } .main-wrapper > div:nth-child(1) { padding: 20px 25px 25px 0; } .main-wrapper > div:nth-child(2) { border-left: 1px solid rgba(218, 220, 224, 0.5); padding: 20px 0 25px 25px; } .data-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; /*min-height: 47px;*/ margin-bottom: 5px; position: relative; z-index: 1; } .data-head.no-page { width: 100%; } .data-head.no-page h3 + .search-wrapper { margin-left: auto; } .data-head h3 { font-size: 18px; font-weight: 400; letter-spacing: -0.025em; line-height: 37px; } .data-head h3 .sub-tit { font-size: 14px; color: #d2d2d2; white-space: nowrap; } .data-head h3 + .legend { display: inline-flex; gap: 10px; font-size: 14px; font-weight: 300; color: #d2d2d2; margin-left: 20px; margin-right: auto; } .data-head h3 + .form { display: inline-flex; gap: 5px; margin-left: auto; } .data-head h3 + .form input[type=text] { width: auto; height: 37px; } .data-head i { font-size: 14px; font-weight: 300; } .data-container.active { display: block; } .data-container { display: none; } .search-wrapper { display: flex; align-items: center; flex-wrap: wrap; font-size: 15px; /*padding: 5px 0 10px;*/ } .search-wrapper .item { display: flex; align-items: center; gap: 10px; } .search-wrapper input[type=checkbox] + label { padding: 0; } .search-wrapper .tit { display: flex; align-items: center; gap: 10px; font-weight: 600; line-height: 1; color: #373737; } /*.search-wrapper .tit:not(:nth-of-type(1))::before { content: ''; display: block; width: 1px; height: 24px; background: #dadce0; margin: 0 14px 0 10px; }*/ .search-wrapper .btns { display: inline-flex; gap: 8px; } .search-wrapper .form + .btns { margin-left: 6px; } .search-wrapper .form { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 15px; width: 100%; } .search-wrapper .form input[type=text]:not(.date-input) { width: 160px; height: 37px; background: #fff; border: 1px solid #dadce0; padding: 3px 10px; } .search-wrapper .form input[type=text]:not(.date-input).filter { background-image: url(../images/ico_search2.png); background-position: right 10px center; background-repeat: no-repeat; } .search-wrapper .form .date-input { height: 37px; padding: 3px 40px 3px 15px; } .search-wrapper .form select { height: 37px; } .search-wrapper .input-box { display: flex; align-items: center; gap: 5px; } .search-wrapper .radio-wrapper { color: #373737; margin-left: 0; } .search-wrapper .item-full, .search-wrapper .item-full .select-box { min-width: 200px; } @media (max-width: 575.98px) { /* 모바일 대응 */ .search-wrapper .item-full, .search-wrapper .item-full .select-box { min-width: auto; width: 100%; } } .sub-tab { display: grid; width: 100%; height: 100%; letter-spacing: -0.025em; background: #fff; position: relative; } .sub-tab > label { display: flex; align-items: center; width: 50%; height: 65px; font-size: 20px; font-weight: 300; letter-spacing: -0.025em; line-height: 1; color: #bebebe; background: #fbfbfb; border: 1px solid #e6e9ee; padding: 3px 22px 0; cursor: pointer; position: absolute; top: 0; } .sub-tab > label:not(:first-of-type) { border-left: none; } .sub-tab > label:nth-of-type(1) { left: 0; } .sub-tab > label:nth-of-type(2) { left: 50%; } .sub-tab > label::before { content: ''; display: inline-block; border-left: 5px solid #bebebe; border-top: 5px solid transparent; border-bottom: 5px solid transparent; margin-right: 14px; } .sub-tab > label + div { display: none; width: 100%; background: #fff; border-top: 4px solid #49bdec; margin-top: 65px; } .sub-tab > input[type=radio] { display: none; } .sub-tab > input[type=radio]:checked + label { color: #606060; background: #fff; } .sub-tab > input[type=radio]:checked + label::before { border-top: 5px solid #606060; border-left: 5px solid transparent; border-right: 5px solid transparent; margin-right: 10px; } .sub-tab > input[type=radio]:checked + label + div { display: grid; } .sub-tab .btn-wrapper { padding-right: 0 !important; } .scroll { overflow: hidden; overflow-y: auto; } .scroll::-webkit-scrollbar { width: 6px; } .scroll::-webkit-scrollbar-thumb { background: #dfe3ea; border-radius: 3px; } .scroll::-webkit-scrollbar-track { background: transparent; } .form-inner { display: grid; grid-template-columns: repeat(2,1fr); gap: 0 10px; line-height: 1; margin-bottom: -10px; } .form-inner.single-line { grid-template-columns: 1fr; } .form-inner.triple-line { grid-template-columns: repeat(3,1fr); } .form-inner + .form-inner { border-top: none; } .form-inner dl { min-width: 0; margin-bottom: 10px; } .form-inner dl.row { display: flex; gap: 15px; } .form-inner dt { display: flex; align-items: center; gap: 5px; min-height: 30px; font-size: 14px; font-weight: 600; color: #373737; } /*.form-inner dt::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #4285f4; }*/ .form-inner dt i { font-weight: 400; color: #ff4646; } .form-inner dd { display: flex; align-items: center; gap: 20px; min-width: 0; } .form-inner dd.latlang { justify-content: flex-end; gap: 5px; } .form-inner dd.latlang div { display: flex; align-items: center; justify-content: flex-end; gap: 15px; width: 50%; } .form-inner dd.latlang div input[type=text] { width: calc(100% - 50px); } .form-inner dd.column { flex-direction: column; gap: 8px; } .form-inner dd.noti-term { gap: 5px; white-space: nowrap; } .form-inner input[type=text], .form-inner input[type=password], .form-inner input[type=number] { flex: auto; } /*.form-inner input[type=text].date-input { color: #bababa; background: #fff; border: 1px solid #dadce0; }*/ .form-inner .select-box { width: 100%; } .form-inner select { min-width: 146px; height: 37px; } .form-inner .radio-wrapper { height: 37px; } .form-inner .textarea-wrapper { margin: 5px 0; } .form-inner .textarea-wrapper > div + p { font-size: 12px; font-weight: 300; color: rgba(55,55,55,.65); margin-top: 10px; } .form-inner .column-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; width: 100%; } /*.form-inner .column-2 dl:nth-last-of-type(1) { margin-left: auto; }*/ .form-inner table + table { margin-top: 20px; } .form-inner thead { max-width: 700px; border: 1px solid #3b3b3b; } .form-inner thead th { height: 39px; font-size: 15px; color: #80807f; background: rgba(233, 233, 233, 0.7); padding: 10px 0; } .form-inner tbody td { font-size: 15px; color: #fefefe; text-align: center; padding: 3px 4px; } .form-inner tbody td input[type=number] { text-align: center; padding: 0; } .form-inner tbody::before { content: ''; display: block; width: 100%; height: 10px; } .show-hide.hide { display: none; } .show-hide.show { display: grid; } .form-inner input[type=text].date-input, .form-style input[type=text].date-input { width: 100%; } .form-inner .btn-type2 { border-color: #1e1d1f; } .form-inner input + button { margin-left: -15px; } @media (max-width: 1090px) { .search-wrapper .radio-wrapper { line-height: 2; margin-right: 10px; } } @media (max-width: 767.98px) { /* 모바일 대응 */ .sub-wrapper { min-height: auto; margin: 0 15px; padding: 0; } .main-wrapper > div:nth-child(1) { padding: 20px 0; } .main-wrapper > div:nth-child(2) { width: calc(100% + 40px); margin: 0 -20px; padding: 20px 20px; border-left: none !important; border-right: none !important; border-top: 1px solid rgba(218, 220, 224, 0.5); } .data-head { flex-direction: column; align-items: flex-start; height: auto; } .data-head.no-page { flex-direction: row; } /*.data-head h3 { margin-bottom: 10px; }*/ .data-head .search-wrapper { align-items: flex-end; margin-bottom: 10px;/* padding: 15px 10px 10px; border: 1px solid #dadce0; border-radius: 4px; */} .data-head .search-wrapper .form { align-items: flex-start; /*flex-direction: column; gap: 5px; */ } .data-head .search-wrapper .form input[type=text]:not(.date-input) { width: auto; } .data-head .search-wrapper .input-box { width: auto; } .dataTables_wrapper:has(.dataTables_filter) { margin-top: -12px; } } @media (max-width: 575.98px) { /* 모바일 대응 */ .data-head.no-page { flex-direction: column; } } .noti-txt { font-size: 12px; font-weight: 300; color: #bababa; float: right; } .noti-txt i { color: #ff4646; } /*------------------------------------------------------------------- 상태아이콘, 스타일 -------------------------------------------------------------------*/ i.status { display: inline-block; width: 16px; height: 17px; vertical-align: middle; margin: -3px 0 0 5px; } i.status.normal { background: url(../images/ico_normal_s.png) no-repeat center center; } i.status.error { background: url(../images/ico_error_s.png) no-repeat center center; } i.status.waiting { background: url(../images/ico_waiting_s.png) no-repeat center center; } i.status.fail { background: url(../images/ico_fail_s.png) no-repeat center center; } span.status { display: inline-flex; justify-content: center; align-items: center; min-width: 70px; height: 26px; border-radius: 2px; margin: 0 auto; padding: 0 10px; } span.status.success { color: #199cd3; background: #daeff7; border: 1px solid #22ade8; } span.status.fail { color: #e31414; background: #faeded; border: 1px solid #ff8e8e; } i.state { display: inline-block; width: 14px; height: 14px; vertical-align: middle; border-radius: 50%; } i.state.normal { background: #26a1de; } i.state.miss { background: #ff4646; } i.state.wait { background: #8a8a8a; } i.state.safe { background: #70eb3a; color: #70eb3a; } i.state.caution { background: #f8ff42; color: #f8ff42;} i.state.warning { background: #ff9b27; color: #ff9b27; } i.state.evacuation { background: #ff4646; color: #ff4646; } table i.state { margin: -2px 0 2px; } .pgm-type { display: inline-block; width: 38px; height: 20px; font-size: 12px; line-height: 1.7em; text-align: center; padding: 0 !important; } .pgm-type.view { border: 1px solid #a2a2a2; } .pgm-type.ajax { color: #42ccfa; border: 1px solid #42ccfa; } .menu-type { display: inline-block; width: 48px; height: 20px; font-size: 12px; line-height: 1.7em; text-align: center; } .menu-type.m1level { border: 1px solid #a2a2a2; } .menu-type.m2level { color: #42ccfa; border: 1px solid #42ccfa; margin-left: 30px; } .evt-type { display: inline-block; min-width: 88px; height: 22px; font-size: 12px; line-height: 2em; text-align: center; color: rgba(55,55,55,.65); border: 1px solid #606473; } .evt-type.release { color: #4285f4; } .rst-type { display: inline-block; width: 38px; height: 20px; font-size: 12px; line-height: 1.7em; text-align: center; color: #999b9a; border: 1px solid #606473; } .rst-type.done { color: #4285f4; } .rst-type.fail { color: #f05353; } .ico-regist { display: inline-block; width: 18px; height: 18px; background: url(../images/ico_permit.png) no-repeat 0 0; margin: 0 3px -4px 0; } .ico-unregist { display: inline-block; width: 18px; height: 18px; background: url(../images/ico_block.png) no-repeat 0 0; margin: 0 3px -4px 0; } .ico-use { display: inline-block; width: 16px; height: 16px; background: url(../images/ico_use.png) no-repeat 0 0; margin: 0 3px -3px 0; } .ico-nonuse { display: inline-block; width: 16px; height: 16px; background: url(../images/ico_nonuse.png) no-repeat 0 0; margin: 0 3px -3px 0; } .ico-active { display: inline-block; width: 19px; height: 14px; background: url(../images/ico_status.png) no-repeat 0 0; margin: 0 3px -1px 0; background-size: cover; } .ico-inactive { display: inline-block; width: 19px; height: 16px; background: url(../images/ico_status.png) no-repeat -24px 0; margin: 0 3px -2px 0; background-size: cover; } .ico-data { white-space: nowrap; } /* 범례 */ h3 + .legend { margin-left: 20px; } .legend { display: flex; justify-content: flex-end; gap: 10px; } .legend li { display: flex; align-items: center; gap: 5px; } .legend span { color: #fff; } .legend i { display: block; width: 16px; height: 16px; border-radius: 50%; } /*------------------------------------------------------------------- form -------------------------------------------------------------------*/ .select-box { min-height: 37px; position: relative; border: 1px solid #dadce0; border-radius: 6px; overflow: hidden; } .select-box select { height: 35px !important; border: none; } .select-box.readonly { opacity: 0.9; } .select-box.readonly select { cursor: default; pointer-events: none; } .select-box.disabled { opacity: 0.9; } .select-box::after { content: ''; display: block; width: 8px; height: 8px; border-bottom: 2px solid #a5a5a5; border-right: 2px solid #a5a5a5; position: absolute; right: 15px; top: 50%; margin-top: -6px; transform: rotate(45deg); cursor: pointer; } .select-box.disabled::after { cursor: default; } .select-box.warning { border: 1px solid rgb(234, 67, 53); } .select-box.warning::after { border-color: rgb(234, 67, 53) !important; } /*select { width: 100%; min-width: 66px; height: 30px; font-size: 14px; line-height: 1; background: #fff; border: 1px solid #dadce0; border-radius: 4px; padding: 0 30px 0 15px; appearance: none; cursor: pointer; }*/ select { width: 100%; min-width: 66px; height: 37px; font-size: 14px; font-weight: 400; color: #373737; background: #fff; border: 1px solid #dadce0; border-radius: 6px; padding: 2px 30px 0 10px; appearance: none; cursor: pointer; } select:focus { color: #373737; background-color: #fff; border-color: #71a4f7; outline: 0; box-shadow: 0 0 0 0.25rem rgba(66, 133, 244, 0.25); } select:disabled { cursor: default; background-color: rgba(218, 220, 224, 0.5); } .select2.select2-container { width: calc(100% + 2px) !important; margin: 0 -1px !important; outline: 0 !important; } .select2-container--default .select2-selection--single { border: none !important; outline: 0 !important; } .select2-container .select2-selection--single { height: 35px !important; } .select2-container--default .select2-selection--single .select2-selection__rendered { font-weight: 400; padding-left: 12px !important; padding-right: 0 !important; line-height: 35px !important; } .select2-container--default .select2-selection--single .select2-selection__arrow { display: none !important; } .select2-dropdown { border-color: #dadce0 !important; margin-top: -3px !important; overflow: hidden; } .select2-dropdown.warning { border-color: rgb(234, 67, 53) !important; } .select2-container--default .select2-search--dropdown .select2-search__field { height: 32px !important; border-color: #dadce0 !important; box-shadow: none !important; } .select2-container--default .select2-selection--single .select2-selection__clear { height: 35px !important; margin-right: 35px !important; } .select2-results__option { padding: 6px 6px 6px 10px !important; } .select-lyr { position: relative; } .select-lyr > input[type=text] { width: 100%; min-width: 66px; height: 37px; font-size: 14px; color: #bababa; border-radius: 4px; padding: 0 30px 0 15px; appearance: none; cursor: pointer; } .select-lyr > input[type=text]:valid { color: #373737 !important; } .select-lyr > input[type=text] + div { display: none; } .select-lyr.active > input[type=text] + div { display: block; width: 100%; color: #373737; background: #fff; border: 1px solid #dadce0; border-radius: 4px; box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.1); padding: 5px 10px 5px 15px; position: absolute; z-index: 1; } .select-lyr::after { content: ''; display: block; width: 6px; height: 6px; border-bottom: 2px solid #a5a5a5; border-right: 2px solid #a5a5a5; position: absolute; right: 15px; top: 50%; margin-top: -5px; transform: rotate(45deg); cursor: pointer; } .select-lyr:has(.warning)::after { border-color: rgb(234, 67, 53) !important; } .form-inner .select-lyr { width: 100%; } .popup-wrapper .select-lyr::after { border-color: #c1bfbf; } /*.popup-wrapper .select-lyr > input[type=text] { color: #bababa; background: #585858; border: 1px solid #666; }*/ .select-lyr .tree { height : 220px; } .select-lyr .tree ul { height: 100%; overflow: hidden; overflow-y: scroll; } .select-lyr .tree li { display: flex; align-items: center; gap: 5px; height: 30px; cursor: pointer; } .select-lyr .tree li.ajax { margin-left: 30px; } .select-lyr .tree #prnt-pgm-list li.ajax { cursor: default; pointer-events: none; } input[type=text], input[type=password], input[type=number], input[type=search] { width: 100%; height: 37px; font-size: 14px; font-weight: 400; line-height: 1; color: #373737; background: #fff; border: 1px solid #dadce0; border-radius: 6px; padding: 3px 10px 3px; } input[type=text]:focus, input[type=password]:focus, input[type=number]:focus, input[type=search]:focus { color: #373737; background-color: #fff; border-color: #71a4f7; outline: 0; box-shadow: 0 0 0 0.25rem rgba(66, 133, 244, 0.25); } input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=text]::placeholder, input[type=password]::placeholder, input[type=number]::placeholder, input[type=search]::placeholder { color: #909090; } input[type=text][readonly], input[type=password][readonly], input[type=number][readonly], input[type=search][readonly] { background-color: rgba(218, 220, 224, 0.5); } input[type=text]:disabled, input[type=password]:disabled, input[type=number]:disabled, input[type=search]:disabled { background-color: rgba(218, 220, 224, 0.5); } input[type=text].date-input { width: 135px; font-family: 'Apple SD Gothic Neo', sans-serif; background: #fff; border: 1px solid #dadce0; background-image: url(../images/ico_cal.png); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; } input[type=text]:disabled.date-input { cursor: default; } input[type=text].date-input::after { content: ''; display: block; width: 50px; height: 50px; } input[type=text].range_date_input, input[type=text].range-date-input { width: 225px; background-image: url(../images/ico_cal.png); background-repeat: no-repeat; background-position: right 10px center; cursor: pointer; } input[type=text].search-input { width: 100%; background: #fbfbfb url(../images/ico_search.png) no-repeat right 10px center; cursor: pointer; } input[type=text].warning, input[type=password].warning, input[type=number].warning, input[type=search].warning { border: 1px solid rgb(234, 67, 53) !important; background-image: url(../images/ico_vali.png); background-repeat: no-repeat; background-position: 10px center; padding-left: 35px; cursor: default; } input[type=text].warning::placeholder, input[type=password].warning::placeholder, input[type=number].warning::placeholder, input[type=search].warning::placeholder { color: #b32525; } input[type=text].warning:focus, input[type=password].warning:focus, input[type=number].warning:focus, input[type=search].warning:focus { box-shadow: 0 0 0 0.25rem rgba(234, 67, 53, 0.25); } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-text-fill-color: #a0a0a0; -webkit-box-shadow: 0 0 0px 1000px #fff inset; transition: background-color 5000s ease-in-out 0s; } input[type=file] { display: none; } .file-box { display: flex; gap: 8px; flex: 1; height: 37px; cursor: pointer; min-width: 0; } .file-box .file-label { flex: 1; min-width: 200px; height: 37px; font-size: 14px; font-weight: 300; line-height: 37px; color: #a0a0a0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; background: #fff; border: 1px solid #dadce0; padding: 0 15px; } .file-box input[type=file] + span { height: 37px; line-height: 37px; } .file-box.disabled { cursor: default; } .file-box.disabled .file-label { opacity: 0.9; } .file-box.disabled input[type=file] + span { opacity: 0.9; cursor: default; } .file-box.disabled + .modi-set > button#btn-delFile { opacity: 0.9; cursor: default; pointer-events: none; } input[type=radio] { display: none; } input[type=radio] + label i { display: inline-block; width: 21px; height: 21px; border-radius: 50%; background: #fff; border: 1px solid rgba(0, 0, 0, 0.25); margin: 0 5px -5px 0; } input[type=radio]:checked + label i::after { content: ''; display: block; width: calc(100% + 2px); height: calc(100% + 2px); border-radius: 50%; background: #fff; border: 6px solid #4285f4; margin: -1px; } .radio-wrapper { display: flex; align-items: center; gap: 15px; line-height: 1.4; } .radio-wrapper label { cursor: pointer; gap: 5px; } input[type=checkbox] { display: none; } input[type=checkbox] + label { display: flex; align-items: center; padding: 5px 30px; cursor: pointer; } input[type=checkbox] + label i { width: 21px; height: 21px; border-radius: 3px; background: #fff; border: 1px solid rgba(0, 0, 0, 0.25); } input[type=checkbox]:checked + label i { line-height: 1; background-color: #4285f4; border-color: #4285f4; position: relative; } input[type=checkbox]:checked + label i:after { content: '\f00c'; font-size: 13px; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #fff; display: block; position: absolute; top: 3px; left: 4px; cursor: pointer; } input[type=checkbox]:disabled + label, input[type=checkbox].disabled + label { pointer-events: none; opacity: 0.9; } input[type=checkbox]:disabled + label i, input[type=checkbox].disabled + label i { background: #707070; } input[type=checkbox].chk-bookmark + label { height: auto; padding: 0; } input[type=checkbox].chk-bookmark + label i { display: inline-block; width: 23px; height: 23px; border: none; } input[type=checkbox].chk-bookmark + label i::after { content: '\f005'; display: block; width: auto; height: auto; font-size: 20px; font-family: "Font Awesome 6 Free"; font-weight: 900; color: #dadce0; margin: -7px 0; border: none; transform: none; position: static; } input[type=checkbox].chk-bookmark:checked + label i::after { color: #ffeb12; } .checkbox-wrapper { display: flex; align-items: center; gap: 15px; line-height: 1; } .checkbox-wrapper label { cursor: pointer; gap: 5px; } .checkbox-wrapper input[type=checkbox] { display: none; } .checkbox-wrapper input[type=checkbox] + label { display: flex; align-items: center; gap: 5px; height: 35px; padding: 0; cursor: pointer; } .checkbox-wrapper input[type=checkbox] + label i { width: 14px; height: 14px; border-radius: 2px; background: #fff; margin-top: -1px; border: none; position: relative; } .checkbox-wrapper input[type=checkbox]:checked + label i:after { content: ''; display: block; width: 6px; height: 10px; border-bottom: 2px solid #4285f4; border-right: 2px solid #4285f4; position: absolute; left: 4px; transform: rotate(55deg); cursor: pointer; } textarea { width: 100%; height: 135px; line-height: 1.5; background: transparent; border: none; resize: none; color: #373737; } .textarea-wrapper { width: 100%; } .textarea-wrapper > div { font-size: 15px; color: #a0a0a0; border: 1px solid #dadce0; border-radius: 4px; padding: 10px 15px; } .textarea-wrapper > div:focus { color: #373737; background-color: #fff; border-color: #71a4f7; outline: 0; box-shadow: 0 0 0 0.25rem rgba(66, 133, 244, 0.25); } .textarea-wrapper > div + p { font-size: 15px; font-weight: 300; text-align: right; margin-top: 5px; } .textarea-wrapper > div + p i { font-weight: 700; } .textarea-wrapper.readonly { opacity: 0.9; } .textarea-wrapper.warning > div { color: #b32525; border: 1px solid rgb(234, 67, 53); } .textarea-wrapper.warning:focus { box-shadow: 0 0 0 0.25rem rgba(234, 67, 53, 0.25); } /*.textarea-wrapper.warning > div textarea::-webkit-scrollbar-thumb { background: #e4c7c7; } .textarea-wrapper.warning > div textarea::-webkit-scrollbar-track { background: #cb2525; }*/ .textarea-wrapper.disabled { opacity: 0.9; } .textarea-wrapper.disabled.no-data, .textarea-wrapper.disabled.no-data textarea { height: 0; } fieldset { font-size: 15px; font-weight: 500; padding: 22px 30px; } fieldset .tit { display: inline-flex; align-items: center; gap: 8px; height: 30px; font-size: 16px; font-weight: 400; white-space: nowrap; } fieldset .tit i { font-weight: 400; color: #ff4646; } fieldset .row { display: flex; flex-wrap: wrap; flex-direction: column; flex: 1; width: 100%; } /*fieldset .row > div:not(.textarea-wrapper) { width: fit-content; }*/ fieldset .row + .row { margin-top: 22px; } fieldset .row.col { flex-direction: row; gap: 10px; align-items: center; } fieldset .row.col input[type=text], fieldset .row.col input[type=password], fieldset .row.col input[type=search] { width: auto; } fieldset .row.col input[type=number] { width: 50px; } fieldset .row.col .tit:not(:nth-of-type(1)) { margin-left: 20px; } fieldset .row.column-2 { gap: 30px; } fieldset .column-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; } fieldset .column { display: flex; gap: 10px; } fieldset .column > div { flex: 1; } fieldset .radio-wrapper { font-weight: 300; } fieldset .radio-wrapper input[type=text] { width: 160px; } fieldset .radio-wrapper > div { display: flex; justify-content: flex-end; gap: 10px; flex: 1; margin-left: auto; } fieldset .radio-wrapper > div .select-box { flex: 1; width: 100%; } fieldset .send-later { display: flex; align-items: center; gap: 10px; line-height: 2; margin-left: 10px; } fieldset .send-later.disabled { color: #d1d1d1; } fieldset .send-later .select-box { width: 66px; } fieldset .form-bar { width: calc(100% + 60px); height: 1px; background: #606060; margin: 20px -30px; } /* fieldset .btn-help { display: inline-block; background-image: url(../images/ico_help2.png); } */ /* fieldset input[type=text], fieldset input[type=password], fieldset input[type=number], fieldset input[type=search] { background: #585858; } */ /* fieldset select { background: #585858; border: 1px solid #7c7c7c; } */ fieldset .tooltip.active { display: block; } fieldset .tooltip { display: none; width: max-content; font-size: 12px; line-height: 1.5; color: #818181; background: #151515; border-radius: 4px; padding: 10px 15px; margin: 10px 0 0 100px; position: absolute; z-index: 1; } fieldset .tooltip::before { content: ''; display: block; border: 10px solid #151515; border-top-color: transparent; border-right-color: transparent; position: absolute; left: 0; top: -10px; z-index: 0; } /*fieldset .btn-default { height: 30px; }*/ fieldset .info-txt { font-size: 12px; font-weight: 200; } fieldset .srch-container { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } fieldset .srch-container > div:first-child { display: flex; gap: 5px; width: 30%; } fieldset .srch-container > div:first-child input[type=text] { flex: 1; } fieldset .srch-container .select-box { flex: 1; } /* 입력 영역 공통 */ .form-wrapper { border: 1px solid #dadce0; } .form-wrapper h4 { display: flex; align-items: center; gap: 10px; font-size: 18px; color: #d2d2d2; margin: 0 0 10px -10px; } .form-wrapper h4 span { font-size: 14px; } .form-wrapper h4 + .search-wrapper { margin: -41px -16px 9px auto; } /* .form-wrapper input[type=text], .form-wrapper input[type=number] { background-color: #fff; } */ .form-wrapper .input-icon input[type=text] { background-image: url(../images/ico_search2.png); background-position: right 10px center; background-repeat: no-repeat; cursor: pointer; } .form-wrapper .form-bar { width: calc(100% + 60px); height: 1px; background: #dadce0; } .form-wrapper table { width: calc(100% + 60px); margin: 0 -30px 10px; } .form-wrapper thead th { height: 39px; font-size: 15px; color: #80807f; background: rgba(233, 233, 233, 0.7); } .form-wrapper tbody td { font-size: 15px; color: #fefefe; text-align: center; padding: 5px 7px; } .form-wrapper thead th:first-child, .form-wrapper tbody td:first-child { padding-left: 20px; padding-right: 20px; } .form-wrapper thead th:last-child, .form-wrapper tbody td:last-child { padding-right: 20px; } .form-wrapper tbody::before { content: ''; display: block; width: 100%; height: 10px; } .form-wrapper .textarea-wrapper > div + p { font-size: 12px; font-weight: 300; color: rgba(55,55,55,.65); margin-top: 10px; } .form-wrapper .bookmark { margin-left: auto; } @media (max-width: 1090px) { fieldset > .column-2, fieldset > .column-2 > .column-2 { grid-template-columns: 1fr; } fieldset .row.column-2 { gap: 10px; } fieldset .row + .row { margin-top: 10px; } } @media (max-width: 767.98px) { /* 모바일 대응 */ fieldset { padding: 12px 20px; } fieldset .srch-container > div:first-child { width: 100%; } .form-wrapper .form-bar { width: calc(100% + 40px); margin: 20px -20px; } } @media (max-width: 575.98px) { /* 모바일 대응 */ .file-box .file-label { min-width: auto; } } /*------------------------------------------------------------------- buttons -------------------------------------------------------------------*/ .btn-wrapper { display: flex; justify-content: center; gap: 5px; flex-wrap: wrap; } .btn-wrapper button { display: flex; justify-content: center; align-items: center; gap: 5px; line-height: 1; border-radius: 4px; } .btn-wrapper button.disabled { opacity: 0.4; cursor: default; } .btn-normal { width: 146px; height: 46px; color: #000; background: rgba(218, 220, 224, 0.5); } .btn-submit { width: 146px; height: 46px; color: #fff; background: #4285f4; } .btn-normal:hover { color: #373737; background-color: lightgray; } .btn-submit:hover { color: #FFFFFF; background-color: #3264b7; } .btn-normal:active { background-color: rgba(218, 220, 224, 0.5); } .btn-submit:active { background-color: #71a4f7; } .btn-play { width: 146px; height: 46px; color: #fff; background: #888; } .btn-prev span { display: block; width: 20px; height: 16px; background: url(../images/ico_prev.png) no-repeat 0 0; } .btn-broad span { display: block; width: 20px; height: 20px; background: url(../images/ico_broad.png) no-repeat 0 0; } .btn-sms span { display: block; width: 16px; height: 16px; background: url(../images/ico_sms.png) no-repeat 0 0; } .btn-form { min-width: 65px; height: 37px; font-size: 14px; font-weight: 500; color: #fff; background: #303030; border: 1px solid #252525; padding: 0 10px; border-radius: 4px; white-space: nowrap; } .btn-form#btn-srch, .btn-form#btn-issue-srch { min-width: 39px; font-size: 1px; text-indent: -999em; background-color: #fff; border-color: lightgray; overflow: hidden; } .btn-form#btn-srch::before, .btn-form#btn-issue-srch::before { content: '\f002'; display: block; color: #373737; text-indent: 0; font-family: "Font Awesome 6 Free"; font-size: 14px; font-weight: 900; line-height: 37px; } .btn-srch { min-width: 39px; height: 37px; text-indent: -999em; background: #4285f4; padding: 0 10px; border-radius: 4px; position: relative; } .btn-srch::after { content: '\f002'; display: block; color: #fff; font-size: 18px; font-weight: 900; font-family: "Font Awesome 6 Free"; text-indent: 0; position: absolute; top: 5px; left: 10px; } .btn-form2 { min-width: 65px; height: 39px; font-size: 14px; font-weight: 500; border: 1px solid #e5eaf0; background: #fff; padding: 0 10px; border-radius: 4px; white-space: nowrap; } /*.btn-help { display: inline-block; width: 23px; height: 23px; background: url(../images/btn_help.png) no-repeat 0 0; vertical-align: middle; margin-top: -3px; }*/ .btn-down { display: block; width: 123px; height: 32px; font-size: 12px; background: url(../images/ico_down_blue.png) no-repeat 10px center; background-size: 18px 15px; border: 1px solid #e5eaf0; border-radius: 4px; padding-left: 14px; position: absolute; top: 85px; right: 30px; } .btn-unlock { display: block; width: 26px; height: 24px; background: url(../images/btn_unlock.png) no-repeat 0 0; margin: 0 auto; } .btn-modi { display: block; width: 50px; height: 21px; font-size: 12px; line-height: 21px; color: #fff; border-radius: 4px; background: #888 url(../images/ico_modi.png) no-repeat 5px center; padding-left: 15px; } .btn-del { display: block; width: 50px; height: 21px; font-size: 12px; line-height: 21px; border: 1px solid #dee3ea; border-radius: 4px; background: url(../images/ico_del.png) no-repeat 5px center; padding-left: 10px; } .btn-history { display: inline-block; width: 14px; height: 16px; background: url(../images/icon_tree_leaf.png) no-repeat 0 0; } /*.btn-reset { display: block; width: 86px; height: 37px; font-size: 14px; color: #fff; border-radius: 4px; background: #888 url(../images/btn_reset.png) no-repeat 10px center; padding-left: 20px; }*/ .btn-file-down { display: inline-flex; align-items: center; margin: 0 2px; height: 32px; font-size: 12px; border: 1px solid #e7ebf1; border-radius: 4px; background: #fff url(../images/ico_down_blue.png) no-repeat 10px center; padding: 0 10px 0 35px; } .btn-file-prev { display: inline-flex; align-items: center; margin: 0 2px; height: 32px; font-size: 12px; border: 1px solid #e7ebf1; border-radius: 4px; background: #fff url(../images/ico_prev.png) no-repeat 10px center; padding: 0 10px 0 35px; } .btn-help { display: block; width: 19px; height: 19px; } .btn-help::before { content: '\f059'; display: block; font-family: "Font Awesome 6 Free"; font-size: 18px; font-weight: 600; line-height: 0.8; } .btn-excel { display: flex; align-items: center; justify-content: center; gap: 5px; width: 80px; height: 33px; font-size: 12px; color: #b4b4b4; background: #303030; border: 1px solid #252525; border-radius: 5px; margin-left: auto; margin-bottom: 10px; } .btn-excel::before { content: ''; display: block; width: 18px; height: 18px; background: url(../images/ico_down.png) no-repeat 0 0; } .btn-batch { display: flex; align-items: center; justify-content: center; gap: 5px; width: 39px; height: 37px; font-size: 12px; color: #373737; background: #fff; border: 1px solid lightgray; border-radius: 5px; margin-left: auto; } .btn-batch::before { content: '\f141'; display: block; width: 19px; height: 5px; font-family: "Font Awesome 6 Free"; font-size: 18px; font-weight: 600; line-height: 0.3; color: #373737; } .btn-default { min-width: 55px; height: 37px; font-size: 14px; font-weight: 500; color: #fff; background: #4285f4; border-radius: 5px; padding: 0 12px; white-space: nowrap; } .btn-type1 { min-width: 55px; height: 37px; font-size: 14px; font-weight: 500; color: #000; background: rgba(218, 220, 224, 0.5); border-radius: 5px; padding: 0 12px; white-space: nowrap; } .btn-type2 { min-width: 55px; height: 37px; font-size: 14px; font-weight: 500; color: #000; border: 1px solid rgba(218, 220, 224, 1); background: #fff; border-radius: 5px; padding: 0 12px; white-space: nowrap; } .btn-default:hover { color: #FFFFFF; background-color: #3264b7; } .btn-type1:hover { color: #373737; background-color: lightgray; border-color: lightgray; } .btn-form:hover, .btn-type2:hover, .btn-batch:hover { color: #373737; background-color: rgba(218, 220, 224, 0.5) !important; border-color: lightgray !important; } .btn-default:active { background-color: #71a4f7; } .btn-form:active, .btn-type1:active, .btn-type2:active, .btn-batch:active { background-color: rgba(218, 220, 224, 0.5); } .btn-map-app { font-size: 12px; color: #fff; background: #4f94fd; border: 1px solid #4784e3; border-radius: 3px; padding: 4px 5px 2px; margin-left: 5px; } /*------------------------------------------------------------------- 팝업 공통 -------------------------------------------------------------------*/ .popup-wrapper { display: none; align-items: center; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 10; } .popup-wrapper.active { display: flex; } .popup-wrapper::after { content: ''; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.6); position: fixed; z-index: -1; } .popup-wrapper .popup-inner { width: 100%; min-width: 300px; min-height: 180px; height: auto !important; background: #fff; box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 1); padding: 1px; border-radius: 15px; box-shadow: 0px 0px 42px 0px rgba(0, 0, 0, 0.34); position: relative; left: 50%; transform: translateX(-50%); } .popup-wrapper .popup-container { color: #373737; background: #fff; border-radius: 15px; padding-bottom: 30px; position: relative; } .popup-wrapper .popup-container > .popup-close:nth-last-of-type(1) { /*width: 22px; height: 24px; *background: url(../images/btn_close.png) no-repeat 0 0;*/ position: absolute; top: 22px; right: 20px; } .popup-wrapper .popup-container > .popup-close:nth-last-of-type(1)::after { content: '\f00d'; display: block; font-family: "Font Awesome 6 Free"; font-size: 20px; font-weight: 600; line-height: 1; } .popup-wrapper .popup-inner form > .noti-txt { float: none; text-align: right; margin: 15px 30px 5px; } .popup-wrapper .popup-inner .form-inner { margin: 0 30px; } .popup-wrapper h4 { height: 40px; font-size: 18px; font-weight: 600; color: #373737; padding: 22px 30px 0; margin-bottom: 23px; } .popup-wrapper .btn-wrapper { padding: 15px 30px 0; } .popup-wrapper .btn-wrapper button { max-width: 120px; height: 43px; position: relative; } .popup-wrapper .btn-wrapper button::after { content: ''; display: block; width: calc(100% - 4px); height: 1px; background: rgba(255, 255, 255, 0.15); position: absolute; top: 0; } .popup-wrapper h5 { font-size: 18px; font-weight: 400; margin: 14px auto 5px; position: relative; margin: 0 30px; } /*.popup-wrapper h5::before { content: ''; display: block; width: calc(100% + 60px); height: 1px; background: #515151; margin: 0 -30px 13px; }*/ .popup-wrapper h5.tit { display: inline-flex; align-items: center; gap: 8px; height: 30px; font-size: 16px; font-weight: 400; color: rgba(55,55,55,.65); margin: 0 30px; } .popup-wrapper h5.tit::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #4285f4; margin: 0; } .popup-wrapper .popup-content { margin: 0 30px; } .popup-wrapper .select-box::after { border-color: #c1bfbf; } /*.popup-wrapper select { color: #fefefe; background: #dadce0; border: 1px solid #666; }*/ /*.popup-wrapper .btn-default { color: #b4b4b4; background: #494d5a; border-color: #171616; }*/ /*.popup-wrapper .btn-help { background-image: url(../images/ico_help2.png); }*/ .popup-wrapper .popup-bar { height: 1px; background: rgba(218, 220, 224, 0.5); margin: 10px auto; } .popup-wrapper .popup-tab { display: flex; gap: 13px; margin: 0 30px 10px; } .popup-wrapper .popup-tab button { color: #a0a0a0; } .popup-wrapper .popup-tab button.active { min-width: 50px; height: 30px; color: #fffefe; background: #1c1c1c; border-radius: 4px; padding: 0 13px; } .popup-wrapper .tab-content { display: none; } .popup-wrapper .tab-content.active { display: block; } @media (max-width: 767.98px) { /* 모바일 대응 */ .popup-wrapper { height: calc(var(--vh, 1vh) * 100); position: fixed; } .popup-wrapper .popup-inner { max-width: 100vw; touch-action: auto; border-radius: 0; } .popup-wrapper .popup-inner .form-inner { grid-template-columns: 1fr; margin: 0 15px; } .popup-wrapper .popup-container { height: calc(var(--vh, 1vh) * 100); border-radius: 0; overflow-y: auto; } .popup-wrapper h4 { padding: 22px 15px 0; } .popup-wrapper .btn-wrapper button { width: auto; max-width: 100px; flex: 1; } .popup-wrapper h5 { margin: 0 15px; } } /*------------------------------------------------------------------- 시스템관리 -------------------------------------------------------------------*/ .jstree-wrapper { padding: 20px 0 0; } .jstree-wrapper .jstree-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; min-height: 37px; margin-bottom: 5px; } .jstree-wrapper .jstree-head h3 { font-size: 18px; font-weight: 400; letter-spacing: -0.025em; } .jstree-wrapper .jstree-head h3 + form { margin-left: auto; } .jstree-wrapper .jstree-head .search-wrapper input[type=text] { width: 120px; } .jstree-wrapper .btn-wrapper { margin: 0; } .jstree-wrapper .btn-wrapper button { display: flex; justify-content: center; align-items: center; gap: 5px; min-width: 40px; height: 32px; } .jstree-wrapper .btn-wrapper button.btn-normal { background: #888; } .jstree-wrapper .scroll { min-height: calc(100vh - 245px); height: calc(100% - 45px); } .jstree-wrapper .scroll > div::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 1px; background-clip: content-box; } .jstree-wrapper .scroll > div::-webkit-scrollbar-track { background: #2f2e2e; } /* 사용자 관리 */ .popup-admin { max-width: 770px; } .popup-admin .input-id { display: grid; grid-template-columns: 1fr auto; width: 100%; } .popup-admin .input-id button { margin-left: 5px; } [data-tooltip-text]:hover { position: relative; } [data-tooltip-text]:hover:after { content: attr(data-tooltip-text); width: auto; white-space: nowrap; font-size: 12px; color: #c5c6cb; background: rgba(0, 0, 0, 0.8); box-shadow: 0px 0px 3px 1px rgba(50, 50, 50, 0.4); border-radius: 5px; margin-bottom: 10px; position: absolute; top: 130%; left: 0; padding: 10px; z-index: 9999; } .batch-lyr.active { display: block; } .batch-lyr { display: none; width: max-content; font-size: 12px; color: #c5c6cb; background: #151515; border: 1px solid #4d4d4d; border-radius: 4px; padding: 18px 14px; position: absolute; z-index: 2; margin: 45px -100px 0 0; } .batch-lyr::before { content: ''; display: block; border: 10px solid #151515; border-top-color: transparent; border-left-color: transparent; position: absolute; left: 50px; top: -10px; z-index: 0; } .batch-lyr button { text-decoration: underline; } .batch-lyr button + button { margin-top: 10px; } /* 권한 관리 */ .auth-wrapper { display: grid; grid-template-columns: 1fr 400px; gap: 20px; padding-right: 30px; } /* .auth-wrapper .sub-wrapper { margin: 0; } */ /* .auth-wrapper .jstree-wrapper { border-left: 1px solid rgba(218, 220, 224, 0.5); padding-left: 25px; } */ .popup-auth { max-width: 480px; } .popup-auth-view { max-width: 480px; } /* 메뉴 관리 */ .menu-wrapper { display: grid; grid-template-columns: 400px 1fr; margin: 0 30px; } /* .menu-wrapper .jstree-wrapper { padding-right: 25px; } */ /* .menu-wrapper .sub-wrapper { border-left: 1px solid rgba(218, 220, 224, 0.5); padding-left: 25px; margin: 0; } */ .menu-wrapper .sub-wrapper { margin-right: 0; } .menu-wrapper .sub-wrapper .btn-wrapper { margin-right: 0; } .menu-wrapper .jstree-wrapper .scroll { height: calc(100vh - 245px); } .popup-icon { max-width: 530px; } .popup-icon .search-wrapper { margin: 0 30px; position: relative; } /*.popup-icon .search-wrapper input[type=text] { background: #585858; }*/ .popup-icon .search-wrapper button { width: 17px; height: 17px; background: url(../images/ico_search2.png) no-repeat 0 0; position: absolute; top: 10px; right: 10px; } .popup-icon .icon-list { margin: 10px 30px 0; border: 1px solid #dadce0; border-radius: 4px; padding: 20px 10px; } .popup-icon .icon-list ul { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px 0; height: 200px; overflow-y: scroll; } .popup-icon .icon-list li { display: none; flex-direction: column; gap: 5px; width: 70px; cursor: pointer; text-align: center; } .popup-icon .icon-list li.active { display: flex; } .popup-icon .icon-list li i { font-size: 20px; color: #a2a2a2; } .popup-icon .icon-list li:hover i, .popup-icon .icon-list li.clicked i { color: #373737; } /* 공통코드 관리 */ .code-wrapper { display: grid; grid-template-columns: 400px 1fr; margin: 0 30px 35px; } .code-wrapper .sub-wrapper { padding: 20px 0 35px 30px; margin: 0 0 -35px; } .code-wrapper .jstree-wrapper .scroll { height: calc(100vh - 245px); } .popup-code-cate { max-width: 570px; } .popup-code-detail { max-width: 570px; } /* 프로그램 관리 */ .popup-program { max-width: 770px; } /* 운영정책 관리 */ .popup-policy_add { max-width: 560px; } /* 공지사항 관리 */ .popup-notice { max-width: 600px; } .popup-notice .emergency { color: #ff4646; } /* API 키 정보 */ .popup-api { max-width: 700px; } .noti-type { display: inline-block; min-width: 38px; height: 20px; font-size: 12px; line-height: 1.7em; text-align: center; border: 1px solid #606473; } .noti-type.emergency { color: #f05353; } .noti-type.normal { color: #999b9a; } .ico-new { display: inline-block; min-width: 38px; height: 20px; font-size: 12px; line-height: 1.7em; text-align: center; color: #fff; background: #9a2b2b; border: 1px solid #480808; vertical-align: text-bottom; } /* 개인정보 관리 */ .mypage-wrapper { display: grid; grid-template-columns: 490px 1fr; gap: 20px; margin: 0 30px 35px; } .mypage-wrapper .myinfo-wrapper { padding-top: 20px; } .mypage-wrapper .myinfo-wrapper .data-head + div { display: flex; align-items: center; gap: 15px; border: 1px solid rgba(100, 120, 140, 0.25); border-bottom: none; padding: 20px 20px 10px; } .mypage-wrapper .myinfo-wrapper .data-head + div img { border-radius: 100%; } .mypage-wrapper .myinfo-wrapper .user-name { font-size: 18px; font-weight: 600; color: #373737; } .mypage-wrapper .myinfo-wrapper .user-info { min-width: 40px; height: 22px; font-size: 12px; line-height: 1.8; color: #4285f4; border: 1px solid #dadce0; padding: 0 5px; } .mypage-wrapper .myinfo-box { border: 1px solid rgba(100, 120, 140, 0.25); border-top: none; padding: 0 30px 24px; } .mypage-wrapper .myinfo-box dl { display: flex; align-items: center; gap: 8px; height: 40px; } /*.mypage-wrapper .myinfo-box dl::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #4285f4; }*/ .mypage-wrapper .myinfo-box dt { font-size: 16px; font-weight: 500; color: #373737; } .mypage-wrapper .myinfo-box dd { display: flex; align-items: center; gap: 10px; font-size: 16px; } .mypage-wrapper .myinfo-box > .btn-default { font-size: 14px; margin-top: 10px; } .mypage-wrapper .myinfo-box .form { display: none; } .mypage-wrapper .myinfo-box .form.active { display: block; } .mypage-wrapper .myinfo-box .form::before { content: ''; display: block; width: calc(100% + 60px); height: 1px; background: rgba(100, 120, 140, 0.25); margin: 30px -30px 25px; } .mypage-wrapper .myinfo-box .form > div:nth-last-of-type(1) { display: flex; gap: 10px; margin-top: 25px; } .mypage-wrapper .myinfo-box .form label { display: inline-flex; align-items: center; gap: 8px; min-width: 100px; height: 40px; font-size: 16px; font-weight: 500; color: #373737; margin-right: 10px; } /*.mypage-wrapper .myinfo-box .form label::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 50%; background: #4285f4; }*/ .mypage-wrapper .myinfo-box .form input { width: 240px; } .mypage-wrapper .myinfo-box .form button { min-width: 120px; } .mypage-wrapper .sub-wrapper { padding: 20px 0 35px 30px; margin: 0 0 -35px; } .popup-password { max-width: 390px; } .popup-password .form-style { margin: 0 30px; } /* 스케줄 JOB 정보 */ .popup-job-detail { max-width: 420px; } /* 스케줄 JOB 모니터링 */ .popup-job-monitoring { max-width: 430px; } .popup-job-monitoring .job-content { border: 1px solid #dadce0; border-radius: 5px; padding: 20px 10px 20px 20px; margin: 0 30px; } .popup-job-monitoring .job-content > div { min-height: 126px; max-height: 505px; overflow: hidden; overflow-y: auto; } .popup-job-monitoring .job-content > div::-webkit-scrollbar { width: 10px; } .popup-job-monitoring .job-content > div::-webkit-scrollbar-thumb { background: #3d3d3d; border-left: 1px solid rgba(255,255,255,0.3); border-top: 1px solid rgba(255,255,255,0.3); border-right: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1); } .popup-job-monitoring .job-content > div::-webkit-scrollbar-track { background: transparent; } @media (max-width: 1090px) { /*.jstree-wrapper .jstree-head { flex-direction: column; align-items: flex-start; height: auto; }*/ /*.jstree-wrapper .jstree-head h3 + form { width: 100%; margin: 0; }*/ .data-head form { width: 100%; } .data-head .search-wrapper { align-items: flex-end; width: 100%; padding: 15px 10px 10px; border: 1px solid #dadce0; border-radius: 4px; } .data-head .search-wrapper .form { justify-content: flex-start; align-items: flex-end; gap: 10px; } .data-head .search-wrapper .item { display: flex; gap: 5px; flex-direction: column; align-items: flex-start; } .data-head .search-wrapper .item .tit { font-size: 13px; } .auth-wrapper { grid-template-columns: 1fr; padding: 0; margin: 30px; } .auth-wrapper .sub-wrapper { min-height: auto; margin: 0; padding: 0 !important; } .menu-wrapper { grid-template-columns: 1fr; padding: 0; margin: 30px; } .menu-wrapper .sub-wrapper { min-height: auto; margin: 0; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } .menu-wrapper .jstree-wrapper { padding: 0; } .menu-wrapper .jstree-wrapper .scroll { min-height: auto; height: 280px; } .code-wrapper { grid-template-columns: 1fr; padding: 0; margin: 30px; } .code-wrapper .sub-wrapper { min-height: auto; margin: 0; padding: 20px 0 0; } .code-wrapper .search-wrapper .input-box { flex: 1; } .code-wrapper .jstree-wrapper { padding: 0; } .code-wrapper .jstree-wrapper .jstree-head h3 + form { order: 3; } .code-wrapper .jstree-wrapper .jstree-head .search-wrapper input[type=text] { width: 100%; } .code-wrapper .jstree-wrapper .scroll { min-height: auto; height: 280px; } .mypage-wrapper { grid-template-columns: 350px 1fr; } } @media (max-width: 767.98px) { /* 모바일 대응 */ .jstree-wrapper { padding: 0; } .jstree-wrapper .jstree-head { height: auto; } .jstree-wrapper .scroll { min-height: auto; height: 30vh; } .menu-wrapper .jstree-wrapper .jstree-head .search-wrapper input[type=text] { width: 100%; } .mypage-wrapper, .auth-wrapper, .menu-wrapper, .code-wrapper { margin: 0 15px 15px; } .mypage-wrapper .sub-wrapper, .auth-wrapper .sub-wrapper, .menu-wrapper .sub-wrapper, .code-wrapper .sub-wrapper { margin: 0; padding: 20px 0 35px; } .popup-icon .search-wrapper { margin: 0 15px; } .popup-icon .icon-list { margin: 10px 15px 0; } .popup-icon .icon-list ul { display: flex; flex-wrap: wrap; } } /* 프로젝트 관리 */ .prj-wrapper { display: flex; margin: 0 30px 35px; } .prj-wrapper .sub-wrapper { flex: 1; margin: 0; } .prj-wrapper .sub-wrapper .btn-wrapper { margin-right: 0; } .prj-wrapper .sub-wrapper + div { width: 450px; padding: 20px 0 35px 30px; margin: 0 0 -35px 20px; } .prj-wrapper .sub-wrapper + div .dataTables_wrapper table thead th:first-child { width: 100% !important; } .prj-wrapper .sub-wrapper + div .dataTables_wrapper tr { background: none !important; } .prj-wrapper .sub-wrapper + div .dataTables_wrapper td { padding: 2px 10px; } .prj-wrapper .dataTables_wrapper input[type=text] { text-indent: 10px; } .prj-wrapper .dataTables_wrapper input[type=text]:disabled { background: none; padding: 0; opacity: .7; } .prj-wrapper .dataTables_wrapper input[type=checkbox]:disabled + label, .prj-wrapper .dataTables_wrapper input[type=checkbox].disabled + label { opacity: 1; } .prj-wrapper .dataTables_wrapper .btns { display: flex; justify-content: flex-end; gap: 5px; } .popup-prj { max-width: 400px; } .popup-prj .cat-set { flex: 1; } .popup-prj .cat-set ul { display: flex; flex-direction: column; gap: 5px; color: #a0a0a0; margin-bottom: 5px; } .popup-prj .cat-set li { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .popup-prj .cat-set li button { display: flex; white-space: nowrap; text-indent: -999em; margin: 0; } .popup-prj .cat-set li .btn-modify-cat::before { content: "\f044"; display: block; font-family: "Font Awesome 6 Free"; font-size: 11px; color: #fff; text-indent: 0; } .popup-prj .cat-set li .btn-remove-cat::before { content: "\58"; display: block; font-family: "Font Awesome 6 Free"; font-size: 11px; color: #fff; text-indent: 0; } .popup-prj .cat-set li.glb { padding: 3px 0 3px 15px; } .popup-prj .cat-add { display: flex; align-items: center; gap: 5px; } .popup-prj .cat-add button { margin: 0; } .popup-prj .dataTables_wrapper { min-height: auto; margin-top: -5px; margin-bottom: 10px; } .popup-prj .dataTables_wrapper thead { display: none; } .popup-prj textarea { height: 65px; } .popup-prj-member { max-width: 500px; } .popup-prj-member .popup-content { display: flex; align-items: center; justify-content: space-between; gap: 20px; overflow: hidden; margin-bottom: 10px; } .popup-prj-member .popup-content > div { flex: 1; } .popup-prj-member .popup-content h5 { display: flex; align-items: center; gap: 5px; height: 26px; font-size: 14px; font-weight: 400; color: #373737; line-height: 30px; margin: 0; } /*.popup-prj-member .popup-content h5::before { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #4285f4; }*/ .popup-prj-member .popup-content h5 + div { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 400px; border: 1px solid rgba(218, 220, 224, 0.5); padding: 20px;overflow-y: scroll; } .popup-prj-member .popup-content h5 + div li { display: flex; align-items: center; gap: 5px; color: #373737; } .popup-prj-member .popup-content h5 + div button { color: #000; font-size: 10px; background: rgba(218, 220, 224, 0.5); border-radius: 4px; padding: 2px 5px 0 5px; } .popup-prj-member .popup-content dt { display: flex; gap: 5px; align-items: center; font-weight: 500; cursor: pointer; } .popup-prj-member .popup-content dt::after { content: '\f106'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; transition: transform 0.3s ease; } .popup-prj-member .popup-content dt.active::after { transform: rotate(180deg); } .popup-prj-member .popup-content dd { margin-left: 10px; } @media (max-width: 1290px) { .prj-wrapper { grid-template-columns: 1fr; } .prj-wrapper .sub-wrapper { min-height: auto; } .prj-wrapper .sub-wrapper + div { min-height: auto; border: none; margin: 0; } } @media (max-width: 1090px) { .prj-wrapper { flex-direction: column; } .prj-wrapper .sub-wrapper + div { width: 100%; padding: 0; } } @media (max-width: 767.98px) { /* 모바일 대응 */ .prj-wrapper .data-head h3 + .form { margin: 0 0 10px 0; } } /* 워크플로우 관리 */ .wrk-flow-wrapper .dataTables_wrapper { margin: 0; } .wrk-flow-wrapper .data-head:not(:nth-of-type(1)) { margin-top: 30px; } /*.wrk-flow-wrapper .dataTables_wrapper thead tr:nth-of-type(1) th { background: #333; }*/ .wrk-flow-wrapper .form-wrapper fieldset { display: flex; flex-wrap: wrap; gap: 10px; } .wrk-flow-wrapper .form-wrapper fieldset > div { flex: 1; min-width: 100px; } @media (max-width: 767.98px) { /* 모바일 대응 */ } /* 사업 관리 */ .popup-biz { max-width: 700px; } .popup-biz .insti-container { grid-template-columns: 2fr 1fr 1fr 1fr; } @media (max-width: 767.98px) { /* 모바일 대응 */ .popup-biz .insti-container { grid-template-columns: repeat(3, 1fr); grid-template-rows: auto auto; } .popup-biz .insti-container > dl:first-child { grid-column: 1 / -1;} } .badge { display: inline; font-size: 12px; padding: 3px 5px; vertical-align: middle; border-radius: 4px; } .badge.stts00 { background: rgb(233,233,233); } .badge.stts01 { color: #fff; background: rgb(0,150,136); } .badge.stts10 { color: #fff; background: rgb(33,33,33); } /* 측기검정 관리 */ .popup-target { max-width: 400px; } .popup-target .target-list { border: 1px solid rgba(100, 120, 140, 0.25); border-radius: 8px; padding: 30px; margin: 0 30px; } .popup-target .target-list li + li { margin-top: 10px; } .popup-target .target-list label { cursor: pointer; } .popup-target .target-list .name { font-size: 16px; font-weight: 600; color: #000; } .popup-target .target-list .user-id { font-size: 14px; font-weight: 400; color: rgba(55, 55, 55, 0.75); margin-left: 10px; } .popup-eqmt { max-width: 500px; } .popup-eqmt .make-cmpy-wrapper { display: flex; gap: 5px; width: 100%; } .popup-eqmt .make-cmpy-wrapper button { margin: 0; } .mesure-wrapper { display: flex; flex-wrap: wrap; margin: 0 30px 35px; } .mesure-wrapper .jstree-wrapper { width: 100%; max-width: 400px; } .mesure-wrapper .sub-wrapper { flex: 1; margin-right: 0; margin-bottom: 0; } .mesure-wrapper .sub-wrapper .btn-wrapper { margin-right: 0; } .mesure-wrapper .sub-wrapper .form-wrapper { margin-bottom: 30px; } .mesure-wrapper .batch-wrapper { display: flex; gap: 5px; margin-right: 10px; } .mesure-wrapper .batch-wrapper label { display: flex; align-items: center; gap: 10px; font-weight: 600; line-height: 1; color: #373737; } .mesure-wrapper .batch-wrapper input[type=text].date-input { height: 100%; } .mesure-wrapper .data-tbl span.due-date { display: inline-flex; align-items: center; color: #fff; background: rgba(66, 133, 244, 1); border-radius: 3px; font-size: 12px; font-weight: 500; padding: 4px 5px 2px; margin-left: 5px; vertical-align: text-bottom; } .mesure-wrapper .data-tbl span.due-date.overdue { background: #f44336; } @media (max-width: 1600px) { .mesure-wrapper .sub-wrapper fieldset > .row.column-2 { grid-template-columns: 1fr } } @media (max-width: 1090px) { .mesure-wrapper .jstree-wrapper { max-width: 100%; } .mesure-wrapper .sub-wrapper { width: 100%; margin: 0; padding: 10px 0 35px 0; } .mesure-wrapper .jstree-wrapper .scroll { min-height: auto; height: 200px; } } @media (max-width: 767.98px) { /* 모바일 대응 */ .popup-target .target-list { margin: 0 15px; } .mesure-wrapper { margin: 0 15px; } } /* 기관 관리 */ .popup-insti { max-width: 500px; } /* 플랫폼 관리 */ .popup-platform { max-width: 1000px; } .popup-platform .screen-shot { width: 100%; cursor: pointer; position: relative; } .popup-platform .screen-shot button { position: absolute; top: 5px; right: 5px; } .popup-platform .upload-container { width: 100%; } /* 용어 관리*/ .popup-word { max-width: 600px; } .popup-word input[type=checkbox] + label { padding: 0; } .popup-word input[type=checkbox]:disabled + label, .popup-word input[type=checkbox].disabled + label { opacity: 0.2; } .warning-dd { gap: 5px !important; background-color: #fff3cd; border: 1px solid #ffeaa7; color: #856404; padding: 8px 12px; border-radius: 4px; font-size: 12px; margin-top: 5px; } /* 도메인 관리*/ .popup-domain { max-width: 450px; } .domain-wrapper { display: grid; grid-template-columns: 420px 1fr; margin: 0 30px; } .domain-wrapper .sub-wrapper { margin-right: 0; } .domain-wrapper .sub-wrapper .btn-wrapper { margin-right: 0; } .domain-wrapper .jstree-wrapper .scroll { height: calc(100vh - 245px); } .domain-wrapper .domain-tree { height: 100%; overflow-y: scroll; padding: 20px; border: 1px solid #dadce0; } #domn-tree .lgic-name, #domn-tree .phyc-name { display: inline-block; } #domn-tree .phyc-name { display: none; } .domain-registration { border-top: 2px solid #4285f4; padding-top: 20px; margin-top: 30px; } .domain-form { border: 1px solid #dadce0; border-radius: 8px; padding: 20px; margin-bottom: 15px; background: #fafafa; position: relative; } .domain-form .form-header { display: flex; align-items: center; gap: 15px; margin-bottom: 10px; } .domain-form .form-checkbox + label { padding: 0; gap: 8px; } .domain-form .form-checkbox + label .form-number { font-weight: bold; } .domain-form .form-actions { display: flex; gap: 10px; margin-left: auto; margin-top: auto; } .domain-form .btn-toggle { display: flex; align-items: center; justify-content: center; min-width: 100px; height: 37px; color: #fff; background: #17a2b8; border: none; border-radius: 4px; cursor: pointer; padding: 0 12px; } .domain-form .btn-toggle:hover { background: #138496; } .domain-form .btn-reset { display: flex; align-items: center; justify-content: center; min-width: 80px; height: 37px; color: #fff; background: #ffc107; border: none; border-radius: 4px; cursor: pointer; padding: 0 12px; } .domain-form .btn-reset:hover { background: #e0a800; } .domain-form .btn-remove-form { display: flex; align-items: center; justify-content: center; width: 37px; height: 37px; background: #fff; border: 1px solid lightgray; border-radius: 4px; cursor: pointer; margin-left: auto; } .domain-form .basic-fields { display: flex; flex-wrap: wrap; gap: 10px; } .domain-form .basic-fields .field-group:first-child { flex: 0 0 auto; max-width: 100%; } .domain-form .field-group { display: flex; flex-direction: column; } .domain-form .field-group label { font-weight: bold; margin-bottom: 5px; color: #373737; } .domain-form .field-group label.required::after { content: ' *'; color: #ff4646; } .domain-form .field-group input[readonly] { background-color: rgba(218, 220, 224, 0.3); cursor: default; } .domain-form .field-group input[type=number] { min-width: 120px; } .domain-form .field-group .radio-wrapper { height: 37px; } .domain-form .detail-fields { display: none; border-top: 1px solid #dadce0; padding-top: 20px; margin-top: 15px; } .domain-form .detail-fields.show { display: flex; flex-wrap: wrap; gap: 20px; } .domain-form .detail-fields .field-group:first-child { min-width: 176px; } .domain-form .detail-fields .field-group:last-child { flex: auto; } .domain-form .select2-dropdown { min-width: 300px !important; width: auto !important; } .domain-form .basic-fields .field-group:has(.register-physical-name) { flex: 0 0 auto; min-width: 171px; } .register-sortable-container { display: flex; gap: 4px; flex-wrap: wrap; align-items: flex-start; } .register-sortable-container .register-select-wrapper { display: flex; align-items: center; min-width: 176px; background: #fff; border: 1px solid #dadce0; border-radius: 6px; } .register-sortable-container.warning .register-select-wrapper { border-color: rgb(234, 67, 53); } .register-sortable-container.warning .select2-dropdown { border-color: rgb(234, 67, 53) !important; } .register-sortable-container .drag-handle { cursor: move; padding: 8px; flex-shrink: 0; color: #666; font-size: 14px; } .register-sortable-container .register-term-select { flex: 1; border: none; background: none; height: 35px; padding: 0 5px; } .register-sortable-container .register-add-select, .register-sortable-container .register-remove-select { width: 30px; height: 30px; border: none; background: none; cursor: pointer; flex-shrink: 0; font-size: 16px; display: flex; align-items: center; justify-content: center; } .register-sortable-container .register-add-select:hover, .register-sortable-container .register-remove-select:hover { background: transparent; } .register-sortable-container .sort-placeholder { display: flex; align-items: center; min-width: 176px; height: 39px !important; background: #f0f0f0; border: 2px dashed #ccc; border-radius: 6px; box-sizing: border-box; } .register-sortable-container .select2-container { flex: 1 !important; width: auto !important; } .register-sortable-container .select2-dropdown { min-width: 300px !important; width: auto !important; margin-left: -29px; } .register-sortable-container .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 0 !important; } .popup-domain { max-width: 600px; } .popup-domain .sortable-container { margin-bottom: 0; } .popup-domain .field-group { margin-bottom: 15px; } @media (max-width: 1290px) { .domain-wrapper { display: block; } .domain-wrapper .jstree-wrapper .scroll { min-height: auto; height: 280px; } .domain-wrapper .sub-wrapper { margin-left: 0; } } @media (max-width: 767.98px) { .domain-wrapper { margin: 0 15px 15px; } .domain-form .form-actions { flex-wrap: wrap; } .domain-form .batch-actions { flex-direction: column; align-items: center; } .domain-form .btn-toggle, .domain-form .btn-reset { min-width: 120px; } .domain-form .basic-fields { gap: 15px; } .sortable-container { flex-direction: column; align-items: stretch; } .sortable-container .select-wrapper { min-width: 100%; margin-bottom: 8px; } } @media (max-width: 575.98px) { .domain-form { padding: 15px; } .domain-form .form-header { flex-wrap: wrap; gap: 10px; } } #modal-sortable-container { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; } #modal-sortable-container .modal-select-wrapper { display: flex; align-items: center; min-width: 176px; background: #fff; border: 1px solid #ddd; border-radius: 6px; } #modal-sortable-container .drag-handle { cursor: move; padding: 10px; flex-shrink: 0; } #modal-sortable-container .modal-add-select, #modal-sortable-container .modal-remove-select { width: 30px; height: 30px; border: none; outline: none; cursor: pointer; flex-shrink: 0; } #modal-sortable-container .modal-term-select { flex: 1; } #modal-sortable-container .sort-placeholder { display: flex; align-items: center; min-width: 176px; border-radius: 6px; box-sizing: border-box; height: 37px; background: #f0f0f0; border: 2px dashed #ccc; } #modal-sortable-container .modal-select-wrapper select { border: none !important; } #modal-sortable-container .modal-select-wrapper .select2-container { flex: 1 !important; width: auto !important; } #modal-sortable-container .select2-dropdown { min-width: 176px !important; margin-left: -32px; } #modal-sortable-container .select2.select2-container { width: auto !important; } #modal-sortable-container .select2-container--default .select2-selection--single .select2-selection__rendered { padding-left: 0 !important; } /*------------------------------------------------------------------- 이슈 대시보드 -------------------------------------------------------------------*/ .dash-top { background: rgba(66, 133, 244, 1); border-radius: 4px; margin: 30px 30px 20px; padding: 20px 30px; } .dash-top h2 { display: flex; justify-content: space-between; font-size: 18px; color: #fff; border-bottom: 1px solid rgba(255,255,255,.5); padding: 0 30px 10px; margin: 0 -30px; } /*.dash-top h2::after { content: ''; display: block; width: calc(100% + 60px); height: 1px; background: #666; margin: 10px -30px; }*/ .dash-top h2 .now-time { min-width: 180px; } .dash-top h2 > div { display: flex; align-items: center; gap: 10px; } .dash-top h2 > div i { font-size: 12px; background: #000; border: 1px solid #4b4b4b; border-radius: 2px; padding: 3px 10px 0; } .dash-top > div { display: grid; grid-template-columns: repeat(6,1fr); margin-top: 20px; } .dash-top dt { color: rgba(255,255,255,.7); font-weight: 500; text-align: center; } .dash-top dd { font-family: Arial, Helvetica, sans-serif; font-size: 40px; color: #e3edfd; text-align: center; } /*.dash-bottom { display: grid; grid-template-columns: repeat(5,1fr); gap: 20px; margin: 20px 30px; }*/ .dash-bottom { display: flex; flex-wrap: wrap; gap: 20px; margin: 20px 30px; } .dash-bottom article { flex: 1; min-width: 340px; visibility: hidden; } .dash-bottom article.show { visibility: visible; } .dash-bottom article h3 { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; } .dash-bottom article h3 button { width: 16px; height: 16px; font-size: 11px; color: rgba(100, 120, 140, 0.25); background: #fff; border: 1px solid rgba(100, 120, 140, 0.25); border-radius: 4px; } .dash-bottom article ul { display: flex; flex-direction: column; gap: 10px; margin-top: 5px; } .dash-bottom article li { background: #f2f3f4; border: 1px solid rgba(100, 120, 140, 0.1); border-radius: 4px; padding: 10px 10px 10px 18px; position: relative; cursor: pointer; } .dash-bottom article li::before { content: ''; display: block; width: 8px; height: 100%; border-radius: 3px 0 0 3px; position: absolute; top: 0; left: 0; } .dash-bottom article p { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #373737; font-weight: 300; } .dash-bottom article p span { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #888; font-weight: 200; } .dash-bottom article p span + span::before { content: ''; display: block; width: 1px; height: 10px; background: #666; } .dash-bottom article p i { min-width: 50px; height: 18px; font-size: 10px; text-align: center; line-height: 1.8; color: #fff; padding: 0 5px; border-radius: 4px; margin-left: auto; } .dash-bottom article p i.stts-07 { background: #758f9e; } .dash-bottom article p i.stts-06 { background: #2d9588; } .dash-bottom article p i.stts-05 { background: #4850b3; } .dash-bottom article p i.stts-04 { background: #982baf; } .dash-bottom article p i.stts-03 { background: #40bad3; } .dash-bottom article p i.stts-02 { background: #4594f1; } .dash-bottom article p i.stts-01 { background: #e02f65; } .dash-bottom article.proy-05 li::before { background: #ea4c3d; } .dash-bottom article.proy-04 li::before { background: #f79b22; } .dash-bottom article.proy-03 li::before { background: #fbec49; } .dash-bottom article.proy-02 li::before { background: #8ec34f; } .dash-bottom article.proy-01 li::before { background: #727cb6; } .dash-bottom article h4 { color: #373737; } .dash-bottom article span.user { color: rgba(66, 133, 244, 1); } .dash-bottom article span.due-date.overdue { color: #f44336; } @media (max-width: 1290px) { .dash-bottom { grid-template-columns: repeat(3,1fr); } } @media (max-width: 767.98px) { /* 모바일 대응 */ .dash-top { padding: 10px 30px; margin: 20px 15px 20px; } .dash-top h2::after { width: calc(100% + 30px); margin: 10px -15px; } .dash-top h2 > div i { font-size: 10px; } .dash-top h2 .now-time { min-width: 110px; font-size: 14px; } .dash-top > div { margin-top: 10px; } .dash-top dt { font-size: 12px; } .dash-top dd { min-height: 36px; font-size: 24px; margin-top: -10px; } .dash-bottom { grid-template-columns: repeat(2,1fr); } } @media (max-width: 575.98px) { /* 모바일 대응 */ .dash-top h2 { flex-direction: column; padding: 0 15px 10px; } .dash-top > div { grid-template-columns: repeat(3,1fr); } .dash-bottom { grid-template-columns: repeat(1,1fr); } .dash-bottom article { min-width: 100%; } } /*------------------------------------------------------------------- 측기검정, 유지보수 대시보드 -------------------------------------------------------------------*/ .dshbr-wrapper { display: grid; grid-template-columns: 400px 1fr; gap: 20px; margin: 30px; } .dshbr-wrapper section { position: relative; } .dshbr-wrapper .mode-btns { display: flex; width: fit-content; height: 32px; box-sizing: content-box; background-color: rgb(255, 255, 255); padding: 2px; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px; position: absolute; top: 3px; left: 3px; z-index: 9; } .dshbr-wrapper .mode-btns button { font-size: 12px; font-weight: 400; color: #000; background: #fff; border-radius: 3px; padding: 4px 7px 2px; } .dshbr-wrapper .mode-btns button.active { color: #fff; background: #4f94fd; border: 1px solid #4784e3; } .dshbr-wrapper .map-container { height: calc(100vh - 137px); background: rgba(100, 120, 140, 0.25); border: 1px solid rgba(100, 120, 140, 0.25); border-radius: 3px; overflow: hidden; } .dshbr-wrapper .map-container { visibility: hidden; width: 0; height: 0; border: 0; position: relative; } .dshbr-wrapper .map-container.active { visibility: visible; width: 100%; height: calc(100vh - 137px); } .dshbr-wrapper .list-container { display: none; } .dshbr-wrapper .list-container.active { display: block; } .dshbr-wrapper .eqmt-btns { display: flex; flex-direction: column; gap: 3px; box-sizing: content-box; background-color: rgb(255, 255, 255); padding: 2px; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px; position: absolute; top: 50px; left: 3px; z-index: 2; } /*.dshbr-wrapper .eqmt-btns button { display: flex; align-items: center; gap: 4px; min-width: 40px; height: 32px; font-size: 12px; color: #000; background: #fff; border: 1px solid #fff; padding: 0 14px 0 8px; border-radius: 3px; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.14); } .dshbr-wrapper .eqmt-btns button.active { color: #fff; background: #4f94fd; border: 1px solid #4784e3; }*/ .dshbr-wrapper .eqmt-btns button { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 400; color: #000; background: #fff; border: 1px solid transparent; border-radius: 3px; padding: 8px 7px 6px; } .dshbr-wrapper .eqmt-btns button.active { color: #fff; background: #4f94fd; border: 1px solid #4784e3; } .dshbr-wrapper .expand-btns { display: none; } @media (max-width: 767.98px) { /* 모바일 대응 */ .dshbr-wrapper .expand-btns { display: flex; width: fit-content; height: 32px; box-sizing: content-box; background-color: rgb(255, 255, 255); padding: 2px; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px; position: absolute; bottom: 3px; right: 3px; z-index: 9; } .dshbr-wrapper .expand-btns button { font-size: 12px; font-weight: 400; color: #000; background: #fff; border-radius: 3px; padding: 4px 7px 2px; } .dshbr-wrapper .expand-btns button.active { color: #fff; background: #4f94fd; border: 1px solid #4784e3; } } .dshbr-wrapper section:has(.map-container).expand { width: 100vw; height: calc(100dvh - 75px); position: fixed; top: 75px; left: 0; z-index: 1; } .dshbr-wrapper section:has(.map-container).expand .map-container { height: 100%; } .dshbr-wrapper section:has(.map-container).expand .mode-btns { display: none; } .dshbr-wrapper section:has(.map-container).expand .eqmt-btns { top: 3px; } .dshbr-wrapper .list-container { min-height: calc(100vh - 137px); height: 100%; background: rgba(100, 120, 140, 0.25); border: 1px solid rgba(100, 120, 140, 0.25); border-radius: 3px; padding: 45px 10px 10px; position: relative; } .dshbr-wrapper .list-container .select-box { position: absolute; top: 3px; right: 3px; } .dshbr-wrapper .list-container .select-box select { border: none; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px; } .dshbr-wrapper .list-container ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; margin-top: 5px; } .dshbr-wrapper .list-container li { min-height: 174px; background: #fff; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px; padding: 10px 10px 10px 18px; position: relative; box-sizing: border-box; } .dshbr-wrapper .list-container li.active { background: aliceblue; border: 1px solid #4285f4; } .dshbr-wrapper .list-container li::before { content: ''; display: block; width: 8px; height: 100%; background: rgba(100, 120, 140, 0.25); border-radius: 3px 0 0 3px; position: absolute; top: 0; left: 0; } .dshbr-wrapper .list-container p { display: flex; gap: 5px; font-size: 12px; color: #373737; font-weight: 300; margin-left: 5px; } .dshbr-wrapper .list-container p::before { content: ''; display: block; width: 2px; height: 2px; border-radius: 50%; background: #888; margin-top: 7px; } .dshbr-wrapper .list-container p span { display: flex; align-items: center; gap: 10px; font-size: 12px; color: #888; font-weight: 200; } .dshbr-wrapper .list-container p span + span::before { content: ''; display: block; width: 1px; height: 10px; background: #888; margin-top: -3px; margin-left: 5px; } .dshbr-wrapper .list-container h4 { font-weight: 400; color: #000; white-space: nowrap; margin-bottom: 5px; } .dshbr-wrapper .list-container span.due-date { color: rgba(66, 133, 244, 1); font-weight: 700; } .dshbr-wrapper .list-container span.due-date.overdue { color: #f44336; font-weight: 700; } .dshbr-wrapper .list-container li.mesure-cd-01::before { background: #758f9e; } .dshbr-wrapper .list-container li.mesure-cd-02::before { background: #2d9588; } .dshbr-wrapper .list-container li.mesure-cd-03::before { background: #4850b3; } .dshbr-wrapper .list-container li.mesure-cd-04::before { background: #982baf; } .dshbr-wrapper .list-container li.mesure-cd-05::before { background: #40bad3; } .dshbr-wrapper .list-container li.mesure-cd-06::before { background: #4594f1; } .dshbr-wrapper .list-container li.mesure-cd-07::before { background: #e02f65; } .dshbr-wrapper .list-container li.mesure-cd-08::before { background: #ea4c3d; } .dshbr-wrapper .list-container li.mesure-cd-09::before { background: #f79b22; } .dshbr-wrapper .list-container li.mesure-cd-10::before { background: #fbec49; } .dshbr-wrapper .list-container li.mesure-cd-11::before { background: #8ec34f; } .dshbr-wrapper .list-container li.mesure-cd-12::before { background: #727cb6; } .dshbr-wrapper .list-container li.eqmt-div-cd-01::before { background: #758f9e; } /* 강우량계 */ .dshbr-wrapper .list-container li.eqmt-div-cd-20::before { background: #2d9588; } /* 수위계 */ .dshbr-wrapper .list-container li.eqmt-div-cd-81::before { background: #4850b3; } /* 동보 */ .dshbr-wrapper .list-container li.eqmt-div-cd-83::before { background: #982baf; } /* CCTV */ .dshbr-wrapper .list-container li.eqmt-div-cd-86::before { background: #40bad3; } /* 레이다유속계 */ .dshbr-wrapper .calender-container { height: 500px; background: #ececec; border-radius: 8px; } .dshbr-wrapper .ui-datepicker { width: 100%; font-weight: 500; font-family: 'Apple SD Gothic Neo', sans-serif; padding: 20px; } .dshbr-wrapper .ui-widget-header { background: none; border: none; } .dshbr-wrapper .ui-widget-header .ui-icon { width: auto; background: none; } .dshbr-wrapper .ui-datepicker .ui-datepicker-title { font-size: 20px; font-weight: 700; } .dshbr-wrapper .ui-datepicker .ui-datepicker-prev { top: 8px !important; left: 8px !important; } .dshbr-wrapper .ui-datepicker .ui-datepicker-next { top: 8px !important; right: 8px !important; } .dshbr-wrapper .ui-datepicker .ui-datepicker-prev, .dshbr-wrapper .ui-datepicker .ui-datepicker-next { display: flex; align-items: center; justify-content: center; cursor: pointer; } .dshbr-wrapper .ui-datepicker .ui-datepicker-prev:hover, .dshbr-wrapper .ui-datepicker .ui-datepicker-next:hover { background: none; border: none; } .dshbr-wrapper .ui-datepicker .ui-datepicker-prev::before { content: '\f053'; font-size: 18px; font-family: "Font Awesome 6 Free"; font-weight: 600; } .dshbr-wrapper .ui-datepicker .ui-datepicker-next::before { content: '\f054'; font-size: 18px; font-family: "Font Awesome 6 Free"; font-weight: 600; } .dshbr-wrapper .ui-state-default, .dshbr-wrapper .ui-widget-content .ui-state-default, .dshbr-wrapper .ui-widget-header .ui-state-default { font-size: 16px; color: #11213d; text-align: center; background: none; border: none; padding: 10px; border-radius: 6px; } .dshbr-wrapper .ui-state-default:hover, .dshbr-wrapper .ui-widget-content .ui-state-default:hover, .dshbr-wrapper .ui-widget-header .ui-state-default:hover, .dshbr-wrapper .ui-state-active, .dshbr-wrapper .ui-widget-content .ui-state-active, .dshbr-wrapper .ui-widget-header .ui-state-active { background: #efefef; } .dshbr-wrapper .ui-state-highlight, .dshbr-wrapper .ui-widget-content .ui-state-highlight, .dshbr-wrapper .ui-widget-header .ui-state-highlight { font-size: 16px; background: #d0e1fc !important; padding: 10px; border-radius: 6px; } .dshbr-wrapper .check-date a { background-color: black !important; color: white !important; } .dshbr-wrapper .target-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; } .dshbr-wrapper .target-list .item-container { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; border: 1px solid rgba(100, 120, 140, 0.25); border-radius: 3px; padding: 20px; } .dshbr-wrapper .target-list .item-container h2 { display: flex; align-items: center; gap: 5px; width: 100%; font-size: 16px; font-weight: 600; margin-bottom: 5px; } .dshbr-wrapper .target-list .item-container span.due-date { display: flex; align-items: center; color: #fff; background: rgba(66, 133, 244, 1); border-radius: 3px; font-size: 14px; font-weight: 700; padding: 0 5px; margin-bottom: 3px; } .dshbr-wrapper .target-list .item-container span.due-date.overdue { background: #f44336; } .dshbr-wrapper .target-list .item { display: flex; align-items: center; gap: 4px; width: 100%; font-size: 14px; font-weight: 400; line-height: 1.2; padding: 2px; cursor: pointer; } .dshbr-wrapper .target-list .item::before { content: ''; display: block; width: 4px; height: 4px; border-radius: 100%; background: rgba(100, 120, 140, 0.25); } .dshbr-wrapper .target-list .item.active, .dshbr-wrapper .target-list .item:hover { color: rgba(66, 133, 244, 1); transition: all 0.2s ease-out; } .dshbr-wrapper .target-list .no-data { width: 100%; font-size: 14px; font-weight: 400; text-align: center; border: 1px solid rgba(100, 120, 140, 0.25); border-radius: 4px; padding: 48px 15px; } .dshbr-wrapper .jstree-wrapper { height: 100%; padding: 0; } .map-area { height: 100%; } .map-area img { width: 100%; } .lyr_device { min-width: 300px; min-height: 100px; background: #fff; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px; padding: 25px; border-radius: 15px; } .lyr_device h3 { font-size: 16px; font-weight: 600; margin-bottom: 10px; margin-right: 25px; } .lyr_device dl { display: flex; gap: 5px; font-size: 13px; } .lyr_device dl + dl { margin-top: 3px; } .lyr_device dt { display: inline-flex; gap: 3px; font-weight: 600; } .lyr_device dt::before { content: ''; display: block; width: 3px; height: 3px; border-radius: 50%; background: #888; margin-top: 6px; } .lyr_device dd { display: flex; gap: 10px; } .lyr_device span.due-date { color: rgba(66, 133, 244, 1); font-weight: 700; margin-left: 5px; } .lyr_device span.due-date.overdue { color: #f44336; font-weight: 700; } .lyr_device .eqmt-list { border: 1px solid rgba(100, 120, 140, 0.25); margin-top: 10px; } .lyr_device .eqmt-list table { width: 100%; } .lyr_device .eqmt-list th { font-weight: bold; background: rgba(100, 120, 140, 0.25); } .lyr_device .eqmt-list th, .lyr_device .eqmt-list td { font-size: 12px; text-align: center; padding: 5px; } .lyr_device .eqmt-list tr:not(:last-child) td { border-bottom: 1px solid rgba(100, 120, 140, 0.25); } .lyr_device .close { font-size: 18px; font-family: "Font Awesome 6 Free"; font-weight: 600; position: absolute; top: 10px; right: 15px; } .eqmt-title { font-size: 14px; color: #333; background: #fff; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 2px 0px; border-radius: 3px; padding: 2px 7px; white-space: nowrap; } .eqmt-title-container { display: flex !important; justify-content: center; background: none !important; border: none !important; margin-top: 92px; } .eqmt-title-container > div { position: relative !important; } .eqmt-title-container > div:first-child { display: none; } @media (max-width: 990px) { .dshbr-wrapper { grid-template-columns: 1fr; } .dshbr-wrapper .jstree-wrapper { height: auto; max-height: 300px; } .dshbr-wrapper .jstree-wrapper .scroll { height: 250px; min-height: auto; } } @media (max-width: 767.98px) { /* 모바일 대응 */ .dshbr-wrapper { margin: 15px; } .dshbr-wrapper .jstree-wrapper { width: calc(100vw - 30px); } } /*------------------------------------------------------------------- 플랫폼 대시보드 -------------------------------------------------------------------*/ .plf-dshbr-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 30px; } .plf-dshbr-wrapper section { width: 100%; height: 100%; background: #f2f3f4; border: 1px solid rgba(100, 120, 140, 0.1); border-radius: 4px; padding: 20px; position: relative; } .plf-dshbr-wrapper h2 { font-size: 22px; font-weight: 600; margin-bottom: 10px; } .plf-dshbr-wrapper .plf-list { display: grid; grid-template-columns: repeat(3, 1fr); align-content: flex-start; justify-content: space-between; gap: 10px; padding-right: 5px; } .plf-dshbr-wrapper .plf-list > div { background: rgba(0, 188, 212); padding: 15px 20px 40px; border-radius: 6px; position: relative; overflow: hidden; } .plf-dshbr-wrapper .plf-list > div.demo { background: rgba(255, 152, 0); } .plf-dshbr-wrapper .plf-list > div.prod { background: rgba(66, 133, 244); } .plf-dshbr-wrapper .plf-list > div:hover { border-color: #696864; } .plf-dshbr-wrapper .plf-list > div h3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; height: 52px; color: #fff; font-size: 22px; font-weight: 600; line-height: 26px; word-break: break-all; overflow: hidden; margin-top: 15px; } .plf-dshbr-wrapper .plf-list > div ul { padding: 5px 0 15px; color: rgba(255, 255, 255, .7); } .plf-dshbr-wrapper .plf-list > div > i { display: block; width: 40px; height: 10px; border-radius: 10px; } .plf-dshbr-wrapper .plf-list > div button { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; background: rgba(0, 0, 0, .4); color: #fff; padding: 15px 20px; position: absolute; bottom: 0; left: 0; } .plf-dshbr-wrapper .plf-list > div button:hover { background: rgba(0, 0, 0, .6); } @media (max-width: 1490px) { .plf-dshbr-wrapper .plf-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 1290px) { .plf-dshbr-wrapper { grid-template-columns: 1fr; } .plf-dshbr-wrapper .plf-list { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 990px) { .plf-dshbr-wrapper .plf-list { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 575.98px) { .plf-dshbr-wrapper .plf-list { grid-template-columns: 1fr; } } /*------------------------------------------------------------------- 로그인 -------------------------------------------------------------------*/ .login-wrapper { display: flex; align-items: center; justify-content: space-between; width: 100vw; height: 100vh; background: #fff; } .login-title { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 70.3vw; height: 100vh; min-height: 100%; background: url(../images/login_bg.jpg) no-repeat center bottom; background-size: cover; } .login-title > div { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: calc(100% - 160px); } .login-title h1 { font-size: 3.1vw; font-weight: 700; line-height: 1.2; text-align: center; color: #fff; } .login-title h2 { font-size: 1.7vw; line-height: 1.2; text-align: center; color: rgba(255, 255, 255, .85); } .login-title p {height: 160px; font-size: 14px; line-height: 1.4; text-align: center; color: rgba(255, 255, 255, .85); padding-top: 20px; } .login-title p i { display: block; font-size: 40px; color: rgba(255, 255, 255, .85); } .login-title p strong { display: block; font-size: 22px; font-weight: 600; margin: 3px 0; } .login-inner { display: flex; flex-direction: column; align-items: center; color: #fffefe; margin: 0 auto; } .login-inner h3 { font-size: 60px; font-weight: 700; } .login-inner h4 { font-size: 32px; font-weight: 500; letter-spacing: -0.025em; line-height: 1; color: rgba(55,55,55,.5); margin: 100px 0 20px; } .login-inner h4 + p { text-align: center; color: rgba(55,55,55,.5); margin: -15px auto 10px; } .login-inner input[type=text], .login-inner input[type=password] { width: 100%; height: 55px; font-size: 15px; color: #a0a0a0; margin: 9px 0; padding-left: 55px; } .login-inner input[type=text]::placeholder, .login-inner input[type=password]::placeholder { color: #a0a0a0; } .login-inner .login-form { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 90%; } .login-inner .login-form label { display: block; width: 20px; height: 24px; position: absolute; margin: 25px 0 0 25px; opacity: .2 } .login-inner .login-form label:nth-of-type(1) { background: url(../images/ico_id.png) no-repeat 0 0; } .login-inner .login-form label:nth-of-type(2) { background: url(../images/ico_pw.png) no-repeat 0 0; } .login-inner .btn-search { display: block; color: rgba(33,33,33,1); margin: 10px 0 0 auto; } .login-inner .btn-login { width: 100%; height: 55px; font-size: 18px; background: #4285f4; border-radius: 8px; margin-top: 20px; } .login-inner .login-form p { height: 21px; color: #d2d2d2; margin-top: 25px; } .find-pw { display: none; flex-direction: column; align-items: center; justify-content: center; } .find-pw h4 { margin-top: 63px; } .find-pw.active { display: flex; } .find-pw .find-pw-form { width: 400px; } .find-pw input[type=text], .find-pw input[type=password] { padding-left: 20px; } .find-pw .btn-wrapper { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 24px; } .find-pw .btn-wrapper button { display: block; width: 50%; height: 55px; font-size: 18px; border-radius: 8px; flex: 1; } .find-pw .btn-sms-send { background: #4285f4; } .find-pw .btn-close { color: #373737; background: rgba(218, 220, 224, 0.5); } .login-inner .btn-login:hover, .find-pw .btn-sms-send:hover { } .login-inner .btn-login:active, .find-pw .btn-sms-send:active { background-color: #71a4f7; } .find-pw .btn-close:hover { background-color: #b1b1b1; } .find-pw .btn-close:active { background-color: rgba(218, 220, 224, 0.5); } .system-inquiry { font-size: 16px; color: #616161; margin-top: 200px; } @media (max-width: 1490px) { .login-title { width: 55vw; } } @media (max-width: 1290px) { .login-inner > div { width: 80% !important; } .login-inner h3 img { transform: scale(0.6); } .login-inner h4 { margin-top: 30px; } } @media (max-width: 990px) { .login-wrapper { flex-direction: column; justify-content: flex-start; padding-bottom: 50px; } .login-title { width: 100vw; height: auto; min-height: 150px; padding: 20px; } .login-title > div { height: auto; background: none; } .login-title p { height: auto; font-size: 12px; } .login-title p i { display: none; } .login-title h1 { font-size: 32px; letter-spacing: -0.07em; } .login-title h2 { font-size: 14px; } .login-inner { flex-direction: column-reverse; padding-top: 50px; } .login-inner h3 img { transform: scale(0.3); } .login-inner h4 { margin-top: 0; } .login-inner h4 + p { font-size: 12px; } .login-inner > div > div { width: 100% !important; } } }@media (max-width: 575.98px) { .login-title h1 { font-size: 5vw; } .login-title h2 { font-size: 3vw; } } /*------------------------------------------------------------------- 이슈관리 -------------------------------------------------------------------*/ /* 이슈 */ .issue-wrapper fieldset .row.column { flex-direction: row; } .issue-wrapper fieldset .row.column > div { flex: 1; } .issue-wrapper fieldset .date-input { display: block; } .issue-wrapper .related-issue { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-left: auto; } .issue-wrapper .related-issue p span { color: #4285f4; text-decoration: underline; cursor: pointer; } .issue-wrapper .related-issue p button.hide { display: none; } .issue-wrapper .related-issue p { margin-left: 10px; } .issue-wrapper .related-issue > div { display: flex; align-items: center; gap: 5px; margin-left: 10px; } .issue-wrapper .related-issue > div.hide { display: none; } .issue-save-mode.hide, .issue-modi-mode.hide { display: none; } /* 이슈노트 */ .issue-sub-info { display: flex; gap: 30px; margin-top: 30px; } .issue-note { flex: 1.5; } .issue-his { flex: 1; } .issue-note .data-head { width: auto; } .issue-note-list { background: #fff; border: 1px solid #dadce0; margin-bottom: 30px; } .issue-note-list li { position: relative; } .issue-note-list dl { display: flex; padding: 15px; } .issue-note-list dt { width: 150px; } .issue-note-list dt strong { display: block; color: #373737; font-weight: 600; } .issue-note-list dd { flex: 1; color: #373737; word-break: break-all; border-left: 1px solid #dadce0; padding-left: 20px; } .issue-note-list dd .textarea-wrapper { width: calc(100% - 40px); } .issue-note-list dd .textarea-wrapper textarea { height: auto; font-size: 14px; color: #373737; } .issue-note-list dd .textarea-wrapper.disabled > div { background: transparent; padding: 0; border: none; } .issue-note-list dd .attached-file { display: flex; align-items: center; gap: 5px; height: 32px; margin-top: 10px; } .issue-note-list dd .attached-file.no-data { display: none; } .issue-note-list dd .attached-file a { color: #4285f4; text-decoration: underline; } .issue-note-list dd .attached-file button { display: none; } .issue-note-list dd .file-wrapper { display: none; } .issue-note-list .btn-modi-set { position: absolute; top: 10px; right: 15px; } .issue-note-list .btn-save-set { display: none; width: fit-content; margin: 10px 0 0 auto; } .issue-note-list li.save-mode .textarea-wrapper { width: 100%; } .issue-note-list li.save-mode .btn-modi-set { display: none; } .issue-note-list li.save-mode .btn-save-set { display: block; } .issue-note-list li.save-mode .attached-file button { display: block; } .issue-note-list li.save-mode .file-wrapper { display: inline-flex; margin-top: 10px; } .issue-note-list li.save-mode .attached-file + .file-wrapper { display: none; } .issue-note-list li.save-mode .attached-file.no-data + .file-wrapper { display: flex !important; } .issue-note-regi { background: #fff; border: 1px solid #dadce0; padding: 15px; } .issue-note-regi > div { display: flex;} .issue-note-regi > div + div { margin-top: 10px; } .issue-note-regi > div .tit { width: 150px; line-height: 37px; } .issue-note-regi > div .textarea-wrapper { flex: 1; } .issue-note-regi > div .textarea-wrapper textarea { height: 50px; } .issue-note-regi > div input[type=text] { flex: 1; } /* 이슈보기 > 검색조건 */ .issue-srch-opt { border: 1px solid #dadce0; padding: 20px 30px 30px; border-radius: 4px; margin-bottom: 30px; } .issue-srch-opt ul { display: grid; grid-template-columns: repeat(7,1fr); gap: 10px; } .issue-srch-opt li:nth-of-type(1) { grid-column: span 3; } /*.issue-srch-opt li:nth-last-of-type(1) { grid-column: 6 / 8; }*/ .issue-srch-opt li input[type=checkbox] + label { padding: 0; } .issue-srch-opt li .tit { display: flex; align-items: center; gap: 5px; font-size: 15px; color: #373737; font-weight: 400; line-height: 31px; white-space: nowrap; } /*.issue-srch-opt li .tit::before { content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; background: #4285f4; }*/ .issue-srch-opt li > div { display: flex; align-items: center; gap: 5px; } .issue-srch-opt li > div input[type=text] { flex: 1; width: auto; } .issue-srch-opt input[type=text].date-input { width: 100%; } .issue-srch-opt input[type=text]:disabled.date-input { opacity: 0.5; } .issue-srch-opt .srch-container .select-box { flex: 1; } /* 이슈보기 > 일괄변경 */ .batch-wrapper .form { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; width: fit-content; font-size: 15px; } .batch-wrapper .form span { font-weight: 600; padding-top: 5px; } .batch-wrapper .btns button { height: 37px; } .btn-issue-modi { min-width: 39px; text-indent: -999em; background: #303030; border: 1px solid #252525; border-radius: 4px; } .btn-issue-modi::before { content: "\f044"; display: block; font-family: "Font Awesome 6 Free"; font-size: 16px; color: #64c5a0; text-indent: 0; margin-top: -3px; } /* 이슈등록하기 */ .issue-wrapper fieldset input[type=text].range_date_input { width: 100%; } .issue-wrapper .refer-wrapper { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; } .issue-wrapper .refer-wrapper > div { display: flex; align-items: center; } .issue-wrapper .refer-wrapper > div input[type=text] { width: 100%; max-width: 100px; } .issue-wrapper .refer-wrapper .select-box.disabled + button, .issue-wrapper .file-box.disabled span { opacity: 0.9; cursor: default; pointer-events: none; } .issue-wrapper .btn-delete::before { content: "\f057"; display: block; font-family: "Font Awesome 6 Free"; font-size: 16px; color: #dadce0; text-indent: 0; } .issue-wrapper input[type=text] + .btn-delete::before { margin-left: -40px; } .issue-wrapper .file-wrapper { display: flex; gap: 5px; flex: 1; } .issue-wrapper .file-wrapper #btn-download, .issue-wrapper .file-wrapper #btn-delFile { display: none; } .issue-wrapper .file-wrapper.attached label + button, .issue-wrapper .file-wrapper.attached label > span { display: none; } .issue-wrapper .file-wrapper.attached #btn-download, .issue-wrapper .file-wrapper.modi-mode #btn-delFile { display: inline-block; } /* 내 이슈*/ .my-issue { display: grid; grid-template-columns: 1fr 500px; gap: 30px; } .time-line .data-head { width: 100%; } .time-line h3 { display: flex; justify-content: space-between; width: 100%; } .time-line ul { color: #373737; border: 1px solid #dadce0; padding: 20px; } .time-line li { display: flex; flex-wrap: wrap; justify-content: space-between; } .time-line li span { font-weight: 400; color: #4285f4; text-decoration: underline; cursor: pointer; } .time-line li + li { margin-top: 10px; } @media (max-width: 1400px) { .my-issue { display: block; } } @media (max-width: 990px) { .issue-srch-opt ul { grid-template-columns: repeat(4,1fr); } .issue-srch-opt li:nth-last-of-type(1) { grid-column: 3 / 5; } .issue-wrapper fieldset .row.column > div { min-width: 20%; } .issue-sub-info { display: block; } } @media (max-width: 767.98px) { /* 모바일 대응 */ .issue-wrapper .related-issue { margin-bottom: 5px; } .issue-wrapper fieldset .row { flex-wrap: wrap; } .issue-wrapper fieldset .row.column > div { min-width: 40%; } .issue-wrapper fieldset .row.col > div.w100 { width: 100%; } .issue-wrapper fieldset .row.col > div.w100 input[type=text], .issue-wrapper fieldset .row.col > div.w100 input[type=password], .issue-wrapper fieldset .row.col > div.w100 input[type=search] { width: 100%; } .issue-srch-opt ul { grid-template-columns: repeat(3,1fr); } .issue-srch-opt li:nth-last-of-type(1) { grid-column: 2 / 4; } /*.batch-wrapper { margin: -5px 0 10px; }*/ .issue-sub-info { display: block; } .issue-note .data-head { flex-direction: row; } } @media (max-width: 575.98px) { /* 모바일 대응 */ .issue-srch-opt ul { grid-template-columns: repeat(2,1fr); } .issue-srch-opt li:nth-last-of-type(1) { grid-column: 1 / 3; } .issue-note dl { flex-direction: column; } .issue-note dt { width: auto; } .issue-note dt strong { display: inline-flex; align-items: center; ap: 10px; margin-right: 10px; } .issue-note dt strong::after { content: ''; display: block; width: 1px; height: 10px; background: #585858; } .issue-note dd { padding: 0; border: none; margin-top: 10px; } .issue-note .btn-modi-set { top: auto; bottom: 10px; } .issue-note-regi > div .tit { width: 70px; } } /*------------------------------------------------------------------- 이슈리포트 -------------------------------------------------------------------*/ /* 통계 */ .rprt-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .rprt-wrapper .dataTable tbody a { text-decoration: underline; } .chart-area { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 100%; border: 1px solid #dadce0; border-radius: 8px; padding: 30px; margin: 30px auto; } .chart-area canvas { width: 100%; height: 100%; } @media (max-width: 1200px) { .rprt-wrapper { display: block; } .rprt-wrapper .data-head h3 { margin: 0; } } @media (max-width: 575.98px) { /* 모바일 대응 */ .chart-area { padding: 10px; } } /*------------------------------------------------------------------- 401, 404, 500 에러 페이지 -------------------------------------------------------------------*/ .error-inner { display: flex; flex-direction: column; align-items: center; position: fixed; top:50%; left:50%; text-align:center; transform:translate(-50%, -50%); } .error-inner strong { display:block; margin: 30px 0 0; font-size: 20px; font-weight: 400; line-height: 1; color: rgba(55,55,55,.65); } .error-inner a { display: inline-block; width: 69px; height: 24px; background: url(../images/btn_error.png) no-repeat 0 0; text-indent: -999em; position: absolute; margin-top: 160px; } @media (max-width: 767.98px) { /* 모바일 대응 */ .error-inner { position: static; transform: none; margin-top: 100px; } .error-inner strong { font-size: 14px; } } @media (max-width: 413.98px) { /* 모바일 대응 */ .error-inner { width: 90vw; margin-left: auto; margin-right: auto; } .error-inner a { margin-top: 140px; } } /*------------------------------------------------------------------- sweetalert.js custom -------------------------------------------------------------------*/ .swal-modal { width: auto; min-width: 400px; background: #fff; box-shadow: 1px 1px 6px 0px rgba(0, 0, 0, 1); padding: 1px; border-radius: 15px; box-shadow: 0px 0px 42px 0px rgba(0, 0, 0, 0.34); border-radius: 15px; } .swal-modal::before { content:''; display: block; position: absolute; width: calc(100% - 2px); height: calc(100% - 2px); background: #fff; border-radius: 15px; } .swal-text { font-size: 18px; font-weight: 400; text-align: center; line-height: 1.4; } .swal-icon:first-child { margin-top: 50px; } .swal-icon { width: 120px; height: 120px; background: #fff; border-radius: 50%; margin: 30px auto; } .swal-icon--warning__body { width: 13px; height: 48px; top: 25px; border-radius: 6px; margin-left: -5px; } .swal-icon--warning__dot { width: 13px; height: 13px; margin-left: -7px; bottom: -18px; } .swal-icon--warning__body, .swal-icon--warning__dot { } .swal-icon--error__line { height: 15px; width: 78px; top: 53px; border-radius: 8px; } .swal-icon--error__line--left { left: 20px; } .swal-icon--error__line--right { left: 20px; } .swal-icon--success:before, .swal-icon--success:after, .swal-icon--success__hide-corners, .swal-icon--success__ring { display: none; } .swal-icon--success__line--long { height: 15px; width: 68px; border-radius: 8px; right: 15px; top: 55px; animation: animateSuccessLong .75s; } .swal-icon--success__line--tip { height: 15px; width: 43px; border-radius: 8px; left: 19px; top: 64px; animation: animateSuccessTip .75s; } @keyframes animateSuccessLong { 0% { width: 0; right: 72px; top: 72px; } 65% { width: 0; right: 72px; top: 72px; } 84% { width: 50px; right: 30px; top: 63px; } 100% { width: 68px; right: 15px; top: 55px; } } @keyframes animateSuccessTip { 0% { width: 0; left: 1px; top: 26px; } 54% { width: 0; left: 1px; top: 26px; } 70% { width: 68px; left: -2px; top: 55px; } 84% { width: 37px; left: 24px; top: 67px; } 100% { width: 43px; left: 19px; top: 64px; } } .swal-icon--info:after, .swal-icon--info:before { } .swal-icon--info:before { width: 13px; height: 44px; bottom: 26px; border-radius: 6px; margin-left: -7px;} .swal-icon--info:after { width: 13px; height: 13px; margin-left: -7px; top: 28px; } .swal-icon--info:after, .swal-icon--info:before { } .swal-button { min-width: 170px; height: 43px; color: #fff; background-color: #4285f4; font-weight: 500; } .swal-button:active { background-color: #71a4f7; } .swal-button:focus { box-shadow: none; } .swal-button:not([disabled]):hover { color: #FFFFFF; background-color: #3264b7; } .swal-button--cancel { font-size: 14px; background-color: rgba(218, 220, 224, 0.5); color: #000; } .swal-button--cancel:active { background-color: rgba(218, 220, 224, 0.5); } .swal-button--cancel:not([disabled]):hover { color: #373737; background-color: lightgray; } .swal-footer { text-align: center; padding: 13px 30px 30px; } .swal-overlay { background-color: rgba(0,0,0,.6); } @media (max-width: 767.98px) { /* 모바일 대응 */ .swal-modal { min-width: 90vw; max-width: 90vw; } } /*------------------------------------------------------------------- 로딩바 - 프로그레스 스타일 -------------------------------------------------------------------*/ #progress { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; background-color: rgba(0,0,0,.6); } #progress .progress-icon{ display: flex; gap: 7px; margin: 0 auto; } #progress .progress-icon > div{transform-origin: 40px 40px; animation: lds-spinner 1.2s linear infinite;} #progress .progress-icon > div:after{ content: " "; display: block; width: 12px; height: 52px; background: #fff; border-radius: 7px; } #progress .progress-icon > div:nth-child(1) { animation-delay: -1.1s; } #progress .progress-icon > div:nth-child(2) { animation-delay: -1.0s; } #progress .progress-icon > div:nth-child(3) { animation-delay: -0.9s; } #progress .progress-icon > div:nth-child(4) { animation-delay: -0.8s; } #progress .progress-icon > div:nth-child(5) { animation-delay: -0.7s; } #progress .progress-icon > div:nth-child(6) { animation-delay: -0.6s; } #progress .progress-icon > div:nth-child(7) { animation-delay: -0.5s; } #progress .progress-icon > div:nth-child(8) { animation-delay: -0.4s; } #progress .progress-icon > div:nth-child(9) { animation-delay: -0.3s; } #progress .progress-icon > div:nth-child(10) { animation-delay: -0.2s; } #progress .progress-icon > div:nth-child(11) { animation-delay: -0.1s; } #progress .progress-icon > div:nth-child(12) { animation-delay: 0s; } #progress .progress-text{ margin-top: 20px; font-size: 15px; color: #fff; text-align: center; } /*------------------------------------------------------------------- chart.js -------------------------------------------------------------------*/ #div-chart { background: #3b3b3b; padding: 30px 30px 20px; }