/** ------------------------------------------------------------ * @프로그램명:smart_big_style 스타일시트로 명칭 변경 * @파일명:smart_big_style.css * @작성일:2023. 7. 11. * @수정자:엄윤섭 * @특이사항:공통 소스는 smart_big_base.css로 분리 ------------------------------------------------------------ */ :root { /* **************************************** 메인 Color **************************************** */ /* 짙은 파란색1 : 좌측메뉴 배경색, 사이드메뉴 타이틀, 공지사항 타이틀 */ --color-main1:#002d6e; /* 더 짙은 파란색 : 카탈로그 토탈 색, 카탈로그 Total BG 등 */ --color-main2:#002d6d; /* 파란색 : ETL - UDF 화면 우측 상단 기능버튼 배경색, 초기 카탈로그 현황판 BG 등 */ --color-main3:#0040b2; /* **************************************** 버튼 전체 **************************************** */ /* ********** 버튼 공통 ********** */ /* 공통 버튼 - 기본색상(active) : 기본 버튼 BG 및 border-color, font-color 등 핵심 color */ --color-button-active:#1559ef; --color-button-active-hover:#123a93; /* ******************** .m_btn Button Style : 주요 버튼 ******************** */ /* 기본 */ --m_btn-default-color:#2e2e2e; --m_btn-default-border:#c9ccd0; --m_btn-default-bg:#ffffff; --m_btn-default-color-hover:#1b45cb; --m_btn-default-border-hover:#c9ccd0; --m_btn-default-bg-hover:#f0f5ff; /* disabled */ --m_btn-disabled-color:#aaadb0; --m_btn-disabled-border:#c8ccd0; --m_btn-disabled-bg:#e5e8ec; /* primary */ --m_btn-primary-color:#ffffff; --m_btn-primary-border:#004bb6; --m_btn-primary-bg:#004bb6; --m_btn-primary-border-hover:#123a93; --m_btn-primary-bg-hover:#123a93; /* gray */ --m_btn-gray-color:#2e2e2e; --m_btn-gray-border:#c8ccd0; --m_btn-gray-bg:#eaeef8; --m_btn-gray-color-hover:#ffffff; --m_btn-gray-border-hover:#1559ef; --m_btn-gray-bg-hover:#1559ef; /* success */ --m_btn-success-color:#ffffff; --m_btn-success-border:#1ad2a0; --m_btn-success-bg:#1ad2a0; --m_btn-success-border-hover:#18c495; --m_btn-success-bg-hover:#18c495; /* info */ --m_btn-info-color:#ffffff; --m_btn-info-border:#a7a7a7; --m_btn-info-bg:#a7a7a7; --m_btn-info-border-hover:#969696; --m_btn-info-bg-hover:#969696; /* warning */ --m_btn-warning-color:#ffffff; --m_btn-warning-border:#f0ad4e; --m_btn-warning-bg:#f0ad4e; --m_btn-warning-border-hover:#dfa149; --m_btn-warning-bg-hover:#dfa149; /* danger */ --m_btn-danger-color:#ffffff; --m_btn-danger-border:#f24a45; --m_btn-danger-bg:#f24a45; --m_btn-danger-border-hover:#e24541; --m_btn-danger-bg-hover:#e24541; /* dark */ --m_btn-dark-color:#ffffff; --m_btn-dark-border:#555555; --m_btn-dark-bg:#555555; --m_btn-dark-border-hover:#474747; --m_btn-dark-bg-hover:#474747; /* copy */ --m_btn-copy-color:#2e2e2e; --m_btn-copy-border:#c9ccd0; --m_btn-copy-bg:#ebeef7; --m_btn-copy-color-hover:#1b45cb; --m_btn-copy-border-hover:#c9ccd0; --m_btn-copy-bg-hover:#f0f5ff; /* delete */ --m_btn-delete-color:#c06565; --m_btn-delete-border:#c06565; --m_btn-delete-bg:#ffffff; --m_btn-delete-color-hover:#ffffff; --m_btn-delete-border-hover:#c06565; --m_btn-delete-bg-hover:#c06565; /* ******************** bootstrap5용 Button Style ******************** */ /* --btn-default:버튼 메인 기본색상 사용 */ --btn-default-hover:#0046d3; /* --btn-primary:버튼 메인 기본색상 사용 */ --btn-primary-hover:#0492b5; --btn-success:#1ad2a0; --btn-success-hover:#18c495; --btn-info:#a7a7a7; --btn-info-hover:#969696; --btn-warning:#f0ad4e; --btn-warning-hover:#dfa149; --btn-danger:#f24a45; --btn-danger-hover:#e24541; --btn-dark:#555555; --btn-dark-hover:#474747; /* ******************** .btn 버튼 : 초기 화면 및 작은 버튼에 주로 쓰임 ******************** */ --btn-disabled:#eff1f3; --btn-white:#ffffff; --btn-white-hover:#0046d3; --btn-blue-hover:#ffffff; --btn-deepblue:#364c85; --btn-deepblue-hover:#4666af; --btn-skyblue:#1ad2a0; --btn-skyblue-hover:#18c495; --btn-green:#5cb85c; --btn-green-hover:#449d44; --btn-orange:#f0ad4e; --btn-orange-hover:#ec971f; --btn-red:#d9534f; --btn-red-hover:#c9302c; --btn-gray:#777777; --btn-gray-hover:#555555; --btn-dark:#4B5F71; --btn-dark-hover:#394D5F; --btn-purple:#604a7b; --btn-purple-hover:#4d3669; --btn-delete:#c06565; /* **************************************** 버튼 전체 Style **************************************** */ /* ********** padding ********** */ --m_btn-pd-default:0 20px; --m_btn-pd-large:0 30px; --m_btn-pd-active:0 30px; --m_btn-pd-small:0 12px; --m_btn-pd-xsmall:0 15px; --m_btn-pd-tiny:0 8px; /* ********** font ********** */ --m_btn-font-default:14px; --m_btn-font-large:17px; --m_btn-font-active:14px; --m_btn-font-small:14px; --m_btn-font-xsmall:14px; --m_btn-font-tiny:11px; /* ********** height ********** */ --m_btn-h-default:32px; --m_btn-h-large:40px; --m_btn-h-active:32px; --m_btn-h-small:32px; --m_btn-h-xsmall:24px; --m_btn-h-tiny:20px; /* ********** line-height ********** */ --m_btn-lh-default:31px; --m_btn-lh-large:38px; --m_btn-lh-active:31px; --m_btn-lh-small:31px; --m_btn-lh-xsmall:22px; --m_btn-lh-tiny:19px; /* ********** radius ********** */ --m_btn-radius-default:8px; --m_btn-radius-large:10px; --m_btn-radius-small:8px; --m_btn-radius-active:8px; --m_btn-radius-xsmall:8px; --m_btn-radius-tiny:5px; } /*=========================================================================================================================== 공통 요소 및 Form 양식 =============================================================================================================================*/ /*====================================== 로딩 ========================================*/ .loading_area {width:100%; height:100vh; position:fixed; z-index:9999; background:rgba(0,0,0,0.5); left:0; top:0; display:none;} .loading_area.active {display:block; animation:loadingFadeIn2 0.5s 1;} .loading_area .loader {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); min-height:50px;} .loading_area .bar {width:10px; height:70px; background:transparent; border-radius:10px 10px 0 0; display:inline-block; animation:loader 1.6s infinite; vertical-align:bottom; margin-right:4px; transform-origin:bottom center;} .loading_area .bar:nth-child(1) {animation-delay:0s;} .loading_area .bar:nth-child(2) {animation-delay:0.2s;} .loading_area .bar:nth-child(3) {animation-delay:0.4s;} .loading_area .bar:nth-child(4) {animation-delay:0.6s;} .loading_area .bar:nth-child(5) {animation-delay:0.8s;} .loading_area .bar:nth-child(6) {animation-delay:1s;} .loading_area .bar:nth-child(7) {animation-delay:1.2s;} .loading_area .bar:nth-child(8) {animation-delay:1.4s; margin-right:0;} .loading_area p {color:#fff; text-align:center; margin-top:15px; letter-spacing:5px;} @keyframes loadingFadeIn2 { 0% {opacity:0;} 100% {opacity:1;} } @keyframes loader { 0% { transform:scaleY(0.1); background:transparent; } 50% { transform:scaleY(1); background:#2ac8f4; } 100% { transform:scaleY(0.1); background:transparent; } } /* progress bar */ .progress span.num {display:inline-block; color:#000; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} .progress .progress-bar.bg-primary {background-color:#00a0d5 !important;} .progress .progress-bar.bg-success {background-color:#1ad2a0 !important;} .progress .progress-bar.bg-info {background-color:#a7a7a7 !important;} .progress .progress-bar.bg-warning {background-color:#f0ad4e !important;} .progress .progress-bar.bg-danger {background-color:#ff8989 !important;} .progress .progress-bar.bg-dark {background-color:#555555 !important;} /* well 추가 */ .well {min-height:20px; padding:19px; margin-bottom:20px; background-color:#fff; border:1px solid #e3e3e3; border-radius:0; -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05); box-shadow:inset 0 1px 1px rgba(0,0,0,.05)} .well blockquote {border-color:#ddd; border-color:rgba(0,0,0,.15)} .well-lg {padding:24px; border-radius:6px} .well-sm {padding:9px; border-radius:3px} /* pull */ .pull-left {display:flex; justify-content:flex-start !important;} .pull-right {display:flex; justify-content:flex-end !important;} /* 투명도 */ .opacity0 {opacity:0; pointer-events:none;} .opacity1 {opacity:0.1; pointer-events:none;} .opacity2 {opacity:0.2; pointer-events:none;} .opacity3 {opacity:0.3; pointer-events:none;} .opacity4 {opacity:0.4; pointer-events:none;} .opacity5 {opacity:0.5; pointer-events:none;} .opacity6 {opacity:0.6; pointer-events:none;} .opacity7 {opacity:0.7; pointer-events:none;} .opacity8 {opacity:0.8; pointer-events:none;} .opacity9 {opacity:0.9; pointer-events:none;} /*====================================== Form ========================================*/ /* input-group 스타일 추가 */ .input-group {min-height:30px;} .input-group {margin-bottom:10px;} .input-group .form-control:first-child, .input-group-addon:first-child, .input-group-btn:first-child > .btn, .input-group-btn:first-child > .btn-group > .btn, .input-group-btn:first-child > .dropdown-toggle, .input-group-btn:last-child > .btn-group:not(:last-child) > .btn, .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle) {border-top-right-radius:0; border-bottom-right-radius:0} .input-group .form-control:last-child, .input-group-addon:last-child, .input-group-btn:first-child > .btn-group:not(:first-child) > .btn, .input-group-btn:first-child > .btn:not(:first-child), .input-group-btn:last-child > .btn, .input-group-btn:last-child > .btn-group > .btn, .input-group-btn:last-child > .dropdown-toggle {border-top-left-radius:0; border-bottom-left-radius:0} .input-group .input-group-text {border-radius:8px 0 0 8px;} /* .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {border-top-right-radius:8px; border-bottom-right-radius:8px;} */ .input-group .input-group-text:last-child {border-radius:0 8px 8px 0;} .input-group .input-group-icon + .form-control {border-radius:0 8px 8px 0;} .input-group .input-group-text ~ .select2-container--default .select2-selection--single, .input-group .input-group-text ~ .select2-container--default .select2-selection--multiple {border-radius:0 8px 8px 0;} .input-group-icon {display:flex; align-items:center; padding:0.375rem 0.75rem; color:#bfbfbf; font-size:15px; font-weight:400; line-height:1.5; text-align:center; white-space:nowrap; background-color:#f8f9fa;; border:1px solid #dcdcdc; border-radius:0;} .input-group-text {padding:5px 9px; font-size:12px; font-weight:400; line-height:1; color:#000; text-align:center; border:1px solid #dcdcdc; border-radius:0; position:relative; background:#ffffff; /* Old browsers */ background:-moz-linear-gradient(top, #ffffff 0%, #f2f4f7 100%, #f2f4f7 100%); /* FF3.6-15 */ background:-webkit-linear-gradient(top, #ffffff 0%,#f2f4f7 100%,#f2f4f7 100%); /* Chrome10-25,Safari5.1-6 */ background:linear-gradient(to bottom, #ffffff 0%,#f2f4f7 100%,#f2f4f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f4f7',GradientType=0 ); /* IE6-9 */} .input-group-text i {margin-right:5px;} .input-group-text:has(i:only-child) {margin-right:0;} .input-group:has(> input:first-child) .form-control:first-child, .input-group:has(> input:first-child) .form_control:first-child {border-radius:8px 0 0 8px !important;} /* SaveCustomColumn.jsp 작업 시 추가함 */ .input-group:after {content:""; float:none; clear:both;} .input-group .input-group-icon {padding:0; text-align:center; width:30px; height:30px; line-height:29px; justify-content:center; float:left; border-radius:8px 0 0 8px;} .input-group .input-group-icon + .form-control, .input-group .input-group-icon + .form_control {float:right; width:calc(100% - 30px); margin-right:0;} /* color picker style */ .colorpicker-element .add-on, .colorpicker-element .input-group-addon {min-width:30px;} .colorpicker-element .add-on i, .colorpicker-element .input-group-addon i {display:inline-block; cursor:pointer; vertical-align:text-top; width:30px; height:100%; position:absolute; left:0; top:0;} .form-horizontal .control-label {padding-top:5px; text-align:right;} .form-horizontal .control-label-left {padding-top:7px; margin-bottom:0; text-align:left;} .form-control {font-size:14px;} .form-control:focus {border-color:#CCD0D7; box-shadow:none !important} textarea.form-control {height:auto} .form-control:not(:disabled,:read-only):hover {border:1px solid #2b58e6;} .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {background-color:#e9edf1; opacity:1; color:#a09f9f;} select.form-control { --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8a8a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-color:#fff; background-image:var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat:no-repeat; background-position:right 6px center; background-size:16px 12px; appearance:none; -webkit-appearance:none; -moz-appearance:none; } input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {-webkit-text-fill-color:#000; caret-color:#000; -webkit-box-shadow:0 0 0 1000px #fff inset; box-shadow:0 0 0 1000px #fff inset;} /* 포커스/호버 때도 유지 */ input:-webkit-autofill:focus, input:-webkit-autofill:hover {-webkit-box-shadow:0 0 0 1000px #fff inset; box-shadow:0 0 0 1000px #fff inset;} input[type=password] {font-family:none;} .form_item.has_form input:-webkit-autofill, .form_item.has_form textarea:-webkit-autofill, .form_item.has_form select:-webkit-autofill {border:none;} .form_item.has_form input:-webkit-autofill:focus, .form_item.has_form textarea:-webkit-autofill:focus, .form_item.has_form select:-webkit-autofill:focus, .form_item.has_form input[type=password]:-webkit-autofill:focus, .form_item.has_form input:-webkit-autofill:hover, .form_item.has_form textarea:-webkit-autofill:hover, .form_item.has_form select:-webkit-autofill:hover {border:none; -webkit-box-shadow:0 0 0 1000px #fff inset !important; box-shadow:0 0 0 1000px #fff inset !important; background:#fff !important;} textarea {padding:10px; vertical-align:top; width:200px} textarea:focus {outline-style:solid; outline-width:2px} .form-control-feedback {margin-top:3px; height:24px; color:#bfbfbf; line-height:24px; font-size:15px} .form-control-feedback.left {border-right:1px solid #ccc; left:8px;} .form-control-feedback.right {border-left:1px solid #ccc; right:13px; margin-right:-9px; font-size:15px !important;} .form-control.has-feedback-left {padding-left:45px} .form-control.has-feedback-right {padding-right:45px} .form-group:after {content:""; display:block; clear:both; float:none; width:100%; height:0;} .form-group + .form-group {margin-top:10px} .form-group.has-feedback span {display:block !important;} .input-group-btn .btn {margin-bottom:0;} @media (min-width:768px) { .form-inline .form-group {display:inline-block; margin-bottom:0; vertical-align:middle} .form-inline .form-control {display:inline-block; width:auto; vertical-align:middle} .form-inline .form-control-static {display:inline-block} .form-inline .input-group {display:inline-table; vertical-align:middle} .form-inline .input-group .form-control,.form-inline .input-group .input-group-addon,.form-inline .input-group .input-group-btn {width:auto} .form-inline .input-group > .form-control {width:100%} .form-inline .control-label {margin-bottom:0; vertical-align:middle} .form-inline .checkbox,.form-inline .radio {display:inline-block; margin-top:0; margin-bottom:0; vertical-align:middle} .form-inline .checkbox label,.form-inline .radio label {padding-left:0} .form-inline .checkbox input[type=checkbox],.form-inline .radio input[type=radio] {position:relative; margin-left:0; margin-top:3px;} .form-inline .has-feedback .form-control-feedback {top:0} } /* ****************************** form_control ****************************** */ .form_control {display:block; width:100%; padding:0 15px; font-size:14px; font-weight:400; line-height:30px; color:#000; background-color:#fff; background-clip:padding-box; border:1px solid #dcdcdc; border-radius:8px; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif;} /* 1. 전체 appearance 복원 */ input[type=number].form_control {-webkit-appearance:textfield; appearance:textfield;} /* 2. 내부 스피너 복원 */ input[type=number].form_control::-webkit-inner-spin-button, input[type=number].form_control::-webkit-outer-spin-button {-webkit-appearance:auto; margin:0;} input[type=number].form_control::-webkit-inner-spin-button {margin-top:-2px;} /* 파이어폭스 */ input[type=number].form_control {-moz-appearance:number-input;} .form_control[type=file] {overflow:hidden} .form_control[type=file]:not(:disabled):not([readonly]) {cursor:pointer;} .form_control-sm {line-height:23px; font-size:13px;} .form_control-lg {line-height:38px; font-size:18px;} textarea.form_control {height:150px; line-height:20px; padding:10px;} textarea.form_control:focus {outline:none;} .input-group > .form_control, .input-group > .form-floating, .input-group > .form-select {position:relative; flex:1 1 auto; width:1%; min-width:0;} .input-group > .form_control:focus {z-index:5;} /* 추가 form_control 스타일 */ .form_control:focus {box-shadow:none !important} .form_control:not(:disabled,:read-only):hover, .form_control:not(:disabled,:read-only):focus {border:1px solid #2b58e6;} .form_control.disabled, .form_control[disabled], .form_control[readonly], fieldset[disabled] .form_control {background-color:#e9edf1; opacity:1; color:#21251f;} .form_control-feedback {margin-top:3px; height:24px; color:#bfbfbf; line-height:24px; font-size:15px;} .form_control-feedback.left {border-right:1px solid #ccc; left:6px;} .form_control-feedback.right {border-left:1px solid #ccc; right:13px; margin-right:-9px; font-size:15px !important;} .form_control.has-feedback-left {padding-left:45px;} .form_control.has-feedback-right {padding-right:45px;} /* input-group 스타일 추가 */ .input-group .form_control:first-child {border-top-right-radius:0; border-bottom-right-radius:0} .input-group .form_control:last-child {border-top-left-radius:0; border-bottom-left-radius:0} .input-group .input-group-btn:first-child .m_btn {border-radius:3px 0 0 3px;} .input-group .input-group-btn:last-child .m_btn {border-radius:0 3px 3px 0;} select.form_control {padding-right:30px; height:30px; transition:0.2s; appearance:none; -webkit-appearance:none; -moz-appearance:none; background:#fff url(../images/icon/chevron-down.svg) no-repeat right 6px center; background-size:16px 12px;} select.form_control:hover, select.form_control:focus, .dropdown.bootstrap-select.form_control:hover {border-color:#2b58e6;} select.form_control[disabled]:hover, select.form_control[disabled]:focus, .dropdown.bootstrap-select.form_control[disabled]:hover {border-color:#dcdcdc;} .form_control-feedback {margin-top:3px; height:24px; color:#bfbfbf; line-height:24px; font-size:15px} .form_control-feedback.left {border-right:1px solid #ccc; left:8px;} .form_control-feedback.right {border-left:1px solid #ccc; right:13px; margin-right:-9px; font-size:15px !important;} .form_control.has-feedback-left {padding-left:45px} .form_control.has-feedback-right {padding-right:45px} @media (min-width:768px) { .form-inline .form_control {display:inline-block; width:auto; vertical-align:middle} .form-inline .form_control-static {display:inline-block} .form-inline .input-group .form_control {width:auto} .form-inline .input-group > .form_control {width:100%} } /* dataTable 내 폼양식 정렬 */ .dataTable .form-control, .dataTable .form_control, .dataTable .m_text {vertical-align:top;} /* form-floating - form_control */ .form-floating {position:relative} .form-floating::before:not(.form_control:disabled) {position:absolute; top:1px; left:1px; width:calc(100% - (calc(calc(.375em + .1875rem) + calc(.75em + .375rem)))); height:1.875em; content:""; background-color:#fff; border-radius:.375rem} .form-floating > .form_control,.form-floating > .form-control-plaintext,.form-floating > .form-select {height:calc(3.5rem + calc(1px * 2)); line-height:1.25} .form-floating > label {position:absolute; top:0; left:0; width:100%; height:100%; padding:1rem .75rem; overflow:hidden; text-align:start; text-overflow:ellipsis; white-space:nowrap; pointer-events:none; border:1px solid transparent; transform-origin:0 0; transition:opacity .1s ease-in-out,transform .1s ease-in-out} @media (prefers-reduced-motion:reduce) { .form-floating > label {transition:none} } .form-floating > .form_control,.form-floating > .form-control-plaintext {padding:1rem .75rem} .form-floating > .form-control-plaintext::-moz-placeholder, .form-floating > .form_control::-moz-placeholder {color:transparent} .form-floating > .form-control-plaintext::placeholder, .form-floating > .form_control::placeholder {color:transparent} .form-floating > .form-control-plaintext:not(:-moz-placeholder-shown), .form-floating > .form_control:not(:-moz-placeholder-shown) {padding-top:1.625rem; padding-bottom:.625rem} .form-floating > .form-control-plaintext:focus, .form-floating > .form-control-plaintext:not(:placeholder-shown), .form-floating > .form_control:focus,.form-floating > .form_control:not(:placeholder-shown) { padding-top:1.625rem; padding-bottom:.625rem} .form-floating > .form-control-plaintext:-webkit-autofill, .form-floating > .form_control:-webkit-autofill {padding-top:1.625rem; padding-bottom:.625rem} .form-floating > .form-select {padding-top:1.625rem; padding-bottom:.625rem} .form-floating > .form_control:not(:-moz-placeholder-shown)~label {opacity:.65; transform:scale(.85) translateY(-.5rem) translateX(.15rem)} .form-floating > .form-control-plaintext~label, .form-floating > .form_control:focus~label, .form-floating > .form_control:not(:placeholder-shown)~label, .form-floating > .form-select~label { opacity:.65; transform:scale(.85) translateY(-.5rem) translateX(.15rem)} .form-floating > .form_control:-webkit-autofill~label {opacity:.65; transform:scale(.85) translateY(-.5rem) translateX(.15rem)} .form-floating > .form-control-plaintext~label {border-width:1px 0} .form-floating > .form_control:disabled~label {color:#6c757d} /* ion.rangeSlider */ .irs-from, .irs-to, .irs-single {background:#1559ef;} .mg_rangeSlider .irs-from, .irs-to, .irs-single {background:#353c48;} /* cropper */ .cropper .btn.btn-primary {background:#1f96ee; border-color:#85b9ff;} .cropper .btn.btn-primary:hover {background:#004eb8;} .cropper .docs-tooltip {padding:4px 10px 2px;} /* tags input */ .tagsinput {border:1px solid #CCC; background:#FFF; padding:6px 6px 0; width:300px; overflow-y:auto; border-radius:4px;} .tag {line-height:1.5; background:#607d8b; color:#fff !important} span.tag {-moz-border-radius:2px; -webkit-border-radius:2px; display:block; float:left; padding:2px 9px; text-decoration:none; background:#0d6efd; color:#fff; margin-right:5px; font-weight:400; margin-bottom:5px; font-family:"Pretendard", 'KoPubWorldDotum'; border-radius:4px;} span.tag a {color:#F1F6F7 !important} .tagsinput span.tag a {font-weight:bold; color:#82ad2b; text-decoration:none; font-size:11px} .tagsinput input {width:80px; margin:0px; font-family:"Pretendard", 'KoPubWorldDotum'; font-size:13px; border:1px solid transparent; padding:3px; background:transparent; color:#000; outline:0} .tagsinput div {display:block; float:left; font-weight:bold;} .tags_clear {clear:both; width:100%; height:0px} .tagsinput:hover {border:1px solid #2b58e6;} /* star raiong */ .glyphicon {position:relative; top:1px; display:inline-block; font-family:'Font Awesome 6 Free'; font-style:normal; font-weight:400; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} .glyphicon-star {margin-right:3px;} .glyphicon-star:before {content:"\f005"; font-weight:700; color:#fbc01c; font-size:12px;} .glyphicon-star-empty {margin-right:3px;} .glyphicon-star-empty:before {content:"\f005"; font-weight:700; color:#cbcbcb; font-size:12px;} .glyphicon-plus:before, .glyphicon-plus-sign:before {content:"\2b";} .glyphicon-remove:before {content:"\f2ed";} /*====================================== Button ========================================*/ .btn_ {display:inline-block; padding:3px 9px; margin-bottom:0; font-size:12px; line-height:20px; text-align:center; vertical-align:middle; cursor:pointer; color:#333333; text-shadow:0 1px 1px rgba(255, 255, 255, 0.75); background-color:#f5f5f5; background-image:linear-gradient(to bottom, #fff, #e6e6e6); background-repeat:repeat-x; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0); border-color:#e6e6e6 #e6e6e6 #bfbfbf; border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); filter:progid:DXImageTransform.Microsoft.gradient(enabled=false); border:1px solid #cccccc; border-bottom-color:#b3b3b3; border-radius:4px; box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05)} a.btn-success, a.btn-primary, a.btn-warning, a.btn-danger {color:#fff} .btn-success {background:#26B99A; border:1px solid #169F85} .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {background:#169F85} .btn-dark {color:#E9EDEF; background-color:#4B5F71; border-color:#364B5F} .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .open .dropdown-toggle.btn-dark {color:#FFFFFF; background-color:#394D5F; border-color:#394D5F} .btn.btn-round {border-radius:30px} .btn.btn-app {position:relative; padding:15px 5px; margin:0 0 10px 10px; min-width:80px; height:60px; box-shadow:none; border-radius:0; text-align:center; color:#666; border:1px solid #ddd; background-color:#fcfdfe; font-size:12px} .btn.btn-app > .fa, .btn.btn-app > .glyphicon, .btn.btn-app > .ion {font-size:20px; display:block} .btn.btn-app:hover {background:#f4f4f4; color:#444; border-color:#aaa} .btn.btn-app:active, .btn.btn-app:focus {box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125)} .btn.btn-app > .badge {position:absolute; top:-3px; right:-10px; font-size:10px; font-weight:400} /* ********** Basic setting ********** */ /* Button */ .btn {transition:all 0.2s linear 0s; padding:4px 12px 4px; border-radius:0; font-size:13px; line-height:20px; background:#ffffff; border-color:var(--color-button-active); color:var(--color-button-active); cursor:inherit;} .btn:hover, .btn:focus, .btn:active, .btn.active, .open .dropdown-toggle {background:#fff; border-color:#004bb6; color:#004bb6;} .btn.btn-sm {padding:2px 8px; font-size:13px;} .btn.btn-lg {padding:6px 16px; font-size:16px;} .btn.btn-20 {line-height:11px; font-size:11px; padding:4px 7px 4px 7px;} .btn.btn-25 {line-height:11px; font-size:11px; padding:6px 7px 6px 7px;} .btn.btn-28 {line-height:13px; font-size:13px; padding:6px 7px 6px 7px;} .btn.btn-36 {line-height:13px; font-size:13px; padding:11px 13px 11px 13px;} #btn_openAll.btn.btn-success.btn-25, #btn_closeAll.btn.btn-primary.btn-25 {background:var(--color-button-active); color:#fff; border:none; border-radius:3px; font-size:11px; width:20px; height:20px; padding:0; line-height:22px; text-align:center; transition:0.2s;} #btn_openAll.btn.btn-success.btn-25 i, #btn_closeAll.btn.btn-primary.btn-25 i {margin-right:0;} #btn_openAll.btn.btn-success.btn-25:hover, #btn_closeAll.btn.btn-primary.btn-25:hover {background:#004bb6;} #btn_closeAll.btn.btn-primary.btn-25 {margin-left:0;} button:last-child, .buttons:last-child, .btn:last-child, .modal-footer .btn+.btn:last-child {margin-right:0;} .btn.btn-circle {line-height:16px; font-size:13px; padding:9px 12px 9px 12px; border-radius:50%;} .btn > i {margin-right:5px;} .note-editor .btn > i {margin-right:0;} .btn + .btn {margin-left:3px;} .btn.disabled, .btn:disabled, fieldset:disabled .btn {opacity:0.5; position:relative;} .btn.disabled:after, .btn:disabled:after, fieldset:disabled .btn:after {content:""; display:block; width:calc(100% + 2px); height:calc(100% + 2px); background:var(--btn-disabled); position:absolute; left:-1px; top:-1px;} /* button_color */ .btn.btn-white {background:var(--btn-white); border-color:var(--color-button-active); color:var(--color-button-active);} .btn-white:hover, .btn-white:focus, .btn-white:active, .btn-white.active, .open .dropdown-toggle.btn-white {background:var(--btn-white); border-color:var(--btn-white-hover);} .btn.btn-blue {background:var(--color-button-active); border-color:var(--color-button-active); color:#ffffff;} .btn-blue:hover, .btn-blue:focus, .btn-blue:active, .btn-blue.active, .open .dropdown-toggle.btn-blue {background:var(--btn-blue-hover); border-color:var(--btn-blue-hover);} .btn.btn-deepblue {background:var(--btn-deepblue); border-color:var(--btn-deepblue); color:#ffffff;} .btn-deepblue:hover, .btn-deepblue:focus, .btn-deepblue:active, .btn-deepblue.active, .open .dropdown-toggle.btn-deepblue {background:var(--btn-deepblue-hover); border-color:var(--btn-deepblue-hover);} .btn.btn-skyblue {background:var(--btn-skyblue); border-color:var(--btn-skyblue); color:#ffffff;} .btn-skyblue:hover, .btn-skyblue:focus, .btn-skyblue:active, .btn-skyblue.active, .open .dropdown-toggle.btn-skyblue {background:var(--btn-skyblue-hover); border-color:var(--btn-skyblue-hover);} .btn.btn-green {background:var(--btn-green); border-color:var(--btn-green); color:#ffffff;} .btn-green:hover, .btn-green:focus, .btn-green:active, .btn-green.active, .open .dropdown-toggle.btn-green {background:var(--btn-green-hover); border-color:var(--btn-green-hover);} .btn.btn-orange {background:var(--btn-orange); border-color:var(--btn-orange); color:#ffffff;} .btn-orange:hover, .btn-orange:focus, .btn-orange:active, .btn-orange.active, .open .dropdown-toggle.btn-orange {background:var(--btn-orange-hover); border-color:var(--btn-orange-hover);} .btn.btn-red {background:var(--btn-red); border-color:var(--btn-red); color:#ffffff;} .btn-red:hover, .btn-red:focus, .btn-red:active, .btn-red.active, .open .dropdown-toggle.btn-red {background:var(--btn-red-hover); border-color:var(--btn-red-hover);} .btn.btn-gray {background:var(--btn-gray); border-color:var(--btn-gray); color:#ffffff;} .btn-gray:hover, .btn-gray:focus, .btn-gray:active, .btn-gray.active, .open .dropdown-toggle.btn-gray {background:var(--btn-gray-hover); border-color:var(--btn-gray-hover);} .btn.btn-dark {background:var(--btn-dark); border-color:var(--btn-dark); color:#E9EDEF;} .btn-dark:hover, .btn-dark:focus, .btn-dark:active, .btn-dark.active, .open .dropdown-toggle.btn-dark {background:var(--btn-dark-hover); border-color:var(--btn-dark-hover);} .btn.btn-purple {background:var(--btn-purple); border-color:var(--btn-purple); color:#ffffff;} .btn-purple:hover, .btn-purple:focus, .btn-purple:active, .btn-purple.active, .open .dropdown-toggle.btn-purple {background:var(--btn-purple-hover); border-color:var(--btn-purple-hover);} .btn.btn-purple.outline {background:none; border-color:#992ee3; color:#992ee3;} .btn-purple.outline:hover, .btn-purple.outline:focus, .btn-purple.outline:active, .btn-purple.outline.active, .open .dropdown-toggle.btn-purple.outline {border-color:#ff9908;} .btn.btn-delete {background:#ffffff; border-color:var(--btn-delete); color:var(--btn-delete);} .btn.btn-delete:hover {background:var(--btn-delete); border-color:var(--btn-delete); color:#fff;} .btn.btn-red-light {background:#fee3e5; border:0; color:#e5422f;} .btn.btn-red-light:hover {background:#e5422f; border:0; color:#ffffff;} /* button_outline */ .btn.btn-blue.outline {background:#ffffff; border-color:#2e6da4; color:#2e6da4;} .btn-blue.outline:hover, .btn-blue.outline:focus, .btn-blue.outline:active, .btn-blue.outline.active, .open .dropdown-toggle.btn-blue.outline {background:#f6f6f6; border-color:#122b40;} .btn.btn-deepblue.outline {background:#ffffff; border-color:#4666af; color:#333333;} .btn-deepblue.outline:hover, .btn-deepblue.outline:focus, .btn-deepblue.outline:active, .btn-deepblue.outline.active, .open .dropdown-toggle.btn-deepblue.outline {background:#f6f6f6; border-color:#38569a;} .btn.btn-skyblue.outline {background:#ffffff; border-color:#46b8da; color:#333333;} .btn-skyblue.outline:hover, .btn-skyblue.outline:focus, .btn-skyblue.outline:active, .btn-skyblue.outline.active, .open .dropdown-toggle.btn-skyblue.outline {background:#f6f6f6; border-color:#1b6d85;} .btn.btn-green.outline {background:#ffffff; border-color:#4cae4c; color:#255625;} .btn-green.outline:hover, .btn-green.outline:focus, .btn-green.outline:active, .btn-green.outline.active, .open .dropdown-toggle.btn-green.outline {background:#f6f6f6; border-color:#255625;} .btn.btn-orange.outline {background:#ffffff; border-color:#eea236; color:#333333;} .btn-orange.outline:hover, .btn-orange.outline:focus, .btn-orange.outline:active, .btn-orange.outline.active, .open .dropdown-toggle.btn-orange.outline {background:#f6f6f6; border-color:#985f0d;} .btn.btn-red.outline {background:#ffffff; border-color:#d43f3a; color:#d43f3a;} .btn-red.outline:hover, .btn-red.outline:focus, .btn-red.outline:active, .btn-red.outline.active, .open .dropdown-toggle.btn-red.outline {background:#f6f6f6; border-color:#761c19;} .btn.btn-gray.outline {background:#ffffff; border-color:#555555; color:#333333;} .btn-gray.outline:hover, .btn-gray.outline:focus, .btn-gray.outline:active, .btn-gray.outline.active, .open .dropdown-toggle.btn-gray.outline {background:#f6f6f6; border-color:#444444;} .btn.btn-dark.outline {background:#ffffff; border-color:#364B5F; color:#333333;} .btn-dark.outline:hover, .btn-dark.outline:focus, .btn-dark.outline:active, .btn-dark.outline.active, .open .dropdown-toggle.btn-dark.outline {background:#f6f6f6; border-color:#394D5F;} .btn.bold {font-weight:bold;} span.btn.outline:hover, span.btn.outline:focus, span.btn.outline:active {background:#fff !important;} /* ************************** bootstrap5용 Style 추가 ************************** */ /* default */ .btn-default {color:var(--color-button-active); background:#fff; border-color:var(--color-button-active);} .btn-default.focus, .btn-default:focus {color:var(--color-button-active); background-color:#fff; border-color:var(--btn-default-hover);} .btn-default:hover {color:var(--color-button-active); background:#fff; border-color:var(--btn-default-hover);} .btn-default.active, .btn-default:active, .open > .dropdown-toggle.btn-default {color:#fff; background-color:var(--btn-default-hover); border-color:var(--btn-default-hover);} /* primary */ .btn-primary {color:#fff; background:var(--color-button-active); border-color:var(--color-button-active);} .btn-primary.focus, .btn-primary:focus {color:#fff; background-color:var(--btn-primary-hover); border-color:var(--btn-primary-hover);} .btn-primary:hover {color:#fff; background:var(--btn-primary-hover); border-color:var(--btn-primary-hover);} .btn-primary.active, .btn-primary:active, .open > .dropdown-toggle.btn-primary {color:#fff; background-color:var(--btn-primary-hover); border-color:var(--btn-primary-hover);} /* success */ .btn-success {color:#fff; background:var(--btn-success); border-color:var(--btn-success);} .btn-success.focus, .btn-success:focus {color:#fff; background-color:var(--btn-success-hover); border-color:var(--btn-success-hover);} .btn-success:hover {color:#fff; background:var(--btn-success-hover); border-color:var(--btn-success-hover);} .btn-success.active, .btn-success:active, .open > .dropdown-toggle.btn-success {color:#fff; background-color:var(--btn-success-hover); border-color:var(--btn-success-hover);} /* info */ .btn-info {color:#fff; background:var(--btn-info); border-color:var(--btn-info);} .btn-info.focus, .btn-info:focus {color:#fff; background-color:var(--btn-info-hover); border-color:var(--btn-info-hover);} .btn-info:hover {color:#fff; background:var(--btn-info-hover); border-color:var(--btn-info-hover);} .btn-info.active, .btn-info:active, .open > .dropdown-toggle.btn-info {color:#fff; background-color:var(--btn-info-hover); border-color:var(--btn-info-hover);} /* warning */ .btn-warning {color:#fff; background:var(--btn-warning); border-color:var(--btn-warning);} .btn-warning.focus, .btn-warning:focus {color:#fff; background-color:var(--btn-warning-hover); border-color:var(--btn-warning-hover);} .btn-warning:hover {color:#fff; background:var(--btn-warning-hover); border-color:var(--btn-warning-hover);} .btn-warning.active, .btn-warning:active, .open > .dropdown-toggle.btn-warning {color:#fff; background-color:var(--btn-warning-hover); border-color:var(--btn-warning-hover);} /* danger */ .btn-danger {color:#fff; background:var(--btn-danger); border-color:var(--btn-danger);} .btn-danger.focus, .btn-danger:focus {color:#fff; background-color:var(--btn-danger-hover); border-color:var(--btn-danger-hover);} .btn-danger:hover {color:#fff; background:var(--btn-danger-hover); border-color:var(--btn-danger-hover);} .btn-danger.active, .btn-danger:active, .open > .dropdown-toggle.btn-danger {color:#fff; background-color:var(--btn-danger-hover); border-color:var(--btn-danger-hover);} /* dark */ .btn-dark {color:#fff; background:var(--btn-dark); border-color:var(--btn-dark);} .btn-dark.focus, .btn-dark:focus {color:#fff; background-color:var(--btn-dark-hover); border-color:var(--btn-dark-hover);} .btn-dark:hover {color:#fff; background:var(--btn-dark-hover); border-color:var(--btn-dark-hover);} .btn-dark.active, .btn-dark:active, .open > .dropdown-toggle.btn-dark {color:#fff; background-color:var(--btn-dark-hover); border-color:var(--btn-dark-hover);} /* Button */ .m_btn {display:inline-block; padding:var(--m_btn-pd-default); margin:0; font-size:var(--m_btn-font-default); text-align:center; border:1px solid var(--m_btn-default-border); border-radius:var(--m_btn-radius-default); color:var(--m_btn-default-color); background:var(--m_btn-default-bg); font-weight:400; transition:0.2s; height:var(--m_btn-h-default); line-height:var(--m_btn-lh-default); vertical-align:middle;} .m_btn i {font-size:15px; margin-right:7px; line-height:1; vertical-align:baseline;} .m_btn.m_btn_xsmall i {margin-right:5px;} .m_btn + .m_btn {margin-left:3px;} .m_btn + .btn-group {margin-left:3px;} .btn-group + .btn-group {margin-left:3px;} .m_btn:hover {outline:none !important; box-shadow:none !important; text-decoration:none; color:var(--m_btn-default-color-hover); border-color:var(--m_btn-default-border-hover); background:var(--m_btn-default-bg-hover);} .m_btn.disabled, .m_btn:disabled {color:var(--m_btn-disabled-color) !important; border-color:var(--m_btn-disabled-border) !important; background:var(--m_btn-disabled-bg) !important;} .m_btn > .count {display:inline-block; padding:0 10px; height:20px; line-height:20px; margin-left:10px; color:#fff; font-size:12px; border-radius:10px; background-color:#1dbae1;} .paas_container a.m_btn {color:#3e3e3e;} .paas_container a.m_btn:hover {color:#1b45cb; text-decoration:none;} /* .paas_container .m_btn, .pop_pass .m_btn {border-radius:8px;} */ span.m_btn:hover, span.m_btn:focus {pointer-events:none; color:#2e2e2e; border-color:#c9ccd0; background:#fff;} .m_btn.m_btn_large {font-size:var(--m_btn-font-large); padding:var(--m_btn-pd-large); border-radius:var(--m_btn-radius-large); height:var(--m_btn-h-large); line-height:var(--m_btn-lh-large);} .m_btn.m_btn_active {font-size:var(--m_btn-font-active); padding:var(--m_btn-pd-active); border-radius:var(--m_btn-radius-active); height:var(--m_btn-h-active); line-height:var(--m_btn-lh-active); color:#ffffff; border-color:var(--color-button-active); background:var(--color-button-active);} .m_btn.m_btn_active:hover {border-color:var(--color-button-active-hover); background:var(--color-button-active-hover);} .m_btn.m_btn_small {padding:var(--m_btn-pd-small); font-size:var(--m_btn-font-small); height:var(--m_btn-h-small); line-height:var(--m_btn-lh-small); border-radius:var(--m_btn-radius-small);} .m_btn.m_btn_xsmall {padding:var(--m_btn-pd-xsmall); height:var(--m_btn-h-xsmall); font-size:var(--m_btn-font-xsmall); line-height:var(--m_btn-lh-xsmall); border-radius:var(--m_btn-radius-xsmall);} .m_btn.m_btn_xsmall i {font-size:12px;} .m_btn.m_btn_tiny {padding:var(--m_btn-pd-tiny); height:var(--m_btn-h-tiny); font-size:var(--m_btn-font-tiny); line-height:var(--m_btn-lh-tiny); font-weight:400; border-radius:var(--m_btn-radius-tiny);} .m_btn.m_btn_tiny i {font-size:11px; margin:0 5px 0 0; line-height:18px;} .m_btn.m_btn_tiny + .m_btn.m_btn_tiny {margin-left:4px;} .m_btn.m_btn_tiny.btn-success {border-color:#5d995d; color:#5d995d; background:#fff;} .m_btn.m_btn_tiny.btn-success:hover {border-color:#18c495; color:#18c495; background:#fff;} span.m_btn.m_btn_tiny.btn-success:hover {border-color:#5d995d; color:#5d995d; background:#fff;} .m_btn.active {color:#ffffff; border-color:var(--color-button-active); background:var(--color-button-active);} .m_btn.active:hover {border-color:var(--color-button-active-hover); background:var(--color-button-active-hover);} span.m_btn.active:hover {color:#ffffff; border-color:var(--color-button-active); background:var(--color-button-active);} .m_btnRound {display:inline-block; height:20px; padding:0 15px; margin:2px 4px; color:#fff; font-size:12px; text-align:center; border:1px solid #003880; background-color:#003880; border-radius:10px;} .m_btnRound:focus, .m_btnRound:active {outline:none !important; box-shadow:none !important;} .m_btnRound:hover {border:1px solid #1dbae1; background-color:#1dbae1;} .btn_deleteable {display:inline-block; line-height:1; margin:0; font-size:14px; text-align:center; border:1px solid #c9ccd0; border-radius:8px; color:#2e2e2e; background:#fff; font-weight:400; transition:0.2s; vertical-align:middle; padding:0 28px 0 12px; height:24px; line-height:22px; position:relative;} .btn_deleteable strong {font-weight:400; display:inline-block; vertical-align:top;} .btn_deleteable button {text-indent:-9999px; display:inline-block; border:none; background:none; outline:none; margin-left:5px; width:24px; height:24px; transition:0.2s; position:absolute; right:0; top:0; background:url(../images/icon/icon_close_small.png) no-repeat center center;} .btn_deleteable button:hover {background:url(../images/icon/icon_close_small_hover.png) no-repeat center center;} /* *********************** btn *********************** */ /* primary */ .m_btn.btn-primary {color:#ffffff; border-color:var(--color-button-active); background:var(--color-button-active);} .m_btn.btn-primary:hover {border-color:var(--m_btn-primary-border-hover); background:var(--m_btn-primary-bg-hover);} span.m_btn.btn-primary:hover{border-color:var(--color-button-active); background:var(--color-button-active);} /* paas용 primary */ .paas_container .m_btn.btn-primary, .pop_pass .m_btn.btn-primary, .pass_style .m_btn.btn-primary {color:#ffffff; border-color:var(--color-button-active); background:var(--color-button-active);} .paas_container .m_btn.btn-primary:hover, .pop_pass .m_btn.btn-primary:hover, .pass_style .m_btn.btn-primary:hover {border-color:#123a93; background:#123a93;} .paas_container span.m_btn.btn-primary:hover, .pop_pass span.m_btn.btn-primary:hover, .pass_style span.m_btn.btn-primary:hover {border-color:#1559ef; background:#1559ef;} /* 탭 버튼 강조 */ .m_btn.btn-gray {color:var(--m_btn-gray-color); border-color:var(--m_btn-gray-border); background:var(--m_btn-gray-bg);} .m_btn.btn-gray:hover {color:var(--m_btn-gray-color-hover); border-color:var(--m_btn-gray-border-hover); background:var(--m_btn-gray-bg-hover);} .m_btn.btn-gray:hover i {color:#fff !important;} span.m_btn.btn-gray:hover {color:var(--m_btn-gray-color); border-color:var(--m_btn-gray-border); background:var(--m_btn-gray-bg);} span.m_btn.btn-gray:hover i.color_success {color:#1da363 !important;} span.m_btn.btn-gray:hover i.color_fail {color:#ed6e5b !important;} span.m_btn.btn-gray:hover i.color_test {color:#368bf4 !important;} /* success */ .m_btn.btn-success {color:var(--m_btn-success-color); border-color:var(--m_btn-success-border); background:var(--m_btn-success-bg);} .m_btn.btn-success:hover {border-color:var(--m_btn-success-border-hover); background:var(--m_btn-success-bg-hover);} span.m_btn.btn-success:hover{color:var(--m_btn-success-color); border-color:var(--m_btn-success-border); background:var(--m_btn-success-bg);} /* info */ .m_btn.btn-info {color:var(--m_btn-info-color); border-color:var(--m_btn-info-border); background:var(--m_btn-info-bg);} .m_btn.btn-info:hover {border-color:var(--m_btn-info-border-hover); background:var(--m_btn-info-bg-hover);} span.m_btn.btn-info:hover {color:var(--m_btn-info-color); border-color:var(--m_btn-info-border); background:var(--m_btn-info-bg);} /* warning */ .m_btn.btn-warning {color:var(--m_btn-warning-color); border-color:var(--m_btn-warning-border); background:var(--m_btn-warning-bg);} .m_btn.btn-warning:hover {border-color:var(--m_btn-warning-border-hover); background:var(--m_btn-warning-bg-hover);} span.m_btn.btn-warning:hover{color:var(--m_btn-warning-color); border-color:var(--m_btn-warning-border); background:var(--m_btn-warning-bg);} /* danger */ .m_btn.btn-danger {color:var(--m_btn-danger-color); border-color:var(--m_btn-danger-border); background:var(--m_btn-danger-bg);} .m_btn.btn-danger:hover {border-color:var(--m_btn-danger-border-hover); background:var(--m_btn-danger-bg-hover);} span.m_btn.btn-danger:hover {color:var(--m_btn-danger-color); border-color:var(--m_btn-danger-border); background:var(--m_btn-danger-bg);} /* dark */ .m_btn.btn-dark {color:var(--m_btn-dark-color); border-color:var(--m_btn-dark-border); background:var(--m_btn-dark-bg);} .m_btn.btn-dark:hover {border-color:var(--m_btn-dark-border-hover); background:var(--m_btn-dark-bg-hover);} span.m_btn.btn-dark:hover {color:var(--m_btn-dark-color); border-color:var(--m_btn-dark-border); background:var(--m_btn-dark-bg);} /* copy */ .m_btn.btn_copy {color:var(--m_btn-copy-color); border-color:var(--m_btn-copy-border); background:var(--m_btn-copy-bg);} .m_btn.btn_copy:hover {color:var(--m_btn-copy-color-hover); border-color:var(--m_btn-copy-border-hover); background:var(--m_btn-copy-bg-hover);} span.m_btn.btn_copy:hover {color:var(--m_btn-copy-color); border-color:var(--m_btn-copy-border); background:var(--m_btn-copy-bg);} .m_btn.btn_copy.btn-success {color:#ffffff; border-color:var(--color-button-active); background:var(--color-button-active);} /* delete */ .m_btn.btn-delete {color:var(--m_btn-delete-color); border-color:var(--m_btn-delete-border); background:var(--m_btn-delete-bg);} .m_btn.btn-delete:hover {color:var(--m_btn-delete-color-hover); border-color:var(--m_btn-delete-border-hover); background:var(--m_btn-delete-bg-hover);} span.m_btn.btn-delete:hover {color:var(--m_btn-delete-color); border-color:var(--m_btn-delete-border); background:var(--m_btn-delete-bg);} /* paas용 delete */ .paas_container .m_btn.btn-delete, .pop_pass .m_btn.btn-delete, .pass_style .m_btn.btn-delete {color:#fff; border-color:#f64747; background:#f64747;} .paas_container .m_btn.btn-delete:hover, .pop_pass .m_btn.btn-delete:hover, .pass_style .m_btn.btn-delete:hover {border-color:#d03e3e; background:#d03e3e; color:#fff;} .paas_container span.m_btn.btn-delete:hover, .pop_pass span.m_btn.btn-delete:hover, .pass_style span.m_btn.btn-delete:hover {color:#fff; border-color:#d03e3e; background:#d03e3e;} /* paas 버튼 적용 */ .paas_container .m_btn.btn-primary, .paas_container .m_btn.btn-success, .paas_container .m_btn.btn-info, .paas_container .m_btn.btn-warning, .paas_container .m_btn.btn-danger, .paas_container .m_btn.btn-dark, .paas_container .m_btn.btn-delete, .pop_pass .m_btn.btn-primary, .pop_pass .m_btn.btn-success, .pop_pass .m_btn.btn-info, .pop_pass .m_btn.btn-warning, .pop_pass .m_btn.btn-danger, .pop_pass .m_btn.btn-dark, .pop_pass .m_btn.btn-delete, .pass_style .m_btn.btn-primary, .pass_style .m_btn.btn-success, .pass_style .m_btn.btn-info, .pass_style .m_btn.btn-warning, .pass_style .m_btn.btn-danger, .pass_style .m_btn.btn-dark, .pass_style .m_btn.btn-delete {font-weight:600;} /* btn_icon */ .btn_icon {display:inline-flex; justify-content:center; align-items:center; width:40px; height:32px; line-height:32px; padding:0; margin:0; position:relative; font-size:16px; border-radius:8px; background:#fff; text-align:center; border:1px solid #c9ccd0; transition:0.2s; vertical-align:middle; color:#2e2e2e;} .btn_icon:hover, .btn_icon.active {color:#2b58e6; background:#f0f5ff;} .btn_icon + .btn_icon {margin-left:5px;} .btn_icon i {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); line-height:1;} .btn_icon:disabled {color:#ababab; border-color:#e8ebec;} .btn_icon.btn_icon_small {width:24px; height:24px; font-size:13px;} .btn_icon.btn_iconRound:hover {color:#5b95ff; border-color:#5b95ff; background:#fff;} table .btn_icon {height:25px; font-size:14px;} .tui-grid-table .btn_icon {height:20px; width:30px; font-size:14px;} .tui-grid-table input[type="checkbox"] {display:inline-block;} .delete_btn {display:inline-flex; justify-content:center; align-items:center; width:30px; height:30px; line-height:30px; padding:0; margin:0; position:relative; font-size:16px; background:none; text-align:center; border:none; border-radius:2px; transition:0.2s; vertical-align:middle; color:#909aa5;} .delete_btn:hover {color:#ed6e5b; background:none;} /* 아이콘만 있는 버튼 */ .icon_btn {display:inline-flex; align-items:center; justify-content:center; vertical-align:top; width:30px; height:30px; padding:0; margin:0; position:relative; border:0; outline:0; font-size:16px; background-color:transparent; background-position:center center; background-repeat:no-repeat; transition:0.2s;} .icon_btn:hover, .icon_btn.active {background-color:transparent; background-position:center center; background-repeat:no-repeat; color:#1559ef;} .icon_btn:after {display:block; line-height:1; font-family:"IcoFont"; font-size:16px; text-indent:0; transition:0.2s;} .icon_btn[disabled] {background-color:#e9edf1 !important; color:#000 !important;} .mg_search > button:after {font-family:"IcoFont";} .icon_btn:hover:after, .icon_btn.active:after {color:#26a1ff;} .icon_btn.icon_setting:after {content:"\ef39";} .icon_btn.icon_sort:after {content:"\efee";} .icon_btn.icon_search:after {content:"\ed11";} .icon_btn.icon_edit:after {content:"\ebf6";} .icon_btn.icon_edit2:after {content:"\ebf9";} .icon_btn.icon_delete:after {content:"\f2ed"; font-family:"Font Awesome 6 Free"; font-weight:900; color:#8d9ba6;} .icon_btn.icon_delete:hover:after {color:#ed6e5b;} .tui-grid-table .icon_btn.icon_delete {position:relative; left:-5px;} .tui-grid-table .icon_btn {} .icon_btn.icon_add:after {content:"\efc2";} .icon_btn.icon_link:after {content:"\ef70";} .icon_btn.icon_copy:after {content:"\ede9";} .icon_btn.icon_export:after {content:"\efe3";} .icon_btn.icon_share:after {content:"\efe5";} .icon_btn.icon_cut:after {content:"\eef5";} .icon_btn.icon_download:after {content:"\ef08";} .icon_btn.icon_upload:after {content:"\f01c";} .icon_btn.icon_view:after {content:"\ed11";} .icon_btn.icon_result:after {content:"\ef21";} .icon_btn.icon_unzip:after {content:"\ef35";} .icon_btn.icon_reload:after {content:"\ec7f"; transform:scaleX(-1); font-size:12px;} .icon_btn.icon_prev:after {content:"\ea9d";} .icon_btn.icon_next:after {content:"\eaa0";} .icon_btn.icon_report:after {display:none;} .icon_btn.icon_check:after {content:"\eed6";} .icon_btn.icon_close:after {content:"\eee4";} .icon_btn.icon_cancel:after {content:"\eee4";} .icon_btn.icon_eye:after {content:"\f06e"; font-family:"Font Awesome 6 Free"; font-weight:900;} .icon_btn.icon_eye_slash:after {content:"\f070"; font-family:"Font Awesome 6 Free";} .icon_btn.icon_play:after {content:"\eca6";} .icon_btn.icon_stop:after {content:"\ecb1";} .icon_btn.icon_save:after {content:"\ee00";} .icon_btn.icon_refresh:after {content:"\efd1";} .icon_btn.icon_undo:after {content:"\efd4";} .icon_btn.icon_redo:after {content:"\efd4"; transform:scaleX(-1);} .icon_btn.icon_history:after {content:"\ef46";} .icon_btn.icon_share:after {content:"\efe5";} .icon_btn.icon_close_side:after {content:"\eab5";} .icon_btn.icon_graph:after {content:"\e981";} .icon_btn.icon_preview:after {content:"\ed13";} .icon_btn.icon_run:after {content:"\eca6";} .icon_btn.icon_drag:after {content:"\ef0a";} .icon_btn.icon_calendar:after {content:"\eecd";} .icon_btn.icon_setting:after {content:"\ef3a";} .icon_btn.icon_paste {background-image:url(../images/icon/icon_black_paste.png);} .icon_btn.icon_paste:hover {background-image:url(../images/icon/icon_active_paste.png);} .icon_btn.icon_expand {background-image:url(../images/icon/icon_black_expand.png);} .icon_btn.icon_areaDiv {background-image:url(../images/icon/icon_black_areaDiv.png);} .icon_btn.icon_areaDiv:hover, .icon_btn.icon_areaDiv.active {background-image:url(../images/icon/icon_active_areaDiv.png);} .icon_btn.icon_compareDiv {background-image:url(../images/icon/icon_black_compareDiv.png);} .icon_btn.icon_compareDiv:hover, .icon_btn.icon_compareDiv.active{background-image:url(../images/icon/icon_active_compareDiv.png);} .icon_btn.icon_report {background-image:url(../images/icon/icon_black_report.png);} .icon_btn.icon_report:hover, .icon_btn.icon_report.active {background-image:url(../images/icon/icon_active_report.png);} .icon_btn.icon_folder {background-image:url(../images/icon/icon_black_folder.png);} .icon_btn.icon_folder:hover {background-image:url(../images/icon/icon_active_folder.png);} .icon_btn.icon_disconnect {background-image:url(../images/icon/icon_black_disconnect.png);} .icon_btn.icon_disconnect:hover {background-image:url(../images/icon/icon_active_disconnect.png);} .icon_btn.icon_popup {background-image:url(../images/icon/icon_black_popup.png);} .icon_btn.icon_popup:hover {background-image:url(../images/icon/icon_active_popup.png);} .icon_btn.icon_batch1 {background-image:url(../images/icon/icon_batch2.png);} .icon_btn.icon_batch2 {background-image:url(../images/icon/icon_batch2.png); animation:move_batch infinite 3s linear;} .icon_btn.icon_detail {background-image:url(../images/icon/icon_black_detail.png);} .icon_btn.icon_search2 {background-image:url(../images/icon/icon_black_search2.png);} /* .icon_btn.icon_expand:after, */ .icon_btn.icon_areaDiv:after, .icon_btn.icon_compareDiv:after, .icon_btn.icon_areaDiv:after, .icon_btn.icon_report:after, .icon_btn.icon_batch1:after, .icon_btn.icon_batch2:after, .icon_btn.icon_disconnect:after, .icon_btn.icon_detail:after, .icon_btn.icon_folder:after, .icon_btn.icon_paste:after {display:none;} @keyframes move_batch { 0% {transform:rotate(0);} 100% {transform:rotate(360deg);} } /* 투명 버튼 */ .btn_transparent {padding:0 10px; background:transparent; border:none; transition:0.2s; height:30px; line-height:30px; border-radius:5px; display:inline-block; vertical-align:middle;} .btn_transparent:hover {background:#e1e1e1;} .btn_transparent i {margin-left:5px;} /* dropdown */ .m_btn.dropdown-toggle::after {display:inline-block; margin-left:.255em; vertical-align:.255em; content:""; border:none; width:16px; height:12px; --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23004bb6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-color:transparent; background-image:var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat:no-repeat; background-position:center center; background-size:16px 12px; position:relative; top:0; vertical-align:middle;} .m_btn.dropdown-toggle:hover::after {--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23004bb6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");} .m_btn.dropdown-toggle.btn-primary::after, .m_btn.dropdown-toggle.btn-success::after, .m_btn.dropdown-toggle.btn-info::after, .m_btn.dropdown-toggle.btn-warning::after, .m_btn.dropdown-toggle.btn-danger::after, .m_btn.dropdown-toggle.btn-dark::after {--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");} /* 사각 버튼 */ .t_btn {display:inline-block; vertical-align:middle; line-height:16px; padding:0 7px; margin:0px; color:#fff; font-size:11px; border-radius:3px; background:#0c8ce6; transition:0.2s; border:1px solid #0c8ce6;} .t_btn + .t_btn {margin-left:1px;} .t_btn:hover {color:#fff; background:#00b3ee; border-color:#00b3ee;} .t_btn.btn_border {background:#f4fcff; color:#3d6bdf; border-color:#a5c6f7;} .t_btn.btn_border:hover {color:#fff; background:#00b3ee; border-color:#00b3ee;} .t_btn:disabled, .t_btn.disabled {color:#fff; border-color:#cbcaca !important; background-color:#cbcaca !important; cursor:default;} .t_btn.btn_border:disabled, .t_btn.btn_border.disabled {color:#cbcaca; border-color:#cbcaca !important; background-color:#fff !important; cursor:default;} .tui-grid-table .t_btn {margin:0;} .btn_line {color:#00980e; border-color:#00980e;} .btn_line:hover {background:#F2F2F2;} /* color btn */ .btn_white {color:#000; border-color:#232427; background-color:#ffffff;} .btn_white:hover{color:#000; border-color:#000000; background-color:#000000;} .btn_gray {color:#fff; border-color:#8a8a8a; background-color:#8a8a8a;} .btn_gray:hover {color:#fff; border-color:#666666; background-color:#666666;} .btn_navy {color:#fff; border-color:#142160; background-color:#142160;} .btn_navy:hover {color:#fff; border-color:#070b21; background-color:#070b21;} .btn_red {color:#fff; border-color:#D41900; background-color:#D41900;} .btn_red:hover {color:#fff; border-color:#ff0000; background-color:#ff0000;} .btn_blue {color:#fff; border-color:#0c8ce6; background-color:#0c8ce6;} .btn_blue:hover {color:#fff; border-color:#3035af; background-color:#3035af;} /*=========================================================================================================================== 공통 레이아웃 =============================================================================================================================*/ /* 상단영역 */ header.header {background:#fff; width:100%; height:85px; border-bottom:1px solid #ebebeb; position:relative; transition:0.3s; z-index:20;} /* 정보성 영역 */ header.header .header_top {height:44px; border-bottom:1px solid #ebebeb; position:relative; z-index:6; background:#fff;} header.header .header_top h1.logo {display:inline-block; padding:0; margin:9px 0 0 16px; width:auto; height:26px;} header.header .header_top h1.logo a {display:inline-block; height:26px;} header.header .header_top h1.logo a img {vertical-align:top; width:auto; height:26px;} header.header .header_top h1.logo strong {font-size:14px; font-weight:700; color:#333; vertical-align:top; line-height:25px; height:23px; display:inline-block; margin-left:5px; padding:0 18px; color:#fff; background:var(--color-button-active); border-radius:12px;} /* 상단 기능버튼 영역 */ header.header .header_top .user_info {font-size:13px; color:#000; display:inline-block; float:right; height:44px; line-height:42px; padding-right:25px;} header.header .header_top .user_info strong {color:#1fa0dc; font-weight:400;} header.header .header_top ul.top_function {display:inline-block; float:right; padding:0; margin:0; padding-right:15px;} header.header .header_top ul.top_function > li {display:inline-block; float:left; margin-left:0; line-height:44px; position:relative;} header.header .header_top ul.top_function > li button {border:none; outline:none; padding:0 10px; background:none; color:#303030; transition:0.2s; font-size:18px; margin-top:0;} header.header .header_top ul.top_function > li button:hover, header.header .header_top ul.top_function > li button:focus, header.header .header_top ul.top_function > li button.active {color:#54b9ff;} header.header .header_top ul.top_function > li button#showPanelNotice {position:relative;} header.header .header_top ul.top_function > li button#showPanelNotice span {background:#f96f70; padding:0 5px; border-radius:10px; line-height:12px; font-size:10px; color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:-9px 0 0 13px;} header.header .header_top ul.top_function > li button#showPanelSolution {position:relative; z-index:2;} header.header .header_top ul.top_function > li button#showPanelSolution ~ .pulse-ring {display:block; border-radius:38px; height:38px; width:38px; animation:animation-pulse 3.5s ease-out; animation-iteration-count:infinite; opacity:0; border-width:1px; border-style:solid; border-color:#999; position:absolute; left:0; top:3px; background:#d9d9d9;} header.header .header_top ul.top_function > li button#showPanelSolution:hover ~ .pulse-ring, header.header .header_top ul.top_function > li button#showPanelSolution:focus ~ .pulse-ring {border-color:#54b9ff; background:#90d2ff;} @-webkit-keyframes animation-pulse { 0% {-webkit-transform:scale(0.1, 0.1); opacity:0;} 60% {-webkit-transform:scale(0.1, 0.1); opacity:0;} 65% {opacity:1;} 100% {-webkit-transform:scale(1, 1); opacity:0;} } @keyframes animation-pulse { 0% {-webkit-transform:scale(0.1, 0.1); opacity:0;} 60% {-webkit-transform:scale(0.1, 0.1); opacity:0;} 65% {opacity:1;} 100% {-webkit-transform:scale(1, 1); opacity:0;} } /* 제안기능 */ header.header .header_top ul.top_function > li .dropdown_solution {padding:20px 15px; background:#fff; border-radius:15px; position:absolute; right:0; top:100%; box-shadow:0 5px 20px rgba(0,0,0,0.2); min-width:300px; min-height:100px; line-height:1.1;} ul.top_function > li .dropdown_solution h4 {font-size:16px; font-weight:700; line-height:1; padding:0 10px 8px; border-bottom:1px solid #e2e2e2; margin:0;} ul.top_function > li .dropdown_solution ul {padding:0 10px; margin:0;} ul.top_function > li .dropdown_solution ul li {padding:0; margin:20px 0 0; list-style:none;} ul.top_function > li .dropdown_solution ul li a {display:block; font-size:14px; color:#828282; transition:0.2s;} ul.top_function > li .dropdown_solution ul li a:hover {color:#54b9ff;} ul.top_function > li .dropdown_solution ul li a img {} ul.top_function > li .dropdown_solution ul li a span {display:block; margin:8px 0 0; line-height:1.3;} /* 사용자 정보 */ header.header .header_top ul.top_function > li button.dropdown-toggle::after {display:none;} header.header .header_top ul.top_function > li .user_info_area {padding:20px 25px; background:#fff; border-radius:15px; position:absolute; right:0; top:100%; box-shadow:0 5px 20px rgba(0,0,0,0.2); min-width:300px; min-height:280px; text-align:center; line-height:1.1;} .user_info_area .user_initials {width:45px; height:45px; border-radius:50%; overflow:hidden; position:relative; display:block; background:#0041b2; margin:0 auto; text-align:center; line-height:49px; font-weight:300; font-size:24px; color:#fff; text-transform:uppercase;} .user_info_area .user_nm {display:block; margin-top:15px; line-height:18px;} .user_info_area .user_nm strong {font-size:16px; font-weight:700; color:#000; display:block;} .user_info_area .user_nm span {font-size:14px; color:#545454; display:block; font-weight:100; margin-top:5px;} .user_info_area p.user_email {font-size:14px; margin:12px 0 0;} .user_info_area p.user_email a {color:#000000; font-weight:400; transition:0.2s;} .user_info_area p.user_email a:hover, .user_info_area p.user_email a:focus {color:#54b9ff;} header.header .header_top ul.top_function > li .user_info_area a.btn_view_profile {display:block; width:100%; font-size:14px; font-weight:700; background:#fff; line-height:25px; height:25px; border-radius:13px; transition:0.2s; border:none; outline:none; color:#000; margin:13px 0 0; border:1px solid #dadada; font-weight:400;} header.header .header_top ul.top_function > li .user_info_area a.btn_view_profile:hover, header.header .header_top ul.top_function > li .user_info_area a.btn_view_profile:focus {background:#54b9ff; color:#fff; border-color:#54b9ff;} .user_info_area ul.my_function {padding:0 0 0 10px; margin:10px 0 0; font-size:14px; color:#000;} .user_info_area ul.my_function li {padding:0; margin:0; list-style:none; line-height:25px;} .user_info_area ul.my_function li a {display:block; color:#000; font-weight:400; transition:0.2s; text-align:left; font-size:12px;} .user_info_area ul.my_function li a:hover, .user_info_area ul.my_function li a:focus {color:#54b9ff;} .user_info_area ul.my_function li a i {font-size:18px; margin-right:10px;} header.header .header_top ul.top_function > li .dropdown-menu > li {display:block;} header.header .header_top ul.top_function > li .top_folding {margin-left:10px;} header.header .header_top ul.top_function > li .top_folding button {padding:0 3px; margin:0; font-size:17px;} header.header .header_top ul.top_function > li .top_folding button i {font-weight:700;} /* 기능 영역 */ header.header .header_bottom {position:relative; height:41px; z-index:4; background:#fff;} header.header .header_bottom:after {content:""; display:block; width:100%; height:0; clear:both; float:none;} header.header .header_bottom button#menu_toggle {width:50px; height:41px; position:absolute; left:0; top:0; border:none; outline:none; transition:0.2s; background:url(../images/icon/icon_toggle.png) no-repeat center center;} header.header .header_bottom button#menu_toggle:hover {background:url(../images/icon/icon_toggle_hover.png) no-repeat center center;} header.header .header_bottom ul.page_location {display:inline-block; padding:0 0 0 67px; margin:0;} header.header .header_bottom ul.page_location li {font-size:15px; list-style:none; float:left; line-height:39px; padding:0; margin:0; padding-right:10px; margin-right:10px; position:relative;} header.header .header_bottom ul.page_location li:after {content:""; display:inline-block; width:6px; height:12px; background:url(../images/icon/icon_location_arrow.png) no-repeat center center; position:absolute; right:-3px; top:50%; transform:translate(0,-50%);} header.header .header_bottom ul.page_location li:last-child:after {display:none;} header.header .header_bottom ul.page_location li a {font-weight:400; color:#303030; display:inline-block; transition:0.2s;} header.header .header_bottom ul.page_location li a:hover, header.header .header_bottom ul.page_location li:last-child a {color:#005ee3; font-weight:700;} header.header .header_bottom ul.page_location li strong {font-weight:700; color:#005ee3;} header.header .header_bottom .header_bottom_function {position:absolute; right:0; top:0; padding-right:20px;} header.header .header_bottom .header_bottom_function button {border:none; outline:none; background:none; height:41px; line-height:41px; font-size:14px; transition:0.2s; color:#000; padding:0 20px;} header.header .header_bottom .header_bottom_function button:hover {color:#54b9ff;} header.header .header_bottom .header_bottom_function button i {margin-right:8px;} header.header .header_bottom .header_bottom_function button.btn_full_screen.active i:before {content:"\f422";} /* ********** 통합검색 ********** */ header.header .header_top button.top_search_toggle_btn {width:30px; height:23px; border:none; background:none; transition:0.2s; color:#000; margin:10px 0 0 10px; vertical-align:top; font-size:18px; text-align:center; outline:none; line-height:23px;} header.header .header_top button.top_search_toggle_btn:hover, header.header .header_top button.top_search_toggle_btn:focus, header.header .header_top button.top_search_toggle_btn:active {color:#54b9ff;} /* 통합검색 영역 */ header.header .top_search_area {display:block; position:fixed; left:0; top:-100%; width:100%; height:auto; padding:70px 40px 80px; background:#fff; z-index:5; transition:0.4s;} .top_search_area .search_con {padding:0; margin:0 auto; position:relative; width:100%; max-width:1000px;} .top_search_area .search_con button.btn_search {width:60px; height:60px; line-height:60px; background:none; transition:0.2s; border:none; outline:none; color:#000; position:absolute; left:0; top:0; text-align:left; font-size:34px;} .top_search_area .search_con button.btn_search:hover {color:#54b9ff;} .top_search_area .search_con input {width:100%; height:60px; line-height:60px; border:none; padding:0 40px 0 80px; color:#000; font-size:28px; font-weight:700;} .top_search_area .search_con input::placeholder {color:#999; font-weight:300;} .top_search_area .search_con .btn_clear {opacity:0; transition:all ease 0.2s; color:transparent; width:60px; height:60px; position:absolute; top:0; right:0; outline:none; border:none; background:url(../images/icon/icon_search_cancel.png) no-repeat center center; background-size:30px 30px;} .top_search_area .search_con input:focus ~ .btn_clear {opacity:1;} .top_search_area .search_link_area {margin:80px auto 0; width:100%; max-width:1000px;} .top_search_area h3.fast_link_title {font-size:16px; line-height:30px; color:#8ba6ff; font-weight:700; margin:0 0 13px;} .top_search_area ul.top_fast_link {padding:0; margin:0;} .top_search_area ul.top_fast_link li {padding:0; margin:0 0 8px; list-style:none;} .top_search_area ul.top_fast_link li:last-child {margin-bottom:0;} .top_search_area ul.top_fast_link li a {display:block; padding:5px 10px 5px 38px; position:relative; font-size:16px; line-height:20px; color:#000; transition:0.2s; background:#fff; min-height:30px; font-weight:700;} .top_search_area ul.top_fast_link li a:before {content:"\ea94"; font-family:"Icofont"; display:inline-block; width:38px; height:30px; text-align:center; line-height:29px; color:#8ca7ff; font-size:20px; line-height:30px; position:absolute; left:0; top:0; transition:0.3s;} .top_search_area ul.top_fast_link li a:hover {background:#f4f4f4;} .top_search_area ul.top_fast_link li a:hover:before {transform:rotate(-45deg);} /* 다이컴 수정 */ .top_search_area .ts_item_info {display:inline-block; font-size:15px; font-weight:700; margin-right:10px; vertical-align:middle;} .top_search_area .ts_item_info i {margin-right:5px;} #div_emrOPtion.top_search_area .m_radio, #div_dicomOPtion.top_search_area .m_check {position:relative; top:3px;} .m_check + .ts_item_info, .m_radio + .ts_item_info, .form_control + .ts_item_info, .form-control + .ts_item_info {margin-left:30px;} /* 다이컴 줌인 / 줌아웃 */ .div_dicom_view {position:relative;} .div_dicom_view .buttons {position:absolute; right:20px; top:20px; z-index:10;} .div_dicom_view .buttons .btn {width:25px; height:25px; line-height:23px; position:relative; text-align:center; text-indent:-9999px; opacity:0; transition:0.2s;} .div_dicom_view .buttons .btn:before {content:""; display:inline-block; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:16px; text-indent:0;} .div_dicom_view:hover .buttons .btn {opacity:1;} .div_dicom_view .buttons #zoomInButton.btn:before {content:"\2b";} .div_dicom_view .buttons #zoomOutButton.btn:before {content:"\f068";} .div_dicom_view .buttons #resetButton.btn:before {content:"\f111"; font-size:7px;} /* 카탈로그 상세 줌인 / 줌아웃 */ #assetDetailFile #splitFileView {position:relative;} #assetDetailFile #splitFileView .buttons {position:absolute; right:20px; top:64px; z-index:10;} #assetDetailFile #splitFileView .buttons .btn {width:25px; height:25px; line-height:23px; position:relative; text-align:center; text-indent:-9999px; opacity:0; transition:0.2s;} #assetDetailFile #splitFileView .buttons .btn:before {content:""; display:inline-block; font-family:"Font Awesome 6 Free"; font-weight:900; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:16px; text-indent:0;} #assetDetailFile #splitFileView:hover .buttons .btn {opacity:1;} #assetDetailFile #splitFileView .buttons #zoomInButton.btn:before {content:"\2b";} #assetDetailFile #splitFileView .buttons #zoomOutButton.btn:before {content:"\f068";} #assetDetailFile #splitFileView .buttons #resetButton.btn:before {content:"\f111"; font-size:7px;} header.header .header_con {position:relative; z-index:2;} /* 흐림효과 */ header.header .blur_filter {z-index:1; background:rgba(232,232,237,.4); position:fixed; opacity:0; top:0; right:0; bottom:0; left:0; width:100%; height:100%; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); visibility:hidden; transition:0.4s;} header.header .top_search_area.active {top:44px;} header.header .blur_filter.active {opacity:1; visibility:visible;} /* 게시판 검색 상단 */ .top_search_area .search_item {margin-right:6px;} .top_search_area .search_item select {min-width:100px;} .top_search_area .search_item label {font-size:14px; line-height:31px; display:inline-block; vertical-align:middle; margin:0 10px 0 0;} /*====================================== 공통 판넬 ========================================*/ .common_panel {background:#fff; position:fixed; right:-100%; top:44px; width:400px; height:calc(100vh - 44px); padding:25px; z-index:9; box-shadow:0 1px 35px rgba(0,0,0,0.15); transition:0.5s; overflow-y:auto;} .common_panel.active {right:0;} .common_panel::-webkit-scrollbar-track {background:rgba(255,255,255,0.0);} /*Track*/ .common_panel::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.0);} /*Handle*/ .common_panel:hover::-webkit-scrollbar-track {background:rgba(255,255,255,0.7);} /*Track*/ .common_panel:hover::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.15);} /*Handle*/ .common_panel:hover::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.3);} /* Handle on hover */ .common_panel button.btn_close {position:absolute; right:20px; top:20px; width:14px; height:14px; transition:0.2s; border:none; outline:none; opacity:0.5; padding:3.5px; background:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") no-repeat center center;} .common_panel button.btn_close:hover {opacity:1;} .common_panel h2.panel_title {font-size:18px; font-weight:700; line-height:25px; margin:10px 0;} .common_panel h2.panel_title span#noticeReadStatus {display:inline-block; margin-left:10px; font-weight:400;} .common_panel h2.panel_title span#noticeReadStatus strong {font-weight:400; display:inline-block; font-size:14px;} .common_panel h2.panel_title span#noticeReadStatus strong span#notReadNum {display:inline-block; color:#ff4069; margin-right:5px;} .common_panel h2.panel_title span#noticeReadStatus button#allAlarmReaded {display:inline-block; margin-left:10px;} /* 탭 */ .common_panel ul.panel_tab {padding:0; margin:0 0 10px; overflow:hidden; border-bottom:1px solid #e1e1e1; display:flex; justify-content:flex-start;} .common_panel ul.panel_tab li {padding:0; margin:0 20px 0 0; list-style:none;} .common_panel ul.panel_tab li button {color:#838383; font-size:15px; font-weight:400; line-height:40px; position:relative; display:block; padding:0 5px; border:none;} .common_panel ul.panel_tab li button.active, .common_panel ul.panel_tab li button:hover {color:#000; font-weight:700;} .common_panel ul.panel_tab li button.active:after, .common_panel ul.panel_tab li button.active:hover:after {content:""; display:block; width:100%; height:3px; transition:0.2s; background:#54b9ff; position:absolute; left:0; bottom:0;} .common_panel ul.panel_tab li a {color:#838383; font-size:15px; font-weight:400; line-height:40px; position:relative; display:block; padding:0 5px; border:none;} .common_panel ul.panel_tab li.active a, .common_panel ul.panel_tab li a:hover {color:#000; font-weight:700; border:none;} .common_panel ul.panel_tab li.active a:after, .common_panel ul.panel_tab li a:hover:after {content:""; display:block; width:100%; height:3px; transition:0.2s; background:#54b9ff; position:absolute; left:0; bottom:0;} /* 리스트 */ .common_panel ul.panel_lst {padding:0; margin:0;} .common_panel ul.panel_lst li {padding:25px 10px; margin:0; border-bottom:1px solid #e4e4e4; overflow:hidden; position:relative;} .common_panel ul.panel_lst li:last-child {border-bottom:none;} .common_panel ul.panel_lst li .p_lst_top {position:relative; font-size:12px; color:#969caa; margin-bottom:10px;} .common_panel ul.panel_lst li .p_lst_top span.fold {} .common_panel ul.panel_lst li .p_lst_top span.fold i {margin-right:3px;} .common_panel ul.panel_lst li .p_lst_top span.fold span.fold_nm {} .common_panel ul.panel_lst li .p_lst_top button.icon_btn {position:absolute; right:-10px; top:-2px; transition:0.2s; font-size:11px; opacity:0; height:20px; line-height:20px; width:25px; height:25px; line-height:25px; border-radius:13px; border:1px solid #d9d9d9; background:#fff; text-align:center; display:block; text-indent:2px;} .common_panel ul.panel_lst li .p_lst_top button.icon_btn:hover {background:#54b9ff; color:#fff; border-color:#54b9ff;} .common_panel ul.panel_lst li:hover .p_lst_top button.icon_btn {opacity:1;} .common_panel ul.panel_lst li .p_lst_top button.icon_btn.delete_plst {text-indent:1px;} .common_panel ul.panel_lst li a {display:block; transition:0.2s; font-size:16px; color:#000; line-height:20px; margin:0px 0 5px; width:100%; word-break:keep-all;} .common_panel ul.panel_lst li a:hover {color:#54b9ff;} .common_panel ul.panel_lst li p {font-size:13px; color:#666; width:100%; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:18px; max-height:36px; word-break:keep-all; margin:0;} .common_panel.common_solution ul.panel_lst li {display:flex; justify-content:space-between;} .common_panel.common_solution ul.panel_lst li a.img_solution {width:60px; height:60px; border:1px solid #e1e1e1; border-radius:10px; overflow:hidden; margin-right:14px; text-align:center; position:relative;} .common_panel.common_solution ul.panel_lst li a.img_solution img {width:50px; height:auto; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} .common_panel.common_solution ul.panel_lst li div.txt_solution {width:calc(100% - 76px);} .common_panel.common_solution ul.panel_lst li div.txt_solution a {margin-bottom:10px;} .common_panel.common_solution ul.panel_lst li div.txt_solution p {overflow:hidden; text-overflow:inherit; display:block; max-height:none;} /* nprogress */ #nprogress .bar {background:#337ab7;} #nprogress .peg {box-shadow:0 0 10px #1ABB9C, 0 0 5px #1ABB9C} #nprogress .spinner-icon {border-top-color:#1ABB9C; border-left-color:#1ABB9C} /* ************************* 공통 레이아웃 ************************* */ /* 좌측영역 */ .container-fluid.body .col-md-3.left_col {background:var(--color-main1); height:calc(100vh - 85px); transition:0.3s;} /* 우측영역 */ body .container-fluid.body .right_col {background:#f2f3f6; height:calc(100vh - 85px); min-height:calc(100vh - 85px) !important; overflow:auto; transition:0.3s; position:relative; z-index:9;} /* 스크롤바 라이브러리 */ .left_col .mCSB_scrollTools {width:6px} .left_col .mCSB_dragger {max-height:400px !important} /* ************************* 상단영역 접혔을 경우 ************************* */ .main_container.folding header.header {margin-top:-44px;} .container-fluid.body .main_container.folding .col-md-3.left_col {height:calc(100vh - 41px);} body .container-fluid.body .main_container.folding .right_col {height:calc(100vh - 41px); min-height:calc(100vh - 41px) !important;} /* ************************* 좌측 메뉴 공통 ************************* */ ul.nav.side-menu > li.nav-item > a.nav-link {padding:0; text-align:center; display:block; height:40px; line-height:39px;} ul.nav.side-menu li a i {font-size:18px !important; text-align:center; width:100% !important; margin-bottom:0} ul.nav.child_menu {background:#e2ecf6;} ul.nav.child_menu li a {display:block; padding:9px 14px 9px 29px; font-weight:400; font-size:11px; text-align:left; color:#505050; font-size:14px; position:relative;} ul.nav.child_menu li a:hover {color:#0445ad;} ul.nav.child_menu li.active > a span.fa {transform:rotate(180deg);} ul.nav.child_menu .child_menu li a {padding:8px 14px 8px 28px; color:#8f8f8f;} ul.nav.child_menu .child_menu li a:hover {color:#0445ad;} ul.nav.side-menu > li.nav-item > h2 {color:#000; position:absolute; padding:11px 14px 12px; left:50px; top:0; margin:0; display:none; min-height:40px; width:250px;} ul.nav.side-menu > li.nav-item.active > h2 {background:var(--color-main1) !important; color:#fff;} .nav-sm ul.nav.side-menu > li.nav-item > h2 {display:none; background:var(--color-main1); color:#fff; border-radius:0 20px 0 0; box-shadow:5px 5px 10px rgba(0,0,0,0.2);} .nav-md ul.nav.side-menu > li.nav-item > h2 {display:block !important;} /* ************************* nav-sm:좌측 접혔을 경우 ************************* */ .nav-sm .container-fluid.body .col-md-3.left_col {width:50px; padding:0; z-index:15; position:absolute} .nav-sm .container-fluid.body .col-md-3.left_col.menu_fixed {position:fixed; height:100%} .nav-sm .container-fluid.body .col-md-3.left_col .mCSB_container, .nav-sm .container-fluid.body .col-md-3.left_col .mCustomScrollBox {overflow:visible} .nav-sm .hidden-small {visibility:hidden} .nav-sm .menu_section ul.side-menu > li > ul.nav.child_menu {left:50px; top:40px; position:absolute; width:250px; z-index:4000; background:#e2ecf7; display:none; height:auto; overflow-y:auto; overflow-x:hidden; z-index:2; max-height:400px; overflow-y:auto;} .nav-sm .menu_section ul.side-menu > li:hover > ul.nav.child_menu.active {display:block !important;} .nav-sm .menu_section ul.side-menu > li > ul.nav.child_menu li {padding:0;} /* 좌측메뉴가 화면 밖으로 넘어갈 시 */ .nav-sm ul.nav.side-menu > li.nav-item.active.revers > h2 {border-radius:0 0 20px 0;} .nav-sm ul.nav.side-menu > li.nav-item.active.revers > ul.nav.child_menu {top:auto; bottom:40px;} .nav-sm .nav.child_menu li.active > a, .nav-sm .nav.side-menu li.active-sm > a {color:#0445ad;} .nav-sm ul.nav.child_menu ul, .nav-sm .nav.side-menu li.active-sm ul ul {position:static; width:250px; background:none} .nav-sm .nav.child_menu li.active .child_menu {background:#e2ecf6;} .nav-sm > .nav.side-menu > li.active-sm > a {color:#1ABB9C !important} .nav-sm .nav.side-menu li a i.toggle-up {display:none !important} /* menu_section */ .menu_section {margin-bottom:35px; -ms-overflow-style:none; /* IE and Edge */ scrollbar-width:none; /* Firefox */} .menu_section::-webkit-scrollbar {display:none; /* Chrome, Safari, Opera*/ width:0px; height:0px;} .nav-md .menu_section {width:299px; overflow-x:hidden; overflow-y:auto; height:calc(100vh - 85px); padding:0;} .nav-md .menu_section:before {content:""; display:block; width:250px; height:100%; background:#fff; position:absolute; left:50px; top:0;} .menu_section h3 {padding-bottom:15px; color:#fff; text-transform:uppercase; letter-spacing:.5px; font-weight:bold; font-size:11px; margin-bottom:0; margin-top:0; text-align:center; border-bottom:1px solid #d4dadc;} .menu_section > ul {padding-top:10px} .main_menu .label {line-height:11px; margin-top:4px;} .main_menu span.fa {float:right; text-align:center; margin-top:5px; font-size:12px; min-width:inherit; color:#bbbbbb;} .main_menu li li.nav-item.active span.fa {color:#5587ce;} .active a span.fa {text-align:right !important; margin-right:4px} .nav-sm .menu_section {margin:0} .nav-sm .menu_section span.fa, .nav-sm .menu_section h3 {display:none} .nav-sm .menu_section .child_menu span.fa {display:block} .nav-sm li li span.fa {display:inline-block} .nav-sm .container-fluid.body .right_col {padding:10px 20px 0; margin-left:50px;} /* ************************* nav-md:좌측 펼쳐졌을 경우 ************************* */ .nav-md .container-fluid.body .col-md-3.left_col {width:50px; padding:0; position:absolute; display:-ms-flexbox; display:flex; z-index:10;} .nav-md .container-fluid.body .col-md-3.left_col.menu_fixed {position:fixed} .nav-md .container-fluid.body .right_col {padding:10px 20px 0; margin-left:299px;} .nav-md .container-fluid.body ul.side-menu li.nav-item.active > .child_menu {display:block !important; width:250px; box-shadow:none;} .nav-md .container-fluid.body ul.side-menu > li.nav-item.active > .child_menu {position:relative; left:50px; top:0; max-height:calc(100vh - 85px); overflow-y:auto; overflow-x:hidden;} .nav-md .container-fluid.body .main_container.folding ul.side-menu > li.nav-item.active > .child_menu {top:41px; min-height:calc(100vh - 41px);} .nav-sm .container-fluid.body .main_container.folding .menu_section ul.side-menu > li.nav-item.active > .child_menu {top:41px; height:calc(100vh - 41px);} .nav-md .container-fluid.body ul.side-menu > li.nav-item:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} .nav-md .container-fluid.body ul.side-menu > li.nav-item > a.nav-link {width:50px; height:40px; float:left;} .nav-md .container-fluid.body ul.side-menu > li.nav-item > a.nav-link span {display:none;} @media ( max-width:991px) { .nav-md .container-fluid.body .right_col, .nav-md .container-fluid.body .top_nav {width:100%; margin:0} .nav-md .container-fluid.body .col-md-3.left_col {display:none} .nav-md .container-fluid.body .right_col {width:100%; padding-right:0} .right_col {padding:10px !important} } @media ( max-width:1200px) { .x_title h2 {width:62%; font-size:17px} .tile, .graph {zoom:85%; height:inherit} } @media ( max-width:1270px) and (min-width:192px) { .x_title h2 small {display:none} } .container {width:100%; padding:0} .main_container .top_nav {display:block;} /* page-title */ .page-title {width:100%; height:65px; padding:10px 0} .page-title .title_left {width:45%; float:left; display:block} .page-title .title_left h3 {margin:9px 0} .page-title .title_right {width:55%; float:left; display:block} .page-title .title_right .pull-right {margin:10px 0} .main_content {padding:10px 20px} .col-md-55 {width:50%; margin-bottom:10px} @media ( min-width:480px) { .advertising > span {font-size:3px;} } @media ( min-width:768px) { .col-md-55 {width:20%} .advertising > span {font-size:40px;} .footer_fixed footer {margin-left:0} .footer_fixed .nav-sm footer {margin-left:0} .tile_count .tile_stats_count .count {font-size:40px} .tile_count .tile_stats_count span {font-size:13px} .bs-glyphicons {margin-right:0; margin-left:0} .bs-glyphicons li {width:12.5%; font-size:12px} .cropper .img-container {min-height:516px} .advertising > span {font-size:8px;} } @media ( min-width:992px) { .col-md-55 {width:20%} .advertising > span {font-size:11px} footer {margin-left:230px} .tile_count .tile_stats_count {margin-bottom:10px; border-bottom:0; padding-bottom:10px} .tile_count .tile_stats_count:first-child:before {border-left:0} } @media ( min-width:1200px) { .col-md-55 {width:20%} .advertising > span {font-size:16px;} } @media ( min-width:192px) and (max-width:1270px) { table.tile_info span.right {margin-right:7px; float:left } .advertising > span {font-size:3px;} } @media ( min-width:992px) and (max-width:1100px) { .tile_count .tile_stats_count .count {font-size:30px} .advertising > span {font-size:11px;} } /* 좌측메뉴 */ .sidebar-header {border-bottom:0; margin-top:46px} .sidebar-header:first-of-type {margin-top:0} .nav.side-menu > li {position:relative; display:block; cursor:pointer} .nav.side-menu > li > a {margin-bottom:0} .nav.side-menu > li > a:hover {/* color:#F2F5F7 !important */ color:#0445ad;} .nav.side-menu > li > a:hover, .nav > li > a:focus {text-decoration:none; background:transparent} .nav.child_menu {display:none; box-shadow:5px 5px 10px rgba(0,0,0,0.2);} .nav.child_menu li:hover > a {color:#0445ad;} .nav.child_menu li.active.on > a {color:#0445ad; font-weight:700; background:#f4f4f4;} .nav.child_menu li.active.on > a span.dot, .nav.child_menu li:hover > a span.dot {display: block !important; width:6px; height:6px; border-radius:50%; background:#064aaf; position:absolute; top:14px;} ul.nav.child_menu .child_menu li a {padding-left:44px;} ul.nav.child_menu li.active li.active > a:before, ul.nav.child_menu li li:hover > a:before {left:29px; top:13px;} .nav.side-menu > li > a {color:#fff; font-weight:400;} .nav.side-menu > li > a:hover, .nav.child_menu > li > a:hover {color:#54b9ff;} .nav.child_menu > li > a {font-size:12px; font-weight:400; padding:9px; color:#505050;} .nav.child_menu li li:hover, .nav.child_menu li li.active {background:none} .nav.child_menu li li a:hover, .nav.child_menu li li a.active {color:#14d956} .nav.child_menu .nav.child_menu {box-shadow:none;} .nav.child_menu .nav.child_menu a {color:#000;} .nav li.current-page {background:rgba(255, 255, 255, 0.05)} .nav li li li.current-page {background:none} .nav li li.current-page a {color:#fff} .nav.side-menu > li.active > a {color:#54b9ff;} .site_title {text-overflow:ellipsis; overflow:hidden; font-weight:400; font-size:22px; width:100%; color:#ECF0F1 !important; margin-left:0 !important; line-height:59px; display:block; height:55px; margin:0; padding-left:10px} .site_title:hover, .site_title:focus {text-decoration:none} .nav > li > a:hover, .nav > li > a:focus {background-color:transparent;} .top_search {padding:0} .top_search .form-control {border-right:0; box-shadow:inset 0 1px 0px rgba(0, 0, 0, 0.075); border-radius:25px 0px 0px 25px; padding-left:20px; border:1px solid #dcdcdc;} .top_search .form-control:focus {border:1px solid rgba(221, 226, 232, 0.49); border-right:0} .top_search .input-group-btn button {border-radius:0px 25px 25px 0px; border:1px solid #dcdcdc; border-left:0; box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.075); color:#93A2B2; margin-bottom:0 !important} .main_menu_side {padding:0} .main_menu_side ::-webkit-scrollbar {width:8px; height:8px;} /* width */ .main_menu_side ::-webkit-scrollbar-track {background:rgba(255,255,255,0.5);} /* Track */ .main_menu_side ::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.1); border-radius:4px;} /* Handle */ .main_menu_side ::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.2);} /* Handle on hover */ .bs-docs-sidebar .nav > li > a {display:block; padding:4px 6px} /* footer */ footer {background:#fff; padding:16px 20px; display:block;} .nav-sm footer {margin-left:75px} .footer_fixed footer {position:fixed; left:0px; bottom:0px; width:100%} /* ***** x_panel ***** */ .x_panel {position:relative; width:100%; margin-bottom:20px; padding:10px 17px; display:inline-block; background:#fff; border:1px solid #efeeee; border-radius:8px; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; column-break-inside:avoid; opacity:1; transition:all .2s ease; box-shadow:0 8px 24px rgba(0, 0, 0, 0.05);} .x_panel:hover {box-shadow:0 8px 15px rgba(0, 0, 0, 0.12);} .metadata_table [class*="col-"] > .x_panel {height:100%;} .x_title {border-bottom:2px solid #efeeee; padding:1px 5px 6px; margin-bottom:10px} .x_title .filter {width:40%; float:right} .x_title h2 {margin:9px 0px 6px 0px; float:left; display:block; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; font-weight:700; font-size:15px;} .x_title h2 small {margin-left:10px; font-size:66%;} .x_title span {color:#BDBDBD} .x_content {padding:0 5px 6px; position:relative; width:100%; float:left; clear:both; margin-bottom:5px; height:calc(100% - 50px); overflow:inherit;} .x_content.echarts.bar, .x_content.echarts.line, .x_content.echarts.gauge, .x_content.echarts.scatter, .x_content.echarts.funnel, .x_content.echarts.heatmap {height:calc(100% - 45px);} .x_content h4 {font-size:16px; font-weight:400} /* dropdown-menu */ .dropdown-menu a {cursor:pointer; transition:0.2s;} .dropdown-menu a:hover {color:#54b9ff;} .dropdown-menu.msg_list span {white-space:normal} .dropdown-menu {border:medium none; box-shadow:none; display:none; float:left; font-size:12px; left:0; list-style:none outside none; padding:0; position:absolute; text-shadow:none; top:100%; z-index:9998; border:1px solid #efeeee; border-top-left-radius:0; border-top-right-radius:0; box-shadow:5px 5px 10px rgba(0,0,0,0.1);} .dropdown-menu > li > a {color:#3b3f42; padding:5px 10px; font-size:13px; display:block;} .main_menu .fa {width:10px; opacity:.99; display:inline-block; font-family:FontAwesome; font-style:normal; font-weight:normal; font-size:18px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale} /*=========================================================================================================================== Table =============================================================================================================================*/ /* bootstrap 기본 table */ .table {border-top:1px solid #000; background:#fff;} .table caption {position:absolute; top:-9999px; left:-9999px; width:1px; height:1px; overflow:hidden; /* visibility:hidden; */ opacity:0;} .table > :not(caption) > * > * {padding:8px 8px;} .table th {border:none; border-bottom:1px solid #ccc; text-align:center; font-weight:500; background:#f2f2f2; font-weight:600; vertical-align:middle;} .table > tbody td {border:none; border-bottom:1px solid #eee; text-align:center; font-weight:400; vertical-align:middle; background:#fff;} .paas_container .table > tbody td {border-bottom:1px solid #d8d8d8;} /* **************************** form 테이블 **************************** */ /* 쓰기 기본:2단 이상용 */ .form-table {width:100%; border-collapse:collapse; font-size:13px; word-break:keep-all; table-layout:fixed;} .form-table caption {position:absolute; top:-9999px; left:-9999px; width:1px; height:1px; overflow:hidden; opacity:0;} .form-table {border-top:1px solid #000;} .form-table th.subject {padding-left:10px; color:#4b4b4b; font-weight:500; text-align:left; vertical-align:middle;} .form-table th {padding:4px 10px; background:#eaf0ff; text-align:center; color:#4b4b4b; border-bottom:1px solid #d9d9d9; border-top:none; vertical-align:middle; font-size:14px; position:relative; line-height:30px; font-weight:600;} .form-table.tal th {text-align:left;} .form-table th:last-child {border-right:none;} .form-table th > label {margin-top:0;} .form-table th.top-board:after {content:""; width:calc(100% + 2px); left:-1px; top:-1px; height:1px; background:#fff; position:absolute;} .form-table td {padding:8px 10px; border:none; border-bottom:1px solid #eee; color:#333; line-height:20px; text-align:left; background:#fff; vertical-align:middle; word-break:break-all; font-size:14px;} .form-table td.border-right {border-right:1px solid #eee;} .form-table td:last-child {border-right:none;} .form-table td pre {font-size:14px; background:#fff; line-height:20px; border:0; border-radius:0;} .form-table td ul.form-table-ul {padding:0; margin:0;} .form-table td ul.form-table-ul li {padding:0 0 0 14px; margin:0 0 3px 0; list-style:none; position:relative; line-height:25px;} .form-table td ul.form-table-ul li:after {position:absolute; content:""; width:4px; height:4px; left:3px; top:10px; background:#85a9db; border-radius:2px;} .form-table td textarea {padding:10px;} .form-table td a {transition:0.2s;} .form-table td a:hover {text-decoration:underline;} .form-table td a.btn:hover {text-decoration:none;} .form-table tbody {border-top:none;} .form-table tbody th {padding:4px 10px; background:#f2f2f2; text-align:center; color:#4b4b4b; border-bottom:1px solid #d8d8d8; border-top:none; vertical-align:middle; font-size:14px} .form-table tbody th.subject {padding-left:10px; color:#000; font-weight:600; text-align:left; vertical-align:middle;} .form-table.write th, .form-table.write tbody td {padding:7px 10px; line-height:18px;} .form-table.write td .form-control[readonly] {background-color:transparent; border-color:transparent; padding:0; box-shadow:none;} .form-table.write td .img_area {text-align:center; padding-top:20px;} .form-table.write td .img_area img {max-width:100%;} /*=========================================================================================================================== Library Custom =============================================================================================================================*/ /*====================================== Daterangepicker ========================================*/ /* daterangepicker_base */ .daterangepicker:after {display:block; content:''; clear:both;} .daterangepicker.dropdown-menu {padding:0 5px 5px;} .daterangepicker .calendar {float:left; padding:5px;} .daterangepicker .calendar .daterangepicker_input {position:relative;} .daterangepicker .calendar .daterangepicker_input .input-mini {width:inherit; height:inherit; line-height:30px; padding:0 10px; margin-left:35px; border:1px solid #e1e3e7; border-radius:5px; box-shadow:none;} .daterangepicker .calendar .daterangepicker_input .input-mini + .glyphicon {width:30px; height:30px; line-height:30px; position:absolute; top:0; left:0; text-align:center;} .daterangepicker .calendar .daterangepicker_input .calendar-time {display:flex; align-items:center; justify-content:center; padding-left:30px; margin:5px 0; position:relative;} .daterangepicker .calendar .daterangepicker_input .calendar-time > div {display:flex; flex:1; align-items:center; justify-content:center;} .daterangepicker .calendar .daterangepicker_input .calendar-time select {flex:1; height:30px; margin:0 5px; border:1px solid #e1e3e7; border-radius:5px;} .daterangepicker .calendar .daterangepicker_input .calendar-time select:last-child {margin-right:0;} .daterangepicker .calendar .daterangepicker_input .calendar-time select:focus {border:1px solid #003880;} .daterangepicker .calendar .daterangepicker_input .calendar-time > .glyphicon {position:absolute; top:5px; left:8px;} .daterangepicker .ranges {width:30%; clear:both;} .daterangepicker .ranges .range_inputs {width:100%; text-align:right;} .daterangepicker .ranges .range_inputs button {min-width:60px;} /* daterangepicker big_style */ .daterangepicker .ranges li {color:#354f63;} .daterangepicker .ranges li.active, .daterangepicker .ranges li:hover {background:#54b9ff; color:#fff;} .daterangepicker .input-mini {background-color:#eee; border:1px solid #ccc; box-shadow:none !important;} .daterangepicker .input-mini.active {border:1px solid #ccc;} .daterangepicker select.monthselect, .daterangepicker select.yearselect, .daterangepicker select.hourselect, .daterangepicker select.minuteselect, .daterangepicker select.secondselect, .daterangepicker select.ampmselect {font-size:12px; padding:1px; height:auto; margin:0; cursor:default; height:25px; border:1px solid #ADB2B5; line-height:30px; border-radius:0px !important;} .daterangepicker select.monthselect {margin-right:2%;} .daterangepicker td.in-range {background:#d8e7f2; color:#354f63;} .daterangepicker td.active, .daterangepicker td.active:hover {background-color:#54b9ff; color:#fff;} .daterangepicker th.available:hover {background:#eee; color:#34495E;} .daterangepicker:before, .daterangepicker:after {content:none;} .daterangepicker .calendar.single {margin:0 0 4px 0;} .daterangepicker .calendar.single .calendar-table {width:224px; padding:0 0 4px 0 !important;} .daterangepicker .calendar.single .calendar-table thead tr:first-child th {padding:8px 5px;} .daterangepicker .calendar.single .calendar-table thead th {border-radius:0;} .daterangepicker.default {color:#fff; background:#34495E;} .daterangepicker.default .calendar-table {background:#34495E;} .daterangepicker.default .calendar-table thead tr {background:#213345;} .daterangepicker.default .calendar-table thead tr:first-child {background:#1ABB9C;} .daterangepicker.default .calendar-table td.off {background:#34495E; color:#999;} .daterangepicker.default .calendar-table td.available:hover {color:#34495E;} .daterangepicker.picker_1 {color:#fff; background:#34495E;} .daterangepicker.picker_1 .calendar-table {background:#34495E;} .daterangepicker.picker_1 .calendar-table thead tr {background:#213345;} .daterangepicker.picker_1 .calendar-table thead tr:first-child {background:#1ABB9C;} .daterangepicker.picker_1 .calendar-table td.off {background:#34495E; color:#999;} .daterangepicker.picker_1 .calendar-table td.available:hover {color:#34495E;} .daterangepicker.picker_2 .calendar-table thead tr {color:#1ABB9C;} .daterangepicker.picker_2 .calendar-table thead tr:first-child {color:#354f63;} .daterangepicker.picker_3 .calendar-table thead tr:first-child {color:#fff; background:#1ABB9C;} .daterangepicker.picker_4 .calendar-table thead tr:first-child {color:#fff; background:#34495E;} .daterangepicker.picker_4 .calendar-table td, .daterangepicker.picker_4 .calendar-table td.off {background:#ECF0F1; border:1px solid #fff; border-radius:0;} .daterangepicker.picker_4 .calendar-table td.active {background:#34495E;} .daterangepicker.xdisplay {width:228px;} @media (min-width: 730px) { .daterangepicker .drp-calendar.left {clear:left !important;} } /* ******************** jstree ******************** */ .jstree_area.jstree-default .jstree-themeicon {font-style:normal; background:none;} .jstree_area.jstree-default .jstree-themeicon:after {display:block; content:"\ef36"; font-family:"Icofont"; font-size:14px; color:#003880;} .jstree_area.jstree-default .jstree-themeicon.user_file:after {content:"\eb2a"; font-size:15px;} .jstree_area.jstree-default li.jstree-open .jstree-anchor > .jstree-icon {color:#4797e2; background:none !important;} /* 하위폴더가 없는 아이콘 */ .jstree_area.jstree-default li.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\eb2a"; color:#8f8f8f;} .jstree_area.jstree-default li.jstree-leaf.category .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\ec5b"; color:#8f8f8f;} .jstree_area.jstree-default .jstree-node, .con_tree .jstree-default .jstree-icon.jstree-themeicon {background:none !important;} .jstree_area.jstree-default li .jstree-wholerow {border-bottom:none;} .jstree_area .jstree-anchor {overflow:hidden; text-overflow:ellipsis;} .jstree_area .vakata-context .vakata-contextmenu-disabled > a > i {filter:grayscale(100%);} .jstree-default .jstree-hovered {color:#000;} .jstree_area.jstree-default .jstree-wholerow-hovered {background:#f4f4f4;} .jstree_area.jstree-default .jstree-wholerow-clicked {background:#f4f4f4 !important; color:#000;} .jstree_area.jstree-default .jstree-clicked.jstree-anchor, .jstree_area.jstree-default .jstree-clicked.jstree-anchor:link, .jstree_area.jstree-default .jstree-clicked.jstree-anchor:visited, .jstree_area.jstree-default .jstree-clicked.jstree-anchor:hover, .jstree_area.jstree-default .jstree-clicked.jstree-anchor:active {color:#000;} .jstree_area.jstree-default .jstree-node {min-height:26px; line-height:26px; margin-left:10px; min-width:20px;} .jstree_area.jstree-default .jstree-anchor {line-height:26px; height:26px;} .jstree_area.jstree-default .jstree-icon {width:20px; height:26px; line-height:26px;} .jstree_area.jstree-default .jstree-icon:empty {width:20px; height:26px; line-height:26px;} .jstree_area.jstree-default.jstree-rtl .jstree-node {margin-right:20px;} .jstree_area.jstree-default .jstree-wholerow {height:26px;} .jstree_area.jstree-default > .jstree-no-dots .jstree-open > .jstree-ocl {background-position:-36px -5px;} .jstree_area.jstree-default > .jstree-no-dots .jstree-closed > .jstree-ocl {background-position:-4px -4px;} .jstree_area #jstree-dnd.jstree-default {line-height:26px; padding:0 4px;} .jstree_area #jstree-dnd.jstree-default i {background:transparent; width:20px; height:26px; line-height:26px;} .jstree_area.jstree-default .defaultViewYn_Y {font-weight:bold; color:#0059bc;} /* 241101 - 엄윤섭 추가 : jstree 드래그 가능한 요소 화살표 추가 */ #div_tableTree.jstree-default > .jstree-no-dots .jstree-leaf.ui-draggable > .jstree-ocl {background-image:url("/lib/jstree/themes/default/32px.png"); background-position:-4px -4px;} /*====================================== select2 ========================================*/ /* select2 */ .select2-container {font-size:14px; min-width:150px;} .select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {background-color:#fff; border:1px solid #dcdcdc; border-radius:8px; min-height:32px;} .select2-container--default .select2-selection--multiple {height:auto; min-height:35px; padding-bottom:1px;} .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {line-height:23px; height:28px; margin-left:10px;} .select2-container--default .select2-selection--single .select2-selection__rendered {color:#000; padding-top:0; line-height:31px; min-width:100px;} .select2-container--default .select2-selection--multiple .select2-selection__rendered {padding-top:3px;} .select2-container--default .select2-selection--single .select2-selection__arrow {height:28px; top:50%; transform:translate(0,-50%);} .select2-container--default .select2-selection--multiple .select2-selection__choice {margin-top:0; margin-bottom:2px; border:none; border-radius:5px; padding:3px 20px 3px 8px; background-color:#f3faff; color:#000; border:1px solid #88b3e2; line-height:20px;} .select2-container--default .select2-selection--multiple .select2-selection__clear {font-size:18px; font-weight:400;} .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {cursor:pointer; display:inline-block; font-weight:bold; margin-right:0; line-height:26px; transition:0.2s; border-right:1px solid #88b3e2; left:auto; right:0; border:none; color:#0087fd; font-size:14px; font-weight:400; border-radius:0;} .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {color:#fff; background-color:#88b3e2;} .select2-container--default.select2-container--focus .select2-selection--multiple {border:1px solid #ccc} .select2-container--default .select2-selection--single:hover, .select2-container--default .select2-selection--multiple:hover {border:1px solid #2b58e6;} .select2-container--default.select2-container--disabled .select2-selection--single {background-color:#e9edf1; cursor:default} .select2-container--default.select2-container--disabled .select2-selection--single:hover, .select2-container--default.select2-container--disabled .select2-selection--multiple:hover {border-color:#ccc;} .select2-container--default .select2-selection--single .select2-selection__clear {cursor:pointer; float:right; font-weight:bold; height:31px; margin-right:30px; padding-right:0px} /* 아래로 열릴 때 */ .select2.select2-container--default.select2-container--below.select2-container--open .select2-selection--single, .select2.select2-container--default.select2-container--below.select2-container--open .select2-selection--multiple {border:1px solid #2b58e6; border-bottom-color:transparent;} .select2-container--open .select2-dropdown--below.select2-dropdown {border-radius:0 0 8px 8px; border:1px solid #2b58e6; border-top:none;} /* 위로 열릴 때 */ .select2.select2-container--default.select2-container--above.select2-container--open .select2-selection--single, .select2.select2-container--default.select2-container--above.select2-container--open .select2-selection--multiple {border:1px solid #2b58e6; border-top-color:transparent;} .select2-container--open .select2-dropdown--above.select2-dropdown {border-radius:8px 8px 0 0; border:1px solid #2b58e6; border-bottom:none;} /*====================================== bootstrap-select ========================================*/ .bootstrap-select.form_control {padding:0;} /* bootstrap-select */ .bootstrap-select > .btn.dropdown-toggle {border-radius:0; border:0; padding:0 20px 0 10px !important; background:#fff; box-sizing:border-box;} .bootstrap-select > select.form-control + .btn.dropdown-toggle {border:1px solid #dcdcdc;} .bootstrap-select > .btn.dropdown-toggle.active, .bootstrap-select > .btn.dropdown-toggle:active, .bootstrap-select > .btn.dropdown-toggle:focus, .bootstrap-select > .btn.dropdown-toggle:hover, .bootstrap-select.open > .btn.btn.dropdown-toggle {border:none; background:transparent;} .bs3.bootstrap-select .btn.dropdown-toggle .filter-option {padding-right:0;} .bootstrap-select .btn .caret {display:none;} .bootstrap-select .btn.dropdown-toggle, .bootstrap-select.btn-group .btn.dropdown-toggle:focus, .bootstrap-select.btn-group .btn.dropdown-toggle:hover {background:transparent; transition:0.2s; position:relative;} .bootstrap-select .btn.dropdown-toggle.active, .bootstrap-select .btn.dropdown-toggle:active, .bootstrap-select .btn.dropdown-toggle:focus, .bootstrap-select .btn.dropdown-toggle:hover, .bootstrap-select.open > .btn.dropdown-toggle {border-color:#5887fb;} .bootstrap-select .dropdown-menu > li > a:focus, .bootstrap-select .dropdown-menu > li > a:hover {background:#f5f5f5;} .bootstrap-select.btn-group.open .dropdown-toggle {box-shadow:none; background:#fff;} .bootstrap-select .dropdown-toggle::after, .bootstrap-select .dropup .dropdown-toggle::after {display:block; content:"\eac8"; width:20px; line-height:30px; position:absolute; top:0; right:0; bottom:0; color:#a8a8a8; font-family:"IcoFont"; font-size:16px; font-weight:600; text-align:center; border:none;} .bootstrap-select.open .dropdown-toggle::after, .bootstrap-select.open .dropup .dropdown-toggle::after {background:url("../images/icon/select_arrow_active.png") no-repeat center center;} .bootstrap-select .btn:focus {outline:none !important;} .bootstrap-select .dropdown-toggle .filter-option-inner-inner {font-weight:400; line-height:28px; color:#000; font-size:13px;} .bootstrap-select .dropdown-menu li {position:relative;} .bootstrap-select .dropdown-menu li:not(.disabled) a:hover small, .bootstrap-select .dropdown-menu li:not(.disabled) a:focus small, .bootstrap-select .dropdown-menu li.active:not(.disabled) a small {color:#64b1d8; color:rgba(100, 177, 216, 0.4);} .bootstrap-select .dropdown-menu li.disabled a {cursor:not-allowed;} .bootstrap-select .dropdown-menu li a {cursor:pointer; color:#000; font-weight:400; padding:0 10px;} .bootstrap-select .dropdown-menu li.active > a {background:none; color:#000; font-weight:400;} .bootstrap-select .dropdown-menu li.active > a:hover, .bootstrap-select .dropdown-menu li.active > a:focus {color:#000; font-weight:400; text-decoration:none; outline:0; background-color:#f5f5f5;} .bootstrap-select.disabled .dropdown-toggle .filter-option-inner-inner {color:#999;} .bootstrap-select > select {left:auto !important;} .bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {width:140px;} /*====================================== Dropzone ========================================*/ .dropzone {min-height:300px; border:1px solid #e5e5e5} /*====================================== DataTables ========================================*/ .dataTables_wrapper > .row {overflow:auto;} table.dataTable {background:#fff;} table.dataTable thead th, table.dataTable thead td, table.dataTable tfoot th, table.dataTable tfoot td {text-align:center; } table.dataTable thead th {text-align:center; font-size:15px; border-bottom:0;} table.dataTable tbody th, .dynamic_table table.dataTable tbody td {padding:11px 10px; text-align:center; font-size:16px; word-break:break-all; border-right:1px solid #c6c6c6; border-bottom:1px solid #c6c6c6; font-size:14px;} table.dataTable tbody th:last-child, .dynamic_table table.dataTable tbody td:last-child {border-right:0;} table.dataTable ol {padding-left:15px;} table.dataTable thead th, table.dataTable thead td {padding:9px 5px; text-align:center; font-size:14px; border-top:1px solid #505050 !important; background-color:#f2f2f2 !important; border-right:1px solid #eee !important; border-bottom:1px solid #ccc; color:#4b4b4b; font-weight:600;} table.dataTable tbody th, table.dataTable tbody td {padding:4px 5px;} table.dataTable td {border-bottom:1px solid #eee;} table.dataTable th:last-child {border-right:0;} table.dataTable td:last-child {border-right:0;} table.dataTable.no-footer {border:0;} /* sorting */ table.dataTable thead > tr > th.sorting, table.dataTable thead > tr > th.sorting_asc, table.dataTable thead > tr > th.sorting_desc, table.dataTable thead > tr > th.sorting_asc_disabled, table.dataTable thead > tr > th.sorting_desc_disabled, table.dataTable thead > tr > td.sorting, table.dataTable thead > tr > td.sorting_asc, table.dataTable thead > tr > td.sorting_desc, table.dataTable thead > tr > td.sorting_asc_disabled, table.dataTable thead > tr > td.sorting_desc_disabled {cursor:pointer; position:relative; padding-right:26px;} table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after {position:absolute; display:block; opacity:0.125; right:10px; line-height:9px; font-size:1px !important;} table.dataTable thead > tr > th.sorting:before, table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:before, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > th.sorting_desc_disabled:before, table.dataTable thead > tr > td.sorting:before, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:before, table.dataTable thead > tr > td.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:before {bottom:53%; content:"▲"; content:"▲"/"";} table.dataTable thead > tr > th.sorting:after, table.dataTable thead > tr > th.sorting_asc:after, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > th.sorting_asc_disabled:after, table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting:after, table.dataTable thead > tr > td.sorting_asc:after, table.dataTable thead > tr > td.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc_disabled:after, table.dataTable thead > tr > td.sorting_desc_disabled:after {top:53%; content:"▼"; content:"▼"/"";} table.dataTable thead > tr > th.sorting_asc:before, table.dataTable thead > tr > th.sorting_desc:after, table.dataTable thead > tr > td.sorting_asc:before, table.dataTable thead > tr > td.sorting_desc:after {opacity:0.6;} table.dataTable thead > tr > th.sorting_desc_disabled:after, table.dataTable thead > tr > th.sorting_asc_disabled:before, table.dataTable thead > tr > td.sorting_desc_disabled:after, table.dataTable thead > tr > td.sorting_asc_disabled:before {display:none;} table.dataTable thead > tr > th:active, table.dataTable thead > tr > td:active {outline:none;} div.dataTables_scrollBody > table.dataTable > thead {display:none;} div.dataTables_scrollBody > table.dataTable > thead > tr > th:before, div.dataTables_scrollBody > table.dataTable > thead > tr > th:after, div.dataTables_scrollBody > table.dataTable > thead > tr > td:before, div.dataTables_scrollBody > table.dataTable > thead > tr > td:after {display:none;} table.dataTable.table-striped > tbody > tr:nth-of-type(odd) > * {--bs-table-accent-bg:none; background:#f2f5fb;} table.dataTable > tbody > tr:hover, table.dataTable > tbody > tr:hover > * {background-color:#e7f9ff !important;} @media (max-width:460px) { .dataTables_wrapper .col-sm-6 {width:100%; margin-bottom:5px;} .dataTables_wrapper .col-sm-6 .dataTables_filter {float:none;} } @media (max-width:767px) { .dataTables_length {float:none;} } /* dataTable 상단 기능 */ .dataTables_wrapper .dataTables_length {margin-bottom:10px;} .dataTables_wrapper .dataTables_length select {border:1px solid #dcdcdc; border-radius:0; padding:5px; background-color:transparent; padding:4px 30px 3px 4px; width:auto; display:inline-block;} .dataTables_wrapper .dataTables_length select:focus {outline:none;} .dataTables_wrapper .dataTables_filter {margin-bottom:10px;} .dataTables_wrapper .dataTables_filter input {display:inline-block; width:300px; border:1px solid #dcdcdc; border-radius:0; padding:3px 4px 3px 4px;} /* dataTable paging */ .dataTables_wrapper .dataTables_paginate {float:right; text-align:right; padding-top:0; margin:30px 0 20px;} .dataTables_wrapper .dataTables_paginate li.paginate_button {min-width:auto; padding:0; margin:0 5px; color:#000 !important;} .dataTables_wrapper .dataTables_paginate li.paginate_button:hover {background:transparent} .dataTables_wrapper .dataTables_paginate li.paginate_button a.page-link {padding:0; color:#000; background-color:transparent; border:none; transition:0.2s; width:25px; height:25px; line-height:27px; border-radius:13px; font-weight:400; font-size:14px;} .dataTables_wrapper .dataTables_paginate li.paginate_button a.page-link:hover {color:#000; background-color:#c7ecf8; border-color:transparent;} .dataTables_wrapper .dataTables_paginate li.paginate_button.active, .dataTables_wrapper .dataTables_paginate li.paginate_button.active:hover {border:1px solid transparent; background-color:transparent;} .dataTables_wrapper .dataTables_paginate li.paginate_button.active a, .dataTables_wrapper .dataTables_paginate li.paginate_button.active:hover a {color:#fff !important; border:none; background-color:#00b2ec !important;} .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled, .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate li.paginate_button.disabled:active {cursor:default; color:#666 !important; border:1px solid transparent; background-color:transparent; background:transparent; box-shadow:none;} .dataTables_wrapper .dataTables_paginate li.paginate_button:hover {color:#000 !important; border:1px solid transparent; background-color:transparent !important;} .dataTables_wrapper .dataTables_paginate li.paginate_button:active {outline:none; background-color:transparent; box-shadow:none;} .dataTables_wrapper .dataTables_paginate li.paginate_button.previous a, .dataTables_wrapper .dataTables_paginate li.paginate_button.next a {text-indent:-9999px; text-align:center; position:relative;} .dataTables_wrapper .dataTables_paginate li.paginate_button.previous a:after, .dataTables_wrapper .dataTables_paginate li.paginate_button.next a:after {width:6px; height:10px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); content:""; display:block; background:url(../images/common/tui_page.png) no-repeat 0 0;} .dataTables_wrapper .dataTables_paginate li.paginate_button.previous a:after {background-position:-26px 0;} .dataTables_wrapper .dataTables_paginate li.paginate_button.next a:after {background-position:-13px -24px;} .dataTables_wrapper .dataTables_paginate li.paginate_button.previous.disabled a:After {background-position:-26px -12px;} .dataTables_wrapper .dataTables_paginate li.paginate_button.next.disabled a:after {background-position:-21px -24px;} /*====================================== Toast Grid ========================================*/ /* toastGrid background */ .misoToastGrid1 {background-color:#00ACC1 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid2 {background-color:#00BCD4 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid3 {background-color:#26C6DA !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid4 {background-color:#4DD0E1 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid5 {background-color:#80DEEA !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid6 {background-color:#B2EBF2 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid7 {background-color:#E0F7FA !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid8 {background-color:#E0F2F1 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid9 {background-color:#E8F5E9 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid10 {background-color:#F1F8E9 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid11 {background-color:#FFF8E1 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid12 {background-color:#FFECB3 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid13 {background-color:#FFE082 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid14 {background-color:#FFD54F !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid15 {background-color:#FFCA28 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid16 {background-color:#FFC107 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid17 {background-color:#FFB300 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid18 {background-color:#FFA000 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid19 {background-color:#FF8F00 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid20 {background-color:#FF6F00 !important; color:#000000 !important; font-weight:bold !important;} .misoToastGrid_red {color:#FF0000 !important; font-weight:bold !important;} .misoToastGrid_blue {color:#0000FF !important; font-weight:bold !important;} .misoToastGrid_white {color:#FFFFFF !important;} .misoToastGrid_arrow_up_blue {background:url(../images/grid/grid-arrow-up-blue.png) no-repeat center center;} .misoToastGrid_new_red {background:url(../images/grid/grid-new-red.png) no-repeat center center;} .misoToastGrid_arrow_down_blue {background:url(../images/grid/grid-arrow-down-blue.png) no-repeat center center;} .misoToastGrid_arrow_up_red {background:url(../images/grid/grid-arrow-up-red.png) no-repeat center center;} /* ========================= TUI 그리드 수정 - 중복 제거 / 선택자 통합 / 위→아래 시멘틱 순서 정리 ========================= */ /* 1) Cell Input */ .tui-grid-cell-content select {width:98%; height:20px; font-size:12px; color:#2a3f54; border-color:#dadada; border-radius:3px;} .tui-grid-cell-content input[type=password], .tui-grid-cell-content input[type=text] {width:100%; padding:2px; border:1px solid #ffffff; border-radius:3px;} /* 2) Container */ .tui-grid-container {font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", "Apple SD Gothic Neo", "돋움", dotum, Arial, sans-serif !important; font-size:14px; overflow:hidden;} /* 3) Header */ .tui-grid-header-area {position:relative; z-index:3; background:#f2f2f2 !important;} .tui-grid-header-area .tui-grid-cell-header {padding:4px 20px 4px 20px; position:relative;} .tui-grid-header-area .tui-grid-table tr td {padding-left:28px;} .tui-grid-header-area .tui-grid-cell-header:nth-child(1), .tui-grid-header-area .tui-grid-table tr td:nth-child(1) {padding-left:20px !important;} .tui-grid-table-container .tui-grid-table tr td:nth-child(1) {padding-left:18px !important;} .tui-grid-header-area .tui-grid-cell-header.tui-grid-cell-header.tui-grid-cell-row-header, .tui-grid-table-container .tui-grid-table .tui-grid-cell-row-header[data-column-name="_number"] {text-align:center !important; padding:4px 5px !important; min-width:45px;} .tui-grid-cell-header {overflow:hidden; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} /* 4) Cell / Row */ .tui-grid-cell {border-left-width:0 !important; border-right-width:0 !important; background:#fff !important; border-bottom:1px solid #d8d8d8 !important; color:#2e2e2e !important; padding:0 20px; transition:0.2s;} .tui-grid-row-hover .tui-grid-cell {background-color:#f4f7fc !important;} .grid_striped .tui-grid-row-even .tui-grid-cell {background:#f8f8f8 !important;} .grid_striped .tui-grid-row-hover .tui-grid-cell {background-color:#f4f7fc !important;} /* 5) Header Cell / Sort & Filter */ .tui-grid-cell-header {color:#4b4b4b !important; font-weight:600; border-top:1px solid #505050 !important; background-color:#f2f2f2 !important; border-right:1px solid #f2f2f2 !important; position:relative;} .tui-grid-header-area .tui-grid-cell-header:has(.tui-grid-btn-filter) {padding-right:20px;} .tui-grid-header-area .tui-grid-cell-header:has(.tui-grid-btn-sorting) {padding-right:20px;} .tui-grid-header-area .tui-grid-cell-header:has(.tui-grid-btn-filter):has(.tui-grid-btn-sorting) {padding-right:42px;} .tui-grid-cell-header .tui-grid-btn-sorting, .tui-grid-cell-header .tui-grid-btn-filter {position:absolute; right:8px; top:50%; transform:translate(0,-50%); width:16px; height:20px; line-height:20px;} .tui-grid-cell-header .tui-grid-btn-sorting + .tui-grid-btn-filter {right:24px;} .tui-grid-cell-header .tui-grid-btn-sorting {background:url(../images/board/paas_tui_grid_btn_sorting.png) -85px -7px no-repeat; transition:0s; margin-left:0;} .tui-grid-cell-header .tui-grid-btn-sorting-down {background-position:-126px -7px;} .tui-grid-cell-header .tui-grid-btn-sorting-up {background-position:-105px -7px;} .tui-grid-cell-header .tui-grid-btn-filter {background-position:-15px -87px; width:20px;} .tui-grid-cell-header .tui-grid-btn-filter-active {background-position:-49px -87px;} /* 6) Border / Focus */ .tui-grid-border-line-top {border-top:1px solid #505050 !important; border-bottom-color:#cdcdcd !important;} .tui-grid-border-line-bottom {border-bottom-width:0 !important;} .tui-grid-border-line-right {right:0 !important;} .tui-grid-layer-focus-border {background-color:initial !important;} /* 7) Links */ .tui-grid-container .tui-grid-cell-content a {color:#3d97d3; transition:0.2s;} .tui-grid-container .tui-grid-cell-content a:hover {color:#000; text-decoration:underline; text-underline-offset:2px;} /* 8) Resize Handle */ .tui-grid-column-resize-handle {float:left; position:absolute; bottom:1px; left:-99px; width:3px; background:#f2f2f2; opacity:1; filter:alpha(opacity=1); cursor:col-resize;} .tui-grid-column-resize-handle:after {content:""; display:block; width:1px; height:calc(100% - 10px); background:#aaaaaa; position:absolute; right:1px; top:5px;} /* 9) Progress */ .tui-grid-cell .progress {margin-bottom:0; position:relative;} /* 10) Checkbox / Content */ .tui-grid-content-area input[type=checkbox] {accent-color:#1aa0c1;} .tui-grid-cell-has-input .tui-grid-cell-content {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1;} .tui-grid-cell-content i {margin-right:5px; text-align:center;} /* 11) Body Background */ .tui-grid-body-area {background:linear-gradient(to right, #f8f8f8 0, #f8f8f8 calc(100% - 10px), #fff calc(100% - 10px), #fff 100%) !important;} .tui-grid-header-area {background:linear-gradient(to right, #f2f2f2 0, #f2f2f2 calc(100% - 10px), #fff calc(100% - 10px), #fff 100%) !important;} /* 12) Empty State */ .tui-grid-layer-state .tui-grid-img-nodata {display:block; margin:0 auto 15px; width:50px;} /* 13) Header Checkbox */ .tui-grid-row-header-checkbox {height:15px; padding:5px 5px 3px 0;} .tui-grid-row-header-checkbox > input[type=checkbox] {width:15px; height:15px;} .tui-grid-cell-header > span {height:15px; display:inline-block; padding:5px 5px 3px;} .tui-grid-cell-header > span > input[type=checkbox] {width:15px; height:15px;} /* 14) Scrollbar (커스텀 시도분 정리 / 거터 유지) */ .tui-grid-body-area, .tui-grid-table-container {scrollbar-gutter:auto !important;} .tui-grid-scrollbar-right-top {background-color:#fff !important; border-bottom:none !important; border-left:1px solid #f2f2f2 !important; width:10px !important;} .tui-grid-scrollbar-right-bottom {width:10px !important;} .tui-grid-scrollbar-left-bottom {height:10px !important;} .tui-grid-scrollbar-y {width:10px !important;} .tui-grid-scrollbar-x {height:10px !important;} .tui-grid-scrollbar-y-inner-border {right:0 !important;} .tui-grid-scrollbar-y-thumb, .tui-grid-scrollbar-x-thumb, .tui-grid-scrollbar-y .tui-grid-scrollbar-thumb, .tui-grid-scrollbar-x .tui-grid-scrollbar-thumb {width:5px !important; height:5px !important; margin:calc((10px - 5px)/2) !important; border-radius:3px !important; background:#c7c7c7 !important; transition:background-color .15s ease; transform:none !important;} .tui-grid-scrollbar-y-thumb:hover, .tui-grid-scrollbar-x-thumb:hover, .tui-grid-scrollbar-y:hover .tui-grid-scrollbar-y-thumb, .tui-grid-scrollbar-x:hover .tui-grid-scrollbar-x-thumb, .tui-grid-scrollbar-y .tui-grid-scrollbar-thumb:hover, .tui-grid-scrollbar-x .tui-grid-scrollbar-thumb:hover, .tui-grid-scrollbar-y:hover .tui-grid-scrollbar-thumb, .tui-grid-scrollbar-x:hover .tui-grid-scrollbar-thumb {background:#b3b3b3 !important;} /* 크롬/엣지용 native scrollbar (그리드 영역만 타겟) */ .tui-grid-body-area::-webkit-scrollbar, .tui-grid-table-container::-webkit-scrollbar {width:10px; height:10px;} .tui-grid-body-area::-webkit-scrollbar-track, .tui-grid-table-container::-webkit-scrollbar-track {background:transparent;} .tui-grid-body-area::-webkit-scrollbar-thumb, .tui-grid-table-container::-webkit-scrollbar-thumb {background:#c7c7c7; border-radius:3px; border:2px solid transparent; background-clip:padding-box;} .tui-grid-body-area::-webkit-scrollbar-thumb:hover, .tui-grid-table-container::-webkit-scrollbar-thumb:hover {background:#b3b3b3;} /* 15) Pagination */ .tui-grid-container .tui-grid-pagination {margin:30px 0 0;} .tui-pagination {height:25px;} .tui-pagination .tui-page-btn {width:25px; height:25px; padding:0; line-height:25px; margin:0 5px; color:#000; font-size:14px; font-weight:400; border:none !important; transition:0.2s; border-radius:13px; box-sizing:border-box;} .tui-pagination .tui-page-btn:hover {background-color:#c7ecf8; text-decoration:none;} .tui-pagination .tui-is-selected, .tui-pagination strong {color:#fff; background:#eff5ff; border:1px solid #c8ccd0 !important; color:#1559ef;} .tui-pagination .tui-is-selected:hover {background-color:#eff5ff;} .tui-pagination .tui-ico-ellip, .tui-pagination .tui-ico-first, .tui-pagination .tui-ico-last, .tui-pagination .tui-ico-next, .tui-pagination .tui-ico-prev {background:url(../images/common/tui_page.png) no-repeat 0 0;} .tui-pagination .tui-ico-first {background-position:0 0;} .tui-pagination .tui-ico-prev {background-position:-26px 0;} .tui-pagination .tui-ico-next {background-position:-13px -24px;} .tui-pagination .tui-ico-last {background-position:0 -12px;} .tui-pagination .tui-ico-ellip {background-position:0 -24px;} .tui-pagination .tui-is-disabled .tui-ico-prev {background-position:-26px -12px;} .tui-pagination .tui-is-disabled .tui-ico-first {background-position:-13px 0;} .tui-pagination .tui-is-disabled .tui-ico-next {background-position:-21px -24px;} .tui-pagination .tui-is-disabled .tui-ico-last {background-position:-13px -12px;} .tui-pagination .tui-first, .tui-pagination .tui-last, .tui-pagination .tui-next, .tui-pagination .tui-next-is-ellip, .tui-pagination .tui-prev, .tui-pagination .tui-prev-is-ellip {width:25px; height:25px; line-height:27px;} .tui-pagination .tui-is-disabled:hover {background:transparent; cursor:default;} /* 16) Misc */ .tui-grid-table .m_check {margin:0;} /* 17) 그리드 셀 선택 */ .tui-grid-layer-selection {background-color:#0060ff !important; border-color:#0060ff !important; opacity:0.08;} /* 상단 탭 */ ul.big_tab {width:100%; padding:0; margin:0; background:#fff; height:30px; box-shadow:none; border-bottom:none;} ul.big_tab:after {content:""; display:block; width:0; height:0; float:none; clear:both;} ul.big_tab li {float:left; min-width:150px; margin-right:3px;} ul.big_tab li {margin-bottom:0;} ul.big_tab li a {display:block; width:100%; height:30px; line-height:30px; background:#fff; color:#000; font-size:13px; text-align:center; padding:0; margin:0; border:1px solid #1941b4; border-bottom:none !important; border-radius:10px 10px 0 0; font-weight:700; position:relative; transition:0.2s;} ul.big_tab li a.active {margin-bottom:0;} ul.big_tab li a.active, ul.big_tab li a.active:focus, ul.big_tab li a:hover {background:#00b2ec !important; color:#fff !important; border-bottom:none !important;} .tab-content .tab-pane textarea.form_control.tab_textarea {border-top:2px solid #1941b4; border-radius:0 0 10px 10px;} /*=========================================================================================================================== Contents =============================================================================================================================*/ /* editor */ .editor-wrapper {min-height:250px; background-color:white; border-collapse:separate; border:1px solid #ccc; padding:4px; box-sizing:content-box; box-shadow:rgba(0, 0, 0, 0.07451) 0px 1px 1px 0px inset; border-top-right-radius:3px; border-bottom-right-radius:3px; border-bottom-left-radius:3px; border-top-left-radius:3px; overflow:scroll; outline:none;} .voiceBtn {width:20px; color:transparent; background-color:transparent; transform:scale(2, 2); -webkit-transform:scale(2, 2); -moz-transform:scale(2, 2); border:transparent; cursor:pointer; box-shadow:none; -webkit-box-shadow:none;} div[data-role="editor-toolbar"] {-webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;} /*=========================================================================================================================== 로그인 관련 =============================================================================================================================*/ .login {background:#F7F7F7;} .login .fa-paw {font-size:26px;} a.hiddenanchor {display:none;} .login_wrapper {right:0px; margin:0px auto; margin-top:5%; max-width:350px; position:relative;} .registration_form, .login_form {position:absolute; top:0px; width:100%;} .registration_form {z-index:21; opacity:0; width:100%;} .login_form {z-index:22;} .login_box {padding:20px; margin:auto;} #signup:target ~ .login_wrapper .registration_form, #signin:target ~ .login_wrapper .login_form {z-index:22; animation-name:fadeInLeft; animation-delay:.1s;} #signup:target ~ .login_wrapper .login_form, #signin:target ~.login_wrapper .registration_form { animation-name:fadeOutLeft;} .animate {-webkit-animation-duration:0.5s; -webkit-animation-timing-function:ease; -webkit-animation-fill-mode:both; -moz-animation-duration:0.5s; -moz-animation-timing-function:ease; -moz-animation-fill-mode:both; -o-animation-duration:0.5s; -o-animation-timing-function:ease; -o-animation-fill-mode:both; -ms-animation-duration:0.5s; -ms-animation-timing-function:ease; -ms-animation-fill-mode:both; animation-duration:0.5s; animation-timing-function:ease; animation-fill-mode:both;} .left {float:left;} .alignleft {float:left; margin-right:15px;} .alignright {float:right; margin-left:15px;} .login_content {margin:0 auto; padding:25px 0 0; position:relative; text-align:center; text-shadow:0 1px 0 #fff; min-width:280px;} .login_content a, .login_content .btn-default:hover {text-decoration:none;} .login_content a:hover {text-decoration:underline;} .login_content h1 {font:normal 25px Helvetica, Arial, sans-serif; letter-spacing:-0.05em; line-height:20px; margin:10px 0 30px;} .login_content h1:before, .login_content h1:after {content:""; height:1px; position:absolute; top:10px; width:20%;} .login_content h1:after {background:#7e7e7e; background:linear-gradient(left, #7e7e7e 0%, #fff 100%); right:0;} .login_content h1:before {background:#7e7e7e; background:linear-gradient(right, #7e7e7e 0%, #fff 100%); left:0;} .login_content form {margin:20px 0; position:relative;} .login_content form input[type="text"], .login_content form input[type="email"], .login_content form input[type="password"] {border-radius:3px; -ms-box-shadow:0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -o-box-shadow:0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; box-shadow:0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; border:1px solid #c8c8c8; color:#354f63; margin:0 0 20px; width:100%;} .login_content form input[type="text"]:focus, .login_content form input[type="email"]:focus, .login_content form input[type="password"]:focus { -ms-box-shadow:0 0 2px #ed1c24 inset; -o-box-shadow:0 0 2px #ed1c24 inset; box-shadow:0 0 2px #A97AAD inset; background-color:#fff; border:1px solid #A878AF; outline:none;} #username {background-position:10px 10px !important;} #password {background-position:10px -53px !important;} .login_content form div a {font-size:12px; margin:10px 15px 0 0;} .reset_pass {margin-top:10px !important} .login_content div .reset_pass {margin-top:13px !important; margin-right:39px; float:right;} .separator {border-top:1px solid #D8D8D8; margin-top:10px; padding-top:10px;} .login_content .button {background:#f7f9fa; background:linear-gradient(top, #f7f9fa 0%, #f0f0f0 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f9fa', endColorstr='#f0f0f0', GradientType=0); -ms-box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset; -o-box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset; box-shadow:0 1px 2px rgba(0, 0, 0, 0.1) inset; border-radius:0 0 5px 5px; border-top:1px solid #CFD5D9; padding:15px 0;} .login_content form input[type="submit"], #content form .submit {float:left; margin-left:38px;} /*=========================================================================================================================== 세부페이지 공통 =============================================================================================================================*/ /**Split**/ .split {display:flex; flex-direction:row;} .gutter {background-color:transparent; background-repeat:no-repeat; background-position:50%; position:relative; z-index:100;} .gutter.gutter-horizontal {background-image:url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=='); cursor:col-resize; border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc; background-color:#f4f4f4;} .gutter.gutter-vertical {background-image:url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII='); cursor:row-resize; border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; width:100%; background-color:#f4f4f4;} .infra_container .gutter.gutter-horizontal {border-left:1px solid #dcdcdc; border-right:1px solid #dcdcdc;} .infra_container .gutter.gutter-vertical {border-top:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc;} .div_column_list .card > .form_control {background:#ffffff; /* Old browsers */ background:-moz-linear-gradient(top, #ffffff 0%, #f2f4f7 100%, #f2f4f7 100%); /* FF3.6-15 */ background:-webkit-linear-gradient(top, #ffffff 0%,#f2f4f7 100%,#f2f4f7 100%); /* Chrome10-25,Safari5.1-6 */ background:linear-gradient(to bottom, #ffffff 0%,#f2f4f7 100%,#f2f4f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f4f7',GradientType=0 ); /* IE6-9 */} .card {border-radius:10px; border:1px solid #dcdcdc; background-color:#fff;} #div_chartList div.card {float:left;} #div_chartList .card-img-top { height:225px;} /*=========================================================================================================================== BI-데이터셋 =============================================================================================================================*/ /* 공통 */ #div_main_saveDatasetDetail {height:100%; min-height:100%;} #div_main_saveDatasetDetail .card {border:none; box-shadow:3px 3px 10px rgba(0,0,0,0.1); border-radius:0;} #div_main_saveDatasetDetail #split-0-0, #div_main_saveDatasetDetail #split-0-1 {overflow:auto;} #div_main_saveDatasetDetail #dataSetPanel > div, #div_main_saveDatasetDetail #split-0-0 > div, #div_main_saveDatasetDetail #split-0-1 > div {min-width:440px;} #div_main_saveDatasetDetail #split-1 {position:relative; z-index:2;} /* 연결 데이터 선택 */ #div_main_saveDatasetDetail #dataSetPanel {padding:16px 10px 10px 10px;} #div_main_saveDatasetDetail #dataSetPanel .input-group {margin-bottom:0;} /* 변수 */ #div_main_saveDatasetDetail .card-header {padding:13px 15px 8px 15px; margin-bottom:0; color:#000; background-color:transparent; border-bottom:none; width:calc(100% - 10px); margin:0 auto;} #div_main_saveDatasetDetail .card-header h3 {margin:0; font-size:16px; font-weight:700;} #div_main_saveDatasetDetail .var_area {width:calc(100% - 30px); margin:0 auto;} /* ********************* flowchart ********************* */ #div_main_saveDatasetDetail .flowchart_ctrl {display:flex; flex-direction:row; align-items:center; padding:0; margin:0; position:absolute; top:30px; right:30px; box-shadow:10px 2px 20px rgb(0 0 0 / 10%); z-index:9; border:1px solid #eee;} #div_main_saveDatasetDetail .flowchart_ctrl > li {display:flex; padding:0; margin:0; list-style:none; border-right:1px solid #eef1f7; background-color:#fff;} #div_main_saveDatasetDetail .flowchart_ctrl > li:first-child {border-radius:5px 0 0 5px;} #div_main_saveDatasetDetail .flowchart_ctrl > li:last-child {border-radius:0 5px 5px 0; border:0;} /* tab style */ .nav.nav-tabs.tab_big {border-bottom:1px solid #b1b1b1;} .nav.nav-tabs.tab_big.has_title {margin-bottom:15px;} .nav.nav-tabs.tab_big.has_title li.nav_title {padding:0 30px 0 0;} .nav.nav-tabs.tab_big.has_title li.nav_title h3 {margin:0; font-size:17px; font-weight:700; height:29px; line-height:29px;} .nav.nav-tabs.tab_big.has_title .nav-link {background:#fff;} .nav.nav-tabs.tab_big.has_title li.nav-item {margin-bottom:0;} .nav.nav-tabs.tab_big li.nav-item {margin-right:2px;} .nav.nav-tabs.tab_big li.nav-item:first-child {margin-left:15px;} .nav.nav-tabs.tab_big li.nav-item:last-child {margin-right:0;} .nav.nav-tabs.tab_big .nav-link {padding:5px 15px 2px; text-align:center; font-size:14px; color:#575757; border-color:#b1b1b1; border-bottom:none; transition:0.2s; font-weight:400; border-radius:6px 6px 0 0; position:relative; overflow:hidden; margin:0; background-color:transparent;} .control_left .nav.nav-tabs.tab_big .nav-link {background:transparent;} .nav.nav-tabs.tab_big .nav-link:after {content:""; display:block; z-index:0; width:100%; height:3px; position:absolute; left:0; bottom:-3px; background:#575757; transition:0.3s;} .nav.nav-tabs.tab_big .nav-link:hover:after {bottom:0;} .nav.nav-tabs.tab_big .nav-link span {position:relative; z-index:2; display:inline-block;} .nav.nav-tabs.tab_big li.nav-item.active a, .nav.nav-tabs.tab_big .nav-link:focus, .nav.nav-tabs.tab_big .nav-item.show .nav-link, .nav.nav-tabs.tab_big .nav-link.active {color:#fff; background:#575757; border-color:#575757;} .split .nav.nav-tabs.tab_big .nav-link {min-width:150px;} /* ******************************* Query Builder Style ******************************* */ /* 결과항목 레이아웃 */ #splitResultItems {overflow-x:auto !important;} #splitResultItems ul#filter_item_list {overflow:inherit !important;} /* 조건정보 레이아웃 */ #detailExtraction #splitConditionInfo {overflow-x:hidden;} #detailExtraction #splitConditionInfo h3.sub-title2 {min-width:560px; /* overflow-x:auto; overflow-y:hidden; */} .form_make_area .panel_right_con .settings_box {height:calc(100% - 50px); min-height:inherit;} .view_condition_info {min-width:initial;} /* layout */ .query_builder {font-size:14px; border:1px solid #d4d4d4; border-radius:10px; overflow-x:auto; min-height:calc(100% - 20px);} .query-builder .rules-group-header {position:relative;} .query-builder .rules-group-header .error-container {position:absolute; left:113px; top:3px;} .query-builder .rules-group-header .pull-right {display:inline-block; justify-content:inherit !important; float:right;} .query_builder > .rules-group-container .rule-container, .query_builder > .rules-group-container .group-container, .query_builder > .rules-group-container .rules-group-container {} .query_builder.query-builder .rules-group-container {padding:20px; background:transparent; border:none; display:inline-block; min-width:100%;} .query_builder.query-builder .rules-group-container .rules-group-container {padding:20px 0 0 0;} .query_builder.query-builder .rule-container {border:none; background-color:#f5fbff; box-shadow:0 3px 5px rgba(0,0,0,0.1); white-space:nowrap; display:inline-block; padding:10px 40px 10px 15px; position:relative; width:100%; min-width:910px;} .query_builder.query-builder .rule-container + .rule-container {margin-top:1px;} .query_builder.query-builder .rule-container .error-container {position:absolute; left:0; top:15px;} .query_builder.query-builder .rule-container .rule-actions {position:absolute; right:8px; top:12px;} /* 버튼 */ .query_builder .rules-group-header .group-conditions .btn {padding:2px 14px 1px; font-size:14px; background:#fff; min-width:50px; color:#007aff; border-color:#007aff; font-weight:400;} .query_builder .rules-group-header .group-conditions .btn.active {background-color:#007aff; color:#fff; border-color:#007aff;} .query_builder .rules-group-header .group-conditions .btn.disabled {opacity:1; color:#c8c8c8; border-color:#c8c8c8; pointer-events:none;} .query_builder .rules-group-header .group-conditions .btn.disabled.active {background-color:#c8c8c8; color:#fff !important; border-color:#c8c8c8;} .query_builder .rules-group-header .group-conditions .btn.disabled:after {display:none !important;} .query_builder .rules-group-header .group-conditions .btn:first-child {border-radius:15px 0 0 15px;} .query_builder .rules-group-header .group-conditions .btn:last-child {border-radius:0 15px 15px 0;} /* 타입버튼 */ .query_builder .rules-group-body .rule-value-container .group-conditions {display:inline-flex;} .query_builder .rules-group-body .rule-value-container > div {display:inline-block; vertical-align:middle;} .query_builder .rules-group-body .rule-value-container .group-conditions label {display:inline-block; width:30px; height:30px; padding:0; position:relative; color:#000; border:1px solid #000; transition:0.2s; text-align:center; line-height:28px; font-size:14px;} .query_builder .rules-group-body .rule-value-container .group-conditions label.active {background-color:#000; color:#fff;} .query_builder .rules-group-body .rule-value-container .group-conditions label + label {margin-left:-1px;} .query_builder .rules-group-body .rule-value-container .group-conditions label input[type="radio"] {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; white-space:nowrap;} .query_builder .rules-group-body .rule-value-container .group-conditions label i {margin-right:0;} .query_builder .rules-group-body .rule-value-container .form-group.has-feedback .form-control-feedback.left {border-right:none; margin-left:5px;} .query_builder .rules-group-header .group-conditions input[type="radio"].andor {border:0; clip:rect(0 0 0 0); height:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; width:1px; white-space:nowrap;} .query_builder .group-actions {padding-right:5px;} .query_builder .group-actions .btn.btn-skyblue {padding:1px 14px; color:#000; font-size:14px; background:#fff; min-width:70px; border-color:#000; font-weight:400; border-radius:3px !important; vertical-align:middle;} .query_builder .group-actions .btn[data-add="rule"], .query_builder .group-actions .btn[data-add="group"] {background-color:var(--color-button-active); color:#fff; margin-right:5px; border-color:var(--color-button-active); transition:0.2s;} .query_builder .group-actions .btn[data-add="rule"]:hover, .query_builder .group-actions .btn[data-add="group"]:hover {background-color:#004bb6; border-color:#004bb6;} .query_builder .group-actions .btn[data-add="rule"] i, .query_builder .group-actions .btn[data-add="group"] i {float:right; display:inline-block; line-height:13px; height:21px; margin:0; position:relative; top:2px;} .query_builder .group-actions .btn[data-add="rule"] i:before, .query_builder .group-actions .btn[data-add="group"] i:before {font-size:10px; font-family:"icofont"; content:"\efc2"; font-weight:400; color:#fff;} .query_builder .group-actions button[data-delete] {width:25px; height:25px; border:none; padding:0; text-align:center; line-height:25px; background:none !important; font-size:0; min-width:25px; margin-right:3px;} .query_builder .group-actions button[data-delete] i {display:inline-block; line-height:25px; height:25px; margin:0;} .query_builder .group-actions button[data-delete] i:before {font-size:14px; font-family:"Font Awesome 6 Free"; content:"\f2ed"; color:#000; transition:0.2s;} .query_builder .group-actions button[data-delete]:hover i:before {color:#c06565;} .query_builder .rule-actions button[data-delete] {width:25px; height:25px; border:none; padding:0; text-align:center; line-height:25px; background:none !important; font-size:0; min-width:25px; margin-right:0;} .query_builder .rule-actions button[data-delete] i {display:inline-block; line-height:25px; height:25px; margin:0;} .query_builder .rule-actions button[data-delete] i:before {font-size:14px; font-family:"Font Awesome 6 Free"; content:"\f2ed"; color:#000; transition:0.2s;} .query_builder .rule-actions button[data-delete]:hover i:before {color:#c06565;} /* 라인 */ .query-builder .rules-list {padding-left:23px;} .query-builder .rules-list > *::before, .query-builder .rules-list > *::after {content:''; position:absolute; left:-10px; width:10px; height:calc(50% + 4px); border-color:#d4d4d4; border-style:solid;} .query-builder .rules-list > *::before {top:-10px; border-width:0 0 1px 1px; height:44px;} .query-builder .rules-list > *::after {top:24px; border-width:0 0 0 1px; height:calc(100% - 26px);} .query-builder .rules-list > .rule-container + .rule-container:before {top:-12px; height:calc(50% + 14px);} .query-builder .rules-list > .rule-container:after {top:18px; height:calc(50% + 14px);} /* dataTavle */ #div_main_saveDatasetDetail .table.dataTable > tbody td {line-height:25px;} /* dragable_area */ .dragable_area ul.list-group {overflow:auto; border:1px solid #dcdcdc; border-radius:0; padding:10px 0;} .dragable_area ul.list-group .list-group-item {border-radius:0 !important; border:none; color:#404040;} .dragable_area ul.list-group .list-group-item-action:focus, .dragable_area ul.list-group .list-group-item-action:hover {background-color:#f4f4f4;} .dragable_area ul.list-group .list-group-item.active {color:#404040; background-color:#f4f4f4;} /*=========================================================================================================================== BI-위젯 =============================================================================================================================*/ /* 위젯용 Bootstrap css 추가 */ #biWidget .input-group {position:relative; display:flex; flex-wrap:wrap; align-items:stretch; width:100%;} #biWidget .input-group > .form-control, #biWidget .input-group > .form-select, #biWidget .input-group > .form-select-sm, #biWidget .input-group > .form-floating {position:relative; flex:1 1 auto; width:1%; min-width:0; height:auto;} #biWidget .input-group > .form-control:focus, #biWidget .input-group > .form-select:focus, #biWidget .input-group > .form-floating:focus-within {z-index:5;} #biWidget .input-group > .form-control:focus, #biWidget .input-group > .form-select:focus {outline:none;} #biWidget .input-group .btn {position:relative; z-index:2;} #biWidget .input-group .btn:focus {z-index:5;} #biWidget .input-group .btn-group {width:100%;} #biWidget .input-group .btn-group .btn + .btn-check + .btn {border-left:none;} #biWidget .input-group .dropdown.bootstrap-select button.dropdown-toggle {border:none;} #biWidget .input-group-text {display:flex; align-items:center; padding:0.375rem 0.75rem; font-weight:400; line-height:1.5; color:#000; text-align:center; white-space:nowrap; background-color:#f8f9fa;; border:1px solid #dcdcdc; border-radius:0.375rem;} #biWidget .input-group-lg > .form-control, #biWidget .input-group-lg > .form-select, #biWidget .input-group-lg > .input-group-text, #biWidget .input-group-lg > .btn {padding:0.5rem 1rem; border-radius:0.5rem;} #biWidget .input-group-sm > .form-control, #biWidget .input-group-sm > .form-select, #biWidget .input-group-sm > .input-group-text, #biWidget .input-group-sm > .btn {padding:0.25rem 0.5rem; border-radius:0.25rem;} #biWidget .input-group-lg > .form-select, #biWidget .input-group-sm > .form-select {padding-right:3rem;} #biWidget .input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), #biWidget .input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), #biWidget .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, #biWidget .input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {border-top-right-radius:0; border-bottom-right-radius:0;} #biWidget .input-group.has-validation > :nth-last-child(n+3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), #biWidget .input-group.has-validation > .dropdown-toggle:nth-last-child(n+4), #biWidget .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-control, #biWidget .input-group.has-validation > .form-floating:nth-last-child(n+3) > .form-select {border-top-right-radius:0; border-bottom-right-radius:0;} #biWidget .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {margin-left:calc(1px * -1); border-top-left-radius:0; border-bottom-left-radius:0;} #biWidget .input-group > .form-floating:not(:first-child) > .form-control, #biWidget .input-group > .form-floating:not(:first-child) > .form-select {border-top-left-radius:0; border-bottom-left-radius:0;} /* 전체 영역 */ .widget_area {display:flex; justify-content:space-between; width:100%; height:calc(100vh - 105px); position:relative; margin:0;} /* sidebar */ .widget_area ul.widget_sidebar {padding:0; margin:0; width:30px; height:100%; margin-right:10px; display:none;} .widget_area ul.widget_sidebar li {padding:0; margin:0; list-style:none;} .widget_area ul.widget_sidebar li button.btn_sidebar {border:none; background:none; display:none; height:30px; line-height:30px; color:#000; transition:0.2s; font-size:18px;} .widget_area ul.widget_sidebar li button.btn_sidebar:hover {color:#54b9ff;} .widget_area ul.widget_sidebar li button.btn_sidebar.active {display:block;} .widget_area #biWidget {width:100%;} /* folding */ .widget_area.folding ul.widget_sidebar {display:block;} .widget_area.folding #biWidget {width:calc(100% - 40px);} /* 기존 CSS - by 김건희 선임 */ #biWidget #cardContainer {overflow-x:auto; white-space:nowrap;} #biWidget .chart_sheet_box {height:80%; width:80%; overflow:scroll;} #biWidget .chart_sheet {width:80%; font-size:14px; max-width:100%; padding-left:5px; padding-right:0px;} #biWidget .chart_sheet_box > .card-body:hover {cursor:pointer;} #biWidget .card.active {background-color:#0d6efd;} #biWidget .card.active > * {color:white;} #biWidget .btn_box {width:5px; font-size:14px;} #biWidget i.fa:hover {cursor:pointer;} #biWidget i.fa-solid:hover{cursor:pointer;} #biWidget .div_loading {background:rgba(0, 0, 0, 0.54); height:100%; left:0; position:fixed; top:0; width:100%; z-index:999999;} #biWidget .lds-ring {display:block; position:absolute; width:80px; height:80px; top:35%; left:42%; margin:auto;} #biWidget .lds-ring div {box-sizing:border-box; display:block; position:absolute; width:200px; height:200px; margin:8px; border:8px solid #fff; border-radius:50%; animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-color:#fff transparent transparent transparent;} #biWidget .lds-ring div:nth-child(1) {animation-delay:-0.45s;} #biWidget .lds-ring div:nth-child(2) {animation-delay:-0.3s;} #biWidget .lds-ring div:nth-child(3) {animation-delay:-0.15s;} @keyframes lds-ring { 0% {transform:rotate(0deg);} 100% {transform:rotate(360deg);} } /* 공통 */ #biWidget {min-height:100%;} #biWidget .card {border:none; box-shadow:3px 3px 10px rgba(0,0,0,0.1);} #biWidget .card .card {box-shadow:none;} #biWidget .card .card-body {padding:13px 14px; overflow-y:auto;} #biWidget .card .card-body .card {border-radius:0;} #biWidget .form-group {margin-bottom:0;} #biWidget .input-group {margin-bottom:0;} #biWidget .input-group + #div_field, #biWidget .input-group + #div_lLeftTop, #biWidget .input-group + #div_tLeftTop, #biWidget .input-group + #div_dataZoom, #biWidget #div_field + .input-group, #biWidget #div_lLeftTop + .input-group, #biWidget #div_tLeftTop + .input-group, #biWidget #div_dataZoom + .input-group, #biWidget .input-group + .input-group {margin-top:10px;} #biWidget .input-group label.input-group-text {margin-bottom:0;} #biWidget .input-group .select2-container .selection {display:block; height:100%;} #biWidget .input-group .select2-container .selection .select2-selection {height:36px; padding:2px 30px 3px 2px;} #biWidget .select2-container .select2-search--inline .select2-search__field {margin-top:1px;} #biWidget .select2-container--default .select2-selection--single .select2-selection__clear {margin-right:0;} #biWidget .select2-container--default .select2-selection--multiple .select2-selection__rendered {padding-top:0; height:100%;} /* panel 상단영역 */ #biWidget .card-header {padding:15px 2px 10px 6px; margin-bottom:0; color:#000; background-color:transparent; border-bottom:none; width:calc(100% - 28px); margin:0 auto; position:relative; border-bottom:1px solid #ababab;} #biWidget h3.card-title {margin:0; font-size:16px; font-weight:700; min-width:200px;} #biWidget h3.card-title i {font-size:14px; margin-right:10px;} #biWidget .card-header button.btn_right {position:absolute; right:0; top:10px;} /* Chart Name 수정 */ #biWidget .card-header .modify_chart_name {position:absolute; right:5px; top:15px;} #biWidget .card-header input.chart_title_input {width:calc(100% - 30px); font-weight:700; margin-top:-5px;} #biWidget #splitWidgetLeft, #biWidget #splitWidgetCenter, #biWidget #splitWidgetRight {height:100%;} #biWidget #splitWidgetLeft > .card-body, #biWidget #splitWidgetCenter > .card-body, #biWidget #splitWidgetRight > .card-body {overflow:auto;} /* 가로 스크롤 발생 */ #biWidget #splitWidgetLeft > .card-body > .form-group {min-width:280px;} #biWidget #splitWidgetLeft > .card-body > .div_column_list {min-width:260px;} #biWidget #splitWidgetCenter > .card-body > div, #biWidget #splitWidgetCenter > .card-body > ul.option_select_nav {min-width:400px;} #biWidget #splitWidgetCenter2 > .card-body > * {min-width:400px;} #biWidget #splitWidgetCenter2 .input-group-text {min-width:80px; line-height:23px;} #biWidget #splitWidgetCenter2 .indicator_form .input-group-text {min-width:auto;} #biWidget #splitWidgetCenter2 .indicator_form .input-group-text .bi-trash {margin-right:0;} /* split css 추가 */ #biWidget .gutter.gutter-horizontal {border-left:none; border-right:none; background-color:transparent;} #biWidget .gutter.gutter-vertical {border-top:none; border-bottom:none; width:100%; background-color:transparent;} /* **************** 좌측 패널 **************** */ #biWidget #splitWidgetLeft .input-group-text {min-width:88px;} #biWidget #splitWidgetLeft .div_cloumn_card .collapse {border:1px solid #dcdcdc; border-top:none;} #biWidget #splitWidgetLeft .div_cloumn_card .collapsing {border:1px solid #dcdcdc; border-top:none;} #biWidget #splitWidgetLeft .div_cloumn_card .card .card-body {padding-right:0;} #biWidget #splitWidgetLeft .div_cloumn_card .card .card-body .btn_area {text-align:right; margin-bottom:10px; padding-right:14px;} #biWidget #splitWidgetLeft .div_cloumn_card ul.list-group {border:none; max-height:calc(100vh - 350px); overflow-y:auto; margin-bottom:0; padding-right:14px;} #biWidget #splitWidgetLeft .div_cloumn_card ul.list-group li.list-group-item {padding:2px 0; border:none;} #biWidget #splitWidgetLeft .div_cloumn_card ul.list-group li.list-group-item i {margin-left:5px;} #biWidget #splitWidgetLeft .div_column_list {padding-top:15px; margin-top:15px; border-top:1px solid #dcdcdc;} #biWidget #splitWidgetLeft .div_column_list .card > .form_control {padding-right:30px; cursor:pointer; position:relative;} #biWidget #splitWidgetLeft .div_column_list .card > .form_control:after {content:""; display:block; position:absolute; width:30px; height:30px; right:0; top:0; background:url(../images/icon/form_control_arrow.svg) no-repeat right 6px center; background-size:16px 12px; transition:0.2s; transform:rotate(180deg);} #biWidget #splitWidgetLeft .div_column_list .card > .form_control.collapsed:after {transform:rotate(0deg);} #biWidget #splitWidgetLeft .div_column_list .card > .form_control i {font-size:12px; margin-right:5px;} /* **************** 가운데 패널 **************** */ #biWidget #splitWidgetCenter {position:relative;} #biWidget #splitWidgetCenter .input-group-text {min-width:80px; line-height:21px;} #biWidget #splitWidgetCenter #settingsPanel > .card.chart_type_setting {} #biWidget #splitWidgetCenter #settingsPanel .card > .form_control {padding-right:30px; cursor:pointer; position:relative; border-radius:10px 10px 0 0;} #biWidget #splitWidgetCenter #settingsPanel .card > .form_control:after {content:""; display:block; position:absolute; width:30px; height:30px; right:0; top:0; background:url(../images/icon/form_control_arrow.svg) no-repeat right 6px center; background-size:16px 12px; transition:0.2s; transform:rotate(180deg);} #biWidget #splitWidgetCenter #settingsPanel .card > .form_control.collapsed:after {transform:rotate(0deg);} #biWidget #splitWidgetCenter #settingsPanel .card > .form_control i {font-size:12px; margin-right:5px;} #biWidget #splitWidgetCenter #settingsPanel .collapse {border:1px solid #dcdcdc; border-top:none; border-radius:0 0 10px 10px;} #biWidget #splitWidgetCenter #settingsPanel .collapsing {border:1px solid #dcdcdc; border-top:none;} #biWidget #splitWidgetCenter #settingsPanel #collapseChartType .btn_icon {font-size:12px;} #biWidget #splitWidgetCenter #settingsPanel #collapseChartType .btn_icon:hover + .btn_icon {border-left-color:#5b95ff;} /* 탭 */ #biWidget #splitWidgetCenter .option_select_nav {display:flex; justify-content:space-between; margin:15px 0;} #biWidget #splitWidgetCenter .option_select_nav .nav-link {min-width:auto; padding:4px 10px 2px;} #biWidget #splitWidgetCenter .option_select_nav li.nav-item {width:25%; text-align:center; margin-right:0;} #biWidget #splitWidgetCenter .option_select_nav li.nav-item:nth-child(1) {margin-left:0; width:21%;} #biWidget #splitWidgetCenter .option_select_nav li.nav-item:nth-child(2) {width:25%;} #biWidget #splitWidgetCenter .option_select_nav li.nav-item:nth-child(3) {width:29%;} #biWidget #splitWidgetCenter .option_select_nav li.nav-item:nth-child(4) {margin-right:0; width:25%;} #biWidget #splitWidgetCenter .tab-option .card {margin:15px 0;} #biWidget #splitWidgetCenter .tab-option .card-body + .card-body {padding-top:0;} /* 체크박스 */ #biWidget #splitWidgetCenter .m_check {margin:6px 0 0 10px; padding:0;} #biWidget #splitWidgetCenter .m_check > input[type=checkbox]:focus {outline:none;} #biWidget #splitWidgetCenter .m_check > input[type=checkbox] + label {padding-left:16px;} /* Settings 버튼영역 */ #biWidget #splitWidgetCenter .widget_center_btn {text-align:center; padding:15px 10px; min-width:260px;} #biWidget #splitWidgetCenter .widget_center_btn button.m_btn {width:30%;} /* 위젯용 Detail Settings - btn-group */ #biWidget #splitWidgetCenter2 .form-control.btn-group {padding:0; border:none;} /* 간편설정 con */ #div_chartSet .select2-container--default .select2-selection--multiple {position:relative;} #div_chartSet .select2-container--default .select2-selection--multiple .select2-selection__choice {position:relative; padding:3px 9px 3px 8px;} /* #div_chartSet .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {position:absolute; left:0; top:0; width:13px; margin-right:0; text-align:center; line-height:24px; min-height:26px;} */ #div_chartSet .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {display:none;} #div_chartSet .select2-container--default .select2-selection--multiple .select2-selection__choice__display {padding-right:0;} #div_chartSet .select2-container--default .select2-selection--multiple .select2-selection__choice, #div_chartSet .select2-container--default .select2-selection--multiple .select2-selection__clear {margin-top: 2px; border: 1px solid #2c71b1; border-radius: 4px; background-color: #ffffff; height: 26px;} #div_chartSet .select2-container--default .select2-selection--multiple .select2-selection__clear {border-radius: 5px; height: 28px; line-height: 19px; border: 0px; margin-right:20px; margin-top:3px; font-size: 16px; background-color:transparent; color: #000;} #div_chartSet .select2-container--default .select2-selection--multiple .select2-selection__clear:hover {color:#d9534f;} /* selsct2 멀티 화살표 추가 */ #div_chartSet .select2-container--default .select2-selection--multiple:after {display:inline-block; margin-top:-1px; content:"\eac8"; width:20px; line-height:38px; position:absolute; top:0; right:0; bottom:0; color:#a8a8a8; font-family:"IcoFont"; font-size:16px; font-weight:600; text-align:center;} /* 시리즈 상단 옵션영역 */ .series_tree_option {margin-bottom:10px;} .series_tree_option:after {content:""; display:block; width:100%; height:0; clear:both; float:none;} .series_tree_option .series_info {float:left; width:calc(100% - 120px); margin-top:3px;} .series_tree_option .series_info span.series_num {font-size:14px; font-weight:400; line-height:22px;} .series_tree_option .series_info span.series_num strong {font-size:16px; color:#54b9ff; font-weight:700;} /* 시리즈 관련 기능 */ .series_tree_option .series_info ul.series_dot_lst {padding:0; margin:0 0 0 8px; display:inline-block; vertical-align:middle;} .series_tree_option .series_info ul.series_dot_lst li {display:inline-block; padding:0; margin:0; list-style:none; line-height:22px;} .series_tree_option .series_info ul.series_dot_lst li a {display:inline-block; width:10px; height:10px; border-radius:5px; background:#999; text-indent:-9999px; position:relative; top:5px;} /* 시리즈 추가 버튼 */ .series_tree_option button#btn_addSeries {width:120px; float:right;} /* tree */ .option_tree {padding:13px 13px 13px; background:#f8f8f8; border-top:1px solid #ddd; border-bottom:1px solid #ddd; width:calc(100% + 28px); margin:0 -14px; /* min-height:calc(100vh - 422px); */} .option_tree > div {margin-bottom:10px;} .option_tree > div:last-child {margin-bottom:0;} .option_tree ul {margin-left:5px; margin-bottom:0;} .option_tree ul li {list-style-type:none; margin:7px 0 7px 0px; position:relative;} .option_tree ul li:before {content:""; position:absolute; top:-10px; left:-20px; border-left:1px solid #ddd; border-bottom:1px solid #ddd; width:20px; height:26px;} .option_tree ul li:after {position:absolute; content:""; top:15px; left:-20px; border-left:1px solid #ddd; border-top:1px solid #ddd; width:20px; height:100%;} .option_tree ul li:last-child:after {display:none;} .option_tree span {display:block; border:1px solid #ddd; padding:4px 20px 4px 14px; color:#333; text-decoration:none; background:#fff; transition:0.2s; line-height:20px; font-size:14px; height:30px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; position:relative; z-index:2;} .option_tree span:hover, .option_tree span:focus {background:#effafe; color:#000; border:1px solid #2b58e6;} .option_tree span:hover + ul li span, .option_tree span:focus + ul li span {background:#effafe; color:#000; border:1px solid #2b58e6;} .option_tree span i {position:absolute; right:0; top:50%; transform:translate(0,-50%); cursor:pointer; font-size:11px; width:20px; height:30px; line-height:30px;} .option_tree ul li span:hover + ul li:after, .option_tree ul li span:hover + ul li:before, .option_tree ul li span:focus + ul li:after, .option_tree ul li span:focus + ul li:before {border-color:#aaa;} .option_tree .REQUIRED > span {background:rgba(255,0,0,0.05);} .option_tree .REQUIRED > span::after {content:'*'; color:#ff0000;} .option_tree .active span + ul li span, .option_tree .active span {background:#effafe; color:#000; border:1px solid #2b58e6;} .option_tree .active span + ul li:after, .option_tree .active span + ul li:before {border-color:#aaa;} .option_tree li:not(:has(ul)) i {display:none;} /* 테마 */ .series_tree_option .series_info ul.series_dot_lst li a.theme0 {background:#41a8ea;} .series_tree_option .series_info ul.series_dot_lst li a.theme1 {background:#7c6ef5;} .series_tree_option .series_info ul.series_dot_lst li a.theme2 {background:#f38651;} .series_tree_option .series_info ul.series_dot_lst li a.theme3 {background:#24b4ad;} .series_tree_option .series_info ul.series_dot_lst li a.theme4 {background:#f3458a;} .option_tree span:before {content:""; display:block; width:4px; height:100%; position:absolute; left:0; top:0; background:#999;} .option_tree .theme0 span:before {background:#41a8ea;} .option_tree .theme1 span:before {background:#7c6ef5;} .option_tree .theme2 span:before {background:#f38651;} .option_tree .theme3 span:before {background:#24b4ad;} .option_tree .theme4 span:before {background:#f3458a;} /* **************** Detail Settings 패널 **************** */ h4.detail_option_title {font-size:16px; padding:0 0 0 10px; position:relative;} h4.detail_option_title:before {content:""; display:block; width:4px; height:4px; border-radius:2px; background:#54b9ff; position:absolute; left:0; top:7px;} /* 선택된 메뉴 Tree */ ul.setting_selected_list, ul.setting_selected_list ul {margin:0; padding:0; list-style-type:none;} ul.setting_selected_list {padding:7px 3px 10px; background:#f8f8f8; border:1px solid #ddd; border-radius:10px; margin-bottom:20px;} ul.setting_selected_list ul {position:relative; margin-left:10px;} ul.setting_selected_list ul:before {content:""; display:block; position:absolute; top:0; left:0; bottom:0; width:0; border-left:1px solid #ccc;} ul.setting_selected_list li {position:relative; margin:0; padding:3px 0 0 12px; color:#ccc;} ul.setting_selected_list li span { position:relative; color:#333; text-decoration:none; font-size:13px; font-weight:400; line-height:20px; transition:0.2s;} ul.setting_selected_list li span:hover, ul.setting_selected_list li span:hover + ul li span {color:#54b9ff;} ul.setting_selected_list ul li:before {content:""; display:block; position:absolute; top:13px; left:0; width:8px; height:0; border-top:1px solid #ccc;} ul.setting_selected_list ul li:last-child:before {top:13px; bottom:0; height:auto; background:#f8f8f8;} /* **************** 오른쪽 패널 **************** */ /* Chart Name */ #biWidget #splitWidgetRight #splitWidgetRight1 .card-body {position:relative;} #biWidget #splitWidgetRight #div_chart_place {position:relative; z-index:10;} #biWidget #splitWidgetRight #div_chart_place canvas {background:#fff !important;} #biWidget #splitWidgetRight p.chart_select_txt {text-align:center; font-size:20px; font-weight:400; color:#999; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:100%; margin:0;} /* Dataset DataList */ #biWidget #splitWidgetRight #splitWidgetRight2 {width:100%;} #biWidget #splitWidgetRight #splitWidgetRight2 .row {margin:0; overflow:visible;} /* **************** 차트 선택 팝업 **************** */ ul.chart_select_lst {padding:0; margin:0; overflow:auto;} ul.chart_select_lst:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} ul.chart_select_lst li {float:left; width:18%; margin-right:2.5%; list-style:none; border:1px solid #e9e9e9; border-radius:2px; margin-bottom:12px; transition:0.2s;} ul.chart_select_lst li:nth-child(5n) {margin-right:0;} ul.chart_select_lst li:hover {border-color:#0036ff;} ul.chart_select_lst li a {display:block; min-height:120px; text-align:center; position:relative; padding:10px; transition:0.2s; background:#fff;} ul.chart_select_lst li a:hover {color:#0036ff;} ul.chart_select_lst li a span {display:block; text-align:left;} ul.chart_select_lst li a img {display:inline-block; margin-top:5px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} /*=========================================================================================================================== BI-SQL =============================================================================================================================*/ /* 사이드바 */ .sql_area {display:flex; justify-content:space-between; width:calc(100% + 20px); height:100%; position:relative; margin:0 -10px;} .sql_area ul.sql_sidebar {padding:0; margin:0; width:30px; height:100%; margin-right:10px; display:none; display:none;} .sql_area ul.sql_sidebar li {padding:0; margin:0; list-style:none;} .sql_area ul.sql_sidebar li button.btn_sidebar {border:none; background:none; display:block; height:30px; line-height:30px; color:#000; transition:0.2s; font-size:18px;} .sql_area ul.sql_sidebar li button.btn_sidebar:hover {color:#1fa0dc;} .sql_area #biDash {width:100%;} /* folding */ .sql_area.folding ul.sql_sidebar {display:block;} .sql_area.folding #biSql {width:calc(100% - 40px);} /* 공통 */ #biSql {height:100%; min-height:100%; width:100%;} #biSql .card {border:none; box-shadow:3px 3px 10px rgba(0,0,0,0.1); border-radius:0;} #biSql .card .card {box-shadow:none;} #biSql .card .card-body {padding:13px 14px; overflow-y:auto;} #biSql .card .show.collapse {height:0 !important;} #biSql .card .show.collapse.in {height:auto !important;} #biSql .input-group {margin-bottom:0;} #biSql .input-group .select2-container {margin-right:0;} #biSql .input-group + .input-group {margin-top:10px;} /* panel 상단영역 */ #biSql .card-header {padding:15px 2px 10px 6px; margin-bottom:0; color:#000; background-color:transparent; border-bottom:none; width:calc(100% - 20px); margin:0 auto; position:relative; border-bottom:1px solid #ababab;} #biSql h3.card-title {margin:0; font-size:16px; font-weight:700; min-width:200px;} #biSql h3.card-title i {font-size:14px; margin-right:10px;} #biSql .card-header button.btn_right {position:absolute; right:0; top:10px;} /* 가로 스크롤 발생 */ #biSql #splitSqlLeft, #biSql #splitSqlRight {height:100%; overflow:hidden;} #biSql #splitSqlLeft > .card-body, #biSql #splitSqlRight > .card-body {overflow:auto;} #biSql #splitSqlLeft > .card-body > div {min-width:300px;} #biSql #splitSqlLeft > .card-body > div.form-group {min-width:320px;} /* **************** 좌측 패널 **************** */ #biSql #splitSqlLeft {height:auto;} #biSql #splitSqlLeft .input-group .input-group-text i:before {position:relative; top:2px;} #biSql #splitSqlLeft .gutter {height:auto;} #biSql #splitSqlLeft .div_cloumn_card .collapsing {border:1px solid #dcdcdc; border-top:none;} #biSql #splitSqlLeft .div_cloumn_card .collapse {border:1px solid transparent; border-top:none; position:relative;} #biSql #splitSqlLeft .div_cloumn_card .card .show.collapse.in {border:1px solid #dcdcdc; top:-1px;}#biSql #splitSqlLeft .div_cloumn_card ul.list-group {border:none;} #biSql #splitSqlLeft .div_cloumn_card ul.list-group li.list-group-item {padding:5px 0; border:none;} #biSql #splitSqlLeft .div_column_list {padding-top:15px; margin-top:15px; border-top:1px solid #dcdcdc;} #biSql #splitSqlLeft .div_column_list .card > .form_control {padding-right:30px; cursor:pointer; position:relative;} #biSql #splitSqlLeft .div_column_list .card > .form_control:after {content:""; display:block; position:absolute; width:30px; height:30px; right:0; top:0; background:url(../images/icon/form_control_arrow.svg) no-repeat right 6px center; background-size:16px 12px; transition:0.2s; transform:rotate(180deg);} #biSql #splitSqlLeft .div_column_list .card > .form_control.collapsed:after {transform:rotate(0deg);} #biSql #splitSqlLeft .div_column_list .card > .form_control i {font-size:12px; margin-right:5px;} #biSql #splitSqlLeft .div_column_list .card .btn_area {padding:5px 20px 20px; text-align:right;} /* 세부 Columns 리스트 */ #biSql .div_column_list ul.list-group {padding:0; margin:0;} #biSql .div_column_list ul.list-group li.table_list {padding:0; margin-bottom:10px; padding-bottom:10px; list-style:none; border-bottom:1px solid #ddd;} #biSql .div_column_list ul.list-group li.table_list:last-child {margin-bottom:0; padding-bottom:0; border-bottom:none;} #biSql li.table_list .tl_title {position:relative;} #biSql li.table_list .tl_title h4.title {width:calc(100% - 20px); font-size:18px; font-weight:700; color:#1fa0dc; height:20px; line-height:20px; margin-bottom:6px; box-sizing:content-box;} #biSql li.table_list .tl_title h4.title i {margin-right:8px; font-size:16px;} #biSql li.table_list .tl_title h5.sub_title {width:100%; height:20px; line-height:30px; font-weight:700; color:#000; line-height:20px; font-size:16px; margin-bottom:10px; position:relative; padding-left:20px;} #biSql li.table_list .tl_title h5.sub_title:before {content:""; display:block; width:10px; height:10px; border-left:1px solid #ccc; border-bottom:1px solid #ccc; position:absolute; left:7px; top:0;} #biSql li.table_list .tl_title h5.sub_title i {margin-right:8px; font-size:12px;} #biSql li.table_list .tl_title button.btn_delete_list {position:absolute; right:0; top:3px; width:20px; height:20px; line-height:20px; border:none; outline:none; transition:0.2s; color:#333; font-size:18px; background:none; padding:0;} #biSql li.table_list .tl_title button.btn_delete_list:hover {color:#1fa0dc;} #biSql li.table_list .tl_info {font-size:14px; overflow:hidden; display:flex; justify-content:space-between; margin-bottom:3px;} #biSql li.table_list .tl_info:last-child {margin-bottom:0;} #biSql li.table_list .tl_info span {width:50%;} #biSql li.table_list .tl_info span.property1 {text-align:left;} #biSql li.table_list .tl_info span.property2 {text-align:right;} /* 우측 패널 */ #splitSqlRight #splitSqlRightEdit .query_edit_function {position:absolute; right:10px; top:7px; width:428px;} #splitSqlRight #splitSqlRightEdit .query_edit_function .input-group {width:200px; display:inline-block;} #splitSqlRight #splitSqlRightEdit .query_edit_function .input-group .input-group-btn {overflow:hidden; width:80px; display:inline-block;} #splitSqlRight #splitSqlRightEdit .query_edit_function .input-group .input-group-btn button {float:left; border-radius:0;} #splitSqlRight #splitSqlRightEdit .query_edit_function .input-group .input-group-btn button i {margin-right:5px;} #splitSqlRight #splitSqlRightEdit .query_edit_function .input-group .executionTime {width:110px; display:block; float:right; text-align:center; line-height:25px;} #splitSqlRight #splitSqlRightEdit .query_edit_function .input-group .executionTime i {margin-right:5px;} #splitSqlRight #splitSqlRightEdit .query_edit_function .saveAs {float:right;} #splitSqlRight #splitSqlRightEdit .code_editor_area {width:100%; height:100%; border:1px solid #ddd;} /* Query Plan Tree */ #splitSqlRight #splitSqlRightTab .query_plan_tree_title {border-radius:0px; text-align:center; border-bottom:1px solid #ababab; padding:0 10px; margin-bottom:10px; height:40px; line-height:40px;} #splitSqlRight #splitSqlRightTab #action-plan-tree > ul {padding:0; margin:0;} #splitSqlRight #splitSqlRightTab #action-plan-tree > ul li {list-style:none;} #splitSqlRight #splitSqlRightTab #action-plan-tree > ul > li {padding-left:12px; position:relative; font-weight:700; font-size:16px;} #splitSqlRight #splitSqlRightTab #action-plan-tree > ul > li:before {content:""; display:block; width:4px; height:4px; background:var(--color-button-active); border-radius:2px; position:absolute; left:3px; top:9px;} #splitSqlRight #splitSqlRightTab #action-plan-tree > ul > li > ul {padding:0; margin:0;} #splitSqlRight #splitSqlRightTab #action-plan-tree > ul > li > ul > li {font-weight:400; font-size:14px; padding-left:16px; position:relative;} #splitSqlRight #splitSqlRightTab #action-plan-tree > ul > li > ul > li:before {content:""; display:block; width:8px; height:6px; position:absolute; left:3px; top:4px; border-left:1px solid #ddd; border-bottom:1px solid #ddd;} /*=========================================================================================================================== BI-Dashboard =============================================================================================================================*/ /*====================================== Dashboard & Widget List ========================================*/ .card_list {display:flex; flex-wrap:wrap; justify-content:flex-start; height:auto !important;} .card_list .card_item {width:calc((100% - 60px) / 5); height:180px; margin:0 15px 15px 0; transition:0.3s; padding:10px; border:1px solid #dcdcdc; border-radius:5px; background:#fff; display:flex; justify-content:space-between; position:static !important; left:inherit !important; top:inherit !important;} .card_list .card_item:nth-child(5n) {margin-right:0;} .card_list .card_item:hover {box-shadow:0 10px 20px rgba(0,0,0,0.1);} .card_list .card_item .card_thumbnail {width:200px; display:flex; align-items:center; border:1px solid #d9d9d9; padding:10px;} .card_list .card_item .card_thumbnail img {display:block; width:100%; height:auto;} .card_list .card_item .card_body {width:calc(100% - 230px); display:flex; align-content:center; flex-wrap:wrap;} .card_list .card_item .card_body .card_title {display:block; width:100%; display:-webkit-box; white-space:normal; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; font-size:15px; margin:0 0 10px; max-height:40px; line-height:20px; margin:0 0 5px;} .card_list .card_item .card_body .card_text {display:block; width:100%; margin:0;} .card_list .card_item .card_body .card_date {display:block; width:100%; margin:0 0 10px;} .card_list .card_item .card_body .card_btn {display:block; width:100%;} @media (max-width:2200px) { .card_list .card_item {width:calc((100% - 45px) / 4);} .card_list .card_item:nth-child(5n) {margin-right:15px;} .card_list .card_item:nth-child(4n) {margin-right:0;} } @media (max-width:1800px) { .card_list .card_item {width:calc((100% - 30px) / 3);} .card_list .card_item:nth-child(5n) {margin-right:15px;} .card_list .card_item:nth-child(4n) {margin-right:15px;} .card_list .card_item:nth-child(3n) {margin-right:0;} } @media (max-width:1400px) { .card_list .card_item {width:calc((100% - 15px) / 2);} .card_list .card_item:nth-child(5n) {margin-right:15px;} .card_list .card_item:nth-child(4n) {margin-right:15px;} .card_list .card_item:nth-child(3n) {margin-right:15px;} .card_list .card_item:nth-child(2n) {margin-right:0;} } /* 신규등록 버튼 */ .card_list .card_item.new {border:0; padding:0; background:none;} .card_list .card_item.new .btn_new_lst {display:flex; flex-direction:column; justify-content:center; align-items:center; width:100%; height:100%; color:#bec2c5; border-radius:5px; border:2px dashed #e1e3e7; background-color:#fff;font-size:17px;} .card_list .card_item.new .btn_new_lst:before {display:block;content:"\eee1";padding:10px;font-family:'icofont';color:#bec2c5;font-size:60px;transform:rotate(-45deg);} .card_list .card_item.new .btn_new_lst span {position:relative; top:-20px;} .card_list .card_item.new:hover{box-shadow:none;} .card_list .card_item.new:hover .btn_new_lst{color:#000;border-color:#26a1ff;background-color:#f3f8ff;} .card_list .card_item.new:hover .btn_new_lst:before{color:#26a1ff;} /* 데이터 없음 */ .card_list .card_item.no_data {padding:0; background:#fff url(../images/icon/icon_noData.png) no-repeat center 45px; position:relative; padding:110px 0 0; text-align:center;} .card_list .card_item.no_data span {color:#bec2c5; display:block; width:100%; font-size:17px;} /*====================================== Grid-stack ========================================*/ /** 테마 관련 */ .grid-stack-item-content.x_panel.dark {background-color:#505050; color:#eeeeee;} .grid-stack-item-content.x_panel.dark * input {background-color:#505050;} .grid-stack-item-content.x_panel.vintage {background-color:#fef8ef;} .grid-stack-item-content.x_panel.vintage * input {background-color:#fef8ef;} /* panel_toolbox/*/ ul.panel_toolbox {float:right; min-width:25px; margin-top:6px; display:none;} ul.panel_toolbox > li {float:left; cursor:pointer} ul.panel_toolbox > li > a {padding:5px; color:#555; font-size:12px; transition:0.2s;} ul.panel_toolbox > li > a:hover {color:#54b9ff;} .card.grid-stack-item:hover, .card.grid-stack-item:active, .card.grid-stack-item:foxus {z-index:100;} .card.grid-stack-item:hover ul.panel_toolbox, .card.grid-stack-item:active ul.panel_toolbox, .card.grid-stack-item:focus ul.panel_toolbox {display:block;} /* 김건희 작성 CSS */ .editable:not(img) {min-height:10px;} .editable:hover {cursor:pointer;} .grid-stack .row .col {padding-left:0; padding-right:0;} .grid-stack .row .col:empty:before {content:"col"!important; color:#c7c7c7; text-align:center; justify-content:center; align-items:center; margin:auto; display:flex;} .grid-stack .row:nth-child(n+2).col {border-left:1px dashed #ddd;} .grid-stack .selectable:hover {outline:2px dashed rgb(156, 156, 156) !important;} .grid-stack .grid-stack-item {cursor:pointer;} .grid-stack-item .grid-stack-item-wrapper {position:absolute; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); display:none;} .grid-stack-item .grid-stack-item-wrapper .buttons {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);} .grid-stack-item.active .grid-stack-item-wrapper {display:block;} /* 사이드바 */ .dashboard_area {display:flex; justify-content:space-between; width:calc(100% + 20px); height:100%; position:relative; margin:0 -10px;} .dashboard_area ul.dashboard_sidebar {padding:0; margin:0; width:30px; height:100%; margin-right:10px; display:none; display:none;} .dashboard_area ul.dashboard_sidebar li {padding:0; margin:0; list-style:none;} .dashboard_area ul.dashboard_sidebar li button.btn_sidebar {border:none; background:none; display:block; height:30px; line-height:30px; color:#000; transition:0.2s; font-size:18px;} .dashboard_area ul.dashboard_sidebar li button.btn_sidebar:hover {color:#1fa0dc;} .dashboard_area #biDash {width:100%;} /* folding */ .dashboard_area.folding ul.dashboard_sidebar {display:block;} .dashboard_area.folding #biDash {width:calc(100% - 40px);} /* 공통 */ #biDash .input-group .input-group-btn {width:auto;} #biDash #splitDashLeft .form-floating textarea.form_control {width:100%; min-width:100%; resize:vertical;} #biDash {height:100%; min-height:100%;} #biDash .card {border:none; box-shadow:3px 3px 10px rgba(0,0,0,0.1); border-radius:0;} #biDash .card .card {box-shadow:none;} #biDash .card .card-body {padding:13px 14px; overflow-y:auto;} #biDash .input-group {margin-bottom:0;} #biDash .input-group + .input-group {margin-top:10px;} /* panel 상단영역 */ #biDash .card-header {padding:15px 2px 10px 6px; margin-bottom:0; color:#000; background-color:transparent; border-bottom:none; width:calc(100% - 20px); margin:0 auto; position:relative; border-bottom:1px solid #ababab;} #biDash .colorCard.grid-stack-item .card-header {color:var(--bs-card-title-color);} #biDash h3.card-title {margin:0; font-size:16px; font-weight:700; min-width:200px;} #biDash h3.card-title i {font-size:14px; margin-right:10px;} #biDash .card-header button.btn_right {position:absolute; right:0; top:10px;} /* 가로 스크롤 발생 */ #biDash #splitDashLeft, #biDash #splitDashRight {height:100%; overflow:hidden;} #biDash #splitDashLeft > .card-body {overflow-x:auto; overflow-y:hidden; padding-bottom:0;} #biDash #splitDashLeft > .card-body .tab-content {overflow-y:auto; overflow-x:hidden; height:calc(100% - 45px); padding-bottom:14px;} #biDash #splitDashRight > .card-body {overflow:auto; padding:0;} #biDash #splitDashLeft > .card-body > * {min-width:250px;} #biDash #splitDashRight #div_gridStack {min-width:1200px;} #biDash #splitDashRight #div_gridStack:before {position:absolute; top:0px; left:0px; right:0px; bottom:0px; content:""; background-position:0 0; background-size:calc(100% / 100) calc(100% / 100); background-image:radial-gradient(circle, #d1d1d1 1px, rgba(0, 0, 0, 0) 1px);} #biDash #splitDashRight #div_gridStack.grid_stack50:before {background-size:calc(100% / 50) calc(100% / 50);} #biDash #splitDashRight #div_gridStack.grid_stack100:before {background-size:calc(100% / 100) calc(100% / 100);} #biDash #splitDashRight #div_gridStack.grid_stack150:before {background-size:calc(100% / 150) calc(100% / 150);} #biDash #splitDashRight #div_gridStack.grid_stack200:before {background-size:calc(100% / 200) calc(100% / 200);} /* 탭 */ #biDash #splitDashLeft .option_select_nav {display:flex; justify-content:space-between; margin:0 0 15px;} #biDash #splitDashLeft .option_select_nav .nav-link {min-width:auto;} #biDash #splitDashLeft .option_select_nav li.nav-item {/* width:32.5%; */ text-align:center; flex-grow:1; margin-right:3px;} #biDash #splitDashLeft .option_select_nav li.nav-item:first-child {margin-left:0;} #biDash #splitDashLeft .option_select_nav li.nav-item:last-child {margin-right:0;} /* ************************ 좌측 영역 ************************ */ /* 아코디언 */ #splitDashLeft .accordion .accordion-item {margin-bottom:10px; border:1px solid #dcdcdc;} #splitDashLeft .accordion .accordion-item:first-child {border-radius:0;} #splitDashLeft .accordion .accordion-item:last-child {margin-bottom:0; border-radius:0;} #splitDashLeft .accordion .accordion-item h2.accordion-header {margin-top:0; background:#ffffff; /* Old browsers */ background:-moz-linear-gradient(top, #ffffff 0%, #f2f4f7 100%, #f2f4f7 100%); /* FF3.6-15 */ background:-webkit-linear-gradient(top, #ffffff 0%,#f2f4f7 100%,#f2f4f7 100%); /* Chrome10-25,Safari5.1-6 */ background:linear-gradient(to bottom, #ffffff 0%,#f2f4f7 100%,#f2f4f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f4f7',GradientType=0 ); /* IE6-9 */} #splitDashLeft .accordion .accordion-item .accordion-button {background:transparent; padding:0 30px 0 10px; height:30px; line-height:30px; font-size:15px; font-weight:400; position:relative; border:1px solid transparent; border-bottom:1px solid #dcdcdc; box-shadow:none; color:#000; display:block; height:30px;} #splitDashLeft .accordion .accordion-item:first-of-type .accordion-button {border-radius:0;} #splitDashLeft .accordion .accordion-item .accordion-button:focus {outline:none; box-shadow:none;} #splitDashLeft .accordion .accordion-item .accordion-button:after {position:absolute; right:0; top:0; height:30px; width:30px; content:""; background:url(../images/icon/form_control_arrow.svg) no-repeat right 6px center; background-size:16px 12px; transition:0.2s; transform:rotate(180deg);} #splitDashLeft .accordion .accordion-item .accordion-button.collapsed {border-bottom:1px solid transparent; color:#000;} #splitDashLeft .accordion .accordion-item .accordion-button.collapsed:after {transform:rotate(0deg);} /* Accordion-body */ #splitDashLeft .accordion .accordion-item .accordion-body {padding:8px;} #splitDashLeft .accordion .accordion-item .accordion-body .card.newWidget {justify-content:space-between; display:flex; flex-direction:row; padding:8px; cursor:move; border-radius:10px; transition:0.2s; align-items:center; margin:0; background:#fff;} #splitDashLeft .accordion .accordion-item .accordion-body .newWidget > i {width:50px; height:50px; border:1px solid #dcdcdc; transition:0.2s; border-radius:10px; text-align:center; font-size:20px; color:#000; transition:0.2s; line-height:50px;} #splitDashLeft .accordion .accordion-item .accordion-body .newWidget:hover > i {color:#fff; border-color:#5b95ff; background:#5b95ff;} #splitDashLeft .accordion .accordion-item .accordion-body .newWidget .img_thumnail_txt {line-height:20px; width:calc(100% - 65px); color:#000; transition:0.2s;} /* hover */ #splitDashLeft .accordion .accordion-item .accordion-body .newWidget:hover .img_thumnail_img .img-thumbnail {border:1px solid #5b95ff;} #splitDashLeft .accordion .accordion-item .accordion-body .newWidget:hover .img_thumnail_txt {color:#5b95ff;} div.box { padding: 10px 10px 15px 10px; overflow: auto; border: 1px solid #d9d9d9; background-color: #f3faff; border-radius: 0px 8px 8px 8px;} /* ********** Editor Tab ********** */ /* 공통 */ h4.card_sub_title {font-size:16px; padding:0 0 5px 10px; position:relative; border-bottom:1px solid #e0e0e0; margin:0 0 10px;} h4.card_sub_title:before {content:""; display:block; width:4px; height:4px; border-radius:2px; background:#1fa0dc; position:absolute; left:0; top:7px;} #biDash .form-label {display:block; margin-bottom:10px;} /* range */ .form-range {width:100%; height:1.5rem; padding:0; background-color:transparent !important; -webkit-appearance:none; -moz-appearance:none; appearance:none;} .form-range:focus {outline:0} .form-range:focus::-webkit-slider-thumb {box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)} .form-range:focus::-moz-range-thumb {box-shadow:0 0 0 1px #fff,0 0 0 .25rem rgba(13,110,253,.25)} .form-range::-moz-focus-outer {border:0} .form-range::-webkit-slider-thumb {width:1rem; height:1rem; margin-top:-.25rem; background-color:#1559ef; border:0; border-radius:1rem; -webkit-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; -webkit-appearance:none; appearance:none} @media (prefers-reduced-motion:reduce) { .form-range::-webkit-slider-thumb {-webkit-transition:none; transition:none} } .form-range::-webkit-slider-thumb:active {background-color:var(--color-button-active)} .form-range::-moz-range-thumb {width:1rem; height:1rem; background-color:#1559ef; border:0; border-radius:1rem; -moz-transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; transition:background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; -moz-appearance:none; appearance:none} /* webkit: progress 채움(Chrome/Edge/Safari) */ .form-range::-webkit-slider-runnable-track {width:100%; height:.5rem; color:transparent; cursor:pointer; border-color:transparent; border-radius:1rem; background:linear-gradient(#1559ef 0 0) 0/var(--range-progress,0%) 100% no-repeat, #e7eaed;} /* firefox: progress 채움 */ .form-range::-moz-range-progress {height:.5rem; background-color:#1559ef; border-radius:1rem;} @media (prefers-reduced-motion:reduce) { .form-range::-moz-range-thumb {-moz-transition:none; transition:none} } .form-range::-moz-range-thumb:active {background-color:var(--color-button-active)} .form-range::-moz-range-track {width:100%; height:.5rem; color:transparent; cursor:pointer; background-color:#dfdfdf ; border-color:transparent; border-radius:1rem} .form-range:disabled {pointer-events:none} .form-range:disabled::-webkit-slider-thumb {background-color:rgba(33, 37, 41, 0.75);} .form-range:disabled::-moz-range-thumb {background-color:rgba(33, 37, 41, 0.75);} /* ************************ 우측 영역 ************************ */ /* 공통 수정 */ #biDash #div_gridStack ::-webkit-scrollbar {width:8px; height:8px;} /* width */ #biDash #div_gridStack ::-webkit-scrollbar-track {background:rgba(0,0,0,0.05);} /* Track */ #biDash #div_gridStack ::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.3); border-radius:4px;} /* Handle */ #biDash #div_gridStack ::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.6);} /* Handle on hover */ #biDash #div_gridStack .echart_list.prepare .list_item {border-radius:10px;} #biDash #div_gridStack.grid-stack pre.editable {font-family:"Pretendard", "KoPubWorldDotum";} /* ********** Item ********** */ #biDash #div_gridStack.grid-stack > .grid-stack-item {padding:0;} #biDash #div_gridStack.grid-stack > .grid-stack-item {cursor:move;} #biDash #div_gridStack.grid-stack > .grid-stack-item .editable {cursor:pointer;} #biDash #div_gridStack.grid-stack > .grid-stack-item .editable:hover {outline:3px solid #1dbae1;} #biDash #div_gridStack.grid-stack > .grid-stack-item > div {} #biDash #div_gridStack.grid-stack > .grid-stack-item > div.ui-resizable-handle {border:none; background-color:rgba(255,255,255,0.5); border-radius:5px; right:0; bottom:0;} #biDash #div_gridStack.grid-stack > .grid-stack-item > div.clearfix {border:none;} #biDash #div_gridStack.grid-stack > .grid-stack-item pre {overflow:visible;} /* Image Card */ #biDash #div_gridStack .imageCardTop {box-shadow:5px 5px 20px rgba(0,0,0,0.08); border-radius:10px; border:1px solid #ebebeb; border-radius:0 0 10px 10px;} /* Carousel */ #biDash #div_gridStack .carousel.slide {} #biDash #div_gridStack .carousel.slide .carousel-inner {border-radius:10px;} /* horizontal */ #biDash #div_gridStack .horizontal {border:1px solid #ebebeb; box-shadow:5px 5px 20px rgba(0,0,0,0.08); border-radius:10px;} /* overlays */ #biDash #div_gridStack .overlays {border:1px solid #ebebeb; box-shadow:5px 5px 20px rgba(0,0,0,0.08); border-radius:10px; overflow:hidden;} /* cardGroups */ #biDash #div_gridStack .cardGroups.grid-stack-item {display:flex; flex-flow:row wrap; border:1px solid #ebebeb; box-shadow:5px 5px 20px rgba(0,0,0,0.08); border-radius:10px; overflow:hidden;} #biDash #div_gridStack .cardGroups.grid-stack-item > .card {flex:1 0 0%; margin-bottom:0;} #biDash #div_gridStack .cardGroups.grid-stack-item > .card + .card {margin-left:0; border-left:1px solid #ebebeb;} #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:last-child) {border-top-right-radius:0; border-bottom-right-radius:0;} #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:last-child) .card-img-top, #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:last-child) .card-header {border-top-right-radius:0;} #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:last-child) .card-img-bottom, #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:last-child) .card-footer {border-bottom-right-radius:0;} #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:first-child) {border-top-left-radius:0; border-bottom-left-radius:0;} #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:first-child) .card-img-top, #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:first-child) .card-header {border-top-left-radius:0;} #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:first-child) .card-img-bottom, #biDash #div_gridStack .cardGroups.grid-stack-item > .card:not(:first-child) .card-footer {border-bottom-left-radius:0;} /* colorCard */ #biDash #div_gridStack .colorCard {border:none; box-shadow:5px 5px 20px rgba(0,0,0,0.08); background:none;} #biDash #div_gridStack .colorCard > .card {border-radius:10px; overflow:hidden;} /* chart*/ #biDash #div_gridStack .card.Chart.grid-stack-item .chart_section {box-shadow:5px 5px 20px rgba(0,0,0,0.08); border:1px solid #ebebeb; border-radius:10px;} /* table */ #biDash #div_gridStack .card.dataTables_wrapper {background:transparent;} #biDash #div_gridStack .card.dataTables_wrapper .pagination {text-align:center;} #biDash #div_gridStack .card.dataTables_wrapper .pagination > li {display:inline-block;} /* PivotTable */ #biDash #div_gridStack .card.PivotTable.grid-stack-item {background:#fff;} /* 필터박스 */ #biDash #div_gridStack .card.Filter.grid-stack-item {background:transparent;} #biDash #div_gridStack .card.Filter.grid-stack-item > div.row {border:none; padding:0; margin:0;} #biDash #div_gridStack .card.Filter.grid-stack-item pre.editable {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:400; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDash #div_gridStack .card.Filter.grid-stack-item select.filter_selection {height:calc(100% - 35px); padding:0; border-radius:10px; border-color:#ebebeb; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} #biDash #div_gridStack .card.Filter.grid-stack-item .select2 {border-radius:0; height:calc(100% - 35px); width:100% !important; padding:0;} #biDash #div_gridStack .card.Filter.grid-stack-item .select2 .selection {display:block; height:100%;} #biDash #div_gridStack .card.Filter.grid-stack-item .select2 .selection .select2-selection {width:100%; height:100%;} #biDash #div_gridStack .card.Filter.grid-stack-item .select2 .selection .select2-selection .select2-selection__arrow {/* top:50%; margin-top:-13px; */} #biDash #div_gridStack .card.Filter.grid-stack-item .ui-resizable-handle {right:0; bottom:0;} /* 필터박스 - 체크 */ #biDash #div_gridStack .card.FilterCheck.grid-stack-item {background:transparent;} #biDash #div_gridStack .card.FilterCheck.grid-stack-item > div.row {border:none; padding:0; margin:0;} #biDash #div_gridStack .card.FilterCheck.grid-stack-item pre.editable.title {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:400; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDash #div_gridStack .card.FilterCheck.grid-stack-item .filter_check_selection {border-radius:10px; border:1px solid #ebebeb; height:calc(100% - 35px); padding:10px 15px 15px; overflow-y:auto; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} #biDash #div_gridStack .card.FilterCheck.grid-stack-item .ui-resizable-handle {right:0; bottom:0;} #biDash #div_gridStack .card.FilterCheck.grid-stack-item .m_check {margin-right:20px;} #biDash #div_gridStack .card.FilterCheck.grid-stack-item .m_check + .m_check {margin-left:0;} #biDash #div_gridStack .card.FilterCheck.grid-stack-item .m_check:last-child {margin-right:0;} #biDash #div_gridStack .card.FilterCheck.grid-stack-item .m_check > input[type=checkbox] + label {font-size:14px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;} /* 필터박스 - 라디오 */ #biDash #div_gridStack .card.FilterRadio.grid-stack-item {background:transparent;} #biDash #div_gridStack .card.FilterRadio.grid-stack-item > div.row {border:none; padding:0; margin:0;} #biDash #div_gridStack .card.FilterRadio.grid-stack-item pre.editable.title {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:400; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDash #div_gridStack .card.FilterRadio.grid-stack-item .filter_radio_selection {border-radius:10px; border:1px solid #ebebeb; height:calc(100% - 35px); padding:10px 15px 15px; overflow-y:auto; background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} #biDash #div_gridStack .card.FilterRadio.grid-stack-item .ui-resizable-handle {right:0; bottom:0;} #biDash #div_gridStack .card.FilterRadio.grid-stack-item .m_radio {margin-right:15px;} #biDash #div_gridStack .card.FilterRadio.grid-stack-item .m_radio + .m_radio {margin-left:0;} #biDash #div_gridStack .card.FilterRadio.grid-stack-item .m_radio:last-child {margin-right:0;} #biDash #div_gridStack .card.FilterRadio.grid-stack-item .m_radio > input[type=radio] + label {font-size:14px; display: inline-block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px;} /* 달력 */ #biDash #div_gridStack .card.CalendarFilter.grid-stack-item {background:transparent;} #biDash #div_gridStack .card.CalendarFilter.grid-stack-item div.row {border:none; padding:0; margin:0;} #biDash #div_gridStack .card.CalendarFilter.grid-stack-item pre.editable {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:400; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDash #div_gridStack .card.CalendarFilter.grid-stack-item input.calendar_selection {border-radius:10px; border:1px solid #ebebeb; height:calc(100% - 35px); background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} #biDash #div_gridStack .card.CalendarFilter.grid-stack-item .ui-resizable-handle {right:0; bottom:0;} /* 실행버튼 */ #biDash #div_gridStack.grid-stack > .grid-stack-item.ExecuteFilters {padding:0;} #biDash #div_gridStack.grid-stack > .grid-stack-item.ExecuteFilters .btn {height:100%; border-radius:5px; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} /* file Download */ #biDash #div_gridStack .fileDownload {border:1px solid #ebebeb; border-radius:10px; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} #biDash #div_gridStack .fileDownload .file_name {display:flex; justify-content:center; width:90px; padding-top:12px;} #biDash #div_gridStack .fileDownload .file_name .bi-file-earmark-plus {font-size:26px;} #biDash #div_gridStack .fileDownload .file_name .bi-file-earmark-plus .fileName {font-size:12px; margin-bottom:0; display:block;} #biDash #div_gridStack .fileDownload .file_txt {width:calc(100% - 150px);} #biDash #div_gridStack .fileDownload .file_txt .file_title {font-size:18px; font-weight:400; line-height:24px; margin-bottom:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} #biDash #div_gridStack .fileDownload .file_txt .file_info {font-size:12px; font-weight:400; margin-bottom:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} #biDash #div_gridStack .fileDownload .file_down {display:flex; justify-content:center; width:75px;} #biDash #div_gridStack .fileDownload .file_down button.file_down_btn {font-size:30px; width:50px; height:50px; border:none; border-radius:25px; transition:0.3s; background:#0d6efd; color:#fff; text-align:center; line-height:50px;} #biDash #div_gridStack .fileDownload .file_down button.file_down_btn:hover {background:var(--color-button-active);} /* Text */ #biDash #div_gridStack .Text {background:#fff; border-radius:10px; min-height:70px;} #biDash #div_gridStack .Text .carousel-inner {overflow:visible;} #biDash #div_gridStack .text_content {display:block; height:100%; padding:15px;} #biDash #div_gridStack .text_content .title {font-size:20px; font-weight:700; margin-bottom:0; line-height:28px;} #biDash #div_gridStack .text_content .sub_title {font-size:14px; margin-bottom:0; line-height:20px;} #biDash #div_gridStack.grid-stack > .grid-stack-item.Text .text_content {background:#fff; box-shadow:5px 5px 20px rgba(0,0,0,0.08); border-radius:10px; border:1px solid #ebebeb;} /* Contents */ #biDash #div_gridStack .card.Contents {border:1px solid #ebebeb; border-radius:10px; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} #biDash #div_gridStack .list-group.list-group-flush .carousel-item p {margin-bottom:0;} /* links */ #biDash #div_gridStack .links {border:1px solid #ebebeb; border-radius:10px; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} /* KPI */ #biDash #div_gridStack .KPI {border:1px solid #ebebeb; border-radius:10px; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} /* 데이터 레이블 */ #biDash #div_gridStack .Data_label {min-height:150px; border:1px solid #ebebeb; border-radius:10px; box-shadow:5px 5px 20px rgba(0,0,0,0.08);} #biDash #div_gridStack .Data_label .echart_list .list_item {padding:0;} #biDash #div_gridStack .Data_label .echart_list .list_item .detail_info {display:none;} #biDash #div_gridStack .Data_label .echart_list .list_item .carousel-inner {height:100%;} #biDash #div_gridStack .Data_label .text_content {padding:0;} #biDash #div_gridStack .Data_label .text_content .selected_nm {width:100%; height:40%; position:relative; background:#fff; border-radius:10px 10px 0 0;} #biDash #div_gridStack .Data_label .text_content .selected_nm strong.txt_column_name {font-size:28px; font-weight:700; position:absolute; left:0; top:50%;transform:translate(0, -10px); width:calc(100% - 60px); left:30px;} #biDash #div_gridStack .Data_label .text_content .selected_result {float:none !important;background:#1d9de1; height:60%; position:relative; border-radius:0 0 10px 10px;} #biDash #div_gridStack .Data_label .text_content .selected_result div {display:block; position:absolute; top:50%; transform:translate(0,-50%); width:calc(100% - 60px); left:30px; text-align:right;} #biDash #div_gridStack .Data_label .text_content .selected_result div strong.txt_num {font-size:48px; font-weight:700; display:inline-block; color:#fff; line-height:1;} #biDash #div_gridStack .Data_label .text_content .selected_result div strong.title {display:inline-block; vertical-align:bottom; font-size:18px; font-weight:700; margin-left:10px; color:#fff;} /* pivot table override */ [id^="biDash"] [id^="div_gridStack"] .PivotTable {padding-top:20px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtUi {width:100%; border-top:1px solid #000;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtUi tr td {border-bottom:1px solid #eee; min-width:120px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtUiCell {border-bottom:1px solid #eee; background:#ffffff;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtAxisContainer, .PivotTable .pvtVals {border:none; background:#fff;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtRendererArea {border:none; background:#fff;} [id^="biDash"] [id^="div_gridStack"] .PivotTable select {padding-right:30px; height:30px; transition:0.2s; --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8a8a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-color:#fff; background-image:var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat:no-repeat; background-position:right 6px center; background-size:16px 12px; display:block; width:100%; padding:0 10px; font-size:12px; font-weight:400; line-height:28px; color:#000; background-color:#fff; background-clip:padding-box; border:1px solid #dcdcdc; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif;} [id^="biDash"] [id^="div_gridStack"] .PivotTable select:hover, [id^="biDash"] [id^="div_gridStack"] .PivotTable select:focus {border-color:#2b58e6;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox{z-index:100; width:250px; border:1px solid #d9d9d9; background-color:#fff; position:absolute; text-align:center;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox h4{margin:10px 10px 0; font-size:12px; font-weight:700;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox p {margin:0; padding:10px 20px 10px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox p button {transition:all 0.2s linear 0s; padding:2px 12px 2px; border-radius:0; font-size:12px; line-height:20px; background:#ffffff; border:1px solid var(--color-button-active); color:var(--color-button-active); cursor:inherit; outline:none; width:50%;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox p button:hover {background:#fff; border-color:#004bb6; color:#004bb6;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox p button + button {border-left:none;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox label {font-weight:normal; width:100%;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox input[type='checkbox'] {margin-right:10px; margin-left:0; position:relative; top:2px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox input[type='text'] {display:block; width:100%; padding:0 10px; font-size:12px; font-weight:400; line-height:28px; color:#000; background-color:#fff; background-clip:padding-box; border:1px solid #dcdcdc; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; margin-bottom:10px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox input[type='text']:hover, [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox input[type='text']:focus {border-color:#2b58e6;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox input[type='text'] + br {display:none;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox .count {color:gray; font-weight:normal; margin-left:3px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox .pvtCheckContainer {border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; padding:5px 0 10px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox .pvtCheckContainer p {padding:5px 20px 0;} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox h4 + p button:nth-child(3), [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox .pvtCheckContainer + p button:first-child {color:#fff; background:var(--color-button-active); border-color:var(--color-button-active);} [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox h4 + p button:nth-child(3):hover, [id^="biDash"] [id^="div_gridStack"] .PivotTable .pvtFilterBox .pvtCheckContainer + p button:first-child:hover {border-color:#004bb6; background:#004bb6;} [id^="biDash"] [id^="div_gridStack"] .pvtAxisContainer li span.pvtAttr { -webkit-text-size-adjust: 100%; background: #ffffff; border: 1px solid #0d6efd; padding: 2px 5px; white-space: nowrap; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; font-size: 12px; color: #0d6efd; } /* 내부 테이블 */ [id^="biDash"] [id^="div_gridStack"] .PivotTable table.pvtTable {font-size:12px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable table.pvtTable thead tr th, [id^="biDash"] [id^="div_gridStack"] .PivotTable table.pvtTable tbody tr th {background-color:#f8fbff; border:1px solid #bdd8ff; font-size:12px; padding:5px 5px 3px;} [id^="biDash"] [id^="div_gridStack"] .PivotTable table.pvtTable tbody tr td {color:#333; padding:5px 5px 3px; background-color:#fff; border:1px solid #bdd8ff;font-size:12px;} /* ******************* jsPanel ******************* */ .jsPanel {border-radius:10px; overflow:hidden !important; font-family:"Pretendard", "KoPubWorldDotum";} .jsPanel-hdr {background-color:#fff !important; line-height:20px; border-bottom:1px solid #dcdcdc; font-family:"Pretendard", "KoPubWorldDotum";} .jsPanel-titlebar .jsPanel-title {margin:0 5px 0 16px; font-size:14px;} .jsPanel-headerbar {height:40px;} .jsPanel-controlbar {margin:8px 0 0; padding-right:10px;} .jsPanel-controlbar .jsPanel-btn {width:27px; height:25px; text-align:center; line-height:25px;} .jsPanel-hdr.jsPanel-hdr-light .jsPanel-btn:hover {background-color:#e1e1e1 !important;} .jsPanel-controlbar .jsPanel-btn svg.jsPanel-icon {display:none;} .jsPanel-controlbar .jsPanel-btn:after {content:""; display:inline-block; font-family:"icofont"; font-size:23px; color:#555;} .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-smallify:after {content:"\eacb"; font-weight:700;} .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-minimize:after {border-bottom:1px solid #555; width:17px; height:3px; border-radius:2px; margin-top:15px;} .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-normalize:before {content:""; display:inline-block; border:1px solid #555; border-radius:2px; width:12px; height:12px; position:relative; left:8px; top:1px;} .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-normalize:after {border:1px solid #555; border-radius:2px; width:13px; height:13px; border-top:4px solid #555; background:#fff; position:relative; left:-9px; top:5px;} .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-maximize:after {border:1px solid #555; border-radius:2px; width:14px; height:14px; border-top:4px solid #555; margin-top:5px;} .jsPanel-controlbar .jsPanel-btn.jsPanel-btn-close:after {content:"\eee1";} .jsPanel-content {font-family:"Pretendard", "KoPubWorldDotum"; background-color:#f4f4f4; font-size: 14px;} #jsPanel-replacement-container {box-shadow:5px -5px 10px rgba(0,0,0,0.1);} #jsPanel-replacement-container .jsPanel-controlbar {margin-top:5px;} .jsPanel #div_chartList {padding-left:30px !important;} .jsPanel .card .card-body h5.card-title {font-size:16px; margin:0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 260px; padding-bottom:4px;} .jsPanel .card .card-body h5.card-title + p.card-text {} .jsPanel .card hr {margin:20px 0 0;} .jsPanel .jsPanel-ftr {min-height:30px;} .jsPanel .jsPanel-ftr i.bi.bi-clock {position:relative; top:3px; margin-right:5px; font-size:14px;} .jsPanel .jsPanel-ftr span.clock {font-size:14px; margin-right:5px; position:relative; top:2px;} .jsPanel.jsPanel-tooltip .jsPanel-content .table {font-size:14px;} /* pivot table override */ .PivotTable .pvtUi {width:100%; border-top:1px solid #000;} .PivotTable .pvtUi tr td {border-bottom:1px solid #eee;} .PivotTable .pvtUiCell {border-bottom:1px solid #eee; background:#f1f1f1;} .PivotTable .pvtAxisContainer, .PivotTable .pvtVals {border:none; background:#fff;} .PivotTable .pvtRendererArea {border:none; background:#fff;} .PivotTable select {padding-right:30px; height:30px; transition:0.2s; --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a8a8a8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); background-color:#fff; background-image:var(--bs-form-select-bg-img), var(--bs-form-select-bg-icon, none); background-repeat:no-repeat; background-position:right 6px center; background-size:16px 12px; display:block; width:100%; padding:0 10px; font-size:14px; font-weight:400; line-height:28px; color:#000; background-color:#fff; background-clip:padding-box; border:1px solid #dcdcdc; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; } .PivotTable select:hover, .PivotTable select:focus {border-color:#2b58e6;} .PivotTable .pvtFilterBox{z-index:100; width:250px; border:1px solid #d9d9d9; background-color:#fff; position:absolute; text-align:center;} .PivotTable .pvtFilterBox h4{margin:10px 10px 0; font-size:16px; font-weight:700;} .PivotTable .pvtFilterBox p {margin:0; padding:10px 20px 10px;} .PivotTable .pvtFilterBox p button {transition:all 0.2s linear 0s; padding:2px 12px 2px; border-radius:0; font-size:14px; line-height:20px; background:#ffffff; border:1px solid var(--color-button-active); color:var(--color-button-active); cursor:inherit; outline:none; width:50%;} .PivotTable .pvtFilterBox p button:hover {background:#fff; border-color:#004bb6; color:#004bb6;} .PivotTable .pvtFilterBox p button + button {border-left:none;} .PivotTable .pvtFilterBox label {font-weight:normal; width:100%;} .PivotTable .pvtFilterBox input[type='checkbox'] {margin-right:10px; margin-left:0; position:relative; top:2px;} .PivotTable .pvtFilterBox input[type='text'] {display:block; width:100%; padding:0 10px; font-size:14px; font-weight:400; line-height:28px; color:#000; background-color:#fff; background-clip:padding-box; border:1px solid #dcdcdc; -webkit-appearance:none; -moz-appearance:none; appearance:none; border-radius:0; transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; margin-bottom:10px;} .PivotTable .pvtFilterBox input[type='text']:hover, .PivotTable .pvtFilterBox input[type='text']:focus {border-color:#2b58e6;} .PivotTable .pvtFilterBox input[type='text'] + br {display:none;} .PivotTable .pvtFilterBox .count {color:gray; font-weight:normal; margin-left:3px;} .PivotTable .pvtFilterBox .pvtCheckContainer {border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; padding:5px 0 10px;} .PivotTable .pvtFilterBox .pvtCheckContainer p {padding:5px 20px 0;} .PivotTable .pvtFilterBox h4 + p button:nth-child(3), .PivotTable .pvtFilterBox .pvtCheckContainer + p button:first-child {color:#fff; background:var(--color-button-active); border-color:var(--color-button-active);} .PivotTable .pvtFilterBox h4 + p button:nth-child(3):hover, .PivotTable .pvtFilterBox .pvtCheckContainer + p button:first-child:hover {border-color:#004bb6; background:#004bb6;} /* 내부 테이블 */ .PivotTable table.pvtTable {font-size:14px;} .PivotTable table.pvtTable thead tr th, .PivotTable table.pvtTable tbody tr th {background-color:#e6EEEE; border:1px solid #d9d9d9; font-size:14px; padding:5px 5px 3px;} .PivotTable table.pvtTable tbody tr td {color:#333; padding:5px 5px 3px; background-color:#fff; border:1px solid #d9d9d9;font-size:14px;} /*=========================================================================================================================== 관리자 =============================================================================================================================*/ .big_container .big_header {position:relative; width:calc(100% + 40px); background:#fff; padding:13px 35px; margin:-10px 0 0 -20px; height:56px; box-shadow:0 2px 10px rgba(0,0,0,0.05); z-index:2; border-top:1px solid #eee;} .big_container .big_header .title {margin:0; font-size:17px; font-weight:700; line-height:30px;} .big_container .big_body {padding:20px 15px 10px 15px; height:calc(100vh - 85px); min-height:calc(100vh - 85px) !important; /* overflow:auto; */ transition:0.3s; position:relative; margin-right:-20px; margin-top:-10px; width:100%;} .top_function {margin-bottom:20px;} .top_function .input-group {margin-bottom:0;} .layerCon .popContents .top_function {margin-bottom:15px;} .top_function.has_line {padding:0 0 20px; position:relative;} .top_function.has_line:before, .top_function.has_line:after {content:""; display:block; position:absolute; left:-8px; bottom:0; width:calc(100% + 16px); height:1px;} .top_function.has_line:before {background:#d0d0d0; bottom:2px;} .top_function.has_line:after {background:#ffffff; bottom:0;} .top_function.has_line h2.title {font-size:24px; font-weight:700; margin:0; display:inline-block; vertical-align:middle;} .top_function.has_line h2.title .ex_txt {display:inline-block; vertical-align:middle; margin-left:10px; color:#879ba9; font-size:14px; font-weight:500;} .top_function.has_line h2.title .ex_txt i {color:#879ba9; margin-right:5px;} .top_function.has_line .m_btn.goto_list {margin-left:0; width:40px; height:40px; line-height:40px; text-align:center; vertical-align:middle; padding:0; position:relative; z-index:10;} .top_function.has_line .m_btn.goto_list i {margin:0; font-size:16px;} .top_function.has_line h2.title + .m_btn.goto_list {margin-left:15px;} .grid_total_count {font-size:14px; color:#000; display:inline-block; padding:0; position:relative; letter-spacing:0.5px; font-weight:300; line-height:30px; padding-left:20px; position:relative; top:-1px;} .grid_total_count strong {font-size:18px; color:#1559ef; font-weight:700; display:inline-block; margin:0 7px; display:inline-block; line-height:32px; border-radius:5px; padding:0;} .grid_total_count.count_num {position:absolute; right:0; top:10px;} .top_search_area .grid_total_count {margin:0; position:relative; top:2px;} /*=========================================================================================================================== INFRA =============================================================================================================================*/ /* ******************** 공통 레이아웃 ******************** */ .infra_container {height:calc(100% - 10px);} .infra_container .status_dash .progress-bar {background-image:none;} .infra_container #infraLeftArea, .infra_container .infra_content, .infra_container .split_infra_bottom {background:#fff;} /* 상단 영역 */ .infra_container .split_infra_top {display:flex;} /* ********** 상단 좌측 split 영역 리스트 ********** */ .infra_container .split_infra_top #infraLeftArea select.form_control {border-right-color:transparent; font-weight:700;} .infra_container .split_infra_top #infraLeftArea select.form_control:hover, .infra_container .split_infra_top #infraLeftArea select.form_control:focus {border-right-color:#2b58e6} .infra_container .split_infra_top .sidebar_depth_1 {width:100%; height:calc(100% - 30px); border-left:1px solid #dcdcdc; padding:0; overflow:auto;} .infra_container .split_infra_top .sidebar_depth_1 ul.jstree-container-ul {min-width:250px; width:100%;} /* jstree 커스텀 */ .sidebar_depth_1.jstree_area.jstree-default li .jstree-anchor > .jstree-icon.jstree-themeicon {margin-right:2px; background-image:none !important;} .sidebar_depth_1.jstree_area.jstree-default li .progress {display:inline-block; width:8px; height:17px; opacity:0.8; background:#fff; position:relative; margin:0 5px 0 0; vertical-align:top; top:4px; padding:2px; border:1px solid #666; border-radius:2px; text-align:center;} .sidebar_depth_1.jstree_area.jstree-default li .progress-bar {width:4px; height:15px; position:absolute; left:1px; bottom:1px; top:auto; display:block; max-height:calc(100% - 2px) !important;} .sidebar_depth_1.jstree_area.jstree-default .jstree-wholerow-clicked {background:#f4f4f4 !important;} .sidebar_depth_1.jstree_area.jstree-default .jstree-clicked.jstree-anchor, .sidebar_depth_1.jstree_area.jstree-default .jstree-clicked.jstree-anchor:link, .sidebar_depth_1.jstree_area.jstree-default .jstree-clicked.jstree-anchor:visited, .sidebar_depth_1.jstree_area.jstree-default .jstree-clicked.jstree-anchor:hover, .sidebar_depth_1.jstree_area.jstree-default .jstree-clicked.jstree-anchor:active {color:#000;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-open .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f1ad"; color:#6546eb; font-size:15px; font-family:FontAwesome;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-closed .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f1ad"; color:#6546eb; font-size:15px; font-family:FontAwesome;} .sidebar_depth_1.jstree_area.jstree-default > ul.jstree-container-ul > li.jstree-node.jstree-open > .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f233";} .sidebar_depth_1.jstree_area.jstree-default > ul.jstree-container-ul > li.jstree-node.jstree-closed > .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f233";} /* 온라인/오프라인/상태값 아이콘 추가 */ .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_online > .jstree-anchor > .jstree-icon {position:relative;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_online > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_offline > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_running > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_stopped > .jstree-anchor > .jstree-icon.jstree-themeicon:before { content:""; display:block; width:12px; height:12px; font-family:FontAwesome; position:absolute; right:-4px; bottom:4px; font-size:11px; border-radius:6px; line-height:1; text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_online > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f058"; color:#32b552; background:#fff;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_offline > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f057"; color:#ed6e5b; background:#fff;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_running > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f04b"; color:#32b552;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_stopped > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f04d"; color:#ed6e5b;} i.status_online, i.status_offline, i.status_running, i.status_stopped {position:relative;} i.status_online:after, i.status_offline:after, i.status_running:after, i.status_stopped:after {content:""; display:block; width:12px; height:12px; font-family:FontAwesome; position:absolute; right:-7px; bottom:-3px; font-size:11px; border-radius:6px; line-height:1; text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} i.status_online:after {content:"\f058"; color:#32b552; right:-6px;} i.status_offline:after {content:"\f057"; color:#ed6e5b; right:-6px;} i.status_running:after {content:"\f04b"; color:#32b552;} i.status_stopped:after {content:"\f04d"; color:#999999;} /* 하위폴더가 없는 아이콘 */ .sidebar_depth_1.jstree_area.jstree-default li.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f1c0"; color:#444;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-leaf.cube .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f1b2";} .sidebar_depth_1.jstree_area.jstree-default li.jstree-leaf.monitor .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f108";} /* before 사용 아이콘 */ .sidebar_depth_1.jstree_area.jstree-default li.jstree-open .jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area.jstree-default li.jstree-open .jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:before {color:#444;} /* 온라인/오프라인/상태값 아이콘 추가 */ .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_online > .jstree-anchor > .jstree-icon {position:relative;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_online > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_offline > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_running > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_stopped > .jstree-anchor > .jstree-icon.jstree-themeicon:before { content:""; display:block; width:12px; height:12px; font-family:FontAwesome; position:absolute; right:-4px; bottom:4px; font-size:11px; border-radius:6px; line-height:1; text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_online > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f058"; color:#32b552; background:#fff;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_offline > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f057"; color:#ed6e5b; background:#fff;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_running > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f04b"; color:#32b552;} .sidebar_depth_1.jstree_area.jstree-default li.jstree-node.status_stopped > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f04d"; color:#ed6e5b;} /* 테이블 아이콘 */ .sidebar_depth_1.jstree_area li.icon_type_table.jstree-open .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area li.icon_type_table.jstree-closed .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f84c"; color:#999;} /* 텍스트, 숫자, 날짜 아이콘 */ .sidebar_depth_1.jstree_area li.jstree-leaf.icon_type_txt .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f031"; color:#999; font-weight:900;} .sidebar_depth_1.jstree_area li.jstree-leaf.icon_type_num .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"#"; color:#999;} .sidebar_depth_1.jstree_area li.jstree-leaf.icon_type_date .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f073"; color:#999;} .sidebar_depth_1.jstree_area li.jstree-leaf.icon_type_custom .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"@"; color:#999;} /* 양식관리 - 패키지, 양식 아이콘 */ .sidebar_depth_1.jstree_area li.nodePackage.jstree-open .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area li.nodePackage.jstree-closed .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area li.nodePackage.jstree-last .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area li.nodePackage.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f1b3"; color:#4797e2; font-weight:900;} /* 프로시저 */ .sidebar_depth_1.jstree_area li.node_procedure.jstree-open .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area li.node_procedure.jstree-closed .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area li.node_procedure.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f0e8"; color:#aaa; font-weight:900;} .sidebar_depth_1.jstree_area li.node_procedureNoAuth.jstree-open .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area li.node_procedureNoAuth.jstree-closed .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_depth_1.jstree_area li.node_procedureNoAuth.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f023"; color:#aaa; font-weight:900;} .sidebar_depth_1.jstree_area li.node_procedureNoAuth .jstree-wholerow {background-color:#f8f8f8;} .sidebar_depth_1.jstree_area li.nodeForm.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\f15c"; color:#999;} .sidebar_depth_1.jstree_area li.nodeDatabase.jstree-open > .jstree-wholerow:before, .sidebar_depth_1.jstree_area li.nodeDatabase.jstree-closed > .jstree-wholerow:before {font-family:'Font Awesome 6 Free'; content:"\f1c0"; font-weight:900; position:absolute; right:10px; top:0; color:#999;} .sidebar_depth_1.jstree_area li.nodeDatabase.jstree-open > .jstree-wholerow.jstree-wholerow-clicked:before, .sidebar_depth_1.jstree_area li.nodeDatabase.jstree-closed > .jstree-wholerow.jstree-wholerow-clicked:before {color:#fff;} .sidebar_depth_1.jstree_area li.nodeDatabase.jstree-open > .jstree-wholerow ~ .jstree-anchor, .sidebar_depth_1.jstree_area li.nodeDatabase.jstree-closed > .jstree-wholerow ~ .jstree-anchor {padding-right:30px; width:calc(100% - 20px);} i.status_online, i.status_offline, i.status_running, i.status_stopped {position:relative;} i.status_online:after, i.status_offline:after, i.status_running:after, i.status_stopped:after {content:""; display:block; width:12px; height:12px; font-family:FontAwesome; position:absolute; right:-7px; bottom:-3px; font-size:11px; border-radius:6px; line-height:1; text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} i.status_online:after {content:"\f058"; color:#32b552; right:-6px;} i.status_offline:after {content:"\f057"; color:#ed6e5b; right:-6px;} i.status_running:after {content:"\f04b"; color:#32b552;} i.status_stopped:after {content:"\f04d"; color:#999999;} /* ********** 상단 우측 split 컨텐츠 영역 ********** */ .infra_container .split_infra_top .infra_content {width:100%; height:100%; border-top:1px solid #dcdcdc; border-right:1px solid #dcdcdc;} .infra_container .split_infra_top .infra_content h3.infra_title {width:100%; height:30px; line-height:30px; margin:0; font-size:15px; font-weight:700; padding-left:15px; position:relative; border-bottom:1px solid #dcdcdc;} .infra_container .split_infra_top .infra_content h3.infra_title button#btnHelp {position:absolute; right:15px; top:50%; transform:translate(0,-50%); border:none;} .infra_container .split_infra_top .infra_content .infra_content_box {display:flex; height:calc(100% - 30px); overflow:auto;} /* ********** 세부 리스트 ********** */ .infra_container .split_infra_top .infra_content ul.sidebar_depth_2 {width:200px; min-width:200px; border-right:1px solid #dcdcdc; height:100%; padding:10px 0; margin:0; overflow-y:auto;} .infra_content ul.sidebar_depth_2 li {text-decoration:none; display:block; color:#000; padding:0; margin:0; width:100%;} .infra_content ul.sidebar_depth_2 li button {display:block; padding:0 15px; height:26px; line-height:24px; font-weight:400; color:#000; transition:0.2s; font-size:14px; width:100%; border:none; background:#fff; text-align:left; position:relative;} .infra_content ul.sidebar_depth_2 li button:hover, .infra_content ul.sidebar_depth_2 li button.on {background:#f4f4f4; color:#000;} .infra_content ul.sidebar_depth_2 li button i {margin:0 7px; font-size:14px;} /* 2depth menu */ .infra_content ul.sidebar_depth_2 li > ul {padding:0; margin:0; max-height:0; overflow:hidden; transition:max-height 0.1s ease-out;} /* 닫힐때 */ .infra_content ul.sidebar_depth_2 li > button.toggle_menu_btn.active + ul {max-height:1000px; transition:max-height 0.5s ease-in;} /* 열릴때 */ .infra_content ul.sidebar_depth_2 li > ul button {padding-left:35px;} /* 하위메뉴가 있는 버튼 */ .infra_content ul.sidebar_depth_2 li button.toggle_menu_btn {padding-right:25px;} .infra_content ul.sidebar_depth_2 li button.toggle_menu_btn:after {content:"\ea99"; display:block; width:15px; height:30px; line-height:30px; font-family:Icofont; font-size:14px; position:absolute; right:10px; top:0; color:#666;} .infra_content ul.sidebar_depth_2 li button.toggle_menu_btn.active:after {transform:rotate(-180deg); line-height:34px;} .infra_content ul.sidebar_depth_2 li button.toggle_menu_btn:hover:after, .infra_content ul.sidebar_depth_2 li button.toggle_menu_btn.on:after {color:#666;} /* ********** 상세 컨텐츠 ********** */ .infra_container .split_infra_top .infra_content .content {width:calc(100% - 200px); min-width:1100px; height:100%; padding:0; overflow-y:auto;} /* 그리드 상단 기능 */ .infra_container .grid_top_function {padding:5px 15px; border-bottom:1px solid #dcdcdc;} .infra_container .grid_top_function:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} .infra_container .grid_top_function .form-group {display:inline-block; margin-left:20px; margin-bottom:0;} .infra_container .grid_top_function .form-group label {display:inline-block; vertical-align:middle; margin-right:10px;} .infra_container .grid_top_function .form-group input#searchGrid {display:inline-block; height:24px; line-height:22px; width:200px;} /* .infra_container .grid_top_function ul.dropdown-menu:before {content:""; display:block; width:1px; height:100%; background:#ddd; position:absolute; left:33px; top:0;} */ .infra_container .grid_top_function ul.dropdown-menu li a {white-space:nowrap;} .infra_container .grid_top_function ul.dropdown-menu li a i {width:15px; margin-right:15px; text-align:center;} /* 하단영역 */ .infra_container .split_infra_bottom {border:1px solid #dcdcdc; border-top:none; overflow:auto;} .infra_container .split_infra_bottom > ul.nav, .infra_container .split_infra_bottom > .tab-content {min-width:1400px;} /* 하단 탭 높이값 수정 */ .infra_container .nav.nav-tabs.tab_big .nav-link {padding:4px 10px 1px;} /* ******************** 대시보드 ******************** */ .infra_container .status_dash {padding:7px;} .infra_container .status_dash h4.dash_title {font-size:15px; font-weight:500; color:#1fa0dc; margin-bottom:6px; position:relative; padding-left:10px;} .infra_container .status_dash h4.dash_title:before {content:""; display:block; width:4px; height:4px; border-radius:2px; background:var(--color-button-active); position:absolute; left:0; top:5px;} .infra_container .status_dash .dash_info {border:1px solid #dcdcdc; padding:10px;} .infra_container .status_dash .dash_info .row {margin-bottom:10px;} .infra_container .status_dash .dash_info .row:last-child {margin-bottom:0;} .infra_container .status_dash .dash_info .row .col {line-height:1;} .infra_container .status_dash .dash_info .info_item:after {content:""; display:block; width:100%; height:0; clear:both; float:none;} .infra_container .status_dash .dash_info .info_item strong {font-weight:500; font-size:14px;} .infra_container .status_dash .dash_info .info_item strong i {display:inline-block; margin-right:5px; font-size:15px; vertical-align:middle; color:#333;} .infra_container .status_dash .dash_info .info_item span {float:right; font-size:13px; font-weight:400;} .infra_container .status_dash .dash_info .info_item2 {margin:10px 0;} .infra_container .status_dash .dash_info .info_item2:after {content:""; display:block; width:100%; height:0; clear:both; float:none;} .infra_container .status_dash .dash_info .info_item2 strong {display:block; font-weight:700; font-size:15px; text-align:center; line-height:20px; margin-bottom:15px;} .infra_container .status_dash .dash_info .info_item2 span.status_info {font-weight:400; font-size:14px; display:block; line-height:18px; margin-bottom:10px;} .infra_container .status_dash .dash_info .info_item2 span.status_info:last-child {margin-bottom:0;} .infra_container .status_dash .dash_info .info_item2 span.status_num {font-weight:400; font-size:14px; display:inline-block; vertical-align:middle; line-height:18px;} .infra_container .status_dash .dash_info .info_item2 .row .col {line-height:18px;} .infra_container .status_dash .dash_info .info_item2 .row .col span {vertical-align:middle; display:inline-block;} .infra_container .status_dash .dash_info.status_icon_area {position:relative; padding-left:32%; height:150px;} .infra_container .status_dash .dash_info .status_icon {margin:0; padding:0; position:absolute; left:10px; top:10px; max-width:130px; width:25%; height:130px; line-height:150px; text-align:center;} .infra_container .status_dash .dash_info .status_icon i {font-size:50px; color:#fff;} .infra_container .status_dash .dash_info .status_icon.status_online {background:#32b552;} .infra_container .status_dash .dash_info .status_icon.status_offline {background:#ed6e5b;} .infra_container .status_dash .dash_info .info_item .progress {height:6px; margin-bottom:0px; background-color:#eee; border-radius:3px; margin-top:4px; -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1); box-shadow:inset 0 1px 2px rgba(0,0,0,.1); position:relative} .infra_container .status_dash .dash_info .info_item .progress .progress-bar {float:left; width:0%; height:100%; color:#fff; background-color:#1aadd2; animation:2s linear infinite progress-bar-stripes;} .dash_chart {width:100%; height:300px;} /* 요약정보 페이지용 css */ .infra_container .status_dash .dash_info .info_item2 .status_item_box {display:flex; justify-content:space-between;} .infra_container .status_dash .dash_info .info_item2 .status_item_box .status_item i {margin-right:5px;} .infra_container .status_dash .dash_info .info_item2 .status_item_box .status_item .status_num {display:block; width:100%; line-height:40px; font-size:30px; text-align:center; line-height:40px; font-weight:700; margin-top:10px;} .infra_container .status_dash .dash_info .info_item2 .col {height:100%; display:flex;} .infra_container .status_dash .dash_info .info_item2 .col i {margin-right:5px; font-size:18px; vertical-align:middle;} /* Health */ .infra_container .status_dash .status_health_guests {display:flex; justify-content:space-between;} .infra_container .status_dash .status_health_guests .status_health {width:calc(43% - 10px);} .infra_container .status_dash .status_health_guests .status_health .dash_info {min-height:150px;} /* Guests */ .infra_container .status_dash .status_health_guests .status_guests {width:calc(57% - 10px);} .infra_container .status_dash .status_health_guests .status_guests .dash_info {min-height:150px;} .infra_container .status_dash .status_health_guests .status_guests .dash_info > .row {padding:0 20px;} .infra_container .status_dash .status_health_guests .status_guests .dash_info > .row .devide {position:relative;} .infra_container .status_dash .status_health_guests .status_guests .dash_info > .row .devide:after {content:""; display:block; width:1px; height:70px; position:absolute; left:50%; bottom:11px; background:#dcdcdc;} /* ******************** 차트 영역 ******************** */ .row.col_pd0 {margin:0;} .row.col_pd0 > [class*="col"] {padding:0;} .dash_chart_info {background:#00c292; color:#fff; padding:10px 15px; height:50px; text-align:center;} .dash_chart_info span {display:inline-block; font-size:18px; line-height:30px; vertical-align:middle; margin-right:20px;} .dash_chart_info strong {display:inline-block; font-size:24px; line-height:30px; vertical-align:middle;} .dash_chart_info .row {width:100%;} .dash_chart_info .row .col {} /* ******************** 팝업 ******************** */ h3.modal_subtitle {width:100%; height:20px; line-height:20px; margin:0; font-size:15px; font-weight:700; padding:0; margin:0 0 10px; position:relative;} .modal-content {min-height:auto !important;} .modal-content .tab-content {padding:20px 0 0;} .form_area [class*="col-"]:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} .form_area .col:after {content:""; display:block; float:none;clear:both; width:100%; height:0;} .form_area label.form_label {width:100px; float:left; line-height:20px; font-size:14px; margin-top:5px; text-align:left; padding-right:20px; font-weight:500;} .form_area label.form_label + span.txt {display:inline-block; vertical-align:middle; line-height:20px; margin-top:5px;} .form_area .form_control, .form_area .form-control, .form_area .text_info, .form_area .input-group, .form_area .form_group {width:calc(100% - 100px); float:left;} .form_area .input_info {display:inline-block; vertical-align:middle; margin-left:3px; line-height:30px; color:#666; font-size:14px;} .form_area .m_radio {min-height:30px;} .form_area .select2.select2-container {width:calc(100% - 100px) !important;} .form_area p.form_control {border:none; background:none; margin:0; float:right; line-height:1.4; word-break:keep-all; margin-top:6px;} .form_area span.text_info {display:block; width:calc(100% - 100px); margin-top:5px; float:right;} .form_area .file_attach_group {display:flex; justify-content:space-between; gap:10px;} .form_area .file_attach_group .file_name_box {position:relative; width:calc(100% - 125px);} .form_area .file_attach_group .file_name_box input {width:100%;} .form_area .file_attach_group .file_name_box .m_btn {width:auto;} .form_area .file_attach_group .file_name_box .btn_delete_file {width:30px; height:30px; padding:0; margin:0; border:0; background:transparent; position:absolute; top:50%; right:10px; transform:translateY(-50%); color:#000; font-size:18px; line-height:30px; text-align:center;} .form_area.label_60 label.form_label{width:60px;} .form_area.label_60 .form_control, .form_area.label_60 .form-control, .form_area.label_60 span.text_info, .form_area.label_60 .input-group {width:calc(100% - 60px);} .form_area.label_70 label.form_label{width:70px;} .form_area.label_70 .form_control, .form_area.label_70 .form-control, .form_area.label_70 span.text_info, .form_area.label_70 .input-group, .form_area.label_70 .form_group {width:calc(100% - 70px);} .form_area.label_80 label.form_label{width:80px;} .form_area.label_80 .form_control, .form_area.label_80 .form-control, .form_area.label_80 span.text_info, .form_area.label_80 .input-group, .form_area.label_80 .form_group {width:calc(100% - 80px);} .form_area.label_90 label.form_label{width:90px;} .form_area.label_90 .form_control, .form_area.label_90 .form-control, .form_area.label_90 span.text_info, .form_area.label_90 .input-group, .form_area.label_90 .form_group {width:calc(100% - 90px);} .form_area.label_100 label.form_label{width:100px;} .form_area.label_100 .form_control, .form_area.label_100 .form-control, .form_area.label_100 span.text_info, .form_area.label_100 .input-group, .form_area.label_100 .form_group {width:calc(100% - 100px);} .form_area.label_110 label.form_label{width:110px;} .form_area.label_110 .form_control, .form_area.label_110 .form-control, .form_area.label_110 span.text_info, .form_area.label_110 .input-group, .form_area.label_110 .form_group {width:calc(100% - 110px);} .form_area.label_120 label.form_label{width:120px;} .form_area.label_120 .form_control, .form_area.label_120 .form-control, .form_area.label_120 span.text_info, .form_area.label_120 .input-group, .form_area.label_120 .form_group {width:calc(100% - 120px);} .form_area.label_130 label.form_label{width:130px;} .form_area.label_130 .form_control, .form_area.label_130 .form-control, .form_area.label_130 span.text_info, .form_area.label_130 .input-group, .form_area.label_130 .form_group {width:calc(100% - 130px);} .form_area.label_140 label.form_label{width:140px;} .form_area.label_140 .form_control, .form_area.label_140 .form-control, .form_area.label_140 span.text_info, .form_area.label_140 .input-group, .form_area.label_140 .form_group {width:calc(100% - 140px);} .form_area.label_150 label.form_label{width:150px;} .form_area.label_150 .form_control, .form_area.label_150 .form-control, .form_area.label_150 span.text_info, .form_area.label_150 .input-group, .form_area.label_150 .form_group {width:calc(100% - 150px);} .form_area.label_160 label.form_label{width:160px;} .form_area.label_160 .form_control, .form_area.label_160 .form-control, .form_area.label_160 span.text_info, .form_area.label_160 .input-group, .form_area.label_160 .form_group {width:calc(100% - 160px);} .form_area.label_170 label.form_label{width:170px;} .form_area.label_170 .form_control, .form_area.label_170 .form-control, .form_area.label_170 span.text_info, .form_area.label_170 .input-group, .form_area.label_170 .form_group {width:calc(100% - 170px);} .form_area.label_200 label.form_label{width:200px;} .form_area.label_200 .form_control, .form_area.label_200 .form-control, .form_area.label_200 span.text_info, .form_area.label_200 .input-group, .form_area.label_200 .form_group {width:calc(100% - 200px);} .form_area .select2.select2-container {margin-right:0;} .form_area.label_100 .select2.select2-container {width:calc(100% - 100px) !important;} .form_area.label_110 .select2.select2-container {width:calc(100% - 110px) !important;} .form_area.label_120 .select2.select2-container {width:calc(100% - 120px) !important;} .form_area.label_130 .select2.select2-container {width:calc(100% - 130px) !important;} .form_area.label_140 .select2.select2-container {width:calc(100% - 140px) !important;} .form_area.label_150 .select2.select2-container {width:calc(100% - 150px) !important;} .form_area.label_160 .select2.select2-container {width:calc(100% - 160px) !important;} .form_area.label_170 .select2.select2-container {width:calc(100% - 170px) !important;} .form_area.label_200 .select2.select2-container {width:calc(100% - 200px) !important;} .form_area table.table .form_control, .form_area table.table .form-control, .form_area table.table .text_info, .form_area table.table .input-group, .form_area table.table .form_group {width:100%; float:none;} .form_area .input-group .form_control, .form_area .input-group .form-control {width:auto;} .form_area .form_item {position:relative;} .form_area .form_item:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} .form_area .form_item + .form_item {margin-top:10px;} .form_area .form_item .row_item {margin:0 0 10px; line-height:30px;} .form_area .form_item .row_item:last-child {margin-bottom:0;} .form_area .form_item .row_item:after {content:""; display:block; width:100%; height:0; clear:both; float:none;} .form_area.row {margin:0 -10px;} .form_area.row [class*="col"] {padding:0 10px;} .form_area .m_check {height:30px;} .form_area .m_check > input[type=checkbox] + label {height:30px; line-height:30px;} .form_area.row .m_check {height:30px;} .form_area.row .m_check > input[type=checkbox] + label {height:30px; line-height:30px;} .form_area .icheckbox_flat-blue {margin-top:5px;} .form_area .txt_limit {text-align:right; color:#999; font-size:12px; margin-top:2px;} .form_area .required_info {text-align:right; font-size:12px; color:#777; margin-bottom:10px; padding-right:0;} .form_area.row .required_info {padding-right:10px;} .form_area .text {line-height:30px; display:inline-block; vertical-align:middle; margin:0 2px;} /* ******************* 팝업 본문 ******************* */ .modal-content .pop_content {position:relative; min-height:150px;} .modal-content .pop_content p {font-size:14px; color:#333; margin:0 0 10px; line-height:18px;} .modal-content .pop_content strong {font-size:14px; color:#000; margin:0 0 10px; line-height:18px; font-weight:700;} /* 아이콘(경고 등)이 있는 팝업 */ .modal-content .pop_content.pop_icon {padding-left:50px;} .modal-content .pop_content.pop_icon > i {position:absolute; left:0; top:0; font-size:30px; color:var(--color-button-active); line-height:1;} /* ******************** ETL - UDF 화면 ******************** */ #udfArea {width:calc(100% + 33px); height:100%; padding:20px 8px 0 0; margin:0; position:relative; overflow:hidden; position:relative; left:-13px; top:0; background:#fff;} /* 상단 탭 */ #udfArea #ul_tabList.nav.nav-tabs.tab_big {margin-bottom:5px; width:calc(100% - 8px); margin-left:8px;} #udfArea #ul_tabList.nav.nav-tabs.tab_big li.nav-item:first-child {margin-left:0;} #udfArea #ul_tabList.nav.nav-tabs.tab_big .nav-link {padding:8px 15px 6px;} #udfArea #ul_tabList.nav.nav-tabs.tab_big .nav-link span {position:static;} #udfArea #ul_tabList.nav.nav-tabs.tab_big .nav-link span i {position:absolute; right:8px; top:6px; transition:0.2s;} #udfArea #ul_tabList.nav.nav-tabs.tab_big .nav-link span i:hover {color:#1fa0dc;} /* 상단 우측 기능 버튼 */ #udfArea #ul_btn_ctrl {background:var(--color-main3); padding:0; margin:0; position:absolute; right:15px; top:8px; overflow:hidden; padding:0 30px; border-radius:20px;} #udfArea #ul_btn_ctrl li {list-style:none; padding:0; margin:0; float:left;} #udfArea #ul_btn_ctrl li a {color:#fff; display:block; padding:0 25px; height:40px; font-size:24px; color:#fff; transition:0.2s;} #udfArea #ul_btn_ctrl li#li_run_udf_component a, #udfArea #ul_btn_ctrl li a:hover {color:#3ad8ff;} #udfArea #ul_btn_ctrl li a i {line-height:40px;} /* 상단 에디터 영역 */ #udfArea #div_code_editor_area {border-bottom:1px solid #000;} #udfArea #div_code_editor_area.ace-tm .ace_gutter {background:#fff;} /* 하단 탭 */ #udfArea #div_stdout_area {padding-bottom:12px; padding-right:0 !important; width:calc(100% + 8px) !important;} #udfArea #div_stdout_area .div_stdout_tabarea {display:flex; width:100%; height:32px;} #udfArea #div_stdout_area .div_stdout_contents {background:#f0f9ff; height:calc(100% - 32px); overflow-y:auto;} #udfArea #div_stdout_area .div_stdout_contents pre {margin-bottom:0; font-size:12px;} #udfArea #ul_stdout_tab_list {width:100%; display:flex; list-style-type:none; padding:0; margin:0; border-bottom:1px solid #96989a;} #udfArea #ul_stdout_tab_list li {display:flex; padding:0 40px; margin:0; pointer-events:none; cursor:default; color:#bdc0c3; transition:0.2s; font-size:16px; line-height:32px; height:32px; pointer-events:auto; cursor:pointer; position:relative;} #udfArea #ul_stdout_tab_list li.active, #udfArea #ul_stdout_tab_list li:hover {color:#002b77;} #udfArea #ul_stdout_tab_list li.active:after, #udfArea #ul_stdout_tab_list li:hover:after {content:""; display:block; width:100%; height:3px; background:#002b77; position:absolute; left:0; bottom:0;} #udfArea #ul_stdout_tab_list.dark_theme li.active {text-decoration-color:#fff;} #udfArea #div_code_area.drop-hover .dropzone {position:absolute; width:calc(100% - 50px); margin-left:40px; margin-top:40px; height:66.5%; background-color:rgba(0, 0, 0, 0.4);} #udfArea #div_code_editor_area {background:#f0f9ff;} /* footer info */ #udfArea .udf_footer_info {width:100%; height:20px; background:#fff; position:absolute; bottom:0px; display:flex; justify-content:flex-end; border-top:1px solid #d9d9d9;} #udfArea .udf_footer_info span {color:#666; display:inline-block; padding:0 10px;} #udfArea .throbber {display:flex; justify-content:center; align-items:center; padding-right:5px;} #udfArea .throbber-circle {width:10px; height:10px; border:3px solid white; border-top-color:transparent; border-radius:50%; animation:throbber-rotate 1.8s linear infinite;} #udfArea .vam input, .dropdown {margin-top:0;} #udfArea .dataTable td {border-bottom:1px solid #e5e5e5;} #udfArea .dataTable {border-collapse:collapse;} @keyframes throbber-rotate { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } #udfArea .delete_field {cursor:pointer;} #udfArea .delete_enum_field {cursor:pointer;} #udfArea :not(.input-group) > .bootstrap-select.form-control:not([class*="col-"]) {margin-right:0px;} #udfArea #table_python_library_list_wrapper {max-height:500px; overflow-y:auto;} #udfArea #table_python_library_list {width:100%; table-layout:fixed;} #udfArea #table_python_library_list > thead {position:sticky; top:0px; background-color:white; z-index:1;} #udfArea #table_python_library_list > tbody {overflow-y:scroll;} #udfArea #table_filed_param_list_wrapper {max-height:370px; height:370px; overflow-y:auto;} #udfArea #table_filed_param_list_second_wrapper{max-height:370px; height:370px; overflow-y:auto;} #udfArea #table_filed_param_list_third_wrapper{max-height:320px; height:320px; overflow-y:auto;} #udfArea #table_filed_param_list {table-layout:fixed;} #udfArea #table_filed_param_list_second {table-layout:fixed;} #udfArea #table_filed_param_list_third {table-layout:fixed;} #udfArea #table_filed_param_list > tbody {overflow-y:scroll;} #udfArea #table_filed_param_list_second > tbody {overflow-y:scroll;} #udfArea #table_filed_param_list_third > tbody {overflow-y:scroll;} #udfArea table.dataTable tbody th, #udfArea table.dataTable tbody td {text-align:center; font-weight:bold;} /* ******************** ETL - dagDependencies - Flowchart ******************** */ #div_dependenciesFlowchart {width:3000px; height:3000px; position:absolute; left:0; top:0; background:#fff url("../images/common/flow_grid_etl.png") repeat center center;} #div_dependenciesFlowchart .flowchart-hover-btn, #div_dependenciesFlowchart .flowchart-detail {display:none !important;} /* Default Operator */ #div_dependenciesFlowchart .flowchart-operator {position:absolute; min-width:130px; max-width:600px; border:1px solid #dadada !important; background:#fff; pointer-events:auto; letter-spacing:0; box-shadow:none; border-radius:0; padding:0;} #div_dependenciesFlowchart .flowchart-operator:hover {box-shadow:none;} #div_dependenciesFlowchart .flowchart-operator.hover .flowchart-operator-title {background:#fff;} #div_dependenciesFlowchart .flowchart-operator.hover, #div_dependenciesFlowchart .flowchart-operator.selected {border:1px solid #dadada !important; z-index:5000;} #div_dependenciesFlowchart .flowchart-operator .flowchart-operator-title {width:100%; padding:18px 20px 18px 75px; box-sizing:border-box; color:#000; font-size:18px; text-align:left; position:relative; height:auto; cursor:move; border-bottom:none; border-radius:0; word-break:keep-all; letter-spacing:0; position:relative; font-weight:500; transition:0.2s; box-shadow:0 5px 5px rgba(0,0,0,0.05); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} #div_dependenciesFlowchart .flowchart-operator .flowchart-operator-title:before {font-family:'Icofont'; position:absolute; left:18px; top:10px; font-size:22px; color:#fff; font-weight:500; border-radius:20px; width:40px; height:40px; padding-top:0; content:"\eeff"; background:#496aea; text-align:center; line-height:40px; display:block;} #div_dependenciesFlowchart .flowchart-operator.node_dataset .flowchart-operator-title:before {content:"\e97b"; background:#496aea;} #div_dependenciesFlowchart .flowchart-operator.node_dag .flowchart-operator-title:before {content:"\eeff"; background:#00baff;} #div_dependenciesFlowchart .flowchart-operator.hover .flowchart-operator-title, #div_dependenciesFlowchart .flowchart-operator.selected .flowchart-operator-title {box-shadow:0 10px 15px rgba(0,0,0,0.15);} #div_dependenciesFlowchart .flowchart-operator .flowchart-operator-subTitle {display:none;} /* flowchart-vertical */ #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-inputs, .flowchart-vertical .flowchart-operator-outputs {position:relative; text-align:center; display:table; width:100%;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-connector-set {display:table-cell;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-connector {position:relative; padding:0; display:block;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-connector-label {position:relative; text-align:center; width:100%; display:none;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-inputs .flowchart-operator-connector-label {margin-left:auto;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-connector-arrow {border-left:none; border-right:none; border-top:none; left:calc(50% - 10px); transition:0.2s; width:13px; height:13px; border:0; border-radius:7px; background-color:#0046c3; top:-6px;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {border-left:none; border-top-color:none; cursor:pointer; background:#ff9908;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-connector-small-arrow {display:none;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector-arrow {top:auto; bottom:-6px; top:auto; background-color:transparent; border-radius:0; border:2px solid #bbb;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {border-left:2px solid #bbb; border-color:#ff9908 !important; background:transparent;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator-outputs .flowchart-operator-connector-small-arrow {display:none;} /* 노드 선택 효과 */ #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator:after {content:""; display:block; width:calc(100% + 4px); height:calc(100% + 4px); position:absolute; left:-2px; top:-2px; border:2px solid #dadada; opacity:0; transition:0.3s; z-index:0; pointer-events:none;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator.node_dataset:after {border-color:#496aea;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator.node_dag:after {border-color:#00baff;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator.hover:after, #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator.selected:after {opacity:1;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-operator .flowchart-operator-title {border-bottom:none; border-radius:3px 3px 0 0; color:#333; font-weight:bold;} #div_dependenciesFlowchart.flowchart-vertical .flowchart-link rect {display:none;} /*=========================================================================================================================== DRS 화면 =============================================================================================================================*/ /* 상단 검색 */ .drs_container .top_search_area {position:relative; overflow:hidden; padding:0;} .drs_container .top_search_area .search_item {display:inline-block; margin-right:30px; vertical-align:top;} .drs_container .top_search_area .search_item:last-child {margin-right:0;} .drs_container .top_search_area .search_item .search_label {display:inline-block; padding:5px 10px 0 0; vertical-align:top;} .drs_container .top_search_area .search_item .search_condition {display:inline-block; vertical-align:top;} .drs_container .top_search_area .search_item .search_condition .form-control {display:inline-block; width:auto; min-width:100px; vertical-align:top;} .drs_container .top_search_area .search_item .search_condition button {display:inline-block; vertical-align:top;} .drs_container .top_search_area .search_item .search_condition .select2-container {margin-right:0;} /**** 프로젝트 목록 ***************************************************************************************/ /* 상단 현황판 */ .drs_container .top_state{display:flex; flex-direction:row; align-items:center; margin:30px 30px 50px; border-radius:10px; background-color:var(--color-main3); box-shadow:0 8px 20px 2px rgb(0 0 0 / 10%); transition:all ease 0.2s;} .drs_container .top_state .mg_title{margin-bottom:15px; display:block;} .drs_container .top_state .mg_title h5{padding:0 20px 0 0; font-size:20px;} .drs_container .top_state .mg_title span{padding-left:0; color:#7b7e85; font-weight:300; display:inline-block;} .drs_container .top_state > div{position:relative;} .drs_container .top_state > .col_left{width:150px; padding:20px; border-radius:10px 0 0 10px;} .drs_container .top_state > .col_left strong{line-height:1.2; color:#fff; font-size:30px; font-weight:500;} .drs_container .top_state > .col_center{padding:20px 20px 20px 30px; border-radius:10px 0 0 10px; background-color:#fff;} .drs_container .top_state > .col_right{padding:20px 40px; border-radius:0 10px 10px 0; background-color:#fff;} .drs_container .top_state.state_project > div{height:250px;} .drs_container .top_state.state_project > .col_center{flex:1;} .drs_container .top_state.state_project > .col_right{flex:1;} .drs_container .top_state.state_project .icon_btn.icon_setting{position:absolute; left:20px; bottom:20px;} .drs_container .top_state.state_project .icon_btn.icon_setting:after{color:#fff;} .drs_container .top_state.state_project .project_view {display:flex; position:absolute; left:15px; bottom:15px;} .drs_container .top_state.state_project .project_view > button {display:block; width:30px; height:30px; font-size:0; border:0; background-color:inherit; background-repeat:no-repeat; background-position:center center;} .drs_container .top_state.state_project .project_view > .btn_card {background-image:url(../images/icon/icon_project_card.png);} .drs_container .top_state.state_project .project_view > .btn_card.active {background-image:url(../images/icon/icon_project_card_active.png);} .drs_container .top_state.state_project .project_view > .btn_list {background-image:url(../images/icon/icon_project_list.png);} .drs_container .top_state.state_project .project_view > .btn_list.active {background-image:url(../images/icon/icon_project_list_active.png);} .drs_container .top_state.state_monitoring > div {height:355px;} .drs_container .top_state.state_monitoring > .col_left {width:200px;} .drs_container .top_state.state_monitoring > .col_center {width:450px;} .drs_container .top_state.state_monitoring > .col_center:after {display:block; content:""; position:absolute; top:60px; right:0; bottom:0; border-right:2px solid #e5e8ec;} .drs_container .top_state.state_monitoring > .col_right {flex:1;} .drs_container .top_state.state_monitoring .status_list {flex-wrap:wrap; padding-right:20px;} .drs_container .top_state.state_monitoring .status_list > li {flex:inherit; width:50%;} .drs_container .status_list{display:flex; flex-direction:row; padding:0; margin:0;} .drs_container .status_list > li{flex:1; padding:20px; margin:0; list-style:none; text-align:center;} .drs_container .status_list > li > .item label{display:block; line-height:30px; position:relative; font-size:20px; font-weight:700; text-align:center; padding:0 20px; border-radius:20px; color:#fff; padding-left:50px; height:30px; white-space:nowrap;} .drs_container .status_list > li > .item label:before {display:inline-block; width:30px; height:30px; line-height:30px; color:#fff; border-radius:15px; font-size:18px; text-align:center; position:absolute; left:15px; top:0px; font-family:bootstrap-icons!important; font-style:normal; font-weight:400! important; font-variant:normal; text-transform:none; vertical-align:-.125em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} .drs_container .status_list > li.progressing > .item label:before {content:"\e97f"; background-color:#ffbd4d; font-size:14px;} .drs_container .status_list > li.completed > .item label:before {content:"\eed8"; background-color:#6bd03f;} .drs_container .status_list > li.query .item label {background-color:#00baff;} .drs_container .status_list > li.dataset .item label {background-color:#496aea;} .drs_container .status_list > li.file .item label {background-color:#ffaa1b;} .drs_container .status_list > li.query > .item label:before {content:"\F683";} .drs_container .status_list > li.dataset> .item label:before{content:"\F8BF";} .drs_container .status_list > li.file > .item label:before {content:"\F362";} .drs_container .status_list > li.scheduled > .item label:before {content:"\efd1"; color:#616ef4; font-size:20px;} .drs_container .status_list > li > .item strong {display:block; line-height:120px; font-size:60px; font-weight:700; text-align:center;} .drs_container .history_list {padding:0; margin:0; position:absolute; top:50px; left:45px;} .drs_container .history_list:before {display:block; content:''; width:1px; position:absolute; top:25px; bottom:10px; background-color:#e1e3e7;} .drs_container .history_list > li {padding:5px; margin:0; list-style:none; position:relative;} .drs_container .history_list > li:before {display:block; content:''; width:7px; height:7px; position:absolute; top:27px; left:-3px; border-radius:6px; background-color:#003880;} .drs_container .history_list > li a {display:flex; align-items:center; padding:15px; position:relative;} .drs_container .history_list > li a:hover {background-color:#f3f8ff;} .drs_container .history_list > li .category {width:100px; color:#003880; font-weight:bold; font-size:12px;} .drs_container .history_list > li .text {flex:1; font-size:15px;} .drs_container .history_list > li .time {width:100px; color:#7b7e85; font-size:12px; text-align:right;} .drs_container .top_state .recently_list {display:flex; flex-direction:row; flex-wrap:wrap; padding:0; margin:0;} .drs_container .top_state .recently_list > li {width:33.3333%; padding:10px; margin:0; list-style:none;} .drs_container .top_state .recently_list > li > .item {display:block; padding:20px; position:relative; border:1px solid #a8a8a8; border-radius:5px;} .drs_container .top_state .recently_list > li > .item:hover {box-shadow:0 0 10px rgba(0,0,0,0.3);} .drs_container .top_state .recently_list > li > .item .fileName {display:block; font-size:20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .drs_container .top_state .recently_list > li > .item .term {display:block; margin-top:5px;} .drs_container .top_state .recently_list > li > .item .date {display:block; margin-top:20px;} .drs_container .top_state.state_monitoring .status_list > li > .item .icon_state {padding-right:20px;} .drs_container .top_state.state_monitoring .status_list > li > .item .icon_state:after {display:block; content:"\eaa0"; position:absolute; top:0; right:0; font-family:"IcoFont";} .drs_container .top_state .schedule_calendar {display:flex;} .drs_container .top_state .schedule_calendar > div {height:100%;} .drs_container .top_state .schedule_calendar > .calendar_left {flex:1;} .drs_container .top_state .schedule_calendar > .calendar_right {flex:1; padding-left:60px;} .drs_container .top_state .schedule_calendar .status_progress {padding:0; margin:60px 0 0;} .drs_container .top_state .schedule_calendar .status_progress > li {display:flex; padding:0; margin:35px 0 0; list-style:none;} .drs_container .top_state .schedule_calendar .status_progress > li > strong {width:100px; padding-right:20px; text-align:right; font-weight:normal;} .drs_container .top_state .schedule_calendar .status_progress > li > .progress {flex:1; margin-bottom:0; position:relative; background-color:transparent; box-shadow:none; overflow:initial;} .drs_container .top_state .schedule_calendar .status_progress > li > .progress .progress-bar {border-radius:0 10px 10px 0; overflow:initial;} .drs_container .top_state .schedule_calendar .status_progress > li > .progress .progress-bar span {display:inline-block; padding:0 5px; color:#000; position:absolute; right:-30px;} .drs_container .top_state .calendar_right .month_state_count {display:block; position:relative;} .drs_container .top_state .calendar_right .month_state_count .count {line-height:1; padding:2px 10px; position:absolute; top:0; right:0; border-radius:5px; color:#fff; background-color:#26a1ff;} .drs_container .top_state .calendar_right .month_state {padding:0; margin:26px 0;} .drs_container .top_state .calendar_right .month_state:after {display:block; content:''; clear:both;} .drs_container .top_state .calendar_right .month_state > li {float:left; width:50%; padding:10px; margin:0; list-style:none;} .drs_container .top_state .calendar_right .month_state > li .state {display:block;} .drs_container .top_state .calendar_right .month_state > li .state.completed {color:green;} .drs_container .top_state .calendar_right .month_state > li .state.failed {color:red;} .drs_container .top_state .calendar_right .month_state > li strong {display:block; font-size:30px;} .drs_container .schedule_info {padding:0; margin:0;} .drs_container .schedule_info > li {display:inline-block; padding-right:10px; font-size:10px;} .drs_container .schedule_info > li > i {display:inline-block; width:8px; height:8px; border-radius:4px;} .drs_container .top_state .calendar_right .schedule_info {position:absolute; top:55px; right:30px;} .drs_container .top_state .schedule_list {display:none; position:absolute; top:55px; right:40px; bottom:0; left:40px; background-color:#fff; transition:all ease 0.2s; z-index:1;} .drs_container .top_state .schedule_list.active {display:block;} .drs_container .top_state .schedule_list .btn_calendar {padding:0 15px 0 30px; position:absolute; top:0; right:0;} .drs_container .top_state .schedule_list .btn_calendar:after {display:block; content:"\ec45"; line-height:20px; position:absolute; top:0; left:10px; font-family:"IcoFont"; color:#fff; text-align:center;} .drs_container .top_state .schedule_list .slide_day {margin:45px 0 0 0; padding:0 30px; position:relative;} .drs_container .top_state .schedule_list .slide_day .owl-carousel {height:65px; padding:0 15px;} .drs_container .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item {padding:0 5px;} .drs_container .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item div {display:block; padding-bottom:20px; text-align:center;} .drs_container .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item a {display:block; min-width:54px; height:45px; border-radius:5px; text-align:center; border:1px solid #e1e3e7; background-color:#fff;} .drs_container .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item a:hover {background-color:#f3f8ff;} .drs_container .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item a.active {border-color:#26a1ff; box-shadow:2px 10px 20px rgba(0,0,0,0.1);} .drs_container .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item .month {display:block; line-height:20px;} .drs_container .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item .count {display:block; padding:2px; margin-top:4px; line-height:1; font-size:12px; color:#fff; border-radius:8px; background-color:#26a1ff;} .drs_container .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item .day {display:block; line-height:45px;} .drs_container .top_state .schedule_list .slide_day .owl-nav > button {display:block; width:30px; line-height:45px; position:absolute; top:0; text-indent:-9999px; border-radius:3px; background-color:transparent;} .drs_container .top_state .schedule_list .slide_day .owl-nav > button:after {display:block; line-height:45px; position:absolute; top:0; right:0; left:0; font-family:"IcoFont"; color:#000; font-size:20px; text-align:center; text-indent:0;} .drs_container .top_state .schedule_list .slide_day .owl-nav > button:hover:after {color:#26a1ff;} .drs_container .top_state .schedule_list .slide_day .owl-nav > button.disabled:hover:after {color:initial;} .drs_container .top_state .schedule_list .slide_day .owl-prev {left:-30px;} .drs_container .top_state .schedule_list .slide_day .owl-next {right:-30px;} .drs_container .top_state .schedule_list .slide_day .owl-prev:after {content:"\eac9";} .drs_container .top_state .schedule_list .slide_day .owl-next:after {content:"\eaca";} .drs_container .top_state .schedule_list .mg_list {max-height:160px; border-color:transparent; overflow:auto;} .drs_container .top_state .schedule_list .mg_list > li {min-height:50px; border-bottom:none;} .drs_container .top_state .schedule_list .mg_list > li > .repeat {font-size:12px; color:#003880;} .drs_container .top_state .schedule_list .mg_list > li > .time {font-size:12px; color:#7b7e85; text-align:right;} .nav-md .drs_container .side_state {width:580px; padding-left:240px;} .nav-md .drs_container .top_state {margin-left:50px; margin-right:50px;} .nav-md .drs_container .mg_tab.tab_project > .tab_bar {padding:0 50px;} .nav-md .drs_container .mg_tab.tab_project > .tab_content.project_content {padding:20px 50px;} .nav-md .drs_container .project_content .group_search {right:50px;} /* 좌측 현황판 */ .drs_container .side_state {width:430px; padding:0 0 0 60px; position:fixed; top:10px; bottom:0; left:0; border-radius:0 20px 0 0; border:1px solid #f4f4f4; background-color:#fff; box-shadow:0 10px 20px 2px rgb(0 0 0 / 20%); transition:all ease 0.2s; z-index:9;} .drs_container .side_state h2 {padding:15px; margin:0; font-size:20px; font-weight:700;} .drs_container .side_state .icon_close_side {position:absolute; top:15px; right:15px; font-weight:400;} .drs_container .side_state .icon_close_side:after {font-size:20px;} .drs_container .side_state.inactive {left:-370px;} .drs_container .side_state.inactive .icon_close_side {width:20px; height:60px; line-height:60px; right:-20px; border:1px solid #e2e3e7; border-radius:0 10px 10px 0; background-color:#fff;} .drs_container .side_state.inactive .icon_close_side:after {content:"\eaa0"; font-size:14px;} .nav-md .drs_container .side_state.inactive, .nav-md .drs_container .side_state.inactive {left:-340px;} .mg_wrap.expand .drs_container .side_state.inactive {left:-340px;} .drs_container .side_state dl {padding:0 15px;} .drs_container .side_state dl > dt {font-size:17px; font-weight:500;} .drs_container .side_state dl > dt > span {display:inline-block; padding-left:5px; color:#969caa; font-size:12px; font-weight:400;} .drs_container .side_state dl > dd {padding:10px 0;} .drs_container .side_state .item {padding:15px; margin-bottom:20px; position:relative; border:1px solid #e8edf1; border-radius:10px; background-color:#fff;} .drs_container .side_state .item:hover {background-color:#f3f8ff;} .drs_container .side_state .item .title {display:-webkit-box; padding:0; margin:10px 0; line-height:1; -webkit-line-clamp:1; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-weight:normal; font-size:17px;} .drs_container .side_state .item .title .icon_state {font-size:0;} .drs_container .side_state .item .brief {display:-webkit-box; padding:0; margin:5px 0; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} .drs_container .side_state .item .close_item {width:20px; height:20px; position:absolute; top:10px; right:10px; border:0; background-color:transparent; text-indent:-9999px;} .drs_container .side_state .item .close_item:after {display:block; content:"\eee1"; line-height:20px; position:absolute; top:0; right:0; left:0; color:#8e9299; font-family:"IcoFont"; font-size:20px; text-align:center; text-indent:0;} .drs_container .side_state .item .mg_list {border-color:transparent;} .drs_container .side_state .item .mg_list > li {border:0; background-color:transparent;} .drs_container .side_state .item .mg_list > li > div {padding:2px;} .drs_container .side_state .item .mg_list > li > .que {width:100px; padding-right:20px; text-align:right;} /* 좌측 현황판 - project */ .drs_container .side_state.state_project .item .date {padding-left:25px; position:relative; color:#969caa;} .drs_container .side_state.state_project .item .date:after {display:inline-block; content:"\ef35"; line-height:1; position:absolute; top:2px; left:0; font-family:"IcoFont"; font-size:15px;} .drs_container .side_state.state_project .item .info {display:flex; padding:0; margin:10px 0 0;} .drs_container .side_state.state_project .item .info > li {padding:0; margin:0 15px 0 0; list-style:none; color:#969caa; font-size:12px; font-weight:300;} .drs_container .side_state.state_project .item .m_switch {height:15px; position:absolute; top:10px; right:10px;} .drs_container .side_state.state_project .item .m_switch > input[type=checkbox] + label {width:30px; height:15px; border-width:2px;} .drs_container .side_state.state_project .item .m_switch > input[type=checkbox] + label:after {width:11px; height:11px;} .drs_container .side_state.state_project .item .m_switch > input[type=checkbox]:checked + label {} .drs_container .side_state.state_project .item .m_switch > input[type=checkbox]:checked + label:after {left:calc(100% - 11px);} /* 좌측 현황판 - registry */ .drs_container .side_state.state_registry .item .category {display:block; padding:5px 0 0; color:#003880;} .drs_container .side_state.state_registry .item .info {display:flex; padding:0; margin:10px 0 0;} .drs_container .side_state.state_registry .item .info > li {padding:0; margin:0 15px 0 0; list-style:none; color:#7b7e85; font-size:12px; font-weight:300;} /**** 프로젝트 목록_New ***************************************************************************************/ /* 상단 현황판 */ .catalog_top_area {display:flex; justify-content:space-between; padding:10px 0 0; margin-bottom:60px;} .catalog_top_area h3.ct_title {font-size:28px; font-weight:900; margin:0 0 20px;} .catalog_top_area .ct_left {width:860px; min-width:620px;} .catalog_top_area .ct_left ul.ct_status {display:flex; justify-content:space-between; padding:0; margin:0;} .catalog_top_area .ct_left ul.ct_status li {background:#999; border-radius:15px; width:200px; height:170px; list-style:none; padding:30px 20px 20px; color:#fff; position:relative;} .catalog_top_area .ct_left ul.ct_status li span {font-size:18px; font-weight:700; display:block; margin:0 0 5px;} .catalog_top_area .ct_left ul.ct_status li small{font-size:18px; display:block; margin:0 0 28px;} .catalog_top_area .ct_left ul.ct_status li.sl_total small {color:#4b82fe;} .catalog_top_area .ct_left ul.ct_status li.sl_query small {color:#8eb1ff;} .catalog_top_area .ct_left ul.ct_status li.sl_dataset small {color:#5be6ff;} .catalog_top_area .ct_left ul.ct_status li.sl_file small {color:#81ff55;} .catalog_top_area .ct_left ul.ct_status li strong {font-size:36px; font-weight:700; display:block; text-align:right; line-height:1; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; word-break:break-all; letter-spacing:0;} .catalog_top_area .ct_left ul.ct_status li.sl_total {background:#1d4aaf;} .catalog_top_area .ct_left ul.ct_status li.sl_query {background:#4765e3;} .catalog_top_area .ct_left ul.ct_status li.sl_dataset {background:#35b8e9;} .catalog_top_area .ct_left ul.ct_status li.sl_file {background:#4bc46a;} .catalog_top_area .ct_left ul.ct_status li:before {display:inline-block; width:60px; height:60px; line-height:50px; color:#fff; font-size:48px; text-align:center; position:absolute; right:20px; top:32px; font-family:"Font Awesome 6 Free"; font-weight:900; content:"";} .catalog_top_area .ct_left ul.ct_status li.sl_total:before {} .catalog_top_area .ct_left ul.ct_status li.sl_query:before {background:url(../images/icon/icon_c_query.png) no-repeat right top;} .catalog_top_area .ct_left ul.ct_status li.sl_dataset:before {background:url(../images/icon/icon_c_dataset.png) no-repeat right top;} .catalog_top_area .ct_left ul.ct_status li.sl_file:before {background:url(../images/icon/icon_c_file.png) no-repeat right top;} .catalog_top_area .ct_right {width:calc(100% - 890px); background:#fff; padding:25px 40px; border-radius:15px;} .catalog_top_area .ct_right h4 {font-size:22px; font-weight:700; color:#000; margin:0; padding:0 0 15px;} .catalog_top_area .ct_right h4 span {font-size:14px; display:inline-block; font-weight:700; color:#7b7e85; vertical-align:bottom; margin:0 0 0 20px; padding:0; vertical-align:bottom;} .catalog_top_area .ct_right h4 .history_legend {display:inline-block; vertical-align:bottom; margin:0 0 0 30px;} .catalog_top_area .ct_right h4 .history_legend span {color:#7b7e85; font-size:12px; margin:0 10px 0 0; position:relative; padding:0 0 0 13px; display:inline-block; height:14px; font-weight:400;} .catalog_top_area .ct_right h4 .history_legend span:before {content:""; display:inline-block; position:absolute; width:8px; height:8px; border-radius:4px; background:#999; left:0; top:2px;} .catalog_top_area .ct_right h4 .history_legend span.day:before {background-color:#0555d9;} .catalog_top_area .ct_right h4 .history_legend span.week:before {background-color:#499c9f;} .catalog_top_area .ct_right h4 .history_legend span.month:before {background-color:#919090;} .catalog_top_area .ct_right ul.ct_history {padding:0; margin:0; position:relative;} .catalog_top_area .ct_right ul.ct_history:before {content:""; display:block; width:100%; height:1px; background:#ccc; position:absolute; left:0; top:10px;} .catalog_top_area .ct_right ul.ct_history li {list-style:none; padding:25px 0 0; margin:0; position:relative;} .catalog_top_area .ct_right ul.ct_history li:before {content:""; display:block; width:8px; height:8px; border-radius:4px; background:#0e50a6; position:absolute; left:0; top:6px;} .catalog_top_area .ct_right ul.ct_history li a {} .catalog_top_area .ct_right ul.ct_history li a span.history_day {display:block; font-size:13px; color:#0e50a6; font-weight:700;} .catalog_top_area .ct_right ul.ct_history li a strong.category {display:block; font-size:16px; font-weight:700; margin:10px 0 12px; color:#0e50a6;} .catalog_top_area .ct_right ul.ct_history li a span.text {display:block; font-size:13px; color:#7b7e85; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; line-height:20px; height:40px; display:-webkit-box; -webkit-box-orient:vertical; white-space:normal; word-break:keep-all;} /* 1주일 이하 */ .catalog_top_area .ct_right ul.ct_history li.history_day:before {background-color:#0555d9;} .catalog_top_area .ct_right ul.ct_history li.history_day a span.history_day {color:#0555d9;} .catalog_top_area .ct_right ul.ct_history li.history_day a strong.category {color:#0555d9;} /* 1주일 초과 ~ 30일 이내 */ .catalog_top_area .ct_right ul.ct_history li.history_week:before {background-color:#499c9f;} .catalog_top_area .ct_right ul.ct_history li.history_week a span.history_day {color:#499c9f;} .catalog_top_area .ct_right ul.ct_history li.history_week a strong.category {color:#499c9f;} /* 30일 초과 */ .catalog_top_area .ct_right ul.ct_history li.history_month:before {background-color:#919090;} .catalog_top_area .ct_right ul.ct_history li.history_month a span.history_day {color:#919090;} .catalog_top_area .ct_right ul.ct_history li.history_month a strong.category{color:#919090;} .catalog_top_area .ct_right ul.ct_history .owl-nav {position:absolute; right:-10px; top:-31px; margin:0;} .catalog_top_area .ct_right ul.ct_history .owl-nav [class*='owl-']:hover {background:none;} .catalog_top_area .ct_right ul.ct_history .owl-nav [class*='owl-']:hover span {color:#54b9ff;} .catalog_top_area .ct_right ul.ct_history .owl-nav [class*='owl-'].disabled span {opacity:0.3;} .catalog_top_area .ct_right ul.ct_history .owl-nav [class*='owl-'].disabled:hover span {color:#000;} /* My Project */ .drs_container .project_body {margin:0 30px;} .drs_container .project_body .project_tab {position:relative;} .drs_container .project_body .project_tab .top_function {position:absolute; right:0; top:-10px;} .drs_container .mg_tab.tab_project > .tab_bar {padding:0 120px; border:0;} .drs_container .mg_tab.tab_project > .tab_content.project_content {min-height:calc(100vh - 345px); padding:20px 120px; position:relative; background-color:#f9f9f9;} .drs_container .project_content .group_search {position:absolute; top:-50px; right:120px;} .drs_container .project_content .group_search > .btn_searchTag {display:inline-flex; align-items:center; height:20px; padding:0 15px; margin-left:20px; color:#fff; font-size:12px; border:0; border-radius:20px; background-color:#1aadd2;} .drs_container .project_content .group_search > .btn_searchTag:hover {background-color:#26a1ff;} .drs_container .project_content .recently_item {min-height:192px;} .drs_container .project_content .recently_keywords {display:inline-flex; flex-direction:row; align-items:center;} .drs_container .project_content .recently_keywords > label {padding-right:5px; font-weight:300;} .drs_container .project_content .recently_keywords > a {display:inline-block; line-height:25px; padding:0 5px; margin:0 5px; text-decoration:underline;} .drs_container .project_content .recently_keywords > a:hover, .drs_container .project_content .recently_keywords > a.active {text-shadow:2px 0px 2px rgba(0,0,0,0.2);} .drs_container .search_total {display:inline-flex; flex-direction:row; align-items:center; margin:0 15px;} .drs_container .search_total label {font-weight:normal;} .drs_container .search_total label:after {display:inline; content:":"; padding:0 5px;} .drs_container .search_total strong {font-size:16px;} /* 검색 태그 */ .selected_keywords {display:inline-flex; flex-direction:row; align-items:center; font-size:12px; flex-wrap:wrap;} .selected_keywords > span {line-height:25px; padding:0 25px 0 10px; margin:0 5px 5px 0; position:relative; color:#26a1ff; border-radius:3px; border:1px solid #26a1ff; background-color:#fff;} .selected_keywords > span .delete_keyword {width:25px; height:25px; line-height:25px; position:absolute; top:2px; right:0; font-size:0; border:0; background:transparent; color:#26a1ff;} .selected_keywords > span .delete_keyword:after {display:block; content:"\eee1"; font-family:"icofont"; font-size:initial; position:absolute; top:0; right:0; left:0; bottom:0;} /* 검색 태그 _ no_link */ .selected_keywords.no_link > span {color:#333; border:1px solid #d9d9d9; background-color:#f8f8f8;} .selected_keywords.no_link > span .delete_keyword {color:#333; transition:0.2s;} .selected_keywords.no_link > span .delete_keyword:hover {color:#26a1ff;} .drs_container .project_content .select_sort {display:inline-flex; flex-direction:row; align-items:center; padding:0} .drs_container .project_content .select_sort > .bootstrap-select.m_select {margin:0;} .drs_container .project_content .select_sort > .bootstrap-select.m_select .dropdown-toggle {border:0;} /* ********** 카탈로그 리스트1 ********** */ .drs_lst.project_list {display:flex; flex-wrap:wrap; padding:0; margin:0 -20px; position:relative; width:100%;} .drs_lst.project_list > li {width:25%; height:390px; padding:20px; margin:0; list-style:none; box-sizing:border-box; transition:all ease 0.3s;} .drs_lst.project_list .project_item {height:360px; position:relative; border:1px solid #dadbdd; border-radius:10px; background-color:#fff; transition:0.3s;} .drs_lst.project_list .project_item:after {display:block; content:""; position:absolute; bottom:-40px; left:50%; transform:translate(-50%,0); opacity:0; transition:all ease 0.4s; line-height:1; width:0; height:0; border-top:20px solid #5e5e5e; border-right:12px solid transparent; border-bottom:20px solid transparent; border-left:12px solid transparent;} .drs_lst.project_list > li.active .project_item:after {opacity:1;} .drs_lst.project_list .project_item span.status_owner {position:absolute; left:30px; top:20px; display:inline-block; width:60px; height:20px; font-size:12px; color:#fff; background:#0fa8ce; text-align:center; line-height:21px; font-weight:400; border-radius:3px;} .drs_lst.project_list .project_item .item_category {display:block; padding:15px 20px 0; color:#1aadd2;} .drs_lst.project_list .project_item .item_title {color:#000; display:-webkit-box; height:110px; padding:40px 30px 0; margin:0; font-size:20px; line-height:1; word-break:break-all; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-weight:700; line-height:25px; transition:0.2s;} .drs_lst.project_list .project_item .item_title:hover {cursor:pointer; color:#26a1ff;} .drs_lst.project_list .project_item .item_title i {display:inline-block; color:#dc3545; margin-right:5px;} .drs_lst.project_list .project_item .item_brief {display:-webkit-box; height:40px; padding:0 30px; margin:20px 0 11px; font-size:15px; line-height:20px; word-break:break-all; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} .drs_lst.project_list .project_item .item_tag_list {display:block; height:25px; padding:0 30px; margin:5px 0; word-break:break-word; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .drs_lst.project_list .project_item .item_tag_list > li {display:inline-block; background:#f3faff; color:#2b85ff; font-size:12px; padding:0px 6px; border-radius:5px; line-height:25px; margin-right:4px; height:25px; border:1px solid #2b85ff;} .drs_lst.project_list .project_item .item_tag_list > li:before {content:"#"; display:inline;} .drs_lst.project_list .project_item .item_tag_list > li.match_tag {color:#26a1ff;} .drs_lst.project_list .sub_item > .tag_item {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; width:100%; height:25px;} .drs_lst.project_list .sub_item > .tag_item span {display:inline-block; background:#f3faff; color:#2b85ff; font-size:12px; padding:0px 6px; border-radius:5px; line-height:25px; margin-right:4px; height:25px; border:1px solid #2b85ff;} .drs_lst.project_list .project_item .item_info {display:flex; flex-wrap:wrap; height:20px; padding:0 30px; margin:5px 0;} .drs_lst.project_list .project_item .item_info > span {display:inline-flex; line-height:20px; padding:0 5px; margin:0; list-style:none; color:#7b7e85; font-size:14px;} .drs_lst.project_list .project_item .item_info > span:nth-child(1) {padding-left:0;} .drs_lst.project_list .project_item .item_info > .share_by {display:flex; align-items:flex-start; padding:0; position:absolute; right:30px;} .drs_lst.project_list .project_item .item_info > .share_by:before {display:block; content:"shared by"; padding-right:5px;} /* 하단 버튼영역 */ .drs_lst.project_list .project_item .item_btn {display:flex; padding:40px 15px 50px 92px; margin-top:0; z-index:2; overflow:hidden; height:143px; position:absolute; left:0; bottom:0; width:100%;} /* 디테일 버튼 */ .drs_lst.project_list .project_item .item_btn > .btn_assetList, .drs_lst.project_list .project_item .item_btn > .btn_1, .drs_lst.project_list .project_item .item_btn > .btn_2 {display:inline-block; position:absolute; left:50%; bottom:0; height:30px; width:200px; line-height:30px; margin:0; color:#fff; text-align:center; border-radius:30px 30px 0 0; z-index:10; background-color:#757576; border:0; cursor:pointer; transition:0.2s; padding:0; opacity:0; margin-left:-100px;} .drs_lst.project_list .project_item .item_btn > .btn_assetList:hover, .drs_lst.project_list .project_item .item_btn > .btn_1:hover, .drs_lst.project_list .project_item .item_btn > .btn_2:hover {background-color:#555;} /* Total */ .drs_lst.project_list .project_item .item_btn > .c_info_total {display:inline-block; position:absolute; left:-44px; top:0;; height:129px; width:122px; line-height:1; margin:0; color:#fff; text-align:right; border-radius:5px; background-color:var(--color-main2); border:0; transition:0.3s; border-radius:50%; padding:34px 25px 0 45px; font-size:14px; font-weight:300;} .drs_lst.project_list .project_item .item_btn > .c_info_total strong {display:block; font-size:20px; font-weight:700; margin:10px 0 0;} .drs_lst.project_list .project_item .item_btn > div.c_info {display:block; width:33%; text-align:center; font-size:15px; border-right:1px solid #c2c2c2; padding:2px 0;} .drs_lst.project_list .project_item .item_btn > div.c_info.data {width:40%;} .drs_lst.project_list .project_item .item_btn > div.c_info.advanced {width:33%;} .drs_lst.project_list .project_item .item_btn > div.c_info.stroage {width:27%;} .drs_lst.project_list .project_item .item_btn > div.c_info:last-child {border:none;} .drs_lst.project_list .project_item .item_btn > div.c_info span {display:block;} .drs_lst.project_list .project_item .item_btn > div.c_info.data span {color:#00aeee;} .drs_lst.project_list .project_item .item_btn > div.c_info.advanced span{color:#0041b2;} .drs_lst.project_list .project_item .item_btn > div.c_info.storage span {color:#ff8a00;} .drs_lst.project_list .project_item .item_btn > div.c_info strong {display:block; font-size:18px; font-weight:700; margin-top:5px;} .drs_lst.project_list .project_item .item_option {display:flex; height:30px; justify-content:center; position:absolute; top:0px; right:20px; overflow:inherit; opacity:0; z-index:1; transition:all ease 0.2s;} .drs_lst.project_list .project_item:hover .item_option {height:30px; top:13px; overflow:inherit; opacity:1;} .drs_lst.project_list .project_item .item_option button {width:30px; height:30px; line-height:30px; margin:0 4px; border-radius:15px; color:var(--color-main2); background-color:#fff; border:1px solid var(--color-main2);} .drs_lst.project_list .project_item .item_option button:hover {background-color:var(--color-main2); color:#fff;} .drs_lst.project_list .project_item .item_option button:after {line-height:30px;} .drs_lst.project_list .project_item .item_option button:hover:after {color:inherit;} .drs_lst.project_list .project_item .item_option button.icon_btn.icon_detail {background:#000000 url(../images/icon/icon_white_detail.png) no-repeat center center;} .drs_lst.project_list .project_item .item_option button.icon_btn.icon_detail:hover {background:#1aadd2 url(../images/icon/icon_white_detail.png) no-repeat center center;} .drs_container .project_list .project_item.new{border:0;} .drs_container .project_list .project_item.new:before{display:none;} .drs_container .project_list .project_item.new .project_new{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;color:#bec2c5;border-radius:10px;border:2px dashed #e1e3e7;background-color:#fff;font-size:17px;} .drs_container .project_list .project_item.new .project_new:before{display:block;content:"\eee1";padding:10px;font-family:'icofont';color:#bec2c5;font-size:60px;transform:rotate(-45deg);} .drs_container .project_list .project_item.new:hover{box-shadow:none;} .drs_container .project_list .project_item.new:hover:after{display:none;} .drs_container .project_list .project_item.new:hover .project_new{color:#000;border-color:#26a1ff;background-color:#f3f8ff;} .drs_container .project_list .project_item.new:hover .project_new:before{color:#26a1ff;} .drs_lst.project_list .sub_list {display:block; width:calc(100% + 90px); margin-left:-45px; height:0; margin-top:30px; position:absolute; left:20px; background-color:rgb(242, 242, 242); overflow:hidden; opacity:0; transition:all ease 0.2s; box-shadow:inset 0 4px 20px rgba(0,0,0,0.15);} .nav-md .drs_lst.project_list .sub_list {width:calc(100vw - 300px);} .drs_lst.project_list .sub_list::-webkit-scrollbar {width:4px; height:4px;} .drs_lst.project_list .sub_list > ul {display:flex; padding:20px 35px; margin:0; white-space:nowrap;} .drs_lst.project_list .sub_list > ul > li {padding:0 10px; margin:0; list-style:none;} .drs_lst.project_list .sub_item {width:350px; height:275px; padding:0; position:relative; border:1px solid #dadbdd; border-radius:10px; background:#fff; transition:0.2s; padding:55px 30px 25px;} .drs_lst.project_list .sub_item > .item_category {color:#1aadd2;} .drs_lst.project_list .sub_item > span.category_icon {position:absolute; background:#666; border-radius:0 0 15px 15px; display:inline-block; padding:0; color:#fff; font-size:14px; left:20px; top:0; font-weight:700; text-align:center; height:30px; width:120px; line-height:30px;} .drs_lst.project_list .sub_item > span.category_icon.categpry_dataset {background:#496aea;} .drs_lst.project_list .sub_item > span.category_icon.categpry_query {background:#00baff;} .drs_lst.project_list .sub_item > span.category_icon.categpry_file {background:#ffaa1b;} .drs_lst.project_list .sub_item > .item_title {display:block; height:20px; padding:0; margin:0; font-size:20px; line-height:20px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#000;} .drs_lst.project_list .sub_item > .item_brief {display:-webkit-box; height:40px; padding:0; margin:20px 0; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-size:15px; line-height:20px; color:#000;} .drs_lst.project_list .sub_item > .tag_item {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; width:100%; height:25px;} .drs_lst.project_list .sub_item > .tag_item span {display:inline-block; background:#f3faff; color:#2b85ff; font-size:12px; padding:0px 6px; border-radius:5px; line-height:25px; margin-right:4px; height:25px; border:1px solid #2b85ff;} .drs_lst.project_list .sub_item > .item_info {display:block; padding:0; margin:25px 0 0; position:relative;} .drs_lst.project_list .sub_item > .item_info > span {display:block; line-height:20px; font-size:14px; margin:0; color:#7b7e85;} .drs_lst.project_list .sub_item > .item_info > span.owner_nick {float:left; margin:0 10px 0 0; width:40px; height:40px; border-radius:20px; background:#0041b2; color:#fff; text-align:center; line-height:42px; font-size:24px; text-transform:uppercase;} .drs_lst.project_list .sub_item > .item_info > span.like {position:absolute; right:0; bottom:0; font-size:14px; color:#000000; display:inline-block;} .drs_lst.project_list .sub_item > .item_info > span.like:before {content:"\f004"; font-family:"FontAwesome"; font-size:16px; color:#e92920; margin:0 5px 0 0; vertical-align:middle;} .drs_lst.project_list .sub_item > .item_option {display:flex; align-items:center; justify-content:center; opacity:0; transition:all ease 0.2s; position:absolute; right:20px; top:0;} .drs_lst.project_list .sub_item > .item_option button {width:30px; height:30px; line-height:30px; margin:0 4px; border-radius:15px; background:#fff; transition:all ease 0.2s; border:1px solid var(--color-main2); color:var(--color-main2);} .drs_lst.project_list .sub_item > .item_option button:after {display:block; line-height:30px;} .drs_lst.project_list .sub_item > .item_option button:hover {background:var(--color-main2); color:#fff;} .drs_lst.project_list .sub_item > .item_option button:hover:after {color:#fff;} .drs_lst.project_list .sub_item > .item_option button.icon_btn.icon_detail:after {content:"\ed11";} .drs_lst.project_list .sub_item:hover {border-color:#989898; box-shadow:0 10px 20px 2px rgba(0,0,0,0.2); color:#fff;} .drs_lst.project_list .sub_item:hover > .item_option {display:flex; opacity:1; top:15px;} .drs_lst.project_list > li.active {height:725px; padding-bottom:315px;} .drs_lst.project_list > li.active .project_item, .drs_lst.project_list > li:hover .project_item {border-color:#989898; box-shadow:0 10px 20px 2px rgba(0,0,0,0.2);} .drs_lst.project_list > li.active .project_item .item_btn > .btn_assetList, .drs_lst.project_list > li.active .project_item .item_btn > .btn_1, .drs_lst.project_list > li.active .project_item .item_btn > .btn_2, .drs_lst.project_list > li:hover .project_item .item_btn > .btn_assetList, .drs_lst.project_list > li:hover .project_item .item_btn > .btn_1, .drs_lst.project_list > li:hover .project_item .item_btn > .btn_2 {opacity:1;} .drs_lst.project_list > li.active .sub_list.active {height:315px; overflow-x:auto; z-index:2; opacity:1;} html.no-text-select, html.no-text-select *{user-select:none !important;} .project_list .sub_list.active {cursor:grab;} .project_list .sub_list.active.is-dragging {cursor:grabbing;} /* 프로젝트 리스트 목록형 */ .drs_container .type_row .project_list {flex-direction:column; flex-wrap:nowrap; margin:0;} .drs_container .type_row .project_list > li {width:inherit; height:inherit; padding:0; margin:10px 0; border-color:var(--color-main3); border-radius:10px; background-color:#fff;} .drs_container .type_row .project_list .project_item {display:flex; flex-direction:row; min-height:65px; height:inherit; padding:15px 15px 15px 45px;} .drs_container .type_row .project_list .project_item:after, .drs_container .type_row .project_list .project_item:hover:after {display:none;} .drs_container .type_row .project_list .project_item:hover {background-color:#f3f8ff;} .drs_container .type_row .project_list .project_item .item_title {flex:2; -webkit-line-clamp:1; height:30px; line-height:30px; padding:0; margin:0; cursor:pointer;} .drs_container .type_row .project_list .project_item .item_title:before {display:inline-block; content:"\eaa0"; width:30px; height:30px; margin-right:20px; font-family:'IcoFont';} .drs_container .type_row .project_list .project_item .item_brief {flex:3; -webkit-line-clamp:1; height:30px; line-height:30px; padding:0 20px; margin:0;} .drs_container .type_row .project_list .project_item .item_tag_list {flex:1; height:30px; line-height:30px; padding:0 10px; margin:0; text-align:center;} .drs_container .type_row .project_list .project_item .item_info {display:none;} .drs_container .type_row .project_list .project_item .item_btn {justify-content:flex-end; padding:0; margin:0; z-index:inherit; display:none;} .drs_container .type_row .project_list .project_item .item_btn > .btn_assetList, .drs_container .type_row .project_list .project_item .item_btn > .btn_2 {margin:0 10px; color:#003880; border:none; background:none;} .drs_container .type_row .project_list .project_item .item_btn > .btn_assetList:after, .drs_container .type_row .project_list .project_item .item_btn > .btn_2:after {display:none;} .drs_container .type_row .project_list .project_item .item_option {padding:0 10px; position:static; opacity:1; overflow:inherit;} .drs_container .type_row .project_list .project_item:hover .item_option {height:inherit; margin-top:0;} .drs_container .type_row .project_list .project_item .item_option button {width:30px; height:30px; line-height:inherit; margin:0 4px; color:inherit; background-color:inherit;} .drs_container .type_row .project_list .project_item .item_option button:hover:after {color:var(--color-main3);} .drs_container .type_row .project_list .project_item.new .project_new {flex-direction:row;} .drs_container .type_row .project_list .project_item.new .project_new:before {font-size:30px;} .drs_container .type_row .drs_lst.project_list .project_item span.status_owner {left:0; top:0; width:50px; height:15px; font-size:11px; line-height:15px; border-radius:5px 0 5px 0;} .drs_container .type_row .project_list > li.active {height:inherit; border-radius:10px; background-color:inherit;} .drs_container .type_row .project_list > li.active .project_item .item_title:before {content:"\ea99";} .drs_container .type_row .project_list > li.active .project_item .item_btn > .btn_assetList, .drs_container .type_row .project_list > li.active .project_item .item_btn > .btn_2 {color:#fff;} .drs_container .type_row .project_list > li.active .sub_list.active {height:inherit; margin:0 0 0 -45px; position:static; background-color:inherit; border:0; overflow:inherit; overflow-x:inherit;} .drs_container .type_row .project_list > li.active .sub_list > ul {flex-wrap:wrap; padding:20px 35px; margin:0 -15px; white-space:inherit;} .drs_container .type_row .project_list > li.active .sub_list > ul > li {width:25%; padding:10px 15px; border:0;} .drs_container .type_row .project_list > li.active .sub_item {width:100%; height:255px; padding-top:40px; border:1px solid #e1e3e7; border-radius:10px; background-color:#fff;} .drs_container .type_row .project_list > li.active .sub_item > .item_state {top:5px; right:0;} .drs_container .type_row .project_list > li.active .sub_item > .item_option {position:absolute; top:0; right:0; bottom:0; left:0; border-radius:10px; background-color:rgba(0,0,0,0.4); transform:translate(0,0);} .drs_container .type_row .project_list > li.active .sub_item:hover > .item_option {} /* ********** 카탈로그 리스트2 ********** */ /* 상단 리스트 정보 / 범례 */ .project_body .cl_lst_sort {display:flex; margin-left:30px;} .project_body .cl_lst_sort button {background:none; border:none; height:25px; line-height:25px; transition:0.2s; color:#000; display:inline-block; padding:0 10px; position:relative;} .project_body .cl_lst_sort button.active, .project_body .cl_lst_sort button:hover {color:#005ee3;} .project_body .cl_lst_sort button.active {font-weight:700;} .project_body .cl_lst_sort button:before {content:""; display:block; width:1px; height:15px; background:#ccc; position:absolute; left:0; top:5px;} .project_body .cl_lst_sort button:first-child:before {display:none;} .project_body .cl_lst_legend {margin-left:30px;} .project_body .cl_lst_legend span {display:inline-block; height:25px; line-height:25px; padding:0 6px; position:relative;} .project_body .cl_lst_legend span:before {content:""; display:inline-block; width:25px; height:25px; border-radius:15px; margin-right:7px; vertical-align:middle;} .project_body .cl_lst_legend span.data:before {background:#4765e3 url(../images/icon/icon_c_query_small.png) no-repeat center center;} .project_body .cl_lst_legend span.advanced:before {background:#35b8e9 url(../images/icon/icon_c_dataset_small.png) no-repeat center center;} .project_body .cl_lst_legend span.storage:before {background:#4bc46a url(../images/icon/icon_c_file_small.png) no-repeat center center;} /* 신규 카탈로그 */ .catalog_lst .project_item.new .project_new{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;color:#bec2c5;border-radius:10px;border:2px dashed #e1e3e7;background-color:#fff;font-size:17px;} .catalog_lst .project_item.new .project_new:before{display:block;content:"\eee1";padding:10px;font-family:'icofont';color:#bec2c5;font-size:60px;transform:rotate(-45deg);} .catalog_lst .project_item.new:hover{box-shadow:none;} .catalog_lst .project_item.new:hover:after{display:none;} .catalog_lst .project_item.new:hover .project_new{color:#000;border-color:#26a1ff;background-color:#f3f8ff;} .catalog_lst .project_item.new:hover .project_new:before{color:#26a1ff;} /* 카탈로그 보기 타입 버튼 */ .drs_container .project_body ul.mg_ctrl button.project_new {width:auto; font-size:13px; border-color:var(--color-button-active); background-color:var(--color-button-active); color:#fff; text-align:left; padding:0 20px 0 40px; line-height:28px; transition:0.2s; position:relative; margin-left:30px; border-radius:15px; border:none;} .drs_container .project_body ul.mg_ctrl button.project_new:before {display:inline-block; content:"\eee1"; font-family:'icofont'; font-size:18px; transform:rotate(-45deg); position:absolute; left:14px; top:0px;} .drs_container .project_body ul.mg_ctrl button.project_new:hover {background-color:#004bb6; border-color:#004bb6;} .drs_container .project_body ul.mg_ctrl {position:relative;} .drs_container .project_body ul.mg_ctrl li.project_function {display:flex; position:absolute; left:80px; top:6px;} .drs_container .project_body ul.mg_ctrl .project_function > button {display:inline-block; width:30px; height:30px; font-size:18px; border:1px solid #d9d9d9; border-radius:3px; background-color:#fff; color:#000; text-align:center; line-height:32px; padding:0; vertical-align:middle;} .drs_container .project_body ul.mg_ctrl .project_function > button.active, .drs_container .project_body ul.mg_ctrl .project_function > button:hover {color:#1aadd2;} .drs_container .project_body ul.mg_ctrl .project_function > button.btn_list {font-size:17px;} /* 리스트 */ .catalog_lst {display:flex; flex-wrap:wrap; padding:0; margin:0 -20px; position:relative; width:calc(100% + 40px);} .catalog_lst > li {width:33.33% ;padding:20px 12px 10px; margin:0; list-style:none; box-sizing:border-box; transition:all ease 0.3s;} /* ****************************** 반응형 ****************************** */ @media all and (min-width:1800px) { .catalog_lst > li {width:25%;} } @media all and (min-width:2100px) { .catalog_lst > li {width:20%;} } .catalog_lst .project_item {height:240px; position:relative; border:1px solid #dadbdd; border-radius:10px; background-color:#fff; transition:0.3s;} .catalog_lst .project_item:after {display:block; content:""; position:absolute; bottom:-40px; left:50%; transform:translate(-50%,0); opacity:0; transition:all ease 0.4s; line-height:1; width:0; height:0; border-top:20px solid #1d4aaf; border-right:12px solid transparent; border-bottom:20px solid transparent; border-left:12px solid transparent;} .catalog_lst > li.active .project_item:after {opacity:1;} /* ********** 제목, 정보 ********** */ .catalog_lst .project_item .item_title {color:#000; padding:25px 20px 0; margin:30px 0 0; font-size:20px; line-height:25px; transition:0.2s; color:#000; width:100%; font-weight:700; cursor:pointer; height:75px; display:-webkit-box; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:85%; word-break:keep-all; overflow:hidden; text-overflow:ellipsis;} .catalog_lst .project_item .item_title:hover {color:#54b9ff;} .catalog_lst .project_item .item_brief {padding:0 20px; margin-top:14px; color:#7b7e85;} .catalog_lst .project_item .item_brief span {display:block; margin:0; font-size:15px; line-height:20px; height:20px; white-space:nowrap; width:85%; word-break:keep-all; overflow:hidden; text-overflow:ellipsis;} /* ********** 상단 숫자 정보 ********** */ .catalog_lst .project_item .item_info_top {display:flex; justify-content:space-between; padding:0; position:absolute; left:0; top:0; justify-content:flex-start; width:100%; cursor:pointer;} /* Total */ .catalog_lst .project_item .item_info_top > .total {display:inline-block; margin:0; color:#fff; text-align:left; background-color:#1d4aaf; border:0; padding:8px 15px 0; font-size:12px; font-weight:400; justify-content:space-between; line-height:26px; height:35px; border-radius:0 0 12px 12px; top:-10px; position:relative;} .catalog_lst .project_item .item_info_top > .total:after {content:""; display:inline-block; width:0; height:0; position:absolute; right:-10px; top:0; border-bottom:5px solid #bebebe; border-top:4px solid transparent; border-left:5px solid #bebebe; border-right:5px solid transparent;} .catalog_lst .project_item .item_info_top > .total span {} .catalog_lst .project_item .item_info_top > .total strong {display:inline-block; font-weight:700; line-height:20px; position:relative; margin-left:12px; float:right; font-size:18px; top:1px;} .catalog_lst .project_item .item_info_top .c_info_area {display:inline-flex; padding:0; position:relative; left:7px; top:14px; height:25px;} .catalog_lst .project_item .item_info_top div.c_info {display:inline-block; width:auto; text-align:center; font-size:16px; padding:0; margin:0 0 0 10px; line-height:25px;} .catalog_lst .project_item .item_info_top div.c_info span {display:inline-block; width:25px; height:25px; text-align:center; line-height:13px; border-radius:15px; background:#999; color:#fff; margin:0 7px 0 0; vertical-align:middle;} .catalog_lst .project_item .item_info_top div.c_info.data span {background:#4765e3 url(../images/icon/icon_c_query_small.png) no-repeat center center;} .catalog_lst .project_item .item_info_top div.c_info.advanced span{background:#35b8e9 url(../images/icon/icon_c_dataset_small.png) no-repeat center center;} .catalog_lst .project_item .item_info_top div.c_info.storage span {background:#4bc46a url(../images/icon/icon_c_file_small.png) no-repeat center center;} .catalog_lst .project_item .item_info_top div.c_info strong {display:inline-block; vertical-align:middle; line-height:26px; position:relative; letter-spacing:-0.5px; font-weight:500;} /* pin btn */ .catalog_lst .project_item .btn_fixed_asset {position:absolute; right:15px; top:13px; border:none; background:none; outline:none; font-size:18px; opacity:0;} .catalog_lst .project_item:hover .btn_fixed_asset, .catalog_lst .project_item .btn_fixed_asset.active {opacity:1;} .catalog_lst .project_item .btn_fixed_asset:after {content:"\F4EB"; display:inline-block; font-family:bootstrap-icons !important; font-style:normal; font-weight:400 !important; font-variant:normal; text-transform:none; vertical-align:-.125em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} .catalog_lst .project_item .btn_fixed_asset.active:after {content:"\F4EA";} /* tag */ .catalog_lst .project_item .item_tag_list {display:block; height:25px; padding:0; margin:5px 0 0; word-break:break-word; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .catalog_lst .project_item .item_tag_list > li {display:inline-block; background:#fff; color:#7b7e85; font-size:11px; padding:0px 6px; border-radius:3px; line-height:20px; margin-right:1px; height:20px; border:1px solid #c4c4c4;} .catalog_lst .project_item .item_tag_list > li:before {content:"#"; display:inline;} /* ********** 하단 정보 ********** */ /* 옵션 더보기 */ .catalog_lst .project_item .c_bottom {padding:10px 20px; position:absolute; bottom:5px; width:100%; display:flex; justify-content:space-between;} /* 등록정보 */ .catalog_lst .project_item .item_info {display:block; padding:3px 0 0; font-size:14px; color:#666;} /* 작성자 */ .catalog_lst .project_item .item_writer {display:block; padding:3px 0 0; font-size:14px; color:#666;} /* 더보기 영역 */ .catalog_lst .project_item .item_option {display:flex; height:22px; justify-content:space-between; margin-right:-5px; margin-top:21px;} .catalog_lst .project_item .item_option button {width:22px; height:22px; line-height:23px; margin:0 4px; border-radius:15px; color:#666; background:none; border:none; padding:0; font-size:12px; transition:0.2s;} .catalog_lst .project_item .item_option button:after {font-size:13px;} .catalog_lst .project_item .item_option button:hover {color:#1aadd2;} .catalog_lst .project_item .item_option button.icon_add {font-size:14px;} /* ********** 하위 리스트 ********** */ .catalog_lst .sub_list {display:block; width:calc(100vw - 172px); max-height:0; position:relative; background-color:#ebebeb; overflow:hidden; opacity:0; transition:all ease 0.2s; border-radius:10px; box-shadow:inset 0 4px 20px rgba(0,0,0,0.15);} .catalog_lst > li.active .sub_list {margin-top:30px;} .nav-md .catalog_lst .sub_list {width:calc(100vw - 421px);} .catalog_lst .sub_list .mg_ctrl {margin-bottom:20px;} .catalog_lst .sub_list::-webkit-scrollbar {width:4px; height:4px;} /* width */ .catalog_lst .sub_list > ul {display:flex; padding:25px 30px 10px; margin:0; flex-wrap:wrap;} .catalog_lst .sub_list > ul > li {padding:10px 10px; margin:0; list-style:none; width:33.33%;} .catalog_lst > li:nth-child(3n - 2) .sub_list {left:0;} .catalog_lst > li:nth-child(3n - 1) .sub_list {left:calc(-100% - 25px);} .catalog_lst > li:nth-child(3n) .sub_list {left:calc(-200% - 50px);} /* ****************************** 반응형 ****************************** */ @media all and (min-width:1800px) { .catalog_lst > li {width:25%;} .catalog_lst .sub_list > ul > li {width:25%;} .catalog_lst > li:nth-child(3n - 2) .sub_list {left:inherit;} .catalog_lst > li:nth-child(3n - 1) .sub_list {left:inherit;} .catalog_lst > li:nth-child(3n) .sub_list {left:inherit;} .catalog_lst > li:nth-child(4n - 3) .sub_list {left:0;} .catalog_lst > li:nth-child(4n - 2) .sub_list {left:calc(-100% - 25px);} .catalog_lst > li:nth-child(4n - 1) .sub_list {left:calc(-200% - 50px);} .catalog_lst > li:nth-child(4n) .sub_list {left:calc(-300% - 75px);} } @media all and (min-width:2100px) { .catalog_lst > li {width:20%;} .catalog_lst .sub_list > ul > li {width:20%;} .catalog_lst > li:nth-child(4n - 3) .sub_list {left:inherit;} .catalog_lst > li:nth-child(4n - 2) .sub_list {left:inherit;} .catalog_lst > li:nth-child(4n - 1) .sub_list {left:inherit;} .catalog_lst > li:nth-child(4n) .sub_list {left:inherit;} .catalog_lst > li:nth-child(5n - 4) .sub_list {left:0;} .catalog_lst > li:nth-child(5n - 3) .sub_list {left:calc(-100% - 25px);} .catalog_lst > li:nth-child(5n - 2) .sub_list {left:calc(-200% - 50px);} .catalog_lst > li:nth-child(5n - 1) .sub_list {left:calc(-300% - 75px);} .catalog_lst > li:nth-child(5n) .sub_list {left:calc(-400% - 100px);} } .catalog_lst .sub_item {width:100%; height:260px; position:relative; border:1px solid #dadbdd; border-radius:10px; background:#fff; transition:0.2s; padding:55px 20px 20px;} .catalog_lst .sub_item > .item_category {color:#1aadd2;} .catalog_lst .sub_item > span.category_icon {position:absolute; background:#666; border-radius:15px; display:inline-block; padding:0; color:#fff; font-size:12px; left:20px; top:15px; font-weight:700; text-align:center; height:25px; width:80px; line-height:26px;} .catalog_lst .sub_item > span.category_icon.categpry_dataset {background:#35b8e9;} .catalog_lst .sub_item > span.category_icon.categpry_query {background:#4765e3;} .catalog_lst .sub_item > span.category_icon.categpry_file {background:#4bc46a;} .catalog_lst .sub_item > .item_subtitle {padding:0; margin:0; font-size:19px; line-height:25px; color:#000; transition:0.2s; height:50px; display:-webkit-box; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:85%; word-break:keep-all; overflow:hidden; text-overflow:ellipsis;} .catalog_lst .sub_item > .item_subtitle:hover {color:#54b9ff; cursor:pointer;} .catalog_lst .sub_item > .item_subbrief {margin:14px 0 0;} .catalog_lst .sub_item > .item_subbrief span {display:-webkit-box; max-height:40px; padding:0; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-size:15px; color:#000; line-height:20px; color:#7b7e85;} .catalog_lst .sub_item > .tag_item {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; width:100%; height:25px; margin:5px 0 0;} .catalog_lst .sub_item > .tag_item span {display:inline-block; background:#f3faff; color:#7b7e85; font-size:11px; padding:0px 6px; border-radius:3px; line-height:20px; margin-right:4px; height:20px; border:1px solid #c4c4c4; background:#fff;} .catalog_lst .sub_item > .tag_item span:before {content:"#"; display:inline;} /* 하단 정보 */ .catalog_lst .sub_item > .item_info {display:flex; justify-content:space-between; align-items:flex-end; padding:0; margin:0; position:absolute; left:20px; bottom:20px; width:calc(100% - 40px);} .catalog_lst .sub_item > .item_info > span {display:inline-block; line-height:22px; font-size:14px; margin:0; color:#7b7e85; vertical-align:bottom;} /* 옵션 */ .catalog_lst .sub_item .item_option {display:inline-block; transition:all ease 0.2s; margin-left:0;} .catalog_lst .sub_item .item_option button {width:22px; height:22px; line-height:23px; margin:0 1px; border-radius:15px; background:#fff; transition:all ease 0.2s; border:none; color:#666; padding:0; font-size:12px;} .catalog_lst .sub_item .item_option button:hover {color:#1aadd2;} .catalog_lst .sub_item:hover {border-color:#989898; box-shadow:0 10px 20px 2px rgba(0,0,0,0.2);} .catalog_lst .sub_item > .item_info span.like {font-size:14px; color:#7b7e85; display:inline-block; margin-right:5px;} .catalog_lst .sub_item > .item_info span.like:before {content:"\f164"; font-family:"Font Awesome 6 Free"; font-size:16px; color:#1aadd2; margin:0 7px 0 0; vertical-align:middle; font-weight:900; position:relative; top:-2px;} .catalog_lst .sub_item > .item_info span.comment {font-size:14px; color:#7b7e85; display:inline-block; margin-right:5px;} .catalog_lst .sub_item > .item_info span.comment:before {content:"\f4ad"; font-family:"Font Awesome 6 Free"; font-size:16px; color:#999; margin:0 7px 0 0; vertical-align:middle; font-weight:900; position:relative; top:-2px;} /* pin btn */ .catalog_lst .sub_item .btn_fixed_asset {position:absolute; right:15px; top:15px; border:none; background:none; outline:none; font-size:18px; opacity:0;} .catalog_lst .sub_item:hover .btn_fixed_asset, .catalog_lst .sub_item .btn_fixed_asset.active {opacity:1;} .catalog_lst .sub_item .btn_fixed_asset:after {content:"\F4EB"; display:inline-block; font-family:bootstrap-icons !important; font-style:normal; font-weight:400 !important; font-variant:normal; text-transform:none; vertical-align:-.125em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;} .catalog_lst .project_item .btn_fixed_asset.active:after, .catalog_lst .sub_item .btn_fixed_asset.active:after {content:"\F4EA"; color:red;} .catalog_lst > li.active {} .catalog_lst > li.active .project_item, .catalog_lst > li:hover .project_item {border-color:#989898; box-shadow:0 10px 20px 2px rgba(0,0,0,0.2);} .catalog_lst > li.active .sub_list.active {max-height:780px; min-width:1272px; z-index:2; opacity:1; position:relative;} .catalog_lst > li.active .sub_list.active ul {overflow-y:auto; max-height:710px;} /* ****************************** 반응형 ****************************** */ @media all and (min-width:1800px) { .catalog_lst > li.active .sub_list.active {max-height:1040px;} .catalog_lst > li.active .sub_list.active ul {max-height:970px;} } @media all and (min-width:2100px) { .catalog_lst > li.active .sub_list.active {max-height:1300px;} .catalog_lst > li.active .sub_list.active ul {max-height:1230px;} } /* ****************** 프로젝트 리스트 목록형 ****************** */ .drs_container .type_row .catalog_lst {flex-direction:column; flex-wrap:nowrap; margin:0; width:100%; padding-top:20px;} .drs_container .type_row .catalog_lst > li {width:inherit; height:inherit; padding:0; margin:10px 0; border-color:var(--color-main3); border-radius:10px; background-color:#fff;} .drs_container .type_row .catalog_lst .project_item {display:flex; flex-direction:row; min-height:65px; height:inherit; padding:15px 15px 15px 30px; align-items:center; justify-content:space-between;} .drs_container .type_row .catalog_lst .project_item:after, .drs_container .type_row .catalog_lst .project_item:hover:after {display:none;} .drs_container .type_row .catalog_lst .project_item:hover {} /* 타이틀 */ .drs_container .type_row .catalog_lst .project_item .item_title {height:60px; line-height:60px; padding:0; margin:0; cursor:pointer; width:calc((100% - 860px) * 0.45);} .drs_container .type_row .catalog_lst .project_item .item_title:before {display:inline-block; content:"\eaa0"; width:30px; height:30px; margin-right:10px; font-family:'IcoFont'; position:relative; top:0;} /* 부가설명 */ .drs_container .type_row .catalog_lst .project_item .item_brief {width:calc((100% - 860px) * 0.55); height:20px; line-height:20px; padding:0; margin:0; display:flex; flex-wrap:wrap; align-items:center; position:relative; top:-14px;} .drs_container .type_row .catalog_lst .project_item .item_brief span {height:20px; white-space:nowrap; display:block; -webkit-line-clamp:1; width:90%; margin:0;} /* 태그 */ .drs_container .type_row .catalog_lst .project_item .item_tag_list {margin:0; width:100%; margin-top:7px;} /* 에셋 숫자 정보 */ .drs_container .type_row .catalog_lst .project_item .item_info_top {position:relative; top:6px; margin:0; padding:0; width:auto;} .drs_container .type_row .catalog_lst .project_item .item_info_top > .total {background-color:#1d4aaf; padding:0 20px 0 0; font-size:18px; line-height:40px; width:97px; height:40px; border-radius:25px; text-align:right; top:0;} .drs_container .type_row .catalog_lst .project_item .item_info_top > .total:after {display:none;} .drs_container .type_row .catalog_lst .project_item .item_info_top > .total span {display:none;} .drs_container .type_row .catalog_lst .project_item .item_info_top > .total strong {font-weight:700; line-height:40px; margin-left:0px; float:none; top:1px;} .drs_container .type_row .catalog_lst .project_item .item_info_top .c_info_area {margin:0; left:0; background:none; border:none; padding:0; position:relative; height:40px; top:0;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info {width:85px; height:40px; margin:0 0 0 10px; padding:0 20px 0 0; line-height:40px; background:#999; color:#fff; border-radius:20px; text-align:right; font-size:18px;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info.data {background-color:#4765e3;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info.advanced {background-color:#35b8e9;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info.storage {background-color:#4bc46a;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info span {display:none;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.total:before {content:"Total"; display:inline-block; position:absolute; left:0; top:-20px; font-size:12px; color:#8f8f8f; width:97px; text-align:center; line-height:20px;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info {position:relative;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info:before {content:""; display:inline-block; position:absolute; left:0; top:-20px; font-size:12px; color:#8f8f8f; width:85px; text-align:center; line-height:20px;} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info.data:before {content:"Query";} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info.advanced:before {content:"Dataset";} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info.storage:before {content:"File";} .drs_container .type_row .catalog_lst .project_item .item_info_top div.c_info strong {display:inline-block; vertical-align:middle; line-height:30px; position:relative; top:1px;} /* 고정핀 */ .drs_container .type_row .catalog_lst .project_item .btn_fixed_asset {position:relative; right:0; top:0; margin-left:20px;} .drs_container .type_row .catalog_lst .project_item .c_bottom {padding:0; margin:0 10px 0 0; padding:0; align-items:center; position:relative; width:auto; bottom:inherit;} .drs_container .type_row .catalog_lst .project_item .item_info {justify-content:flex-end; padding:0; margin:0; z-index:inherit;} .drs_container .type_row .catalog_lst .project_item .item_option {padding:0 0 0 30px; position:static; overflow:inherit; height:30px; margin-top:0;} .drs_container .type_row .catalog_lst .project_item:hover .item_option {height:inherit; margin-top:0;} .drs_container .type_row .catalog_lst .project_item .item_option button {width:30px; height:30px; line-height:inherit; margin:0 4px;} .drs_container .type_row .catalog_lst .project_item .item_option button:hover:after {color:#fff;} /* active */ .drs_container .type_row .catalog_lst > li.active .project_item .item_title:before {content:"\ea99";} .drs_container .type_row .catalog_lst > li.active .sub_list.active {margin:0; position:static;} /* popup - Create Catalog */ .selected_keywords_area {width:calc(100% - 120px); padding:0; border:1px solid #dcdcdc; float:right; overflow-y:auto;} .selected_keywords_area .tag_list {height:100%; padding:10px; background-color:#fff; margin:0;} .selected_keywords_area .tag_list:after{display:block; content:""; clear:both;} .selected_keywords_area .tag_list > li{display:inline-block; float:left; height:25px; line-height:23px; padding:0 24px 0 6px; margin:4px; font-size:12px; position:relative; color:#fff; border:1px solid #2b85ff; border-radius:5px; background-color:#2b85ff;} .selected_keywords_area .tag_list > li.add_item{padding:0; border:0; background:inherit;} .selected_keywords_area .tag_list > li span, .selected_keywords_area .tag_list > li input[type=text]{max-width:66px; line-height:1; border:0;} .selected_keywords_area .tag_list > li .delete_tag_item{width:20px; height:25px; line-height:25px; position:absolute; top:0; right:0; border:0; background:transparent; color:#fff;} .selected_keywords_area .tag_list > li .delete_tag_item:after{display:block; content:"\eee1"; font-family:"IcoFont"; position:absolute; top:0; right:0; left:0; bottom:0;} .search_tags{position:absolute; right:-100%; top:0; background:#fff; width:100%; padding:20px; transition:1s;} .search_tags.active {right:0;} .search_tags .tag_list{height:206px; padding:0 0 0 20px; margin:0; overflow-y:auto;} .search_tags .tag_list > li{padding:0; margin:0; list-style:none;} .search_tags .mg_search{width:calc(100% - 250px); margin-left:250px;} .recommend_tag_group{width:230px; padding:0; color:#fff; position:absolute; top:20px; left:20px; border-radius:10px; background:var(--color-main3);} .recommend_tag_group .tit{padding:20px 20px 0; margin:0; font-size:17px;} .recommend_tag_group p {padding:10px 20px; margin:0; font-size:12px; font-weight:100; margin-bottom:15px;} .recommend_tag_group .tag_list > li > a{display:block; padding:8px 0; color:#fff;} .recommend_tag_group .tag_list > li > a:hover, .recommend_tag_group .tag_list > li.selected > a{color:#26a1ff;} .search_tag_group{margin-left:250px; padding:10px 0;} .search_tag_group > .tag_list{height:241px; padding:6px; border-radius:5px; background-color:none; overflow-y:auto;} .search_tag_group > .tag_list > li{display:inline-block; height:25px; line-height:25px; padding:0px 6px; margin:4px; font-size:12px; border:1px solid #2b85ff; border-radius:5px; background-color:#f3faff; color:#2b85ff; cursor:pointer;} .search_tag_group > .tag_list > li.selected{color:#fff; border-color:#2b85ff; background-color:#2b85ff;} .selected_tag_group {padding-top:30px; position:relative;} .selected_tag_group .btn_reset{position:absolute; top:0; right:0;} .selected_tag_group .tag_list {height:113px; padding:6px; border-radius:0; background-color:#fff; overflow-y:auto; border:1px solid #dcdcdc;} .selected_tag_group .tag_list:after{display:block; content:""; clear:both;} .selected_tag_group .tag_list > li{display:inline-block; float:left; height:25px; line-height:25px; padding:0 24px 0 6px; margin:4px; font-size:12px; position:relative; color:#fff; border:1px solid #2b85ff; border-radius:5px; background-color:#2b85ff;} .selected_tag_group .tag_list > li.add_item{padding:0; border:0; background:inherit;} .selected_tag_group .tag_list > li span, .selected_tag_group .tag_list > li input[type=text]{max-width:66px; line-height:1; border:0;} .selected_tag_group .tag_list > li .delete_tag_item{width:20px; height:25px; line-height:25px; position:absolute; top:0; right:0; border:0; background:transparent; color:#fff;} .selected_tag_group .tag_list > li .delete_tag_item:after{display:block; content:"\eee1"; font-family:"IcoFont"; position:absolute; top:0; right:0; left:0; bottom:0;} .selected_tag_group .count{display:block; padding:20px 0 0; margin:0; text-align:center;} /* 일반 팝업스타일 Search Tag */ .search_tags.general_pop {right:0; position:relative; padding:0;} .search_tags.general_pop .recommend_tag_group {left:0; top:0;} /* popup - New Asset */ .wizard_content .create_wrap{display:flex; padding:0; margin:30px 0 10px; cursor: pointer;} .wizard_content .create_wrap > li{flex:1; height:370px; padding:220px 0 0; margin:0 10px; list-style:none; text-align:center; border-radius:30px; transition:0.3s;} .wizard_content .create_wrap > li:hover{box-shadow:2px 10px 20px rgba(0,0,0,0.2);} .wizard_content .create_wrap > li:nth-child(1){background:rgba(255,255,255,0.3) url(../images/icon/img_workflow.png) no-repeat center 45px;} .wizard_content .create_wrap > li:nth-child(2){background:rgba(255,255,255,0.3) url(../images/icon/img_report.png) no-repeat center 45px;} .wizard_content .create_wrap > li:nth-child(3){background:rgba(255,255,255,0.3) url(../images/icon/img_quick.png) no-repeat center 45px;} .wizard_content .create_wrap > li:nth-child(1):hover {background:rgba(255,255,255,0.5) url(../images/icon/img_workflow.png) no-repeat center 45px;} .wizard_content .create_wrap > li:nth-child(2):hover {background:rgba(255,255,255,0.5) url(../images/icon/img_report.png) no-repeat center 45px;} .wizard_content .create_wrap > li:nth-child(3):hover {background:rgba(255,255,255,0.5) url(../images/icon/img_quick.png) no-repeat center 45px;} .wizard_content .create_wrap h3 {margin:0; font-size:18px;} .wizard_content .create_wrap p {margin:35px 0 45px; color:#888;} .wizard_content .option_wrap {width:100%;} .wizard_content .option_box {display:none;} .wizard_content .option_box.active {display:block;} .wizard_content .option_box .m_select {width:100% !important;} .wizard_content .mg_form + p {margin-bottom:50px;} .wizard_content .mg_btn {justify-content:space-between;} .wizard_content .mg_btn > li:first-child {text-align:left;} .wizard_content .mg_btn > li:last-child {text-align:right;} /* ************************ Asset Detail - Object Storage ************************ */ /* 레이아웃 */ .big_container .big_body.drs_body {padding:10px 35px 10px 15px} .drs_container #assetDetailArea {height:100%; min-height:100%; width:100%; overflow:hidden; position:relative;} .drs_container #assetDetailFile.split {height:100%; min-height:100%; width:calc(100% - 300px); float:left; transition:1s;} .drs_container #assetDetailFile.split .card {border-radius:0;} .drs_container #assetDetailFile.split #splitAssetFile.card {border-right:none;} .drs_container #assetDetailFile.split #splitFileView.card {border-left:none;} .drs_container #assetDetailFile.split .gutter.gutter-horizontal, .drs_container #assetDetailFile.split .gutter.gutter-vertical {border-color:#dcdcdc;} /* 타이틀 영역 */ .drs_container #assetDetailArea .card-header {padding:15px 2px 10px 6px; margin-bottom:0; color:#000; background:#fff !important; border-bottom:none; width:calc(100% - 20px); margin:0 auto; position:relative; border-bottom:1px solid #ababab; min-height:44px;} .drs_container #assetDetailArea h3.card-title {margin:0; font-size:16px; font-weight:700; min-width:200px;} .drs_container #assetDetailArea h3.card-title i {font-size:14px; margin-right:10px;} .drs_container #assetDetailArea h3.card-title .file_title {display:inline-block; margin-left:20px; color:#1aadd2;} .drs_container #assetDetailArea .card-header + .card-body {height:calc(100% - 44px); overflow-y:auto;} /* 파일매니저 */ .drs_container #assetDetailFile .filemanager {height:calc(100% - 54px); position:relative;} .drs_container #assetDetailFile .fe_fileexplorer_wrap .fe_fileexplorer_inner_wrap {border:none;} .drs_container #assetDetailFile .fe_fileexplorer_wrap .fe_fileexplorer_toolbar {margin-top:10px;} /* 검색 */ .drs_container #assetDetailFile .fe_fileexplorer_searchbar_wrap {display:flex; width:130px; align-items:center; overflow:hidden; border:1px solid #D9D9D9; margin-right:5px; position:absolute; top:-35px; right:8px;} .drs_container #assetDetailFile .fe_fileexplorer_searchbar {border:none; height:23px; width:100%;} .drs_container #assetDetailFile .fe_fileexplorer_searchbar:focus {border:none; outline:none;} .drs_container #assetDetailFile .fe_fileexplorer_searchbutton {width:100%; display:flex; align-items:center; border:none; background-color:transparent; font-size:larger; margin-bottom:0;} .drs_container #assetDetailFile .fe_fileexplorer_searchbutton::before {font-family:"IcoFont"; font-size:14px; content:'\ed11'; background-color:transparent; width:30px; text-align:center; display:inline-block; line-height:23px;} /* 복사버튼 영역, 첫번째 영역 높이 조절 */ .drs_container #assetDetailArea .file_move_btnarea {height:30px; padding:10px 0 0; text-align:center;} .drs_container #assetDetailArea .file_move_btnarea .m_btn {} .drs_container #assetDetailFile #original_file.filemanager {height:calc(100% - 84px);} /* About this asset 패널 열고 접기 */ .drs_container #assetDetailArea .asset_detail_info {width:290px; height:100%; background:#fff; position:absolute; border-radius:10px 0 0 10px; border:1px solid #dcdcdc; transition:1s; right:0; top:0; z-index:100;} .drs_container #assetDetailArea .asset_detail_info > button.asset_detail_toggle {position:absolute; left:-15px; top:50%; width:15px; height:60px; margin-top:-30px; border:1px solid #dcdcdc; border-right:0; line-height:50px; background:#fff; border-radius:5px 0 0 5px; box-shadow:-5px 5px 10px rgba(0,0,0,0.1); padding:0; color:#000; transition:0.2s;} .drs_container #assetDetailArea .asset_detail_info > button.asset_detail_toggle:hover {color:var(--color-button-active);} .drs_container #assetDetailArea .asset_detail_info > button.asset_detail_toggle i {transition:0.3s;} /* Asset Detail 화면 확대/축소 */ .drs_container #assetDetailArea.expand #assetDetailFile.split {width:100%;} .drs_container #assetDetailArea.expand .asset_detail_info {right:-290px;} .drs_container #assetDetailArea.expand .asset_detail_info > button.asset_detail_toggle i {transform:rotate(-180deg);} .drs_container .asset_detail_info h3 {background:var(--color-button-active); padding:15px 16px 10px; color:#fff; font-weight:500; font-size:16px; margin:0; border-radius:10px 0 0 0; min-height:44px;} .drs_container .asset_detail_info ul.asset_detail_ul {padding:10px 16px; margin:0; /* height:calc(100% - 44px); */ height:100%; overflow-y:auto;} .drs_container .asset_detail_info ul.asset_detail_ul li {list-style:none; padding:0; margin:0 0 10px;} .drs_container .asset_detail_info ul.asset_detail_ul li:last-child {margin-bottom:0;} .drs_container .asset_detail_info ul.asset_detail_ul li h4 {font-size:16px; font-weight:500; padding:10px 5px; border-bottom:1px solid #d9d9d9; margin:0 0 10px;} .drs_container .asset_detail_info ul.asset_detail_ul li p {padding:0 5px; font-size:13px; margin:0; line-height:1.2; display:inline-block; vertical-align:middle;} .drs_container .asset_detail_info ul.asset_detail_ul li .detail_info > p {display:block;} .drs_container .asset_detail_info ul.asset_detail_ul li .owner_info {padding:0 0 0 35px; position:relative;} .drs_container .asset_detail_info ul.asset_detail_ul li .owner_info strong {position:absolute; left:0; top:4px; width:30px; height:30px; background:var(--color-button-active); border-radius:30px; font-weight:700; font-size:20px; text-align:center; color:#fff; line-height:30px;} .drs_container .asset_detail_info ul.asset_detail_ul li .owner_info strong.owner_text + p, .drs_container .asset_detail_info ul.asset_detail_ul li .owner_info strong.owner_text + p + p {margin-top:8px;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes {position:relative;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes button.likes_user {float:left; background:none; border:none; font-size:16px; font-weight:400; padding:0 5px; margin:0; line-height:24px;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes button.likes_user:hover, .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes button.likes_user:focus {color:1aadd2;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes button.likes_user i {margin-left:5px; transition:0.3s;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes.active button.likes_user i {transform:rotate(-180deg);} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes ul.likes_lst {position:absolute; left:80px; top:30px; padding:10px 15px; margin:0; background:#fff; border:1px solid #dcdcdc; border-radius:10px; box-shadow:5px 5px 10px rgba(0,0,0,0.1); min-width:100px; display:none;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes ul.likes_lst li {padding:0; margin:0; list-style:none; line-height:24px; font-size:14px;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes.active ul.likes_lst {display:block;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes button.btn_like {float:right; background:none; border:none; padding:0 5px; line-height:24px; transition:0.2s; color:#000;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes button.btn_like:hover, .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes button.btn_like.active {color:#1aadd2;} .drs_container .asset_detail_info ul.asset_detail_ul li .asset_likes button.btn_like i {} .drs_container .asset_detail_info ul.asset_detail_ul li h4 button.icon_btn {float:right; position:relative; top:-5px; justify-content:flex-end;} .drs_container .asset_detail_info .tag_item {display:block; width:100%; margin-bottom:10px;} .drs_container .asset_detail_info .tag_item:last-child {margin-bottom:0;} .drs_container .asset_detail_info .tag_item strong {} .drs_container .asset_detail_info .tag_item span {display:inline-block; background:#f3faff; color:#2b85ff; font-size:12px; padding:0px 6px; border-radius:5px; line-height:20px; margin-right:3px; height:20px; border:1px solid #2b85ff; margin-bottom:5px;} /* ***************************** 카탈로그 코멘트 ***************************** */ /* 내용 */ .comment_con {width:100%; height:100%; position:relative; padding:20px 0 4px 16px;} .comment_con .div_comment_list {width:100%; height:calc(100% - 87px); overflow-y:auto; overflow-x:hidden; padding-right:16px;} .comment_con .div_comment_list > div {padding:8px 0; margin:0; font-size:14px;} .comment_con .div_comment_list > div + div {border-top:1px dashed #e1e1e1;} .comment_con .div_comment_list > div strong {font-weight:700; display:block;} .comment_con .div_comment_list > div strong span {font-weight:300; display:inline-block; vertical-align:middle; color:#999; font-size:13px; margin-left:15px;} .comment_con .div_comment_list > div p {margin:3px 0 0;} /* 댓글 등록 */ .comment_con .div_add_box {position:relative; margin-top:12px; height:40px; display:flex; justify-content:space-between; padding-right:16px;} .comment_con .div_add_box input.div_add_comment {width:calc(100% - 50px); height:30px; line-height:30px; position:relative;} .comment_con .div_add_box button.btn_add_comment {width:50px; height:30px; border:none; padding:0; margin:0; background:var(--color-button-active); transition:0.2s; color:#fff; text-align:center; line-height:30px;} /* ************************ Asset Detail - Datasets ************************ */ .drs_container #assetDetailDatasets {height:100%; min-height:100%; width:calc(100% - 300px); float:left; transition:1s;} .drs_container #assetDetailDatasets .card {border-radius:0;} .drs_container #assetDetailDatasets .gutter.gutter-vertical {border-color:transparent;} /* Asset Detail 화면 확대/축소 */ .drs_container #assetDetailArea.expand #assetDetailDatasets {width:100%;} /* Code area */ .drs_container #assetDetailArea #splitCode {display:flex; flex-direction:column;} .drs_container #assetDetailArea #div_code_editor_area {background:#f0f9ff;} /* ************************ Asset Detail - Query ************************ */ .drs_container #assetDetailQuery {height:100%; min-height:100%; width:calc(100% - 300px); float:left; transition:1s;} .drs_container #assetDetailQuery .card {border-radius:0;} .drs_container #assetDetailQuery .gutter.gutter-horizontal, .drs_container #assetDetailQuery .gutter.gutter-vertical {border-color:transparent;} /* Asset Detail 화면 확대/축소 */ .drs_container #assetDetailArea.expand #assetDetailQuery {width:100%;} /* treeMenu */ .drs_container #assetDetailQuery #assetQueryTree {overflow-x:hidden !important;} .drs_container #assetDetailQuery #assetQueryTree > select.form_control {border:none; border-bottom:1px solid #dcdcdc;} /* ************************ New Asset Control Popup ************************ */ .tag_list.selected_tag {height:auto; padding:0 10px; background-color:#fff; margin:0;} .tag_list.selected_tag:after{display:block; content:""; clear:both;} .tag_list.selected_tag > li{display:inline-block; float:left; height:25px; line-height:23px; padding:0 24px 0 6px; margin:4px; font-size:12px; position:relative; color:#fff; border:1px solid #2b85ff; border-radius:5px; background-color:#2b85ff;} .tag_list.selected_tag > li.add_item{padding:0; border:0; background:inherit;} .tag_list.selected_tag > li span, .tag_list.selected_tag > li input[type=text]{max-width:66px; line-height:1; border:0;} .tag_list.selected_tag > li .delete_tag_item{width:20px; height:25px; line-height:25px; position:absolute; top:0; right:0; border:0; background:transparent; color:#fff;} .tag_list.selected_tag > li .delete_tag_item:after{display:block; content:"\eee1"; font-family:"IcoFont"; position:absolute; top:0; right:0; left:0; bottom:0;} /* ************************ Connection Detail Dataset 등록 요청 목록 - Popup(미리보기) ************************ */ .view_count {display:inline-flex; flex-direction:row; align-items:center; margin:0 5px;} .view_count .select2 {width:auto;} .view_count .select2 + .select2-container {min-width:inherit;} .view_count label {padding:0 5px 0 10px; font-weight:normal; font-size:13px;} .view_pager {display:inline-flex; flex-direction:row; align-items:center; margin:0 5px;} .view_pager label {padding:0 5px 0 10px; font-weight:normal; font-size:13px;} .view_pager button {display:inline-block; width:25px; height:25px; padding:0; margin:0 2px; position:relative; border:0; text-indent:-9999px; border-radius:3px; background-color:transparent;} .view_pager button:after {display:block; content:''; line-height:25px; position:absolute; top:0; right:0; bottom:0; left:0; color:#000; font-family:"icofont"; font-size:16px; text-align:center; text-indent:0;} .view_pager .btn_prev:after {content:"\ea9d";} .view_pager .btn_next:after {content:"\eaa0";} .view_pager .form_control {min-width:inherit; width:40px; margin:0; padding:0; text-align:center;} /*============================================================================================================================ CDRS Home =============================================================================================================================*/ .home_area {position:relative; margin:-15px;} /* 슬라이더 */ .home_area .home_slider_area {position:relative;} .home_area .home_slider_area .home_slider {width:100%; height:410px;} .home_area .home_slider_area .home_slider .slide_item {width:100%; height:410px; position:relative;} .home_area .home_slider_area .home_slider .slide_item.slide_item1 {background:url("../images/theme_cdrs/home/visual01.png") no-repeat center center; background-size:cover;} .home_area .home_slider_area .home_slider .slide_item.slide_item2 {background:url("../images/theme_cdrs/home/visual02.png") no-repeat center center; background-size:cover;} .home_area .home_slider_area .home_slider .slide_item.slide_item3 {background:url("../images/theme_cdrs/home/visual03.png") no-repeat center center; background-size:cover;} .home_area .home_slider_area .home_slider .slide_item.slide_item4 {background:url("../images/theme_cdrs/home/visual04.png") no-repeat center center; background-size:cover;} .home_area .home_slider_area .home_slider .slide_item.slide_item5 {background:url("../images/theme_cdrs/home/visual05.png") no-repeat center center; background-size:cover;} .home_slider_area .btn_play_stop {position:absolute; display:inline-block; bottom:10px; left:176px; z-index:100;} .home_slider_area .btn_play_stop button {background:none; border:none; color:#000; padding:5px; transition:all .2s;} .home_slider_area .btn_play_stop button:hover {color:#ECAB15;} .home_slider_area [data-tooltip-text]:after {min-width:60px;} .home_slider_area .home_slider .owl-dots {position:absolute; display:inline-block; bottom:8px; left:201px;} .home_slider_area .home_slider.owl-theme .owl-dots .owl-dot span {width:12px; height:12px; margin:5px 3px; background:#fff; border:1px solid #999; transition:0.2s;} .home_slider_area .home_slider.owl-theme .owl-dots .owl-dot.active span {background:#000; border:1px solid #000;} .home_slider_area .home_slider.owl-theme .owl-dots .owl-dot:hover span {background:#ECAB15 !important; border-color:#ECAB15 !important;} .home_slider_area .owl-theme .owl-nav {position:absolute; top:180px; left:0; width:100%; height:44px; margin:0;} .home_slider_area .owl-theme .owl-nav [class*='owl-'] {width:44px; height:44px; border-radius:22px; border:1px solid #ccc; color:#999; font-size:16px; position:absolute; margin:0; background:rgba(255,255,255,0.3);} .home_slider_area .owl-carousel .owl-nav button.owl-prev {left:90px;} .home_slider_area .owl-carousel .owl-nav button.owl-next {left:auto; right:90px;} .home_slider .tBox {position:absolute; top:100px; left:180px;} .home_slider .tBox .tBox_txt01 {background-color:#049bff; padding:6px 0px; width:200px; text-align:center; border-radius:60px 30px 60px 30px; color:#ffffff; font-size:20px; margin-bottom:13px;} .home_slider .tBox .tBox_txt02 {font-size:45px; font-weight:600; margin-bottom:20px;} .home_slider .tBox .tBox_txt02 strong {color:#0071b6;} .home_slider .tBox .tBox_txt03 {font-size:18px; font-weight:600; line-height:29px;} .home_area .home_content {background:#fff;} .home_area .m_content {padding-top:38px; padding-bottom:39px; width:1280px; margin:0 auto; box-sizing:border-box;} .home_area .inner {overflow:hidden; width:1280px; margin:0 auto; box-sizing:border-box;} .home_area #m_cBox {text-align:center; width:310px; height:280px; box-sizing:border-box; color:#ffffff;} .home_area .m_cBox01 {background:url("../images/home/box01.png") no-repeat right bottom; background-size:cover;} .home_area .m_cBox02 {background:url("../images/home/box02.png") no-repeat right bottom; background-size:cover;} .home_area .m_cBox03 {background:url("../images/home/box03.png") no-repeat right bottom; background-size:cover;} .home_area .m_cBox04 {background:url("../images/home/box04.png") no-repeat right bottom; background-size:cover;} .home_area #m_cBox .cBox_title {font-size:28px; font-weight:600;} .home_area #m_cBox .line {width:40px; height:4px; background-color:#ffffff; opacity:0.4; border-radius:2px; margin:10px auto;} .home_area #m_cBox .cBox_txt {line-height:26px; font-size:16px; margin-bottom:26px; position:absolute; top:95px; padding:0 15px; word-break:keep-all;} .home_area .snip1504 {position:relative; overflow:hidden; float:left; width:310px; margin-right:13px; color:#ffffff; text-align:left; font-size:16px; background-color:#fff; box-sizing:border-box;} .home_area .snip1504:last-child {margin:0px;} .home_area .snip1504 * {-webkit-box-sizing:border-box; box-sizing:border-box; -webkit-transition:all 0.45s ease; transition:all 0.45s ease;} .home_area .snip1504 #m_cBox {vertical-align:top; max-width:100%; backface-visibility:hidden; box-sizing:border-box; padding-top:20px;} .home_area .snip1504 figcaption {position:absolute; top:0; left:0; right:0; z-index:1; align-items:center; bottom:0; display:flex; flex-direction:column; justify-content:center;} .home_area .snip1504 h3, .home_area .snip1504 h5 {margin:0; opacity:0; letter-spacing:1px; margin-top:10px;} .home_area .snip1504 h3 {-webkit-transform:translateY(-100%); transform:translateY(-100%); text-transform:uppercase; font-weight:400;} .home_area .snip1504 h5 {font-weight:normal; font-style:italic; color:#888; -webkit-transform:translateY(100%); transform:translateY(100%);} .home_area .snip1504 a {position:absolute; top:0; bottom:0; left:0; right:0; z-index:1;} .home_area .snip1504:hover > #m_cBox, .home_area .snip1504.hover > #m_cBox {opacity:0.5;} .home_area .snip1504:hover > #m_cBox >.box_inner{opacity:0;} .home_area .snip1504 #m_cBox .box_inner .cBox_icon {position:absolute; left:50%; bottom:5px; transform:translate(-50%,0);} .home_area .snip1504:hover h3, .home_area .snip1504.hover h3, .home_area .snip1504:hover h5, .home_area .snip1504.hover h5 { -webkit-transform:translateY(0); transform:translateY(0); opacity:1;} .home_area .notice {float:left; padding-top:20px; vertical-align:middle;} .home_area .notice .m_title {font-size:15px; font-weight:600; color:#006ba9; float:left; padding-right:26px; position:relative; top:-3px;} .home_area .newsticker {position:relative; overflow:hidden; width:462px; text-align:left; float:left; overflow:hidden;} .home_area .newsticker ul {padding:0; margin:0} .home_area .newsticker ul li {float:left; width:410px; padding:0; font-size:14px; color:#97a3a9; letter-spacing:-1px; height:21px; line-height:21px; list-style:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;} .home_area .newsticker ul li:hover {text-decoration:underline; color:#00a2ff;} .home_area .newsticker ul li a {color:#97a3a9} .home_area .newsticker ul li span {color:#78a7be; float:right;} .home_area .more{float:left;} .home_area .more a {background-color:#e3e3e3; color:#000000; padding:8px 14px; border-radius:30px; font-size:12px; font-weight:600;} .home_area .more a span {margin-left:6px;} .home_area .more a:hover {background-color:#b7dffb; transition:0.3s;} .home_area .m_footer {width:100%; height:60px; background-color:#f5f5f5; border-top:1px solid #e7e7e7;} .home_area .f_btn {width:340px; float:right; font-size:18px; padding:13px 20px 14px; color:#1f8ecd; border:2px solid #0682c8; background-color:#ffffff; box-sizing:border-box; font-weight:400; cursor:pointer; position:relative;} .home_area .f_btn:hover{color:#ffffff; border:2px solid #0682c8; background-color:#0682c8; box-sizing:border-box; transition:0.2s;} .home_area .f_btn img {position:absolute; right:5%; bottom:25px;} .home_area .f_btn:hover img {filter:brightness(10)} .home_area .f_btn span {float:right;} @media (min-width:1600px) { .home_area .m_content {width:1400px;} .home_area .inner {width:1400px;} .home_area #m_cBox {width:340px;} .home_area .snip1504 {width:340px;} } /*============================================================================================================================ CDRS Home - 200805 최종본 =============================================================================================================================*/ .main_area {position:relative; margin:0; background:#fff;} .main_area .main_slider_area {position:relative;} /* 메인 안내메세지 */ .main_area .main_slider_area .main_info_area {position:absolute; right:30px; top:50px; z-index:20;} .main_area .main_slider_area .main_info_area button.main_info_btn {position:relative; background:#3d9295; color:#fff; font-size:19px; font-weight:200; padding:10px 73px 12px 40px; transition:0.2s; border:none; outline:none; text-align:right;} .main_area .main_slider_area .main_info_area button.main_info_btn.active, .main_area .main_slider_area .main_info_area button.main_info_btn:hover {background:#003775;} .main_area .main_slider_area .main_info_area button.main_info_btn span.txt {display:block; font-size:13px; color:#fff;} .main_area .main_slider_area .main_info_area button.main_info_btn img {position:absolute; right:20px; top:17px;} .main_area .main_slider_area .main_info_area .main_info {position:absolute; width:643px; height:217px; right:279px; top:-3px; padding:29px 30px; background:url("../images/home/main_info_bg.png") no-repeat left top; transition:0.3s; opacity:0;} .main_area .main_slider_area .main_info_area .main_info.active {opacity:1;} .main_area .main_slider_area .main_info_area .main_info button.close_info {position:absolute; font-size:16px; color:#666; transition:0.2s; padding:0; background:none; right:35px; top:10px; width:30px; height:30px; line-height:30px; border:none; outline:none; z-index:30;} .main_area .main_slider_area .main_info_area .main_info button.close_info:hover {color:#d9534f;} .main_area .main_slider_area .main_info_area .main_info h3 {display:inline-block; width:115px; margin:0; font-size:14px; font-weight:700; line-height:16px; vertical-align:top;} .main_area .main_slider_area .main_info_area .main_info ul {padding:0; margin:0 0 15px 10px; display:inline-block; width:calc(100% - 150px);} .main_area .main_slider_area .main_info_area .main_info ul:last-child {width:calc(100% - 200px);} .main_area .main_slider_area .main_info_area .main_info ul li {padding:0 0 0 10px; margin:0; list-style:none; position:relative; font-size:13px; line-height:20px;} .main_area .main_slider_area .main_info_area .main_info ul li:after {content:""; width:4px; height:4px; border-radius:2px; background:#515151; position:absolute; left:0; top:7px;} /* 슬라이더 */ .main_area .main_slider_area .main_slider {width:100%; height:340px;} .main_area .main_slider_area .main_slider .slide_item {width:100%; height:340px; position:relative;} .main_area .main_slider_area .main_slider .slide_item h3 {margin:0; padding:75px 0 30px 80px; font-size:24px; line-height:32px; color:#003775; font-weight:700; letter-spacing:-1px;} .main_area .main_slider_area .main_slider .slide_item p {margin:0; padding:0 50px 40px; font-size:16px; line-height:24px; color:#333;} .main_area .main_slider_area .main_slider .slide_item .slide_link {padding:0 0 0 80px;} .main_area .main_slider_area .main_slider .slide_item .slide_link a {display:inline-block; margin:0 15px 0 0; color:#003875; font-size:16px; font-weight:400;} .main_area .main_slider_area .main_slider .slide_item .slide_link a.btn-white {border-color:#003875; border-radius:0;} .main_area .main_slider_area .main_slider .slide_item .slide_link a i {margin-left:12px; color:#003875;} .main_slider_area .btn_play_stop {position:absolute; display:inline-block; bottom:10px; left:80px; z-index:100;} .main_slider_area .btn_play_stop button {background:none; border:none; color:#000; padding:5px; transition:all .2s;} .main_slider_area .btn_play_stop button:hover {color:#ECAB15;} .main_slider_area [data-tooltip-text]:after {min-width:60px;} .main_slider_area .main_slider .owl-dots {position:absolute; display:inline-block; bottom:8px; left:105px;} .main_slider_area .main_slider.owl-theme .owl-dots .owl-dot span {width:12px; height:12px; margin:5px 3px; background:#fff; border:1px solid #999; transition:0.2s;} .main_slider_area .main_slider.owl-theme .owl-dots .owl-dot.active span {background:#000; border:1px solid #000;} .main_slider_area .main_slider.owl-theme .owl-dots .owl-dot:hover span {background:#ECAB15 !important; border-color:#ECAB15 !important;} .main_slider_area .owl-theme .owl-nav {position:absolute; top:118px; left:0; width:100%; height:44px; margin:0;} .main_slider_area .owl-theme .owl-nav [class*='owl-'] {width:44px; height:44px; border-radius:22px; border:1px solid none; color:#999; font-size:16px; position:absolute; margin:0; background:none;} .main_slider_area .owl-carousel .owl-nav button.owl-prev {left:20px;} .main_slider_area .owl-carousel .owl-nav button.owl-next {left:auto; right:20px;} .main_slider_area .owl-carousel .owl-nav button.owl-prev, .main_slider_area .owl-carousel .owl-nav button.owl-next {transition:0.2s;} .main_slider_area .owl-carousel .owl-nav button.owl-prev:hover, .main_slider_area .owl-carousel .owl-nav button.owl-next:hover {background:rgba(0,0,0,0.1);} .main_area .main_contents {position:relative; z-index:10;} .main_area .main_contents:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} /* 메인 좌측영역 */ .main_area .main_contents .main_left_area {background:#fff; float:left; width:calc(100% - 470px); min-height:488px; padding:25px 60px 0; position:relative; z-index:2;} /* 주요기능 버튼 */ ul.main_function_link {padding:0; margin:0 0 30px; display:flex; justify-content:space-between;} ul.main_function_link li {border:1px solid #dcdcdc; padding:0; margin:0; width:23%; margin-right:2.66666666666667%; list-style:none; height:200px;} ul.main_function_link li:last-child {margin-right:0;} ul.main_function_link li a {display:block; padding:35px 25px 25px; height:100%; color:#000; transition:0.3s;} ul.main_function_link li a span.f_title {font-size:20px; font-weight:bold; display:block; margin:0 0 25px;} ul.main_function_link li a span.f_title span {font-size:16px; font-weight:400;} ul.main_function_link li a span.f_txt {font-size:15px; line-height:18px; word-break:keep-all;} ul.main_function_link li a:hover {color:#fff;} /* 게시판 */ .main_board_area {width:30%; float:left; margin-right:5%;} .main_board_area.last_board_item {margin-right:0;} .main_board_area h2 {position:relative; display:block; font-size:20px; color:#000; margin:0; font-weight:700;} .main_board_area h2:after {content:""; display:block; width:calc(100% - 170px); height:1px; background:#d9d9d9; position:absolute; right:30px; top:12px;} .main_board_area h2 a {width:24px; height:24px; line-height:20px; text-align:center; position:absolute; right:0; top:0;} .main_board_area ul {margin:15px 0 0; padding:0; overflow:hidden;} .main_board_area ul li {list-style:none; margin:0 0 2px; overflow:hidden; height:25px;} .main_board_area ul li a {display:inline-block; position:relative; font-size:14px; float:left; max-width:calc(100% - 125px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:0.2s; color:#333;} .main_board_area ul li a:hover {color:#1c91d9;} .main_board_area ul li span {float:right; display:inline-block; width:70px; text-align:right;} .main_board_area ul li span.new {background-color:#ff6d6d; width:40px; color:#fff; font-weight:bold; text-align:center; border-radius:4px; font-size:10px; float:left; margin-left:12px; margin-top:3px;} /* 메인 우측영역 */ .main_area .main_contents .main_right_area {position:relative; float:left; margin-top:-196px; padding:0; width:430px; min-height:580px; background:#fff; border:1px solid #c4cdd6;} .main_right_area img.main_bookmark_img {position:absolute; left:12px; top:-6px; z-index:1;} .main_right_area h2 {font-size:20px; color:#000; font-weight:bold; margin:0 0 20px;} .tab_menu {position:relative; height:100%;} .tab_menu ul {position:relative; overflow:hidden; margin-bottom:0; padding-left:0;} .tab_menu ul:after {content:""; display:block; clear:both;} .tab_menu ul .list_title {float:left; margin-bottom:-1px; width:50%; height:40px; color:#8f9eac; font-size:18px; font-weight:500; line-height:38px; text-align:center; border-bottom:1px solid #c4cdd6; background:#f5f5f5; list-style:none;} .tab_menu ul .list_title:first-child {border-right:1px solid #c4cdd6;} .tab_menu ul .list_title.active {display:block; margin-bottom:0; color:#003775; border-bottom:0; background:#fff;} .tab_menu .tab_list_box {display:none; position:relative; left:0; top:0; padding:10px 35px 14px; min-height:602px;} .tab_menu .tab_list_box.active {display:block;} /* 고급추출 */ .main_right_area .main_execute_area h3 {overflow:hidden; font-size:18px; color:#000; font-weight:bold; position:relative; padding:0; margin:10px 0 0;} .main_right_area .main_execute_area h3 a {position:absolute; right:0; top:4px; font-size:13px; font-weight:500;} .main_right_area .main_execute_area h3 a i {font-size:11px; margin-left:5px;} .main_right_area .main_execute_area .main_execute_slide {overflow:hidden;} .main_right_area .main_execute_area .main_execute_slide.slide_two {margin-bottom:13px;} .main_execute_slide .main_execute_item .item {border:1px solid #d9d9d9; padding:15px; margin:0; min-height:126px; position:relative; overflow:hidden;} .main_execute_slide .main_execute_item .item:nth-child(1) {margin-top:10px; margin-bottom:5px;} .main_execute_slide .main_execute_item .item:nth-child(2), .main_execute_slide .main_execute_item .item:nth-child(3) {margin-bottom:15px;} .main_execute_slide.slide_one .main_execute_item .item:nth-child(2), .main_execute_slide.slide_one .main_execute_item .item:nth-child(3) {margin-bottom:5px;} .main_execute_slide.slide_two .main_execute_item .item, .main_execute_slide.slide_three .main_execute_item .item {padding:10px 15px; min-height:112px;} .main_execute_slide .main_execute_item .item button.add_function_btn {background:rgba(255,255,255,0.8); outline:0; border:1px solid #d9d9d9; border-right:0; border-top:0; margin:0; padding:0; text-align:center; display:inline-block; width:26px; height:26px; position:absolute; right:0; top:0; color:#0087c9; transition:0.2s;} .main_execute_slide .main_execute_item .item button.add_function_btn:hover {background:#0087c9; color:#fff;} .main_execute_slide .main_execute_item .item button.add_function_btn:focus + .tooltip {display:none !important;} .main_execute_slide .main_execute_item .item h4.templet_title {font-size:15px; font-weight:700; line-height:20px; width:100%; margin:0px 0 16px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .main_execute_slide .main_execute_item .item ul.templet_list {padding:0; margin:0; height:58px; overflow-y:auto;} .main_execute_slide .main_execute_item .item ul.templet_list .mCSB_inside>.mCSB_container {margin-right:10px;} .main_execute_slide .main_execute_item .item ul.templet_sub_title {font-size:15px; font-weight:700; line-height:20px; width:100%; margin:0px 0 16px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .main_execute_slide .main_execute_item .item ul.templet_sub_title li:before {content:""; display:inline-block; margin-bottom:2px; margin-right:5px; width:5px; height:5px; background:#333; border-radius:3px;} .main_execute_slide .main_execute_item .item ul.templet_list li {padding:0 10px; margin:0px 2px 0 0; background:#0087c9; height:24px; line-height:24px; border-radius:12px; font-size:13px; color:#fff; max-width:200px; display:inline-block; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;} .main_execute_slide .main_execute_item .item::before {content:""; position:absolute; left:0; top:0; width:100%; height:0px; display:block; background:rgba(0,0,0,0.8); z-index:1; overflow:hidden; transition:0.3s;} .main_execute_slide .main_execute_item .item.add_function::before {display:block; height:126px;} .main_execute_slide .main_execute_item .item .templet_function_btn {transition:0.3s; position:absolute; top:-100%; border:2px solid #fff; z-index:2; left:30px; text-align:center; display:block; width:calc(100% - 60px); height:66px;} .main_execute_slide .main_execute_item .item.add_function .templet_function_btn {display:block; top:30px;} #list_recent .main_execute_slide .main_execute_item .item.add_function .templet_function_btn {top:23px;} .main_execute_slide .main_execute_item .item .templet_function_btn .function_btn {display:inline-block; background:none; border:none; height:30px; line-height:30px; color:#fff; font-size:15px; transition:0.2s; padding:0; margin:15px 25px 0 0;} .main_execute_slide .main_execute_item .item .templet_function_btn .function_btn:last-child {margin:15px 0 0 0;} .main_execute_slide .main_execute_item .item .templet_function_btn .function_btn:hover {color:#2ac6f4;} .main_execute_slide .main_execute_item .item .templet_function_btn .function_btn i {font-size:20px; margin:0 7px 0 0; position:relative; top:1px;} .main_execute_slide .main_execute_item .item .templet_function_btn button.function_close_btn {background:none; outline:0; border:none; padding:0; text-align:center; display:inline-block; width:20px; height:20px; position:absolute; right:-30px; top:-30px; color:#fff;} #list_recent .main_execute_slide .main_execute_item .item .templet_function_btn button.function_close_btn {top:-23px;} .main_execute_slide .main_execute_item .item .templet_function_btn button.function_close_btn i {transition:0.2s;} .main_execute_slide .main_execute_item .item .templet_function_btn button.function_close_btn:hover i {color:#d9534f;} .main_execute_slide .main_execute_item .item p {overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:100%; white-space:normal; font-size:14px; text-overflow:ellipsis;} .main_execute_slide.owl-theme .owl-dots {text-align:right;} .main_execute_slide.owl-theme .owl-dots .owl-dot span {margin:0 3px;} .main_execute_slide.owl-theme .owl-nav.disabled + .owl-dots {margin-top:3px;} .main_execute_slide.slide_two.owl-theme .owl-nav.disabled + .owl-dots, .main_execute_slide.slide_three.owl-theme .owl-nav.disabled + .owl-dots {margin-top:-13px;} @media (min-width:1600px) { .home_area .m_content {width:1400px;} .home_area .inner {width:1400px;} ul.main_function_link li {height:280px;} } /* ================================== 2020-11-23 이미지 변경 부분 정리 ==================================== */ /* ********** 메인화면 ********** */ /* 로고 */ .navbar-logo .logo {position:absolute; top:-12px; background:url("../images/theme_cdrs/logo/smartCDRS_logo.png")no-repeat; background-size:contain; width:300px; height:42px;} /* 슬라이더 */ .main_area .main_slider_area .main_slider .slide_item.slide_item1 {background:url("../images/theme_cdrs/home/main_slide1.jpg") no-repeat left top;} .main_area .main_slider_area .main_slider .slide_item.slide_item2 {background:url("../images/theme_cdrs/home/main_slide2.jpg") no-repeat left top;} .main_area .main_slider_area .main_slider .slide_item.slide_item3 {background:url("../images/theme_cdrs/home/main_slide3.jpg") no-repeat left top;} /* 주요기능 버튼 */ ul.main_function_link li:nth-child(1) a {background:#fff url("../images/theme_cdrs/home/main_btn_bg5.png") no-repeat right -65px bottom -35px;} ul.main_function_link li:nth-child(2) a {background:#fff url("../images/theme_cdrs/home/main_btn_bg1.png") no-repeat right -20px bottom -20px;} ul.main_function_link li:nth-child(3) a {background:#fff url("../images/theme_cdrs/home/main_btn_bg7.png") no-repeat right -30px bottom -5px;} ul.main_function_link li:nth-child(4) a {background:#fff url("../images/theme_cdrs/home/main_btn_bg3.png") no-repeat right -50px bottom -50px;} ul.main_function_link li:nth-child(5) a {background:#fff url("../images/theme_cdrs/home/main_btn_bg4.png") no-repeat right -50px bottom -50px;} ul.main_function_link li:nth-child(1) a:hover {background:#003775 url("../images/theme_cdrs/home/main_btn_bg5_hover.png") no-repeat right -65px bottom -35px;} ul.main_function_link li:nth-child(2) a:hover {background:#003775 url("../images/theme_cdrs/home/main_btn_bg1_hover.png") no-repeat right -20px bottom -20px;} ul.main_function_link li:nth-child(3) a:hover {background:#003775 url("../images/theme_cdrs/home/main_btn_bg7_hover.png") no-repeat right -30px bottom -5px;} ul.main_function_link li:nth-child(4) a:hover {background:#003775 url("../images/theme_cdrs/home/main_btn_bg3_hover.png") no-repeat right -50px bottom -50px;} ul.main_function_link li:nth-child(5) a:hover {background:#003775 url("../images/theme_cdrs/home/main_btn_bg4_hover.png") no-repeat right -50px bottom -50px;} /* ********** 로그인 후 안내페이지 ********** */ .warning-content .warning_logo {background:url("../images/theme_cdrs/logo/smartCDRS_logo.png")no-repeat; width:384px; height:84px;} /*============================================================================================================================ Main 페이지 CSS =============================================================================================================================*/ .big_main {height:100%; background:#fff; overflow-y:auto; padding-bottom:50px;} /* 비쥬얼 영역 */ .big_main .main_visual {padding:40px 60px 50px; height:665px; position:relative;} .big_main .main_visual:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} /* 비쥬얼 영역 - 이미지 */ .big_main .main_visual .visual_img_area {position:absolute; left:0; top:160px; background:#b1cbe4; width:100%; height:350px; z-index:1;} .big_main .main_visual .visual_img_area:after {content:""; display:block; width:378px; height:374px; background:url(../images/main/main_visual.png) no-repeat left top; position:absolute; right:23%; bottom:0;} /* 비쥬얼 영역 - 텍스트 */ .big_main .main_visual h3 {position:relative; z-index:2; color:#0d246a; font-weight:700; line-height:1;} .big_main .main_visual h3 small {font-size:28px; display:block; margin-bottom:20px;} .big_main .main_visual h3 strong {font-size:54px; display:block; margin-bottom:30px;} .big_main .main_visual h3 p {font-size:18px; font-weight:400; line-height:30px;} .big_main .main_visual h3 span.connect_num_info {position:absolute; right:0; top:58px; font-size:18px; color:#000; font-weight:400; line-height:40px; display:inline-block; cursor:pointer; width:230px; margin-right:calc(18% - 230px);} .big_main .main_visual h3 span.connect_num_info:after {content:""; display:inline-block; width:40px; height:40px; background:url(../images/main/main_phone.png) no-repeat right center; transition:0.2s; vertical-align:middle; margin-left:30px;} .big_main .main_visual h3 span.connect_num_info:hover:after {background:url(../images/main/main_phone_hover.png) no-repeat right center;} /* tooltip */ p.main_tooltip {margin-bottom:5px; padding:3px 6px;} p.main_tooltip:first-child {padding-top:8px;} p.main_tooltip:last-child {margin-bottom:0; padding-bottom:8px;} /* 비쥬얼 영역 - 링크 */ .big_main .main_visual .link_area {z-index:2; width:62%; float:left; position:relative; z-index:2; margin:17px 0 0; padding:0; display:flex; justify-content:flex-start; align-items:flex-start;} .big_main .main_visual .link_area li {list-style:none; padding:0; margin:0 2.6% 0 0; width:23%; display:block;} .big_main .main_visual .link_area li:last-child {margin-right:0;} .big_main .main_visual .link_area a.link_item {display:block; padding:40px 25px; border-radius:15px; background:#153187; margin-bottom:20px; color:#fff; line-height:1.3; max-width:280px; transition:0.4s; box-shadow:0 10px 20px rgba(0,0,0,0.2); overflow:hidden; position:relative; opacity:0; animation:mainFadeIn 0.3s 0s 1 linear forwards; word-break:keep-all; background-repeat:no-repeat; background-position:right bottom; top:0;} @keyframes mainFadeIn { 0% {opacity:0; bottom:-15px;} 100% {opacity:1; bottom:0;} } .big_main .main_visual .link_area li:nth-child(2n) a.link_item {margin-top:27px;} .big_main .main_visual .link_area li:nth-child(1) a.link_item {background-color:#153187; background-image:url(../images/main/link_item1.png); animation-delay:0.2s;} .big_main .main_visual .link_area li:nth-child(2) a.link_item {background-color:#6565ff; background-image:url(../images/main/link_item2.png); animation-delay:0.4s;} .big_main .main_visual .link_area li:nth-child(3) a.link_item {background-color:#3976f3; background-image:url(../images/main/link_item3.png); margin-top:-5px; animation-delay:0.6s;} .big_main .main_visual .link_area li:nth-child(4) a.link_item {background-color:#6f6f6f; background-image:url(../images/main/link_item4.png); animation-delay:0.8s;} .big_main .main_visual .link_area li:hover a.link_item {top:-15px;} @keyframes mainHover { 0% {opacity:1; bottom:0;} 100% {opacity:1; bottom:15px;} } .big_main .main_visual .link_area a.link_item strong {display:block; font-size:28px; font-weight:700; margin-bottom:25px; letter-spacing:-1px;} .big_main .main_visual .link_area a.link_item span {display:block; font-size:15px; font-weight:15px; word-break:keep-all; margin-bottom:20px; min-height:90px;} .big_main .main_visual .link_area a.link_item small {display:inline-block; padding:5px 40px 5px 0; background:url(../images/main/link_arrow.png) no-repeat right center; font-size:14px;} /* 비쥬얼 영역 - 링크2 */ .big_main .main_visual ul.link_area2 {width:18%; height:auto; float:right; padding:0; margin:0; position:relative; z-index:2; max-width:380px;} .big_main .main_visual ul.link_area2 li {display:block; list-style:none; padding:0; margin:0; width:100%; margin:0 0 15px 0;} .big_main .main_visual ul.link_area2 li button, .big_main .main_visual ul.link_area2 li a {background:#fff; display:inline-block; width:100%; height:90px; vertical-align:top; border:none; outline:none; border-radius:10px; overflow:hidden; text-align:left; box-shadow:0 10px 20px rgba(0,0,0,0.1); color:#000; padding:20px; line-height:1; transition:0.2s;} .big_main .main_visual ul.link_area2 li button:hover, .big_main .main_visual ul.link_area2 li a:hover {} .big_main .main_visual ul.link_area2 li button strong, .big_main .main_visual ul.link_area2 li a strong {font-size:30px; font-weight:700; display:block; margin-bottom:7px;} .big_main .main_visual ul.link_area2 li button span, .big_main .main_visual ul.link_area2 li a span {font-size:18px; font-weight:300;} .big_main .main_visual ul.link_area2 li button#manualMovie {background:#fff url(../images/main/icon_main_link1.png) no-repeat right -16px top -13px;} .big_main .main_visual ul.link_area2 li button#manualUser {background:#fff url(../images/main/icon_main_link2.png) no-repeat right -16px top -13px;} .big_main .main_visual ul.link_area2 li a#qnaLink {background:#fff url(../images/main/icon_main_link3.png) no-repeat right -16px top -13px;} .big_main .main_visual ul.link_area2 li button#manualMovie:hover {background:#fff3f5 url(../images/main/icon_main_link1.png) no-repeat right -16px top -13px;} .big_main .main_visual ul.link_area2 li button#manualUser:hover {background:#e5fffe url(../images/main/icon_main_link2.png) no-repeat right -16px top -13px;} .big_main .main_visual ul.link_area2 li a#qnaLink:hover {background:#fff0c9 url(../images/main/icon_main_link3.png) no-repeat right -16px top -13px;} /* 카탈로그 소개 영역 */ .big_main .main_dc_info {margin:-15px 0 60px; padding:0 60px;} .big_main .main_dc_info h3 {font-size:30px; line-height:48px; font-weight:700; color:#0d246a; margin:0; border-bottom:1px solid #0d246a;} .big_main .main_dc_info .dc_info_box {border:none; padding:35px; background:#f4f4f4; width:100%; overflow:hidden; font-size:16px; line-height:24px; color:#515151; margin-top:10px;} /* 카탈로그 소개 영역 좌측 */ .big_main .main_dc_info .dc_application {width:50%; float:left; padding-left:300px; background:url(../images/main/main_dc_icon.png) no-repeat 60px center;} .big_main .main_dc_info .dc_application p {margin-bottom:20px;} .big_main .main_dc_info .dc_application p span {color:#3976f3;} .big_main .main_dc_info .dc_application a.dc_link {display:inline-block; width:170px; height:30px; line-height:30px; padding:0 0 0 15px; transition:0.2s; color:#fff; font-size:14px; background:var(--color-main2) url(../images/main/link_arrow.png) no-repeat 100px center;} .big_main .main_dc_info .dc_application a.dc_link:hover {background:#54b9ff url(../images/main/link_arrow.png) no-repeat 100px center;} /* 카탈로그 소개 영역 - 우측 */ .big_main .main_dc_info .dc_kind {width:50%; float:right;} .big_main .main_dc_info .dc_kind p {margin:10px 0 20px;} .big_main .main_dc_info .dc_kind ul {padding:0; margin:0;} .big_main .main_dc_info .dc_kind ul li {padding:0; margin:0 0 10px; list-style:none;} .big_main .main_dc_info .dc_kind ul li strong {display:inline-block; width:120px; height:30px; border-radius:15px; color:#fff; font-size:16px; line-height:31px; background:#00aeee; margin-right:15px; vertical-align:middle; text-align:center; font-weight:500;} .big_main .main_dc_info .dc_kind ul li:nth-child(1) strong {background:#00aeee;} .big_main .main_dc_info .dc_kind ul li:nth-child(2) strong {background:#0041b2;} .big_main .main_dc_info .dc_kind ul li:nth-child(3) strong {background:#ff8a00;} .big_main .main_dc_info .dc_kind ul li span {} .big_main .drs_lst.project_list .sub_list {display:block; width:calc(100% + 120px); margin-left:-40px; left:0px;} .big_main .catalog_lst .sub_list {display:block; width:calc(100% + 120px); margin-left:-40px; left:0px;} /* 게시판 */ .big_main .big_main_board_area {padding:0 60px; overflow:hidden; width:100%;} .big_main .big_main_board_area .main_board {width:calc(50% - 40px); float:left;} .big_main .big_main_board_area .main_board:nth-child(2) {float:right;} .big_main .big_main_board_area .main_board h4 {position:relative; font-size:30px; line-height:1; color:#000; font-weight:700;} .big_main .big_main_board_area .main_board h4 a {display:inline-block; position:absolute; right:0; bottom:0; font-size:16px; font-weight:400; width:20px; height:20px; text-align:center; line-height:20px; transition:0.2s;} .big_main .big_main_board_area .main_board h4 a:hover {color:#54b9ff;} .big_main .big_main_board_area .main_board h4 span {} .big_main .big_main_board_area .main_board ul {margin:30px 0 0; padding:0;} .big_main .big_main_board_area .main_board ul li {padding:0; margin:0; border-bottom:1px solid #e1e1e1; height:60px; line-height:60px; position:relative; list-style:none;} .big_main .big_main_board_area .main_board ul li:before {content:""; display:block; width:8px; height:8px; border-radius:4px; background:#d9d9d9; position:absolute; left:0; top:50%; transform:translate(0,-50%);} .big_main .big_main_board_area .main_board ul li:last-child {border-bottom:none;} .big_main .big_main_board_area .main_board ul li a {display:block; padding:0 100px 0 25px; color:#000; font-size:17px; font-weight:400; transition:0.2s; line-height:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .big_main .big_main_board_area .main_board ul li a:hover {} .big_main .big_main_board_area .main_board ul li span {position:absolute; right:0; top:0; line-height:60px; font-size:15px; text-align:right; padding-right:10px;} /* ****************************** 반응형 ****************************** */ @media all and (min-width:2200px) { /* 비쥬얼 영역 */ .big_main .main_visual {padding:40px 120px 50px;} /* 카탈로그 소개 영역 */ .big_main .main_dc_info {padding:0 120px;} .big_main .drs_lst.project_list .sub_list {width:calc(100% + 200px); margin-left:-100px;} .big_main .catalog_lst .sub_list {width:calc(100% + 200px); margin-left:-100px;} /* 게시판 */ .big_main .big_main_board_area {padding:0 120px;} } @media all and (min-width:2400px) { /* 비쥬얼 영역 */ .big_main .main_visual {padding:40px 180px 50px;} /* 카탈로그 소개 영역 */ .big_main .main_dc_info {padding:0 180px;} .big_main .drs_lst.project_list .sub_list {width:calc(100% + 320px); margin-left:-160px;} /* 게시판 */ .big_main .big_main_board_area {padding:0 180px;} } @media all and (max-width:1800px) { .big_main .main_visual .link_area {width:70%;} } @media all and (max-width:1600px) { .big_main .main_visual .link_area {width:76%;} .big_main .main_visual .link_area a.link_item {margin-right:2%;} .big_main .main_visual .link_area a.link_item:last-child {margin-right:0;} } @media all and (max-width:1500px) { /* 하단 버튼영역 */ .big_main .drs_lst.project_list .project_item .item_btn {padding:40px 0 50px 83px;} .big_main .drs_lst.project_list .project_item .item_btn > div.c_info {font-size:14px;} } @media all and (max-width:1450px) { .big_main .main_visual .link_area {width:79%;} } /* 매안 얼럼 */ .big_notice_alarm_area {position:fixed; right:30px; top:45px; width:370px; height:0; transition:0.3s; overflow:hidden; padding:0 15px; margin:0; z-index:10; background:#fff; border-radius:10px;} .big_notice_alarm_area.active {height:auto; max-height:634px; padding:15px 15px 0;} ul.big_notice_alarm {padding:0; margin:0;} ul.big_notice_alarm li {padding:20px 20px 60px 20px; margin:0 0 7px; width:100%; height:160px; position:relative; background:#fff; border:1px solid #d8d8d8; border-radius:8px; box-shadow:0 5px 12px rgba(0,0,0,0.12); list-style:none;} ul.big_notice_alarm li strong {font-size:18px; line-height:18px; color:#000; font-weight:600; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin-bottom:14px; padding-left:25px; display:block; position:relative;} ul.big_notice_alarm li strong:before {content:"\f06a"; display:block; width:18px; height:18px; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:16px; color:#54b9ff; position:absolute; left:0; top:0; line-height:18px;} ul.big_notice_alarm li p {font-size:16px; font-weight:400; color:#000; line-height:18px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; padding-left:25px; word-break:keep-all;} ul.big_notice_alarm li a.btn_alarm {position:absolute; right:16px; bottom:20px; font-size:16px; background:#54b9ff; width:70px; height:30px; line-height:30px; padding:0 10px; color:#fff; text-align:center; border-radius:7px;} ul.big_notice_alarm li a.btn_alarm:hover {background:#002d6e;} .big_notice_alarm_area button.btn_alarm_more {display:block; width:100%; height:50px; line-height:50px; background:#54b9ff; transition:0.2s; color:#fff; font-size:18px; font-weight:500; border-radius:8px; border:none;} .big_notice_alarm_area button.btn_alarm_more span {color:#ff4069; display:inline-block; vertical-align:middle; margin:0 10px 0 5px;} .big_notice_alarm_area button.btn_alarm_more:hover {background:#002d6e;} .big_notice_alarm_area button.btn_alarm_all_close {padding:28px 10px 10px; height:60px; position:relative; background:none; transition:0.2s; text-align:center; font-size:16px; font-weight:300; margin:7px auto 0; display:block; width:100px; border:none;} .big_notice_alarm_area button.btn_alarm_all_close:hover {color:#000;} .big_notice_alarm_area button.btn_alarm_all_close:before {color:#a7a7a7; content:"\f057"; display:block; width:20px; height:20px; font-family:"Font Awesome 6 Free"; font-size:20px; position:absolute; left:50%; top:0; font-weight:900; transform:translate(-50%,0); transition:0.2s;`} .big_notice_alarm_area button.btn_alarm_all_close:hover:before {color:#000;} /*====================================== 검색 결과 ========================================*/ .search_body {padding:50px 40px; background:#fff; width:100%; margin:0; box-sizing:border-box; border-radius:10px;} .search_result_area {max-width:1400px; width:100%; margin:0 auto;} /* 상단 검색영역 */ .search_result_area .search_box {margin:0 0 15px;} .search_result_area .search_box .search_con {padding:0; margin:0 0 15px; position:relative; width:635px; display:inline-block; vertical-align:middle;} .search_result_area .search_box .search_con button.btn_search {width:40px; height:40px; background:none; transition:0.2s; border:none; outline:none; position:absolute; left:0; top:0; font-size:15px; text-align:right;} .search_result_area .search_box .search_con button.btn_search:hover {color:#54b9ff;} .search_result_area .search_box .search_con select.form_control {width:115px; position:absolute; left:40px; top:5px; border:none;} .search_result_area .search_box .search_con input {width:100%; height:40px; line-height:40px; border:1px solid #d9d9d9; padding:0 40px 0 170px;} .search_result_area .search_box .search_con input:hover, .search_result_area .search_box .search_con input:focus {border-color:#2b58e6;} .search_result_area .search_box .search_con .btn_clear {opacity:0; transition:all ease 0.2s; color:transparent; width:40px; height:40px; position:absolute; top:0; right:0; outline:none; border:none; background:url(../images/icon/icon_search_cancel.png) no-repeat center center; background-size:15px 15px;} .search_result_area .search_box .search_con input:focus ~ .btn_clear {opacity:1;} /* 결과 내 재검색 */ .search_result_area .search_box .m_check.result_research {margin-left:20px; margin-right:40px; vertical-align:top; margin-top:9px;} .search_result_area .search_box .m_check.result_research > input[type=checkbox] + label {font-size:15px;} .search_result_area .search_box .m_check.result_research > input[type=checkbox]:checked + label:before {border:1px solid #1d4aaf; background-color:#1d4aaf;} /* 검색조건 선택 */ .search_result_area .search_box .btn-group-area {display:block; float:right; margin-top:7px;} .search_result_area .search_box .btn-group {margin-right:25px;} .search_result_area .search_box .btn-group + .btn-group {margin-left:0;} .search_result_area .search_box .btn-group:last-child {margin-right:0;} .search_result_area .search_box .btn-group > span {display:inline-block; vertical-align:middle; line-height:26px; margin-right:10px; color:#000; font-size:14px;} .search_result_area .search_box .btn-group .btn.btn-sm {padding:0 8px; font-size:12px; font-weight:300; height:24px; line-height:24px;} .search_result_area .search_box .btn-group .btn-default {color:#000; background:#fff; border-color:#bebebe;} .search_result_area .search_box .btn-group .btn-default.focus, .search_result_area .search_box .btn-group .btn-default:focus, .search_result_area .search_box .btn-group .btn-default:hover {color:#004bb6; background-color:#fff; border-color:#004bb6;} .search_result_area .search_box .btn-group .btn-default.active, .search_result_area .search_box .btn-group .btn-default:active {color:#fff; background-color:#1d4aaf; border-color:#1d4aaf;} .search_result_area .search_box .btn-group .btn-default.active:hover {background-color:#004bb6; border-color:#004bb6;} /* 검색어 결과 */ .search_result_area .search_result_total {margin:50px 0 35px; color:#000000; font-size:28px; font-weight:400; text-align:left; letter-spacing:-0.5px;} .search_result_area .search_result_total strong {display:inline-block; font-weight:700; color:#0072ff;} .search_result_area .search_result_total strong:before {content:"'"; display:inline-block;} .search_result_area .search_result_total strong:after {content:"'"; display:inline-block;} .search_result_area .search_result_total span {font-weight:700; font-size:34px; color:#0072ff;} /* 검색결과 유형 선택 버튼 */ .sr_select_type {text-align:left;} /* 상세 검색 결과내용 */ /* ********************* 결과 리스트 공통 ********************* */ .search_result_area h3.result_title {padding:0 0 15px 0; font-size:22px; font-weight:700; color:#000; border-bottom:1px solid #c9c9c9; line-height:24px; margin:70px 0 0;} .search_result_area h3.result_title i {margin-right:8px; vertical-align:middle;} .search_result_area h3.result_title button.more_btn {display:block; float:right; padding:5px 20px; background:none; border:none; outline:none; color:#000; transition:0.2s; font-size:14px; font-weight:400;} .search_result_area h3.result_title button.more_btn:before {content:"+"; display:inline-block; margin:0 3px 0 0;} .search_result_area h3.result_title button.more_btn:hover {color:#004bb6;} .search_result_area p.result_none {font-size:18px; color:#888888; font-weight:400; margin:35px 0 0; text-align:center; display:block; text-align:center;} /* 하이라이트 */ .search_result_area span.highlight {display:inline-block; background:#ffeab5 !important;} /* 자주하는 질문 */ .search_result_area ul.result_faq {padding:20px 0 0; margin:0; display:flex; justify-content:flex-start; flex-wrap:wrap;} .search_result_area ul.result_faq li {padding:15px; margin:0 1.33333% 18px 0; width:24%; list-style:none; border:1px solid #d9d9d9; border-radius:10px; transition:0.3s;} .search_result_area ul.result_faq li:hover {border-color:#989898; box-shadow:0 10px 20px 2px rgba(0,0,0,0.2);} .search_result_area ul.result_faq li:nth-child(4n) {margin-right:0;} .search_result_area ul.result_faq li a {display:block; font-size:15px; color:#000; line-height:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; height:40px; transition:0.2s; word-break:keep-all;} .search_result_area ul.result_faq li a:hover {color:#54b9ff;} .search_result_area ul.result_faq li .tag_faq {margin-top:20px;} .search_result_area ul.result_faq li .tag_faq span {display:inline-block; background:#f3faff; color:#2b85ff; font-size:12px; padding:0px 6px; border-radius:5px; line-height:20px; margin-right:3px; height:20px; border:1px solid #2b85ff; margin-bottom:5px;} /* 검색결과 리스트 공통 */ .search_result_area ul.result_lst {padding:20px 0 0; margin:0;} .search_result_area ul.result_lst > li {padding:0; margin:0 0 40px; list-style:none;} .search_result_area ul.result_lst > li:last-child {margin-bottom:0;} .search_result_area ul.result_lst > li a {font-size:18px; font-weight:400; line-height:24px; margin-bottom:13px; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .search_result_area ul.result_lst > li a strong {display:inline-block; padding:0 7px; width:auto; min-width:65px; height:24px; line-height:24px; color:#fff; background:#ccc; font-size:14px; border-radius:2px; transition:0.2s; text-align:center; vertical-align:top; margin:0 15px 0 0; font-weight:400;} .search_result_area ul.result_lst > li a strong.answer_completed {background:#004bb6;} .search_result_area ul.result_lst > li a strong.answer_standby {background:#999;} .search_result_area ul.result_lst > li p {font-size:15px; color:#888; line-height:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; max-height:40px; word-break:keep-all;} .search_result_area ul.result_lst > li ul.keyword_lst {padding:0; margin:15px 0 0;} .search_result_area ul.result_lst > li ul.keyword_lst li {padding:0 20px; margin:0 3px 10px 0; list-style:none; height:23px; min-width:80px; line-height:22px; background:#ebebeb; border-radius:12px; font-size:12px; color:#565656; display:inline-block; text-align:center; transition:0.2s;} .search_result_area ul.result_lst > li ul.keyword_lst li:hover {color:#fff; background-color:#4f4e56;} /* 검색결과 정보 */ .search_result_area ul.info_lst {font-size:15px; padding:0; margin:0;} .search_result_area ul.info_lst li {padding:0; margin:0 40px 0 0; display:inline-block; list-style:none; line-height:22px;} .search_result_area ul.info_lst li ul.location {padding:0; margin:0;} .search_result_area ul.info_lst li ul.location li {margin:0 10px 0 0; padding:0 10px 0 0; position:relative;} .search_result_area ul.info_lst li ul.location li:after {content:"\f054"; display:inline-block; font-family:"FontAwesome"; font-size:12px; vertical-align:middle; color:#999; position:absolute; right:-6px; top:0px;} .search_result_area ul.info_lst li ul.location li:last-child {margin:0; padding:0;} .search_result_area ul.info_lst li ul.location li:last-child:after {display:none;} .search_result_area ul.info_lst li strong {color:#000; font-weight:400; display:inline-block; vertical-align:top; margin-right:15px;} .search_result_area ul.-info_lst li strong.icon_item {display:inline-block; width:16px; height:22px; margin-right:5px;} .search_result_area ul.info_lst li strong.icon_item.num_hits {background:url(../images/icon/search_result/icon_eye.png) no-repeat center center;} .search_result_area ul.info_lst li strong.icon_item.num_down {background:url(../images/icon/search_result/icon_down.png) no-repeat center center;} .search_result_area ul.info_lst li span {color:#888; display:inline-block; vertical-align:top;} /* 검색결과 더보기 */ .search_result_area .more_btn_area {text-align:center;} .search_result_area .more_btn_area button.more_btn {display:inline-block; padding:5px 20px; background:none; border:none; outline:none; color:#000; transition:0.2s; font-size:14px; font-weight:400;} .search_result_area .more_btn_area button.more_btn:before {content:"+"; display:inline-block; margin:0 3px 0 0;} .search_result_area .more_btn_area button.more_btn:hover {color:#ef7158;} /* 카탈로그 리스트 수정 */ .search_result_area .drs_lst.project_list {width:calc(100% + 40px);} .search_result_area .drs_lst.project_list > li {width:33.33%; height:auto;} .search_result_area .drs_lst.project_list .project_item {height:100%;} .search_result_area .drs_lst.project_list .project_item span.status {position:absolute; left:15px; top:0; display:inline-block; width:120px; height:30px; font-size:14px; color:#fff; background:#999; text-align:left; line-height:30px; font-weight:400; border-radius:3px; text-align:center; border-radius:0 0 15px 15px;} .search_result_area .drs_lst.project_list .project_item span.status.type_data {background:#00aeee;} .search_result_area .drs_lst.project_list .project_item span.status.type_advanced {background:#0041b2;} .search_result_area .drs_lst.project_list .project_item span.status.type_storage {background:#ff8a00;} .search_result_area .drs_lst.project_list .project_item .item_title {word-break:keep-all;} .search_result_area .drs_lst.project_list .project_item .item_catalog {padding:20px 30px 0;} .search_result_area .drs_lst.project_list .project_item .item_catalog i {margin-right:5px;} .search_result_area .drs_lst.project_list .project_item .item_brief {margin:15px 0 11px; word-break:keep-all;} .search_result_area .drs_lst.project_list .project_item .item_tag_list {margin:20px 0 15px;} .search_result_area .drs_lst.project_list .project_item .item_info {display:block; margin:5px 0 25px;} .search_result_area .drs_lst.project_list .project_item .item_info > span {display:inline-block;} .search_result_area .drs_lst.project_list .project_item .item_info > span:nth-child(1) {padding-left:0;} .search_result_area .drs_lst.project_list .project_item .item_info > span.like {float:right; font-size:14px; color:#000000; display:block;} .search_result_area .drs_lst.project_list .project_item .item_info > span.like:before {content:"\f004"; font-family:"FontAwesome"; font-size:16px; color:#e92920; margin:0 5px 0 0; vertical-align:middle;} .search_result_area .catalog_lst {width:calc(100% + 40px);} .search_result_area .catalog_lst > li {width:33.33%; height:auto;} .search_result_area .catalog_lst .project_item {height:100%;} .search_result_area .catalog_lst .project_item span.status {position:absolute; left:15px; top:0; display:inline-block; width:120px; height:30px; font-size:14px; color:#fff; background:#999; text-align:left; line-height:30px; font-weight:400; border-radius:3px; text-align:center; border-radius:0 0 15px 15px;} .search_result_area .catalog_lst .project_item span.status.type_data {background:#00aeee;} .search_result_area .catalog_lst .project_item span.status.type_advanced {background:#0041b2;} .search_result_area .catalog_lst .project_item span.status.type_storage {background:#ff8a00;} .search_result_area .catalog_lst .project_item .item_title {word-break:keep-all;} .search_result_area .catalog_lst .project_item .item_catalog {padding:20px 30px 0;} .search_result_area .catalog_lst .project_item .item_catalog i {margin-right:5px;} .search_result_area .catalog_lst .project_item .item_brief {margin:15px 0 11px; word-break:keep-all;} .search_result_area .catalog_lst .project_item .item_tag_list {margin:20px 0 15px;} .search_result_area .catalog_lst .project_item .item_info {display:block; margin:5px 0 25px;} .search_result_area .catalog_lst .project_item .item_info > span {display:inline-block;} .search_result_area .catalog_lst .project_item .item_info > span:nth-child(1) {padding-left:0;} .search_result_area .catalog_lst .project_item .item_info > span.like {float:right; font-size:14px; color:#000000; display:block;} .search_result_area .catalog_lst .project_item .item_info > span.like:before {content:"\f004"; font-family:"FontAwesome"; font-size:16px; color:#e92920; margin:0 5px 0 0; vertical-align:middle;} /* 검색 결과 내 Sort 버튼 */ .result_sort {margin-top:20px;} /* ****************** 접속화면 설정 관리 ****************** */ /* 메인 테마 설정 리스트 */ .main_theme_lst_area {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80%;} .main_theme_lst_area ul.main_theme_lst {display:flex; flex-wrap:wrap; margin:0; padding:0;} .main_theme_lst_area ul.main_theme_lst li {width:31%; margin:0 3.5% 80px 0; list-style:none; padding:0;} .main_theme_lst_area ul.main_theme_lst li:nth-child(3n) {margin-right:0;} .main_theme_lst_area ul.main_theme_lst li button.btn_theme_select {border:none; overflow:hidden; width:100%; padding-top:50%; background:none; position:relative; border-radius:5px; border:1px solid #d9d9d9; transition:0.2s;} .main_theme_lst_area ul.main_theme_lst li button.btn_theme_select:hover {border-color:#09308e; outline:1px solid #09308e; box-shadow:0 10px 20px rgba(0,0,0,0.1);} .main_theme_lst_area ul.main_theme_lst li button.btn_theme_select img {width:100%; position:absolute; left:0; top:0;} .page_dot {margin:0; text-align:center;} .page_dot button.dot {width:18px; height:18px; border-radius:9px; transition:0.3s; margin:0 10px 0 0; background:#09308e; text-indent:-9999px; border:none; outline:none} .page_dot button.dot.active {width:70px;} .page_dot button.dot:hover {background:#16afe8;} .page_dot button.dot:last-child {margin-right:0;} /* 비쥬얼 선택 리스트 */ .visual_select_con {overflow:hidden;} button.visual_new {border:0;} button.visual_new{display:inline-block;width:250px; height:211px; color:#bec2c5; border-radius:10px; border:2px dashed #e1e3e7; background-color:#fff; font-size:17px; margin-top:10px;} button.visual_new:before{display:block;content:"\eee1";padding:10px;font-family:'icofont';color:#bec2c5;font-size:60px;transform:rotate(-45deg);} button.visual_new:hover{color:#000;border-color:#26a1ff;background-color:#f3f8ff;} button.visual_new:hover:before{color:#26a1ff;} .visual_select_area {display:block; width:100%; overflow-x:auto; margin:0 0 45px; float:right; width:calc(100% - 260px);} ul.visual_select_lst {display:flex; padding:10px 0 20px 8px; margin:0; white-space:nowrap;} ul.visual_select_lst li {padding:0 10px; margin:0; list-style:none;} ul.visual_select_lst li .visual_item {width:250px; height:211px; position:relative; border:1px solid #dadbdd; border-radius:10px; background:#fff; transition:0.2s; padding:45px 20px 25px;} ul.visual_select_lst li .visual_item:hover {border-color:#989898; box-shadow:0 0 20px rgba(0,0,0,0.2);} ul.visual_select_lst li.active .visual_item {border-color:#26a1ff; box-shadow:0 0 20px rgba(0,0,0,0.2); outline:2px solid #26a1ff;} ul.visual_select_lst li .visual_item .classified {position:absolute; border-radius:0 0 15px 15px; display:inline-block; padding:0; color:#fff; font-size:14px; left:20px; top:0; font-weight:700; text-align:center; height:30px; width:120px; line-height:30px; background:#5187ec; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:0 10px;} ul.visual_select_lst li .visual_item strong.item_title {height:24px; padding:0; margin:0 0 15px; font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block;} ul.visual_select_lst li .visual_item .thumnail_area {background:#f1f1f1; height:100px; width:100%; overflow:hidden; position:relative; border:1px solid #eee;} ul.visual_select_lst li .visual_item .thumnail_area img {height:auto; width:100%; position:absolute; left:0; top:0;} ul.visual_select_lst li .visual_item .item_option {display:flex; align-items:center; justify-content:center; opacity:0; transition:all ease 0.2s; position:absolute; right:10px; top:5px;} ul.visual_select_lst li .visual_item .item_option button {width:30px; height:30px; line-height:30px; margin:0 4px; border-radius:15px; background:#fff; transition:all ease 0.2s; border:1px solid #3; color:var(--color-main2);} ul.visual_select_lst li .visual_item .item_option button:after {display:block; line-height:30px;} ul.visual_select_lst li .visual_item .item_option button:hover {background:var(--color-main2); color:#fff;} ul.visual_select_lst li .visual_item .item_option button:hover:after {color:#fff;} ul.visual_select_lst li .visual_item .item_option button.icon_btn.icon_detail:after {content:"\ed11";} ul.visual_select_lst li .visual_item:hover > .item_option {display:flex; opacity:1; top:12px;} /* 세부 내용 */ .file_box_area {display:flex; justify-content:space-between;} .file_box_area .file_box_item {width:32%; border:1px solid #d9d9d9; border-radius:10px; padding:20px 20px; text-align:center;} .file_box_area .file_box_item strong {font-size:16px; font-weight:700; display:block; margin:0 0 5px;} .file_box_area .file_box_item span {font-size:14px; font-weight:400; display:block; margin:0;} .file_box_area .image-upload {display:block; margin-top:20px;} .file_box_area .image-upload > input {display:none;} .file_box_area .image-upload label {display:inline-block; cursor:pointer;} .file_box_area .upload-icon img.icon {width:auto; height:auto; margin:0;} .file_box_area .prev_box {display:none; width:auto;} .file_box_area .prev_box img.prev {margin:0 auto 20px; max-height:100px; display:block; box-shadow:5px 5px 10px rgba(0,0,0,0.2);} /* 도움말 서비스 바로가기용 */ .help_service_table .file_box_area {display:block;} .help_service_table .file_box_area .image-upload {margin-top:0;} .help_service_table .file_box_area img.prev {margin:0 5px 0 0; display:inline-block;} .info_txt_ul {padding:10px 10px 5px; margin:0;} .info_txt_ul li {list-style:none; padding:0 0 0 10px; margin:5px 0 0; position:relative; font-size:14px; line-height:20px; color:#999;} .info_txt_ul li:before {content:""; display:block; width:4px; height:4px; border-radius:2px; background:#888; position:absolute; left:0; top:7px;} /* 텍스트 */ span.table_small_title {font-size:15px; display:inline-block; min-width:100px; margin-right:20px; vertical-align:middle; line-height:30px;} span.table_info_txt {font-size:14px; color:#999; display:inline-block; vertical-align:middle;} span.table_small_title2 {font-size:15px; display:inline-block; margin-right:20px; vertical-align:middle; line-height:30px;} /* 색상 선택 */ .input_color_area {position:relative; display:inline-block; width:150px;} .input_color_area .form_control.input_color {text-align:center; width:120px;} .form_control.input_color {cursor:pointer;} .input_color_area label.color_icon {width:30px; height:30px; position:absolute; right:0; top:0; background:url(../images/icon/icon_black_selectColor.png) no-repeat center center; cursor:pointer; transition:0.2s;} .input_color_area label.color_icon:hover {background:url(../images/icon/icon_black_selectColor_hover.png) no-repeat center center;} /* 하단 문구 */ #footerTxt1.form_control, #footerTxt2.form_control {height:40px; line-height:1; font-size:12px; color:#fff; font-weight:300;} /* 비주얼 메세지 */ input#mainSubTitleInput.form_control {font-size:28px; color:#0d246a; font-weight:700; line-height:1; height:50px;} input#mainHeadTitleInput.form_control{font-size:54px; color:#0d246a; font-weight:700; line-height:1; height:70px;} textarea#mainInfoTxt.form_control {font-size:18px; color:#0d246a; font-weight:400; line-height:30px; resize:none;} /* ********** 비주얼 컬러 옵션 ********** */ .select_main_visual_color {display:inline-block;} /* disabled 효과 */ .form-table .select_main_visual_color.disabled span.table_small_title2 {color:#ccc;} .form-table .select_main_visual_color.disabled .form_control {opacity:0.2; pointer-events:none;} .form-table .select_main_visual_color.disabled .color_icon {opacity:0.2; pointer-events:none;} /* 이미지 업로드 팝업 */ .img_crop_btn {text-align:center; margin:0 0 20px;} /* manage */ .manage_title {margin:30px 0 10px; font-size:17px; font-weight:700;} /* 콘텐츠 바로가기 */ .color_box {width:120px; height:28px; display:inline-block; text-indent:-9999px;} /* 콘텐츠 바로가기 테이블 */ .contents_link_table .dropdown button.dropdown-toggle {min-width:100%; border-color:#dcdcdc;} .contents_link_table .dropdown button.dropdown-toggle:after {border-top-color:#000;} .contents_link_table .dropdown img {height:20px;} .contents_link_table .dropdown .dropdown-menu {min-width:100%; text-align:center;} .contents_link_table i.fa-grip {cursor:move; transition:0.2s; color:#000;} .contents_link_table i.fa-grip:hover {color:#54b9ff;} .contents_link_table a.fast_link_select {text-align:left; display:block; margin:10px 0 0;} .contents_link_table a.fast_link_select span {display:inline-block; margin-left:5px; opacity:0.5;} .contents_link_table tbody tr td {vertical-align:top;} .contents_link_table i.fa-grip {margin-top:8px;} .contents_link_table .m_switch {margin-top:5px;} /* 도움말/서비스 테이블 */ .help_service_table .dropdown button.dropdown-toggle {min-width:100%; border-color:#dcdcdc;} .help_service_table .dropdown button.dropdown-toggle:after {border-top-color:#000;} .help_service_table .dropdown img {height:20px;} .help_service_table .dropdown .dropdown-menu {min-width:100%; text-align:center;} .help_service_table i.fa-grip {cursor:move; transition:0.2s; color:#000;} .help_service_table i.fa-grip:hover {color:#54b9ff;} .help_service_table a.fast_link_select {text-align:left; display:block; margin:10px 0 0;} .help_service_table a.fast_link_select span {display:inline-block; margin-left:5px; opacity:0.5;} .help_service_table tbody tr td {vertical-align:top;} .help_service_table i.fa-grip {margin-top:8px;} .help_service_table .m_switch {margin-top:5px;} .help_service_table .pop_position {display:flex; margin-top:5px; justify-content:space-between;} .help_service_table .pop_position span {line-height:30px;} /* 검색 빠른 링크 테이블 */ .search_link_table i.fa-grip {cursor:move; transition:0.2s; color:#000;} .search_link_table i.fa-grip:hover {color:#54b9ff;} .search_link_table a.fast_link_select {text-align:left; display:block; margin:0; line-height:30px;} .search_link_table a.fast_link_select span {display:inline-block; margin-left:5px; opacity:0.5;} .search_link_table tbody tr td {vertical-align:top;} .search_link_table i.fa-grip {margin-top:8px;} .search_link_table .m_switch {margin-top:5px;} .search_link_table td > span {line-height:30px;} /* 개인정보 보호 관리 탭 */ #manageConnectionRecordTable select.form_control {display:inline-block; width:auto; min-width:120px;} #manageConnectionRecordTable .m_check {vertical-align:middle;} /* *********************** Dicom View Popup *********************** */ #dicomViewPop {width:100%; height:100%;} /* #dicomViewPop ::-webkit-slider-thumb {-webkit-appearance:none; background:red; width:16px; height:16px; border-radius:8px; cursor:pointer;} */ #dicomViewPop ::-webkit-slider-runnable-track {background:#757575;/* height:4px; */} #dicomViewPop input.form-range:disabled {opacity:1;} #dicomViewPop .form-control {height:100%; max-width:200px; min-width:200px;} /* ?? */ #dicomViewPop .inp_date {height:100%; margin:0px 5px 0px 5px; width:200px;} #dicomViewPop .li_dicom_file {cursor:pointer;} #dicomViewPop .li_dicom_file.active {background-color:#004bb6;} #dicomViewPop .daterangepicker.ltr.show-calendar.opensright {z-index:999999999999;} /* ********** 상단 옵션 ********** */ #dicomViewPop .card1 {margin-bottom:10px; height:165px; width:100%; box-shadow:3px 3px 10px rgba(0,0,0,0.255); padding:20px 10px; background:#000; border:none; border-radius:10px; overflow-x:auto;} #dicomViewPop .card1 details summary {padding:0 30px;} #dicomViewPop .card1 .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {border-radius:0;} #dicomViewPop .card1 select.form-select {background-color:#333; color:#fff; border-color:#666; width:200px; max-width:200px; min-width:200px; height:100%; --bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e")} #dicomViewPop .card1 .input-group>.form-control {background-color:#333; color:#fff; border-color:#666; width:200px; height:100%;} #dicomViewPop .card1 .form-control[disabled], #dicomViewPop .card1 .form-control[readonly], #dicomViewPop .card1 fieldset[disabled] .form-control {background-color:#333; color:#777; border-color:#666;} #dicomViewPop .card2 {height:30%; width:100%; min-width:1750px;} /* 아이템 */ #dicomViewPop .div_dateRange {height:100%; width:35%; margin-left:10px; display:inline-flex; vertical-align:top;} #dicomViewPop .div_dateRange > input {width:200px;} #dicomViewPop span.input-group-text {margin:0px 5px 0px 15px; margin-left:25px !important; background:none; color:#fff; border:none; min-width:110px;} /* ********** 왼쪽, 우측 ********** */ #dicomViewPop .card {width:300px; height:calc(100% - 170px); margin-right:0; box-shadow:3px 3px 10px rgba(0,0,0,0.255); display:inline-block; vertical-align:top; background:#000; border:none; padding:10px; border-radius:10px;} #dicomViewPop .list-group > li.list-group-item {background-color:#333; margin-bottom:5px; color:#fff; border-color:#333; cursor:pointer; padding:10px 15px; font-size:14px; line-height:20px;} #dicomViewPop .list-group > li.list-group-item .form-range-area {height:14px; margin-bottom:10px; background-image:linear-gradient(90deg, #8b8b8b 1px, transparent 1px); background-size: 25px 25px; background-position:-1px -1px; } #dicomViewPop .list-group.ul_dicomList > li.list-group-item:hover {background:#555; border-color:#555;} #dicomViewPop .list-group > li.list-group-item.active {background:#0d6efd; border-color:#0d6efd; transition:0.} #dicomViewPop .daicom_btn_area {margin-top:30px; text-align:left; padding-left:20px;} #dicomViewPop .daicom_btn_area span.txt {display:inline-block; color:#fff; font-size:14px; vertical-align:middle; margin-right:10px;} #dicomViewPop .daicom_btn_area .btn_scale {display:inline-block; margin-right:10px; vertical-align:middle; padding-right:17px; position:relative;} #dicomViewPop .daicom_btn_area .btn_scale:after {content:""; display:block; width:1px; height:24px; position:absolute; right:0; top:3px; background:#666;} #dicomViewPop .daicom_btn_area .btn {padding:4px 8px;} #dicomViewPop .daicom_btn_area .save_setting {padding-left:38px; margin-top:30px;} #dicomViewPop .daicom_btn_area .save_setting button.btn_check {padding:0 18px 0 11px; display:inline-block; line-height:33px; border:1px solid #0092ff; color:#0092ff; transition:0.2s; background:#000; font-weight:700; text-align:center;} #dicomViewPop .daicom_btn_area .save_setting button.btn_check i {margin-right:10px; color:#595959; transition:0.2s; font-size:18px; position:relative; top:3px;} #dicomViewPop .daicom_btn_area .save_setting button.btn_check.active {color:#fff; border-color:#0092ff; background:#0092ff; font-weight:400;} #dicomViewPop .daicom_btn_area .save_setting button.btn_check.active i {color:#0048cb;} #dicomViewPop .daicom_btn_area .save_setting button.btn_check:disabled {color:#4e4e4e; border-color:#4e4e4e; background:#000; font-weight:700;} #dicomViewPop .daicom_btn_area .save_setting button.btn_check:disabled i {color:#595959;} /* ********** 중앙 ********** */ #dicomViewPop .dicom_center {height:calc(100% - 170px); width:calc(100% - 620px); box-shadow:3px 3px 10px rgba(0,0,0,0.255); display:inline-block; background:#000; border-radius:10px; margin-left:6px; position:relative;} #dicomViewPop .dicom_center #div_dicomPage {width:650px; height:40px; margin:auto; background:rgba(255,255,255,0.2); padding:5px 130px 5px 50px; border-radius:20px; position:absolute; left:50%; bottom:10px; z-index:10; transform:translate(-50%,0); display:flex; pointer-events:none;} #dicomViewPop .dicom_center #div_dicomPage label#lab_inp_dicomPage {margin:5px 0; width:100px;} #dicomViewPop .dicom_center #div_dicomPage label.form-label {margin:5px 0; width:100px; color:#fff;} #dicomViewPop .dicom_center #div_dicomPage .form-range {width:calc(100% - 100px); margin-top:8px; pointer-events:auto;} #dicomViewPop .dicom_center #div_dicom {width:98%; height:100%; margin:0 auto; display:flex; justify-content:center; align-items:center;} #dicomViewPop .dicom_center #div_dicom #divDicomView {width:100%; height:100%; margin:auto;} #dicomViewPop .owl-stage-outer {height:100%;} #dicomViewPop .owl-stage {height:100%;} #dicomViewPop .owl-item {height:0;} #dicomViewPop .owl-item.active {height:100%;} #dicomViewPop .owl-dots {display:none !important; justify-content:center;} #dicomViewPop .owl-nav {display:flex; justify-content:space-between; position:absolute; left:50%; bottom:15px; width:64px; height:30px; margin:0 0 0 220px;} #dicomViewPop .owl-carousel .owl-nav button.owl-prev, #dicomViewPop .owl-carousel .owl-nav button.owl-next {height:30px; background:#000; transition:0.2s; width:30px; font-size:20px; line-height:34px; color:#666; margin:0;} #dicomViewPop .owl-carousel .owl-nav button.owl-next {margin-left:4px;} #dicomViewPop .owl-carousel .owl-nav button.owl-prev:hover, #dicomViewPop .owl-carousel .owl-nav button.owl-next:hover {color:#0092ff;} /* ******************** 의료 데이터 분석 화면 팝업 Dicom Small Pop ******************** */ /* 다이컴 영역 */ #dicomViewSmallPop {color:#fff; display:flex; justify-content:space-between; height:100%;} #dicomViewSmallPop ::-webkit-slider-runnable-track {background:#4e4e4e;} #dicomViewSmallPop .dicom_area {width:calc(100% - 310px); display:flex; margin:0; position:relative; justify-content:center;} /* 페이징 */ #dicomViewSmallPop #div_dicomPage {width:500px; margin:0 auto; background:rgba(255,255,255,0.2); padding:5px 130px 5px 50px; border-radius:20px; position:absolute; left:50%; bottom:10px; z-index:10; transform:translate(-50%,0); display:flex; pointer-events:none;} #dicomViewSmallPop #div_dicomPage label#lab_inp_dicomPage {margin:5px 0; width:100px;} #dicomViewSmallPop #div_dicomPage label.form-label {margin:5px 0; width:100px; color:#fff;} #dicomViewSmallPop #div_dicomPage .form-range {width:calc(100% - 100px); margin-top:9px; pointer-events:auto;} #dicomViewSmallPop .owl-nav {display:flex; justify-content:space-between; position:absolute; left:50%; bottom:5px; width:64px; height:30px; margin:0 0 0 145px;} #dicomViewSmallPop .owl-carousel .owl-nav button.owl-prev, #dicomViewSmallPop .owl-carousel .owl-nav button.owl-next {height:30px; background:#000; transition:0.2s; width:30px; font-size:20px; line-height:34px; color:#666; margin:0;} #dicomViewSmallPop .owl-carousel .owl-nav button.owl-next {margin-left:4px;} #dicomViewSmallPop .owl-carousel .owl-nav button.owl-prev:hover, #dicomViewSmallPop .owl-carousel .owl-nav button.owl-next:hover {color:#0092ff;} /* ********** 기능영역 ********** */ #dicomViewSmallPop .card {box-shadow:3px 3px 10px rgba(0,0,0,0.255); display:block; background:#000; border:none; padding:10px; border-radius:10px; position:relative;} #dicomViewSmallPop .dicom_function {width:300px; height:auto; margin-right:0;} #dicomViewSmallPop .dicom_function .list-group > li.list-group-item {background-color:#333; margin-bottom:5px; color:#fff; border-color:#333; padding:5px 15px 10px; font-size:14px; line-height:20px; width:100%;} #dicomViewSmallPop .dicom_function .list-group > li.list-group-item .form-range-area {height:14px; margin-bottom:10px; background-image:linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); background-size: 25px 25px; background-position:-1px -1px; } #dicomViewSmallPop .dicom_function .list-group.ul_dicomList > li.list-group-item:hover {background:#555; border-color:#555;} #dicomViewSmallPop .dicom_function .list-group > li.list-group-item.active {background:#0d6efd; border-color:#0d6efd; transition:0.} #dicomViewSmallPop .dicom_function .daicom_btn_area {margin-top:30px; text-align:left; padding-left:20px;} #dicomViewSmallPop .dicom_function .daicom_btn_area span.txt {display:inline-block; color:#fff; font-size:14px; vertical-align:middle; margin-right:10px;} #dicomViewSmallPop .dicom_function .daicom_btn_area .btn_scale {display:inline-block; margin-right:10px; vertical-align:middle; padding-right:17px; position:relative;} #dicomViewSmallPop .dicom_function .daicom_btn_area .btn_scale:after {content:""; display:block; width:1px; height:24px; position:absolute; right:0; top:3px; background:#666;} #dicomViewSmallPop .dicom_function .daicom_btn_area .btn {padding:4px 8px;} #dicomViewSmallPop .daicom_btn_area .save_setting {padding-left:38px; margin-top:20px;} #dicomViewSmallPop .daicom_btn_area .save_setting button.btn_check {padding:0 18px 0 11px; display:inline-block; line-height:33px; border:1px solid #0092ff; color:#0092ff; transition:0.2s; background:#000; font-weight:700; text-align:center;} #dicomViewSmallPop .daicom_btn_area .save_setting button.btn_check i {margin-right:10px; color:#595959; transition:0.2s; font-size:18px; position:relative; top:3px;} #dicomViewSmallPop .daicom_btn_area .save_setting button.btn_check:disabled {color:#4e4e4e; border-color:#4e4e4e;} #dicomViewSmallPop .daicom_btn_area .save_setting button.btn_check.active {color:#fff; border-color:#0092ff; background:#0092ff; font-weight:400;} #dicomViewSmallPop .daicom_btn_area .save_setting button.btn_check.active i {color:#0048cb;} #dicomViewSmallPop .daicom_btn_area .save_setting button.btn_check:disabled {color:#4e4e4e; border-color:#4e4e4e; background:#000; font-weight:700;} #dicomViewSmallPop .daicom_btn_area .save_setting button.btn_check:disabled i {color:#595959;} /* *********************** 데이터 품질 측정 Popup *********************** */ #popDataQaulity {display:flex; justify-content:flex-start;} /* 좌측 선택 영역 */ #popDataQaulity > .ul_column_tabs {width:125px; flex-direction:column; border-bottom:none; padding:25px 0 25px 25px;} #popDataQaulity > .ul_column_tabs > li {width:100px; height:100px; margin-bottom:15px;} #popDataQaulity > .ul_column_tabs > li:last-child {margin-bottom:0;} #popDataQaulity > .ul_column_tabs > li > button {display:block; width:100%; height:100px; border:1px solid #9a9a9a; border-radius:3px; transition:0.3s; flex-direction:column; padding:13px; word-break:keep-all; text-align:left; font-size:15px;} #popDataQaulity > .ul_column_tabs > li > button:hover, #popDataQaulity > .ul_column_tabs > li > button.active {border-color:var(--color-button-active);} #popDataQaulity > .ul_column_tabs > li > button#divDuplicationBtn { background:url(../images/icon/icon_dq_tab1.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(232,234,238,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divDuplicationBtn:hover, #popDataQaulity > .ul_column_tabs > li > button#divDuplicationBtn:focus, #popDataQaulity > .ul_column_tabs > li > button#divDuplicationBtn.active { background:url(../images/icon/icon_dq_tab1.png), linear-gradient(to bottom, rgba(247,250,255,1) 0%,rgba(218,233,255,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divNullcheckBtn { background:url(../images/icon/icon_dq_tab2.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(232,234,238,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divNullcheckBtn:hover, #popDataQaulity > .ul_column_tabs > li > button#divNullcheckBtn:focus, #popDataQaulity > .ul_column_tabs > li > button#divNullcheckBtn.active { background:url(../images/icon/icon_dq_tab2.png), linear-gradient(to bottom, rgba(247,250,255,1) 0%,rgba(218,233,255,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divStatisticsBtn { background:url(../images/icon/icon_dq_tab3.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(232,234,238,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divStatisticsBtn:hover, #popDataQaulity > .ul_column_tabs > li > button#divStatisticsBtn:focus, #popDataQaulity > .ul_column_tabs > li > button#divStatisticsBtn.active { background:url(../images/icon/icon_dq_tab3.png), linear-gradient(to bottom, rgba(247,250,255,1) 0%,rgba(218,233,255,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } /* ********** 기존 사용 ID값 ********** */ #popDataQaulity > .ul_column_tabs > li > button#divOutlierDetectionBtn { background:url(../images/icon/icon_dq_tab4.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(232,234,238,1) 100%); background-repeat: no-repeat, no-repeat; background-position: bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divOutlierDetectionBtn:hover, #popDataQaulity > .ul_column_tabs > li > button#divOutlierDetectionBtn:focus, #popDataQaulity > .ul_column_tabs > li > button#divOutlierDetectionBtn.active { background:url(../images/icon/icon_dq_tab4.png), linear-gradient(to bottom, rgba(247,250,255,1) 0%,rgba(218,233,255,1) 100%); background-repeat: no-repeat, no-repeat; background-position: bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divDataConsistencyBtn { background:url(../images/icon/icon_dq_tab5.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(232,234,238,1) 100%); background-repeat: no-repeat, no-repeat; background-position: bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divDataConsistencyBtn:hover, #popDataQaulity > .ul_column_tabs > li > button#divDataConsistencyBtn:focus, #popDataQaulity > .ul_column_tabs > li > button#divDataConsistencyBtn.active { background:url(../images/icon/icon_dq_tab5.png), linear-gradient(to bottom, rgba(247,250,255,1) 0%,rgba(218,233,255,1) 100%); background-repeat: no-repeat, no-repeat; background-position: bottom 10px right 10px, left; } /* ********** 버튼 ID변경 - 추가 ********** */ #popDataQaulity > .ul_column_tabs > li > button#divOutlierBtn { background:url(../images/icon/icon_dq_tab4.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(232,234,238,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divOutlierBtn:hover, #popDataQaulity > .ul_column_tabs > li > button#divOutlierBtn:focus, #popDataQaulity > .ul_column_tabs > li > button#divOutlierBtn.active { background:url(../images/icon/icon_dq_tab4.png), linear-gradient(to bottom, rgba(247,250,255,1) 0%,rgba(218,233,255,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divConsistencyBtn { background:url(../images/icon/icon_dq_tab5.png), linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(232,234,238,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } #popDataQaulity > .ul_column_tabs > li > button#divConsistencyBtn:hover, #popDataQaulity > .ul_column_tabs > li > button#divConsistencyBtn:focus, #popDataQaulity > .ul_column_tabs > li > button#divConsistencyBtn.active { background:url(../images/icon/icon_dq_tab5.png), linear-gradient(to bottom, rgba(247,250,255,1) 0%,rgba(218,233,255,1) 100%); background-repeat:no-repeat, no-repeat; background-position:bottom 10px right 10px, left; } /* 그리드 영역 */ #popDataQaulity > #myTabColumnContent {width:calc(100% - 785px); position:relative; padding:25px; z-index:10; transition:width 0.2s ease-out; overflow:hidden;} #popDataQaulity > #myTabColumnContent:after {content:""; display:block; width:1px; height:100%; background:#ababab; position:absolute; right:0; top:0;} #popDataQaulity > #myTabColumnContent .btn_area {text-align:right; margin-top:25px;} /* 폴드 버튼 */ #popDataQaulity > #myTabColumnContent button.fold_data_btn {width:17px; height:35px; border:1px solid #ababab; border-right:1px solid #fff; border-radius:5px 0 0 5px; background:#fff; transition:0.3s; line-height:35px; position:absolute; right:0; top:13px; z-index:10; padding:0;} #popDataQaulity > #myTabColumnContent button.fold_data_btn i {font-size:12px; color:#000; transition:0.3s;} #popDataQaulity > #myTabColumnContent button.fold_data_btn:hover i {color:#2ac6f4;} /* 데이터 품질 측정 결과 */ #popDataQaulity > .div_graph {width:660px; min-height:450px; background:#fff; padding:25px; position:relative;} #popDataQaulity > .div_graph h3.dq_title {font-size:16px; font-weight:700; margin-bottom:15px;} #popDataQaulity > .div_graph .ul_graph_nav {border:none;} #popDataQaulity > .div_graph .ul_graph_nav li.nav-item .nav-link {color:#000; font-size:14px; font-weight:400; transition:0.2s; padding:0 13px; line-height:23px; height:25px; border:1px solid #a7a7a7; display:inline-block; margin:0 5px 7px 0; border-radius:0;} #popDataQaulity > .div_graph .ul_graph_nav li.nav-item .nav-link:hover, #popDataQaulity > .div_graph .ul_graph_nav li.nav-item .nav-link.active {background:#575757; color:#fff; border-color:#575757; font-weight:400;} /* 접기버튼 이벤트 */ #div_layer_popup.fold #popDataQaulity > #myTabColumnContent {width:0; padding-right:0; transition:width 0.8s ease-out;} #div_layer_popup.fold #popDataQaulity > #myTabColumnContent button.fold_data_btn i {transform:rotate(-180deg);} .null_data {position:absolute; left:50%; top:50%; display:inline-block; padding-top:70px; background:url(../images/board/no_data_null_img.png) no-repeat center top; font-size:16px; color:#333; text-align:center; transform:translate(-50%,-50%); background-size:auto 50px;} /*=========================================================================================================================== BI Dashboard =============================================================================================================================*/ .big_container .bi_dashboard_con .big_body {padding:25px 30px 25px 10px; letter-spacing:-0.5px;} .bi_dashboard_con .top_function .input-group .input-group-text {font-size:16px;} .bi_dashboard_con .top_function .input-group .input-group-text i {color:#adadad;} /* BI Tab */ .bi_dashboard_con ul.bi_tab {padding:0; margin:30px 0 5px; display:flex; justify-content:flex-start;} .bi_dashboard_con ul.bi_tab li {width:auto; list-style:none; padding:0; margin:0;} .bi_dashboard_con ul.bi_tab li button {padding:0 60px; border:none; background:none; outline:none; font-size:18px; font-weight:400; color:#000; line-height:40px;} .bi_dashboard_con ul.bi_tab li:first-child button {padding-left:0;} .bi_dashboard_con ul.bi_tab li button.active {font-weight:700;} .bi_dashboard_con ul.bi_tab li button:hover {font-weight:700; text-decoration:underline; text-underline-position:under;} /* BI 리스트 */ .bi_dashboard_con .bi_dashboard_lst {border:1px solid #dcdcdc; background:#fff; overflow:hidden; display:none;} .bi_dashboard_con .bi_dashboard_lst.active {display:block;} .bi_dashboard_lst ul.bd_lst_head {padding:0 13px 0 5px; margin:0; display:flex; justify-content:flex-start; box-shadow:0 0 30px rgba(0,0,0,0.1);} .bi_dashboard_lst ul.bd_lst_head li {padding:5px 0 0; margin:0; list-style:none; font-size:14px; font-weight:700; font-size:15px; line-height:35px;} .bi_dashboard_lst .bd_lst_body_con {padding:5px; font-size:15px;} .bi_dashboard_lst .bd_lst_body_con ::-webkit-scrollbar-track {background:transparent;} /* .bi_dashboard_lst ul.bd_lst_body {padding:15px 0 30px; margin:0; overflow-y:auto; max-height:235px;} */ .bi_dashboard_lst ul.bd_lst_body {padding:15px 0 30px; margin:0; min-height:340px;} .bi_dashboard_lst ul.bd_lst_body li {list-style:none; line-height:30px; padding:0; margin:0; display:flex; justify-content:start;} .bi_dashboard_lst ul.bd_lst_body li > div {width:auto; padding:0; margin:0; position:relative;} .bi_dashboard_lst ul.bd_lst_body li > div span.star:before {content:"\f005"; display:inline-block; position:absolute; left:25px; top:0px; color:#909090; font-family:"Font Awesome 6 Free"; font-weight:400; line-height:28px;} .bi_dashboard_lst ul.bd_lst_body li > div span.star.active:before {color:#ff5000; font-weight:700;} .bi_dashboard_lst ul.bd_lst_body li > div .m_check > input[type=checkbox] + label {padding-left:16px;} .bi_dashboard_lst ul.bd_lst_body li > div a {transition:0.2s; color:#000;} .bi_dashboard_lst ul.bd_lst_body li > div a:hover {font-weight:700; text-decoration:underline; text-underline-position:under; color:#000;} /* 최근 항목 */ .bi_dashboard_lst.lst_recently ul.bd_lst_head li:nth-child(1) {width:33%; padding-left:65px;} .bi_dashboard_lst.lst_recently ul.bd_lst_head li:nth-child(2) {width:22%;} .bi_dashboard_lst.lst_recently ul.bd_lst_head li:nth-child(3) {width:17%;} .bi_dashboard_lst.lst_recently ul.bd_lst_head li:nth-child(4) {width:14%;} .bi_dashboard_lst.lst_recently ul.bd_lst_head li:nth-child(5) {width:14%;} .bi_dashboard_lst.lst_recently ul.bd_lst_body li > div:nth-child(1) {width:33%; padding-left:65px;} .bi_dashboard_lst.lst_recently ul.bd_lst_body li > div:nth-child(2) {width:22%;} .bi_dashboard_lst.lst_recently ul.bd_lst_body li > div:nth-child(3) {width:17%;} .bi_dashboard_lst.lst_recently ul.bd_lst_body li > div:nth-child(4) {width:14%;} .bi_dashboard_lst.lst_recently ul.bd_lst_body li > div:nth-child(5) {width:14%;} /* 즐겨찾기 목록 */ .bi_dashboard_lst.lst_bookmark ul.bd_lst_head li:nth-child(1) {width:40%; padding-left:65px;} .bi_dashboard_lst.lst_bookmark ul.bd_lst_head li:nth-child(2) {width:40%;} .bi_dashboard_lst.lst_bookmark ul.bd_lst_head li:nth-child(3) {width:20%;} .bi_dashboard_lst.lst_bookmark ul.bd_lst_body li > div:nth-child(1) {width:40%; padding-left:65px;} .bi_dashboard_lst.lst_bookmark ul.bd_lst_body li > div:nth-child(2) {width:40%;} .bi_dashboard_lst.lst_bookmark ul.bd_lst_body li > div:nth-child(3) {width:20%;} /* 나와 공유 */ .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_head li:nth-child(1) {width:36%; padding-left:25px;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_head li:nth-child(2) {width:20%;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_head li:nth-child(3) {width:14%;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_head li:nth-child(4) {width:20%;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_head li:nth-child(5) {width:10%;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_body li > div:nth-child(1) {width:36%; padding-left:25px;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_body li > div:nth-child(2) {width:20%;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_body li > div:nth-child(3) {width:14%;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_body li > div:nth-child(4) {width:20%;} .bi_dashboard_lst.lst_shared_with_me ul.bd_lst_body li > div:nth-child(5) {width:10%;} /* 링크 관리 */ .bi_dashboard_lst.lst_link_manage ul.bd_lst_head li button.btn-delete i {position:relative; top:1px;} .bi_dashboard_lst.lst_link_manage ul.bd_lst_head li:nth-child(1) {width:100px; text-align:center;} .bi_dashboard_lst.lst_link_manage ul.bd_lst_head li:nth-child(2) {width:calc(20% - 100px);} .bi_dashboard_lst.lst_link_manage ul.bd_lst_head li:nth-child(3) {width:55%;} .bi_dashboard_lst.lst_link_manage ul.bd_lst_head li:nth-child(4) {width:5%;} .bi_dashboard_lst.lst_link_manage ul.bd_lst_body li > div:nth-child(1) {width:100px; text-align:center;} .bi_dashboard_lst.lst_link_manage ul.bd_lst_body li > div:nth-child(2) {width:calc(20% - 100px);} .bi_dashboard_lst.lst_link_manage ul.bd_lst_body li > div:nth-child(3) {width:55%;} .bi_dashboard_lst.lst_link_manage ul.bd_lst_body li > div:nth-child(4) {width:5%;} /* Template으로 시작하기 */ .bi_dashboard_con .bd_title {font-size:22px; font-weight:700; padding-right:120px; position:relative;} .bi_dashboard_con .bd_title small {font-size:16px; font-weight:300; display:inline-block; margin-left:25px;} .bi_dashboard_con .bd_title button.btn_toggle_suggest {position:absolute; right:0; top:0; padding:0; margin:0; outline:none; background:none; border:none; font-size:15px; transition:0.2s;} .bi_dashboard_con .bd_title button.btn_toggle_suggest i {display:inline-block; margin-right:10px; transform:rotate(0deg); transition:0.3s;} .bi_dashboard_con .bd_title button.btn_toggle_suggest.fold i {transform:rotate(-180deg);} /* 제안 내용 보기-숨기기 */ .bi_dashboard_con .bd_suggest_area {max-height:900px; transition:0.5s; padding:0 30px;} .bi_dashboard_con .bd_suggest_area.fold {max-height:0; overflow:hidden;} .bi_dashboard_con .bd_tag {padding-left:120px; position:relative; font-size:17px;} .bi_dashboard_con .bd_tag strong {display:inline-block; position:absolute; left:0; top:0; font-weight:400;} .bi_dashboard_con .bd_tag strong:before {content:"#"; display:inline-block;} .bi_dashboard_con .bd_tag ul {padding:0; margin:0;} .bi_dashboard_con .bd_tag ul li {list-style:none; padding:0; margin:0 30px 5px 0; display:inline-block;} .bi_dashboard_con .bd_tag ul li button {padding:0; margin:0; background:none; outline:none; border:none; transition:0.2s;} .bi_dashboard_con .bd_tag ul li button.active {font-weight:700;} .bi_dashboard_con .bd_tag ul li button:hover {font-weight:700; text-decoration:underline; text-underline-position:under;} /* 제안 템플릿 리스트(썸네일) */ .bi_dashboard_con ul.bd_thumnail_lst {padding:0; margin:0; display:flex; flex-wrap:wrap;} .bi_dashboard_con ul.bd_thumnail_lst > li {padding:0; margin:30px 40px 0 0; width:calc((100% - 160px) / 5); list-style:none; text-align:center;} .bi_dashboard_con ul.bd_thumnail_lst > li:nth-child(5n) {margin-right:0;} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail {position:relative; overflow:hidden; display:inline-block; width:auto; border-right:1px solid #dcdcdc; max-width:100%; min-width:140px;} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail:before {content:""; display:block; width:100%; height:0; background:rgba(0,0,0,0.3); position:absolute; left:0; bottom:0; transition:0.3s;} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail img {width:auto; height:190px; border:1px solid #dcdcdc; border-right:none;} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail button {position:absolute; width:120px; height:35px; border:2px solid #fff; outline:none; background:transparent; text-align:center; color:#fff; font-size:15px; font-weight:400; transition:0.2s; left:50%; margin-left:-60px; opacity:0; margin-top:20px;} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail button:hover {background:rgba(0,0,0,0.6);} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail button.tem_use {top:45px;} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail button.tem_preview {top:100px;} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail:hover:before {height:100%;} .bi_dashboard_con ul.bd_thumnail_lst li .thumnail:hover button {opacity:1; margin-top:0;} .bi_dashboard_con ul.bd_thumnail_lst li p {text-align:center; margin:8px 0 0; font-size:16px;} .bi_dashboard_con ul.bd_thumnail_lst li ul.tag_lst {text-align:center; margin:0; padding:0;} .bi_dashboard_con ul.bd_thumnail_lst li ul.tag_lst li {display:inline-block; margin-right:5px; list-style:none;} .bi_dashboard_con ul.bd_thumnail_lst li ul.tag_lst li button {font-size:16px; color:#878787; background:none; outline:none; border:none; transition:0.2s; padding:0; font-weight:300;} .bi_dashboard_con ul.bd_thumnail_lst li ul.tag_lst li button:before {content:"#"; display:inline-block;} .bi_dashboard_con ul.bd_thumnail_lst li ul.tag_lst li button:hover {color:#000; font-weight:700; text-decoration:underline; text-underline-position:under;} /* 대시보드 생성 팝업 */ button.btn_location {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left;} button.btn_location:hover {border-color:#2b58e6;} button.btn_location i {margin-right:5px;} /*=========================================================================================================================== BI-Dashboard2 =============================================================================================================================*/ /* 공통 */ button.btn_tool {display:inline-block; width:35px; height:35px; text-align:center; line-height:35px; border-radius:5px; background:none; border:none; outline:none; transition:0.2s; padding:0; margin:0; font-size:22px;} button.btn_tool:hover {background:#e1e1e1;} button.btn_tool + button.btn_tool {margin-left:5px;} button.btn_tool i {position:relative; top:2px;} /* */ button.btn_tool#btnToolBookmark.active {color:#ffb900;} button.btn_tool#btnToolBookmark.active .fa-star:before {font-weight:900;} .bd_builder_area {margin:-10px -20px 0;} /* 상단 영역 */ .bd_builder_area .bd_top {border-top:1px solid #ededed; border-bottom:1px solid #adadad; height:60px; background:#fff; padding:0 30px; position:relative; z-index:10;} .bd_builder_area .bd_top #bdTitle {font-size:18px; font-weight:700; margin:0; display:inline-block; margin-top:15px; vertical-align:top;} .bd_builder_area .bd_top #bdTitle i {cursor:help;} /* 상단 대시보드명 수정패널 */ .bd_builder_area .bd_top .dropdown_panel {position:absolute; left:0; top:60px; width:500px; padding:0 20px; border-radius:0 0 10px 10px; border:none; background:#fff; box-shadow:none; transition:0.5s; max-height:0; overflow:hidden;} .bd_builder_area .bd_top .dropdown_panel.active {max-height:1000px; padding:20px; border-color:#dcdcdc; box-shadow:5px 5px 10px rgba(0,0,0,0.1);} /* 상단 페이지명 수정패널 */ .bd_builder_area .bd_body .dropdown_panel {position:absolute; width:500px; padding:0 20px; border-radius:0 0 10px 10px; border:none; background:#fff; box-shadow:none; transition:0.5s; max-height:0; overflow:hidden;} .bd_builder_area .bd_body .dropdown_panel.active {max-height:1000px; padding:20px; border-color:#dcdcdc; box-shadow:5px 5px 10px rgba(0,0,0,0.1); z-index: 1000;} .bd_builder_area .bd_top .top_tool {display:inline-block; margin-left:80px; margin-top:12px; vertical-align:top;} .bd_builder_area .bd_top .top_right {float:right; line-height:56px; position:relative; height:59px;} .bd_builder_area .bd_top .top_right > span, .bd_builder_area .bd_top .top_right > button {vertical-align:middle; display:inline-block;} .bd_builder_area .bd_top .top_right span.status_info {margin-right:50px;} .bd_builder_area .bd_top .top_right span.devide {width:1px; height:20px; margin:0 20px 0 11px; background:#bfbfbf;} .bd_builder_area .bd_top .top_right button#btnDashPublish {margin-left:10px;} .bd_builder_area .bd_top .top_right button#btnResolution {margin:3px 0 0 5px; font-size:33px;} .bd_builder_area .bd_top .top_right .dash_resolution_size {position:absolute; bottom:0; right:0; width:200px; line-height:60px; padding:0; background:#fff; border-radius:0 0 10px 10px; transition:0.4s; box-shadow:0 5px 10px rgba(0,0,0,0.1); color:#000; font-size:18px; font-weight:700; text-align:center; border:1px solid transparent; border-top:none; border-top:none; overflow:hidden; height:0;} .bd_builder_area .bd_top .top_right .dash_resolution_size.active {height:60px; bottom:-61px; border:1px solid #adadad; border-top:none;} /* 작업 영역 */ .bd_builder_area .bd_body {padding:0 30px 30px; overflow-y:auto; overflow-x:hidden; position:relative;} /* 사이드바 */ .dashboard_area2 {width:100%; height:100%; position:relative; margin:0;} .dashboard_area2 #biDashNew {width:100%;} /* 작업영역 사이즈 조정 */ .bd_builder_area .resize_workspace {position:absolute; left:50%; top:30px; transform:translate(-50%,0); z-index:10;} .bd_builder_area .resize_workspace .form_control {display:inline-block; width:70px; text-align:center;} .bd_builder_area .resize_workspace .span {display:inline-block; margin:0 5px 0 5px; font-size:13px; line-height:20px;} /* 페이징 */ .bd_builder_area .bd_works_page {position:absolute; left:40%; top:14px; font-size:14px; display:inline-block;} .bd_builder_area .bd_works_page button {display:inline-block; margin:0; padding:0; width:25px; height:25px; border-radius:3px; background:transparent; transition:0.2s; text-align:center; line-height:25px; border:none; outline:none;} .bd_builder_area .bd_works_page button:hover {background:#e1e1e1;} .bd_builder_area .bd_works_page span.page {font-size:15px; letter-spacing:-1px; display:inline-block;} .bd_builder_area .bd_works_page span.page span {display:inline-block; margin:0;} /* ******************************** 공통 ******************************** */ #biDashNew {width:100%; height:100%;} #biDashNew:after {content:""; display:block; clear:both; width:100%; height:0; float:none;} #biDashNew .card {border:none; box-shadow:3px 3px 10px rgba(0,0,0,0.1); border-radius:0; display:inline-flex;} #biDashNew .card .card {box-shadow:none;} #biDashNew .card .card-body {padding:13px 14px; overflow-y:auto;} #biDashNew #bd_tool_panel.card .card-body {padding:20px; overflow-y:auto; height:calc(100% - 45px);} #biDashNew .input-group {margin-bottom:0;} #biDashNew .input-group + .input-group {margin-top:10px;} #biDashNew .input-container {position:relative; display:inline-block; width:100%;} #biDashNew .input-container input {width:100%; padding-left:30px; box-sizing:border-box;} #biDashNew .input-container i {position:absolute; left:10px; top:50%; transform:translateY(-50%); pointer-events:none;} #biDashNew div.text_content strong.txt_num{white-space:nowrap;} #biDashNew .gridArea {height:100% !important; width:100% !important;} #biDashNew .gridArea:hover {border-color:red !important;} /* panel 상단영역 */ #biDashNew #bd_tool_panel .card-header {padding:5px; margin-bottom:0; color:#000; background-color:#f1f1f1; border-bottom:none; position:relative; height:45px; border-radius:10px 10px 0 0;} #biDashNew h3.card-title {margin:0; font-size:16px; font-weight:700; min-width:200px; padding:0 10px; line-height:35px;} #biDashNew h3.card-title i {font-size:14px; margin-right:10px;} #biDashNew .card-header .btn_search {width:30px; height:30px; border:none; background:none; outline:none; margin-top:2px; text-align:center; line-height:30px; transition:0.2s; border-radius:5px; line-height:30px;} #biDashNew .card-header .btn_search:hover {background:#e1e1e1;} #biDashNew .card-header .input_search {display:inline-block; width:calc(100% - 70px); height:30px; border:1px solid #ddd; margin-top:2px; padding:0 10px; line-height:28px; transition:0.2s;} #biDashNew .card-header .input_search:hover, #biDashNew .card-header .input_search:focus {border-color:#2b58e6;} #biDashNew .card-header .btn_type {display:none; margin-top:2px; width:30px; height:30px; border:none; background:none; outline:none; font-size:16px; text-align:center; line-height:30px; border-radius:5px; transition:0.2s; line-height:30px;} #biDashNew .card-header .btn_type:hover {background:#e1e1e1;} #biDashNew .card-header .btn_type.active {display:inline-block;} /* *********************** 작업 영역 *********************** */ #biDashNew .bd_work_area {width:100%; height:calc(100% - 46px); transition:0.5s; background:transparent; box-shadow:none; overflow:auto; display:block; position:relative; z-index:5;} /* 작업영역 노드 아이콘 */ #biDashNew .bd_work_area ul.df_btn_area {position:absolute; left:10px; top:-33px; padding:0; margin:0; box-shadow:5px 5px 10px rgba(0,0,0,0.1); background:#fff; border-radius:5px; overflow:hidden; display:none;} #biDashNew .grid-stack .selectable:hover {z-index:100;} #biDashNew .grid-stack .selectable:hover ul.df_btn_area {display:flex;} #biDashNew .bd_work_area ul.df_btn_area li {width:30px; height:30px; list-style:none;} #biDashNew .bd_work_area ul.df_btn_area li button {padding:0; margin:0; width:100%; height:30px; line-height:30px; background:none; text-align:center; border:none; outline:none; transition:0.2s;} #biDashNew .bd_work_area ul.df_btn_area li button:hover {background:#e1e1e1;} /* 작업영역 상단 */ #biDashNew .bd_work_top {margin:0 0 6px; padding-top:10px;} #biDashNew .bd_work_top h3 {display:inline-block; font-size:16px; font-weight:500; margin:0; position:relative; bottom:-3px;} #biDashNew .bd_work_top h3 i {margin-right:10px;} #biDashNew .bd_work_top .bd_work_tool {height:30px; border-radius:7px; border:1px solid #ddd; display:inline-block; background:#fff; vertical-align:middle; margin-left:30px; padding:0 10px; position:relative; bottom:1px;} #biDashNew .bd_work_top .bd_work_tool button.tool_btn {margin-top:1px; width:25px; height:25px; font-size:16px; line-height:25px;} #biDashNew .bd_work_top .bd_work_tool button.tool_btn:last-child {margin-right:0;} #biDashNew .bd_work_top .bd_work_tool button.tool_btn + .tool_btn {margin-left:0;} /* 실 작업 영역 - resizabled */ #biDashNew .bd_work_area > .card-body {overflow:hidden; padding:0 0 25px; width:100%; height:auto; border-radius:10px; border:1px solid #dcdcdc; position:relative; background:#fff;} #biDashNew .bd_work_area > .card-body:before {content:""; display:block; width:100%; height:0; border-bottom:1px dashed #2a93ff; position:absolute; left:0; top:900px;} #biDashNew .bd_work_area > .card-body:after {content:"height : 900px"; display:inline-block; position:absolute; left:50%; top:880px; font-size:14px; transform:translate(-50%,0); color:#2a93ff;} #biDashNew .bd_work_area > .card-body .ui-resizable-handle.ui-resizable-s {cursor:s-resize; width:100%; height:25px; left:0; bottom:0; background:url("../images/dashboard/btn_resize_dot.png") no-repeat center center; transition:0.3s;} #biDashNew .bd_work_area > .card-body .ui-resizable-handle.ui-resizable-s:hover {background:url("../images/dashboard/btn_resize_dot_hover.png") no-repeat center center;} /* 그리드스택 영역 */ #biDashNew .bd_work_area [id*="div_gridStack"] {height:100% !important; min-height:calc(100vh - 163px);} #biDashNew .bd_work_area [id*="div_gridStack"]:before { position:absolute; top:0px; left:0px; right:0px; bottom:0px; content:""; background-size:calc((100vw - 110px) / 100) calc((100vw - 110px) / 100); background-position:0 0;} #biDashNew .bd_work_area [id*="div_gridStack"].grid_stack50:before {background-size:calc((100vw - 110px) / 50) calc((100vw - 110px) / 50);} #biDashNew .bd_work_area [id*="div_gridStack"].grid_stack100:before {background-size:calc((100vw - 110px) / 100) calc((100vw - 110px) / 100);} #biDashNew .bd_work_area [id*="div_gridStack"].grid_stack150:before {background-size:calc((100vw - 110px) / 150) calc((100vw - 110px) / 150);} #biDashNew .bd_work_area [id*="div_gridStack"].grid_stack200:before {background-size:calc((100vw - 110px) / 200) calc((100vw - 110px) / 200);} /* ********** Item ********** */ #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item {padding:10px;} /* #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item > div {border:1px solid #dcdcdc;} */ #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item > div.ui-resizable-handle {border:none; background-color:rgba(255,255,255,0.5); border-radius:5px;} /* chart*/ #biDashNew [id*="div_gridStack"] .card.chart {border:1px solid #dcdcdc;} /* file Download */ #biDashNew [id*="div_gridStack"] .fileDownload .file_name {display:flex; justify-content:center; width:90px;} #biDashNew [id*="div_gridStack"] .fileDownload .file_name .bi-file-earmark-plus {font-size:26px;} #biDashNew [id*="div_gridStack"] .fileDownload .file_name .bi-file-earmark-plus .fileName {font-size:12px; margin-bottom:0; display:block;} #biDashNew [id*="div_gridStack"] .fileDownload .file_txt {width:calc(100% - 150px);} #biDashNew [id*="div_gridStack"] .fileDownload .file_txt .file_title {font-size:18px; font-weight:400; line-height:24px; margin-bottom:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} #biDashNew [id*="div_gridStack"] .fileDownload .file_txt .file_info {font-size:12px; font-weight:400; margin-bottom:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} #biDashNew [id*="div_gridStack"] .fileDownload .file_down {display:flex; justify-content:center; width:75px;} #biDashNew [id*="div_gridStack"] .fileDownload .file_down button.file_down_btn {font-size:30px; width:50px; height:50px; border:none; border-radius:25px; transition:0.3s; background:#0d6efd; color:#fff; text-align:center; line-height:50px;} #biDashNew [id*="div_gridStack"] .fileDownload .file_down button.file_down_btn:hover {background:var(--color-button-active);} /* Text */ #biDashNew [id*="div_gridStack"] .text_content {display:block; height:100%; padding:15px;} #biDashNew [id*="div_gridStack"] .text_content .title {font-size:20px; font-weight:700; margin-bottom:0; line-height:28px;} #biDashNew [id*="div_gridStack"] .text_content .sub_title {font-size:14px; margin-bottom:0; line-height:20px;} /* Contents */ #biDashNew [id*="div_gridStack"] .card.Contents {border:1px solid #dcdcdc;} #biDashNew [id*="div_gridStack"] .list-group.list-group-flush .carousel-item p {margin-bottom:0;} /* ********************************* 작업영역 추가 수정 - 240725 ********************************* */ /* ************************ 우측 영역 ************************ */ #biDashNew [id*="div_gridStack"].grid-stack pre.editable {font-family:"Pretendard", "KoPubWorldDotum";} /* ********** Item ********** */ #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item {padding:0; border:none;} #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item:hover {border:none;} /* #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item > div {border:1px solid #dcdcdc;} */ /* #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item > div.ui-resizable-handle {border:none; background-color:rgba(255,255,255,0.5); border-radius:5px; right:0; bottom:0;} */ #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item > div.ui-resizable-handle {border:none; background-color:rgba(255,255,255,0.5); border-radius:5px;} #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item > div.clearfix {border:none;} #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item pre {overflow:visible;} /* chart*/ #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item.Chart {border:1px solid #dcdcdc;} #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item.Chart ul.panel_toolbox {right:0 !important; top:-27px !important;} /* table */ #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item.dataTables_wrapper {background:transparent; padding-top:20px;} #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item.dataTables_wrapper ul.panel_toolbox {right:0 !important; top:-27px !important;} /* PivotTable */ #biDashNew .card.PivotTable.grid-stack-item {background:transparent;} /* 필터박스 */ #biDashNew .card.Filter.grid-stack-item {background:transparent;} #biDashNew .card.Filter.grid-stack-item > div.row {border:none; padding:0; margin:0;} #biDashNew .card.Filter.grid-stack-item pre.editable {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:400; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDashNew .card.Filter.grid-stack-item select.filter_selection {border-radius:0; border:1px solid #dcdcdc; height:calc(100% - 35px);} #biDashNew .card.Filter.grid-stack-item .ui-resizable-handle {right:0; bottom:0;} /* 필터박스 - 체크 */ #biDashNew .card.FilterCheck.grid-stack-item {background:transparent;} #biDashNew .card.FilterCheck.grid-stack-item > div.row {border:none; padding:0; margin:0;} #biDashNew .card.FilterCheck.grid-stack-item pre.editable.title {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:500; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDashNew .card.FilterCheck.grid-stack-item .filter_check_selection {border-radius:0; border:1px solid #e1e1e1; height:calc(100% - 35px); padding:10px 15px 15px; overflow-y:auto; background:#fff;} #biDashNew .card.FilterCheck.grid-stack-item .ui-resizable-handle {right:0; bottom:0;} #biDashNew .card.FilterCheck.grid-stack-item .m_check {margin-right:20px;} #biDashNew .card.FilterCheck.grid-stack-item .m_check + .m_check {margin-left:0;} #biDashNew .card.FilterCheck.grid-stack-item .m_check:last-child {margin-right:0;} #biDashNew .card.FilterCheck.grid-stack-item .m_check > input[type=checkbox] + label {font-size:14px;} /* 필터박스 - 라디오 */ #biDashNew .card.FilterRadio.grid-stack-item {background:transparent;} #biDashNew .card.FilterRadio.grid-stack-item > div.row {border:none; padding:0; margin:0;} #biDashNew .card.FilterRadio.grid-stack-item pre.editable.title {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:500; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDashNew .card.FilterRadio.grid-stack-item .filter_radio_selection {border-radius:0; border:1px solid #e1e1e1; height:calc(100% - 35px); padding:10px 15px 15px; overflow-y:auto; background:#fff;} #biDashNew .card.FilterRadio.grid-stack-item .ui-resizable-handle {right:0; bottom:0;} #biDashNew .card.FilterRadio.grid-stack-item .m_radio {margin-right:15px;} #biDashNew .card.FilterRadio.grid-stack-item .m_radio + .m_radio {margin-left:0;} #biDashNew .card.FilterRadio.grid-stack-item .m_radio:last-child {margin-right:0;} #biDashNew .card.FilterRadio.grid-stack-item .m_radio > input[type=radio] + label {font-size:14px;} /* 달력 */ #biDashNew .card.CalendarFilter.grid-stack-item {background:transparent;} #biDashNew .card.CalendarFilter.grid-stack-item div.row {border:none; padding:0; margin:0;} #biDashNew .card.CalendarFilter.grid-stack-item pre.editable {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:400; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDashNew .card.CalendarFilter.grid-stack-item input.calendar_selection {border-radius:0; border:1px solid #dcdcdc; height:calc(100% - 35px); background:#fff;} #biDashNew .card.CalendarFilter.grid-stack-item .ui-resizable-handle {right:0; bottom:0;} /* 실행버튼 */ #biDashNew .grid-stack > .grid-stack-item.ExecuteFilters {padding:20px 0 0 !important;} #biDashNew .grid-stack > .grid-stack-item.ExecuteFilters .btn {height:100%; border-radius:5px;} /* file Download */ #biDashNew .fileDownload .file_name {display:flex; justify-content:center; width:90px; padding-top:12px;} #biDashNew .fileDownload .file_name .bi-file-earmark-plus {font-size:26px;} #biDashNew .fileDownload .file_name .bi-file-earmark-plus .fileName {font-size:12px; margin-bottom:0; display:block;} #biDashNew .fileDownload .file_txt {width:calc(100% - 150px);} #biDashNew .fileDownload .file_txt .file_title {font-size:18px; font-weight:500; line-height:24px; margin-bottom:5px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} #biDashNew .fileDownload .file_txt .file_info {font-size:12px; font-weight:400; margin-bottom:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;} #biDashNew .fileDownload .file_down {display:flex; justify-content:center; width:75px;} #biDashNew .fileDownload .file_down button.file_down_btn {font-size:30px; width:50px; height:50px; border:none; border-radius:25px; transition:0.3s; background:#0d6efd; color:#fff; text-align:center; line-height:50px;} #biDashNew .fileDownload .file_down button.file_down_btn:hover {background:var(--color-button-active);} /* Text */ #biDashNew .text_content {display:block; height:100%; padding:15px;} #biDashNew .text_content .title {font-size:20px; font-weight:700; margin-bottom:0; line-height:28px;} #biDashNew .text_content .sub_title {font-size:14px; margin-bottom:0; line-height:20px;} #biDashNew [id*="div_gridStack"] .text_content {display:flex; align-items:center;} #biDashNew [id*="div_gridStack"].grid-stack > .grid-stack-item.Text .text_content {background:#fff;} /* Contents */ #biDashNew .card.Contents {border:1px solid #dcdcdc;} /* carousel */ #biDashNew .list-group.list-group-flush .carousel-item p {margin-bottom:0;} /* dataTable */ #biDashNew [id*="div_gridStack"] .dataTables_wrapper {overflow:scroll;} /* 목록 */ #biDashNew [id*="div_gridStack"] ol.pages li:before {content:counter(item); counter-increment:item;} /* toast Grid */ #biDashNew [id*="div_gridStack"] .tui-grid-body-area {max-height:300px; overflow-y:auto;} #biDashNew [id*="div_gridStack"] .tui-grid-container {overflow:hidden;} #biDashNew [id*="div_gridStack"] .tui-grid-rside-area {display:contents;} /* 옵션 메뉴 */ #biDashNew .tab_big.option_select_nav {display:flex; flex-wrap:nowrap; flex:0 0 auto;} /* 달력 */ #biDashNew #biDashNew [id*="div_gridStack"].grid-stack>.grid-stack-item.CalendarFilter pre.editable {font-family:"Pretendard", "KoPubWorldDotum"; font-size:17px; font-weight:400; padding:5px 0 0 5px; margin-bottom:10px; height:25px; line-height:25px;} #biDashNew #biDashNew [id*="div_gridStack"].grid-stack>.grid-stack-item.CalendarFilter input.calendar_selection {border-radius:0; border:1px solid #dcdcdc; height:calc(100% - 35px);} #biDashNew [id*="div_gridStack"].grid-stack>.grid-stack-item pre {overflow:visible;} #biDashNew .element-padding:hover {border:1px #000 solid;} #biDashNew #tagsSearch {float:right; position:relative; top:-5px; justify-content:flex-end;} #biDashNew #bdt_detail_tag .form_item span {display:inline-block; background:#f3faff; color:#2b85ff; font-size:12px; padding:0px 6px; border-radius:5px; line-height:20px; margin-right:3px; height:20px; border:1px solid #2b85ff; margin-bottom:5px;} #biDashNew hr {border:revert-layer !important; border-top:revert-layer !important; margin:0; display:block; float:unset; clear:unset; height:revert-layer !important; padding:initial !important;} #biDashNew [id^="listULItem"], #biDashNew [id^="listOLItem"] {overflow:auto;} #biDashNew [id^="listULItem"] li, #biDashNew [id^="listOLItem"] li {margin-bottom:5px;} #biDashNew [id^="listULItem"] input, #biDashNew [id^="listOLItem"] input {width:100%; border:1px solid transparent; background-color:transparent;} #biDashNew [id^="listULItem"] input:hover, #biDashNew [id^="listULItem"] input:focus, #biDashNew [id^="listOLItem"] input:hover, #biDashNew [id^="listOLItem"] input:focus {border:1px solid red;} #biDashNew [id^="listToggleItem"] input {width:calc(100% - 15px); border:1px solid transparent; background-color:transparent;} /* counter 초기화 */ #biDashNew [id^="listOLItem"] {counter-reset:item;} /* 각 li 요소의 숫자 스타일 설정 */ #biDashNew [id^="listOLItem"] li {counter-increment:item;} #biDashNew [id^="listToggleItem"] textarea {width:100%; border:1px solid transparent; background-color:transparent;} #biDashNew .bold {font-weight:bold !important;} #biDashNew .italic {font-style:italic !important;} #biDashNew .underline {text-decoration:underline !important;} #biDashNew .textLeft {text-align:left !important;} #biDashNew .textCenter {text-align:center !important;} #biDashNew .textRight {text-align:right !important;} #biDashNew #bdt_detail_setting h5.do_title {font-size:16px; margin:0 0 7px; line-height:18px; color:#000; font-weight:700; position:relative;} #biDashNew #bdt_detail_setting .do_item:first-child {border-top:none;} #biDashNew #bdt_detail_setting .do_item {padding:15px 0; border-top:1px solid #dcdcdc;} /* *********************** 작업 툴 판넬 *********************** */ /* Tool 버튼 */ #biDashNew .bd_tool_btn {height:45px; border-radius:0 0 10px 10px; box-shadow:0 10px 15px rgba(0,0,0,0.1); display:inline-block; background:#fff; position:absolute; top:0; right:0; padding:0 10px; display:flex; justify-content:space-between; min-width:440px; min-width:400px;} #biDashNew button.tool_btn {display:inline-block; margin:5px 0 0 0; padding:0; border:none; width:35px; height:35px; text-align:center; line-height:35px; outline:none; transition:0.2s; background:#fff; border-radius:5px; font-size:22px; color:#000; vertical-align:top;} #biDashNew button.tool_btn img {position:relative; left:1px;} #biDashNew button.tool_btn#btnToolGrid {background:url(../images/dashboard/icon_tool_grid.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolImg {background:url(../images/dashboard/icon_tool_img.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolTxt {background:url(../images/dashboard/icon_tool_txt.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolLst {background:url(../images/dashboard/icon_tool_lst.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolChart {background:url(../images/dashboard/icon_tool_chart.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolData {background:url(../images/dashboard/icon_tool_data.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolTem {background:url(../images/dashboard/icon_tool_tem.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolKpi {background:url(../images/dashboard/icon_tool_tem.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolPage {background:url(../images/dashboard/icon_tool_page.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolSetting {background:url(../images/dashboard/icon_tool_setting.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolGrid.active {background:url(../images/dashboard/icon_tool_grid_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolImg.active {background:url(../images/dashboard/icon_tool_img_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolTxt.active {background:url(../images/dashboard/icon_tool_txt_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolLst.active {background:url(../images/dashboard/icon_tool_lst_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolChart.active {background:url(../images/dashboard/icon_tool_chart_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolData.active {background:url(../images/dashboard/icon_tool_data_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolTem.active {background:url(../images/dashboard/icon_tool_tem_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolKpi.active {background:url(../images/dashboard/icon_tool_tem_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolPage.active {background:url(../images/dashboard/icon_tool_page_active.png) no-repeat center center;} #biDashNew button.tool_btn#btnToolSetting.active {background:url(../images/dashboard/icon_tool_setting_active.png) no-repeat center center;} #biDashNew button.tool_btn i {position:relative; top:2px;} #biDashNew button.tool_btn:hover {background-color:#e1e1e1 !important;} #biDashNew button.tool_btn.active {color:#54b9ff;} #biDashNew button.tool_btn#btnToolSetting {margin-right:0;} #biDashNew .bd_tool_btn span.devide {display:inline-block; width:0; border-right:1px solid #d9d9d9; height:20px; vertical-align:middle; margin:15px 2px 0 1px;} /* 판넬 */ #biDashNew #bd_tool_panel {width:auto; transition:0.5s; position:absolute; right:0; top:45px; height:calc(100% - 46px); border:none; border-radius:0; box-shadow:none; z-index:10; background:none;} /* 우측 툴 상세 */ #biDashNew #bd_tool_panel .bdt_detail {display:none; height:100%; width:400px; border:1px solid #dcdcdc; border-radius:10px; box-shadow:3px 3px 10px rgba(0,0,0,0.1); background:#fff;} #biDashNew #bd_tool_panel .bdt_detail.active {display:block;} /* *********************************** 차트 디테일 ***************************************** */ #biDashNew #bd_tool_panel #bdt_detail_chart.bdt_detail {width:calc(100vw - 110px);} .nav-md #biDashNew #bd_tool_panel #bdt_detail_chart.bdt_detail {width:calc(100vw - 359px);} #biDashNew #bd_tool_panel #bdt_detail_chart .card-header {background-color:#fff; border-bottom:1px solid #adadad;} #biDashNew #bd_tool_panel #bdt_detail_chart.bdt_detail .detail_chart_tit_btn {float:right; min-width:100px; margin-top:5px;} #biDashNew #bd_tool_panel #bdt_detail_chart.bdt_detail .chart_body {display:flex; justify-content:space-between; padding:0;} #bdt_detail_chart.bdt_detail .chart_panel_left {width:260px; padding:20px; border-right:1px solid #dcdcdc;} #bdt_detail_chart.bdt_detail .chart_panel_left .chart_lst_option {height:calc(100% - 45px);} #bdt_detail_chart.bdt_detail .chart_panel_left .chart_lst_option .tab-option {height:100%;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst {padding:0; margin:0; border:none; display:block; height:100%;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst > li {display:block; width:100%; list-style:none;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst > li.scroll_li {height:calc(100% - 125px); overflow-y:auto; width:calc(100% + 8px);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst > li.fixed_li:before {content:""; display:block; width:100%; height:1px; background:#d9d9d9; margin:20px 0;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst ul.lst {padding:0; margin:0; border:none; display:flex; width:100%; flex-wrap:wrap;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst > li.fixed_li ul.lst {padding-right:0;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst ul.lst li {width:66px; margin:0 10px 10px 0; list-style:none;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst ul.lst li:nth-child(3n) {margin-right:0;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst ul.lst li a {padding:47px 0 0 0; margin:0; border:none; color:#000; font-size:13px; transition:0.3s; background:none; display:block; text-align:center; border-radius:0; position:relative; letter-spacing:-1px;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.active, #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a:hover {border:none; color:var(--color-button-active); background:none;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a:before {content:""; display:block; width:60px; height:40px; border-radius:5px; background-color:#fff; transition:0.3s; position:absolute; left:4px; top:0; background-repeat:no-repeat; background-position:center center; background-size:auto 26px; border:1px solid #dcdcdc;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a:hover:before, #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.active:before {background-color:#eeeeee; border-color:#929292;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_line:before {background-image:url(../images/widgets/chart_icon3/line.png); background-size:auto 15px;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_bar:before {background-image:url(../images/widgets/chart_icon3/bar.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_combo:before {background-image:url(../images/widgets/chart_icon3/combo.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_area:before {background-image:url(../images/widgets/chart_icon3/area.png); background-size:auto 22px;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_pie:before {background-image:url(../images/widgets/chart_icon3/pie.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_scatter:before {background-image:url(../images/widgets/chart_icon3/scatter.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_row:before {background-image:url(../images/widgets/chart_icon3/row.png); background-size:auto 20px;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_waterfall:before {background-image:url(../images/widgets/chart_icon3/waterfall.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_radar:before {background-image:url(../images/widgets/chart_icon3/radar.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_boxplot:before {background-image:url(../images/widgets/chart_icon3/boxplot.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_funnel:before {background-image:url(../images/widgets/chart_icon3/funnel.png); background-size:auto 21px;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_gauge:before {background-image:url(../images/widgets/chart_icon3/gauge.png); background-size:auto 20px;} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_candlestick:before {background-image:url(../images/widgets/chart_icon3/candlestick.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_heatmap:before {background-image:url(../images/widgets/chart_icon3/heatmap.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_tree:before {background-image:url(../images/widgets/chart_icon3/tree.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_sankey:before {background-image:url(../images/widgets/chart_icon3/sankey.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_sunburst:before {background-image:url(../images/widgets/chart_icon3/sunburst.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_themeriver:before {background-image:url(../images/widgets/chart_icon3/themeriver.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_treemap:before {background-image:url(../images/widgets/chart_icon3/treemap.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_polarbar:before {background-image:url(../images/widgets/chart_icon3/polarbar.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_polarline:before {background-image:url(../images/widgets/chart_icon3/polarline.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_polarscatter:before {background-image:url(../images/widgets/chart_icon3/polarscatter.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_map:before {background-image:url(../images/widgets/chart_icon3/map.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_ranking:before {background-image:url(../images/widgets/chart_icon3/ranking.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_table:before {background-image:url(../images/widgets/chart_icon3/table.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_pivot_table:before {background-image:url(../images/widgets/chart_icon3/pivot_table.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_compare:before {background-image:url(../images/widgets/chart_icon3/compare.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_dispersion:before {background-image:url(../images/widgets/chart_icon3/dispersion.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_configuration:before {background-image:url(../images/widgets/chart_icon3/configuration.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_relationship:before {background-image:url(../images/widgets/chart_icon3/relationship.png);} #bdt_detail_chart.bdt_detail .chart_panel_left ul.chart_lst li a.cs_kpi:before {background-image:url(../images/widgets/chart_icon3/kpi.png);} #bdt_detail_chart.bdt_detail .chart_panel_right {width:calc(100% - 290px); padding:20px 20px 20px 0;} .chart_panel_right .chart_lst_result {height:100%;} .chart_panel_right .chart_lst_result .tab-pane {height:100%;} .chart_panel_right .chart_lst_result h3.cl_title {margin:0; position:relative; line-height:29px; font-weight:700; height:30px; margin-bottom:10px; display:flex; justify-content:space-between;} .chart_panel_right .chart_lst_result h3.cl_title strong {font-size:20px; display:inline-block;} .chart_panel_right .chart_lst_result h3.cl_title .tit_btn_area {display:inline-block;} .chart_panel_right .chart_lst_result h3.cl_title .tit_btn_area button {display:inline-block; margin:0; padding:0; border:none; width:auto; height:32px; text-align:center; line-height:30px; outline:none; transition:0.2s; background:#fff; border-radius:5px; font-size:22px; color:#000; vertical-align:top; font-size:16px; font-weight:400;} .chart_panel_right .chart_lst_result h3.cl_title .tit_btn_area button:hover {background-color:#e1e1e1;} .chart_panel_right .chart_lst_result h3.cl_title .tit_btn_area button.btn_chart_data {padding:0 10px 0 40px; background:#fff url(../images/dashboard/icon_tool_data.png) no-repeat 10px center;} .chart_panel_right .chart_lst_result h3.cl_title .tit_btn_area button.btn_chart_data:hover {background:#e1e1e1 url(../images/dashboard/icon_tool_data.png) no-repeat 10px center;} .chart_panel_right .chart_lst_result h3.cl_title .tit_btn_area button.btn_refresh {width:30px; margin-left:10px;} .chart_panel_right .chart_lst_result .chart_lst {padding:20px; margin:0; background:#f4f4f4; border:1px solid #dcdcdc; border-radius:10px; overflow-y:auto; height:calc(100% - 40px); display:flex; flex-wrap:wrap; justify-content:flex-start; align-content:flex-start;} .chart_panel_right .chart_lst_result .chart_lst h4 {width:100%; margin:10px 0; font-size:18px; font-weight:500;} .chart_panel_right .chart_lst_result .chart_lst div {padding:10px; border-radius:5px; background:#fff; border:1px solid #dcdcdc; width:23.5%; margin:0 2% 20px 0; height:auto; transition:0.3s; text-align:center;} .chart_panel_right .chart_lst_result .chart_lst div:nth-child(4n) {margin-right:0;} .chart_panel_right .chart_lst_result .chart_lst div:hover {border-color:var(--color-button-active);} .chart_panel_right .chart_lst_result .chart_lst div a {display:block; overflow:hidden; aspect-ratio:16 / 9; text-align:center;} .chart_panel_right .chart_lst_result .chart_lst div a img {height:100%; width:auto;} /* folding */ .dashboard_area2.folding #biDashNew .bd_work_area {width:100%;} .dashboard_area2.folding #biDashNew #bd_tool_panel {right:calc(-100% - 30px);} /* 페이지 패널 스타일 */ #biDashNew #bdt_detail_page.bdt_detail ol.pages {padding:0;} #biDashNew #bdt_detail_page.bdt_detail ol.pages {counter-reset:item; list-style-type:none; /* 순서 없는 목록 스타일을 사용합니다. */} #biDashNew #bdt_detail_page.bdt_detail ol.pages li {display:block;padding-left:20px; /* 왼쪽 여백을 조절하여 번호와 컨텐츠를 정렬합니다. */ position:relative;} #biDashNew #bdt_detail_page.bdt_detail ol.pages li:before {position:absolute; left:0; font-weight:400;} #biDashNew #bdt_detail_page.bdt_detail ol.pages li.active:before {color:#2b58e6; font-weight:600;} #biDashNew #bdt_detail_page.bdt_detail ol.pages li:hover div {--bs-border-width:2px;} #biDashNew #bdt_detail_page.bdt_detail ol.pages li.active div {border-color:#2b58e6 !important;} /* *********************************** 템플릿 디테일 ***************************************** */ #biDashNew #bd_tool_panel #bdt_detail_tem.bdt_detail {width:1130px;} .bd_tem_area .bd_tag {padding-left:120px; position:relative; font-size:17px;} .bd_tem_area .bd_tag strong {display:inline-block; position:absolute; left:0; top:0; font-weight:500;} .bd_tem_area .bd_tag strong:before {content:"#"; display:inline-block;} .bd_tem_area .bd_tag ul {padding:0; margin:0;} .bd_tem_area .bd_tag ul li {list-style:none; padding:0; margin:0 30px 5px 0; display:inline-block;} .bd_tem_area .bd_tag ul li button {padding:0; margin:0; background:none; outline:none; border:none; transition:0.2s;} .bd_tem_area .bd_tag ul li button.active {font-weight:700;} .bd_tem_area .bd_tag ul li button:hover {font-weight:700; text-decoration:underline; text-underline-position:under;} /* 제안 템플릿 리스트(썸네일) */ .bd_tem_area ul.bd_thumnail_lst {padding:0; margin:0; display:flex; flex-wrap:wrap;} .bd_tem_area ul.bd_thumnail_lst > li {padding:0; margin:30px 30px 0 0; width:calc((100% - 60px) / 3); list-style:none; text-align:center;} .bd_tem_area ul.bd_thumnail_lst > li:nth-child(3n) {margin-right:0;} .bd_tem_area ul.bd_thumnail_lst li .thumnail {position:relative; overflow:hidden; display:inline-block; width:auto; border-right:1px solid #dcdcdc; max-width:100%; min-width:140px;} .bd_tem_area ul.bd_thumnail_lst li .thumnail:before {content:""; display:block; width:100%; height:0; background:rgba(0,0,0,0.3); position:absolute; left:0; bottom:0; transition:0.3s;} .bd_tem_area ul.bd_thumnail_lst li .thumnail img {width:auto; height:190px; border:1px solid #dcdcdc; border-right:none;} .bd_tem_area ul.bd_thumnail_lst li .thumnail button {position:absolute; width:120px; height:35px; border:2px solid #fff; outline:none; background:transparent; text-align:center; color:#fff; font-size:15px; font-weight:400; transition:0.2s; left:50%; margin-left:-60px; opacity:0; margin-top:20px;} .bd_tem_area ul.bd_thumnail_lst li .thumnail button:hover {background:rgba(0,0,0,0.6);} .bd_tem_area ul.bd_thumnail_lst li .thumnail button.tem_use {top:45px;} .bd_tem_area ul.bd_thumnail_lst li .thumnail button.tem_preview {top:100px;} .bd_tem_area ul.bd_thumnail_lst li .thumnail:hover:before {height:100%;} .bd_tem_area ul.bd_thumnail_lst li .thumnail:hover button {opacity:1; margin-top:0;} .bd_tem_area ul.bd_thumnail_lst li p {text-align:center; margin:8px 0 0; font-size:16px;} .bd_tem_area ul.bd_thumnail_lst li ul.tag_lst {text-align:center; margin:0; padding:0;} .bd_tem_area ul.bd_thumnail_lst li ul.tag_lst li {display:inline-block; margin-right:5px; list-style:none;} .bd_tem_area ul.bd_thumnail_lst li ul.tag_lst li button {font-size:16px; color:#878787; background:none; outline:none; border:none; transition:0.2s; padding:0; font-weight:300;} .bd_tem_area ul.bd_thumnail_lst li ul.tag_lst li button:before {content:"#"; display:inline-block;} .bd_tem_area ul.bd_thumnail_lst li ul.tag_lst li button:hover {color:#000; font-weight:700; text-decoration:underline; text-underline-position:under;} /* card */ #biDashNew #bd_tool_panel .card-header button.btn_toggle_tool {position:absolute; left:-40px; top:10px; background:#fff; box-shadow:-5px 5px 10px rgba(0,0,0,0.1); border-radius:3px 0 0 3px;} #biDashNew #bd_tool_panel .card-header button.btn_toggle_tool i {position:relative; top:2px;} #biDashNew #bd_tool_panel > .card-body {overflow-x:auto; overflow-y:hidden; padding-bottom:0;} #biDashNew #bd_tool_panel > .card-body .tab-content {overflow-y:auto; overflow-x:hidden; height:calc(100% - 45px); padding-bottom:14px;} #biDashNew #bd_tool_panel > .card-body > * {min-width:250px;} /* 탭 */ #biDashNew #bd_tool_panel .option_select_nav {display:flex; justify-content:space-between; margin:0 0 15px;} #biDashNew #bd_tool_panel .option_select_nav .nav-link {min-width:auto;} #biDashNew #bd_tool_panel .option_select_nav li.nav-item {/* width:32.5%; */ text-align:center; flex-grow:1; margin-right:3px;} #biDashNew #bd_tool_panel .option_select_nav li.nav-item:first-child {margin-left:0;} #biDashNew #bd_tool_panel .option_select_nav li.nav-item:last-child {margin-right:0;} /* ************************ 좌측 영역 ************************ */ /* 아코디언 */ #bd_tool_panel .accordion .accordion-item {margin-bottom:10px; border-top:1px solid #dcdcdc;} #bd_tool_panel .accordion .accordion-item:first-child {border-radius:0;} #bd_tool_panel .accordion .accordion-item:last-child {margin-bottom:0; border-radius:0;} #bd_tool_panel .accordion .accordion-item h2.accordion-header {margin-top:0; background:#ffffff; /* Old browsers */ background:-moz-linear-gradient(top, #ffffff 0%, #f2f4f7 100%, #f2f4f7 100%); /* FF3.6-15 */ background:-webkit-linear-gradient(top, #ffffff 0%,#f2f4f7 100%,#f2f4f7 100%); /* Chrome10-25,Safari5.1-6 */ background:linear-gradient(to bottom, #ffffff 0%,#f2f4f7 100%,#f2f4f7 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f2f4f7',GradientType=0 ); /* IE6-9 */} #bd_tool_panel .accordion .accordion-item .accordion-button {background:transparent; padding:0 30px 0 10px; height:30px; line-height:30px; font-size:15px; font-weight:400; position:relative; border:1px solid transparent; border-bottom:1px solid #dcdcdc; box-shadow:none; color:#000;} #bd_tool_panel .accordion .accordion-item:first-of-type .accordion-button {border-radius:0;} #bd_tool_panel .accordion .accordion-item .accordion-button:focus {outline:none; box-shadow:none;} #bd_tool_panel .accordion .accordion-item .accordion-button:after {position:absolute; right:0; top:0; height:30px; width:30px; background:url(../images/icon/form_control_arrow.svg) no-repeat right 6px center; background-size:16px 12px; transition:0.2s; transform:rotate(180deg);} #bd_tool_panel .accordion .accordion-item .accordion-button.collapsed {border-bottom:1px solid transparent; color:#000;} #bd_tool_panel .accordion .accordion-item .accordion-button.collapsed:after {transform:rotate(0deg);} /* Accordion-body */ #bd_tool_panel .accordion .accordion-item .accordion-body {padding:8px;} #bd_tool_panel .accordion .accordion-item .accordion-body .card.newWidget {justify-content:space-between; display:flex; flex-direction:row; padding:8px; cursor:move; border-radius:10px; transition:0.2s; margin:0; background:#fff;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget > i {width:70px; height:45px; border:1px solid #dcdcdc; transition:0.2s; border-radius:10px; text-align:center; font-size:22px; color:#000; line-height:43px;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget > .img_thumnail {width:70px; height:45px; border:1px solid #dcdcdc; transition:0.2s; border-radius:5px; text-align:center; line-height:33px; padding:5px 6px;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget > .img_thumnail img {max-width:100%;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget > strong {display:inline-flex; flex-wrap:wrap; width:70px; height:45px; border:1px solid #dcdcdc; transition:0.2s; border-radius:10px; text-align:center; font-size:15px; color:#000; line-height:20px; align-content:center; justify-content:center;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget .img_thumnail_txt {line-height:45px; width:calc(100% - 85px); color:#000; transition:0.2s;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget > .img_thumnail + .img_thumnail_txt {width:calc(100% - 85px); line-height:45px;} /* hover */ #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget:hover > i {color:#fff; border-color:#5b95ff; background:#5b95ff;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget:hover > .img_thumnail {border-color:#5b95ff; background:#5b95ff;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget:hover > strong {color:#fff; border-color:#5b95ff; background:#5b95ff;} #bd_tool_panel .accordion .accordion-item .accordion-body .newWidget:hover .img_thumnail_txt {color:#5b95ff;} /* card type */ #bd_tool_panel .bdt_detail.type_card .accordion .accordion-item .accordion-body {display:flex; flex-wrap:wrap; justify-content:flex-start;} #bd_tool_panel .bdt_detail.type_card .accordion .accordion-item .accordion-body .card.newWidget {width:32%; margin-right:2%;} #bd_tool_panel .bdt_detail.type_card .accordion .accordion-item .accordion-body .card.newWidget:nth-child(3n) {margin-right:0;} #bd_tool_panel .bdt_detail.type_card .accordion .accordion-item .accordion-body .newWidget > i {width:100%; height:60px; font-size:26px; line-height:60px;} #bd_tool_panel .bdt_detail.type_card .accordion .accordion-item .accordion-body .newWidget > .img_thumnail {width:100%; height:60px; line-height:48px; padding:5px 6px; text-align:center;} #bd_tool_panel .bdt_detail.type_card .accordion .accordion-item .accordion-body .newWidget > .img_thumnail img {max-width:100%; max-height:48px;} #bd_tool_panel .bdt_detail.type_card .accordion .accordion-item .accordion-body .newWidget > strong {width:100%; height:60px; font-size:18px; line-height:60px;} #bd_tool_panel .bdt_detail.type_card .accordion .accordion-item .accordion-body .newWidget .img_thumnail_txt {display:none;} /* dragging 기존 대시보드용 */ body .card.newWidget.ui-draggable.ui-draggable-dragging {justify-content:space-between; display:flex; flex-direction:row; padding:8px; background:#fff; height:68px !important;} body .card.newWidget.ui-draggable.ui-draggable-dragging > i {width:50px; height:50px; border:1px solid #dcdcdc; border-radius:10px; text-align:center; font-size:20px; color:#000; transition:0.2s; line-height:50px;} body .card.newWidget.ui-draggable.ui-draggable-dragging .img_thumnail_txt {line-height:50px; width:calc(100% - 65px); font-size:12px; font-weight:400; margin-bottom:0;} /* dragging 신규 대시보드용 */ body .card.newWidget.ui-draggable.ui-draggable-dragging {width:352px !important; cursor:move; border-radius:10px; margin:0; height:63px !important;} body .card.newWidget.ui-draggable.ui-draggable-dragging > i {width:70px; height:45px; font-size:22px; line-height:45px;} body .card.newWidget.ui-draggable.ui-draggable-dragging > .img_thumnail {width:70px; height:45px !important; border:1px solid #dcdcdc; border-radius:5px; text-align:center; line-height:33px; padding:5px 6px; font-size:14px;} body .card.newWidget.ui-draggable.ui-draggable-dragging > .img_thumnail img {max-width:100%;} body .card.newWidget.ui-draggable.ui-draggable-dragging > strong {display:inline-block; width:70px; height:45px !important; border:1px solid #dcdcdc; transition:0.2s; border-radius:10px; text-align:center; font-size:15px; color:#000; line-height:43px;} body .card.newWidget.ui-draggable.ui-draggable-dragging .img_thumnail_txt {line-height:45px; width:calc(100% - 85px) !important; color:#000;} body .card.newWidget.ui-draggable.ui-draggable-dragging > .img_thumnail + .img_thumnail_txt {width:calc(100% - 85px) !important; line-height:45px; font-size:14px;} /* ********** Editor Tab ********** */ #biDashNew .form-label {display:block; margin-bottom:10px;} /* ************* 대시보드 저장위치 팝업 ************* */ .bd_select_location .select_menu_tree {height:300px; overflow-x:hidden; overflow-y:auto;} .bd_select_location .select_menu_tree.jstree_area.jstree-default .jstree-themeicon:after {font-size:18px;} .bd_select_location .select_menu_tree.jstree_area.jstree-default li.dashboard-root .jstree-anchor > .jstree-icon.jstree-themeicon:after {font-family:'Font Awesome 6 Free'; font-weight:900; content:"\f0e8"; color:#4A90E2;} .bd_select_location .select_menu_tree.jstree_area.jstree-default li.dashboard-dir .jstree-anchor > .jstree-icon.jstree-themeicon:after {font-family:'Font Awesome 6 Free'; font-weight:900; content:"\f07b"; color:#003880;} .bd_select_location .select_menu_tree.jstree_area.jstree-default li.dashboard-file .jstree-anchor > .jstree-icon.jstree-themeicon:after {font-family:'Font Awesome 6 Free'; font-weight:900; content:"\f543"; color:#E9A05D;} /* **************************************** 우측 패널 - 편집화면 **************************************** */ #bdt_detail_option .nav.nav-tabs.tab_big .nav-link {padding:5px 10px 3px; font-size:14px;} /* ********** 공통 ********** */ #bdt_detail_option .full_item {width:calc(100% + 40px); margin-left:-20px; border-top:1px solid #ccc; padding:0 20px;} #bdt_detail_option .icon_btn {width:20px;} #bdt_detail_option .do_item input.input_color {width:80px; height:30px; display:inline-block; border:1px solid #dcdcdc; background:#fff; text-align:center;} #bdt_detail_option .do_item input.input_color[disabled], #bdt_detail_option .do_item input.input_color[readonly] {background-color:#e9edf1 !important; opacity:1; /* color:#a09f9f; */ color:#21251f !important;} #bdt_detail_option .do_item label.color_label {margin-left:5px; height:30px; line-height:30px; cursor:pointer;} #bdt_detail_option .do_item .input_item {display:inline-block; margin-left:15px;} #bdt_detail_option .do_item .input_item label {height:30px; line-height:30px; margin:0 5px 0 0;} #bdt_detail_option .do_item .input_item input {display:inline-block;} #bdt_detail_option .do_item .m_check {position:relative; top:3px;} #bdt_detail_option .do_item {padding:15px 0; border-top:1px solid #dcdcdc;} #bdt_detail_option .do_item:first-child {border-top:none;} #bdt_detail_option h5.do_title {font-size:13px; margin:0 0 7px; line-height:18px; color:#000; font-weight:700; position:relative;} #bdt_detail_option h5.do_title .m_switch {position:absolute; right:0; top:0;} #bdt_detail_option h5.do_title .m_check.label_check label {font-size:13px; font-weight:700; color:#000;} #bdt_detail_option p.info_txt {font-size:13px; margin:0; line-height:18px; color:#333;} #bdt_detail_option .do_item .form_area label.form_label {text-align:left;} #bdt_detail_option .do_item .form_area .form_group label {line-height:30px; height:30px; margin-right:5px; float:left;} #bdt_detail_option .btn_group_area {margin:0 0 10px;} #bdt_detail_option .btn_group_area:last-child {margin-bottom:0;} #bdt_detail_option .btn_group_area .btn_group {display:inline-flex;} #bdt_detail_option .btn_group_area .btn_group button.btn_select {padding:0 7px; height:30px; line-height:30px; border:1px solid #dcdcdc; background:#fff; transition:0.2s; font-size:16px; margin-right:-1px;} #bdt_detail_option .btn_group_area .btn_group button.btn_select:hover, #bdt_detail_option .btn_group_area .btn_group button.btn_select.active {background:#e1e1e1;} #bdt_detail_option .btn_group_area .btn_group button.btn_select[disabled] {background-color:#e9edf1 !important;} #bdt_detail_option .btn_group_area .form_control {display:inline-block; border:none; border-bottom:1px solid #bbb; text-align:center; margin-left:5px;} /* 파일 업로드 */ #biDashNew #bd_tool_panel .do_item.edit_img .file_box_item .image-upload {text-align:right; height:30px; line-height:30px;} #biDashNew #bd_tool_panel .do_item.edit_img .file_box_item .image-upload input.file-input {display:none;} #biDashNew #bd_tool_panel .do_item.edit_img .file_box_item .image-upload label {display:inline-block; width:20px; height:30px; line-height:30px;} #biDashNew #bd_tool_panel .do_item.edit_img .file_box_item .image-upload label:after {content:"\f03e"; display:block; font-family:"Font Awesome 6 Free"; font-size:16px; color:#000; transition:0.2s;} #biDashNew #bd_tool_panel .do_item.edit_img .file_box_item .image-upload label:hover:after {color:#1fa0dc;} /* form_area label 내 체크박스 */ #bdt_detail_option .do_item .form_area label.form_label .m_check {height:20px; top:0;} #bdt_detail_option .do_item .form_area label.form_label .m_check label {height:20px; line-height:20px;} /* ********** 카드 이미지 기본형 ********** */ #bdt_detail_option .do_item.edit_img .btn_area {text-align:right;} #bdt_detail_option .do_item.edit_img .img_area {text-align:center; border:1px dashed #dcdcdc; min-height:100px; position:relative; overflow:hidden; margin-bottom:10px; background:linear-gradient(to bottom right, #fff calc(50% - 1px), #dcdcdc, #fff calc(50% + 1px));} #bdt_detail_option .do_item.edit_img .img_area i {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:25px; border:5px solid #fff; padding:10px; border-radius:5px; background:#fff;} #bdt_detail_option .do_item.edit_img .img_area img {width:100%; height:auto; position:relative; display:block; z-index:2;} /* ********** 버튼 링크 ********** */ #bdt_detail_option .do_item.select_button_style {} #bdt_detail_option .do_item.select_button_style .m_btn.selected {outline:5px solid #54b9ff !important;} /* ********** 캐러셀 ********** */ .do_item.carousel_order .slide_effect_select {position:absolute; right:0; top:0; overflow:hidden;} .do_item.carousel_order .slide_effect_select input {position:absolute; left:-1000px;} .do_item.carousel_order .slide_effect_select .toggle {cursor:pointer; display:inline-block; position:relative; width:100px; height:20px; background:#1aadd2; border-radius:10px; transition:all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);} .do_item.carousel_order .slide_effect_select .toggle:before, .slide_effect_select .toggle:after {position:absolute; line-height:20px; font-size:13px; z-index:2; transition:all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95);} .do_item.carousel_order .slide_effect_select .toggle:before {content:"Slide"; left:12px; color:#1aadd2;} .do_item.carousel_order .slide_effect_select .toggle:after {content:"Fade"; right:10px; color:#fff;} .do_item.carousel_order .slide_effect_select .toggle__handler {display:inline-block; position:relative; z-index:1; background:#fff; width:50px; height:18px; border-radius:10px; top:1px; left:1px; transition:all 200ms cubic-bezier(0.445, 0.05, 0.55, 0.95); transform:translateX(0px);} .do_item.carousel_order .slide_effect_select input:checked + .toggle {background:#dfa149;} .do_item.carousel_order .slide_effect_select input:checked + .toggle:before {color:#fff;} .do_item.carousel_order .slide_effect_select input:checked + .toggle:after {color:#dfa149;} .do_item.carousel_order .slide_effect_select input:checked + .toggle .toggle__handler {width:50px; transform:translateX(48px); border-color:#fff;} .do_item.carousel_order .select_carousel_order {display:flex; flex-wrap:wrap; justify-content:start; margin-bottom:5px;} .do_item.carousel_order .select_carousel_order button.btn_icon {margin-bottom:5px;} .do_item.carousel_order .select_carousel_order button.btn_icon span {position:relative; top:1px;} .do_item.carousel_order button.btn_add_carousel {width:100%; height:25px; line-height:23px; border:1px solid var(--color-button-active); transition:0.2s; text-align:center; color:var(--color-button-active); background:#fff;} .do_item.carousel_order button.btn_add_carousel:hover {color:#004bb6; border-color:#004bb6; background:#fff;} .do_item.carousel_order button.btn_delete_carousel {width:100%; height:25px; line-height:23px; border:1px solid #CF2F11; transition:0.2s; text-align:center; color:#CF2F11; background:#fff;} .do_item.carousel_order button.btn_delete_carousel:hover {color:#ff0000; border-color:#ff0000; background:#fff;} /* **************************************** 공지사항 팝업 관련 스타일 **************************************** */ /* 타이틀 */ .modal-dialog .news_view_area {margin-bottom:30px;} .modal-dialog .news_view_area .news_view_info {padding:0; border-bottom:none;} .modal-dialog .news_view_area .news_view_info h4.title {margin-bottom:0; line-height:1.2; color:var(--color-main1); font-weight:700; word-break:keep-all;} /* 본문내용 */ .modal-dialog .news_view_content {font-size:inherit; overflow:auto; padding-bottom:5px; word-break:keep-all;} .modal-dialog .news_view_content p, .note-editable p, #div_prLibraryContent .board_detail .editor_area p {margin-bottom:inherit;} /*=========================================================================================================================== VDI 화면 =============================================================================================================================*/ /* ************************** 공통 ************************** */ .inline_txt {display:inline-block; margin:0; vertical-align:middle; line-height:30px;} .info_icon {display:inline-block; border:1px solid #dcdcdc; height:30px; line-height:28px; text-align:center; padding:0; margin:0; background:#fff; padding:0 10px} .info_icon img {height:24px; display:inline-block; vertical-align:middle;} .info_icon span {background:#fff; color:#666; padding:0; font-size:14px; display:inline-block; height:28px; line-height:30px; vertical-align:top; font-weight:700;} /* ***** m_panel ***** */ .m_panel {position:relative; width:100%; margin-bottom:20px; padding:25px 30px; display:block; background:#fff; border:none; border-radius:5px;} .m_panel:last-child {margin-bottom:0;} /* ************************** 드롭다운 버튼 ***************************/ .more_btn_box_area {text-align:right; margin-bottom:15px; position:relative; z-index:10;} .more_btn_box_area .more_btn_box {display:inline-block; position:relative;} .more_btn_box_area .more_btn_box > button {position:relative; z-index:2;} .more_btn_box_area .more_btn_box ul {min-width:100%; position:absolute; left:50%; top:30px; overflow:hidden; transition:0.4s; padding:0 0 2px; margin:0; text-align:left; max-height:0; background:#fff; border-radius:0 0 10px 10px; border:none; transform:translate(-50%,0); display:inline-block; box-shadow:0 5px 10px rgba(0,0,0,0.1); margin-top:-15px;} .more_btn_box_area .more_btn_box > button:focus + ul {max-height:300px; padding-top:15px;} .more_btn_box_area .more_btn_box ul li {list-style:none; text-align:left; padding:0 10px;} .more_btn_box_area .more_btn_box ul li a, .more_btn_box_area .more_btn_box ul li button {display:block; min-height:30px; line-height:30px; border-bottom:1px solid #d9d9d9; font-size:13px; padding:0;} .more_btn_box_area .more_btn_box ul li:last-child a, .more_btn_box_area .more_btn_box ul li:last-child button {border-bottom:none;} .more_btn_box_area .more_btn_box ul li a span.img_con, .more_btn_box_area .more_btn_box ul li button span.img_con {display:inline-block; min-width:28px; text-align:center; vertical-align:middle; margin-right:6px;} .more_btn_box_area .more_btn_box ul li a img, .more_btn_box_area .more_btn_box ul li button img {display:inline-block; height:22px;} /* ************************** 패널 안 폼양식 ***************************/ .panel_form {margin:-18px 0 0;} .panel_form h4 {font-size:15px; margin:18px 0 8px; width:100%; text-align:left; display:block; font-weight:700; letter-spacing:-1px;} .panel_form .pf_item {display:block; margin:0 0 8px;} .panel_form .pf_item:last-child {margin-bottom:0;} .panel_form .pf_item .form_label {width:100px; font-size:14px; font-weight:300; color:#000; text-align:right; float:left; padding:0 10px 0 10px; line-height:25px;} .panel_form .pf_item input, .panel_form .pf_item select, .panel_form .pf_item textarea {width:calc(100% - 100px);} .panel_form .pf_item input, .panel_form .pf_item select {line-height:23px; font-size:13px;} .panel_form.label_70 .pf_item .form_label {width:70px;} .panel_form.label_70 .pf_item input, .panel_form.label_70 .pf_item select, .panel_form.label_70 .pf_item textarea {width:calc(100% - 70px);} .panel_form.label_80 .pf_item .form_label {width:80px;} .panel_form.label_80 .pf_item input, .panel_form.label_80 .pf_item select, .panel_form.label_80 .pf_item textarea {width:calc(100% - 80px);} .panel_form.label_90 .pf_item .form_label {width:90px;} .panel_form.label_90 .pf_item input, .panel_form.label_90 .pf_item select, .panel_form.label_90 .pf_item textarea {width:calc(100% - 90px);} .panel_form.label_100 .pf_item .form_label {width:100px;} .panel_form.label_100 .pf_item input, .panel_form.label_100 .pf_item select, .panel_form.label_100 .pf_item textarea {width:calc(100% - 100px);} .panel_form.label_110 .pf_item .form_label {width:110px;} .panel_form.label_110 .pf_item input, .panel_form.label_110 .pf_item select, .panel_form.label_110 .pf_item textarea {width:calc(100% - 110px);} .panel_form.label_120 .pf_item .form_label {width:120px;} .panel_form.label_120 .pf_item input, .panel_form.label_120 .pf_item select, .panel_form.label_120 .pf_item textarea {width:calc(100% - 120px);} .panel_form.label_130 .pf_item .form_label {width:130px;} .panel_form.label_130 .pf_item input, .panel_form.label_130 .pf_item select, .panel_form.label_130 .pf_item textarea {width:calc(100% - 130px);} .panel_form.label_140 .pf_item .form_label {width:140px;} .panel_form.label_140 .pf_item input, .panel_form.label_140 .pf_item select, .panel_form.label_140 .pf_item textarea {width:calc(100% - 140px);} .panel_form.label_150 .pf_item .form_label {width:150px;} .panel_form.label_150 .pf_item input, .panel_form.label_150 .pf_item select, .panel_form.label_150 .pf_item textarea {width:calc(100% - 150px);} .panel_form.label_160 .pf_item .form_label {width:160px;} .panel_form.label_160 .pf_item input, .panel_form.label_160 .pf_item select, .panel_form.label_160 .pf_item textarea {width:calc(100% - 160px);} .panel_form.label_170 .pf_item .form_label {width:170px;} .panel_form.label_170 .pf_item input, .panel_form.label_170 .pf_item select, .panel_form.label_170 .pf_item textarea {width:calc(100% - 170px);} .panel_form.label_180 .pf_item .form_label {width:180px;} .panel_form.label_180 .pf_item input, .panel_form.label_180 .pf_item select, .panel_form.label_180 .pf_item textarea {width:calc(100% - 180px);} .panel_form.label_190 .pf_item .form_label {width:190px;} .panel_form.label_190 .pf_item input, .panel_form.label_190 .pf_item select, .panel_form.label_190 .pf_item textarea {width:calc(100% - 190px);} .panel_form.label_200 .pf_item .form_label {width:200px;} .panel_form.label_200 .pf_item input, .panel_form.label_200 .pf_item select, .panel_form.label_200 .pf_item textarea {width:calc(100% - 200px);} /* ************************ 나의 자원 ************************ */ /* 나의 자원 리스트 */ .server_list {display:flex; flex-wrap:wrap; padding:0; margin:0; position:relative; width:100%; justify-content:flex-start;} .server_list > li {width:calc((100% - 90px) / 4); height:324px; padding:0; list-style:none; box-sizing:border-box; transition:all ease 0.3s; margin:0 30px 30px 0;} .server_list > li:nth-child(4n) {margin-right:0;} .server_list .server_item {height:324px; position:relative; border:1px solid #dadbdd; border-radius:10px; background-color:#fff; transition:0.3s; cursor:pointer;} .server_list .server_item .function_area {position:absolute; right:0; top:0; width:110px; height:106px; padding:20px 20px 0 0;} .server_list .server_item .function_area img {display:inline-block; width:80px; position:absolute; left:0; top:20px;} /*드롭다운 버튼 */ .server_list .server_item .function_area > button.more_btn {position:relative; z-index:3; float:right; width:30px; height:30px; border-radius:15px; border:none; background:#fff; outline:none; font-size:20px; padding:0; color:#000; transition:0.2s; margin-right:-10px;} .server_list .server_item .function_area > button.more_btn:focus, .server_list .server_item .function_area > button.more_btn:hover {color:#54b9ff;} .server_list .server_item .function_area ul {min-width:100%; position:absolute; right:10px; top:50px; overflow:hidden; transition:0.4s; padding:0; margin:0; text-align:left; max-height:0px; background:#fff; margin:0; border-radius:10px; border:1px solid transparent; display:inline-block; box-shadow:0 5px 20px rgba(0,0,0,0.1); z-index:2; opacity:0;} .server_list .server_item .function_area > button:focus + ul {max-height:300px; border:1px solid #eee; opacity:1;} .server_list .server_item .function_area ul li {list-style:none; text-align:left; padding:0 10px;} .server_list .server_item .function_area ul li button {display:block; min-height:30px; line-height:30px; border:none; border-bottom:1px solid #eee; font-size:13px; padding:0; width:100%; background:#fff; transition:0.2s; color:#000;} .server_list .server_item .function_area ul li button:focus, .server_list .server_item .function_area ul li button:hover {color:#54b9ff;} .server_list .server_item .function_area ul li:last-child button {border-bottom:none;} .server_list .server_item:after {display:block; content:""; position:absolute; bottom:-40px; left:50%; transform:translate(-50%,0); opacity:0; transition:all ease 0.4s; line-height:1; width:0; height:0; border-top:20px solid #5e5e5e; border-right:12px solid transparent; border-bottom:20px solid transparent; border-left:12px solid transparent;} .server_list > li.active .server_item:after {opacity:1;} .server_list .server_item span.server_type {position:absolute; left:30px; top:20px; display:inline-block; width:60px; height:20px; font-size:12px; color:#fff; background:#0fa8ce; text-align:center;line-height:21px; font-weight:400; border-radius:3px;} .server_list .server_item .item_title {color:#000; display:-webkit-box; height:110px; padding:60px 130px 0 30px; margin:0; font-size:20px; line-height:1; word-break:break-all; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-weight:700; line-height:25px;} .server_list .server_item .item_brief {display:-webkit-box; height:40px; padding:0 30px; margin:5px 0 11px; line-height:20px; font-size:18px; font-weight:700; word-break:break-all; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} .server_list .server_item .item_info {display:flex; flex-wrap:wrap; height:20px; padding:0 30px; margin:5px 0;} .server_list .server_item .item_info > span {display:inline-flex; line-height:20px; padding:0 5px; margin:0; list-style:none; color:#7b7e85; font-size:14px;} .server_list .server_item .item_info > span:nth-child(1) {padding-left:0;} .server_list .server_item .item_chart_area {padding:0 30px;} .server_list .server_item .item_chart_area .row {flex-wrap:nowrap;} /* 하단 버튼영역 */ .server_list .server_item .item_btn {display:flex; padding:0; margin-top:0; z-index:2; overflow:hidden; height:143px; position:absolute; left:0; bottom:0; width:100%; height:30px;} /* 디테일 버튼 */ .server_list .server_item .item_btn > .btn_assetList {display:inline-block; position:absolute; left:50%; bottom:0; height:30px; width:200px; line-height:30px; margin:0; color:#fff; text-align:center; border-radius:30px 30px 0 0; z-index:10; background-color:#757576; border:0; cursor:pointer; transition:0.2s; padding:0; opacity:0; margin-left:-100px;} .server_list .server_item .item_btn > .btn_assetList:hover {background-color:#555;} .server_list .sub_list {display:block; width:calc(100% + 90px); margin-left:-45px; height:0; margin-top:30px; position:absolute; left:20px; background-color:rgb(242, 242, 242); overflow:hidden; opacity:0; transition:all ease 0.2s; box-shadow:inset 0 4px 20px rgba(0,0,0,0.15);} .nav-md .server_list .sub_list {width:calc(100vw - 300px);} .server_list .sub_list::-webkit-scrollbar {width:4px; height:4px;} /* width */ .server_list .sub_list > ul {display:flex; padding:20px 35px; margin:0; white-space:nowrap;} .server_list .sub_list > ul > li {padding:0 10px; margin:0; list-style:none;} .server_list > li.active {height:725px; padding-bottom:315px;} .server_list > li.active .server_item, .server_list > li:hover .server_item {border-color:#989898; box-shadow:0 10px 20px 2px rgba(0,0,0,0.2);} .server_list > li.active .server_item .item_btn > .btn_assetList, .server_list > li:hover .server_item .item_btn > .btn_assetList {opacity:1;} .server_list > li.active .sub_list.active {height:315px; overflow-x:auto; z-index:2; opacity:1;} /* ************************ 승인 ************************ */ /* 상태값 아이콘 */ .node_list_grid img.status_img {display:block; margin:0 auto 10px;} /* 프로그래스바 */ .node_list_grid .progress {padding:0 9px; background:none;} .node_list_grid .progress_legend {width:100%; margin-top:10px;} .node_list_grid .progress_legend .legend_item {display:inline-block; margin-right:10px;} .node_list_grid .progress_legend .legend_item:last-child {margin-right:0;} .node_list_grid .progress_legend .legend_item span {display:inline-block; vertical-align:middle;} .node_list_grid .progress_legend .legend_item span.legend_color {width:10px; height:10px; background:#ccc; margin-right:3px;} .node_list_grid .progress_legend .legend_item span.legend_txt {font-size:10px; color:#000;} /* ************************ fileexplorer ************************ */ .fe_fileexplorer_wrap .file_view_list .fe_fileexplorer_item_wrap {margin-bottom:1px; width:100%; text-align:left;} .fe_fileexplorer_wrap .file_view_list .fe_fileexplorer_item_wrap_inner {position:relative;} .fe_fileexplorer_wrap .file_view_list .fe_fileexplorer_item_icon {width:35px; height:25px; margin-left:0; margin-right:0; background-repeat:no-repeat; display:inline-block; position:relative;} .fe_fileexplorer_wrap .file_view_list .fe_fileexplorer_item_text {margin-top:0; font-size:0.75em; -webkit-line-clamp:1; display:inline-block; vertical-align:top; position:relative; top:9px; width:calc(100% - 35px); white-space:nowrap;} .fe_fileexplorer_wrap .file_view_list .fe_fileexplorer_item_icon_folder {background-image:url('../images/icon/fileexplorer_sprites_list.png'); background-position:-52px -52px; image-rendering:pixelated; top:3px;} .fe_fileexplorer_wrap .file_view_list .fe_fileexplorer_item_icon_file {background-image:url('../images/icon/fileexplorer_sprites_list.png'); background-position:-2px -51px; image-rendering:pixelated; top:3px;} .fe_fileexplorer_wrap .file_view_list .fe_fileexplorer_item_icon_file:not(.fe_fileexplorer_item_icon_file_no_ext)::after {bottom:5px; left:1px; font-size:7px; padding:1px 1px 0; width:20px; text-align:center;} /* ************************ toast Grid Progress Bar ************************ */ .progress.progress_grid {background-color:#eee; position:relative; height:16px; border-radius:8px; overflow:hidden; box-shadow:3px 3px 4px rgba(0,0,0,0.1) inset;} .progress.progress_grid .progress-bar {height:16px; background:linear-gradient(to right, #c3e4ec 30%, #73c9df 100%); box-shadow:3px 3px 4px rgba(0,0,0,0.1) inset; overflow:visible; display:flex; justify-content:center;} .progress.progress_grid .progress-bar strong {color:#000; font-weight:700; font-size:12px; display:inline-block; line-height:16px; padding:1px 10px 0; text-shadow: 0px 0px 8px rgba(255,255,255,1);} .progress.progress_grid .progress-bar strong span {font-size:10px; color:#444; display:inline-block; margin-left:5px;} /* ************************ 사용자 Storage Progress Bar ************************ */ .storage_select .form-select {height:30px; font-size:13px;} .progress.progress_storage {background-color:#eee; position:relative; height:30px; border-radius:8px; overflow:hidden; box-shadow:3px 3px 4px rgba(0,0,0,0.1) inset;} .progress.progress_storage .progress-bar {height:30px; background:linear-gradient(to right, #c3e4ec 30%, #73c9df 100%); box-shadow:3px 3px 4px rgba(0,0,0,0.1) inset; overflow:visible; display:flex; justify-content:center;} .progress.progress_storage .progress-bar strong {color:#000; font-weight:700; font-size:12px; display:inline-block; line-height:16px; padding:1px 10px 0; text-shadow: 0px 0px 8px rgba(255,255,255,1);} .progress.progress_storage .progress-bar strong span {font-size:10px; color:#444; display:inline-block; margin-left:5px;} /* ************************************************ 통합 API 관리 ************************************************ */ /* API 생성 팝업 */ .wizard_content .create_wrap > li.select_open_api, .wizard_content .create_wrap > li.select_dcat_api {padding-top:200px; height:320px;} .wizard_content .create_wrap > li.select_open_api {background:rgba(255,255,255,0.3) url(../images/icon/icon_open_api_gray.png) no-repeat center 50px; background-size:auto 100px;} .wizard_content .create_wrap > li.select_dcat_api {background:rgba(255,255,255,0.3) url(../images/icon/icon_dcat_gray.png) no-repeat center 50px; background-size:auto 100px;} .wizard_content .create_wrap > li.select_open_api:hover {background:rgba(255,255,255,0.5) url(../images/icon/icon_open_api.png) no-repeat center 50px; background-size:auto 100px;} .wizard_content .create_wrap > li.select_dcat_api:hover {background:rgba(255,255,255,0.5) url(../images/icon/icon_dcat.png) no-repeat center 50px; background-size:auto 100px;} .wizard_content .create_wrap > li.select_open_api p, .wizard_content .create_wrap > li.select_dcat_api p {margin:25px 0;} /* API 생성 팝업 */ .pop_create_api {} .pop_create_api #selectApiGroup.form_control {padding:10px;} .select_api_tree {height:180px; overflow-x:hidden; overflow-y:auto;} .select_api_tree.jstree_area.jstree-default .jstree-themeicon:after {font-size:18px;} .select_api_tree.jstree_area.jstree-default li.api_open .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; background:url(../images/icon/icon_open_api_small.png) no-repeat center center; height:24px;} .select_api_tree.jstree_area.jstree-default li.api_dcat .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; background:url(../images/icon/icon_dcat_small.png) no-repeat center center; height:24px;} .pop_create_api #selectApiGroup {overflow-y:auto;} /* ************ Data API - 통합 API 목록 ************ */ /* 상단 영역 */ .project_content.type_api .catalog_top_area .ct_left {width:750px;} .project_content.type_api .catalog_top_area .ct_left ul.ct_status li {width:235px; padding:30px 30px 30px 23px;} /* ********** API History ********** */ .type_api .catalog_top_area .ct_right ul.ct_history {margin:13px 0 0;} .type_api .catalog_top_area .ct_right ul.ct_history:before {top:30px;} .type_api .catalog_top_area .ct_right ul.ct_history li {padding:82px 0 0;} .type_api .catalog_top_area .ct_right ul.ct_history li:before {top:27px;} .type_api .catalog_top_area .ct_right ul.ct_history li a:before {content:""; display:block; padding:0 10px; width:100%; border-radius:3px; height:20px; line-height:20px; background:#999; position:absolute; left:0; top:48px; color:#fff; font-size:13px; font-weight:400;} .type_api .catalog_top_area .ct_right ul.ct_history li a span.history_day {position:absolute; left:0; top:0;} /* API 생성 */ .catalog_top_area .ct_right h4 .history_legend span.api_create:before {background-color:#4765e3;} .catalog_top_area .ct_right ul.ct_history li.history_create:before {background-color:#4765e3;} .catalog_top_area .ct_right ul.ct_history li.history_create a:before {content:"API 생성"; background:#4765e3;} .catalog_top_area .ct_right ul.ct_history li.history_create a span.history_day {color:#4765e3;} /* API 호출 */ .catalog_top_area .ct_right h4 .history_legend span.api_call:before {background-color:#42b5c9;} .catalog_top_area .ct_right ul.ct_history li.history_call:before {background-color:#42b5c9;} .catalog_top_area .ct_right ul.ct_history li.history_call a:before {content:"API 호출"; background:#42b5c9;} .catalog_top_area .ct_right ul.ct_history li.history_call a span.history_day {color:#42b5c9;} /* API 버전 업그레이드 */ .catalog_top_area .ct_right h4 .history_legend span.api_upgrade:before {background-color:#35b8e9;} .catalog_top_area .ct_right ul.ct_history li.history_upgrade:before {background-color:#35b8e9;} .catalog_top_area .ct_right ul.ct_history li.history_upgrade a:before {content:"API 업그레이드"; background:#35b8e9;} .catalog_top_area .ct_right ul.ct_history li.history_upgrade a span.history_day {color:#35b8e9 ;} /* API 정보 수정 */ .catalog_top_area .ct_right h4 .history_legend span.api_info_modify:before {background-color:#f2aa84;} .catalog_top_area .ct_right ul.ct_history li.history_info_modify:before {background-color:#f2aa84;} .catalog_top_area .ct_right ul.ct_history li.history_info_modify a:before {content:"API 정보수정"; background:#f2aa84;} .catalog_top_area .ct_right ul.ct_history li.history_info_modify a span.history_day {color:#f2aa84;} /* API 삭제 */ .catalog_top_area .ct_right h4 .history_legend span.api_delete:before {background-color:#acacac;} .catalog_top_area .ct_right ul.ct_history li.history_delete:before {background-color:#acacac;} .catalog_top_area .ct_right ul.ct_history li.history_delete a:before {content:"API 삭제"; background:#acacac;} .catalog_top_area .ct_right ul.ct_history li.history_delete a span.history_day {color:#acacac;} /* API 종류(카테고리) */ .catalog_top_area .ct_right ul.ct_history.api_history li a strong.category {margin:0 0 10px; height:25px; padding-left:30px; line-height:25px; font-size:13px; color:#7b7e85; margin:0; display:-webkit-box; -webkit-box-orient:vertical; white-space:normal; word-break:keep-all; display:block; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; line-height:18px; height:36px;} .catalog_top_area .ct_right ul.ct_history.api_history li a strong.category.type_open_api {background:url(../images/icon/icon_open_api_small.png) no-repeat 8px 2px;} .catalog_top_area .ct_right ul.ct_history.api_history li a strong.category.type_dcat {background:url(../images/icon/icon_dcat_small.png) no-repeat 8px 2px;} /* 신규 버튼 - API 목록화 (관리자만 보임) */ .catalog_lst .sub_item > button.btn_api_listing {position:absolute; right:45px; top:15px; padding:0 20px;} /* 신규 버튼 - API 생성(관리자만 보임) */ .catalog_lst .project_item > button.btn_api_create {position:absolute; right:50px; top:15px; padding:0 20px;} .catalog_top_area .ct_left ul.ct_status li.sl_api_total {background:#5b4ec2;} .catalog_top_area .ct_left ul.ct_status li.sl_api_open {background:#8c82eb;} .catalog_top_area .ct_left ul.ct_status li.sl_api_dcat {background:#6d8cf0;} .catalog_top_area .ct_left ul.ct_status li.sl_api_open:before {right:26px; top:32px;} .catalog_top_area .ct_left ul.ct_status li.sl_api_dcat:before {right:23px; top:30px;} .catalog_top_area .ct_left ul.ct_status li.sl_api_open:before {background:url(../images/icon/icon_open_api_white.png) no-repeat right top; background-size:auto 52px; opacity:0.4;} .catalog_top_area .ct_left ul.ct_status li.sl_api_dcat:before {background:url(../images/icon/icon_dcat_white.png) no-repeat right top; background-size:auto 49px; opacity:0.4;} .catalog_top_area .ct_left ul.ct_status li.sl_api_total small {color:#d0c1ff;} .catalog_top_area .ct_left ul.ct_status li.sl_api_open small {color:#d1ccff;} .catalog_top_area .ct_left ul.ct_status li span {letter-spacing:1px;} .catalog_top_area .ct_left ul.ct_status li.sl_api_dcat small {color:#c6daff;} .project_content.type_api .catalog_top_area .ct_right {width:calc(100% - 780px);} /* 목록 1depth */ .project_content.type_api .catalog_lst {padding-bottom:30px;} .project_content.type_api .catalog_lst .project_item {height:235px;} .project_content.type_api .catalog_lst .project_item .item_info_top .c_info_area {left:12px;} .project_content.type_api .catalog_lst .project_item .item_info_top div.c_info + .c_info {margin-left:17px;} .project_content.type_api .catalog_lst .project_item .item_info_top div.c_info span {width:20px; height:20px; margin-right:5px;} .catalog_lst .project_item .item_info_top div.c_info.openAPI span {background:url(../images/icon/icon_open_api_green_20.png) no-repeat center center;} .catalog_lst .project_item .item_info_top div.c_info.dcat span {background:url(../images/icon/icon_dcat_20.png) no-repeat center center;} .project_content.type_api .catalog_lst .project_item .item_title {height:75px; display:-webkit-box; white-space:normal; -webkit-line-clamp:2; -webkit-box-orient:vertical; width:85%; word-break:keep-all; overflow:hidden; text-overflow:ellipsis;} .project_content.type_api .catalog_lst .project_item .item_brief span {display:-webkit-box; height:40px; padding:0; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; width:85%; word-break:keep-all;} /* 목록 2depth */ .project_content.type_api .catalog_lst .sub_item {padding:25px 20px 15px;} .project_content.type_api .catalog_lst .sub_item > .item_subtitle {max-width:calc(100% - 25px); display:-webkit-box; line-height:25px; height:50px; padding:0; -webkit-line-clamp:2; white-space:normal; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; width:85%; word-break:keep-all;} /* 텍스트 */ .project_content.type_api .catalog_lst .sub_item > .item_subbrief span {max-height:40px; height:40px; -webkit-line-clamp:2; width:85%; word-break:keep-all;} /* 버튼 및 인증방식 */ .project_content.type_api .catalog_lst .sub_item .api_info_area {display:flex; justify-content:space-between; align-items:center; margin:14px 0 15px;} /* 버튼 */ .project_content.type_api .catalog_lst .sub_item .api_info_area button.btn_api {border:none; background:#999; color:#fff; font-size:12px; font-weight:400; padding:0 12px 0 38px; height:32px; line-height:34px; border-radius:5px; transition:0.2s; position:relative;} .project_content.type_api .catalog_lst .sub_item .api_info_area button.btn_api.btn_openapi {background:#8c82eb url(../images/icon/icon_open_api_small_white.png) no-repeat 12px center;} .project_content.type_api .catalog_lst .sub_item .api_info_area button.btn_api.btn_openapi:hover {background:#1aadd2 url(../images/icon/icon_open_api_small_white.png) no-repeat 12px center; box-shadow:7px 10px 20px rgba(0,93,117,0.2);} .project_content.type_api .catalog_lst .sub_item .api_info_area button.btn_api.btn_dcat {background:#6d8cf0 url(../images/icon/icon_dcat_small_white.png) no-repeat 12px center;} .project_content.type_api .catalog_lst .sub_item .api_info_area button.btn_api.btn_dcat:hover {background:#1aadd2 url(../images/icon/icon_dcat_small_white.png) no-repeat 12px 8px; box-shadow:7px 10px 20px rgba(0,93,117,0.2);} /* 인증방식 및 응답방식 */ .project_content.type_api .catalog_lst .sub_item .api_auth_type {max-width:calc(100% - 110px); text-align:right;} /* 인증방식 */ .project_content.type_api .catalog_lst .sub_item .api_auth_type span.category_icon {height:32px; display:inline-block; line-height:32px; padding-left:34px; color:#333; font-weight:700; text-align:left; margin-right:5px;} .project_content.type_api .catalog_lst .sub_item .api_auth_type span.category_icon.categpry_oauth {background:#fff url(../images/icon/icon_oauth.png) no-repeat left center; background-size:auto 27px;} .project_content.type_api .catalog_lst .sub_item .api_auth_type span.category_icon.categpry_jwt {background:#fff url(../images/icon/icon_jwt.png) no-repeat left center; background-size:auto 27px;} /* 응답방식 */ .project_content.type_api .catalog_lst .sub_item span.response_type {display:inline-block; width:55px; height:15px; line-height:18px; text-align:center; color:#fff; border-radius:8px; font-size:11px;} .project_content.type_api .catalog_lst .sub_item span.response_type + span.response_type {margin-lfet:5px;} .project_content.type_api .catalog_lst .sub_item span.response_type:before {content:""; display:inline-block; margin-right:2px; vertical-align:middle; font-family:"Font Awesome 6 Free"; font-weight:900; font-size:10px; line-height:18px; position:relative; top:-1px;} .project_content.type_api .catalog_lst .sub_item span.response_type:after {content:""; display:inline-block;} .project_content.type_api .catalog_lst .sub_item span.response_type.type_xml {background:#51a972;} .project_content.type_api .catalog_lst .sub_item span.response_type.type_xml:before {content:"\f121";} .project_content.type_api .catalog_lst .sub_item span.response_type.type_xml:after {content:"XML";} .project_content.type_api .catalog_lst .sub_item span.response_type.type_json {background:#394f5c;} .project_content.type_api .catalog_lst .sub_item span.response_type.type_json:before {content:"{ }"; font-family:inherit; font-weight:400;} .project_content.type_api .catalog_lst .sub_item span.response_type.type_json:after {content:"JSON";} .project_content.type_api .catalog_lst .sub_item span.response_type.type_ttl {background:#438bc8;} .project_content.type_api .catalog_lst .sub_item span.response_type.type_ttl:before {content:"\f0c1"; margin-right:4px;} .project_content.type_api .catalog_lst .sub_item span.response_type.type_ttl:after {content:"TTL";} /* 하단 */ .project_content.type_api .catalog_lst .sub_item > .item_info {position:relative; display:flex; justify-content:space-between; left:0; bottom:0; width:100%; align-items:flex-end;} /* 서브 높이 조정 */ .project_content.type_api .catalog_lst .sub_item {height:253px;} .project_content.type_api .catalog_lst > li.active .sub_list.active {max-height:759px;} .project_content.type_api .catalog_lst > li.active .sub_list.active ul {max-height:615px;} /* ****************************** 반응형 ****************************** */ @media all and (min-width:1800px) { .project_content.type_api .catalog_lst > li.active .sub_list.active {max-height:1012px;} .project_content.type_api .catalog_lst > li.active .sub_list.active ul {max-height:850px;} } @media all and (min-width:2100px) { .project_content.type_api .catalog_lst > li.active .sub_list.active {max-height:1190px;} .project_content.type_api .catalog_lst > li.active .sub_list.active ul {max-height:1120px;} } /* ****************************** type_row ****************************** */ .drs_container .project_content.type_api.type_row .catalog_lst .project_item {height:100px;} /* 타이틀 */ .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_title {width:45%; height:25px; white-space:nowrap; display:block; -webkit-line-clamp:1; line-height:25px; position:relative; top:-10px;} /* 설명글 */ .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_brief {width:calc(45% - 40px); position:absolute; left:70px; top:50%; margin-top:10px; height:20px;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_brief span {height:20px; white-space:nowrap; display:block; -webkit-line-clamp:1; width:90%;} /* total, api 종류 */ .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top > .total {background:none; text-align:center; padding:0; width:60px;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top > .total:before {width:60px;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top > .total strong {color:#000; font-size:18px; font-weight:700;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top div.c_info {color:#000; text-align:center; padding:0; width:70px; margin:0 0 0 10px;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top div.c_info:before {width:70px;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top div.c_info span {display:inline-block;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top div.c_info strong {font-weight:700; font-size:18px;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top div.c_info.openAPI {background:none;} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top div.c_info.dcat {background:none;} .drs_container .project_content.type_api.type_row .catalog_control_rightlst .project_item .item_info_top div.total:before {content:"Total";} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top div.c_info.openAPI:before {content:"OpenAPI";} .drs_container .project_content.type_api.type_row .catalog_lst .project_item .item_info_top div.c_info.dcat:before {content:"Dcat";} /* 신규 버튼 - API 생성(관리자만 보임) */ .drs_container .project_content.type_api.type_row .catalog_lst .project_item > button.btn_api_create {position:relative; right:auto; top:auto;} /* 고정 버튼 */ .drs_container .project_content.type_api.type_row .catalog_lst .project_item .btn_fixed_asset {margin-left:0;} /* ********** 하위 리스트 ********** */ .drs_container .project_content.type_api.type_row .catalog_lst .sub_list {width:calc(100vw - 188px);} /* ************ API 상세페이지 ************ */ .big_container .big_header .title.type_openapi {padding-left:32px; background:url(../images/icon/icon_open_api_green_25.png) no-repeat left 1px;} .big_container .big_header .title.type_dcat {padding-left:32px; background:url(../images/icon/icon_dcat_25.png) no-repeat left 1px;} .big_container .big_header .api_ver {} .big_container .big_header .api_ver label {display:inline-block; margin-right:10px; font-weight:700;} .big_container .big_header .api_ver select.form_control {display:inline-block; width:auto;} /* 우측 패널 */ .drs_container #assetDetailArea .asset_detail_info .fe_fileexplorer_wrap .fe_fileexplorer_inner_wrap {background:transparent;} /* 저장소 영역 */ .big_container .asset_detail_info .adi_storage {overflow-y:auto; width:100%; height:100%;} .big_container .asset_detail_info .adi_storage .card-header {display:flex; justify-content:space-between; align-items:center;} .big_container .asset_detail_info .adi_storage .card-header h4 {margin:0; font-size:16px; font-weight:700; display:block;} .big_container .asset_detail_info .adi_storage .card-header #inputTbdStorage {width:calc(100% - 90px);} .asset_detail_info .adi_storage .filemanager {height:calc(100% - 100px); position:relative; overflow-y:auto; overflow-x:hidden;} .asset_detail_info .adi_storage .fe_fileexplorer_wrap .fe_fileexplorer_inner_wrap {border:none;} .asset_detail_info .adi_storage .fe_fileexplorer_wrap .fe_fileexplorer_toolbar {padding-top:10px; margin-top:0;} /* 검색 */ .asset_detail_info .adi_storage .fe_fileexplorer_searchbar_wrap {display:flex; width:130px; align-items:center; overflow:hidden; border:1px solid #D9D9D9; margin-right:5px; position:absolute; top:-35px; right:8px;} .asset_detail_info .adi_storage .fe_fileexplorer_searchbar {border:none; height:23px; width:100%;} .asset_detail_info .adi_storage .fe_fileexplorer_searchbar:focus {border:none; outline:none;} .asset_detail_info .adi_storage .fe_fileexplorer_searchbutton {width:100%; display:flex; align-items:center; border:none; background-color:transparent; font-size:larger; margin-bottom:0;} .asset_detail_info .adi_storage .fe_fileexplorer_searchbutton::before {font-family:"IcoFont"; font-size:14px; content:'\ed11'; background-color:transparent; width:30px; text-align:center; display:inline-block; line-height:23px;} /* 복사버튼 영역, 첫번째 영역 높이 조절 */ .asset_detail_info .adi_storage .file_move_btnarea {height:30px; padding:10px 0 0; text-align:center;} .asset_detail_info .adi_storage .file_move_btnarea .m_btn {} .asset_detail_info .adi_storage #original_file.filemanager {height:calc(100% - 84px);} /* ************ openAPI 호출 화면 내 응답 보내기 실패 팝업 ************ */ .api_respond_failed {height:100%; width:100%; border:none; border-radius:20px; padding:30px 20px; display:flex; flex-wrap:wrap; position:relative; align-content:center; align-items:center; margin:0; text-align:center; background:#fff;} .api_respond_failed > div {width:100%;} .api_respond_failed .error-title {font-weight:700; color:#e02828; margin-bottom:10px; width:389px; height:175px; background:url(../images/common/images_404.png) no-repeat left top; margin:0 auto 20px; font-family:"Arial Black";} .api_respond_failed .error-title strong {font-size:56px; margin-top:60px; display:block; line-height:1;} .api_respond_failed .error-title span {font-size:24px; margin-top:10px; display:block; line-height:1;} .api_respond_failed .error-message {font-size:16px; color:#000; line-height:24px;} /* ************************ API 호출 명세 탭 ************************ */ .project_content.type_api .control_area .control_right .x_panel.panel_scroll_area {max-height:calc(100vh - 180px); overflow-y:auto; overflow-x:hidden;} /* 레이아웃 */ #apiCallStatement .control_area {display:flex; justify-content:space-between; padding-bottom:15px;} #apiCallStatement .control_area .control_left {width:400px; float:none;} #apiCallStatement .control_area .control_right {width:calc(100% - 410px); float:none;} #apiCallStatement .control_area .control_left > .x_panel {height:calc(100% - 6px);} #apiCallStatement .control_area .control_right > .x_panel {height:100%;} /* API 트리메뉴 */ #apiCallStatement .control_area .control_left .folder_list {height:100%;} #apiCallStatement .control_area .control_left .folder_list .floder_function .has-feedback .form-control.has-feedback-left {border-bottom:1px solid #d9d9d9;} #apiCallStatement .con_tree .jstree-default > .jstree-container-ul {border-top:none;} /* 권한 관리 전체보기 버튼 위치 */ #apiCallStatement .control_area .control_left .folder_list .half-title-right {float:right; padding:9px 0px 0px 0;} #apiCallStatement.tab-pane .select_api_tree {min-height:calc(100vh - 566px); height:calc(100% - 80px);} #apiCallStatement.tab-pane .select_api_tree ul {padding-top:10px; max-height:calc(100vh - 291px); overflow-x:hidden; overflow-y:auto;} #apiCallStatement.tab-pane .select_api_tree .jstree-themeicon:after {font-size:18px; color:#003880; content:"\ef36"; font-family:"Icofont"; font-weight:400;} /* 인증 호출 명세서 버튼 */ #apiCallStatement.tab-pane .select_api_tree li.btn_confirm_call_statement > .jstree-anchor {font-weight:700; color:#6d8cf0;} #apiCallStatement.tab-pane .select_api_tree li.btn_confirm_call_statement > .jstree-anchor > .jstree-icon.jstree-themeicon {display:none;} /* 최종 트리메뉴 */ #apiCallStatement.tab-pane .select_api_tree li.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\eb2a"; color:#8f8f8f; font-weight:400;} /* API 종류 트리메뉴 */ #apiCallStatement.tab-pane .select_api_tree li.api_open .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; background:url(../images/icon/icon_open_api_small.png) no-repeat center center; height:24px; width:20px;} #apiCallStatement.tab-pane .select_api_tree li.api_dcat .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; background:url(../images/icon/icon_dcat_small.png) no-repeat center center; height:24px; width:20px;} .api_title {display:flex; justify-content:space-between; /* align-items:center; */} .api_title h3.form-title {font-size:20px; font-weight:700;} .api_title h3.form-title.title_open_api {padding-left:32px; background:url(../images/icon/icon_open_api_green_25.png) no-repeat left center;} .api_title h3.form-title.title_dcat {padding-left:32px; background:url(../images/icon/icon_dcat_25.png) no-repeat left center;} .api_title .top_btn {} /* 팝업 - 요청 인터페이스 정의 */ .title_pop_center {text-align:center; font-size:18px; font-weight:700; color:#222; margin:0 0 15px;} /* ************************ 통합 API 권한 관리 ************************ */ /* 레이아웃 */ #apiAuthManage .control_area {display:flex; justify-content:space-between; padding-bottom:20px;} #apiAuthManage .control_area .control_left {width:400px; float:none;} #apiAuthManage .control_area .control_right {width:calc(100% - 410px); float:none;} #apiAuthManage .control_area .control_left > .x_panel, #apiAuthManage .control_area .control_right > .x_panel {height:100%;} /* API 트리메뉴 */ #apiAuthManage .control_area .control_left .folder_list {height:100%;} #apiAuthManage .control_area .control_left .folder_list .floder_function .has-feedback .form-control.has-feedback-left {border-bottom:1px solid #d9d9d9;} #apiAuthManage .con_tree .jstree-default > .jstree-container-ul {border-top:none;} /* 권한 관리 전체보기 버튼 위치 */ #apiAuthManage .control_area .control_left .folder_list .half-title-right {float:right; padding:9px 0px 0px 0;} #apiAuthManage.tab-pane .select_api_tree {min-height:calc(100vh - 566px); height:auto;} #apiAuthManage.tab-pane .select_api_tree ul {padding-top:10px;} #apiAuthManage.tab-pane .select_api_tree .jstree-themeicon:after {font-size:18px; color:#003880; content:"\ef36"; font-family:"Icofont"; font-weight:400;} /* 인증 호출 명세서 버튼 */ #apiAuthManage.tab-pane .select_api_tree li.btn_confirm_call_statement > .jstree-anchor {font-weight:700; color:#6d8cf0;} #apiAuthManage.tab-pane .select_api_tree li.btn_confirm_call_statement > .jstree-anchor > .jstree-icon.jstree-themeicon {display:none;} /* 최종 트리메뉴 */ #apiAuthManage.tab-pane .select_api_tree li.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"\eb2a"; color:#8f8f8f; font-weight:400;} /* API 종류 트리메뉴 */ #apiAuthManage.tab-pane .select_api_tree li.api_open .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; background:url(../images/icon/icon_open_api_small.png) no-repeat center center; height:24px; width:20px;} #apiAuthManage.tab-pane .select_api_tree li.api_dcat .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; background:url(../images/icon/icon_dcat_small.png) no-repeat center center; height:24px; width:20px;} /* 권한 관리 상단 영역 */ .selected_api_info {padding-bottom:10px; position:relative; display:flex; justify-content:space-between; align-items:end;} .selected_api_info .category_icon {position:absolute; background:#00baff; border-radius:0 0 10px 10px; display:inline-block; padding:0; color:#fff; font-size:14px; left:26px; top:-10px; font-weight:700; text-align:center; height:25px; width:120px; line-height:25px;} .selected_api_info .category_icon:before {content:""; display:inline-block; width:16px; height:16px; vertical-align:middle; margin-right:7px;} .selected_api_info .category_icon.icon_open_api {background:#8c82eb;} .selected_api_info .category_icon.icon_open_api:before {background:url(../images/icon/icon_open_api_small_white.png) no-repeat center center; background-size:16px 16px; position:relative; top:1px;} .selected_api_info .category_icon.icon_dcat {background:#6d8cf0;} .selected_api_info .category_icon.icon_dcat:before {background:url(../images/icon/icon_dcat_small_white.png) no-repeat center center; background-size:16px 16px;} .selected_api_info strong.item_title {display:block; height:30px; margin-top:28px; font-size:20px; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#000; padding-left:25px;} .selected_api_info strong.item_title.icon_open_api {padding-left:42px; background:url(../images/icon/icon_open_api.png) no-repeat left top; background-size:30px auto;} .selected_api_info strong.item_title.icon_dcat {padding-left:42px; background:url(../images/icon/icon_dcat.png) no-repeat left top; background-size:30px auto;} /* 권한 관리 상단 아이콘 위치 조정 */ .selected_api_info .div_asset_info {margin-top:-20px;} .selected_api_info .div_asset_info span {display:block; line-height:20px; font-size:14px; margin:0; color:#7b7e85;} /* 좌우화살표 4개 세트 */ .shift_grid_area .grid_item_btn .btn_top {top:50%; margin-top:-40px;} .shift_grid_area .grid_item_btn .btn_bottom {top:50%; margin-top:40px;} .shift_grid_area .grid_item_btn .btn-circle-arrow {display:block; margin:0 0 5px 0; padding:0; width:20px; height:20px; line-height:20px; border-radius:50%; text-align:center; font-size:11px; background:#fff; border-color:#c7c7c7; color:#000; transition:0.2s;} .shift_grid_area .grid_item_btn .btn-circle-arrow:hover {background-color:#1dbae1; border-color:#1dbae1; color:#fff;} /* ************************ API 모니터링 탭 ************************ */ .api_monitoring_area {padding:20px;} .api_monitoring_area .row > div {margin:10px 0;} /* 그리드 */ .api_monitoring_area span.api_info {display:inline-block; padding:0; height:17px; width:40px; color:#fff; background:#999; font-size:11px; text-align:center; line-height:20px; border-radius:3px; font-weight:700;} .api_monitoring_area span.api_info.api_open {background-color:#8c82eb;} .api_monitoring_area span.api_info.api_dcat {background-color:#6d8cf0;} .api_monitoring_area span.api_info.result_y {background-color:#40baa1;} .api_monitoring_area span.api_info.result_n {background-color:#f24a45;} #gridRestApiList > div {overflow:hidden;} #gridRestApiList .tui-grid-container .tui-grid-pagination {margin:10px 0 0;} .api_monitoring_area .api_chart {width:100%; height:100%; padding:15px; border:1px solid #e1e1e1; border-radius:10px; background:#fff; min-height:100px;} .api_monitoring_area .api_mtitle {display:block; text-align:center; width:100%; font-size:18px; color:#222; font-weight:700; margin:0 0 15px;} .api_monitoring_area .kpi_area {display:flex; align-content:space-between; flex-wrap:wrap; width:100%; height:100%;} .api_monitoring_area .kpi_area .kpi_item {background-color:#3d47a5; border-radius:10px; width:100%; color:#fff; text-align:center; padding:10px; height:calc(50% - 5px); display:flex; align-content:center; flex-wrap:wrap;} .api_monitoring_area .kpi_area .kpi_item h3 {font-size:15px; font-weight:700; margin:0 0 15px; display:block; width:100%;} .api_monitoring_area .kpi_area .kpi_item strong {font-size:35px; display:block; line-height:1; width:100%;} .api_monitoring_area .progress .progress-bar {color:#fff; text-align:right; padding-right:7px; overflow:visible; text-shadow:0 0 1px rgba(0, 0, 0, 1); font-size:11px; font-weight:700;} /*=========================================================================================================================== PaaS Management 화면 =============================================================================================================================*/ /* ************************** 공통 레이아웃 ************************** */ /* 공통 */ body .paas_container {height:calc(100% - 1px); width:100%; display:flex; font-family:"Pretendard"; font-weight:400; letter-spacing:0; min-height:655px; position:absolute; left:0; top:0; background:#f2f3f6; color:#2e2e2e;} .paas_container .h1, .paas_container .h2, .paas_container .h3, .paas_container .h4, .paas_container .h5, .paas_container .h6, .paas_container h1, .paas_container h2, .paas_container h3, .paas_container h4, .paas_container h5, .paas_container h6, .pop_pass .h1, .pop_pass .h2, .pop_pass .h3, .pop_pass .h4, .pop_pass .h5, .pop_pass .h6, .pop_pass h1, .pop_pass h2, .pop_pass h3, .pop_pass h4, .pop_pass h5, .pop_pass h6, .pass_style .h1, .pass_style .h2, .pass_style .h3, .pass_style .h4, .pass_style .h5, .pass_style .h6, .pass_style h1, .pass_style h2, .pass_style h3, .pass_style h4, .pass_style h5, .pass_style h6 {font-family:"Pretendard", "KoPubWorldDotum", "맑은고딕", "Malgun Gothic", 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif; font-weight:400; line-height:1.1; color:inherit;} /* ********** Chrome Scroll Style ********** */ .paas_container ::-webkit-scrollbar {width:4px; height:4px;} .paas_container ::-webkit-scrollbar-track {background:rgba(255,255,255,0);} .paas_container ::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.1);} .paas_container ::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.2);} .paas_container .sidebar_cluster::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.05);} .paas_container .sidebar_cluster::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.15);} .paas_container button, .paas_container input, .paas_container optgroup, .paas_container select, .paas_container textarea, .pop_pass button, .pop_pass input, .pop_pass optgroup, .pop_pass select, .pop_pass textarea, .pass_style button, .pass_style input, .pass_style optgroup, .pass_style select, .pass_style textarea {font-family:"Pretendard";} .paas_container .status_dash .progress-bar {background-image:none;} .paas_container a {color:#3d97d3; transition:0.2s;} .paas_container a:hover {color:#000; text-decoration:underline; text-underline-offset:2px;} .paas_container a i.fa-arrow-up-right-from-square {font-size:10px;} .paas_container .form_control {line-height:38px; background-color:#fff;} .paas_container select.form_control {padding-right:40px; height:40px;} .paas_container .has_form select.form_control {height:30px; line-height:30px;} .paas_container .form_control.disabled, .paas_container .form_control[disabled], .paas_container .form_control[readonly], .paas_container fieldset[disabled] .form_control {background-color:#e7e9ef; border-color:#dcdcdc; opacity:1; color:#000;} /* Button */ .paas_container .m_btn i, .pop_pass .m_btn i, .pass_style .m_btn i {margin-right:10px;} .paas_container .m_btn + .m_btn, .pop_pass .m_btn + .m_btn, .pass_style .m_btn + .m_btn {margin-left:6px;} .paas_container .m_btn + .btn-group, .pop_pass .m_btn + .btn-group, .pass_style .m_btn + .btn-group {margin-left:6px;} .paas_container .btn-group + .btn-group, .pop_pass .btn-group + .btn-group, .pass_style .btn-group + .btn-group {margin-left:6px;} .paas_container .btn_icon, .pop_pass .btn_icon, .pass_style .btn_icon {width:40px; height:40px; line-height:38px; border-radius:8px;} /* *********************** btn *********************** */ /* 텍스트버튼(여기에서는 일반 버튼임) */ .paas_container .btn_text, .pop_pass .btn_text, .pass_style .btn_text {display:inline-block; height:32px; line-height:30px; padding:0 15px; margin:0; font-size:14px; border:1px solid #c9ccd0; border-radius:8px; color:#2e2e2e; background:#fff; font-weight:400;} .paas_container .btn_text:hover, .pop_pass .btn_text:hover, .pass_style .btn_text:hover {text-decoration:underline; text-decoration:none; outline:none !important; box-shadow:none !important; color:#1b45cb; border-color:#c9ccd0; background:#f0f5ff;} /* 토스트그리드 버튼 */ .paas_container .tui-grid-table .m_btn.m_btn_tiny, .pop_pass .tui-grid-table .m_btn.m_btn_tiny, .pass_style .tui-grid-table .m_btn.m_btn_tiny {line-height:20px;} /* *********************** State 버튼 *********************** */ /* 정상 상태 */ .m_btn.btn_active, .m_btn.btn_active:hover, span.m_btn.btn_active:hover {color:#34a55f; border-color:#34a55f; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_deployed, .btn_deployed:hover, span.m_btn.btn_deployed:hover {color:#34a55f; border-color:#34a55f; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_succeeded, .btn_succeeded:hover, span.m_btn.btn_succeeded:hover {color:#34a55f; border-color:#34a55f; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_running, .btn_running:hover, span.m_btn.btn_running:hover {color:#fff; border-color:#00a857; background:#00a857; font-weight:500; border-radius:5px;} .m_btn.btn_completed, .btn_completed:hover, span.m_btn.btn_completed:hover {color:#34a55f; border-color:#34a55f; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_progress, .btn_progress:hover, span.m_btn.btn_progress:hover {color:#34a55f; border-color:#34a55f; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_modified, .m_btn.btn_modified:hover, span.m_btn.btn_modified:hover {color:#34a55f; border-color:#34a55f; background:#fff; font-weight:500; border-radius:5px;} /* 오류 상태 */ .m_btn.btn_evicted, .btn_evicted:hover, span.m_btn.btn_evicted:hover {color:#ec3667; border-color:#ec3667; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_failed, .m_btn.btn_failed:hover, span.m_btn.btn_failed:hover {color:#ec3667; border-color:#ec3667; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_error, .m_btn.btn_error:hover, span.m_btn.btn_error:hover {color:#ec3667; border-color:#ec3667; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_unavaliable, .m_btn.btn_unavaliable:hover, span.m_btn.btn_unavaliable:hover {color:#ec3667; border-color:#ec3667; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_containerstatusu, .btn_containerstatusu:hover, span.m_btn.btn_containerstatusu:hover {color:#ec3667; border-color:#ec3667; background:#fff; font-weight:500; border-radius:5px;} /* 진행중인 상태 */ .m_btn.btn_pending, .m_btn.btn_pending:hover, span.m_btn.btn_pending:hover {color:#fff; border-color:#2b9cf3; background:#2b9cf3; font-weight:500; border-radius:5px;} .m_btn.btn_provisioning, .m_btn.btn_provisioning:hover, span.m_btn.btn_provisioning:hover {color:#fff; border-color:#2b9cf3; background:#2b9cf3; font-weight:500; border-radius:5px;} .m_btn.btn_updating, .m_btn.btn_updating:hover, span.m_btn.btn_updating:hover {color:#fff; border-color:#2b9cf3; background:#2b9cf3; font-weight:500; border-radius:5px;} .m_btn.btn_deploying, .m_btn.btn_deploying:hover, span.m_btn.btn_deploying:hover {color:#fff; border-color:#2b9cf3; background:#2b9cf3; font-weight:500; border-radius:5px;} .m_btn.btn_initializing, .m_btn.btn_initializing:hover, span.m_btn.btn_initializing:hover {color:#fff; border-color:#2b9cf3; background:#2b9cf3; font-weight:500; border-radius:5px;} .m_btn.btn_terminating, .m_btn.btn_terminating:hover, span.m_btn.btn_terminating:hover {color:#fff; border-color:#2b9cf3; background:#2b9cf3; font-weight:500; border-radius:5px;} .m_btn.btn_upgrading, .m_btn.btn_upgrading:hover, span.m_btn.btn_upgrading:hover {color:#fff; border-color:#2b9cf3; background:#2b9cf3; font-weight:500; border-radius:5px;} .m_btn.btn_reconnecting, .m_btn.btn_reconnecting:hover, span.m_btn.btn_reconnecting:hover {color:#fff; border-color:#2b55f3; background:#2b55f3; font-weight:500; border-radius:5px;} /* 주의 상태 */ .m_btn.btn_degraded, .m_btn.btn_degraded:hover, span.m_btn.btn_degraded:hover {color:#ff9700; border-color:#ff9700; background:#fff; font-weight:500; border-radius:5px;} /* 상태 불명 / 비활성 / 불명 상태 */ .m_btn.btn_inactive, .m_btn.btn_inactive:hover, span.m_btn.btn_inactive:hover {color:#6b6b6b; border-color:#6b6b6b; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_unknown, .m_btn.btn_unknown:hover, span.m_btn.btn_unknown:hover {color:#6b6b6b; border-color:#6b6b6b; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_deleting, .m_btn.btn_deleting:hover, span.m_btn.btn_deleting:hover {color:#fff; border-color:#6b6b6b; background:#6b6b6b; font-weight:500; border-radius:5px;} .m_btn.btn_stopped, .m_btn.btn_stopped:hover, span.m_btn.btn_stopped:hover {color:#fff; border-color:#000000; background:#000000; font-weight:500; border-radius:5px;} .m_btn.btn_disconnected, .m_btn.btn_disconnected:hover, span.m_btn.btn_disconnected:hover {color:#6b6b6b; border-color:#6b6b6b; background:#fff; font-weight:500; border-radius:5px;} .m_btn.btn_paused, .m_btn.btn_paused:hover, span.m_btn.btn_paused:hover {color:#8a45f2; border-color:#8a45f2; background:#fff; font-weight:500; border-radius:5px;} /* 레이아웃 */ .paas_container #paasLeftArea {background:#fff; border-top:1px solid #f5f5f5; padding:28px 6px 0 16px;} .paas_container #paasRightArea {background:#f2f3f6; padding:20px 0 20px 0; position:relative;} /* 분할 */ .paas_container .gutter.gutter-horizontal {border-left:none; border-right:none; background-color:#fff; border-top:1px solid #f5f5f5; background-image:url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');} .paas_container .gutter.gutter-vertical {border-top:none; border-bottom:none; background-color:#fff; background-image:url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII=');} /* ************************** 좌측 영역 ************************** */ .paas_container .search_cluster {width:100%; position:relative; height:32px;} .paas_container .search_cluster label {width:30px; height:32px; line-height:32px; padding:0 12px; text-align:left; position:absolute; right:0; top:0; z-index:2; cursor:pointer;} .paas_container .search_cluster label:before {content:"\ed11"; display:block; font-family:"icofont"; font-size:14px; color:#9299a7; line-height:30px; height:30px; width:27px; height:30px; position:absolute; left:1px; top:1px; text-align:center;} .paas_container .search_cluster input[type="search"] {height:30px; line-height:30px; padding:0 30px 0 10px; background:#e8e8e8; border:1px solid #e8e8e8; width:100%; color:#000; position:relative; z-index:1; transition:0.2s; border-radius:8px; -webkit-appearance:searchfield !important; appearance:searchfield !important; padding-right:30px; position:relative;} .paas_container .search_cluster label:hover + input[type="search"], .paas_container .search_cluster input[type="search"]:hover, .paas_container .search_cluster input[type="search"]:focus {background:#fff !important; border-color:#2b58e6 !important;} .paas_container .sidebar_cluster {width:100%; height:calc(100% - 112px); margin-top:20px; padding:0 5px 20px 0; overflow:auto;} .paas_container .sidebar_cluster::-webkit-scrollbar {width:6px; height:6px;} /* jstree 커스텀 */ .paas_container .sidebar_cluster ul.jstree-container-ul {min-width:250px; width:100%;} .sidebar_cluster li .jstree-anchor > .jstree-icon.jstree-themeicon {margin-right:2px; background-image:none !important;} .sidebar_cluster.jstree_area .jstree-node, .sidebar_cluster.jstree_area .jstree-icon {background-image: url("/lib/jstree/themes/default/32px_paas.png");} .sidebar_cluster.jstree_area > .jstree-no-dots .jstree-open > .jstree-ocl {background-position:-36px -2px;} .sidebar_cluster.jstree_area > .jstree-no-dots .jstree-closed > .jstree-ocl {background-position:-4px -3px;} .sidebar_cluster.jstree_area .jstree-wholerow {height:30px;} .sidebar_cluster.jstree_area .jstree-clicked.jstree-anchor{color:#2e2e2e;} .sidebar_cluster.jstree_area .jstree-clicked.jstree-anchor:link, .sidebar_cluster.jstree_area .jstree-clicked.jstree-anchor:visited, .sidebar_cluster.jstree_area .jstree-clicked.jstree-anchor:hover, .sidebar_cluster.jstree_area .jstree-clicked.jstree-anchor:active {color:#0046db !important; font-weight:600;} .sidebar_cluster.jstree_area .jstree-wholerow-hovered {background:#f4f7fc !important;} .sidebar_cluster.jstree_area .jstree-wholerow-clicked {background:#f4f7fc !important; color:#0046db !important; font-weight:600;} .sidebar_cluster.jstree_area .jstree-node {min-height:30px; line-height:30px;} .sidebar_cluster.jstree_area .jstree-anchor {line-height:30px; height:30px;} .sidebar_cluster.jstree_area .jstree-icon {height:30px; line-height:30px;} .sidebar_cluster.jstree_area .jstree-icon:empty {height:30px; line-height:30px;} .sidebar_cluster .jstree-clicked.jstree-anchor, .sidebar_cluster .jstree-clicked.jstree-anchor:link, .sidebar_cluster .jstree-clicked.jstree-anchor:visited, .sidebar_cluster .jstree-clicked.jstree-anchor:hover, .sidebar_cluster .jstree-clicked.jstree-anchor:active {color:#000;} .sidebar_cluster li .jstree-anchor > .jstree-icon.jstree-themeicon:after, /* 자식 노드가 없는 최상위 노드에도 아이콘을 표시하기 위해 추가 */ .sidebar_cluster li.jstree-open .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_cluster li.jstree-closed .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; width:20px; height:30px; background-size:18px auto !important;} /* 아이콘 이미지 추가 */ .sidebar_cluster.jstree_area.jstree-default li.jstree-leaf .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:"" !important;;} .sidebar_cluster.jstree_area.jstree-default li.picon_cluster > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_cluster.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_node > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_controlPlane.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_namespace > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_namespace.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_pod > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_pod.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_ingress > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_ingress.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_service > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_service.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_deployment > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_deployment.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_statefulset > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_statefulset.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_hpa > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_hpa.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_storage > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_storage.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_nfs > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_nfs.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_ceph > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_ceph.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_pv > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_pv.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_pvc > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_pvc.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_storageclass> .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_storageClass.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_registry > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_registry.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_docker > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_dockerRegistry.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_local > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_statefulset.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_private > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_privateRegistry.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_images > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_images.png) no-repeat center center;} .sidebar_cluster.jstree_area.jstree-default li.picon_image > .jstree-anchor > .jstree-icon.jstree-themeicon:after {background:url(../images/paas/paas_image.png) no-repeat center center;} /* 온라인/오프라인/상태값 아이콘 추가 */ .sidebar_cluster li.jstree-node.status_online > .jstree-anchor > .jstree-icon {position:relative;} .sidebar_cluster li.jstree-node.status_online > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_cluster li.jstree-node.status_offline > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_cluster li.jstree-node.status_running > .jstree-anchor > .jstree-icon.jstree-themeicon:before, .sidebar_cluster li.jstree-node.status_stopped > .jstree-anchor > .jstree-icon.jstree-themeicon:before { content:""; display:block; width:12px; height:12px; font-family:FontAwesome; position:absolute; right:-4px; bottom:4px; font-size:11px; border-radius:6px; line-height:1; text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;} .sidebar_cluster li.jstree-node.status_online > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f058"; color:#32b552; background:#fff;} .sidebar_cluster li.jstree-node.status_offline > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f057"; color:#ed6e5b; background:#fff;} /* 하단 버튼 영역 */ .paas_bottom_btn {width:100%; height:60px; display:flex; justify-content:space-between; background:#f4f4f4; border-radius:20px 20px 0 0;} .paas_bottom_btn .btn_pbb {width:33%; height:60px; background:none; text-align:center; font-size:24px; line-height:48px; border:none; color:var(--color-button-active); transition:0.2s;} .paas_bottom_btn .btn_pbb:hover {color:#004bb6;} /* ************************** 우측 영역 ************************** */ #paasRightArea {border:1px solid #f5f5f5; border-left:none; width:100%; height:100%;} /* ********** 상단 정보 영역 ********** */ .paas_top {width:100%; display:flex; justify-content:space-between; position:relative; padding:0 30px;} .paas_top:after {content:""; display:block; width:calc(100% - 60px); height:3px; background:#f2f3f6; border-top:1px solid #d0d0d0; border-bottom:1px solid #fff; position:absolute; left:30px; bottom:0;} .paas_top ul.paas_nav {padding:0 7px; margin:0;} .paas_top ul.paas_nav li {display:inline-block; vertical-align:middle; padding:0; margin:0 0 14px; list-style:none;} .paas_top ul.paas_nav li + li {margin-left:16px;} .paas_top ul.paas_nav li a {display:inline-block; padding:0 30px; transition:0.2s; height:40px; line-height:40px; font-size:16px; color:#000; border:none; transition:0.2s; border-radius:10px; font-weight:600;} .paas_top ul.paas_nav li a:hover, .paas_top ul.paas_nav li a.active {color:#fff; background:#1559ef; text-decoration:none;} .paas_top .dropdown {margin:0;} .paas_top .dropdown .m_btn.dropdown-toggle::after {display:none;} .paas_top .dropdown .m_btn.dropdown-toggle i {margin-right:0;} /* ********** 컨텐츠 영역 ********** */ .paas_con {width:100%; height:calc(100% - 57px); overflow-y:auto; overflow-x:hidden; padding:0 30px 15px; margin-top:25px;} .paas_con.has_bottom_btn {position:relative; height:calc(100% - 107px);} .paas_con_bottom_btn {position:absolute; width:100%; padding:0 30px; left:0; bottom:0; height:48px; display:flex; justify-content:flex-end; align-content:center; align-items:center; background:#fff; box-shadow:0 -5px 10px rgba(0,0,0,0.05); z-index:10;} .paas_con_bottom_btn .fl {margin-right:auto;} .paas_con .dash_title {font-size:18px; font-weight:600; color:#000000; margin:40px 0 13px; position:relative; display:block; width:100%; line-height:1;} .paas_con ul.legend {position:absolute; right:0; bottom:0; padding:0; margin:0;} .paas_con ul.legend li {padding:0 0 0 15px; margin:0 0 0 20px; list-style:none; position:relative; line-height:20px; font-size:14px; font-weight:400; color:#6f6f6f; display:inline-block;} .paas_con ul.legend li:before {content:""; display:block; width:10px; height:10px; border-radius:5px; position:absolute; left:0; top:4px; background:#999;} .paas_con ul.legend li.status_normal:before {background:#32b552;} .paas_con ul.legend li.status_warning:before {background:#e3ad09;} .paas_con ul.legend li.status_danger:before {background:#ed6e5b;} /* 상단 정보 영역 */ .paas_con .top_info {display:flex; justify-content:space-between; padding:0;} .paas_con .top_info .ti_items {display:block;} .paas_con .top_info .ti_items .ti_item {display:inline-block; vertical-align:middle; margin-right:25px; margin-left:auto; margin-bottom:3px;} .paas_con .top_info .ti_items .ti_item label, .paas_con .top_info .ti_items .ti_item span, .paas_con .top_info .ti_items .ti_item small {display:inline-block; vertical-align:bottom;} .paas_con .top_info .ti_items .ti_item label {font-size:14px; font-weight:300; margin-right:2px;} .paas_con .top_info .ti_items .ti_item label:after {content:":"; display:inline-block; vertical-align:bottom;} .paas_con .top_info .ti_items .ti_item span {font-size:14px; font-weight:600;} .paas_con .top_info .ti_items .ti_item small {font-size:14px; font-weight:600;} .paas_con .top_info .ti_btn_area {} .paas_con .top_info .ti_btn_area a {padding:0 18px;} .paas_con .top_info .ti_btn_area button {padding:0 14px;} /* KPI 영역 */ .paas_con .kpi_area {display:flex; justify-content:space-between; margin-top:15px;} .paas_con .kpi_area .ka_item {width:calc(33% - 7px); border:1px solid #dcdcdc; padding:17px 29px 17px 27px; display:flex; justify-content:flex-start; align-items:center; border-radius:15px; background:#fff; align-items:center;} .paas_con .kpi_area .ka_item span {display:block; font-size:18px; font-weight:400; order:1; margin-right:48px;} .paas_con .kpi_area .ka_item strong {display:block; font-size:30px; font-weight:700; order:2; margin-right:48px;} .paas_con .kpi_area .ka_item .status_icon {height:24px; background:none; text-align:center; line-height:24px; border-radius:5px; order:3; font-size:30px; font-weight:700; margin-left:auto; padding-left:24px; position:relative;} .paas_con .kpi_area .ka_item .status_icon:before {font-weight:900; font-family:"Font Awesome 6 Free"; content:""; font-size:24px; display:inline-block; vertical-align:top; position:absolute; left:0; top:0;} .paas_con .kpi_area .ka_item .status_icon.status_ok {color:#32b552;} .paas_con .kpi_area .ka_item .status_icon.status_ok:before {content:"\f058";} .paas_con .kpi_area .ka_item .status_icon.status_warning {color:#ed6e5b; padding-left:37px;} .paas_con .kpi_area .ka_item .status_icon.status_warning:before {content:"\f071";} /* 서비스 상태 */ .paas_con .service_status {margin:20px 0 0;} .paas_con .service_status .ss_item {display:inline-block; padding:0 0 0 20px; position:relative; height:15px; font-size:14px; line-height:15px; margin-right:30px;} .paas_con .service_status .ss_item:before {content:""; display:block; width:14px; height:15px; position:absolute; left:0; top:0; color:#999; font-size:14px; font-weight:900; font-family:"Font Awesome 6 Free"; text-align:center; line-height:15px;} .paas_con .service_status .ss_item.healthy:before {content:"\f058"; color:#32b552;} .paas_con .service_status .ss_item.unhealthy {color:#ed6e5b;} .paas_con .service_status .ss_item.unhealthy:before {content:"\f071"; color:#ed6e5b;} /* 프로그래스바 상태 panel */ .paas_con .panel_group {display:flex; justify-content:space-between;} .paas_con .panel_group .panel_item {width:calc(33% - 7px); border:1px solid #dcdcdc; padding:25px 28px; border-radius:15px; background:#fff;} .paas_con .panel_group .panel_item .dash_subtitle {font-size:18px; margin:0 0 18px; text-transform:uppercase; color:#000; font-weight:600; line-height:1;} .paas_con .panel_group .panel_item .pregress_item {display:block; overflow:hidden;} .paas_con .panel_group .panel_item .pregress_item + .pregress_item {margin-top:10px;} .paas_con .panel_group .panel_item .pregress_item strong {font-size:14px; font-weight:400;} .paas_con .panel_group .panel_item .pregress_item strong small {display:inline-block; vertical-align:bottom; font-size:14px; font-weight:400; color:#808080; margin-left:20px;} .paas_con .panel_group .panel_item .pregress_item span {display:block; float:right; font-size:14px;} .paas_con .panel_group .panel_item .pregress_item .progress {height:10px; margin-bottom:0px; background-color:#eee; border-radius:5px; margin-top:4px; -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1); box-shadow:inset 0 1px 2px rgba(0,0,0,.1); position:relative} .paas_con .panel_group .panel_item .pregress_item .progress .progress-bar {float:left; width:0%; height:100%; color:#fff; background-color:#1aadd2; animation:2s linear infinite progress-bar-stripes;} .paas_con .panel_group .panel_item .pregress_item .progress .progress-bar.progress_primary {float:left; width:0%; height:100%; color:#fff; background-color:#00ca00; animation:2s linear infinite progress-bar-stripes;} .paas_con .panel_group .panel_item .pregress_item .progress .progress-bar.progress_warning {background-color:#e7b92e;} .paas_con .panel_group .panel_item .pregress_item .progress .progress-bar.progress_danger {background-color:#ff9b9b;} .paas_con .panel_group .panel_item .pregress_item .progress .progress-bar-striped { background-image: linear-gradient(45deg,rgba(255,255,255,.25) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.25) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent); background-size: 20px 20px } /* 좌우 10px 씩 더 넓은 와이드형 테이블 : 디자인 요청사항 */ .wide_grid {width:calc(100% + 20px); margin-left:-10px;} /* 테이블 탭 */ ul.paas_tab {padding:0; margin:40px 0 0; position:relative; top:1px; z-index:2; pointer-events:none;} ul.paas_tab li {display:inline-block; vertical-align:top; padding:0; margin:0 5px 0 0; list-style:none; pointer-events:auto;} ul.paas_tab li a {display:inline-block; padding:0 27px; transition:0.2s; height:40px; line-height:38px; font-size:16px; color:#2e2e2e; border:1px solid transparent; transition:0.2s; font-weight:600; border-radius:15px 15px 0 0;} ul.paas_tab li a:hover, ul.paas_tab li a.active {color:#1c4db6; border:1px solid #dcdce1; border-bottom-color:#fafafa; text-decoration:none; font-weight:600; background:#fafafa; position:relative;} ul.paas_tab li:nth-child(1) a:hover:before, ul.paas_tab li:nth-child(1) a.active:before {content:""; display:block; width:15px; height:15px; background:#fafafa; border-left:1px solid #dcdce1; position:absolute; left:-1px; bottom:-15px;} .paas_con_detail ul.paas_tab li a:hover, .paas_con_detail ul.paas_tab li a.active {background:#fafafa;} .paas_con_detail ul.paas_tab li:nth-child(1) a:hover:before, .paas_con_detail ul.paas_tab li:nth-child(1) a.active:before {background:#fafafa;} .paas_tab_con {padding:25px 25px; margin:0; border:1px solid #dcdce1; position:relative; border-radius:15px; background:#fafafa; box-shadow:0 5px 10px rgba(0,0,0,0.08);} .paas_tab_con.wide_grid_tab {padding:25px 15px !important;} .paas_tab_con .tab_top_btn {position:absolute; right:10px; top:-40px;} .paas_tab_con .tab_top_btn .btn_text:before {content:"\f061"; display:inline-block; vertical-align:middle; font-size:14px; font-weight:900; font-family:"Font Awesome 6 Free"; margin-right:12px;} /* 흰색 버전 */ ul.paas_tab.white_tab li a:hover, ul.paas_tab.white_tab li a.active {background:#fff;} .paas_tab_con.white_tab {background:#fff;} /* 상단 탭 */ ul.paas_tab.top_tab li a {font-size:22px; font-weight:600; height:45px; line-height:43px;} ul.paas_tab.top_tab + .paas_tab_con {padding:30px;} /* 검색 */ .paas_con .top_search_area {display:flex; justify-content:space-between; margin-bottom:10px;} .paas_con .top_search_area.flex-end {justify-content:flex-end;} .paas_con .top_search_area .grid_total_count {font-size:15px; color:#2e2e2e; margin-bottom:0; padding:0 0 0 8px; font-weight:400; top:5px;} .paas_con .top_search_area .grid_total_count:before {display:none;} .paas_con .top_search_area .grid_total_count strong {font-size:16px; color:#2b58e6;} .paas_con .top_search_area .search_item_area {display:block;} /* 테이블 검색 */ .paas_con .top_search_area .search_item .search_table {width:100%; position:relative; height:32px;} .paas_con .top_search_area .search_item .search_table label {width:32px; height:32px; line-height:32px; padding:0 12px; text-align:left; position:absolute; left:auto; right:0; top:0; z-index:2; cursor:pointer;} .paas_con .top_search_area .search_item .search_table label:before {content:"\ed11"; display:block; font-family:"icofont"; font-size:14px; color:#9299a7; line-height:30px; height:30px; width:27px; height:30px; position:absolute; right:1px; top:1px; text-align:center;} .paas_con .top_search_area .search_item .search_table input[type="search"] {height:30px; line-height:30px; padding:0 30px 0 10px; background:#e8e8e8; border:1px solid #e8e8e8; width:100%; color:#000; position:relative; z-index:1; transition:0.2s; border-radius:8px;} /* PaaS 검색 인풋: WebKit 기본 검색필드 + X버튼 복원 */ .paas_container input[type="search"].form_control {-webkit-appearance:searchfield !important; appearance:auto !important; padding-right:30px;} /* X버튼 자체 활성화 */ .paas_container input[type="search"].form_control::-webkit-search-cancel-button {-webkit-appearance:auto !important; appearance:auto !important; display:block; cursor:pointer;} .paas_con .top_search_area .search_item .search_table label:hover + input[type="search"], .paas_con .top_search_area .search_item .search_table input[type="search"]:focus {background:#fff !important; border-color:#2b58e6 !important;} .paas_con .top_search_area .function_items {} .paas_con .table_view {display:inline-flex; vertical-align:middle; margin-right:20px; justify-content:space-between;} .paas_con .table_view button {display:block; width:40px; height:32px; font-size:14px; border:1px solid #c9ccd0; border-radius:8px; background-color:#fff; color:#354052; text-align:center; line-height:30px; padding:0; vertical-align:middle;} .paas_con .table_view > button:hover {background:#f0f5ff;} .paas_con .table_view > button.active {color:#fff; background:#2b58e6; border-color:#2b58e6;} .paas_con .table_view > button.btn_list {font-size:14px; border-radius:8px 0 0 8px;} .paas_con .table_view > button.btn_folder {font-size:14px; border-radius:0 8px 8px 0;} .paas_con .table_view > button + button {margin-left:0;} /* .paas_con .table tr th {padding-right:13px;} */ .paas_con .table {margin:0; border-top:1px solid #505050;} .paas_con .table tr th {border-bottom:1px solid #d8d8d8; background-color:#f2f2f2; padding:12px 5px; color:#4b4b4b; font-weight:600;} .paas_con .table tr th, .paas_con .table tr td {position:relative; text-align:left;} .paas_con .table tr td {padding:12px 5px;} .paas_con .table .m_check > input[type=checkbox] + label {padding-left:18px;} .paas_con .table tr:hover td {background-color:#f4f7fc;} .paas_con .table tr th .m_check, .paas_con .table tr td .m_check {vertical-align:middle;} .paas_con .table tr td > a {color:#3d97d3;} .paas_con .table tr td > a:hover {color:#000; text-decoration:underline; text-underline-offset:2px;} /* 2 Depth Tab */ ul.paas_tab2 {padding:0; margin:0; font-size:0; display:flex; flex-wrap:wrap; row-gap:10px; column-gap:0;} ul.paas_tab2 li {padding:0; margin:0; list-style:none;} ul.paas_tab2 li a {display:inline-block; padding:0 30px; transition:0.2s; height:40px; line-height:38px; font-size:14px; color:#2e2e2e; background:#fff; transition:0.2s; border:1px solid #c9ccd0;} ul.paas_tab2 li a:hover {background:#f0f5ff; text-decoration:none;} ul.paas_tab2 li a.active {color:#fff; background:#2b58e6; border-color:#2b58e6;} ul.paas_tab2 li:not(:first-child) a {margin-left:-1px;} ul.paas_tab2 li:first-child a {border-radius:8px 0 0 8px;} ul.paas_tab2 li:last-child a {border-radius:0 8px 8px 0;} ul.paas_tab2 li a.radius_right {border-radius:0 8px 8px 0;} ul.paas_tab2 li.tab_link a {background:none; color:#3d97d3; border:none;} ul.paas_tab2 li.tab_link a:hover {text-decoration:underline;} ul.paas_tab2 li.tab_link a i {margin-left:5px;} .paas_tab_con2 {padding:20px; margin:0; border:none; position:relative; background:#fff; border-radius:15px;} .paas_tab_con2 .tab-pane {position:relative;} .paas_tab_con2 .tab-pane iframe {width:100%; height:100%;} .tab-pane .tab_space_between {display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;} .tab-pane .tab_space_between .form_area {} .tab-pane .tab_space_between .form_area .form_item {display:inline-block;} .tab-pane .tab_space_between .form_area .form_item + .form_item {margin-top:0; margin-left:10px;} .tab-pane .tab_space_between .form_area .form_item .form_label {margin-top:0;} /* 드롭다운 메뉴 */ .paas_container .dropdown .dropdown-menu {padding:11px 4px; border-radius:10px; overflow:hidden; min-width:200px;} .paas_container .dropdown .dropdown-menu li a.dropdown-item {padding:8px 17px; font-size:14px; color:#2e2e2e; background:#fff; border-radius:7px; box-sizing:border-box; display:block; width:100%; line-height:14px; font-weight:400;} .paas_container .dropdown .dropdown-menu li a.dropdown-item:hover {text-decoration:none; background:#eff4ff;} .paas_container .dropdown .dropdown-menu li a.dropdown-item i {margin-right:15px; min-width:16px;} .paas_container .dropdown .dropdown-divider {margin:3px 0; width:calc(100% + 14px); margin-left:-7px;} .dropdown-portal.dropdown-menu {padding:11px 4px; border-radius:10px; overflow:hidden; min-width:200px;} .dropdown-portal.dropdown-menu li a.dropdown-item {padding:8px 17px; font-size:14px; color:#2e2e2e; background:#fff; border-radius:7px; box-sizing:border-box; display:block; width:100%; line-height:14px;} .dropdown-portal.dropdown-menu li a.dropdown-item:hover {text-decoration:none; background:#eff4ff;} .dropdown-portal.dropdown-menu li a.dropdown-item i {margin-right:15px;} .dropdown-portal.dropdown-divider {margin:3px 0; width:calc(100% + 14px); margin-left:-7px;} .sort_btn_area {position:relative; display:inline-block; vertical-align:middle; margin-left:6px; width:10px; height:20px;} .sort_btn {background:none; border:none; cursor:pointer; font-size:11px; color:#ccc; position:absolute; right:2px; top:50%; transform:translateY(-50%); padding:0; width:10px; height:6px; overflow:hidden;} .sort_btn:before {font-family:"Font Awesome 6 Free"; font-weight:900; content:""; position:absolute; width:100%; height:6px; display:block;} /* 오름차순 화살표 */ .sort_btn[data-sort="asc"] {margin-top:-5px;} .sort_btn[data-sort="asc"]::before {content:'\f077'; left:0; top:-4px;} /* 내림차순 화살표 */ .sort_btn[data-sort="desc"] {margin-top:4px;} .sort_btn[data-sort="desc"]::before {content:'\f078'; left:0; bottom:5px;} /* 선택된 정렬 상태 */ th.sorted_asc .sort_btn[data-sort="asc"], th.sorted_desc .sort_btn[data-sort="desc"] {color:#000; /* 정렬된 상태에서 색상 변경 */} .paas_con .dropdown-toggle.btn_icon.icon_more {background:url(../images/paas/icon_more.png) no-repeat center center; border:none; width:25px; height:25px; border-radius:5px;} .paas_con .dropdown-toggle.btn_icon.icon_more:after {display:none;} .paas_con .dropdown-toggle.btn_icon.icon_more:hover, .paas_con .dropdown-toggle.btn_icon.icon_more:focus{background:#e8e8e8 url(../images/paas/icon_more.png) no-repeat center center; border:none;} /* 폴더 테이블 */ .table_folder_style .table {background:#e9e9e9; color:#2e2e2e;} .table_folder_style .table tbody.group {border-left:2px solid #e9e9e9; border-right:2px solid #e9e9e9; border-radius:0 10px 10px 10px;} .table_folder_style .table tbody.group:last-child {border-bottom:10px solid #e9e9e9;} .table_folder_style .table tbody.group:before {content:""; display:block; height:10px; background:transparent;} .table_folder_style .table tbody.group tr.group-row td {background:transparent; padding:0; border:none;} .table_folder_style .table tbody.group tr.group-row td .group-tab {background:#fff; height:45px; padding:0 5px 0 15px; position:relative; line-height:45px; display:inline-block; margin:0; border-radius:10px 0 0 0;} .table_folder_style .table tbody.group tr.group-row td .group-tab:after {content:""; display:block; width:0; height:0; position:absolute; left:100%; top:0; border-bottom:45px solid #fff; border-top:45px solid transparent; border-left:45px solid #fff; border-right:45px solid transparent;} .table_folder_style .table tbody.group tr.group-row td .group-tab span {font-weight:700;} .table_folder_style .table tbody.group tr.group-row + tr td:last-child {border-radius:0 10px 0 0;} .table_folder_style .table tbody.group tr:last-child td:first-child {border-radius:0 0 0 10px;} .table_folder_style .table tbody.group tr:last-child td:last-child {border-bottom-right-radius:10px !important;} .table_folder_style .table tbody.group tr td p {margin:0;} .table_folder_style .table tbody.group tr tdstrong {font-weight:400; color:#666;} .table_folder_style .table tr th:nth-child(1), .table_folder_style .table tr td:nth-child(1) {padding-left:15px;} /* 상세페이지 패널 */ .paas_con_detail {background:#fff; padding:25px; border-radius:0 10px 10px 10px; margin-top:50px;} /* 페이지 상단 영역 */ .m_btn.paas_active {padding:0 12px; height:22px; line-height:22px; font-size:13px; color:#5d995d; border:1px solid #5d995d; border-radius:13px; background:#fff; font-style:normal;} .paas_top_area {display:flex; justify-content:space-between; flex-wrap:wrap; margin-bottom:15px; margin-top:-75px; width:calc(100% + 50px); margin-left:-25px; padding-bottom:15px; position:relative;} .paas_top_area:after {content:""; display:block; width:calc(100% - 50px); position:absolute; left:25px; bottom:0; height:1px; background:#d0d0d0;} .paas_top_area.border_none:after {display:none;} .paas_top_area .p_title {display:inline-block; font-size:24px; margin:0; font-weight:500; min-height:50px; flex:0 0 auto; background:#fff; padding:20px 100px 0 25px; position:relative; line-height:1; display:inline-block; margin:0; border-radius:10px 0 0 0;} .paas_top_area .p_title:after {content:""; display:block; width:0; height:0; position:absolute; left:100%; top:0; border-bottom:30px solid #fff; border-top:45px solid transparent; border-left:45px solid #fff; border-right:45px solid transparent;} .paas_top_area .p_title a {color:#3d97d3; transition:0.2s;} .paas_top_area .p_title a:hover {color:#000; text-decoration:underline; text-underline-offset:2px;} .paas_top_area .p_title strong {display:block; font-size:14px; font-weight:400; margin-top:18px;} .paas_top_area .p_title strong span {display:inline-block;} .paas_top_area .p_title strong span + span{margin-left:45px;} .paas_top_area .p_title strong span a {display:inline-block; margin-left:2px;} .paas_top_area .p_title strong span small {display:inline-block; margin-left:2px; font-size:14px;} .p_title_info {border-bottom:1px solid #d0d0d0; margin-bottom:15px; padding-bottom:15px;} .p_title_info div {display:block;} .p_title_info div + div {margin-top:7px;} .p_title_info div label {font-size:14px; font-weight:400; display:inline-block; margin-right:5px; vertical-align:middle;} .p_title_info div span {font-weight:400;} .p_title_info div span.info_item {color:#000; background:#e5ebfb; height:20px; line-height:20px; padding:0 12px; border-radius:10px; display:inline-block; font-weight:400;} .p_title_info div a {display:inline-block; vertical-align:middle;} .p_title_info div a.copy_url {padding-right:20px; background:url(../images/paas/icon_copy.png) no-repeat right center;} .p_title_info div span + label, .p_title_info div a + label {margin-left:40px;} .p_title2 {font-size:24px; font-weight:700; padding:10px 0 20px; margin:0; line-height:30px; position:relative; margin:0;} .p_title2 .p_title2_info {font-size:14px; font-weight:400; margin-top:15px; display:block;} .show_more_area {margin-top:15px;} .show_more_area .copy_area {position:relative; border:1px solid #dcdcdc; border-radius:5px; padding:10px 12px;} .show_more_area .copy_area .btn_copy {position:absolute; right:10px; top:10px;} .show_more_area .copy_area h5 {font-size:14px; font-weight:500;} .show_more_area .copy_area p {font-size:12px; margin:0;} .show_more_area .copy_area p + p {margin-top:5px;} .pop_tab_has_btn {position:relative;} .pop_tab_has_btn .function_area {position:absolute; right:10px; top:0; flex:0 0 auto;} .pop_tab_has_btn .function_area .btn-group {display:inline-flex; vertical-align:middle; margin-right:11px; justify-content:space-between;} .pop_tab_has_btn .function_area .btn-group .btn, .pop_tab_has_btn .function_area .btn-group .m_btn {display:block; width:auto; height:32px; font-size:14px; border:1px solid #c9ccd0; background-color:#fff; color:#354052; text-align:center; line-height:30px; padding:0; vertical-align:middle; padding:0 15px;} .pop_tab_has_btn .function_area .btn-group .btn#btnCodeView, .pop_tab_has_btn .function_area .btn-group .btn#btnCodeBlind {padding:0 10px;} .pop_tab_has_btn .function_area .btn-group .btn:hover {background:#f0f5ff;} .pop_tab_has_btn .function_area .btn-group .btn.active {color:#fff; background:#2b58e6; border-color:#2b58e6;} .pop_tab_has_btn .function_area .btn-group .btn:first-child {border-radius:8px 0 0 8px;} .pop_tab_has_btn .function_area .btn-group .btn:last-child {border-radius:0 8px 8px 0;} .pop_tab_has_btn .function_area .btn-group .m_btn:hover {background:#2b58e6; color:#fff;} .pop_tab_has_btn .function_area .btn-group .m_btn {border-radius:0;} .pop_tab_has_btn .function_area .btn-group .m_btn + .m_btn {margin-left:0; border-left:none;} .pop_tab_has_btn .function_area .btn-group .m_btn:first-child {border-radius:8px 0 0 8px;} .pop_tab_has_btn .function_area .btn-group .m_btn:last-child {border-radius:0 8px 8px 0;} .paas_top_area .function_area .dropdown {display:inline-block; margin-left:2px;} .paas_top_area .function_area .dropdown-toggle.btn_icon.icon_more {border:1px solid #c9ccd0; border-radius:8px; background-color:#fff; color:#2e2e2e; width:40px; height:32px;} .paas_top_area .function_area .dropdown-toggle.btn_icon.icon_more:hover {background-color:#f0f5ff; color:#1942cb;} .paas_top_area .function_area [id*="btnCode"] i {margin-right:0;} .info_bar {height:40px; line-height:40px; background:#f5f5f5; color:#000; border-left:5px solid #666; padding:0 18px; flex:0 0 calc(100% - 50px); align-self:stretch; margin:10px 0 0 25px;} .info_bar + .info_bar {margin-top:10px;} .info_bar span {display:inline-block; vertical-align:top;} .info_bar span + span {margin-left:30px;} .info_bar.ib_primary {background:#e7f5ff; border-color:#3685f5;} .info_bar.ib_success {background:#e6f3f3; border-color:#64c097;} .info_bar.ib_warning {background:#f4f3e9; border-color:#eac206;} .info_bar.ib_danger {background:#fff0f5; border-color:#d94769;} .paas_con_detail ul.paas_tab {margin-top:30px;} /* 탭영역 텍스트 박스(Copy) */ .paas_container .force-wrap {border:1px solid #dcdcdc; padding:15px 0 15px 15px; width:100%; max-height:350px; position:relative; overflow-y:auto; overflow-x:hidden; border-radius:8px; background:#fff; transition:0.2s;} .paas_container .force-wrap h5 {font-size:13px; font-weight:400; margin:0 0 10px;} .paas_container .force-wrap .monospace {font-size:15px; color:#000; line-height:24px;} .paas_container .force-wrap .monospace.code_blind {-webkit-text-security:disc; /* disc, circle, square, none 옵션 활용 가능 */ letter-spacing:-0.4px;} .paas_container .force-wrap.force-wrap-focus {border-color:#2b58e6;} .paas_container .force-wrap textarea.form_control {height:calc(100% - 28px); font-size:13px; line-height:18px; border:none; resize:none; padding:0 15px 0 0; min-height:280px; background:transparent;} .paas_container .force-wrap a {display:inline-block; margin-left:10px;} .paas_container .force-wrap .btn_copy {position:absolute; right:10px; top:10px; background:#ebeef7; border-color:#c9ccd0;} .paas_container .force-wrap .btn_copy:hover {color:#1b45cb; border-color:#c9ccd0; background:#f0f5ff;} .paas_container .force-wrap .btn_copy.btn-success {color:#fff; border-color:#2b58e6; background-color:#2b58e6;} .paas_container .force-wrap .btn_copy i {display:none;} .paas_container .force-wrap.disabled {background:#e8e9ef; cursor:not-allowed; padding:15px:} /* 디테일 탭 컨텐트 */ .paas_con_detail .paas_tab_con {padding:30px 30px; background:#fafafa;} .paas_con_detail .paas_tab_con .tab_subtitle {font-size:18px; line-height:24px; color:#000; font-weight:500; margin-bottom:15px;} .paas_con_detail .paas_tab_con .tab-pane p {font-size:14px; line-height:24px; color:#000; font-weight:400;} .paas_container .paas_con_detail .paas_tab_con .form_area .form_item .form_label {font-size:14px; line-height:24px; color:#000; font-weight:400;} /* 폼 양식 */ .form_panel {padding:15px 20px; position:relative; width:100%; margin-bottom:20px; display:inline-block; background:#fff; border:1px solid #efeeee; border-radius:10px; -webkit-column-break-inside:avoid; -moz-column-break-inside:avoid; column-break-inside:avoid; opacity:1; transition:all .2s ease; box-shadow:0 8px 24px rgba(0, 0, 0, 0.05);} .form_panel:hover {box-shadow:0 8px 15px rgba(0, 0, 0, 0.12);} .form_panel.type_gray {background:#f5f5f5; box-shadow:none; border:none;} .form_panel.type_gray:hover {box-shadow:none;} .inter_link_con .form_area:after, .paas_tab_con .form_area:after, .pop_pass .form_area:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} .inter_link_con .form_area .row, .paas_tab_con .form_area .row, .pop_pass .form_area .row, .pp_panel .row {margin-left:-5px; margin-right:-5px;} .inter_link_con .form_area .row [class*="col"], .paas_tab_con .form_area .row [class*="col"], .pop_pass .form_area .row [class*="col"], .pp_panel .row [class*="col"] {margin:0 0 10px; padding-right:5px; padding-left:5px;} .paas_tab_con .form_area .row.gap20 {margin-left:-10px; margin-right:-10px;} .paas_tab_con .form_area .row.gap20 [class*="col"] {padding-left:10px; padding-right:10px;} .paas_tab_con .form_area .row.gap30 {margin-left:-15px; margin-right:-15px;} .paas_tab_con .form_area .row.gap30 [class*="col"] {padding-left:15px; padding-right:15px;} .paas_tab_con .form_area .row.gap40 {margin-left:-20px; margin-right:-20px;} .paas_tab_con .form_area .row.gap40 [class*="col"] {padding-left:20px; padding-right:20px;} .paas_tab_con .form_area .row.gap10 {margin-left:-5px; margin-right:-5px;} .paas_tab_con .form_area .row.gap10 [class*="col"] {padding-left:5px; padding-right:5px;} .pop_pass .form_area .row.gap20 {margin-left:-10px; margin-right:-10px;} .pop_pass .form_area .row.gap20 [class*="col"] {padding-left:10px; padding-right:10px;} .pop_pass .form_area .row.gap30 {margin-left:-15px; margin-right:-15px;} .pop_pass .form_area .row.gap30 [class*="col"] {padding-left:15px; padding-right:15px;} .pop_pass .form_area .row.gap40 {margin-left:-20px; margin-right:-20px;} .pop_pass .form_area .row.gap40 [class*="col"] {padding-left:20px; padding-right:20px;} .pop_pass .form_area .row.gap10 {margin-left:-5px; margin-right:-5px;} .pop_pass .form_area .row.gap10 [class*="col"] {padding-left:5px; padding-right:5px;} .modal-content .tab-content.paas_tab_con {padding:20px 20px 20px;} .modal-content .tab-content.paas_tab_con .form_area .m_radio {min-height:20px;} /* PaaS 신규 폼양식 */ .form_item.has_form {background:#fff; padding:8px 14px 5px; border:1px solid #dcdcdc; border-radius:8px; transition:0.2s; position:relative;} .form_item.has_form.has_disabled {background:#e9edf1;} .form_area .form_item.has_form .form_label {margin:0 0 2px; transition:0.2s; padding-right:0;} .form_item.has_form .form_label {color:#5a5a5a; font-weight:400;} .form_item.has_form .form_control, .form_item.has_form .form-control, .form_item.has_form .select2-container--default.select2-container--disabled .select2-selection--single {border-color:transparent !important; background:none; padding:0;} .form_item.has_form .select2-container--default.select2-container--disabled .select2-selection--single {padding-right:30px;} .form_item.has_form .select2-container--default .select2-selection--single .select2-selection__rendered {padding:0; min-width:auto;} .form_item.has_form .form_control:disabled, .form_item.has_form .form-control:disabled {background-color:#e9edf1 !important;} .form_item.has_form .select2-container--default .select2-selection--single, .form_item.has_form .select2-container--default .select2-selection--multiple {border-color:transparent !important; background:none; padding:0;} .form_item.has_form .select2-container {min-width:auto; width:calc(100% + 2px) !important;} .form_item.has_form .select2-container .select2-dropdown {width:100% !important; transform:translate(-16px,0); box-shadow:0 10px 10px rgb(0,0,0,0.1); border:1px solid #2b58e6; border-top:none; border-radius:0 0 8px 8px; overflow:hidden;} /* 항상 아래로 */ .form_item.has_form .select2-container--open {top:calc(100% - 5px) !important; bottom:auto !important;} /* 드롭다운 변경 */ .form_item.has_form .select2-search--dropdown {padding:4px 4px;} .form_item.has_form .select2-container--default .select2-results__option {padding:6px 12px;} .select2-search--dropdown {} .form_item.has_form .select2-container--default .select2-results__option--selected {background-color:#d9e2f7;} .form_item.has_form .select2-container--default .select2-results__option[aria-selected=true] {background-color:#eff4ff;} .form_item.has_form .select2-container--default .select2-results__option--highlighted[aria-selected] {color:#000; background-color:#eff4ff;} /* 화살표 위치 */ .form_item.has_form .select2-container--default .select2-selection--single .select2-selection__arrow {right:-9px;} .form_item.has_form select.form-control {background:url(../images/icon/chevron-down.png) no-repeat right 6px center; background-size:13px 8px; width:calc(100% + 14px);} .form_item.has_form select.form-control:focus {background:url(../images/icon/chevron-down-up.png) no-repeat right 6px center; background-size:13px 8px;} .form_item.has_form .select2-container--default .select2-selection--single .select2-selection__arrow:after {content:""; background:url(../images/icon/chevron-down.png) no-repeat center center; background-size:13px 8px; right:5px;} .form_item.has_form .select2-container--open .select2-selection--single .select2-selection__arrow:after {content:""; background:url(../images/icon/chevron-down-up.png) no-repeat center center; background-size:13px 8px;} /* ********** 멀티 화살표 ********** */ /* multiple selection 박스에 여유 공간 */ .form_item.has_form .select2-container--default .select2-selection--multiple { position: relative; padding-right: 28px; /* 아이콘 자리 */ min-height: 34px; /* 필요시 높이 보정 */ } /* 닫힘 상태 화살표 */ .form_item.has_form .select2-container--default .select2-selection--multiple::after { content: ""; position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 13px; height: 8px; background: url(../images/icon/chevron-down.png) no-repeat center / contain; pointer-events: none; } /* 열림 상태 아이콘 교체 */ .form_item.has_form .select2-container--open .select2-selection--multiple::after { background-image: url(../images/icon/chevron-down-up.png); } /* 포커스 & 호버시 */ .form_item.has_form.hover_form {border-color:#2b58e6;} .form_item.has_form.hover_form .form_label {color:#2b58e6;} /* disabled */ .form_item.has_form.disabled_form {background:#e8e9ef !important; pointer-events:none; border-color:#dcdcdc;} .paas_container ::placeholder {color:#999ea7;} /* 세로형 탭 */ .paas_tab_vertical {display:flex; justify-content:space-between; background:#f4f5fa; border-radius:10px; box-shadow:0 0 15px rgba(0,0,0,0.15); transition:0.2s; border:1px solid #efeeee; box-shadow:0 8px 24px rgba(0, 0, 0, 0.05);} .paas_tab_vertical:hover {box-shadow:0 8px 15px rgba(0, 0, 0, 0.12);} .paas_tab_vertical .ptab_nav {width:200px;} .paas_tab_vertical .ptab_nav button {width:100%; height:36px; line-height:36px; background:transparent; padding:0 15px; border:none; border-left:4px solid transparent; font-size:13px; color:#000;} .paas_tab_vertical .ptab_nav button.active {background:#fff; border-color:var(--color-button-active); color:#3d97d3;} .paas_tab_vertical .tab-content {width:calc(100% - 200px); background:#fff; padding:20px 0 20px 20px; border-radius:0 10px 10px 0;} .paas_tab_vertical .tab-content > .tab-pane {padding:0 20px 0 0; max-height:calc(100vh - 489px); overflow-x:hidden; overflow-y:auto;} .paas_tab_vertical .tab_title {color:#000; font-size:18px; font-weight:700; margin-bottom:15px;} .paas_tab_vertical .tab_subtitle {color:#000; font-size:15px; font-weight:400; margin-bottom:10px;} .paas_tab_vertical p {color:#666; font-size:14px;} .paas_tab_vertical .form_area .row [class*="col-"] {margin:0 0 10px;} .code_editor {width:100%; min-height:500px; background:#f4f5fa; border-radius:15px; border:1px solid #dcdce1; overflow:hidden;} /* 툴팁 */ .tooltip-item {display:inline-block; margin:0 5px; vertical-align:middle;} .tooltip_trigger {cursor:pointer;} .paas_container .tooltip-item {color:#1871ea;} /* paas panel */ .p_panel {background:#fff; border-radius:10px; padding:25px; position:relative;} .p_panel.full_panel {min-height:100%;} .p_panel.has_btn {padding-bottom:77px;} .p_panel.has_btn .btn_area {position:absolute; right:25px; bottom:25px;} /* Installed Apps Detail */ .ia_detail {} .ia_detail .ia_top {display:flex; justify-content:space-between; align-items:center; padding-bottom:15px; margin-bottom:20px; border-bottom:1px solid #d0d0d0;} .ia_detail .ia_top .ia_title_area {display:flex; justify-content:space-between; align-items:flex-start;} .ia_detail .ia_top .ia_title_area img {margin-right:8px; height:40px; width:auto;} .ia_detail .ia_top .ia_title_area .iat_txt {} .ia_detail .ia_top .ia_title_area .iat_txt h3.ia_title {font-size:24px; font-weight:500; line-height:24px; margin:0; display:inline-block; vertical-align:middle;} .ia_detail .ia_top .ia_title_area .iat_txt .p_charts_use_target {margin-left:12px; vertical-align:middle; display:inline-block;} .ia_detail .ia_top .ia_title_area .iat_txt p {display:block; width:100%; font-size:14px; margin:1px 0 0; line-height:18px; min-height:18px;} .ia_detail ul.ia_location {padding:0; margin:0; display:flex; justify-content:flex-start; align-items:flex-start; position:relative; width:545px;} /* 중앙 라인: 첫 동그라미 중심 ~ 마지막 동그라미 중심까지만 */ .ia_detail ul.ia_location li {list-style:none; position:relative; z-index:1; /* 동그라미가 라인 위에 나오도록 */ width:33.33%;} .ia_detail ul.ia_location li:nth-child(1) {text-align:left; z-index:3;} .ia_detail ul.ia_location li:nth-child(2) {text-align:center; z-index:2;} .ia_detail ul.ia_location li:nth-child(3) {text-align:right; z-index:1;} .ia_detail ul.ia_location li a {display:inline-block; padding:25px 10px 0; position:relative; font-size:14px; color:#2e2e2e; text-align:center; transition:0.2s;} /* 동그라미 */ .ia_detail ul.ia_location li a::before {content:""; display:block; width:15px; height:15px; background:#fff; border:2px solid #5c5c5c; border-radius:50%; position:absolute; left:50%; top:0; transform:translateX(-50%); transition:0.2s;} .ia_detail ul.ia_location li.done a {color:#aaa;} .ia_detail ul.ia_location li.done a:before {background-color:#90d4fa; border-color:#90d4fa;} .ia_detail ul.ia_location li a:hover, .ia_detail ul.ia_location li.active a {color:#2b58e6; text-decoration:none;} .ia_detail ul.ia_location li a:hover::before, .ia_detail ul.ia_location li.active a::before {border-color:#1559ef; background-color:#1559ef;} .ia_detail ul.ia_location li:before {content:""; display:block; height:1px; background:#d0d0d0; position:absolute; right:34px; top:7px;} .ia_detail ul.ia_location li:nth-child(1):before {display:none;} .ia_detail ul.ia_location li:nth-child(2):before {width:235px; right:90px;} .ia_detail ul.ia_location li:nth-child(3):before {width:225px; right:51px;} .ia_detail ul.ia_location li.done + li.active:before {height:3px; top:6px; background: linear-gradient(to right, #90d4fa 0%,#1559ef 100%);} .ia_detail ul.ia_location li.done + li.done:before {height:3px; top:6px; background:#90d4fa;} .ia_detail .ia_subtit_area {margin:0 0 35px;} .ia_detail .ia_subtit_area .ia_subtit {font-size:24px; font-weight:500; display:inline-block; vertical-align:bottom; margin-bottom:0;} .ia_detail .ia_subtit_area span {display:inline-block; vertical-align:bottom; margin-left:35px; font-size:14px; font-weight:400;} .ia_detail .ia_con {} .ia_detail .ia_con p.check_info {font-size:14px; margin:0 0 0 10px;} /* Create Cluster */ ul.create_cluster_lst {padding:0; margin:0; display:flex; justify-content:flex-start; flex-wrap:wrap;} ul.create_cluster_lst li {padding:0; margin:0; list-style:none; width:calc((100% - 45px) / 4); border:1px solid #dcdcdc; border-left:15px solid #999; border-radius:15px; overflow:hidden; margin-right:15px; margin-bottom:20px; transition:0.3s;} ul.create_cluster_lst li:nth-child(4n) {margin-right:0;} ul.create_cluster_lst li:hover {box-shadow:0 5px 10px rgba(0,0,0,0.1);} ul.create_cluster_lst li.use_kubernetes {border-left-color:#2591ec;} ul.create_cluster_lst li.use_rke2 {border-left-color:#856dee;} ul.create_cluster_lst li.use_existing_nodes {border-left-color:#000000;} ul.create_cluster_lst li.use_kubernetes:hover {border-color:#2591ec;} ul.create_cluster_lst li.use_rke2:hover {border-color:#856dee;} ul.create_cluster_lst li.use_existing_nodes:hover {border-color:#000000;} ul.create_cluster_lst li button {border:none; background:#fff; display:flex; width:100%; padding:0 20px 0 40px; align-items:center; width:100%; min-height:100px; transition:0.3s;} ul.create_cluster_lst li button img {max-width:55px; margin-right:30px;} ul.create_cluster_lst li button strong {display:inline-block; font-size:18px; font-weight:700; color:#2e2e2e;} /* Charts 메뉴 */ .paas_charts_filter {margin-bottom:40px; overflow:hidden;} .paas_charts_filter .form_control {} ul.cluster_chart_lst {padding:0; margin:0; display:flex; justify-content:flex-start; flex-wrap:wrap;} ul.cluster_chart_lst li {padding:0; margin:0; list-style:none; width:calc((100% - 60px) / 3); border:1px solid #dcdcdc; border-left:15px solid #999; border-radius:15px; overflow:hidden; margin-right:30px; margin-bottom:25px; transition:0.3s;} ul.cluster_chart_lst li:nth-child(3n) {margin-right:0;} ul.cluster_chart_lst li:hover {box-shadow:0 5px 10px rgba(0,0,0,0.1);} ul.cluster_chart_lst li.use_repository1 {border-left-color:#2591ec;} ul.cluster_chart_lst li.use_repository2 {border-left-color:#ecb125;} ul.cluster_chart_lst li.use_repository1:hover {border-color:#2591ec;} ul.cluster_chart_lst li.use_repository2:hover {border-color:#ecb125;} .p_charts_use_target {display:inline-block; padding:0 18px; height:20px; line-height:19px; border-radius:10px; background:#999; color:#fff; font-weight:600; font-size:14px;} .p_charts_use_target.type_linux {background:#e8f5fb; color:#54acdf;} .p_charts_use_target.type_window {background:#5a86de; color:#fff;} ul.cluster_chart_lst li button {border:none; background:#fff; display:block; width:100%; padding:17px 19px 50px 92px; width:100%; min-height:160px; transition:0.3s; position:relative; text-align:left;} ul.cluster_chart_lst li button img {max-width:48px; position:absolute; left:20px; top:19px;} ul.cluster_chart_lst li button strong {display:block; font-size:18px; font-weight:700; color:#2e2e2e; margin:0 0 13px;} ul.cluster_chart_lst li button p {display:block; font-size:14px; font-weight:400; color:#2e2e2e; line-height:18px; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; word-break:break-all; height:36px;} ul.cluster_chart_lst li button .p_charts_use_target {position:absolute; right:19px; bottom:16px;} /* 내부링크 포함 폼양식 */ .has_inter_link_area {width:100%; position:relative;} .has_inter_link_area ul.inter_link_area {width:220px; max-height:100%; overflow-y:auto; overflow-x:hidden; padding:10px 25px 20px 25px; margin:0; position:fixed; right:30px; top:187px; background:#f0f6ff; background:#fff; border:1px solid #c5d0e7; border-radius:15px; box-shadow:0 5px 10px rgba(0,0,0,0.08);} .has_inter_link_area ul.inter_link_area:before {content:"Step"; display:block; width:calc(100% + 20px); height:40px; line-height:40px; font-size:17px; font-weight:700; color:#2e2e2e; padding:0 10px; border-bottom:1px solid #c5d0e7; margin-left:-10px;} .has_inter_link_area ul.inter_link_area:after {content:""; display:block; width:1px; height:calc(100% - 127px); background:#c6d4f1; position:absolute; left:32px; top:73px;} .has_inter_link_area ul.inter_link_area li {padding:0; margin:10px 0; list-style:none; position:relative; z-index:2;} .has_inter_link_area ul.inter_link_area li a {padding:5px 0 5px 21px; position:relative; display:block; width:100%; color:#2e2e2e; font-weight:400;} .has_inter_link_area ul.inter_link_area li a:before {content:""; display:block; width:15px; height:15px; border-radius:8px; background:#fff; border:5px solid #c6d4f1; position:absolute; left:0; top:7px; transition:0.2s;} .has_inter_link_area ul.inter_link_area li a.active {} .has_inter_link_area ul.inter_link_area li a.active:before, .has_inter_link_area ul.inter_link_area li a:hover:before {border-color:#0a53be; background:#fff;} .has_inter_link_area ul.inter_link_area li a.active, .has_inter_link_area ul.inter_link_area li a:hover {color:#1d4aaf; font-weight:400; text-decoration:none;} .has_inter_link_area .inter_link_con {width:calc(100% - 210px); height:100%; overflow-y:auto; position:relative; padding-right:20px;} .has_inter_link_area .inter_link_con .inter_link_item {min-height:calc(100vh - 240px); box-shadow:0 5px 10px rgba(0,0,0,0.08);} .inter_link_con section.inter_link_item + section.inter_link_item {margin-top:55px;} .inter_link_con {padding-top:40px;} .inter_link_con .link_title {font-size:22px; line-height:22px; color:#1d4aaf; font-weight:700; margin:0; position:absolute; left:-1px; top:-40px; background:#fff; border-radius:15px 15px 0 0; padding:15px 25px 0; height:40px; border:1px solid #dcdce1; border-bottom:none;} .link_subtitle {color:#000; font-size:18px; font-weight:700; margin-bottom:10px;} .link_subtitle2 {color:#000; font-size:16px; font-weight:700; margin-bottom:10px;} .inter_link_con section.inter_link_item {border:1px solid #dcdce1; border-radius:0 15px 15px 15px; padding:20px 25px; background:#fff; position:relative;} .inter_link_con .btnArea {margin-top:10px; text-align:left;} /* Cluster Agent */ .inter_link_con .custom_node_affinity {margin:30px 0 0;} .selector_setting {padding:20px; border-radius:10px; border:none; position:relative; background:#f5f5f5;} .selector_setting.type_white {background:#fff;} .selector_setting.type_gray {background:#f5f5f5;} .selector_setting + .selector_setting {margin-top:20px;} .selector_setting .btn_close_setting {width:40px; height:40px; border:none; background:none; text-indent:-9999px; position:absolute; right:0; top:0; text-align:center; background:url(../images/icon/btn_pop_close.png) no-repeat center center; background-size:14px auto;} .selector_setting .btn_close_setting:hover {background:url(../images/icon/btn_pop_close_hover.png) no-repeat center center;} /* PaaS 폼양식 */ .paas_container input.form_control {line-height:38px;} .paas_container .has_form input.form_control {line-height:28px;} .paas_container .form_area {} .paas_container .form_area .form_group {display:flex; justify-content:space-between; width:100%; align-items:flex-start; float:none; float:none; gap:10px;} .paas_container .form_area .form_group .form_item {} .paas_container .form_area .form_group .form_item + .form_item {margin-top:0;} .paas_container .form_area .form_group .btn-delete {margin-bottom:2px;} .paas_container .form_area .m_radio {min-height:21px;} .paas_container .form_area .form_item .form_label {display:block; width:100%; color:#666; text-align:left; margin-bottom:5px;} .paas_container .form_area .form_item .form-control, .paas_container .form_area .form_item .form_control, .paas_container .form_area .form_item span.text_info, .paas_container .form_area .form_item .input-group, .paas_container .form_area .form_item .form_group {width:100%;} /* 팝업 */ .pop_pass .form_area .form_group {display:flex; justify-content:space-between; width:100%; align-items:flex-start; float:none; float:none; gap:10px;} .pop_pass .form_area .form_group .form_item {} .pop_pass .form_area .form_group .form_item + .form_item {margin-top:0;} .pop_pass .form_area .form_group .btn-delete {margin-bottom:2px;} .pop_pass .form_area .form_item.has_form .form_label {display:block; width:100%; color:#666; text-align:left; margin-bottom:5px; float:none;} .pop_pass .form_area .form_item.has_form .form-control, .pop_pass .form_area .form_item.has_form .form_control, .pop_pass .form_area .form_item.has_form span.text_info, .pop_pass .form_area .form_item.has_form .input-group, .pop_pass .form_area .form_item.has_form .form_group {width:100%;} /* 그외 페이지 */ .pass_style .form_area .form_group {display:flex; justify-content:space-between; width:100%; align-items:flex-start; float:none; float:none; gap:10px;} .pass_style .form_area .form_group .form_item {} .pass_style .form_area .form_group .form_item + .form_item {margin-top:0;} .pass_style .form_area .form_group .btn-delete {margin-bottom:2px;} .pass_style .form_area .form_item.has_form .form_label {display:block; width:100%; color:#666; text-align:left; margin-bottom:5px; float:none;} .pass_style .form_area .form_item.has_form .form-control, .pass_style .form_area .form_item.has_form .form_control, .pass_style .form_area .form_item.has_form span.text_info, .pass_style .form_area .form_item.has_form .input-group, .pass_style .form_area .form_item.has_form .form_group {width:100%;} .form_area .form_item_origin {font-size:0; margin-top:10px;} .form_area .row [class*="col"] > .form_item_origin {margin-top:0;} .form_area .form_item_origin .form_label {line-height:30px; margin-top:0; display:inline-block; vertical-align:top; margin-top:5px;} .form_area .form_item_origin .form_label.block {text-align:left; margin-top:0; width:100%; float:none;} .form_area .form_item_origin .form_control, .form_area .form_item_origin .form-control, .pop_pass .form_area .form_item_origin .form_control, .pop_pass .form_area .form_item_origin .form-control {line-height:40px; height:40px; width:100%; float:none;} .paas_container .form_area .form_item_origin .form_control, .paas_container .form_area .form_item_origin .form-control, .pop_pass .form_area .form_item_origin .form_control, .pop_pass .form_area .form_item_origin .form-control, .pass_style .form_area .form_item_origin .form_control, .pass_style .form_area .form_item_origin .form-control {float:left;} /* Setting 화면 */ .pta_setting .paas_top_area {padding-bottom:0; margin-bottom:0;} .pta_setting .paas_top_area:after {display:none;} .pta_setting .paas_top_area .pta_con {position:relative; z-index:2;} .paas_container .pta_setting .form_area .form_item_origin .form_control, .paas_container .pta_setting .form_area .form_item_origin .form-control {float:none;} .pta_setting .setting_title {font-size:18px; line-height:24px; color:#000; font-weight:500; margin-bottom:10px;} .pta_setting .setting_txt {font-size:14px; line-height:22px; font-weight:400; margin-bottom:15px;} .pta_setting .dropdown {position:absolute; right:30px; top:30px; border:1px solid #d9d9d9; border-radius:5px;} .paas_container .form_area .form_item_origin .delete_btn {margin-top:0; width:51px; text-align:center; background:none;} .paas_container .form_area .form_item_origin .delete_btn:hover {background:none;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--single, .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--multiple {min-height:40px;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--multiple {min-height:40px;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field {line-height:38px; height:38px;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--single .select2-selection__rendered {color:#2e2e2e; line-height:40px;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--single .select2-selection__arrow {height:38px;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--multiple .select2-selection__choice {line-height:40px;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {line-height:38px;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--single .select2-selection__arrow:after {width:40px; line-height:38px;} .paas_container .form_area .form_item_origin .select2-container--default .select2-selection--single .select2-selection__clear {height:41px;} /* 멀티 선택요소 위치 조정 */ .paas_container .select2-container--default .select2-selection--multiple .select2-selection__choice, .pop_pass .select2-container--default .select2-selection--multiple .select2-selection__choice, .pass_style .select2-container--default .select2-selection--multiple .select2-selection__choice {margin-bottom:4px;} .paas_container .form_area .sub_label {display:block; margin-top:3px; font-size:14px; font-weight:400; width:100%;} .paas_container .form_area .form_item span.text_info span.text {display:block;} .paas_container .form_area .form_item span.text_info small {color:#000; display:inline-block; font-size:14px;} .paas_container .form_area .select2.select2-container {width:100% !important;} .paas_container .form_area + .form_area {margin-top:20px;} .paas_container .form_area .form_item i.form_warning {display:none; font-family:"Pretendard"; font-size:12px; font-weight:400;} .paas_container .form_area .form_item i.form_warning:before {font-family:"Font Awesome 6 Free"; font-size:14px; margin-right:5px; font-weight:900;} .paas_container .form_area .form_item .form_control.form_error ~ i.form_warning {display:inline-block; color:#ed6e5b; position:absolute; right:10px; top:10px;} /* 단위 텍스트를 가진 폼양식 */ .paas_container .has_form.has_unit label.form_label, .paas_container .has_form.has_unit input.form_control {width:calc(100% - 80px) !important;} .paas_container .has_form.has_unit span.unit_txt {width:80px; display:block; height:54px; line-height:54px; position:absolute; right:0; top:8px; text-align:center; font-size:14px; color:#5a5a5a;} .paas_container .has_form.has_unit span.unit_txt:before {content:""; display:block; width:1px; height:49px; background:#dcdcdc; position:absolute; left:0; top:2px;} /* 단위 텍스트를 가진 폼양식 */ .pop_pass .has_form.has_unit label.form_label, .pop_pass .has_form.has_unit input.form_control {width:calc(100% - 80px) !important;} .pop_pass .has_form.has_unit span.unit_txt {width:80px; display:block; height:54px; line-height:54px; position:absolute; right:0; top:8px; text-align:center; font-size:14px; color:#5a5a5a;} .pop_pass .has_form.has_unit span.unit_txt:before {content:""; display:block; width:1px; height:49px; background:#dcdcdc; position:absolute; left:0; top:2px;} /* 기타 페이지 - 단위 텍스트를 가진 폼양식 */ .pass_style .has_form.has_unit label.form_label, .pass_style .has_form.has_unit input.form_control {width:calc(100% - 80px) !important;} .pass_style .has_form.has_unit span.unit_txt {width:80px; display:block; height:54px; line-height:54px; position:absolute; right:0; top:8px; text-align:center; font-size:14px; color:#5a5a5a;} .pass_style .has_form.has_unit span.unit_txt:before {content:""; display:block; width:1px; height:49px; background:#dcdcdc; position:absolute; left:0; top:2px;} /* 체크박스 */ .paas_container .m_check.block {height:20px;} .paas_container .form_area .m_check.block > input[type=checkbox] + label {height:20px; line-height:20px;} .paas_container .form_area .m_check.block > input[type=checkbox] + label:after {top:3px;} .pop_pass .m_check.block {height:20px;} .pop_pass .form_area .m_check.block > input[type=checkbox] + label {height:20px; line-height:20px;} .pop_pass .form_area .m_check.block > input[type=checkbox] + label:after {top:3px;} .pass_style .m_check.block {height:20px;} .pass_style .form_area .m_check.block > input[type=checkbox] + label {height:20px; line-height:20px;} .pass_style .form_area .m_check.block > input[type=checkbox] + label:after {top:3px;} /* 팝업 */ .pop_pass .pop_title {font-size:16px; margin:0 0 10px; font-weight:600; color:#000;} .pop_pass .pop_title span {font-size:12px; display:block; margin:5px 0 0; color:#5a5a5a; font-weight:400;} .pop_pass hr {margin:10px 0; border-top-color:#dcdcdc !important;} /* ********** 블럭스타일 라디오 & checkbox ********** */ /* Radio */ .paas_container .m_radio.block_style, .pop_pass .m_radio.block_style, .pop_pass .m_radio.block_style {display:flex; width:100%; flex-wrao:wrap;} .pass_style .m_radio.block_style + .m_radio.block_style {margin-left:0; margin-top:10px;} .paas_container .m_radio.block_style > input[type=radio] + label, .pop_pass .m_radio.block_style > input[type=radio] + label, .pass_style .m_radio.block_style > input[type=radio] + label {width:100%; flex-wrap:wrap; height:auto;} .paas_container .m_radio.block_style > input[type=radio] + label:before, .pop_pass .m_radio.block_style > input[type=radio] + label:before, .pass_style .m_radio.block_style > input[type=radio] + label:before {top:0;} .paas_container .m_radio.block_style > input[type=radio] + label:after, .pop_pass .m_radio.block_style > input[type=radio] + label:after, .pass_style .m_radio.block_style > input[type=radio] + label:after {top:4px;} .paas_container .m_radio.block_style > input[type=radio] + label span, .pop_pass .m_radio.block_style > input[type=radio] + label span, .pass_style .m_radio.block_style > input[type=radio] + label span {display:block; margin:0; color:#5a5a5a; font-size:12px; width:100%;} /* Checkbox */ #selectCustomCheck .col-6 {margin:3px 0;} .paas_container .m_check {font-size:14px; color:#333; font-weight:400;} /* Tolerations */ .paas_container .inter_link_con .form_area .form_group, .pop_pass .inter_link_con .form_area .form_group, .pass_style .inter_link_con .form_area .form_group {float:none !important;} .paas_container .form_area .cc_agent_tolerations .form_control {float:none !important; display:inline-block; vertical-align:top;} .paas_container .form_area .cc_agent_tolerations select.form_control {width:100%; float:none !important; display:inline-block; vertical-align:top;} .paas_container .form_area .cc_agent_tolerations .select2.select2-container {width:100% !important; display:inline-block; vertical-align:top;} .paas_container .form_area .fleet_agent_tolerations .form_control {float:none !important; display:inline-block; vertical-align:top;} .paas_container .form_area .fleet_agent_tolerations select.form_control {width:100%; float:none !important; display:inline-block; vertical-align:top;} .paas_container .form_area .fleet_agent_tolerations .select2.select2-container {width:100% !important; display:inline-block; vertical-align:top;} /* Networking */ .paas_container .form_area .add_tls .form_control {float:none !important; display:inline-block; vertical-align:top;} .paas_container .form_area .add_tls select.form_control {width:100%; float:none !important; display:inline-block; vertical-align:top;} .paas_container .form_area .add_tls .select2.select2-container {width:100% !important; display:inline-block; vertical-align:top;} /* ******************** 토스트 그리드 ******************** */ .paas_container .tui-grid-cell-content select {width:98%; height:20px; font-size:12px; color:#2a3f54; border-color:#dadada; border-radius:3px;} .paas_container .tui-grid-cell-content input[type=password], .paas_container .tui-grid-cell-content input[type=text] {width:100%; padding:2px; border:1px solid #ffffff; border-radius:3px;} /* tui-grid */ /* progress bar */ .paas_container .tui-grid-cell .progress {margin-bottom:0; position:relative;} /* 색상지정 */ .paas_container .m_check > input[type=checkbox]:checked + label:before {border:1px solid #2b58e6; background-color:#2b58e6;} .paas_container .tui-grid-row-hover .tui-grid-cell{background-color:#f4f7fc !important;} .paas_container .grid_striped .tui-grid-row-even .tui-grid-cell {background:#f8f8f8 !important;} .paas_container .grid_striped .tui-grid-row-hover .tui-grid-cell {background-color:#f4f7fc !important;} .paas_container .tui-grid-cell-has-input .tui-grid-cell-content {overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1;} .paas_container .tui-grid-cell-content i {margin-right:5px; text-align:center;} /* .paas_container .tui-grid-scrollbar-right-top {background-color:#fff !important; border-bottom:1px solid #ccc !important;} */ /* .paas_container .tui-grid-body-area {background:#f8f8f8 !important;} */ /* null image */ .paas_container .tui-grid-layer-state .tui-grid-img-nodata {display:block; margin:0 auto 15px; width:50px;} /* Checkbox */ .paas_container .tui-grid-row-header-checkbox {height:16px; padding:5px 5px 3px;} .paas_container .tui-grid-content-area input[type=checkbox] {width:14px; height:14px; border:1px solid #e1e3e7; border-radius:3px; background-color:#fff; appearance:none; -webkit-appearance:none;} .paas_container .tui-grid-content-area input[type=checkbox]:checked {appearance:auto; -webkit-appearance:auto; accent-color:#2b58e6;} .paas_container .tui-grid-row-header-checkbox input[type=checkbox] {width:14px; height:14px; border:1px solid #e1e3e7; border-radius:3px; background-color:#fff; appearance:none; -webkit-appearance:none;} .paas_container .tui-grid-row-header-checkbox input[type=checkbox]:checked {appearance:auto; -webkit-appearance:auto; accent-color:#2b58e6;} .paas_container .tui-grid-cell-header > span {height:16px; display:inline-block; padding:5px 5px 3px;} /* 프로그래스바 */ .paas_container table .table_progress {display:flex;align-items:center;gap:8px;} .paas_container table .tp_bar {position:relative;width:140px;height:8px;border-radius:999px;background:#e9efe9;overflow:hidden;} .paas_container table .tp_bar > i {position:absolute;left:0;top:0;height:100%;border-radius:999px;background:#9bc39b;display:block;} .paas_container table .tp_num {font-size:12px;color:#222;} /* Upgradable */ .paas_container table .upgrad_managed {display:inline-block; padding:2px 8px; border-radius:10px; background:#eef3ff; color:#3762ff; font-weight:600; font-size:12px;} .paas_container table .upgrade_txt {display:inline-block; padding:2px 8px; border-radius:4px; background:#fff3b0; color:#5a4a00; font-weight:600; font-size:12px;} /* gridCertificates 안에서만 드롭다운이 셀 밖으로 보이게 */ #gridCertificates .tui-grid-content-area, #gridCertificates .tui-grid-body-area, #gridCertificates .tui-grid-rside-area, #gridCertificates .tui-grid-body-container, #gridCertificates .tui-grid-cell-content, #gridCertificates .tui-grid-cell {overflow:visible !important; text-overflow:inherit !important;} #gridCertificates .dropstart .dropdown-toggle::before {display:none;} /* Nodes 리스트 */ .p_nodes_btn {margin:10px 0 40px;} ul.p_nodes_lst {padding:0; margin:0; display:flex; flex-wrap:wrap; justify-content:flex-start; gap:30px;} ul.p_nodes_lst li {list-style:none; padding:20px; margin:0; background:#fff; border:1px solid #dcdce1; border-radius:15px; width:calc((100% - 60px) / 3); position:relative; transition:0.3s; cursor:pointer;} ul.p_nodes_lst li.active {border-color:#2b58e6; box-shadow:0 5px 10px rgba(0,0,0,0.1);} ul.p_nodes_lst li:hover {box-shadow:0 5px 10px rgba(0,0,0,0.1);} ul.p_nodes_lst li .node_info {padding:0 65px 0 0; margin:0 0 25px;} ul.p_nodes_lst li .node_info .m_btn {} ul.p_nodes_lst li .node_info strong {display:block; width:100%; font-size:20px; font-weight:700; color:#2e2e2e; line-height:24px; margin:10px 0 13px} ul.p_nodes_lst li .node_info p {font-size:14px; line-height:22px; font-weight:400; margin:0;} ul.p_nodes_lst li img {width:60px; height:auto; position:absolute; right:20px; top:20px;} ul.p_nodes_lst li .node_chart_area {} ul.p_nodes_lst li .node_chart_area .info_chart {text-align:center;} ul.p_nodes_lst li .node_chart_area .info_chart strong {font-size:14px; font-weight:600;} ul.p_nodes_lst li .node_chart_area .info_chart .node_chart {width:100%; height:auto; margin:10px 0 2px;} ul.p_nodes_lst li .node_chart_area .info_chart span {font-size:12px; font-weight:400;} /* PaaS Tag */ .p_tags {border:1px solid #dcdcdc; padding:7px 13px; border-radius:8px; background:#fff; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:6px;} .p_tags .p_tag {display:inline-block; border:1px solid #91b1de; height:27px; border-radius:3px; color:#000; font-size:14px; line-height:25px; padding:0 0 0 6px; background:#e0edff;} .p_tags .p_tag button.delete {border:none; outline:none; color:#3685f5; font-ewight:400; display:inline-block; vertical-align:middle; margin-lef:13px; font-size:14px; width:24px; height:24px; background:url(../images/icon/icon_close_small.png) no-repeat center center; transition:0.2s;} .p_tags .p_tag button.delete:hover {background:url(../images/icon/icon_close_small_hover.png) no-repeat center center;} .p_tags.tag_disabled {background-color:#e8e9ef;} .p_tags.tag_disabled .p_tag button.delete {pointer-events:none;} .d_tag {display:inline-block; border:1px solid #e4ebfd; height:20px; border-radius:5px; color:#000; font-size:14px; line-height:18px; padding:0 10px; background:#e4ebfd; vertical-align:middle; font-size:12px;} .d_tag + .d_tag {margin-left:2px;} /* KPI */ ul.p_kpi {padding:0; margin:0; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:20px;} ul.p_kpi li {padding:0 20px 0 0; margin:0; list-style:none; width:240px; height:60px; display:flex; justify-content:space-between; border:1px solid #999; color:#2e2e2e; font-size:14px; font-weight:400;} ul.p_kpi li strong {display:block; height:60px; border-left:14px solid #666; font-size:36px; font-weight:600; color:#000; padding-left:30px; display:flex; align-items:center;} ul.p_kpi li span {display:block; line-height:58px;} ul.p_kpi li.kpi_active {border-color:#97c8aa;} ul.p_kpi li.kpi_transitioning {border-color:#a0b9e8;} ul.p_kpi li.kpi_warning {border-color:#ecde3f;} ul.p_kpi li.kpi_error {border-color:#dda5b2;} ul.p_kpi li.kpi_unknown {border-color:#cdc2e1;} ul.p_kpi li.kpi_active strong {border-color:#34a55f;} ul.p_kpi li.kpi_transitioning strong{border-color:#6398fa;} ul.p_kpi li.kpi_warning strong {border-color:#ecde3f;} ul.p_kpi li.kpi_error strong {border-color:#d94769;} ul.p_kpi li.kpi_unknown strong {border-color:#a589d7;} /* 팝업 - 스크롤 리스트 */ ul.scroll_lst {padding:0 0 0 10px; margin:0 0 20px; overflow-y:auto;} ul.scroll_lst li {padding:0 0 0 10px; margin:0 0 5px; position:relative; font-size:14px; color:#2e2e2e; line-height:20px; list-style:none;} ul.scroll_lst li:before {content:""; display:block; width:4px; height:4px; border-radius:2px; background:#000; position:absolute; left:0; top:8px;} /* 팝업 - Create Container */ .paas_group.form_group + .form_group {margin-top:10px;} /* Pods State */ .pods_state_area {display:flex; justify-content:flex-start; gap:10px 40px;} .pods_state_area .pods_state {width:300px; height:80px; display:flex; justify-content:space-between; align-items:center; background:#f5f5f5; border-left:10px solid #666; padding:0 20px; border-radius:10px;} .pods_state_area .pods_state .chart_pod_state {width:50px; height:50px;} .pods_state_area .pods_state .state {text-align:right;} .pods_state_area .pods_state .state strong {color:#000; font-size:36px; font-weight:600; display:block; line-height:1;} .pods_state_area .pods_state .state span {color:#666; font-size:14px; font-weight:400; display:block; margin-top:5px; line-height:1;} .pods_state_area .pods_state.status_error {background-color:#eaefff; border-color:#637cfa;} .pods_state_area .pods_state.status_error .state span {color:#637cfa;} .pods_state_area .pods_state.status_evicted {background-color:#f7e4e9; border-color:#ec3667;} .pods_state_area .pods_state.status_evicted .state span {color:#ec3667;} .pods_state_area .pods_state.status_running {background-color:#e6f3f3; border-color:#64c097;} .pods_state_area .pods_state.status_running .state span {color:#489e78;} .pods_state_area .pods_state.status_unknown {background-color:#fff0f5; border-color:#d94769;} .pods_state_area .pods_state.status_unknown .state span {color:#d94769;} /* Service Create Tyle List */ ul.create_servive_lst {padding:0; margin:20px 0 0; display:flex; justify-content:flex-start; flex-wrap:wrap;} ul.create_servive_lst li {padding:0; margin:0; list-style:none; width:calc((100% - 30px) / 2); border:1px solid #dcdcdc; border-left:15px solid #2591ec; border-radius:15px; overflow:hidden; margin-right:30px; margin-bottom:25px; transition:0.3s;} ul.create_servive_lst li:nth-child(2n) {margin-right:0;} ul.create_servive_lst li:hover {box-shadow:0 5px 10px rgba(0,0,0,0.1); border-color:#2591ec;} ul.create_servive_lst li button {border:none; background:#fff; display:block; width:100%; padding:17px 19px 17px 120px; width:100%; min-height:120px; transition:0.3s; position:relative; text-align:left; height:100%;} ul.create_servive_lst li button div {width:100px; height:100%; position:absolute; left:0; top:0; background:#f5f5f5; border-radius:0 10px 10px 0;} ul.create_servive_lst li button div span {display:inline-block; width:60px; height:60px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:30px; font-weight:600; color:#fff; text-align:center; line-height:60px; background:#2591ec; text-transform:uppercase; font-size:30px;} ul.create_servive_lst li button strong {display:block; font-size:18px; font-weight:700; color:#2e2e2e; margin:0 0 13px;} ul.create_servive_lst li button p {display:block; font-size:14px; font-weight:400; color:#2e2e2e; line-height:18px; margin:0; /* display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; text-overflow:ellipsis; height:36px; */ word-break:keep-all;} ul.create_servive_lst li button .p_charts_use_target {position:absolute; right:19px; bottom:16px; } /* ********** 이미지 업로드 ********** */ .upload_localdata{margin:0; height:400px; overflow-y:auto; position:relative;} .upload_localdata .dropzone {min-height:400px; padding:0; position:relative; border:0;} .upload_localdata .dropzone:after {display:block; content:""; clear:both;} .upload_localdata .dropzone .msg {padding:0; margin:0 0 15px;} .upload_localdata .dropzone .msg.msg1 {padding-top:100px; color:#000; font-size:20px;} .upload_localdata .dropzone .msg.msg2 {color:#a4a4a4; font-size:16px;} .upload_localdata .dropzone .dz-message {min-height:400px; padding:3rem 0; margin:0; border-radius:5px; border:1px dashed #dbdbdb; background-color:#fff; transition:0s; text-align:center; cursor:pointer;} .upload_localdata .dropzone .dz-message > span {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} .upload_localdata .dropzone .dz-message > span .c_btn.btn_upload {margin-right:0;} .upload_localdata .dropzone .dz-preview.dz-image-preview {background:transparent;} .upload_localdata .dropzone .dz-preview:after {display:block; content:""; clear:both;} .upload_localdata .dropzone .dz-preview .dz-image {width:40px; height:40px; position:absolute; top:25px; left:0; border-radius:0; background:url(../images/paas/paas_image_cd.png) no-repeat center center; background-size:40px auto;} .upload_localdata .dropzone .dz-preview .dz-image img {display:none;} .upload_localdata .dropzone .dz-preview .dz-details {float:left; width:calc(100% - 253px); min-width:inherit; padding:0; position:static; text-align:left; opacity:1;} .upload_localdata .dropzone .dz-preview .dz-details .dz-size, .upload_localdata .dropzone .dz-preview .dz-details .dz-filename {display:block; vertical-align:top; margin:0;} .upload_localdata .dropzone .dz-preview .dz-details .dz-size {width:100%;} .upload_localdata .dropzone .dz-preview .dz-details .dz-filename {width:100%;} .upload_localdata .dropzone .dz-preview .dz-error-message {width:235px; padding:5px 10px; margin:0 0 10px 0; position:absolute; color:#ef3e3e; background:none; opacity:1; text-align:right; top:26px; right:45px; left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .upload_localdata .dropzone .dz-preview .dz-error-message:after {display:none;} .upload_localdata .dropzone .dz-preview .dz-success-mark, .upload_localdata .dropzone .dz-preview .dz-error-mark {float:right; width:20px; height:20px; position:static; margin-top:5px; z-index:9; cursor:pointer; transition:0.2s;} .upload_localdata .dropzone .dz-preview .dz-error-mark:hover {} .upload_localdata .dropzone .dz-preview .dz-success-mark svg, .upload_localdata .dropzone .dz-preview .dz-error-mark svg {width:20px; height:20px;} .upload_localdata .dropzone .dz-preview .dz-error-mark svg path {stroke-opacity:1; stroke:#aaa; fill:#afafaf;} .upload_localdata .dropzone .dz-preview .dz-progress {width:initial; height:5px; margin:0; top:initial; right:0; bottom:-10px; left:30px; right:20px; opacity:1 !important; position:absolute;} .upload_localdata .dropzone .dz-preview .dz-progress .dz-upload{display:block; width:calc(100% - 20px) !important; float:right; height:5px; border-radius:3px; margin:; background:#f35244; /* Old browsers */ background:-moz-linear-gradient(left, #aafbff 10%, #517fea 100%); /* FF3.6-15 */ background:-webkit-linear-gradient(left, #aafbff 10%, #517fea 100%); /* Chrome10-25,Safari5.1-6 */ background:linear-gradient(to right, #aafbff 10%, #517fea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#aafbff', endColorstr='#517fea',GradientType=1 ); /* IE6-9 */ } .upload_localdata .dropzone .dz-message:hover {border-color:#1b45cb; background-color:#f0f5ff;} .upload_localdata .dropzone .dz-message .msg.msg1 {background-image:url(../images/paas/paas_image_cd_gray.png); background-size:80px auto; background-repeat:no-repeat; background-position:center top; transition:0.3s;} .upload_localdata .dropzone .dz-message:hover .msg.msg1 {color:#1b45cb; background-image:url(../images/paas/paas_image_cd.png); background-size:80px auto; background-repeat:no-repeat; background-position:center top;} .upload_localdata .dropzone.dz-started {padding-left:50%; position:relative;} .upload_localdata .dropzone.dz-started:after {position:absolute; width:48%; height:2px; background:#000; content:""; display:block; visibility:inherit; right:0; top:0;} .upload_localdata .dropzone.dz-started .dz-message {display:block !important; width:calc(50% - 50px); position:absolute; top:0; left:0;} .nav-md .upload_localdata .dropzone.dz-started .dz-message {width:calc(50% - 50px); left:310px;} .upload_localdata .dropzone.dz-started .dz-preview {display:block; min-height:40px; padding:25px 20px 0 50px; margin:0 0 10px 50px; position:relative;} .upload_localdata .dropzone .dz-preview .dz-remove {margin-top:5px; text-indent:-9999px;} .upload_localdata .dropzone .dz-message:hover span.m_btn.btn-gray {border-color:#1559ef; background:#1559ef; color:#fff;} /* Add Image - Dropzone */ .paas_container .upload_localdata .dropzone .dz-preview .dz-success-mark, .paas_container .upload_localdata .dropzone .dz-preview .dz-error-mark {position:absolute; right:20px;} .upload_localdata .dropzone .dz-preview .dz-remove {width:23px; height:23px; position:absolute; right:20px; z-index:10;} /*=========================================================================================================================== 연합학습관리 (신규) - 병합본(최종 수정) - 기존 CSS 유지 + "로그 에디터(Ace) 안나옴" / "100% 높이" 문제만 확실히 해결 핵심: 1) #llogBody(display:none) 상태에서 Ace 초기화 → 보일 때 0px 계산 이슈 → CSS에서 로그영역은 flex + min-height:0로 높이 흐름을 고정 2) #serverLogEditor 100%는 부모(.llog_editor / #llogBody / .learning_box_body / .learning_box_log)가 높이를 가져야만 동작 → 부모 체인에 height:100% / flex:1 / min-height:0 적용 =============================================================================================================================*/ /* 실행관리 */ .learning_area {height:calc(100% - 10px); display:flex; flex-direction:column;} .learning_top {position:relative; padding-bottom:15px; display:flex; justify-content:space-between;} .learning_top h2 {font-size:24px; line-height:30px; font-weight:700; margin:0; display:inline-block; vertical-align:middle;} .learning_top h2 span {display:inline-block; vertical-align:middle; margin-left:10px; color:#129dd1; font-size:14px;} .learning_top h2 span i {color:#129dd1;} .learning_top .m_btn.goto_list {margin-left:15px; width:40px; height:40px; line-height:40px; text-align:center; vertical-align:middle; padding:0;} .learning_top .m_btn.goto_list i {margin:0; font-size:16px;} .learning_top .lb_actions .m_btn_small {padding:0 18px;} .learning_top .btn_icon {} .learning_top:before, .learning_top:after {content:""; display:block; position:absolute; left:-8px; bottom:0; width:calc(100% + 16px); height:1px;} .learning_top:before {background:#d0d0d0; bottom:2px;} .learning_top:after {background:#ffffff; bottom:0;} .learning_area .learning_nm {padding:10px 0 5px;} .learning_area .learning_nm strong {margin-right:35px; display:inline-block; vertical-align:middle; font-size:16px; font-weight:600;} .learning_area .learning_nm span {display:inline-block; vertical-align:middle; font-size:14px; font-weight:400; color:#2e2e2e;} /* 3열 레이아웃 */ .learning_area .learning_layout {display:flex; gap:10px; margin-top:10px; flex:1; min-height:0; max-height:661px;} /* 좌측 전체 영역: 최대 너비 1150px으로 제한, 내부 유연하게 */ .learning_area .learning_col_left {flex: 0 1 auto; /* basis 1150px, shrink 허용, grow 억제(필요시 1로 변경) */ max-width:1060px; min-width:940px; /* 매우 중요: flex 자식 내부에서 overflow/스크롤 문제 방지 */ display:flex; flex-direction:column; gap:10px; min-height:0;} .learning_area .learning_box {background:#fff; border:1px solid #dcdcdc; border-radius:12px; overflow:hidden; display:flex; flex-direction:column; min-height:0; position:relative;} .learning_area .learning_box_head {display:flex; justify-content:space-between; align-items:center; padding:20px 24px; position:relative;} .learning_area .learning_box_head h3 {margin:0; font-size:20px; font-weight:700; line-height:20px;} .learning_area .learning_box_head h3 span {color:#808080; font-size:13px; display:block; margin:0 0 4px; font-weight:400;} .learning_area .learning_box_body {padding:0 24px 20px; flex:1; min-height:0; height:100%;} .learning_area .learning_hint {color:#2e2e2e; font-size:16px; line-height:18px; padding:18px 0; text-align:center;} .learning_area .learning_badge {display:inline-flex; align-items:center; justify-content:center; min-width:44px; height:26px; padding:0 10px; border-radius:999px; background:#0d6efd; color:#fff; font-size:13px; font-weight:700;} .learning_area .learning_badge.total_wf {height:35px; padding:0 30px; border-radius:18px; line-height:34px; font-size:24px; font-weight:700; vertical-align:bottom; margin-left:11px;} /* 좌측 2개 박스 높이 비율 6:4 */ .learning_area .learning_wf {flex:5.5; min-height:0; background:#e1e9fe; border:none;} .learning_area .learning_wf .learning_box_body {padding-bottom:10px;} .learning_area .learning_cfg {flex:4.5; min-height:0;} /* 연합학습 설정 서버 실행로그 전용*/ .learning_area .learning_box_set .learning_box_head:after {} .learning_area .learning_box_set .learning_box_body {padding:10px 11px 20px; position:relative;} .learning_area .learning_box_set .learning_box_body #lsForm:before {content:""; display:block; width:calc(100% - 26px); height:1px; position:absolute; left:15px; top:-7px; background:#d0d0d0;} .learning_area .form-control.form-range {border:none;} .learning_area .learning_box_log .learning_box_head {padding-bottom:12px;} .learning_area .learning_box_log .learning_box_body {padding:0 0 20px;} /* ========================================================================================================================= 초기 화면: 전체 학습 워크플로우(메인 4개 카드) ========================================================================================================================= */ .learning_area .lw_main {display:flex; gap:16px; list-style:none; margin:0; flex-wrap:wrap; align-content:flex-start; overflow-y:auto; min-height:0; padding:3px 0 10px; height:100%; max-height:275px; max-width:1200px;} .learning_area .lw_main > li {flex:0 0 calc((100% - 48px) / 4); max-width:calc((100% - 48px) / 4); border:1px solid #e6e8ef; border-radius:18px; padding:18px; cursor:pointer; box-sizing:border-box; background:#fff; transition:0.3s; display:flex; flex-direction:column; min-height:250px; height:100%;} .learning_area .lw_main > li:hover {box-shadow:0 5px 10px rgba(0,0,0,0.1);} .learning_area .lw_main > li.active {border-color:#0d6efd; box-shadow:0 0 0 3px rgba(13,110,253,.12);} .learning_area .lw_main .lw_card_icon {width:auto; height:32px; display:flex; align-items:center; justify-content:flex-start; border-radius:10px; margin-bottom:12px; color:#4ea6ea;} .learning_area .lw_main .lw_card_icon i {font-size:16px;} .learning_area .lw_main .lw_card_body {flex:1; min-height:0;} .learning_area .lw_main .lw_card_title {display:block; font-size:18px; font-weight:700; line-height:22px; margin-bottom:12px; color:#2e2e2e;} .learning_area .lw_main .lw_card_desc {margin:0; font-size:14px; line-height:18px; color:#2e2e2e;} .learning_area .lw_main .lw_card_foot {display:flex; align-items:center; justify-content:flex-start; margin-top:16px;} .learning_area .lw_main .lw_card_label {font-size:14px; color:#000; font-weight:400;} .learning_area .lw_main .lw_badge {height:20px; min-width:44px; padding:0 12px; border-radius:999px; font-size:14px; font-weight:700; margin-left:10px; line-height:20px;} @media (max-width:1200px) { .learning_area .lw_main > li {flex:0 0 calc((100% - 20px) / 3); max-width:calc((100% - 20px) / 3);} } @media (max-width:980px) { .learning_area .lw_main > li {flex:0 0 calc((100% - 10px) / 2); max-width:calc((100% - 10px) / 2);} } /* ========================================================================================================================= 메인 선택 후: "메인 탭(4개)" + 버튼영역 - 탭 모양: 좌상단만 radius, 우상단은 뾰족(연결형) ========================================================================================================================= */ .learning_area #lwTabsWrap {flex:1; min-height:0; display:none; flex-direction:column;} /* 탭(메인 4개) 모양 : 우측 사선 컷 */ .learning_area .lw_mtabs {display:flex; gap:0; list-style:none; padding:0; margin:0; align-items:flex-end;} .learning_area .lw_mtabs > li {position:relative; display:flex; align-items:center; gap:14px; padding:12px 33px 12px 18px; cursor:pointer; background:#fff; border:1px solid #dcdcdc; border-bottom:0; border-radius:12px 12px 0 0; z-index:1; margin:0; white-space:nowrap; clip-path:polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);} /* 🔥 사선 border 전용 가상요소 */ .learning_area .lw_mtabs > li::after {content:""; position:absolute; top:-1px; right:28px; width:30px; height:100%; background:transparent; border-top:1px solid #dcdcdc; border-right:2px solid #dcdcdc; transform:skewX(32deg); transform-origin:top right; pointer-events:none;} .learning_area .lw_mtabs > li.active {background:#fafafa; border-color:#dcdcdc; z-index:2; padding:12px 33px 14px 18px; position:relative; bottom:-2px;} .learning_area .lw_mtabs > li strong {font-size:16px; font-weight:700; color:#111;} .learning_area .lw_mtabs > li.active strong {color:#1559ef;} .learning_area .lw_mtabs > li .learning_badge {height:22px; min-width:36px; font-size:12px;} /* 탭 바디(컨텐츠) 배경/테두리 디자인 반영 */ .learning_area .lw_content {background:#fafafa; border:1px solid #dcdcdc; border-radius:0 14px 14px 14px; padding:20px; min-height:0; flex:1; display:flex; flex-direction:column; height:calc(100% - 48px);} /* 하위 버튼(카드) 영역: 4열 고정 + overflow scroll */ .learning_area .lw_btns {display:flex; gap:10px; flex-wrap:wrap; align-content:flex-start; overflow-y:auto; min-height:0; padding-right:6px;} .learning_area .lw_btn {border:1px solid #e3e3e3; border-radius:8px; padding:15px; cursor:pointer; min-width:220px; flex:0 0 calc((100% - 30px) / 4); max-width:calc((100% - 30px) / 4); box-sizing:border-box; background:#fff; transition:0.2s;} .learning_area .lw_btn.active, .learning_area .lw_btn:hover {border-color:#0d6efd; background-color:#f4f7ff;} .learning_area .lw_btn strong {display:block; font-size:15px; font-weight:700; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .learning_area .lw_btn p {margin:0; font-size:14px; line-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} /* ========================================================================================================================= 워크플로우 구성(더미 카드) - 4열 고정 + overflow scroll ========================================================================================================================= */ .learning_area .lc_cards {display:flex; gap:10px; flex-wrap:wrap; align-content:flex-start; overflow-y:auto; min-height:0; padding-right:6px;} .learning_area .lc_card {border:1px solid #e3e3e3; border-radius:12px; padding:12px; cursor:pointer; flex:0 0 calc((100% - 30px) / 4); max-width:calc((100% - 30px) / 4); min-width:240px; box-sizing:border-box; background:#fafafa;} .learning_area .lc_card .lc_t {display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px;} .learning_area .lc_card .lc_t strong {font-size:16px; font-weight:700; color:#000;} .learning_area .lc_card .lc_t i {color:#4ea6ea; margin-right:5px;} .learning_area .lc_card .lc_btn {border:1px solid #e3e3e3; border-radius:8px; padding:15px; cursor:pointer; width:100%; max-width:none; min-width:0; box-sizing:border-box; background:#fff; text-align:left; transition:0.2s;} .learning_area .lc_card .lc_btn strong {display:block; font-size:15px; font-weight:700; margin-bottom:10px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .learning_area .lc_card .lc_btn span {display:block; margin:0; font-size:14px; line-height:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:400;} .learning_area .lc_card .lc_btn.active, .learning_area .lc_card .lc_btn:hover {border-color:#2b58e6; background-color:#f4f7ff;} /* 우측 2개 박스 */ /* 가운데: 고정 400px (최대 400) */ .learning_area .learning_box_set {flex: 0 0 360px; /* 고정 너비 400px */ width: auto; max-width:360px; min-width:320px; /* 필요시 변경 가능 */ display:flex; flex-direction:column; min-height:0;} /* 우측 로그: 남은 공간을 전부 채움 */ .learning_area .learning_box_log {flex: 1 1 auto; /* grow 하여 남는 공간을 전부 차지 */ width: auto; /* width % 제거 */ min-width:300px; /* 아주 중요: 내부 스크롤/줄어듬 문제 방지 */ min-height:0; display:flex; flex-direction:column;} /* (추가) 우측 박스 body가 남은 높이를 제대로 물고 내려가도록 */ .learning_area .learning_cfg .learning_box_body, .learning_area .learning_box_set .learning_box_body, .learning_area .learning_box_log .learning_box_body {display:flex; flex-direction:column; min-height:0;} /* 로그 에디터 부모 체인 높이 보장 */ .learning_area .learning_box_log .learning_box_body, .learning_area .llog_editor, #llogBody, #serverLogEditor {min-height:0; height:100%; flex:1 1 auto; box-sizing:border-box;} .learning_area #lcHint.learning_hint, .learning_area #lsHint.learning_hint, .learning_area #llogHint.learning_hint {flex:1; margin:0; padding:0; display:flex; align-items:center; justify-content:center;} .learning_area .ls_group {padding:0; margin-bottom:25px;} .learning_area .ls_group:last-child {margin-bottom:0;} .learning_area .ls_group h4 {margin:0 0 10px; font-size:18px; font-weight:700; display:flex; align-items:center; gap:8px; color:#000; font-weight:700; padding:0 10px;} .learning_area .ls_group h4 i {color:#4ea6ea;} .learning_area .group_sub_title {font-size:15px; color:#000; font-weight:500; margin:0 0 5px; padding-left:6px;} .learning_area .group_sub_title span {color:#1871ea; margin-left:10px; display:inline-block;} .learning_area .group_gray {padding:15px 10px; border-radius:8px; background:#f5f5f5; max-height:1000px; transition:0.3s;} .learning_area .ls_group.fold {margin-bottom:0;} .learning_area .ls_group.fold .group_gray {height:0; overflow:hidden; padding:0 10px;} .learning_area .ls_row {margin-bottom:12px;} .learning_area .ls_row:last-child {margin-bottom:0;} .learning_area .ls_row label {font-size:12px; color:#666; margin-bottom:6px; display:block;} .learning_area .ls_beetween {display:flex; align-items:center; justify-content:space-between; gap:12px; padding:0 4px;} .learning_area .ls_beetween label {margin:0; font-size:15px; font-weight:500;} .learning_area .ls_beetween > * {display:block;} .learning_area .ls_val {display:inline-block; width:60px; height:20px; line-height:20px; border-radius:10px; padding:0 0 0 14px; font-size:14px; font-weight:700; text-align:center;} .learning_area .ls_small {font-size:12px; color:#666;} /* ========================================================================================================================= 로그 영역 (Ace Editor 100% + display:none 토글 대응) - 핵심: #llogBody가 flex column으로 동작하고, .llog_editor가 남은 높이를 차지(flex:1) - min-height:0 없으면 flex 자식 overflow 계산이 깨져서 에디터가 안 보일 수 있음 ========================================================================================================================= */ .learning_area .llog_wrap {position:relative; min-height:0; display:flex; flex-direction:column; flex:1;} .learning_area #llogHint {flex:0 0 auto;} .learning_area #llogBody {flex:1; min-height:0; display:flex; flex-direction:column;} /* 톱니 메뉴 */ .learning_area .llog_menu {position:absolute; top:-15px; right:24px; width:300px; background:#fff; border:1px solid #e1e1e1; border-radius:10px; padding:20px; display:none; z-index:50;} .learning_area .llog_menu.open {display:block;} .learning_area .llog_menu .form-check {margin:0; padding-left:32px;} .learning_area .llog_menu > div.check_area, .learning_area .llog_menu > div.ls_row {display:flex; justify-content:flex-start; align-items:center; margin-bottom:10px;} .learning_area .llog_menu > div.ls_row:last-child {margin-bottom:0; padding-top:10px;} .learning_area .llog_menu > div label {width:125px; display:flex; margin:0; font-size:14px; font-weight:700; color:#2e2e2e; align-items:center;} .learning_area .llog_menu > div.ls_row select#llogLines {width:140px;} .learning_area .llog_menu .llog_action {display:flex; justify-content:flex-end; width:140px;} /* 에디터 래퍼가 남은 영역을 모두 차지 */ .learning_area .llog_editor {flex:1; min-height:0; border:1px solid #e3e3e3; border-radius:0; overflow:hidden; display:flex;} /* Ace 컨테이너는 부모 높이를 100%로 받음 */ .learning_area .llog_editor #serverLogEditor {width:100%; height:100%; min-height:0;} /* Ace 내부도 100%로 확정(환경에 따라 필요) */ .learning_area .llog_editor #serverLogEditor .ace_editor {height:100%;} /* ========================================================================================================================= 메인 선택 후 상태 클래스 ========================================================================================================================= */ .learning_wf.wf_selected #lwMain {display:none;} .learning_wf.wf_selected #lwTabsWrap {display:block !important; height:100%;} /*=========================================================================================================================== 통합 데이터 파이프라인 =============================================================================================================================*/ /* 연결 정보 관리 */ .connection_lst {display:flex; justify-content:flex-start; flex-wrap:wrap; gap:20px; width:100%; position:relative; overflow-y:auto; overflow-x:hidden; min-height:calc(100% - 40px); align-content:flex-start;} .connection_lst .connection_card {padding:20px 30px; border-top:5px solid #999; border-radius:5px; background:#fff; display:block; width:calc((100% - 60px) / 4); display:flex; justify-content:space-between; position:relative; box-shadow:0 0 20px rgba(0,0,0,0.1);} .connection_lst .connection_card.connected {border-color:#03cef3;} .connection_lst .connection_card.disconnected {border-color:#c06565;} .connection_lst .connection_card .cc_img {width:60px; height:100%; margin-right:20px;} .connection_lst .connection_card .cc_img span {display:inline-block; width:60px; height:60px; border-radius:30px; background:var(--color-button-active); color:#fff; font-size:24px; text-align:center; line-height:60px;} .connection_lst .connection_card .cc_con {width:calc(100% - 80px); height:100%;} .connection_lst .connection_card .cc_con .cc_img span i {} .connection_lst .connection_card .cc_con .cc_txt {} .connection_lst .connection_card .cc_con .cc_txt h3 {margin:0; font-size:20px; font-weight:500;} .connection_lst .connection_card .cc_con .cc_btn_area {margin-top:15px; text-align:right;} .connection_lst .connection_card .cc_con .cc_btn_area .cc_btn {background:none; display:inline-block; margin:0 0 0 5px; border:none; outline:none; transition:0.2s; color:#999; width:20px; height:20px; line-height:20px;} .connection_lst .connection_card .cc_con .cc_btn_area .cc_btn:hover {color:var(--btn-primary-hover);} .connection_lst .connection_card .cc_con .cc_btn_area .cc_btn.cc_delete:hover {color:#03cef3;} /* 우측 상세 영역 */ .connection_lst .connection_detail {position:absolute; width:700px; height:100%; overflow-y:auto; margin-right:-100%; right:0; top:0; z-index:50; transition:1s; background:#fff; padding:20px; margin-bottom:0; box-shadow:-5px 5px 10px rgba(0,0,0,0.1); padding-top:20px;} .connection_lst .connection_detail.connection_detail_show {margin-right:0%;} .connection_lst .connection_detail .x_title {border-bottom:none; margin:0;} /* 데이터 파이프라인 상세 정보 */ .pipe_title {display:flex; justify-content:space-between; width:100%;} .pipe_title h2 {font-size:24px; font-weight:600; margin:10px 0 0;} .pipe_title .btn_area {margin:0; text-align:right; margin-top:5px;} .pipe_title .btn_area .m_btn {} .pipe_title .btn_area .m_btn i.reversal {transform:rotate(-180deg);} .pipe_dash .dash_info_area {display:flex; justify-content:space-between;} .pipe_dash .dash_info {background:#fff; border-radius:15px; border:1px solid #dcdcdc; padding:20px; margin-top:10px; position:relative;} .pipe_dash .dash_info .di_title {font-size:13px; color:#808080; font-weight:400; margin:0 0 30px;} .pipe_dash .dash_info .dash_group {padding:0; overflow:hidden; display:flex; align-content:center; flex-wrap:wrap;} .pipe_dash .dash_info:nth-child(1) {width:340px;} .pipe_dash .dash_info:nth-child(2) {width:340px;} .pipe_dash .dash_info:nth-child(3) {width:calc(100% - 710px); display:block;} .pipe_dash .dash_info .dash_group .dash_item {width:100%; display:flex; justify-content:flex-start; flex-wrap:wrap;} .pipe_dash .dash_info .dash_group .dash_item + .dash_item {margin-top:15px;} .pipe_dash .dash_info .dash_group .label {font-size:16px; font-wieght:500; color:#2e2e2e; min-width:150px;} .pipe_dash .dash_info .dash_group .dash_item strong {color:#000; font-weight:700; font-size:18px;} .pipe_dash .dash_info .dash_group .dash_item .m_btn {} .pipe_dash .dash_info .dash_group .dag_stats {width:230px; float:left;} .pipe_dash .dash_info .dash_group .dag_stats .date + .date {margin-top:10px;} .pipe_dash .dash_info .dash_group .dag_stats .date label {font-size:12px; font-weight:400; color:#2e2e2e; margin-bottom:5px; display:block;} .pipe_dash .dash_info .dash_group .dag_stats .date .control-group {margin-bottom:0; position:relative;} .pipe_dash .dash_info .dash_group .dag_stats .date .control-group .add-on {margin:0; position:absolute; right:10px; top:50%; transform:translate(0,-50%); z-index:2;} .pipe_dash .dash_info .dash_group .dag_stats .date .control-group .add-on + .form_control {border-radius:8px !important; margin-left:0 !important;} .pipe_dash .dash_info #pipeDashChart {width:calc(100% - 330px); height:185px; position:absolute; right:20px; top:50%; transform:translate(0,-50%);} .pipe_dash .tui-grid-container {overflow:hidden;} .pipe_dash .tui-grid-container .tui-grid-pagination {margin-bottom:0;} /* 그룹 버튼 */ .p_btn_group {display:inline-flex !important; justify-content:flex-start;} .p_btn_group + .btn_group {margin-left:16px;} .p_btn_group button, .p_btn_group a {border-radius:0 !important; height:40px !important; line-height:38px !important; font-size:14px; font-weight:600; padding:0 20px !important;} .p_btn_group button:first-child, .p_btn_group a:first-child {border-radius:8px 0 0 8px !important;} .p_btn_group button:last-child, .p_btn_group a:last-child {border-radius:0 8px 8px 0 !important;} .p_btn_group button:hover, .p_btn_group a:hover {background:#2b58e6 !important; border-color:#2b58e6 !important; color:#fff !important;} .p_btn_group button + button, .p_btn_group a + a {border-left:none; margin-left:0 !important;} /* 파이썬 버전 설치 팝업 */ ul.python_ver_lst {padding:0; margin:0; list-style:none;} ul.python_ver_lst li {list-style:none; margin:0; padding:0;} ul.python_ver_lst > li {border:1px solid #dcdce1; background:#fafafa; padding:5px 24px 5px; border-radius:15px; transition:0.3s;} ul.python_ver_lst > li + li {margin-top:10px;} ul.python_ver_lst > li button.btn_toggle {width:100%; height:45px; padding:0 25px 0 0; border:none; line-height:43px; border-radius:10px; color:#2e2e2e; font-size:18px; vertical-align:middle; font-weight:700; position:relative; font-size:18px; text-align:left; font-weight:600; transition:0.3s; background:none;} ul.python_ver_lst > li button.btn_toggle:after {content:"\f078"; font-family:'Font Awesome 6 Free'; display:inline-block; width:20px; height:20px; transition:0.2s; font-weight:900; color:#000; line-height:20px; position:absolute; right:0; top:11px; text-align:center;} /* ul.python_ver_lst > li.active, ul.python_ver_lst > li:hover {border-color:#2b58e6;} */ ul.python_ver_lst > li.active button.btn_toggle:after, ul.python_ver_lst > li button.btn_toggle:hover:after {color:#1559ef;} ul.python_ver_lst > li.active button.btn_toggle:after {transform:rotate(180deg);} ul.python_ver_lst > li > ul {padding:0; margin:0; max-height:0; transition:0.2s; transition-timing-function:linear; overflow:hidden; display:flex; justify-content:flex-start; gap:10px; flex-wrap:wrap;} ul.python_ver_lst > li.active > ul {max-height:4000px; padding:15px 0;} ul.python_ver_lst > li > ul > li {display:inline-block;} ul.python_ver_lst > li > ul > li .m_btn:hover {background:#2b58e6 !important; border-color:#2b58e6 !important; color:#fff !important;} /* 클릭 시 정보 노출 */ ul.python_ver_lst > li > ul > li.python_ver_info_row {flex:0 0 100%; width:100%;} ul.python_ver_lst > li > ul > li.python_ver_info_row .python_ver_info {padding:15px 0 0; width:100%;} ul.python_ver_lst > li > ul > li.python_ver_info_row .python_ver_info p {margin:0 0 10px 0; color:#2e2e2e; font-size:14px; font-weight:600; text-align:center;} ul.python_ver_lst > li > ul > li.python_ver_info_row .python_ver_info .btnArea {display:flex; justify-content:center; gap:10px;} ul.python_ver_lst > li > ul > li button.m_btn.active {background:#2b58e6 !important; border-color:#2b58e6 !important; color:#fff !important;} /* **************************************************** Dag 모니터링 **************************************************** */ /* 현재 위치 */ ul.pd_location {padding:9px 0 0; margin:0; display:flex; justify-content:flex-start; align-items:flex-start; position:absolute; right:0; top:0; width:100%;} /* 중앙 라인: 첫 동그라미 중심 ~ 마지막 동그라미 중심까지만 */ ul.pd_location li {list-style:none; position:relative; z-index:1; /* 동그라미가 라인 위에 나오도록 */ width:25%; text-align:center; position:relative;} ul.pd_location li:after {content:""; display:inline-block; width:auto; height:20px; position:absolute; left:50%; top:-21px; color:#2e2e2e; font-size:14px; transition:0.2s; transform:translate(-50%,0); font-weight:400; min-width:130px;} ul.pd_location li:hover:after {color:#2b58e6;} /* 동그라미 */ ul.pd_location li a::before {content:""; display:block; width:15px; height:15px; background:#fff; border:2px solid #5c5c5c; border-radius:50%; position:absolute; left:50%; top:0; transform:translateX(-50%); transition:0.2s;} ul.pd_location li.done a {color:#aaa;} ul.pd_location li.done a:before {background-color:#90d4fa; border-color:#90d4fa;} ul.pd_location li.done + li.active:before {height:3px; top:6px; background: linear-gradient(to right, #90d4fa 0%,#1559ef 100%);} ul.pd_location li.done + li.done:before {height:3px; top:6px; background:#90d4fa;} ul.pd_location li:nth-child(1) {z-index:6;} ul.pd_location li:nth-child(2) {z-index:5;} ul.pd_location li:nth-child(3) {z-index:4;} ul.pd_location li:nth-child(4) {z-index:3;} ul.pd_location li:nth-child(5) {z-index:2;} ul.pd_location li:nth-child(6) {z-index:1;} ul.pd_location li.pdl_project:after {content:"Project";} ul.pd_location li.pdl_workflow:after {content:"Workflow";} ul.pd_location li.pdl_time:after {content:"Logical Date";} ul.pd_location li.pdl_node:after {content:"Node";} ul.pd_location li a {display:inline-block; padding:20px 10px 0; position:relative; font-size:14px; color:#000; text-align:center; transition:0.2s; font-weight:600;} ul.pd_location li a span {display:inline-block; height:20px; line-height:20px; border-radius:3px; padding:0 12px; transition:0.2s;} ul.pd_location li.pdl_project:after {transform:translate(0,0); margin-left:-10px;} ul.pd_location li.pdl_project a span {transform:translate(50%,0); margin-left:-39px;} ul.pd_location li.pdl_node:after {transform:translate(-50%,0); margin-left:-9px;} ul.pd_location li.pdl_node a span {transform:translate(-50%,0); margin-right:-39px;} /* 동그라미 */ ul.pd_location li a::before {content:""; display:block; width:15px; height:15px; background:#fff; border:2px solid #5c5c5c; border-radius:50%; position:absolute; left:50%; top:0; transform:translateX(-50%); transition:0.2s;} ul.pd_location li a:hover, ul.pd_location li.active a {color:#2b58e6; text-decoration:none;} ul.pd_location li a:hover span, ul.pd_location li.active a span {background:#1559ef; color:#fff;} ul.pd_location li a:hover::before, ul.pd_location li.active a::before {border-color:#1559ef; background-color:#1559ef;} ul.pd_location li.active::after {color:#2b58e6; font-weight:600;} ul.pd_location li:before {content:""; display:block; height:1px; background:#d0d0d0; position:absolute; right:5%; top:7px; width:100%; right:50%;} ul.pd_location li:nth-child(1):before {display:none;} body .pipe_dag_con {height:calc(100% - 85px); width:100%; display:flex; font-family:"Pretendard"; font-weight:400; letter-spacing:0; color:#2e2e2e;} .pipe_dag_con .sidebar_dag::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.05);} .pipe_dag_con .sidebar_dag::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.15);} /* 레이아웃 */ .pipe_dag_con #pipeDagLeftArea {background:#fff; border:1px solid #dcdcdc; padding:15px; overflow-x:auto; overflow-y:hidden; border-radius:15px 15px 0 0; height:calc(100% + 20px); border-bottom:none;} .pipe_dag_con #pipeDagRightArea {background:#f2f3f6; padding:0 0 0 5px; position:relative;} .pipe_dag_con #pipeDagRightArea .paas_tab {margin-top:0;} .pipe_dag_con #pipeDagRightArea .pdm_tab .tab-pane {overflow-y:auto; height:100%; padding-right:15px;} /* 분할 */ .pipe_dag_con .gutter.gutter-horizontal {border:none; background-color:transparent; position:relative; left:-12px; background-image:url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');} /* ************************** 좌측 영역 ************************** */ .pipe_dag_con .dag_select_action_num {display:flex; justify-content:space-between; min-width:300px;} .pipe_dag_con .dag_select_action_num strong {font-size:16px; font-weight:600; color:#000; display:block; line-height:30px;} .pipe_dag_con .dag_select_action_num select {display:block; width:120px;} .pipe_dag_con .sidebar_dag {width:100%; height:calc(100% - 45px); margin-top:20px; padding:0 5px 20px 0; overflow-y:auto; overflow-x:hidden; min-width:300px;} .pipe_dag_con .sidebar_dag::-webkit-scrollbar {width:6px; height:6px;} /* jstree 커스텀 */ .pipe_dag_con .sidebar_dag ul.jstree-container-ul {min-width:250px; width:100%;} .sidebar_dag li .jstree-anchor > .jstree-icon.jstree-themeicon {margin-right:2px; background-image:none !important;} .sidebar_dag.jstree_area .jstree-node, .sidebar_dag.jstree_area .jstree-icon {background-image: url("/lib/jstree/themes/default/32px_paas.png");} .sidebar_dag.jstree_area > .jstree-no-dots .jstree-open > .jstree-ocl {background-position:-36px -2px;} .sidebar_dag.jstree_area > .jstree-no-dots .jstree-closed > .jstree-ocl {background-position:-4px -3px;} .sidebar_dag.jstree_area .jstree-wholerow {height:30px;} .sidebar_dag.jstree_area .jstree-clicked.jstree-anchor{color:#2e2e2e;} .sidebar_dag .jstree_area.jstree-default .jstree-clicked.jstree-anchor {color:#2e2e2e;} .sidebar_dag .jstree_area.jstree-default .jstree-clicked.jstree-anchor:link, .sidebar_dag .jstree_area.jstree-default .jstree-clicked.jstree-anchor:visited, .sidebar_dag .jstree_area.jstree-default .jstree-clicked.jstree-anchor:hover, .sidebar_dag .jstree_area.jstree-default .jstree-clicked.jstree-anchor:active {color:#1559ef;} .sidebar_dag .jstree_area.jstree-default li.jstree-node.jstree-closed > .jstree-anchor {color:#2e2e2e;} /* .sidebar_dag.jstree_area .jstree-clicked.jstree-anchor:link, .sidebar_dag.jstree_area .jstree-clicked.jstree-anchor:visited, .sidebar_dag.jstree_area .jstree-clicked.jstree-anchor:hover, .sidebar_dag.jstree_area .jstree-clicked.jstree-anchor:active {color:#0046db !important; font-weight:600;} */ .sidebar_dag.jstree_area .jstree-wholerow-hovered {background:#f4f7fc !important;} .sidebar_dag.jstree_area .jstree-wholerow-clicked {background:#f4f7fc !important; color:#0046db !important; font-weight:600;} .sidebar_dag.jstree_area .jstree-node {min-height:30px; line-height:30px;} .sidebar_dag.jstree_area .jstree-anchor {line-height:30px; height:30px;} .sidebar_dag.jstree_area .jstree-icon {height:30px; line-height:30px;} .sidebar_dag.jstree_area .jstree-icon:empty {height:30px; line-height:30px;} .sidebar_dag .jstree-clicked.jstree-anchor, .sidebar_dag .jstree-clicked.jstree-anchor:link, .sidebar_dag .jstree-clicked.jstree-anchor:visited, .sidebar_dag .jstree-clicked.jstree-anchor:hover, .sidebar_dag .jstree-clicked.jstree-anchor:active {color:#000;} .sidebar_dag li .jstree-anchor > .jstree-icon.jstree-themeicon:after, /* 자식 노드가 없는 최상위 노드에도 아이콘을 표시하기 위해 추가 */ .sidebar_dag li.jstree-open .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_dag li.jstree-closed .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; width:20px; height:30px; background-size:18px auto !important;} /* 아이콘/상태값 아이콘 추가 */ .sidebar_dag li.jstree-node > .jstree-anchor > .jstree-icon.jstree-themeicon:before { content:""; display:block; width:20px; height:20px; font-family:'Font Awesome 6 Free'; position:absolute; left:0; top:5px; font-size:16px; border-radius:4px; line-height:20px;} .sidebar_dag li.jstree-node.jstree-open > .jstree-anchor {color:#1559ef !important; font-weight:500;} .sidebar_dag li.jstree-node.jstree-closed > .jstree-anchor {color:#2e2e2e;} .sidebar_dag li.jstree-node.pdicon_folder.jstree-open > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f07c"; color:#e9ad5f; background:#fff; font-weight:900;} .sidebar_dag li.jstree-node.pdicon_folder.jstree-closed > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f07b"; color:#e9ad5f; background:#fff; font-weight:900;} .sidebar_dag li.jstree-node.pdicon_time.jstree-open > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f017"; color:#1559ef; font-weight:900;} .sidebar_dag li.jstree-node.pdicon_time.jstree-closed > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f017"; color:#2e2e2e; font-weight:900;} .sidebar_dag li.jstree-node.pdstatus > .jstree-anchor > .jstree-icon.jstree-themeicon:before {width:10px; height:10px; border-radius:5px; top:7px; content:""; background:#cccccc;} .sidebar_dag li.jstree-node.pdstatus > .jstree-anchor > .jstree-icon.jstree-themeicon:after {display:none;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_failed > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#ed6e5b;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_queued > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#c7b149;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_restarting > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#62b3f2;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_up_for_retry > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#e18831;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_up_for_reschedule > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#d76bb7;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_deferred > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#9570f1;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_scheduled > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#70d3b6;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_success > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#6cba49;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_running > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#00a857;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_skipped > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#788fa4;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_upstream_failed > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#c4622a;} .sidebar_dag li.jstree-node.pdstatus.pdstatus_default > .jstree-anchor > .jstree-icon.jstree-themeicon:before {background:#0072ff;} span.pdstatus {color:#fff !important; border:none !important; pointer-events:none !important;} span.pdstatus:hover {} .pdstatus_failed {background:#ed6e5b;} .pdstatus_queued {background:#c7b149;} .pdstatus_restarting {background:#62b3f2;} .pdstatus_up_for_retry {background:#e18831;} .pdstatus_up_for_reschedule {background:#d76bb7;} .pdstatus_deferred {background:#9570f1;} .pdstatus_scheduled {background:#70d3b6;} .pdstatus_success {background:#6cba49;} .pdstatus_running {background:#00a857;} .pdstatus_skipped {background:#788fa4;} .pdstatus_upstream_failed {background:#c4622a;} .pdstatus_default {background:#0072ff;} .sidebar_dag li.jstree-node.pdstatus.jstree-leaf, .sidebar_dag li.jstree-node.pdstatus.jstree-leaf .jstree-wholerow, .sidebar_dag li.jstree-node.pdstatus.jstree-leaf .jstree-anchor {line-height:22px; height:22px;} .sidebar_dag li.jstree-node.pdstatus.jstree-leaf > .jstree-anchor > .jstree-icon.jstree-themeicon:before {top:6px; left:8px;} /* ************************** 우측 영역 ************************** */ /* Dag 모니터링 탭 */ #pipeDagRightArea .tab-content {height:calc(100vh - 240px); overflow-y:hidden; overflow-x:hidden; padding:25px 10px 25px 25px;} .pd_title {font-size:18px; font-weight:600; line-height:25px; margin:0 0 10px;} .pd_title button.btn_icon i {margiun-right:0;} .pd_title i.tooltip, .pd_title i.tooltip_trigger {color:#8a9aa8; margin-right:5px;} .pd_title .ex_txt {display:inline-block; vertical-align:middle; margin-left:10px; color:#129dd1; font-size:14px;} .pd_title .ex_txt i {color:#129dd1;} .pd_subtitle {font-size:15px; font-weight:600; line-height:20px; margin:0 0 10px;} /* 작업 목록 탭 */ .pwl_area {} .pwl_area {--pwl-left:65%;} .pwl_area .pwl_lst {border:1px solid #dcdcdc; padding:25px 28px; border-radius:15px; background:#fff; display:flex; flex-wrap:nowrap; align-items:stretch; gap:30px;} .pwl_area .pwl_lst + .pwl_lst {margin-top:15px;} .pwl_area .pwl_lst .pwl_info {position:relative; padding-right:30px; flex:0 0 max(50%, var(--pwl-left)); min-width:max(50%, var(--pwl-left));} .pwl_area .pwl_lst .pwl_info:after {content:""; display:block; width:1px; height:calc(100% - 20px); position:absolute; right:0; top:10px; background:#dedede;} .pwl_area .pwl_lst .pwl_info h3 {width:100%; font-size:20px; font-weight:600; margin:0 0 30px; color:#000;} .pwl_area .pwl_lst .pwl_info .pwli_area {display:flex; gap:20px; flex-wrap:nowrap; align-items:flex-start; min-width:0;} .pwl_area .pwl_lst .pwl_info .pwli_item {display:block; min-width:0;} .pwl_area .pwl_lst .pwl_info .pwli_item:nth-child(1) {width:39%;} .pwl_area .pwl_lst .pwl_info .pwli_item:nth-child(2) {width:23%;} .pwl_area .pwl_lst .pwl_info .pwli_item:nth-child(3) {width:39%;} @media (max-width:1600px) { .pwl_area .pwl_lst .pwl_info .pwli_item:nth-child(1) {width:35%;} .pwl_area .pwl_lst .pwl_info .pwli_item:nth-child(2) {width:20%;} .pwl_area .pwl_lst .pwl_info .pwli_item:nth-child(3) {width:45%;} } .tooltip_trigger, i.tooltip_trigger {color:#8a9aa8; margin-left:5px;} .pwl_area .pwl_lst .pwl_info .pwli_item strong {font-size:14px; font-weight:400; color:#5a5a5a; white-space:nowrap;} .pwl_area .pwl_lst .pwl_info .pwli_item strong i.tooltip_trigger {color:#8a9aa8; margin-left:5px;} .pwl_area .pwl_lst .pwl_info .pwli_item .m_btn_tiny {margin-left:20px;} .pwl_area .pwl_lst .pwl_info .pwli_item p {font-size:14px; margin:10px 0 0; color:#2e2e2e; font-weight:600; white-space:nowrap; overflow:hidden; min-width:0;} .pwl_area .pwl_lst .pwl_info .pwli_item p .lt_time {margin-right:5px;} .pwl_area .pwl_lst .pwl_info .pwli_item p .m_btn_tiny {margin-left:0;} .pwl_area .pwl_lst .pwl_info .pwli_item:nth-child(1) p {white-space:normal; word-break:break-all;} .pwl_area .pwl_lst .pwl_chart {flex:1 1 0; min-width:0;} .pwl_area .pwl_lst .pwl_chart h4 {font-size:14px; font-weight:500; color:#5a5a5a;} .pwl_area .pwl_lst .pwl_chart .recentRunsChart {width:100%;} /* 코드 탭 */ .code_tab_top {display:flex; justify-content:space-between; margin-bottom:15px;} .code_tab_top .last_parsing {padding-top:6px;} .code_tab_top .last_parsing span {} .code_tab_top .last_parsing strong {} .code_tab_top .parsing_ver {} .code_tab_top .parsing_ver span {} .code_tab_top .parsing_ver select.form_control {display:inline-block; width:auto; margin-left:10px;} /* 논리 실행 일시 */ .pd_panel {padding:25px 30px; background:#fff; border-radius:15px; border:1px solid #dcdce1; box-shadow:0 5px 10px rgba(0,0,0,0.08);} .pd_panel.pdl_time_con {height:calc(100vh - 200px); overflow-y:auto; overflow-x:hidden;} .pd_panel.scroll_panel {height:calc(100vh - 300px); overflow-y:auto; overflow-x:hidden;} /* 노드 탭 */ #tabNodeRendering .pd_title {display:flex; justify-content: space-between;} /* *********************** 연합관리 *********************** */ /* 연합학습 실행 모니터링 */ .run_monitoring {} .run_monitoring .runm_card_area {display:flex; justify-content:space-between; gap:15px;} .runm_card_area .runm_card {width:100%; padding:20px 30px; background:#f1f1f1; border-radius:15px; display:flex; justify-content:space-between; align-items:center;} .runm_card_area .runm_card .status {} .runm_card_area .runm_card .status strong {font-size:30px; line-height:1; color:#000; font-weight:700; display:block; margin-bottom:10px;} .runm_card_area .runm_card .status strong small {font-size:20px; display:inline-block; margin-left:5px; vertical-align:baseline;} .runm_card_area .runm_card .status span {font-size:15px; font-weight:500;} .runm_card_area .runm_card .run_icon {font-size:40px;} .runm_card_area .runm_card.runm_progress {background:#e6f3f3;} .runm_card_area .runm_card.runm_progress span {color:#34b079;} .runm_card_area .runm_card.runm_progress .run_icon {color:#34b079;} .runm_card_area .runm_card.runm_client {background:#dff3f9;} .runm_card_area .runm_card.runm_client span {color:#10b2d5;} .runm_card_area .runm_card.runm_client .run_icon {color:#10b2d5;} .runm_card_area .runm_card.runm_success {background:#eaefff;} .runm_card_area .runm_card.runm_success span {color:#296de9;} .runm_card_area .runm_card.runm_success .run_icon {color:#296de9;} .runm_card_area .runm_card.runm_accuracy {background:#eceaff;} .runm_card_area .runm_card.runm_accuracy span {color:#535aeb;} .runm_card_area .runm_card.runm_accuracy .run_icon {color:#535aeb;} .runm_card_area .runm_card.runm_time {background:#f3eaff;} .runm_card_area .runm_card.runm_time span {color:#7e41ca;} .runm_card_area .runm_card.runm_time .run_icon {color:#7e41ca;} .run_monitoring h3 {font-size:18px; font-weight:700; margin-bottom:8px;} .run_monitoring .c_panel {border:1px solid #dcdcdc; border-radius:15px; background:#fff; padding:20px 30px;} .run_monitoring .row [class*="col-"] {padding:20px 10px;} /* *********************** 연합관리 - 팝업 스타일 *********************** */ /* 공통 */ .pp_panel {padding:20px 24px 10px; border:1px solid #dcdce1; border-radius:15px;} .popContents .pp_panel {background:#fafafa; padding-bottom:20px;} .pp_panel + .pp_panel {margin-top:15px;} .pp_panel:last-child {margin-bottom:5px;} .pp_panel .row + .pf_title {margin-top:10px;} .pp_panel .tooltip_trigger {color:#879ba9; display:inline-block; margin-left:5px; vertical-align:middle;} .pp_panel .pf_title {font-size:15px; font-weight:600; color:#000; line-height:1; margin:0 0 10px;} .pp_panel .pf_title .form-switch {margin-left:12px !important; display:inline-block; vertical-align:middle;} /* 접기 기능 */ .foldable_area {max-height:1000px; transition:0.3s; overflow:hidden;} .foldable_area.fold {height:0;} /* 자원 설정 */ .has_form.resource_setting {position:relative;} .has_form.resource_setting .resource_function {position:absolute; right:15px; top:10px;} .has_form.resource_setting .resource_function .m_radio label {color:#5a5a5a; font-size:14px; font-weight:400; padding-left:21px;} .has_form.resource_setting .resource_function .m_radio + .m_radio {margin-left:5px;} .has_form.resource_setting .resource_function input.form_control {width:auto; min-width:75px; height:25px; line-height:23px; border:1px solid #dcdcdc !important; display:inline-block; vertical-align:middle; border-radius:5px; margin-left:5px; text-align:right;} .has_form.resource_setting .resource_function input.form_control:hover, .has_form.resource_setting .resource_function input.form_control:focus {border-color:#2b58e6 !important;} .has_form.resource_setting .range_area {margin:30px 0 0; position:relative; padding:24px 0 0;} .has_form.resource_setting .range_area .range_value {position:absolute; top:0; display:inline-block; padding:0 6px; border-radius:4px; background:#353c48; height:20px; min-width:20px; left:0; color:#fff; font-weight:600; font-size:12px; line-height:20px; text-align:center;} .has_form.resource_setting .range_area .form-range {} .has_form.resource_setting .range_footer {display:flex; justify-content:space-between; ㅡㅁㄱ햐ㅜ-새ㅔ:3ㅔㅌ;} .has_form.resource_setting .range_footer span {display:inline-block; position:relative; font-size:14px; font-weight:400; color:#383838;} .has_form.resource_setting .range_footer span:before {content:""; display:block; width:1px; height:4px; background:#000; position:absolute; top:-5px;} .has_form.resource_setting .range_footer span:first-child:before {left:5px;} .has_form.resource_setting .range_footer span:last-child:before {right:5px;} /* 스위치 버튼 */ .form-switch {padding-left:30px; display:inline-block;} .form-switch label {float:left;} .form-switch label + .form-check-input {} .form-switch .form-check-input {width:30px; height:15px; margin-left:-30px; border-radius:8px; background-size:13px 13px; cursor:pointer;} .form-switch .form-check-input:checked {background-position:right center;} .form-check-input.form-switch:focus {border-color: #86b7fe;} .form-check-input.form-switch:checked {background-color:#005bf8; border-color:#005bf8;} .form-switch label + .form-check-input {margin-left:0; margin-top:3px;} /* 고급 컨테이너 설정 */ .pp_foldable {transition:0.3s; max-height:1000px;} .pp_foldable .form_control {height:40px; line-height:38px; width:100%;} .pp_foldable .select2-container--default .select2-selection--single, .pp_foldable .select2-container--default .select2-selection--multiple {min-height:40px; width:100%;} .pp_foldable .select2-container--default .select2-selection--single .select2-selection__rendered {line-height:41px;} .pp_foldable .select2-container--default .select2-selection--single .select2-selection__arrow:after {right:5px;} .pp_foldable .btn_add_volumn {} .pp_foldable .erasable_container {border:1px solid #dcdce1; border-radius:8px; padding:20px 15px 25px; width:calc(100% - 39px); position:relative; margin-top:10px;} .pp_foldable .erasable_container h4 {font-size:14px; color:#5a5a5a; font-weight:400; margin:0 0 10px; line-height:1;} .pp_foldable .erasable_container .btn_remove {position:absolute; right:-40px; top:20px; width:40px; height:40px; border-radius:0 8px 8px 0; background:#fff; background:#fff; outline:none; transition:0.2s; color:#8d9ba6; text-align:center; line-height:38px; font-size:16px; border:1px solid #dcdcdc; border-left:none;} .pp_foldable .erasable_container .btn_remove:hover {color:#ed6e5b;} /* 접기 기능 */ #advConSetting .pf_title {margin-bottom:10px; transition:0.3s;} #advConSetting button.btn_toggle_container {border:none; background:none; width:25px; height:25px; display:inline-block; margin-left:5px; transition:0.2s; font-size:14px; color:#000; vertical-align:middle; font-weight:400;} #advConSetting button.btn_toggle_container:hover {color:#1559ef;} #advConSetting.fold .pf_title {margin-bottom:0;} #advConSetting.fold button.btn_toggle_container {transform:rotate(180deg);} #advConSetting.fold .pp_foldable {height:0; overflow:hidden;} /* 고급 컨테이너 폼양식 */ .pp_foldable .erasable_container .volime_form {} .pp_foldable .erasable_container .volime_form input.inp_path_nm {width:calc(100% - 80px); margin-bottom:10px;} .pp_foldable .btn_toggle_group {display:inline-flex !important; justify-content:flex-start;} .pp_foldable .btn_toggle_group button {min-width:80px; height:40px; padding:0 20px; line-height:38px; border-radius:0;} .pp_foldable .btn_toggle_group button + button {margin-left:0; border-left:none;} .pp_foldable .btn_toggle_group button:first-child {border-radius:8px 0 0 8px;} .pp_foldable .btn_toggle_group button:last-child {border-radius:0 8px 8px 0;} .pp_foldable .btn_toggle_group button:hover {background:#1559ef; border-color:#1559ef; color:#fff;} .pp_foldable .erasable_container .volime_form .volumn_group {width:100%;} /* .pp_foldable .erasable_container .volime_form .volumn_group .btn_toggle_group {width:160px;} */ .pp_foldable .erasable_container .volime_form .volumn_group > * {float:left; display:inline-block;} .pp_foldable .erasable_container .volime_form .volumn_group:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} .pp_foldable .erasable_container .volime_form .volumn_group .select_volumn {width:560px; margin:0 10px;} .pp_foldable .erasable_container .volime_form .volumn_group .select2-container {width:560px !important; margin:0 10px;} .pp_foldable .erasable_container .volime_form .volumn_group .inp_host_path {width:560px; margin:0 10px;} .pp_foldable .erasable_container .volime_form .volumn_group .editable_btn {width:70px; display:flex; align-items:center; margin-top:8px;} .pp_foldable .erasable_container .volime_form .volumn_group .editable_btn label {margin-right:8px; font-size:14px; font-weight:400; color:#5a5a5a;} .pp_foldable .erasable_container .volime_form .volumn_group .editable_btn .form-switch {} .pp_foldable .erasable_container .volime_form .volumn_group .editable_btn .form-switch .form-check-input {} .pp_foldable .ppf_setting {margin-top:40px;} .pp_foldable .ppf_setting .researt_policy_setting {display:inline-block; vertical-align:middle;} .pp_foldable .ppf_setting .researt_policy_setting label {margin-right:10px;} .pp_foldable .ppf_setting .researt_policy_setting .btn_toggle_group {} .pp_foldable .ppf_setting .researt_policy_setting .btn_toggle_group button {height:32px; line-height:30px; padding:0 15px;} .pp_foldable .ppf_setting .max_retry {display:inline-block; vertical-align:middle; margin-left:40px;} .pp_foldable .ppf_setting .max_retry label {font-size:14px; font-weight:400; color:#5a5a5a; margin-right:10px;} .pp_foldable .ppf_setting .max_retry input.form_control {display:inline-block;} /*============================================================================================================================ 도커관리 =============================================================================================================================*/ /* ------- connection_list ------- */ .connection_area {position:relative; overflow:hidden;} /* 리스트 */ .connection_list {position:relative; overflow-x:hidden; overflow-y:auto; padding:0; display:flex; justify-content:flex-start; gap:20px; flex-wrap:wrap; height:calc(100vh - 192px); align-content:flex-start;} .connection_list .c_item {border:1px solid #dcdcdc; border-radius:15px; background:#fff; transition:0.3s; padding:20px 18px 20px 75px; position:relative; cursor:pointer; width:calc((100% - 60px) / 4);} .connection_list .c_item:hover, .connection_list .c_item.active {border-color:#1559ef; box-shadow:5px 10px 10px rgba(0,0,0,0.05);} .connection_list .c_item .c_delete {text-indent:-9999px; border:none; background:none; color:#000; width:20px; height:20px; text-align:center; line-height:20px; position:absolute; right:7px; top:7px; font-size:0; transition:0.2s;} .connection_list .c_item .c_delete:after {content:"\f00d"; font-family:"Font Awesome 6 Free"; text-indent:0; display:block; font-size:14px; font-weight:900;} .connection_list .c_item .c_delete:hover {color:#c06565;} .connection_list .c_item .c_status {width:50px; height:50px; position:absolute; border-radius:25px; background:#38a4e2; text-align:center; line-height:50px; color:#fff; transition:0.2s; left:12px; top:20px;} .connection_list .c_item .c_status i {font-size:30px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} .connection_list .c_item .c_status.disconnected {background:#a1a1a1;} .connection_list .c_item .c_status.disconnected:after {content:"\f057"; font-family:"Font Awesome 6 Free"; font-size:16px; text-indent:0; display:block; font-weight:900; color:#ed6e5b; position:absolute; right:3px; top:-7px; width:18px; height:18px; border-radius:9px; background:#fff; border:1px solid #fff; line-height:1;} .connection_list .c_item .c_title {font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; color:#2e2e2e; width:calc(100% - 20px);} .connection_list .c_item .c_connection_info {margin:30px 0 0; text-align:right;} .connection_list .c_item .c_connection_info .cci_item {display:inline-block; padding:0 10px; height:20px; border-radius:10px; background:#e7e7e7; color:#000; font-size:14px; font-weight:600; line-height:20px;} .connection_list .c_item .c_connection_info .cci_item i {} .connection_list .c_item .c_connection_info .cci_item span {display:inline-block; margin-left:5px;} .connection_list .c_item .c_connection_info .cci_item.cci_host {color:#0960c1;} .connection_list .c_item .c_connection_info .cci_item.cci_port {color:#4eac7a;} @media (min-width:1700px) { .connection_list .c_item {width:calc((100% - 80px) / 5);} } @media (min-width:2000px) { .connection_list .c_item {width:calc((100% - 100px) / 6);} } @media (min-width:2400px) { .connection_list .c_item {width:calc((100% - 120px) / 7);} } /* 우측 패널 */ .connection_panel {position:absolute; right:-100%; top:0; width:100%; max-width:1000px; background:#fff; padding:25px 20px 45px; border-radius:15px; box-shadow:-20px 0 20px rgba(0,0,0,0.1); transition:0.4s;} .connection_panel.active {right:0;} .connection_panel h2 {font-size:30px; color:#3262e5; line-height:54px; margin:0 0 20px; letter-spacing:-1px; font-weight:700;} .connection_panel h2 span.cp_title_icon {display:inline-block; width:54px; height:54px; border-radius:27px; background:#1559ef; margin-right:15px; text-align:center; line-height:51px;} .connection_panel h2 i {font-size:30px; color:#fff;} .connection_panel .cp_btn_area {padding:20px 25px 0;} .connection_panel .cp_btn_area > .m_btn + .m_btn {margin-left:0;} .connection_panel .pp_panel {background:#fafafa;} /* 서버 상세 정보 팝업 */ .pop_ls_detail {} .pop_ls_detail .pls_function {display:flex; justify-content:space-between; margin-bottom:20px;} .pop_ls_detail .pls_function > div {} .pop_ls_detail .pls_function > div label {display:block; font-size:14px; color:#5a5a5a; margin-bottom:3px;} .pop_ls_detail .pls_status {width:90px; height:32px; line-height:32px; border-radius:8px; text-align:center; background:#999; font-size:12px; color:#fff; font-weight:500; display:inline-block;} .pop_ls_detail .pls_status.status_created {background-color:#0018c9;} .pop_ls_detail .pls_status.status_running {background-color:#19bf48;} .pop_ls_detail .pls_status.status_pause {background-color:#858a90;} .pop_ls_detail .pls_status.status_restarting {background-color:#219eff;} .pop_ls_detail .pls_status.status_removing {background-color:#ed6e5b;} .pop_ls_detail .pls_status.status_terminated {background-color:#474747;} .pop_ls_detail .pls_status.status_manual_cleanup {background-color:#5e50e5;} .pop_ls_detail .pls_function .btn_group {display:inline-flex !important; justify-content:flex-start;} .pop_ls_detail .pls_function .btn_group + .btn_group {margin-left:16px;} .pop_ls_detail .pls_function .btn_group button {border-radius:0;} .pop_ls_detail .pls_function .btn_group button:first-child {border-radius:8px 0 0 8px;} .pop_ls_detail .pls_function .btn_group button:last-child {border-radius:0 8px 8px 0;} .pop_ls_detail .pls_function .btn_group button:hover {background:#2b58e6; border-color:#2b58e6; color:#fff;} .pop_ls_detail .pls_function .btn_group button + button {border-left:none; margin-left:0;} /* 도커 대시보드 */ .docker_info_area {display:flex; align-items:center;} ul#dockerInfo {padding:0; margin:0;} #dockerInfo li {display:inline-block; padding:0; font-weight:bold; margin:0 0 0 6px; list-style:none; vertical-align:middle; font-size:16px;} #dockerInfo li.spec {font-size:14px; font-weight:300; color:#2e2e2e;} #dockerInfo li .icon {display:inline-block; margin-right:6px; font-size:20px; vertical-align:middle;} #dockerInfo li .text {line-height:30px;} #dockerInfo li.cpu .icon {color:#273bf3;} #dockerInfo li.ram {margin-left:20px;} #dockerInfo li.ram .icon {color:#4a96f4;} /* 대시보드 영역 */ .docker_dashboard_area {width:100%; height:calc(100% - 70px); margin-top:10px;} .docker_dashboard_area .card_area {width:100%; height:110px; display:flex; justify-content:flex-start; align-items:flex-end; gap:20px; position:relative; z-index:2;} .docker_dashboard_area .infoCard {display:inline-flex; border:1px solid #dcdce1; border-bottom:none; border-radius:15px 15px 0 0; background:#e9e9e9; padding:20px 100px 20px 30px; width:400px; height:90px; overflow:hidden; cursor:pointer; transition:0.3s; position:relative;} .docker_dashboard_area .infoCard:hover {background:#fff; box-shadow:5px -5px 8px rgba(0, 0, 0, 0.06);} .docker_dashboard_area .infoCard.clicked {height:110px; background:#fff; box-shadow:5px -5px 10px rgba(0, 0, 0, 0.06); position:relative; bottom:-1px; border-bottom-color:#fff;} .docker_dashboard_area .infoCard .icon {width:50px; height:50px; display:flex; align-items:center; justify-content:center; position:absolute; right:30px; top:50%; transform:translate(0,-50%); border-radius:25px; color:#fff; background:#999;} .docker_dashboard_area .infoCard .icon i {font-size:20px;} .docker_dashboard_area #containerInfo.infoCard .icon {background:#5c82f0;} .docker_dashboard_area #imageInfo.infoCard .icon {background:#9270f5;} .docker_dashboard_area #volumeInfo.infoCard .icon {background:#59ae5b;} .docker_dashboard_area #networkInfo.infoCard .icon {background:#5ca7ed;} .docker_dashboard_area .infoCard .info {width:100%; display:flex; justify-content:space-between;} .docker_dashboard_area .infoCard .info .section1, .docker_dashboard_area .infoCard .info .section2 {display:flex; justify-content:center; flex-flow:column; height:100%;} .docker_dashboard_area .infoCard .info .section1 {gap:5px;} .docker_dashboard_area .infoCard .info .section2 {gap:2px;} .docker_dashboard_area .infoCard .info .section1 .infoValue, .docker_dashboard_area .infoCard .info .section1 .infoTitle {font-weight:bold; font-size:25px; color:#686868; line-height:1;} .docker_dashboard_area .infoCard .info .section1 .infoValue {font-size:25px; color:#2e2e2e;} .docker_dashboard_area .infoCard .info .section1 .infoTitle {font-size:18px;} .docker_dashboard_area #containerInfo.infoCard .info .section1 .infoTitle {color:#5c82f0;} .docker_dashboard_area #imageInfo.infoCard .info .section1 .infoTitle {color:#9270f5;} .docker_dashboard_area #volumeInfo.infoCard .info .section1 .infoTitle {color:#59ae5b;} .docker_dashboard_area #networkInfo.infoCard .info .section1 .infoTitle {color:#5ca7ed;} .docker_dashboard_area .infoCard .info .section2 .running, .docker_dashboard_area .infoCard .info .section2 .paused, .docker_dashboard_area .infoCard .info .section2 .stopped, .docker_dashboard_area .infoCard .info .section2 .imageSize {display:flex; align-items:center;} .docker_dashboard_area .infoCard .info .section2 .running {color:#1da74e;} .docker_dashboard_area .infoCard .info .section2 .paused {color:#8c8c8c;} .docker_dashboard_area .infoCard .info .section2 .stopped {color:#ed6e5b;} .docker_dashboard_area .infoCard .info .section2 .imageSize {color:#000;} .docker_dashboard_area .infoCard .info .section2 .imageSize i {color:#9270f5;} .docker_dashboard_area .infoCard .info .section2 .imageSize small {font-size:14px; color:#686868; font-weight:400;} .docker_dashboard_area .infoCard .info .section2 .infoValue {margin-left:7px; font-size:14px; font-weight:700;} .docker_dashboard_area .infoCard .info .section2 .infoTitle {margin-left:5px; font-size:14px; color:#686868 !important;} .docker_dashboard_area .grid_area {width:100%; background:#fff; padding:25px 20px; border-radius:0 15px 15px 15px; position:relative; border:1px solid #dcdce1; box-shadow:5px 5px 10px rgba(0, 0, 0, 0.06);} /* 그룹 버튼 */ .btn_toggle_group .m_btn:hover {background:#1559ef !important;} /* *********************** 데이터 파이프라인 권한 관리 리스트 *********************** */ .pipe_box_area {} .pipe_box_lst {overflow-x:auto; overflow-y:hidden; white-space:nowrap; padding-bottom:5px; touch-action:pan-y;} .pipe_box_lst.is-dragging {-webkit-user-select:none; user-select:none;} .pipe_box_lst::-webkit-scrollbar {width:4px; height:4px;} .pipe_box_lst::-webkit-scrollbar-track {background:transparent;} .pipe_box_lst::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.06);} .pipe_box_lst::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.12);} .pipe_box_lst .pbl_item {width:140px; height:80px; border:1px solid #e3e3e3; border-radius:8px; padding:15px; transition:0.2s; cursor:pointer; position:relative; display:inline-block; text-align:center; justify-content:center; background:#fff; margin:0 10px 0 0; transition:0.2s;} .pipe_box_lst .pbl_item:hover, .pipe_box_lst .pbl_item.active {border-color:#0d6efd; background-color:#f4f7ff;} .pipe_box_lst .pbl_item img {height:20px; width:auto;} .pipe_box_lst .pbl_item strong {font-size:15px; font-weight:500; display:block; text-align:center; width:100%; margin-top:10px;} .pipe_box_lst .pbl_item button.btn_delete_pbli {position:absolute; right:3px; top:7px; width:15px; height:15px; border:none; outline:none; background:none; text-align:center; line-height:15px; text-indent:-9999px; padding:0; margin:0;} .pipe_box_lst .pbl_item button.btn_delete_pbli:after {content:"\f00d"; display:block; font-family:"Font Awesome 6 Free"; font-size:14px; text-indent:0; position:absolute; left:0; top:0; color:#666; transition:0.2s; font-weight:900;} .pipe_box_lst .pbl_item button.btn_delete_pbli:hover:after {color:#c06565;} .pd_panel .panel_top {display:flex; justify-content:space-between; align-items:center; margin-bottom:10px;} .pd_panel .panel_top .pd_title {margin:0;} /* 데이터 이동 */ .move_data {display:flex; justify-content:space-between;} .move_data .move_data_left {width:calc(50% - 40px);} .move_data .move_data_right {width:calc(50% - 40px);} .move_data .move_data_arrow {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; flex-direction:column; width:80px;} .move_data .move_data_arrow .btn_move {width:30px; height:30px; border-radius:15px; background:#999; color:#fff; border:none; outline:none; text-align:center; line-height:30px; transition:0.2s;} .move_data .move_data_arrow .btn_move:hover {background-color:#004bb6;} .move_data .move_data_arrow .btn_move:after {content:""; font-family:"Font Awesome 6 Free"; font-size:18px; font-weight:900;} .move_data .move_data_arrow .btn_move.btn_move_right:after {content:"\f054";} .move_data .move_data_arrow .btn_move.btn_move_left:after {content:"\f053";} .move_data .move_data_arrow .btn_move + .btn_move {margin-top:30px;} /* 패널 영역 높이값 조절 */ .row.same_height_panel > [class*="col-"] > .x_panel {height:100%; padding:15px 20px; margin-bottom:0;} /* 페키지 의존성 명세 파일 */ .top_title_area {display:flex; justify-content:space-between;} .top_title_area .fuction_area {display:flex; gap:10px;} /* *********************** 데이터 파이프라인 - 모델버전관리 *********************** */ /* 모델 파일 찾기 */ .file_selected {display:inline-block; vertical-align:middle; margin-right:10px;} .file_selected span {display:inline-block; vertical-align:middle;} .file_selected button.btn_delete_model {border:none; outline:none; transition:0.2s; background:url(../images/icon/icon_close_small.png) no-repeat center center; display:inline-block; width:15px; height:15px; vertical-align:middle;} /* *********************** 퀵모델링 *********************** */ /* 현재 위치 */ .quick_location_area {padding:20px 0; background:#fff; border-radius:15px; border:1px solid #dcdce1; box-shadow:0 5px 10px rgba(0,0,0,0.08); margin-bottom:30px;} ul.quick_location {padding:30px 0 0; margin:0; display:flex; justify-content:flex-start; align-items:flex-start; position:relative; width:100%;} /* 중앙 라인: 첫 동그라미 중심 ~ 마지막 동그라미 중심까지만 */ ul.quick_location li {list-style:none; position:relative; z-index:1; /* 동그라미가 라인 위에 나오도록 */ width:25%; text-align:center; position:relative;} ul.quick_location li:nth-child(1) {z-index:5;} ul.quick_location li:nth-child(2) {z-index:4;} ul.quick_location li:nth-child(3) {z-index:3;} ul.quick_location li:nth-child(4) {z-index:2;} ul.quick_location li:nth-child(5) {z-index:1;} ul.quick_location li a {display:inline-block; padding:25px 10px 0; position:relative; font-size:14px; color:#2e2e2e; text-align:center; transition:0.2s;} /* 퀵모델링 전용 */ .mw_quick_model_wizard ul.pd_location {padding:20px 0 0; right:-35px;} ul.pd_location li.pdl_select_algorithm:after{content:"Select Algorithm";} ul.pd_location li.pdl_get_data:after {content:"Get Data";} ul.pd_location li.pdl_explore_data:after {content:"Explore Data";} ul.pd_location li.pdl_train_model:after {content:"Train Model";} ul.pd_location li.pdl_evaluate_model:after {content:"Evaluate Model";} ul.pd_location li.pdl_evaluate_model {width:15%;} ul.pd_location li.pdl_evaluate_model:before {width:130%;} /* 퀵모델링 - Get Data */ .mw_quick_model_wizard .select_storage {margin-bottom:10px;} /* 동그라미 */ ul.quick_location li a::before {content:""; display:block; width:15px; height:15px; background:#fff; border:2px solid #5c5c5c; border-radius:50%; position:absolute; left:50%; top:0; transform:translateX(-50%); transition:0.2s;} ul.quick_location li.done a {color:#aaa;} ul.quick_location li.done a:before {background-color:#90d4fa; border-color:#90d4fa;} ul.quick_location li a:hover, ul.quick_location li.active a {color:#2b58e6; text-decoration:none;} ul.quick_location li a:hover::before, ul.quick_location li.active a::before {border-color:#1559ef; background-color:#1559ef;} ul.quick_location li.active::after {color:#2b58e6;} ul.quick_location li:before {content:""; display:block; height:1px; background:#d0d0d0; position:absolute; right:5%; top:7px;} ul.quick_location li:nth-child(1):before {display:none;} ul.quick_location li:nth-child(2):before {width:100%; right:50%;} ul.quick_location li:nth-child(3):before {width:100%; right:50%;} ul.quick_location li:nth-child(4):before {width:100%; right:50%;} ul.quick_location li:nth-child(5):before {width:100%; right:50%;} ul.quick_location li.done + li.active:before {height:3px; top:6px; background: linear-gradient(to right, #90d4fa 0%,#1559ef 100%);} ul.quick_location li.done + li.done:before {height:3px; top:6px; background:#90d4fa;} /* Select Algorithm */ .mw_select_algorithm .mg_tab .tab_bar {padding:0; margin:0 auto 30px; list-style:none; border:0; display:flex; justify-content:space-between; gap:20px;} .mw_select_algorithm .mg_tab .tab_bar:after {display:none;} .mw_select_algorithm .mg_tab .tab_bar > li {float:left; width:calc((100% - 40px) / 3); padding:0;} .mw_select_algorithm .mg_tab .tab_bar > li > a {display:block; padding:30px 35px 25px 135px; border-radius:10px; background-repeat:no-repeat; background-position:40px center; background-color:transparent; border:1px solid transparent; transition:0.3s; color:#2e2e2e; text-align:left;} .mw_select_algorithm .mg_tab .tab_bar > li > a:after {display:none;} .mw_select_algorithm .mg_tab .tab_bar > li:nth-child(1) {padding-left:0;} .mw_select_algorithm .mg_tab .tab_bar > li:last-child {padding-right:0;} .mw_select_algorithm .mg_tab .tab_bar > li:nth-child(1) > a {background-image:url(../images/icon/img_p_algorithm1.png);} .mw_select_algorithm .mg_tab .tab_bar > li:nth-child(2) > a {background-image:url(../images/icon/img_p_algorithm2.png);} .mw_select_algorithm .mg_tab .tab_bar > li:nth-child(3) > a {background-image:url(../images/icon/img_p_algorithm3.png);} .mw_select_algorithm .mg_tab .tab_bar > li > a strong {font-size:18px; display:inline-block; height:30px; line-height:30px; padding:0 15px; border-radius:15px; background:#fff;} .mw_select_algorithm .mg_tab .tab_bar > li > a .eng {display:inline-block; padding:0; font-size:14px; color:#808080; display:inline-block; margin-left:15px; vertical-align:middle; font-weight:400;} .mw_select_algorithm .mg_tab .tab_bar > li > a .desc {display:block; padding:0; margin-top:10px; font-size:14px; white-space:break-spaces; word-break:keep-all; padding-left:11px; display:block;} .mw_select_algorithm .mg_tab .tab_bar > li > a:hover {box-shadow:0 10px 10px rgba(0,0,0,0.1) !important; border-color:#dcdcdc; background-color:#fff;} .mw_select_algorithm .mg_tab .tab_bar > li > a.active {border-color:#1559ef; background-color:#fff;} .mw_select_algorithm .mg_tab .tab_bar > li > a:hover strong, .mw_select_algorithm .mg_tab .tab_bar > li > a.active strong {background:#f2f3f6;} .mw_select_algorithm .tab_content {display:none; margin:10px 0;} .mw_select_algorithm .tab_content.active {display:block;} .mw_select_algorithm .tab_content.fade {opacity:0; transition:opacity .3s ease-in-out;} .mw_select_algorithm .tab_content.fade.show {opacity:1;} .mw_select_algorithm .algorithm_list {padding:0; margin:0; list-style:none; border-radius:15px;} .mw_select_algorithm .algorithm_list > li {min-height:160px; padding:40px 500px 40px 30px; margin:0 0 30px; position:relative; border-radius:15px; cursor:pointer; background:transparent; transition:0.3s; border:1px solid transparent;} .mw_select_algorithm .algorithm_list > li:hover {box-shadow:0 10px 10px rgba(0,0,0,0.1) !important; border-color:#dcdcdc; background-color:#fff;} .mw_select_algorithm .algorithm_list > li.active {border-color:#1559ef; background-color:#fff;} .mw_select_algorithm .algorithm_list strong {font-size:18px; display:inline-block; height:30px; line-height:30px; padding:0 15px; border-radius:15px; background:#fff;} .mw_select_algorithm .algorithm_list > li:hover strong, .mw_select_algorithm .algorithm_list > li.active strong {background:#f2f3f6;} .mw_select_algorithm .algorithm_list .desc {display:block; padding:12px 0 0 15px; font-size:14px; word-break:keep-all; color:#2e2e2e;} .mw_select_algorithm .algorithm_list .img {display:block; width:500px; height:120px; text-align:center; position:absolute; top:20px; right:20px;} .mw_select_algorithm .algorithm_list .img > img {height:120px;} /* 화면 이동 */ .mw_quick_model_wizard {padding-bottom:40px; margin:0; position:relative;} .mw_quick_model_wizard .pipe_title {justify-content:flex-start; align-items:center;} .mw_quick_model_wizard .pipe_title h2 {margin-top:0;} .mw_quick_model_wizard .pipe_title .m_btn.goto_list {margin-left:15px; width:40px; height:40px; line-height:40px; text-align:center; vertical-align:middle; padding:0;} .mw_quick_model_wizard .pipe_title .m_btn.goto_list i {margin:0; font-size:16px; transform:rotate(-180deg);} .mw_quick_model_wizard .wizard_ctrl{position:fixed;right:50px;bottom:25px;z-index:2;} .mw_quick_model_wizard .wizard_ctrl > button{display:inline-block;vertical-align:middle;min-width:60px;height:60px;padding:0;margin:0 5px;position:relative;color:#fff;font-size:0;font-weight:300;border:1px solid #e2e3e7;border-radius:30px;background:#fff;box-shadow:0 20px 30px rgba(0,0,0,0.2);transition:all ease 0.2s;} .mw_quick_model_wizard .wizard_ctrl > button:before{display:block;content:"";width:24px;height:1px;position:absolute;bottom:26px;background-color:#003880;} .mw_quick_model_wizard .wizard_ctrl > button:after{display:block;content:"";width:1px;height:10px;margin-top:-9px;position:absolute;bottom:26px;background-color:#003880;} .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_prev:before{left:16px;} .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_next:before{right:16px;} .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_prev:after{left:20px;transform:rotate(45deg);} .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_next:after{right:20px;transform:rotate(-45deg);} .mw_quick_model_wizard .wizard_ctrl > button:hover{font-size:20px;background-color:#003880;} .mw_quick_model_wizard .wizard_ctrl > button:hover:before, .mw_quick_model_wizard .wizard_ctrl > button:hover:after{background-color:#fff;} .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_prev:hover{padding:0 20px 0 60px;} .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_next:hover{padding:0 60px 0 20px;} .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_finish{padding:0 40px 0 40px;font-size:20px;background-color:#003880;} .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_finish:before, .mw_quick_model_wizard .wizard_ctrl > button.btn_wizard_finish:after{display:none;} /* Get Data 탭 */ .mw_quick_model_wizard .file_select_area {padding:10px 20px; border:1px solid #d9d9d9; background:#fff; border-bottom:none; border-radius:10px 10px 0 0;} /* 익스플로러 데이터 탭 */ .mw_explore_data {display:flex; justify-content:space-between; gap:30px;} .mw_explore_data .ed_column {width:calc(100% - 280px);} .mw_explore_data .pd_panel {width:250px; background:#fff; border-radius:15px; padding:20px; margin-top:42px; height:467px;} .mw_explore_data .pd_panel .pd_title {} .mw_explore_data .pd_panel .ed_form {} .mw_explore_data .pd_panel .ed_form .m_radio + .m_radio {margin-top:10px;} .mw_explore_data .pd_panel .ed_form .m_check + .m_check {margin-top:10px;} /* trani model */ .mw_train_model .btn_group {display:inline-flex !important; justify-content:flex-start;} .mw_train_model .btn_group + .btn_group {margin-left:16px;} .mw_train_model .btn_group button {border-radius:0; background:#fff; color:#000000; font-weight:600; padding:0 25px; height:40px;} .mw_train_model .btn_group button:first-child {border-radius:8px 0 0 8px;} .mw_train_model .btn_group button.m_btn:last-child {border-radius:0 8px 8px 0;} .mw_train_model .btn_group button.m_btn.active, .mw_train_model .btn_group button.m_btn:hover {background:#2b58e6; border-color:#2b58e6; color:#fff;} .mw_train_model .btn_group button.m_btn + button.m_btn {border-left:none; margin-left:0;} .mw_train_model .validation_area {position:relative; z-index:5;} .mw_train_model .validation_area .title {display:inline-block; vertical-align:middle; font-size:16px; font-weight:700; margin-right:16px;} .mw_train_model .validation_area .set_validation {display:inline-block; vertical-align:middle; position:relative;} .mw_train_model .validation_area .set_validation_custom {display:none; padding:20px; margin-left:-40px; position:absolute; top:42px; border-radius:15px; background-color:#fff; box-shadow:0 10px 10px rgba(0,0,0,0.1); z-index:2; border:1px solid #dcdce1;} .mw_train_model .validation_area .set_validation_custom.active {display:inline-block; vertical-align:middle;} .mw_train_model .validation_area .set_validation_custom .m_radio {height:initial;} .mw_train_model .validation_area .set_validation_custom .m_radio > input[type=radio] + label {min-width:210px; padding-bottom:110px; font-size:15px;} .mw_train_model .validation_area .set_validation_custom .m_radio:nth-of-type(1) > input[type=radio] + label {background:url(../images/icon/img_dataset.png) no-repeat 25px 30px;} .mw_train_model .validation_area .set_validation_custom .m_radio:nth-of-type(2) > input[type=radio] + label {background:url(../images/icon/img_validation.png) no-repeat 25px 30px;} .mw_train_model .validation_area .set_validation_custom .select_data {display:none; padding:20px; margin:20px 0 0 -7px; text-align:center; background-color:#fafafa; border:1px solid #dcdce1; border-radius:15px; width:calc(100% + 14px);} .mw_train_model .validation_area .set_validation_custom .select_data.active {display:block;} .mw_train_model .validation_area .set_validation_custom .select_data label {display:inline-block; vertical-align:middle; padding:0 10px; font-weight:600; font-size:22px;} .mw_train_model .validation_area .set_validation_custom .select_data .form_control {display:inline-block; vertical-align:middle; width:100px;} .mw_train_model .train_model {background:#fff; border-radius:15px; border:1px solid #d9d9d9; padding:35px 40px 40px; margin-top:20px;} .mw_train_model .train_model .tm_title {font-size:22px; font-weight:700; line-height:25px; margin:0 0 10px; color:#000;} .mw_train_model .train_model .txt_desc {display:block; padding:0; margin:0 0 30px 0; color:#2e2e2e; font-size:16px;} .mw_train_model .train_model .random_forest_area {position:relative; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:stretch;} .random_forest_area .form_area .form_item + .form_item {margin-top:20px;} .random_forest_area .form_area .form_item .form_group {padding-top:4px;} .mw_train_model .train_model .set_algorithm {grid-column:1; grid-row:1; padding:30px 30px; border-radius:15px; background-color:#fff; border:1px solid #dcdcdc; position:relative; z-index:2;} .mw_train_model .train_model .set_algorithm:after {display:block; content:""; clear:both;} .mw_train_model .train_model .set_algorithm .form-switch {padding-top:0; padding-bottom:0; vertical-align:middle; margin:0;} .mw_train_model .train_model .set_algorithm .tooltip_info {display:inline-block; margin-left:5px; position:relative; vertical-align:middle;} .mw_train_model .train_model .set_algorithm .btn_help {display:inline-block; height:22px; line-height:20px; padding:0 10px; position:absolute; top:15px; right:20px; border:0; background-color:#fff; font-size:12px; font-weight:400; border:1px solid #c9ccd0; color:#2e2e2e; border-radius:8px; transition:0.2s; z-index:10;} .mw_train_model .train_model .set_algorithm .btn_help:hover {color:#2b58e6; background:#f0f5ff;} .mw_train_model .train_model .set_algorithm .form_area {float:left; width:100%; position:relative; overflow-y:auto;} .mw_train_model .train_model .set_algorithm ul.list_dot {display:none; float:right; width:50%; padding:0 20px 0 60px; position:relative; overflow-y:auto;} .mw_train_model .train_model .set_algorithm ul.list_dot > li {padding:10px;} .mw_train_model .train_model .set_algorithm ul.list_dot > li:before {top:22px;} .mw_train_model .train_model .set_algorithm ul.list_dot strong {font-size:18px;} .mw_train_model .train_model .set_algorithm ul.list_dot p {margin:0; font-size:14px;} .mw_train_model .train_model .algorithm_img {grid-column:2; grid-row:1; padding:20px; text-align:center; z-index:1;} .mw_train_model .train_model .algorithm_img img {display:inline-block; max-width:100%; max-height:255px;} .mw_train_model .train_model .set_algorithm.active {grid-column:1 / -1; z-index:3;} /* ✅ 2컬럼 전체를 덮어서 “100% 확장”처럼 보이게 */ .mw_train_model .train_model .set_algorithm.active .form_area {width:50%; float:left; position:relative;} .mw_train_model .train_model .set_algorithm.active .form_area:after {display:block; content:""; width:2px; position:absolute; top:-10px; bottom:0; right:0; background-color:#e1e3e7;} .mw_train_model .train_model .set_algorithm.active .list_dot {display:block; width:50%;} /* ✅ 오른쪽 이미지는 안 보이게만(공간/높이는 유지) */ .mw_train_model .train_model .set_algorithm.active + .algorithm_img {opacity:0; visibility:hidden; pointer-events:none;} .mw_evaluate_model {display:flex; justify-content:space-between;} .mw_evaluate_model .em_title {font-size:20px; font-weight:600; line-height:25px; margin:0 0 15px;} .mw_quick_model_wizard .mwem_btn {text-align:right; margin-bottom:15px;} .mw_evaluate_model .p_panel {border-radius:15px; border:1px solid #dcdcdc; padding:20px;} .mw_evaluate_model .setting_value {width:360px;} .mw_evaluate_model .setting_value .form_area .form_item {padding:3px 10px 8px;} .mw_evaluate_model .setting_value .form_area .form_item + .form_item {border-top:1px solid #d3d3d3; margin-top:0;} .mw_evaluate_model .setting_value .form_area label.form_label {font-size:14px; color:#2e2e2e; font-weight:400;} .mw_evaluate_model .setting_value .form_area span.text_info {text-align:right; font-size:14px; color:#2e2e2e; font-weight:400;} .mw_evaluate_model .result {width:calc(100% - 380px);} .mw_evaluate_model .result .mve_result_top {display:flex; justify-content:flex-start;} .mw_evaluate_model .result .mve_result_top .em_title {width:auto;} .mw_evaluate_model .result .view_type {} .mw_evaluate_model .view_type {display:inline-flex; flex-direction:row; align-items:center; margin:0 0 10px; margin-left:40px;} .mw_evaluate_model .view_type button {display:inline-flex; width:40px; height:30px; padding:0; margin:0; position:relative; background:#fff; font-size:14px; color:#000; align-items:center; justify-content:center; border:1px solid #c9ccd0; overflow:hidden; transition:0.2s;} .mw_evaluate_model .view_type button:first-child {border-radius:8px 0 0 8px;} .mw_evaluate_model .view_type button:last-child {border-radius:0 8px 8px 0;} .mw_evaluate_model .view_type button:hover, .mw_evaluate_model .view_type button.active {border-color:#2b58e6; background-color:#2b58e6; color:#fff;} .mw_evaluate_model .data_detail_wrap {display:none;} .mw_evaluate_model .data_detail_wrap.active {display:block ; height:100%;} /* ************************* VDI 영역 ************************* */ body .vdi_con {height:calc(100% - 76px); width:100%; display:flex; font-weight:400; letter-spacing:0; color:#2e2e2e;} .vdi_con .sidebar_dag::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.05);} .vdi_con .sidebar_dag::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.15);} /* 레이아웃 */ .vdi_con #vdiLeftArea {background:#fff; border:1px solid #dcdcdc; padding:15px; overflow-x:auto; overflow-y:hidden; border-radius:15px 15px 0 0; height:calc(100% + 20px); border-bottom:none;} .vdi_con #vdiRightArea {background:#fff; border:1px solid #dcdcdc; padding:20px; border-radius:15px; position:relative;} /* 분할 */ .vdi_con .gutter.gutter-horizontal {border:none; background-color:transparent; position:relative; left:-12px; background-image:url('data:image/png; base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==');} /* ************************** 좌측 영역 ************************** */ .vdi_con .dag_select_action_num {display:flex; justify-content:space-between; min-width:300px;} .vdi_con .dag_select_action_num strong {font-size:16px; font-weight:600; color:#000; display:block; line-height:30px;} .vdi_con .dag_select_action_num select {display:block; width:120px;} .vdi_con .sidebar_dag {width:100%; height:calc(100% - 45px); margin-top:20px; padding:0 5px 20px 0; overflow-y:auto; overflow-x:hidden; min-width:300px;} .vdi_con .sidebar_dag::-webkit-scrollbar {width:6px; height:6px;} /* jstree 커스텀 */ .vdi_con .sidebar_dag ul.jstree-container-ul {min-width:250px; width:100%;} .sidebar_vdi li .jstree-anchor > .jstree-icon.jstree-themeicon {margin-right:2px; background-image:none !important;} .sidebar_vdi.jstree_area .jstree-node, .sidebar_vdi.jstree_area .jstree-icon {background-image: url("/lib/jstree/themes/default/32px_paas.png");} .sidebar_vdi.jstree_area > .jstree-no-dots .jstree-open > .jstree-ocl {background-position:-36px -2px;} .sidebar_vdi.jstree_area > .jstree-no-dots .jstree-closed > .jstree-ocl {background-position:-4px -3px;} .sidebar_vdi.jstree_area .jstree-wholerow {height:30px;} .sidebar_vdi.jstree_area .jstree-clicked.jstree-anchor{color:#2e2e2e;} .sidebar_vdi .jstree_area.jstree-default .jstree-clicked.jstree-anchor {color:#2e2e2e;} .sidebar_vdi .jstree_area.jstree-default .jstree-clicked.jstree-anchor:link, .sidebar_vdi .jstree_area.jstree-default .jstree-clicked.jstree-anchor:visited, .sidebar_vdi .jstree_area.jstree-default .jstree-clicked.jstree-anchor:hover, .sidebar_vdi .jstree_area.jstree-default .jstree-clicked.jstree-anchor:active {color:#1559ef;} .sidebar_vdi .jstree_area.jstree-default li.jstree-node.jstree-closed > .jstree-anchor {color:#2e2e2e;} .sidebar_vdi.jstree_area .jstree-wholerow-hovered {background:#f4f7fc !important;} .sidebar_vdi.jstree_area .jstree-wholerow-clicked {background:#f4f7fc !important; color:#0046db !important; font-weight:600;} .sidebar_vdi.jstree_area .jstree-node {min-height:30px; line-height:30px;} .sidebar_vdi.jstree_area .jstree-anchor {line-height:30px; height:30px;} .sidebar_vdi.jstree_area .jstree-icon {height:30px; line-height:30px;} .sidebar_vdi.jstree_area .jstree-icon:empty {height:30px; line-height:30px;} .sidebar_vdi .jstree-clicked.jstree-anchor, .sidebar_vdi .jstree-clicked.jstree-anchor:link, .sidebar_vdi .jstree-clicked.jstree-anchor:visited, .sidebar_vdi .jstree-clicked.jstree-anchor:hover, .sidebar_vdi .jstree-clicked.jstree-anchor:active {color:#000;} .sidebar_vdi li .jstree-anchor > .jstree-icon.jstree-themeicon:after, /* 자식 노드가 없는 최상위 노드에도 아이콘을 표시하기 위해 추가 */ .sidebar_vdi li.jstree-open .jstree-anchor > .jstree-icon.jstree-themeicon:after, .sidebar_vdi li.jstree-closed .jstree-anchor > .jstree-icon.jstree-themeicon:after {content:""; width:20px; height:30px; background-size:18px auto !important;} /* 아이콘/상태값 아이콘 추가 */ .sidebar_vdi li.jstree-node > .jstree-anchor > .jstree-icon.jstree-themeicon:before { content:""; display:block; width:20px; height:20px; font-family:'Font Awesome 6 Free'; position:absolute; left:0; top:5px; font-size:16px; border-radius:4px; line-height:20px;} .sidebar_vdi li.jstree-node.jstree-open > .jstree-anchor {color:#1559ef !important; font-weight:500;} .sidebar_vdi li.jstree-node.jstree-closed > .jstree-anchor {color:#2e2e2e;} .sidebar_vdi li.jstree-node.vicon_node .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f233"; background:#fff; font-weight:900;} .sidebar_vdi li.jstree-node.vicon_gpu > .jstree-anchor > .jstree-icon.jstree-themeicon:before {content:"\f2db"; font-weight:900; color:#666;} .sidebar_vdi li.jstree-node.pdstatus.jstree-leaf .jstree-wholerow, .sidebar_vdi li.jstree-node.pdstatus.jstree-leaf .jstree-anchor {line-height:22px; height:22px;} .sidebar_vdi li.jstree-node.pdstatus.jstree-leaf > .jstree-anchor > .jstree-icon.jstree-themeicon:before {top:6px; left:8px;} /* ************************** 우측 영역 ************************** */ #vdiRightArea .tab-content {height:calc(100vh - 240px); overflow-y:hidden; overflow-x:hidden; padding:25px 10px 25px 25px; box-sizing:border-box;} .mig_area {display:flex; flex-direction:column; justify-content:space-between; height:calc(100% - 35px); gap:0; align-items:center; min-height:0;} .mig_area .pp_panel {height:100%; width:100%; padding:20px; background:#fafafa; box-sizing:border-box; display:flex; flex-direction:column; min-height:0;} .mig_area .mig_setting {position:relative; text-align:center; padding:10px 50px 20px; background:transparent; border:none; top:-1px; height:78px; flex:0 0 78px; box-sizing:border-box; transition:0.3s;} /* 바깥 테두리 레이어 */ .mig_area .mig_setting::before {content:""; position:absolute; inset:0; background:#1d4aaf; clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); z-index:0; transition:0.3s;} /* 내부 배경 레이어 */ .mig_area .mig_setting::after {content:""; position:absolute; inset:1px; background:#1d4aaf; clip-path:polygon(0 0,100% 0,100% 75%,50% 100%,0 75%); z-index:1; transition:0.3s;} /* 사용안함 */ .mig_area .mig_setting.disabled_mig .form-switch label {color:#2e2e2e;} .mig_area .mig_setting.disabled_mig::before {background:#dcdce1; /* 테두리 색 */} .mig_area .mig_setting.disabled_mig::after {background:#f2f3f6; /* 내부 배경 */} /* 실제 콘텐츠는 위로 */ .mig_area .mig_setting > * {position:relative; z-index:2;} .mig_area .mig_setting .form-switch {display:block; margin-bottom:7px; padding-left:0;} .mig_area .mig_setting .form-switch label {margin-right:10px; color:#fff;} .mig_area .mig_setting .form-switch .form-check-input {margin-top:2px;} .mig_setting .form-check-input:checked {background-color:#fff; border-color:#fff;} .mig_setting .form-switch .form-check-input:focus {--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23bfbfbf'/%3e%3c/svg%3e")} .mig_setting .form-switch .form-check-input:checked {--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%230d6efd'/%3e%3c/svg%3e")} .mig_area .mig_setting .m_btn {} /* ✅ 스크롤 영역: 고정 height(calc) 제거 + 남은 높이 자동 차지 */ .mig_lst_area {width:100%; overflow-y:auto; overflow-x:hidden; display:flex; justify-content:flex-start; flex-wrap:nowrap; position:relative; flex:1 1 auto; min-height:0; align-items:flex-start;} .mig_lst_area .no_data {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#999; text-align:center; margin:0; font-size:16px; font-weight:400;} ul.mig_lst {padding:10px 0 0; margin:0; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:20px 10px; align-items:flex-start; width:100%;} ul.mig_lst li {padding:0 15px 15px; border:1px solid #dcdcdc; border-radius:0 10px 10px 10px; background:#fff; width:calc((100% - (10px * 3)) / 4); list-style:none; box-sizing:border-box;} ul.mig_lst li .mig_top {text-align:right; position:relative;} ul.mig_lst li .mig_top strong {display:inline-block; margin:0; color:#fff; text-align:left; background-color:#1d4aaf; border:0; padding:0 15px; font-size:12px; font-weight:600; line-height:26px; height:27px; border-radius:0 0 12px 12px; top:-10px; position:absolute; left:-5px;} ul.mig_lst li .mig_top strong:after {content:""; display:inline-block; width:0; height:0; position:absolute; right:-10px; top:0; border-bottom:5px solid #bebebe; border-top:4px solid transparent; border-left:5px solid #bebebe; border-right:5px solid transparent;} ul.mig_lst li .mig_top .slot_area {display:inline-block; padding:5px 0 0; text-align:left; height:36px;} ul.mig_lst li .mig_top .slot_area .slot_group {line-height:14px;} ul.mig_lst li .mig_top .slot_area .slot_group span {display:inline-block; vertical-align:middle;} ul.mig_lst li .mig_top .slot_area .slot_group span.slot_title {font-size:12px; line-height:14px; color:#2e2e2e; font-weight:400; width:30px; text-align:left;} ul.mig_lst li .mig_top .slot_area .slot_group span.slot {width:8px; height:8px; border-radius:2px; margin:3px 0 0 0; background:#dcdcdc;} ul.mig_lst li .mig_top .slot_area .slot_group.slot_gpc span.slot.active {background:#1559ef;} ul.mig_lst li .mig_top .slot_area .slot_group.slot_mem span.slot.active {background:#18c495;} ul.mig_lst li .volume {font-size:16px; font-weight:600; margin:-10px 0 10px;} ul.mig_lst li .selected_server {font-size:16px; font-weight:600; margin:16px 0 0;} ul.mig_lst li .select2 {width:100% !important;} @media (min-width:1700px) { ul.mig_lst li {width:calc((100% - (10px * 4)) / 5);} } @media (min-width:2100px) { ul.mig_lst li {width:calc((100% - (10px * 5)) / 6);} } @media (min-width:2500px) { ul.mig_lst li {width:calc((100% - (10px * 6)) / 7);} } @media (min-width:3300px) { ul.mig_lst li {width:calc((100% - (10px * 7)) / 8);} } /* ************************** MIG 관리 팝업 ************************** */ .pop_mig_setting {display:flex; justify-content:space-between; gap:20px; align-items:stretch;} .pop_mig_setting .pp_panel {margin:0 !important;} .pop_mig_setting .pp_panel .pd_title .btn_icon {margin-top:-5px;} .pop_mig_setting .pp_panel .pd_subtitle {padding-left:10px; position:relative;} .pop_mig_setting .pp_panel .pd_subtitle:before {content:""; display:block; width:4px; height:4px; border-radius:2px; background:#999; position:absolute; left:0; top:50%; transform:translate(0,-50%);} .pop_mig_setting .pms_left {width:calc(70% - 10px);} .pop_mig_setting .pms_right {width:calc(30% - 10px);} ul.pop_mig_lst {padding:0; margin:0; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:10px; align-items:flex-start; width:100%;} ul.pop_mig_lst li {padding:10px 18px; border:1px solid #dcdcdc; border-radius:10px; background:#fff; width:calc((100% - (10px * 2)) / 3); list-style:none; box-sizing:border-box; position:relative;} ul.pop_mig_lst li .mig_top {display:flex; justify-content:space-between; } ul.pop_mig_lst li .mig_top strong {font-weight:600; font-size:16px; color:#2e2e2e;} ul.pop_mig_lst li .mig_top .used_max {color:#999;} ul.pop_mig_lst li .mig_top .used_max small {font-size:12px; font-weight:400; display:inline-block; vertical-align:bottom;} ul.pop_mig_lst li .mig_top .used_max span.txt_usedmax {font-size:14px; font-weight:500; display:inline-block; vertical-align:bottom;} ul.pop_mig_lst li .mig_top .used_max span.txt_usedmax.active {color:#1559ef; font-weight:700;} ul.pop_mig_lst li .mig_top .mig_title {display:flex; flex-direction:column; gap:2px;} ul.pop_mig_lst li .mig_top .mig_need {font-style:normal; font-size:12px; color:#666; font-weight:400;} ul.pop_mig_lst li .slot_area {display:block; padding:0; text-align:left; margin-top:10px;} ul.pop_mig_lst li .slot_area .slot_group {line-height:14px;} ul.pop_mig_lst li .slot_area .slot_group span {display:inline-block; vertical-align:middle;} ul.pop_mig_lst li .slot_area .slot_group span.slot_title {font-size:12px; line-height:14px; color:#2e2e2e; font-weight:400; width:30px; text-align:left;} ul.pop_mig_lst li .slot_area .slot_group span.slot {width:10px; height:10px; border-radius:2px; margin:0 0 0 0; background:#dcdcdc;} ul.pop_mig_lst li .slot_area .slot_group.slot_gpc span.slot.active {background:#1559ef;} ul.pop_mig_lst li .slot_area .slot_group.slot_mem span.slot.active {background:#18c495;} ul.pop_mig_lst li .overlay_info {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.1); transition:0.3s; opacity:0; border-radius:10px; display:flex; align-items:center; justify-content:center;} ul.pop_mig_lst li:hover .overlay_info {opacity:1;} ul.pop_mig_lst li .overlay_info button {box-shadow:0 5px 15px rgba(0,0,0,0.3) !important;} ul.pop_mig_lst li .overlay_info .btn_slot_full {cursor:not-allowed; display:none; color:#2e2e2e !important;} ul.pop_mig_lst li .overlay_info .btn_slot_select {cursor:pointer; display:inline-block;} /* 슬롯이 꽉 찼을 경우 */ ul.pop_mig_lst.full_slot li .overlay_info {opacity:1;} ul.pop_mig_lst.full_slot li .overlay_info button {display:none !important;} /* 슬롯 부족 */ ul.pop_mig_lst li.slot_full .overlay_info .btn_slot_full {display:inline-block;} ul.pop_mig_lst li.slot_full .overlay_info .btn_slot_select {display:none;} p.full_slot_message {display:none; margin:10px 0 0; font-size:14px; color:#2e2e2e;} p.full_slot_message i {margin-right:5px; color:#8a9aa8;} ul.pop_mig_lst.full_slot + p.full_slot_message {display:block;} /* MIG 선택 메세지 */ p.selected_none {text-align:center; font-size:14px; min-height:50px; line-height:50px;} /* 선택한 MIG 리스트 */ ul.selected_mig {padding:0; margin:0; display:flex; justify-content:flex-start; flex-wrap:wrap; gap:10px; align-items:flex-start; width:100%;} ul.selected_mig li {padding:8px 11px 8px 18px; border:1px solid #dcdcdc; border-radius:10px; background:#fff; width:calc((100% - (10px * 2)) / 3); list-style:none; box-sizing:border-box; position:relative; display:flex; justify-content:flex-end; align-items:center;} ul.selected_mig li strong {font-weight:600; font-size:16px; color:#2e2e2e; margin-right:auto; display:inline-block; vertical-align:middle;} ul.selected_mig li span {font-size:12px; line-height:14px; color:#2e2e2e; font-weight:400; display:inline-block; vertical-align:middle;} ul.selected_mig li .btn_clear {width:17px; height:17px; background:url(../images/icon/btn_pop_close.png) no-repeat center center; opacity:1; padding:0; display:inline-block; vertical-align:middle; transition:0.2s; transform-origin: center center; margin-left:10px; border:none; outline:none; background-size:11px auto;} ul.selected_mig li .btn_clear:hover {transform:rotate(90deg);} /* GPU 정보 */ .pms_right > div, .pms_right > p {padding-left:10px;} .pms_right > p.active {color:#1559ef; font-weight:700;} .pms_right .gpu_type {padding:0 10px; border:1px solid #dcdcdc; border-radius:8px; background:#fff; line-height:30px; height:30px; font-size:14px; colro:#2e2e2e; display:inline-block;} .last_select_group {display:flex; justify-content: space-between;} .last_select_group .slot_group {line-height:14px; display:inline-block;} .last_select_group .slot_group span {display:inline-block; vertical-align:middle;} .last_select_group .slot_group span.slot_title {font-size:12px; line-height:14px; color:#2e2e2e; font-weight:400; width:30px; text-align:left;} .last_select_group .slot_group span.slot {width:24px; height:24px; border-radius:5px; margin:0 0 0 3px; background:#dcdcdc;} .last_select_group .slot_group.slot_gpc span.slot.active {background:#1559ef;} .last_select_group .slot_group.slot_mem span.slot.active {background:#18c495;} .last_select_group .selected_num {font-size:14px; color:#2e2e2e; text-align:right; line-height:24px;} /* ================================================================================================= SMART AI 제거 대응 override CSS - 대상 JSP에서 실제로 사용하는 selector를 smart_ai_style.css 기준으로 발췌 - smart_big_style.css 제일 마지막에 추가하여 기존 smart_ai_style.css 후순위 로드 효과 대체 - 다른 페이지에 영향을 주지 않기 위해 공통 클래스 .ai_base 클래스 추가함 ================================================================================================= */ /* ----------------------------------------------------------------------------------------------- 기본/공통 override ------------------------------------------------------------------------------------------------ */ .ai_base .top_state .mg_title {margin-bottom:15px;align-items:flex-end;} .ai_base .top_state .mg_title h5 {padding:0 10px 0 0;font-size:20px;} .ai_base .top_state .mg_title span {padding-left:10px;color:#7b7e85;font-weight:300;} .ai_base .top_state.state_project .icon_btn.icon_setting {position:absolute;left:20px;bottom:20px;} .ai_base .top_state.state_project .icon_btn.icon_setting:after {color:#fff;} .ai_base .top_state.state_project .project_view > .btn_card.active {background-image:url(../images/icon/icon_project_card_active.png);} .ai_base .top_state.state_project .project_view > .btn_list.active {background-image:url(../images/icon/icon_project_list_active.png);} .ai_base #tooltip_status_html {max-width:400px;} .ai_base #tooltip_status_html .mg_list > li {align-items:flex-start;border-bottom:transparent;} .ai_base #tooltip_status_html .mg_list > li > div {padding:2px;overflow:initial;text-overflow:initial;white-space:normal;} .ai_base #tooltip_status_html .mg_list > li > .que {width:120px;} .ai_base #tooltip_status_html .mg_list > li > .que i {display:inline-block;vertical-align:middle;width:6px;height:6px;margin-right:5px;border-radius:3px;} .ai_base #tooltip_status_html .mg_list > li > .ans {flex:1;} .ai_base .status_list > li > .item label {display:block;line-height:40px;position:relative;font-size:15px;font-weight:300;text-align:center;} .ai_base .status_list > li > .item label:before {display:inline-block;width:20px;height:20px;line-height:20px;margin-right:10px;color:#fff;font-family:"IcoFont";font-size:16px;text-align:center;border-radius:25px;} .ai_base .status_list > li.all > .item label:before {content:"ALL";background-color:#003880;font-size:12px;} .ai_base .status_list > li.progressing > .item label:before {content:"";background-color:#ffbd4d;font-size:14px;} .ai_base .status_list > li.successed > .item label:before {content:"";background-color:#6bd03f;} .ai_base .status_list > li.completed > .item label:before {content:"";background-color:#6bd03f;} .ai_base .status_list > li.failed > .item label:before {content:"";background-color:#fb6543;} .ai_base .status_list > li.scheduled > .item label:before {content:"";color:#616ef4;font-size:20px;} .ai_base .status_list > li > .item strong {display:block;line-height:80px;font-size:40px;font-weight:500;text-align:center;} .ai_base .top_state .recently_list > li > .item {display:block;padding:20px;position:relative;border:1px solid #a8a8a8;border-radius:5px;} .ai_base .top_state .recently_list > li > .item:hover {box-shadow:0 0 10px rgba(0,0,0,0.3);} .ai_base .top_state .recently_list > li > .item .fileName {display:block;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ai_base .top_state .recently_list > li > .item .term {display:block;margin-top:5px;} .ai_base .top_state .recently_list > li > .item .date {display:block;margin-top:20px;} .ai_base .top_state.state_monitoring .status_list > li > .item .icon_state {padding-right:20px;} .ai_base .top_state.state_monitoring .status_list > li > .item .icon_state:after {display:block;content:"";position:absolute;top:0;right:0;font-family:"IcoFont";} .ai_base .top_state .schedule_calendar .status_progress > li > .progress {flex:1;margin-bottom:0;position:relative;background-color:transparent;box-shadow:none;overflow:initial;} .ai_base .top_state .schedule_calendar .status_progress > li > .progress .progress-bar {border-radius:0 10px 10px 0;overflow:initial;} .ai_base .top_state .schedule_calendar .status_progress > li > .progress .progress-bar span {display:inline-block;padding:0 5px;color:#000;position:absolute;right:-30px;} .ai_base #monitoring_calendar .fc-toolbar.fc-header-toolbar {margin-bottom:10px;} .ai_base #monitoring_calendar .fc-toolbar h2 {line-height:20px;font-size:17px;} .ai_base #monitoring_calendar .fc-toolbar .fc-right {float:inherit;} .ai_base #monitoring_calendar .fc-toolbar .fc-button-group {margin-left:15px;} .ai_base #monitoring_calendar .fc-toolbar .fc-button-group button {height:20px;padding:0;background-color:transparent;border-color:transparent;box-shadow:none;} .ai_base #monitoring_calendar .fc-toolbar .fc-button-group button .fc-icon {height:20px;line-height:20px;margin:0;vertical-align:inherit;top:0;} .ai_base #monitoring_calendar.fc td, .ai_base #monitoring_calendar.fc th {text-align:center;border-width:0;} .ai_base #monitoring_calendar.fc th {padding:5px 0 8px;font-weight:normal;font-size:0.85em;} .ai_base #monitoring_calendar .fc-scroller {height:inherit !important;} .ai_base .top_state .calendar_right .month_state > li .state.failed {color:red;} .ai_base .schedule_info {padding:0;margin:0;} .ai_base .schedule_info > li {display:inline-block;padding-right:10px;font-size:10px;} .ai_base .schedule_info > li > i {display:inline-block;width:8px;height:8px;border-radius:4px;} .ai_base .top_state .calendar_right .schedule_info {position:absolute;top:55px;right:30px;} .ai_base .top_state .schedule_list.active {display:block;} .ai_base .top_state .schedule_list .slide_day .owl-carousel {height:65px;padding:0 15px;} .ai_base .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item {padding:0 5px;} .ai_base .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item div {display:block;padding-bottom:20px;text-align:center;} .ai_base .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item a {display:block;min-width:54px;height:45px;border-radius:5px;text-align:center;border:1px solid #e1e3e7;background-color:#fff;} .ai_base .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item a:hover {background-color:#f3f8ff;} .ai_base .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item a.active {border-color:#26a1ff;box-shadow:2px 10px 20px rgba(0,0,0,0.1);} .ai_base .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item .month {display:block;line-height:20px;} .ai_base .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item .count {display:block;padding:2px;margin-top:4px;line-height:1;font-size:12px;color:#fff;border-radius:8px;background-color:#26a1ff;} .ai_base .top_state .schedule_list .slide_day .owl-carousel.owl-drag .owl-item .day {display:block;line-height:45px;} .ai_base .top_state .schedule_list .mg_list {max-height:160px;border-color:transparent;overflow:auto;} .ai_base .top_state .schedule_list .mg_list > li {min-height:50px;border-bottom:none;} .ai_base .top_state .schedule_list .mg_list > li > .repeat {font-size:12px;color:#003880;} .ai_base .top_state .schedule_list .mg_list > li > .time {font-size:12px;color:#7b7e85;text-align:right;} .ai_base .nav-md .mg_tab.tab_project > .tab_bar {padding:0 50px;} .ai_base .nav-md .mg_tab.tab_project > .tab_content.project_content {padding:20px 50px;} .ai_base .nav-md .project_content .group_search {right:50px;} .ai_base .btn_clear {border:none; outline:none; background:none;} .ai_base .icon_btn {display:inline-flex;align-items:center;justify-content:center;vertical-align:top;width:30px;height:30px;padding:0;margin:0;position:relative;border:0;outline:0; background-color:transparent;background-position:center center;background-repeat:no-repeat;} .ai_base .icon_btn:hover {background-color:transparent;background-position:center center;background-repeat:no-repeat;} .ai_base .icon_btn:after {display:block;line-height:1;font-family:"IcoFont";font-size:16px;text-indent:0;} .ai_base .icon_btn.icon_deploylist:after {content:""; top:3px; left:-2px; position:relative;} .ai_base .icon_btn.icon_deploylist:before {content:""; display:block;line-height:1;font-family:"IcoFont";font-size:11px;text-indent:0; position:absolute; right:3px; top:4px;} .ai_base .icon_btn.icon_deploy:after {content:""; top:3px; left:-2px; position:relative;} .ai_base .icon_btn.icon_deploy:before {content:""; display:block;line-height:1;font-family:"IcoFont";font-size:11px;text-indent:0; position:absolute; right:3px; top:4px;} .ai_base .icon_btn.icon_delete:after {content:"";} .ai_base .icon_btn.icon_reload:after {content:"";transform:scaleX(-1);font-size:12px;} .ai_base .icon_btn.icon_redo:after {content:"";transform:scaleX(-1);} .ai_base .icon_btn.icon_batch2 {background-image:url(../images/icon/icon_batch2.png);animation:move_batch infinite 3s linear;} .ai_base .noData {display:table;margin-right:auto;margin-left:auto;flex-direction:column;justify-content:center;align-items:center;height:100%;font-size:12px;} .ai_base .noData:before {display:block;content:"";width:100px;height:60px;background:url(../images/icon/icon_noData.png) no-repeat center center;} .ai_base .tooltip_icon, .ai_base .tooltip_html_icon {display:inline-flex;justify-content:center;align-items:center;width:20px;height:20px;padding:0;margin-left:5px;line-height:1;position:relative;text-indent:-9999px;border:0;background-color:inherit;} .ai_base .tooltip_icon:after, .ai_base .tooltip_html_icon:after {display:block;content:"";line-height:1;font-family:"icofont";font-size:16px;text-indent:0;} .ai_base .tooltip_icon:hover:after, .ai_base .tooltip_html_icon:hover:after {color:#26a1ff;} .ai_base .tooltip_html {display:none;} .ai_base .tooltip_html .mg_list > li {background-color:transparent;} .ai_base .tooltip_html_icon + .tooltip .tooltip-inner .tooltip_html {display:block;text-align:left;} .ai_base .bg_successed {background-color:#6bd03f;} .ai_base .state.state_failed:after {content:"";color:#fff;background-color:#fb6543;} .ai_base .toggle_all {display:inline-flex;flex-direction:row;align-items:center;padding:0;} .ai_base .toggle_all > button {height:25px;padding-left:30px;margin:2px 10px 2px 0;position:relative;text-indent:0;border:0;} .ai_base .toggle_all > .btn_allOpen {background:url(../images/icon/icon_expand.png) no-repeat left center;} .ai_base .toggle_all > .btn_allOpen:hover, .ai_base .toggle_all > .btn_allOpen.active {color:#26a1ff;background-image:url(../images/icon/icon_expand_active.png);} .ai_base .toggle_all > .btn_allClose {background:url(../images/icon/icon_collapse.png) no-repeat left center;} .ai_base .toggle_all > .btn_allClose:hover, .ai_base .toggle_all > .btn_allClose.active {color:#26a1ff;background-image:url(../images/icon/icon_collapse_active.png);} .ai_base .icon_btn.icon_reload + span + .m_switch {margin-left:10px;} .ai_base .icon_btn.icon_reload + span + .m_switch + button {margin-left:15px;} .ai_base .gutter {background-color: #eee; background-repeat: no-repeat; background-position: 50%;} .ai_base .gutter.gutter-horizontal {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg=="); cursor: col-resize;} .ai_base .gutter.gutter-vertical {background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAFAQMAAABo7865AAAABlBMVEVHcEzMzMzyAv2sAAAAAXRSTlMAQObYZgAAABBJREFUeF5jOAMEEAIEEFwAn3kMwcB6I2AAAAAASUVORK5CYII="); cursor: row-resize;} .ai_base .workflow {min-width:1400px;width:100%;height:100%;overflow:hidden;background-color:#f1f4f8;} .ai_base .workflow .split_h {display:flex;flex-direction:row;height:100%;box-sizing:border-box;} .ai_base .workflow .split_v {display:flex;flex-direction:column;height:100%;} .ai_base .workflow .gutter {position:relative;background-color:#fff;background-repeat:no-repeat;background-position:center center;z-index:1;} .ai_base .workflow .gutter.gutter-horizontal {background-image:url(../images/common/splite_horizontal.png);cursor: col-resize;} .ai_base .workflow .gutter.gutter-vertical {background-image:url(../images/common/splite_vertical.png);cursor: row-resize;} .ai_base .workflow .gutter span {display:block;width:0;height:0;position:absolute;top:0;cursor:pointer;background-color:rgba(160,160,160,0.5);transition:all ease 0.2s;} .ai_base .workflow .gutter span:after {display:block;content:"";width:0;height:0;line-height:0;position:absolute;font-family:"icofont";font-size:15px;text-align:center;background-color:rgba(160,160,160,0.5);} .ai_base .workflow .gutter.gutter-horizontal span {height:100%;top:0;left:0;} .ai_base .workflow .gutter.gutter-horizontal span:after {top:50%;} .ai_base .workflow .gutter.gutter-horizontal:hover span {width:10px;} .ai_base .workflow .gutter.gutter-horizontal:hover span:after {width:20px;height:20px;line-height:20px;} .ai_base .workflow .gutter.gutter-horizontal:hover span.gutter_left {left:-10px;} .ai_base .workflow .gutter.gutter-horizontal:hover span.gutter_left:after {content:"";left:-10px;} .ai_base .workflow .gutter.gutter-horizontal:hover span.gutter_right {left:5px;} .ai_base .workflow .gutter.gutter-horizontal:hover span.gutter_right:after {content:"";left:0} .ai_base .workflow .gutter.gutter-vertical span {width:100%;height:0;} .ai_base .workflow .gutter.gutter-vertical span:after {left:50%;margin-left:-10px;} .ai_base .workflow .gutter.gutter-vertical:hover span {height:10px;} .ai_base .workflow .gutter.gutter-vertical:hover span:after {width:20px;height:20px;line-height:20px;} .ai_base .workflow .gutter.gutter-vertical:hover span.gutter_left {top:-10px;} .ai_base .workflow .gutter.gutter-vertical:hover span.gutter_left:after {content:"";top:-10px;left:50%;} .ai_base .workflow .gutter.gutter-vertical:hover span.gutter_right {top:5px;} .ai_base .workflow .gutter.gutter-vertical:hover span.gutter_right:after {content:"";top:0;left:50%;} .ai_base .w_split1 {display:block;height:100%;top:20px;position:relative;border-top:1px solid #e5e8ec;background:#fff;} .ai_base .w_split1.reduce .workflow_left {display:none;} .ai_base .w_split1 + .gutter {top:20px;border:1px solid #e5e8ec;border-left:0;border-radius:0 20px 0 0;} .ai_base .w_split3 + .gutter {border-top:1px solid #e5e8ec;} .ai_base .w_split5 {display:block;height:100%;position:relative;} .ai_base .w_split5 .toggle_left_reduce {display:block;width:15px;height:60px;padding:0;position:absolute;top:60%;left:0;bottom:0;border:1px solid #e5e8ec;border-left:0;border-radius:0 10px 10px 0;background-color:#fff;z-index:2;} .ai_base .w_split5 .toggle_left_reduce:hover {background-color:#f3f8ff;} .ai_base .w_split5 .toggle_left_reduce:focus {outline:none;} .ai_base .w_split5 .toggle_left_reduce:after {display:block;content:"";line-height:60px;text-align:center;color:#bec2c5;font-family:"icofont";} .ai_base .w_split5 .toggle_left_reduce.active:after {content:"";} .ai_base .w_split5 .toggle_right_reduce {display:block;width:15px;height:60px;padding:0;position:absolute;top:50%;right:0;bottom:0;border:1px solid #e5e8ec;border-right:0;border-radius:10px 0 0 10px;background-color:#fff;z-index:2;} .ai_base .w_split5 .toggle_right_reduce:hover {background-color:#f3f8ff;} .ai_base .w_split5 .toggle_right_reduce:focus {outline:none;} .ai_base .w_split5 .toggle_right_reduce:after {display:block;content:"";line-height:60px;text-align:center;color:#bec2c5;font-family:"icofont";} .ai_base .w_split5 .toggle_right_reduce.active:after {content:"";} .ai_base .w_split5 + .gutter {top:60px;height:calc(100% - 60px);border:1px solid #e5e8ec;border-right:0;} .ai_base .w_split6 {display:block;height:calc(100% - 20px);top:20px;position:relative;background-color:#fff;} .ai_base .w_split6 #toggle_right_expand {display:block;width:40px;height:40px;padding:0;position:absolute;top:0;right:0;border:0;z-index:1;display:none;} .ai_base .w_split6.reduce #toggle_right_expand {display:none;} .ai_base .w_split4 {display:block;height:100%;position:relative;} .ai_base .w_split4 #toggle_bottom_expand {display:block;width:35px;height:30px;padding:0;position:absolute;top:0;right:10px;border:0;z-index:1;} .ai_base .w_split4.expand #toggle_bottom_expand {background-image:url(../images/icon/icon_black_reduce.png);} .ai_base .workflow_left {display:block;height:calc(100% - 20px);margin:10px 5px 10px 15px;position:relative;overflow-x:auto;} .ai_base .workflow_left .project_wrap {padding:0;position:relative;} .ai_base .workflow_left .project_wrap .project_ctrl {display:flex;justify-content:flex-end;align-items:center;padding:5px 0;margin:0;} .ai_base .workflow_left .project_wrap .project_ctrl > li {display:flex;padding:0;margin:0;list-style:none;position:relative;} .ai_base .workflow_left .project_wrap .project_ctrl > li:last-child:after {display:block;content:"";width:1px;position:absolute;top:5px;left:0;bottom:0;} .ai_base .workflow_left .project_wrap .project_ctrl > li button {display:block;width:30px;height:30px;position:relative;} .ai_base .workflow_left .project_wrap #project_json {width:inherit;height:20px;line-height:1;padding:0 10px;margin:0 10px;color:#fff;font-size:12px;text-indent:0;border-radius:10px;border:1px solid #1aadd2;background-color:#1aadd2;} .ai_base .workflow_left .project_wrap #project_json:hover {border-color:#26a1ff;background-color:#26a1ff;} .ai_base .workflow_left .project_wrap #project_json:after {display:none;} .ai_base .workflow_left .project_wrap .close_workflow {border:0;background:transparent;} .ai_base .workflow_left .project_wrap .close_workflow:after {display:block;content:"";line-height:30px;position:absolute;top:0;right:0;bottom:0;left:0;font-family:"icofont";font-size:16px;text-align:center;} .ai_base .workflow_left .project_wrap .close_workflow:hover:after {color:#26a1ff;} .ai_base .workflow_left .project_wrap .project_name {display:block;height:20px;margin:5px 0;font-weight:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ai_base .workflow_left .project_wrap .bootstrap-select.m_select {width:100% !important;padding:0;margin:0;box-shadow:none;} .ai_base .workflow_left .project_wrap .bootstrap-select.m_select .dropdown-toggle {padding:0 30px 0 10px;border:0;box-shadow:none;background-color:transparent;} .ai_base .workflow_left .project_wrap .bootstrap-select.m_select .dropdown-toggle .filter-option-inner-inner {color:#000;font-size:20px;} .ai_base .workflow_left .project_wrap .bootstrap-select.m_select .dropdown-menu li a span.text {font-size:15px;} .ai_base .workflow_left .project_wrap .bootstrap-select.m_select .dropdown-toggle .bs-caret {right:0;} .ai_base .workflow_left .project_wrap .bootstrap-select.m_select .dropdown-toggle .bs-caret:after {color:#000;font-size:20px;} .ai_base .workflow_left .project_wrap .bootstrap-select.m_select .workflow_add {width:100%;padding:5px 10px;color:#4596ff;font-size:12px;text-align:right;border:0;background-color:inherit;} .ai_base .workflow_left .node_add {display:block;width:100%;height:40px;padding:0;margin:10px auto 0;color:#fff;font-size:16px;text-align:center;border-radius:5px;border:0;background-color:#1aadd2;outline:0;} .ai_base .workflow_left .toolbar {display:flex;align-items:center;height:30px;font-size:16px;margin-top:10px;position:relative;} .ai_base .workflow_left .toolbar .tooltip_icon {margin-left:10px;font-weight:inherit;} .ai_base .workflow_left .toolbar .tooltip_icon + .tooltip {max-width:180px;} .ai_base .workflow_left .toolbar .icon_setting {position:absolute;top:0;right:0;font-weight:inherit;} .ai_base .component_search_wrap {padding:0;margin:0;position:relative;} .ai_base .component_search_wrap .mg_search {width:100%;margin:0;} .ai_base .component_search_wrap .search_body {height:0;position:absolute;top:35px;right:30px;left:0;border-radius:5px;background-color:#fff;overflow:hidden;transition:all ease 0.2s;z-index:2; padding:0;} .ai_base .component_search_wrap .search_body dl:first-child {border-radius:5px 5px 0 0;overflow:hidden;} .ai_base .component_search_wrap .search_body dl {margin:0;} .ai_base .component_search_wrap .search_body dl > dt {padding:5px 10px;background-color:#f9f9f9;font-weight:500;} .ai_base .component_search_wrap .search_body dl > dd {background-color:#fff;} .ai_base .component_search_wrap .search_body ol {padding:0;margin:0;} .ai_base .component_search_wrap .search_body ol > li {padding:4px 10px;margin:0;list-style:none;} .ai_base .component_search_wrap .search_body ol > li > a {display:block;padding:5px;position:relative;} .ai_base .component_search_wrap .search_body ol > li > a:hover {background-color:#f3f8ff;} .ai_base .component_search_wrap .search_body .btn_reduce_search {width:100%;height:10px;padding:0;position:absolute;right:0;bottom:0;left:0;text-indent:-9999px;border:0;border-radius:0 0 5px 5px;background-color:#a8a8a8;} .ai_base .component_search_wrap .search_body .btn_reduce_search:after {display:block;content:"";line-height:10px;position:absolute;top:0;right:0;bottom:0;left:0;color:#fff;font-family:"icofont";font-size:18px;text-align:center;text-indent:0;} .ai_base .component_search_wrap.active .search_body {height:auto;padding-bottom:10px;border:1px solid #e5e8ec;box-shadow:2px 4px 10px rgba(0,0,0,0.1);overflow:inherit;} .ai_base .component_search_result {} .ai_base .component_search_result .mg_tab {height:100%;} .ai_base .component_search_result .mg_tab > .tab_bar {margin:0 -4px 10px;border:0;} .ai_base .component_search_result .mg_tab > .tab_bar > li {flex:1;padding:4px;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a {height:50px;padding:29px 5px 0;position:relative;font-size:12px;font-weight:500;letter-spacing:0;border-radius:5px;border:1px solid #fff;background-color:#fff;transition:all ease 0.2s;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a:before {display:block;width:100%;line-height:34px;position:absolute;bottom:17px;right:0;left:0;font-size:20px;text-align:center;background:transparent;font-family: "FontAwesome";} .ai_base .component_search_result .mg_tab > .tab_bar > li > a:after {display:block;width:100%;line-height:34px;position:absolute;top:0;right:0;left:0;font-family:"icofont";font-size:20px;text-align:center;background:transparent;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_reader {border-color:#ffaa1b;color:#ffaa1b;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_reader:after {content:"";color:#ffaa1b;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_runner {border-color:#00baff;color:#00baff;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_runner:after {content:"";color:#00baff;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_controller {border-color:#496aea;color:#496aea;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_controller:after {content:"";color:#496aea;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_operator {border-color:#bb3bcd;color:#bb3bcd;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_operator:after {content:"";color:#bb3bcd;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_writer {border-color:#21bec8;color:#21bec8;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_writer:after {content:"";color:#21bec8;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_serving {border-color:#00b050;color:#00b050;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_serving:after {content:"";color:#00b050;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a:hover, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.active {color:#fff;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a:hover:after, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.active:after {color:#fff;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a:hover:before {color:#fff;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_reader:hover, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_reader.active {border-color:#ffaa1b;background-color:#ffaa1b;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_runner:hover, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_runner.active {border-color:#00baff;background-color:#00baff;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_controller:hover, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_controller.active {border-color:#496aea;background-color:#496aea;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_operator:hover, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_operator.active {border-color:#bb3bcd;background-color:#bb3bcd;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_writer:hover, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_writer.active {border-color:#21bec8;background-color:#21bec8;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_serving:hover, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.icon_serving.active {border-color:#00b050;background-color:#00b050;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.disabled, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.disabled:hover, .ai_base .component_search_result .mg_tab > .tab_bar > li > a.disabled.active {color:#bec2c5;border-color:#bec2c5;background-color:#fff;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.disabled:before {color:#bec2c5;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.disabled:hover:before {color:#bec2c5;} .ai_base .component_search_result .mg_tab > .tab_bar > li > a.disabled.active:before {color:#bec2c5;} .ai_base .component_search_result .mg_tab > .tab_content {padding:0;} .ai_base .component_search_result_list {padding:5px 0;margin:0;} .ai_base .component_search_result_list > li {padding:0;margin:0;list-style:none;border-bottom: 1px solid #f1f1f1;} .ai_base .component_search_result_list > li > a {display:block;padding:5px 10px 5px 5px;margin-left:5px;font-size:13px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;} .ai_base .component_search_result_list > li > a:hover {color:#26a1ff;font-weight:bold;} .ai_base dl.component_search_result_group {margin:0;} .ai_base dl.component_search_result_group > dt {padding:5px 50px 5px 25px;position:relative;font-size:14px;font-weight:700;border-bottom:1px solid #bec2c5;cursor:pointer;transition:all 0.2s ease;} .ai_base dl.component_search_result_group > dt:before {display:block;content:"";width:6px;height:6px;margin-top:-4px;position:absolute;top:50%;left:6px;border-right:1px solid #000;border-bottom:1px solid #000;transform:rotate(-45deg);} .ai_base dl.component_search_result_group > dt .component_count {height:16px;line-height:17px;padding:0 10px;position:absolute;top:8px;right:5px;color:#fff;font-size:11px;text-align:center;border-radius:10px;background-color:#26a1ff;} .ai_base dl.component_search_result_group > dd {height:0;overflow:hidden;transition:all 0.2s ease;} .ai_base dl.component_search_result_group.active > dt {} .ai_base dl.component_search_result_group.active > dt:before {margin-top:-5px;transform:rotate(45deg);} .ai_base dl.component_search_result_group.active > dd {height:auto;overflow:inherit;} .ai_base .workflow_left .component_search_result {position:absolute;top:112px;right:0;bottom:0;left:0;} .ai_base .workflow_left .component_search_result .mg_tab > .tab_content {position:absolute;top:70px;right:0;bottom:10px;left:0;overflow-y:auto;} .ai_base .workflow_right {display:block;min-width:300px;height:100%;padding:0;position:relative;} .ai_base .workflow_right .mg_tab {height:100%;} .ai_base .workflow_right .mg_tab > .tab_bar {margin-left:-10px;} .ai_base .workflow_right .mg_tab > .tab_bar:after {display:block;content:"";height:1px;position:absolute;top:40px;right:0;left:0;background-color:#e5e8ec} .ai_base .workflow_right .mg_tab > .tab_bar > li {flex:1;padding:0;} .ai_base .workflow_right .mg_tab > .tab_bar > li > a {line-height:40px;padding:0 20px;color:#aaadb0;font-size:14px;background-color:#e5e8ec;} .ai_base .workflow_right .mg_tab > .tab_bar > li:first-child > a {border-radius:15px 0 0 0;} .ai_base .workflow_right .mg_tab > .tab_bar > li > a.active {color:#fff;background-color:#1aadd2;} .ai_base .workflow_right .mg_tab > .tab_bar > li > a:after, .ai_base .workflow_right .mg_tab > .tab_bar > li > a.active:after {display:none;} .ai_base .workflow_right .mg_tab > .tab_content {padding:0 15px 0 5px;height:calc(100% - 40px);background-color:#fff; overflow-y:hidden; overflow-x:auto;} .ai_base .workflow_right .mg_tab > .tab_content .property_item {min-width:400px;} .ai_base .node_detail {height:100%;} .ai_base .node_detail .handle {display:block;width:10px;position:absolute;top:0;bottom:0;left:0;z-index:1;cursor:pointer;} .ai_base .node_detail .handle::before {display:block;content:"";width:10px;height:4px;position:absolute;top:12px;border-top:1px solid #c5c8d0;border-bottom:1px solid #c5c8d0;} .ai_base .node_detail .handle::after {display:block;content:"";width:10px;height:1px;position:absolute;top:18px;background-color:#c5c8d0;} .ai_base .node_detail .toolbar {display:flex;flex-direction:row;padding:5px 20px;} .ai_base .node_detail .toolbar > div {display:inline-flex;align-items:center;} .ai_base .node_detail .toolbar > div:nth-child(2) {flex:1;justify-content:flex-end;padding:0 20px;} .ai_base .node_detail .toolbar .btn_compare {line-height:25px;padding:0 15px;color:#fff;border:0;border-radius:3px;background-color:#1aadd2;} .ai_base .node_detail .toolbar .mg_search {display:inline-flex;justify-content:flex-end;margin:0;} .ai_base .node_detail .mg_list {height:100%;position:relative;} .ai_base .node_detail .mg_list > li.list_head {display:flex;flex-direction:row;} .ai_base .node_detail .mg_list > li.list_head > div {display:inline-flex;flex:inherit;padding:5px 0;align-items:center;} .ai_base .node_detail .mg_list > li.list_head > div:nth-child(1) {width:50px;} .ai_base .node_detail .mg_list > li.list_head > div:nth-child(2), .ai_base .node_detail .mg_list > li.list_head > div:nth-child(3) {flex:1;} .ai_base .node_detail .mg_list > li.list_head > div:nth-child(4), .ai_base .node_detail .mg_list > li.list_head > div:nth-child(5) {width:180px;} .ai_base .node_detail .mg_list > li.list_head > div:nth-child(6), .ai_base .node_detail .mg_list > li.list_head > div:nth-child(7), .ai_base .node_detail .mg_list > li.list_head > div:nth-child(8), .ai_base .node_detail .mg_list > li.list_head > div:nth-child(9) {width:150px;} .ai_base .node_detail .mg_list > li.list_body {align-items:flex-start;position:absolute;top:30px;right:0;bottom:0;left:5px;border:0;background-color:#fff;overflow:auto;} .ai_base .node_detail .mg_list > li.list_body:hover {background-color:inherit;} .ai_base .node_detail .toggle_allview_component {width:32px;height:32px;padding:0;margin:0 5px 0 0;border:1px solid #a8a8a8;border-radius:3px;position:relative;text-indent:-9999px;} .ai_base .node_detail .toggle_allview_component:after {display:block;content:"";line-height:32px;position:absolute;top:0;right:0;bottom:0;left:0;font-family:"icofont";font-size:20px;text-indent:0;text-align:center;} .ai_base .node_detail .toggle_allview_component.expand:after {content:"";} .ai_base .node_detail .detail_node_wrap {display:flex;flex-direction:column;width:100%;padding:0;margin:0;} .ai_base .node_detail .detail_node_wrap > li {padding:0 0 0 20px;margin:0;list-style:none;position:relative;border-bottom:1px solid #e1e3e7;} .ai_base .node_detail .detail_node_wrap > li.ui-sortable-helper {background-color:#fff;box-shadow:5px 5px 10px rgba(0,0,0,0.2);} .ai_base .node_detail .detail_node_wrap > li.has_sub.expand .detail_component_wrap {display:flex;} .ai_base .node_detail .detail_node_wrap > li.has_sub.expand .detail_node_list .toggle_detail_node_list:after {content:"";} .ai_base .node_detail .detail_node_list {display:flex;flex-direction:row;padding:0;margin:0;} .ai_base .node_detail .detail_node_list > li {display:inline-flex;min-height:35px;align-items:center;padding:0 5px;margin:0;list-style:none;} .ai_base .node_detail .detail_node_list > li:nth-child(1) {width:25px;} .ai_base .node_detail .detail_node_list > li:nth-child(2), .ai_base .node_detail .detail_node_list > li:nth-child(3) {flex:1;} .ai_base .node_detail .detail_node_list > li:nth-child(4), .ai_base .node_detail .detail_node_list > li:nth-child(5) {width:180px;} .ai_base .node_detail .detail_node_list > li:nth-child(6), .ai_base .node_detail .detail_node_list > li:nth-child(7), .ai_base .node_detail .detail_node_list > li:nth-child(8), .ai_base .node_detail .detail_node_list > li:nth-child(9) {width:150px;} .ai_base .node_detail .detail_node_list .nickname {display:flex;flex-direction:row;position:relative;border-radius:3px;border:1px solid transparent;overflow:hidden;} .ai_base .node_detail .detail_node_list .nickname .input_nickname {width:90px;padding:0 5px;border:0;background-color:transparent;} .ai_base .node_detail .detail_node_list .nickname .btn_edit {width:26px;height:26px;margin:0;position:relative;border:0;background-color:transparent;} .ai_base .node_detail .detail_node_list .nickname .btn_edit:after {display:block;content:"";line-height:26px;position:absolute;top:0;right:0;bottom:0;left:0;font-family:"icofont";} .ai_base .node_detail .detail_node_list .nickname .btn_edit:hover:after {color:#26a1ff;} .ai_base .node_detail .detail_node_list .nickname.mode_edit {border-color:#26a1ff;box-shadow:inset 2px 2px 8px rgb(0,0,0,0.1);} .ai_base .node_detail .detail_node_list .nickname.mode_edit .btn_edit:after {content:"";} .ai_base .node_detail .detail_node_list .state {position:relative;padding-left:25px;} .ai_base .node_detail .detail_component_wrap {display:none;flex-direction:column;padding:0;margin:0;} .ai_base .node_detail .detail_component_wrap > li {padding:0;margin:0;list-style:none;border-top:1px solid #e1e3e7;} .ai_base .node_detail .detail_node_list .toggle_detail_node_list {display:block;width:24px;height:24px;padding:0;margin:0;position:relative;text-indent:-9999px;border-radius:0;border:none;background:transparent;} .ai_base .node_detail .detail_node_list .toggle_detail_node_list:after {display:block;content:"";line-height:24px;position:absolute;top:0;right:0;bottom:0;left:0;color:#c5c8d0;font-family:"icofont";text-indent:0;text-align:center;} .ai_base .node_detail .detail_component_list {display:flex;flex-direction:row;padding:0;margin:0;} .ai_base .node_detail .detail_component_list > li {display:inline-flex;min-width:142px;padding:0;margin:0;list-style:none;align-items:center;min-height:30px;} .ai_base .node_detail .detail_component_list > li:first-child {flex:1;justify-content:flex-start;position:relative;padding-left:50px;} .ai_base .node_detail .detail_component_wrap > li:last-child .detail_component_list > div:first-child:after {display:none;} .ai_base .node_detail .detail_component_list:hover > li:last-child {display:inline-flex;} .ai_base .node_detail .detail_operator_wrap {display:flex;flex-direction:column;padding:0;margin:0;} .ai_base .node_detail .detail_operator_wrap > li {padding:0;margin:0;list-style:none;position:relative;border-top:1px solid #e1e3e7;} .ai_base .node_detail .detail_operator_wrap > li:first-child {border-top:none;} .ai_base .node_detail .detail_operator_wrap > li.ui-sortable-helper {background-color:#fff;box-shadow:5px 5px 10px rgba(0,0,0,0.2);} .ai_base .node_detail .detail_operator_list {display:flex;flex-direction:row;padding:0;margin:0;} .ai_base .node_detail .detail_operator_list > li {display:inline-flex;align-items:center;min-width:142px;min-height:30px;} .ai_base .node_detail .detail_operator_list > li:first-child {display:inline-flex;flex:1;justify-content:flex-start;position:relative;padding:0 0 0 50px;margin:0;list-style:none;} .ai_base .workflow_right .property_header {padding:5px 0;margin:0;position:relative;} .ai_base .workflow_right .property_header > li {display:flex;align-items:center;padding:2px 0;} .ai_base .workflow_right .property_header > li:first-child {padding:5px 0;} .ai_base .workflow_right .property_header > li > .mg_btn {padding-top:0;} .ai_base .workflow_right .property_header h4 {display:block;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px; font-weight:700;} .ai_base .workflow_right .property_header .brief {color:#7b7e85;font-size:12px;} .ai_base .property_tab {height:100%;} .ai_base .property_tab > ul {border:none; background:none; border-bottom:1px solid #b1b1b1; border-radius:0;} .ai_base .property_tab > ul > li {margin-right:2px !important; border:none !important; background:none !important; border-radius:0; height:auto !important; width:auto !important;} .ai_base .property_tab > ul > li:first-child {margin-left:15px;} .ai_base .property_tab > ul > li:last-child {margin-right:0;} .ai_base .property_tab > ul > li > a {padding:3px 10px 2px !important; text-align:center; font-size:14px; color:#575757; border:1px solid #b1b1b1; border-bottom:none; transition:0.2s; font-weight:500; position:relative; overflow:hidden; background:#fff; border-radius:10px 10px 0 0;} .ai_base .property_tab > ul > li > a:after {content:""; display:block; z-index:0; width:100%; height:3px; position:absolute; left:0; bottom:-3px; background:#575757; transition:0.3s;} .ai_base .property_tab > ul > li > a:hover:after {bottom:0;} .ai_base .property_tab > ul > li > a span {position:relative; z-index:2; display:inline-block;} .ai_base .property_tab > ul > li > a:focus, .ai_base .property_tab > ul > li.ui-state-active > a, .ai_base .property_tab > ul > li > a.active {color:#fff; background:#575757;} .ai_base .property {overflow:auto;} .ai_base .property input[type=text] {width:100%;} .ai_base .property .m_select {width:100% !important;} .ai_base .property .m_btn {font-size:12px;} .ai_base #tooltip_property {margin-left:10px;} .ai_base #tooltip_property_html {width:200px;} .ai_base #tooltip_property_html .mg_list > li {background:inherit;} .ai_base #tooltip_property_html .mg_list > li:last-child {border:0;} .ai_base .property_detail .m_select {width:100% !important;margin:5px 0 10px;} .ai_base .property_detail > dl.active > dt {border:0;} .ai_base .property_detail > dl.active > dt:after {content:"";} .ai_base .property_detail > dl.active > dd {display:block;} .ai_base .property_item {margin:0;border-top:1px solid #1aadd2;} .ai_base .property_item .mg_form {border-top:0;background-color:#f9f9f9;} .ai_base .property_item .mg_form > li {border-bottom:1px solid #e1e3e7;} .ai_base .property_item .mg_form > li > div {min-height:38px;font-size:12px;} .ai_base .property_item .mg_form > li > div.que {color:#1aadd2;text-align:left;overflow:hidden;text-overflow:ellipsis; padding:14px 20px 0 15px;} .ai_base .property_item .mg_form > li > div.que button.tooltip_html_icon {position:absolute; right:2px; top:12px;} .ai_base .property_item .mg_form > li > div.ans {background-color:#fff; position:relative; width:calc(100% - 200px);} .ai_base .property_item .mg_form > li > div.ans > input {padding-right:20px;} .ai_base .property_item .mg_form > li > div.ans > button.btn_clear {position:absolute; right:10px; top:5px; width:20px; height:30px; line-height:28px;} .ai_base .property_item .mg_form > li > div.ans .select2-container--default .select2-selection--single .select2-selection__rendered {min-width:50px;} .ai_base .property_item .mg_form > li > div.svans {background-color:#fff; position:relative; padding: 5px 10px 5px 10px; width:100%;} .ai_base .property_item .mg_form > li > div.svans > input {padding-right:20px;} .ai_base .property_item .mg_form > li .file_select > .btn_file {height:40px; position:relative; background:url(../images/icon/icon_active_folder.png) no-repeat center center; width:25px;} .ai_base .property_item .mg_form > li .file_select > .btn_file:after {display:none;} .ai_base .property_item .mg_form > li .icon_btn.icon_sync {height:39px; background-size:auto 20px; width:25px;} .ai_base .property_tab .mg_form {border-top:1px solid #1aadd2;} .ai_base .multiple_input_wrap {display:block;align-items:center;padding:2px;} .ai_base .multiple_input_wrap .input_list {display:inline-flex;flex-wrap:wrap;padding:0;margin:0;} .ai_base .multiple_input_wrap .input_item {display:inline-flex;padding:0 30px 0 0;margin:2px 10px 2px 0;list-style:none;position:relative;border-radius:0;box-shadow:none; border:1px solid #d6d6d6;} .ai_base .multiple_input_wrap .input_item > input[type=text] {width:100px;height:30px;padding:0 10px;margin:0;border:0;background:transparent;} .ai_base .multiple_input_wrap .input_item > .btn_deleteItem {width:30px;height:30px;padding:0;position:absolute;top:0;right:0;border:0;background:transparent; vertical-align:top;} .ai_base .multiple_input_wrap .input_item > .btn_deleteItem:after {display:block;content:"";line-height:30px;position:absolute;top:0;right:0;left:0;font-family:"icofont";text-indent:0;} .ai_base .multiple_input_wrap .btn_addItem {display:inline-flex;width:30px;height:30px;position:relative;margin:0 2px;border:0;background-color:#fff; vertical-align:top;} .ai_base .multiple_input_wrap .btn_addItem:after {display:block;content:"";line-height:30px;position:absolute;top:0;right:0;bottom:0;left:0;font-family:"icofont";text-indent:0;} .ai_base .multiple_input_wrap .btn_deleteAllItem {display:inline-block;width:30px;height:30px;padding:0;vertical-align:middle;position:relative;border:0;background-color:#fff; vertical-align:top;} .ai_base .multiple_input_wrap .btn_deleteAllItem:after {display:block;content:"";line-height:30px;position:absolute;top:0;right:0;bottom:0;left:0;font-family:"icofont";text-indent:0;} .ai_base .file_select {display:inline-flex;flex-direction:row;position:relative;border-radius:3px;} .ai_base .file_select > input[type=text] {width:calc(100% - 30px);height:30px;border:0;border-radius:5px;box-shadow:inset 2px 2px 8px rgb(0,0,0,0.1);} .ai_base .file_select > .btn_file {width:30px;height:30px;padding:0;position:absolute;top:0;right:0;text-indent:-9999px;border:0;background:transparent;} .ai_base .file_select > .btn_file:after {display:block;content:"";line-height:30px;position:absolute;top:0;right:0;left:0;font-size:18px;font-family:"icofont";text-indent:0;} .ai_base .file_select > .btn_file:hover:after {color:#26a1ff;} .ai_base .w_split6.expand #toggle_right_expand {background-image:url(../images/icon/icon_black_reduce.png);} .ai_base .w_split6.expand .filetype_list {flex-direction:row;} .ai_base .w_split6.expand .validation_wrap {flex-direction:row;} .ai_base .w_split6.expand .validation_wrap > li {} .ai_base .workflow_center {display:block;height:100%;position:relative;} .ai_base #toggle_center_expand {position:absolute;top:40px;left:30px;border-radius:5px;background-color:#fff;box-shadow:10px 2px 20px rgb(0 0 0 / 10%);z-index:9;} .ai_base .workflow.expand #toggle_center_expand {background-image:url(../images/icon/icon_black_reduce.png);} .ai_base .flowchart_ctrl {display:flex;flex-direction:row;align-items:center;padding:0;margin:0;position:absolute;top:40px;left:70px;box-shadow:10px 2px 20px rgb(0 0 0 / 10%);z-index:9;} .ai_base .flowchart_ctrl > li {display:flex;padding:0;margin:0;list-style:none;border-right:1px solid #eef1f7;background-color:#fff;} .ai_base .flowchart_ctrl > li:hover {background-color:#26a1ff;} .ai_base .flowchart_ctrl > li:hover .icon_btn {color:#fff;} .ai_base .flowchart_ctrl > li:hover .icon_btn:after {color:inherit;} .ai_base .flowchart_ctrl > li:first-child {border-radius:5px 0 0 5px;} .ai_base .flowchart_ctrl > li:last-child {border-radius:0 5px 5px 0;border:0;} .ai_base .flowchart_ctrl .icon_btn.icon_build_set {width:20px;} .ai_base .flowchart_ctrl .icon_btn.icon_build_set:after {content:"";justify-content:flex-start;} .ai_base .flowchart_ctrl .build_set {display:none;padding:10px;position:absolute;top:40px;left:0;border-radius:10px;background-color:#fff;box-shadow:10px 5px 20px rgb(0 0 0 / 20%);} .ai_base .flowchart_ctrl .build_set > li {display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding-left:10px;margin:5px 0;position:relative;} .ai_base .flowchart_ctrl .build_set > li span {display:inline-block;width:150px;padding:0 30px 0 0;text-align:right;} .ai_base .flowchart_ctrl .build_set .m_switch {height:16px;} .ai_base .flowchart_ctrl .build_set .m_switch > input[type=checkbox] + label {width:30px;height:15px;border-width:2px;background-color:#d9dcdf;} .ai_base .flowchart_ctrl .build_set .m_switch > input[type=checkbox] + label:after {width:11px;height:11px;background-color:#fff;} .ai_base .flowchart_ctrl .build_set .m_switch > input[type=checkbox]:checked + label {background-color:#4596ff;} .ai_base .flowchart_ctrl .build_set .m_switch > input[type=checkbox]:checked + label:after {left:calc(100% - 11px);} .ai_base .flowchart_ctrl .build_set.active {display:block;} .ai_base .flowchart_ctrl button + .tooltip {z-index:2;} .ai_base .flowchart_ctrl .view_history {display:none;padding:10px;position:absolute;top:40px;left:0;border-radius:10px;background-color:#fff;box-shadow:10px 5px 20px rgb(0 0 0 / 20%);} .ai_base .flowchart_ctrl .view_history.active {display:block;} .ai_base .node_chart_map {display:flex;flex-direction:row;align-items:center;padding:10px 20px;position:absolute;top:40px;right:30px;border-radius:5px;background-color:#fff;box-shadow:10px 2px 20px rgb(0 0 0 / 10%);z-index:9;} .ai_base .node_chart_map ul {display:flex;flex-wrap:wrap;padding:0;margin:0;} .ai_base .node_chart_map ul > li {display:flex;align-items:center;padding:5px 20px 5px 5px;margin:0;list-style:none;position:relative;} .ai_base .node_chart_map ul > li:after {display:inline-flex;;content:"";position:absolute;right:0;font-family:"icofont";font-size:18px;color:#000;text-align:center;} .ai_base .node_chart_map ul > li:last-child {padding-right:5px;} .ai_base .node_chart_map ul > li:last-child:after {display:none;} .ai_base .node_chart_map button {width:30px;height:30px;color:#fff;font-size:12px;border:5px solid #122240;border-radius:3px;outline:0;background:#122240;} .ai_base .node_chart_map button:hover {border-color:#26a1ff;} .ai_base .node_chart_map button.active {border-color:#26a1ff;} .ai_base .node_chart_map span > li {display:flex;align-items:center;padding:5px;margin:0;list-style:none;position:relative;} .ai_base #node_flowchart {display:none; width:4000px; height:2000px; position:absolute; top:0; right:0; bottom:0; left:0; background:url("../images/common/flow_grid_etl.png") repeat center center;} .ai_base #node_flowchart.active {display:block;} .ai_base #node_flowchart .flowchart-operator {min-width:300px; width:auto; max-width:600px; height:110px !important; border-radius:0; border:1px solid #dadada; background:#fff; box-shadow:0 5px 5px rgba(0,0,0,0.05); padding:0;} .ai_base #node_flowchart .flowchart-operator .flowchart-operator-title {padding:0; text-align:left; border-radius:0; background-color:#fff; border:none; font-size:14px; font-weight:500; color:#014de7; padding:40px 20px 0 85px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ai_base #node_flowchart .flowchart-operator .flowchart-operator-title input {width: 65%;} .ai_base #node_flowchart .flowchart-operator-outputs {width:20px !important; height:20px; position:absolute; top:50%; right:-11px; margin-top:-9px;} .ai_base #node_flowchart .flowchart-operator-inputs {width:20px !important; height:20px; position:absolute; top:50%; left:-11px; margin-top:-9px;} .ai_base #node_flowchart .flowchart-operator-connector-arrow {width:15px; height:15px; border:0; border-radius:8px; background-color:#999; transition:0.2s;} .ai_base #node_flowchart .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {border-left:none; border-top-color:none; cursor:pointer; background:#ff9908;} .ai_base #node_flowchart .flowchart-operator-connector-small-arrow {display:none;} .ai_base #node_flowchart .flowchart-operator-outputs .flowchart-operator-connector-arrow {right:3px; background-color:transparent; border-radius:0; border:2px solid #bbb;} .ai_base #node_flowchart .flowchart-operator-outputs .flowchart-operator-connector:hover .flowchart-operator-connector-arrow {border-left:2px solid #bbb; border-color:#ff9908 !important; background:transparent;} .ai_base #node_flowchart .flowchart-operator-inputs .flowchart-operator-connector-arrow {left:3px; background-color:#0046c3;} .ai_base #node_flowchart .flowchart-operator-body {padding:0 20px 20px 85px;} .ai_base #node_flowchart .flowchart-operator-body .flowchart_component strong.operator_type {position:absolute; right:20px; top:16px; width:auto; height:20px; background:#999; color:#fff; border-radius:10px; padding:0 10px; font-weight:500; line-height:20px; font-size:13px;} .ai_base #node_flowchart .flowchart-operator-body .flowchart_component i {display:block; width:40px; height:40px; border-radius:25px; background:#999; color:#fff; position:absolute; left:20px; bottom:27px; font-size:22px; text-align:center; line-height:40px;} .ai_base #node_flowchart .flowchart-operator-body .flowchart_component p {color:#000; font-size:18px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; font-weight:700;} .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_extract strong.operator_type, .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_extract i {background:#ffaa1b;} .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_algorithm strong.operator_type, .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_algorithm i {background:#00baff;} .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_load strong.operator_type, .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_load i {background:#496aea;} .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_serving strong.operator_type, .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_serving i {background:#00b050;} .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_operator strong.operator_type, .ai_base #node_flowchart .flowchart-operator-body .flowchart_component.type_operator i {background:#bb3bcd;} .ai_base #node_flowchart .flowchart-operator-body .component_status {display:inline-block; font-size:16px; font-weight:700; color:#000; position:absolute; left:15px; top:10px;} .ai_base #node_flowchart .flowchart-operator-body .component_status:before {content:""; display:inline-block; font-family:"icofont"; color:#fff; width:15px; height:15px; border-radius:8px; background-color:#666; vertical-align:middle; margin-right:5px; font-size:12px; line-height:16px; text-align:center;} .ai_base #node_flowchart .flowchart-operator-body .component_status.cs_error {color:#d64422;} .ai_base #node_flowchart .flowchart-operator-body .component_status.cs_error:before {content:""; background-color:#fb6543;} .ai_base #node_flowchart .flowchart-operator-body .component_status.cs_stanby {color:#068dcc;} .ai_base #node_flowchart .flowchart-operator-body .component_status.cs_stanby:before {content:""; background-color:#1d99e7;} .ai_base #node_flowchart .flowchart-operator-body .component_status.cs_running {color:#08b391;} .ai_base #node_flowchart .flowchart-operator-body .component_status.cs_running:before {content:""; background-color:#03cda5;} .ai_base #node_flowchart .flowchart-operator-body .component_status.cs_success {color:#2e9500;} .ai_base #node_flowchart .flowchart-operator-body .component_status.cs_success:before {content:""; background-color:#57b82c;} .ai_base #node_flowchart .flowchart-operator .flowchart-operator-body .flowchart_component:after {content:""; display:block; width:calc(100% + 6px); height:calc(100% + 6px); position:absolute; left:-3px; top:-3px; border:2px solid #dadada; opacity:0; transition:0.3s; z-index:0;} .ai_base #node_flowchart .flowchart-operator.hover, .ai_base #node_flowchart .flowchart-operator.hover .flowchart-operator-body .flowchart_component:after, .ai_base #node_flowchart .flowchart-operator.selected .flowchart-operator-body .flowchart_component:after {opacity:1;} .ai_base #node_flowchart .flowchart-operator, .ai_base .node_flowchart.flowchart-operator {min-width:300px; width:auto; max-width:600px; height:110px !important; border-radius:0; border:1px solid #dadada; background:#fff; box-shadow:0 5px 5px rgba(0,0,0,0.05); padding:0;} .ai_base .node_flowchart.flowchart-operator .flowchart-operator-title {padding:0; text-align:left; border-radius:0; background-color:#fff; border:none; font-size:14px; font-weight:500; color:#014de7; padding:40px 20px 0 85px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ai_base .node_flowchart.flowchart-operator .flowchart-operator-title input {width: 65%;} .ai_base .node_flowchart .flowchart-operator-outputs {width:20px !important; height:20px; position:absolute; top:50%; right:-11px; margin-top:-9px;} .ai_base .node_flowchart .flowchart-operator-inputs {width:20px !important; height:20px; position:absolute; top:50%; left:-11px; margin-top:-9px;} .ai_base .node_flowchart .flowchart-operator-connector-arrow {width:15px; height:15px; border:0; border-radius:8px; background-color:#999;} .ai_base .node_flowchart .flowchart-operator-connector-small-arrow {display:none;} .ai_base .node_flowchart .flowchart-operator-outputs .flowchart-operator-connector-arrow {right:3px; background-color:transparent; border-radius:0; border:2px solid #bbb;} .ai_base .node_flowchart .flowchart-operator-inputs .flowchart-operator-connector-arrow {left:3px; background-color:#0046c3;} .ai_base .node_flowchart .flowchart-operator-body {padding:0 20px 20px 85px;} .ai_base .node_flowchart .flowchart-operator-body .flowchart_component strong.operator_type {position:absolute; right:20px; top:16px; width:auto; height:20px; background:#999; color:#fff; border-radius:10px; padding:0 10px; font-weight:500; line-height:20px; font-size:13px;} .ai_base .node_flowchart .flowchart-operator-body .flowchart_component i {display:block; width:40px; height:40px; border-radius:25px; background:#999; color:#fff; position:absolute; left:20px; bottom:27px; font-size:22px; text-align:center; line-height:40px;} .ai_base .node_flowchart .flowchart-operator-body .flowchart_component p {color:#000; font-size:18px; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; font-weight:700;} .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_extract strong.operator_type, .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_extract i {background:#ffaa1b;} .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_algorithm strong.operator_type, .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_algorithm i {background:#00baff;} .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_load strong.operator_type, .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_load i {background:#496aea;} .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_serving strong.operator_type, .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_serving i {background:#00b050;} .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_operator strong.operator_type, .ai_base .node_flowchart .flowchart-operator-body .flowchart_component.type_operator i {background:#bb3bcd;} .ai_base .node_flowchart .flowchart-operator-body .component_status {display:inline-block; font-size:16px; font-weight:700; color:#000; position:absolute; left:15px; top:10px;} .ai_base .node_flowchart .flowchart-operator-body .component_status:before {content:""; display:inline-block; font-family:"icofont"; color:#fff; width:15px; height:15px; border-radius:8px; background-color:#666; vertical-align:middle; margin-right:5px; font-size:12px; line-height:16px; text-align:center;} .ai_base .node_flowchart .flowchart-operator-body .component_status.cs_error {color:#d64422;} .ai_base .node_flowchart .flowchart-operator-body .component_status.cs_error:before {content:""; background-color:#fb6543;} .ai_base .node_flowchart .flowchart-operator-body .component_status.cs_stanby {color:#068dcc;} .ai_base .node_flowchart .flowchart-operator-body .component_status.cs_stanby:before {content:""; background-color:#1d99e7;} .ai_base .node_flowchart .flowchart-operator-body .component_status.cs_running {color:#08b391;} .ai_base .node_flowchart .flowchart-operator-body .component_status.cs_running:before {content:""; background-color:#03cda5;} .ai_base .node_flowchart .flowchart-operator-body .component_status.cs_success {color:#2e9500;} .ai_base .node_flowchart .flowchart-operator-body .component_status.cs_success:before {content:""; background-color:#57b82c;} .ai_base .node_flowchart.flowchart-operator .flowchart-operator-body .flowchart_component:after {content:""; display:block; width:calc(100% + 4px); height:calc(100% + 4px); position:absolute; left:-2px; top:-2px; border:2px solid #dadada; opacity:0; transition:0.3s;} .ai_base .node_flowchart.flowchart-operator .flowchart-operator-body .flowchart_component.type_extract:after {border-color:#ffaa1b;} .ai_base .node_flowchart.flowchart-operator .flowchart-operator-body .flowchart_component.type_algorithm:after {border-color:#00baff;} .ai_base .node_flowchart.flowchart-operator .flowchart-operator-body .flowchart_component.type_load:after {border-color:#496aea;} .ai_base .node_flowchart.flowchart-operator .flowchart-operator-body .flowchart_component.type_serving:after {border-color:#00b050;} .ai_base .node_flowchart.flowchart-operator .flowchart-operator-body .flowchart_component.type_operator:after {border-color:#bb3bcd;} .ai_base .node_flowchart.flowchart-operator.hover {box-shadow:0 10px 15px rgba(0,0,0,0.15);} .ai_base .node_flowchart.flowchart-operator.hover .flowchart-operator-body .flowchart_component:after {opacity:1;} .ai_base #node_flowchart .flowchart-links-layer {top:5px;} .ai_base #node_flowchart .flowchart_component {} .ai_base #node_flowchart .flowchart_component_list {padding:10px;margin:0;} .ai_base #node_flowchart .flowchart_component_list > li {margin:5px;list-style:none;position:relative;border-radius:3px;} .ai_base #node_flowchart .flowchart_component_list > li.bg_extract.empty {color:#bec2c5 !important;border:1px dashed #bec2c5;background-color:transparent !important;cursor:pointer;} .ai_base #node_flowchart .flowchart_component_list > li.bg_extract.empty:before {display:block;content:"Reader";line-height:28px;position:absolute;top:0;right:0;bottom:0;left:20px;pointer-events:none;} .ai_base #node_flowchart .flowchart_component_list > li.bg_extract.empty:after {color:#bec2c5;} .ai_base #node_flowchart .flowchart_component_list > li.bg_algorithm.empty {color:#bec2c5 !important;border:1px dashed #bec2c5;background-color:transparent !important;cursor:pointer;} .ai_base #node_flowchart .flowchart_component_list > li.bg_algorithm.empty:before {display:block;content:"Runner";line-height:28px;position:absolute;top:0;right:0;bottom:0;left:20px;pointer-events:none;} .ai_base #node_flowchart .flowchart_component_list > li.bg_algorithm.empty:after {color:#bec2c5;} .ai_base #node_flowchart .flowchart_component_list > li.bg_load.empty {color:#bec2c5 !important;border:1px dashed #bec2c5;background-color:transparent !important;cursor:pointer;} .ai_base #node_flowchart .flowchart_component_list > li.bg_load.empty:before {display:block;content:"Controller";line-height:28px;position:absolute;top:0;right:0;bottom:0;left:20px;pointer-events:none;} .ai_base #node_flowchart .flowchart_component_list > li.bg_load.empty:after {color:#bec2c5;} .ai_base #node_flowchart .flowchart_component_list > li.bg_writer.empty {color:#bec2c5 !important;border:1px dashed #bec2c5;background-color:transparent !important;cursor:pointer;} .ai_base #node_flowchart .flowchart_component_list > li.bg_writer.empty:before {display:block;content:"Writer";line-height:28px;position:absolute;top:0;right:0;bottom:0;left:20px;pointer-events:none;} .ai_base #node_flowchart .flowchart_component_list > li.bg_writer.empty:after {color:#bec2c5;} .ai_base #node_flowchart .flowchart_component_list > li.bg_operator.empty {color:#bec2c5 !important;border:1px dashed #bec2c5;background-color:transparent !important;cursor:pointer;} .ai_base #node_flowchart .flowchart_component_list > li.bg_operator.empty:before {display:block;content:"Operator";line-height:28px;position:absolute;top:0;right:0;bottom:0;left:20px;pointer-events:none;} .ai_base #node_flowchart .flowchart_component_list > li.bg_operator.empty:after {color:#bec2c5;} .ai_base #node_flowchart .flowchart_component_list > li > div {height:30px;overflow:hidden;} .ai_base #node_flowchart .flowchart_component_list > li > div > span {display:block;line-height:30px;padding:0 20px;position:relative;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;} .ai_base #node_flowchart .flowchart_component_list > li.bg_operator > div > span:first-child, .ai_base #node_flowchart .flowchart_component_list > li.bg_writer > div > span:first-child {padding-right:60px;} .ai_base #node_flowchart .flowchart_component_list > li > div > span.ui-sortable-helper {background-color:rgba(0,0,0,0.2);} .ai_base #node_flowchart .flowchart_component_list > li > div > span.active {background-color:rgba(0,0,0,1);} .ai_base #node_flowchart .flowchart_component_list > li > div > span > i.progress {display:none;width:4px;height:100%;position:absolute;top:0;bottom:0;left:0;background-color:transparent;} .ai_base #node_flowchart .flowchart_component_list > li > div > span > i.progress.completed {background-color:yellow;} .ai_base #node_flowchart .flowchart_component_list > li > div > span > i.handle {display:none;width:10px;height:30px;position:absolute;top:0;left:6px;cursor:pointer;} .ai_base #node_flowchart .flowchart_component_list > li > div > span > i.handle:before {display:block;content:"";width:10px;height:4px;position:absolute;top:12px;border-top:1px solid #fff;border-bottom:1px solid #fff;} .ai_base #node_flowchart .flowchart_component_list > li > div > span > i.handle:after {display:block;content:"";width:10px;height:1px;position:absolute;top:18px;background-color:#fff;} .ai_base #node_flowchart .flowchart_component_list > li > .list_count {padding:2px 25px 2px 10px;position:absolute;top:3px;right:0;border-radius:15px 0 0 15px;background-color:rgba(0,0,0,0.2);cursor:pointer;} .ai_base #node_flowchart .flowchart_component_list > li > .list_count:after {display:block;content:"";padding:0 5px;line-height:25px;position:absolute;top:0;right:0;font-family:"icofont";} .ai_base #node_flowchart .flowchart_component_list > li > div.expand {height:auto;overflow:inherit;} .ai_base #node_flowchart .flowchart_component_list > li > div > span > i.progress {display:block;} .ai_base #node_flowchart .flowchart_component_list > li > div.expand > span > i.handle {display:block;} .ai_base #node_flowchart .flowchart_component_list > li > div.expand + .list_count:after {content:"";} .ai_base #node_flowchart .toggle_allview_list {width:20px;height:20px;margin-left:-10px;position:absolute;left:50%;bottom:-10px;text-indent:-9999px;border:0;border-radius:10px;background-color:#1e222d;overflow:hidden;} .ai_base #node_flowchart .toggle_allview_list:after {display:block;content:"";line-height:20px;position:absolute;top:0;right:0;bottom:0;left:0;color:#fff;font-family:"icofont";font-size:10px;text-align:center;text-indent:0;} .ai_base #node_flowchart .toggle_allview_list.expand:after {content:"";} .ai_base #node_flowchart .toggle_node_ctrl {width:26px;height:26px;padding:0;margin:0;position:absolute;top:8px;right:4px;text-indent:-9999px;border:0;} .ai_base #node_flowchart .toggle_node_ctrl:after {display:block;content:"";line-height:26px;position:absolute;top:0;right:0;bottom:0;left:0;color:#000;font-family:"icofont";font-size:16px;text-align:center;text-indent:0;background-color:#fff;} .ai_base #node_flowchart .node_ctrl {height:34;padding:0px 2px;margin:0;position:absolute;bottom:0;width:100%;height:0;overflow:hidden;opacity:0;transition:all ease 0.2s;} .ai_base #node_flowchart .node_ctrl > ul {display:flex;flex-direction:row;justify-content:center;padding:0;margin:0;} .ai_base #node_flowchart .node_ctrl > ul > li {padding:0;margin:0;list-style:none;} .ai_base #node_flowchart .node_ctrl button {display:block;width:24px;height:24px;padding:0;margin:1px;margin-top:0;border:0;border-radius:12px;position:relative;opacity:0;} .ai_base #node_flowchart .node_ctrl button:after {display:block;line-height:24px;position:absolute;top:0;right:0;bottom:0;left:0;font-family:"icofont";font-size:15px;text-align:center;} .ai_base #node_flowchart .node_ctrl .btn_node_detailView:after {content:"";} .ai_base #node_flowchart .node_ctrl .btn_node_add:after {content:"";} .ai_base #node_flowchart .node_ctrl .btn_node_build:after {content:"";} .ai_base #node_flowchart .node_ctrl .btn_node_run:after {content:"";} .ai_base #node_flowchart .node_ctrl .btn_node_delete:after {content:"";} .ai_base #node_flowchart .node_ctrl .btn_node_copy:after {content:"";} .ai_base #node_flowchart .node_ctrl .btn_result_preview:after {content:"";} .ai_base #node_flowchart .node_ctrl .btn_result_download:after {content:"";} .ai_base #node_flowchart .node_ctrl.active {bottom:-6px;opacity:1;overflow:inherit;} .ai_base #node_flowchart .node_ctrl.active button {margin-top:0;opacity:1;} .ai_base #node_flowchart .node_ctrl.active .btn_node_detailView {transition:all ease 0.1s;} .ai_base #node_flowchart .node_ctrl.active .btn_node_add {transition:all ease 0.2s;} .ai_base #node_flowchart .node_ctrl.active .btn_node_build {transition:all ease 0.3s;} .ai_base #node_flowchart .node_ctrl.active .btn_node_run {transition:all ease 0.4s;} .ai_base #node_flowchart .node_ctrl.active .btn_node_delete {transition:all ease 0.5s;} .ai_base #node_flowchart .node_ctrl.active .btn_node_copy {transition:all ease 0.6s;} .ai_base #node_flowchart .node_ctrl.active .btn_result_preview {transition:all ease 0.7s;} .ai_base #node_flowchart .node_ctrl.active .btn_result_download {transition:all ease 0.8s;} .ai_base .close_component_flowchart {display:none;width:30px;height:30px;padding:0;position:absolute;top:5px;right:30px;text-indent:-9999px;border:0;border-radius:3px;background:#fff url(../images/icon/icon_black_back.png) no-repeat center center;box-shadow:10px 2px 20px rgb(0 0 0 / 10%);z-index:9;} .ai_base .close_component_flowchart.active {display:inline-block;} .ai_base #component_flowchart {width:4000px;height:2000px;position:absolute;top:0;left:0;background:url("../images/common/flow_grid_model.png") repeat left top;z-index:-1;} .ai_base #component_flowchart.active {z-index:1;} .ai_base #component_flowchart.active .flowchart-operators-layer, .ai_base #component_flowchart.active .flowchart-links-layer {animation:flowScale 0.8s linear;} .ai_base #component_flowchart .flowchart-operator {min-width:200px;border-radius:8px;} .ai_base #component_flowchart .flowchart-operator .flowchart-operator-title {font-weight:normal;text-align:center;border-radius:8px;border:none;background:inherit;} .ai_base #component_flowchart .flowchart-operator-body {padding:0;position:absolute;top:-20px;right:10px;} .ai_base #component_flowchart .flowchart-operator-body .operator_time {height:20px;color:#000;font-size:12px;} .ai_base #component_flowchart .flowchart-operator .flowchart-operator-inputs-outputs {margin:0;} .ai_base #component_flowchart .flowchart-operator-inputs {width:10px !important;height:10px;position:absolute;top:10px;left:-11px;} .ai_base #component_flowchart .flowchart-operator-outputs {width:10px !important;height:10px;position:absolute;bottom:10px;right:-11px;} .ai_base #component_flowchart .flowchart-operator-connector-arrow {width:10px;height:10px;border:0;border-radius:10px;background-color:transparent;} .ai_base #component_flowchart .flowchart-operator-connector-small-arrow {display:none;} .ai_base #component_flowchart .flowchart-operator-inputs .flowchart-operator-connector-arrow {left:5px;} .ai_base #component_flowchart .flowchart-operator-outputs .flowchart-operator-connector-arrow {right:5px;} .ai_base #component_flowchart .flowchart-links-layer {top:5px;left:3px;} .ai_base .operator_ctrl {position:fixed;top:0;left:0;height:0;opacity:0;z-index:-1;} .ai_base .operator_ctrl .runtime {display:block;height:20px;margin:0;font-size:12px;text-align:right;} .ai_base .operator_ctrl > ul {display:flex;flex-direction:row;padding:0;margin:0;border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.2);} .ai_base .operator_ctrl > ul > li {padding:0;margin:0;list-style:none;border-right:1px solid #eef1f7;} .ai_base .operator_ctrl > ul > li:last-child {border-right:0;} .ai_base .operator_ctrl button {display:block;width:30px;height:30px;padding:0;margin:0;position:relative;border:0;background-color:#fff;} .ai_base .operator_ctrl button:after {display:block;content:"";line-height:30px;position:absolute;top:0;right:0;left:0;font-family:"icofont";font-size:16px;text-align:center;} .ai_base .operator_ctrl button:hover {background-color:#26a1ff;} .ai_base .operator_ctrl button:hover:after {color:#fff;} .ai_base .operator_ctrl > ul > li:first-child > button {border-radius:5px 0 0 5px;} .ai_base .operator_ctrl > ul > li:last-child > button {border-radius:0 5px 5px 0;} .ai_base .operator_ctrl .btn_component_property:after {content:"";} .ai_base .operator_ctrl .btn_component_delete:after {content:"";} .ai_base .operator_ctrl .btn_component_run:after {content:"";} .ai_base .operator_ctrl .btn_component_add:after {content:"";} .ai_base .operator_ctrl .btn_component_preview:after {content:"";} .ai_base .operator_ctrl .btn_component_download:after {content:"";} .ai_base .operator_ctrl.active {height:auto;opacity:1;z-index:99;} .ai_base .operator_search_wrap {display:none;width:290px;position:fixed;border-radius:10px;background-color:#fff;box-shadow:10px 2px 20px rgba(0,0,0,0.2);z-index:9;} .ai_base .operator_search_wrap .mg_search {width:100%;padding:20px 5px 10px 20px;} .ai_base .operator_search_wrap .mg_search .search_text {} .ai_base .operator_search_wrap .search_body {position:relative;} .ai_base .operator_search_wrap dl {margin:0;} .ai_base .operator_search_wrap dl > dt {padding:5px 20px;position:relative;font-size:15px;} .ai_base .operator_search_wrap dl > dt:after {display:block;content:"";height:1px;position:absolute;bottom:0;right:20px;left:20px;background-color:#bec2c5;} .ai_base .operator_search_wrap dl > dd {padding:0;position:relative;} .ai_base .operator_search_wrap ol {display:flex;flex-direction:column;padding:0;margin:0;} .ai_base .operator_search_wrap ol > li {padding:2px;margin:0;list-style:none;} .ai_base .operator_search_wrap ol > li > a {display:block;line-height:20px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ai_base .operator_search_wrap dl.view_recommend {border-bottom:0;} .ai_base .operator_search_wrap dl.view_recommend > dt {background-color:#f9f9f9;} .ai_base .operator_search_wrap dl.view_recommend > dt:after {display:none;} .ai_base .operator_search_wrap dl.view_recommend ol {flex-direction:row;flex-wrap:wrap;padding:0 18px;} .ai_base .operator_search_wrap dl.view_recommend ol > li {padding:2px;} .ai_base .operator_search_wrap dl.view_recommend ol > li > a {padding:2px 5px;border:1px solid #e1e3e7;border-radius:3px;background-color:#fff;} .ai_base .operator_search_wrap dl.view_recommend ol > li > a:hover {border-color:#26a1ff;} .ai_base .operator_search_wrap dl.view_extractor ol {padding:2px 20px;} .ai_base .operator_search_wrap dl.view_extractor ol > li > a {padding:2px 5px;} .ai_base .operator_search_wrap dl.view_extractor ol > li > a:hover {background-color:#f3f8ff;} .ai_base .operator_search_wrap dl.view_transform > dd {padding-bottom:30px;} .ai_base .operator_search_wrap dl.view_transform ol {padding:2px 20px;} .ai_base .operator_search_wrap dl.view_transform ol > li > a {padding:2px 5px;} .ai_base .operator_search_wrap dl.view_transform ol > li > a:hover {background-color:#f3f8ff;} .ai_base .operator_search_wrap dl.view_transform .btn_text {margin-right:20px;position:absolute;right:0;bottom:0;} .ai_base .operator_search_wrap .mg_btn {padding:20px;} .ai_base .operator_search_wrap .mg_btn > button {flex:1;} .ai_base .operator_search_wrap.active {display:block;} .ai_base .workflow_bottom {height:100%;background-color:#fff;overflow-x:auto;overflow-y:hidden;} .ai_base .mg_tab.tab_result {height:100%;} .ai_base .mg_tab.tab_result > .tab_bar {border-bottom:1px solid #b1b1b1;} .ai_base .mg_tab.tab_result > .tab_bar > li {margin-right:2px;} .ai_base .mg_tab.tab_result > .tab_bar > li:first-child {margin-left:15px;} .ai_base .mg_tab.tab_result > .tab_bar > li:last-child {margin-right:0;} .ai_base .mg_tab.tab_result > .tab_bar > li > a {padding:5px 15px 3px; text-align:center; font-size:14px; color:#575757; border:1px solid #b1b1b1; border-bottom:none; transition:0.2s; font-weight:500; position:relative; overflow:hidden; border-radius:10px 10px 0 0;} .ai_base .mg_tab.tab_result > .tab_bar > li > a:after {content:""; display:block; z-index:0; width:100%; height:3px; position:absolute; left:0; bottom:-3px; background:#575757; transition:0.3s;} .ai_base .mg_tab.tab_result > .tab_bar > li > a:hover:after {bottom:0;} .ai_base .mg_tab.tab_result > .tab_bar > li > a span {position:relative; z-index:2; display:inline-block;} .ai_base .mg_tab.tab_result > .tab_bar > li > a:focus, .ai_base .mg_tab.tab_result > .tab_bar > li > a.active {color:#fff; background:#575757;} .ai_base .mg_tab.tab_result > .tab_content {height:100%;padding:0;position:relative;background-color:#fff;} .ai_base .mg_tab.tab_result > .tab_content pre {margin-bottom:0;} .ai_base .mg_tab.tab_result .tab_ctrl {display:flex;align-items:center;position:absolute;top:-36px;right:50px;} .ai_base .mg_tab.tab_result .mg_ctrl .icon_btn.icon_prev:after {content:"";} .ai_base .mg_tab.tab_result .mg_ctrl .icon_btn.icon_next:after {content:"";} .ai_base .split_ctrl {display:flex;position:absolute;top:-36px;right:45px;} .ai_base .view_type button:hover, .ai_base .view_type button.active {border-color:#1aadd2;background-color:#1aadd2;} .ai_base .view_type .btn_view_data:hover, .ai_base .view_type .btn_view_data.active {background-image:url(../images/icon/icon_white_data.png);} .ai_base .view_type .btn_view_chart:hover, .ai_base .view_type .btn_view_chart.active {background-image:url(../images/icon/icon_white_chart.png);} .ai_base .view_type .btn_view_card:hover, .ai_base .view_type .btn_view_card.active {background-image:url(../images/icon/icon_white_card.png);} .ai_base .view_type .btn_view_list:hover, .ai_base .view_type .btn_view_list.active {background-image:url(../images/icon/icon_white_list.png);} .ai_base .view_column .m_check > input[type=checkbox] + label {font-size:13px;} .ai_base .view_count .m_select2 + .select2-container {min-width:inherit;} .ai_base .view_count .bootstrap-select.m_select {min-width:40px;height:25px;margin:0;} .ai_base .view_count .bootstrap-select.m_select .dropdown-toggle {line-height:25px;vertical-align:top;} .ai_base .view_pager .m_text {min-width:inherit;width:40px;height:25px;min-height:25px;padding:0;margin:0;text-align:center;} .ai_base .view_option .icon_setting.active {color:#26a1ff;} .ai_base .data_detail_wrap.active {display:block;height:100%;} .ai_base .data_detail_wrap > .mg_ctrl {min-height:inherit;position:absolute;top:10px;right:15px;left:100px;} .ai_base .data_detail_wrap > .data_detail_con > .data_view .tui-grid-layer-state p {padding-top:50px;margin-top:-25px;background:url(../images/icon/icon_noData.png) no-repeat center top;} .ai_base .data_split_wrap.divide .data_detail_wrap.active {flex-direction:column;} .ai_base .data_split_wrap.divide .data_detail_wrap.active > .data_detail_con > .data_view {height:100%;padding-left:0;} .ai_base .data_split_wrap.divide .data_detail_wrap.active.show_option > .data_detail_con {flex-direction:column;} .ai_base .data_split_wrap.divide .data_detail_wrap.active.show_option > .data_detail_con > .data_option {height:auto;max-height:85%;padding:0 10px 20px;overflow:auto;z-index:2;box-shadow:0 0 5px 2px rgba(0,0,0,0.1);} .ai_base .grid_selected_data .mg_list {border-color:transparent;} .ai_base .grid_selected_data .mg_list > li {border-color:transparent;} .ai_base .grid_selected_data .mg_list > li > div.que {width:40%;} .ai_base dl.settype_vertical > dt .m_switch {position:absolute;top:10px;right:10px;} .ai_base dl.settype_vertical .mg_list > li {border:0;border-top:1px solid #bec2c5;} .ai_base dl.settype_vertical .mg_list > li:hover {background-color:inherit;} .ai_base dl.settype_vertical .mg_list > li > div {display:flex;align-items:center;height:40px;padding:0 10px;} .ai_base dl.settype_vertical .mg_list > li > div:first-child {font-size:12px;background-color:#f9f9f9;} .ai_base dl.settype_vertical .mg_list > li > div:last-child .bootstrap-select.m_select {width:100%;margin:0;} .ai_base dl.settype_vertical .m_text, .ai_base dl.settype_vertical .m_textarea {width:100%;margin:0;} .ai_base dl.settype_vertical .mg_form > li {border-top:1px solid #bec2c5;} .ai_base dl.settype_vertical .mg_form > li > .que {padding:5px 10px;font-size:13px;font-weight:normal;text-align:left;background-color:#f9f9f9;} .ai_base dl.settype_vertical .mg_form > li > .ans {min-height:inherit;padding:2px 5px;} .ai_base dl.settype_vertical.active > dt:after {content:"";} .ai_base dl.settype_vertical.active > dd {display:block;} .ai_base .bottom_log .mg_ctrl {padding:5px 20px;} .ai_base .bottom_log .bootstrap-select.m_select {margin-left:0;} .ai_base .bottom_log .area_log {position:relative;} .ai_base .bottom_node .mg_ctrl {padding:5px 20px;} .ai_base .bottom_node .bootstrap-select.m_select {margin-left:0;} .ai_base .area_node .node_list .item_node.active {border-color:#26a1ff;box-shadow:0 0 5px 2px rgba(0,0,0,0.1);} .ai_base .project_info {position:relative; padding:10px 0 10px 160px; margin-bottom:40px;} .ai_base .project_info:before {content:"Project"; display:flex; flex-wrap:wrap; width:180px; height:100%; background:#1d4aaf; border-radius:10px; position:absolute; left:0; top:0; font-size:30px; font-weight:700; color:#fff; z-index:-1; padding-left:40px; align-content:center;} .ai_base .project_info:after {content:""; display:block; width:100%; height:0; float:none; clear:both;} .ai_base .project_info .pi_panel {width:100%; height:auto; background:#fff; border-radius:10px; box-shadow:0 10px 20px rgba(0,0,0,0.07); padding:20px 30px; float:left;} .ai_base .project_info .pi_panel.pi_workflow {width:55%; margin-bottom:10px;} .ai_base .project_info .pi_panel.pi_serving {width:calc(45% - 10px); margin-bottom:10px; float:right;} .ai_base .project_info .pi_panel.pi_serving_lst {width:100%;} .ai_base .project_info .pi_panel h3.pi_title {font-size:22px; font-weight:700; margin:0 0 20px;} .ai_base .project_info .pi_panel > ul {padding:0; margin:0; display:flex; justify-content:space-between;} .ai_base .project_info .pi_panel > ul li {padding:0; margin:0; list-style:none;} .ai_base .project_info .pi_panel > ul li i {display:inline-block; font-size:16px; text-align:center; width:26px; height:26px; border-radius:13px; background:#666; vertical-align:middle; line-height:26px; color:#fff;} .ai_base .project_info .pi_panel > ul li i.icofont-chart-flow-1 {background:#1d4aaf;} .ai_base .project_info .pi_panel > ul li i.icofont-ui-calendar {background:#4d9dff;} .ai_base .project_info .pi_panel > ul li i.icofont-verification-check {background:#57b82c; line-height:27px;} .ai_base .project_info .pi_panel > ul li i.icofont-close {background:#fb6f50; line-height:27px;} .ai_base .project_info .pi_panel > ul li i.icofont-spinner {background:#03cda5; line-height:27px;} .ai_base .project_info .pi_panel > ul li i.icofont-pause {background:#fb6543; line-height:27px;} .ai_base .project_info .pi_panel > ul li span {display:inline-block; vertical-align:middle; font-size:16px; font-weight:700; margin:0 10px;} .ai_base .project_info .pi_panel > ul li strong {display:inline-block; vertical-align:middle; font-size:28px; font-weight:700;} .ai_base .project_info .pi_slide {position:relative; padding:0 40px; overflow:hidden; height:130px;} .ai_base .project_info .pi_slide .pis_item {border:1px solid #dadbdd; border-radius:10px; background:#fff; padding:15px; width:320px; height:130px; overflow:hidden;} .ai_base .project_info .pi_slide .pis_item span.pis_port {height:35px; line-height:35px; background:#999; border-radius:0 10px 0 10px; padding:0 20px; color:#000; position:absolute; right:1px; top:1px; font-size:19px; font-weight:700;} .ai_base .project_info .pi_slide .pis_item span.pis_port.port_success {background:#eaf6e2; color:#398617;} .ai_base .project_info .pi_slide .pis_item span.pis_port.port_failed {background:#faf1eb; color:#b94c4c;} .ai_base .project_info .pi_slide .pis_item h4.pis_title {font-size:18px; font-weight:700; margin:0 0 15px; display:block; width:calc(100% - 75px); padding:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .ai_base .project_info .pi_slide .pis_item ul {display:flex; justify-content:space-between; padding:0; margin:0; width:100%;} .ai_base .project_info .pi_slide .pis_item ul li {list-style:none; display:inline-block; padding:0; margin:0; text-align:center; width:33%; padding-top:40px; position:relative; font-weight:700; font-size:16px;} .ai_base .project_info .pi_slide .pis_item ul li.cpu {background:url(../images/icon/icon_pis_cpu.png) no-repeat center top;} .ai_base .project_info .pi_slide .pis_item ul li.ram {background:url(../images/icon/icon_pis_ram.png) no-repeat center 8px;} .ai_base .project_info .pi_slide .pis_item ul li.pki {background:url(../images/icon/icon_pis_pki.png) no-repeat center top;} .ai_base .project_info .pi_slide.owl-carousel .owl-nav {position:absolute; top:50%; left:0; transform:translate(0,-24px); width:100%; height:0;} .ai_base .project_info .pi_slide.owl-carousel .owl-nav button.owl-prev, .ai_base .project_info .pi_slide.owl-carousel .owl-nav button.owl-next {font-size:34px; color:#dadada; transition:0.3s;} .ai_base .project_info .pi_slide.owl-carousel .owl-nav button.owl-prev:hover, .ai_base .project_info .pi_slide.owl-carousel .owl-nav button.owl-next:hover {color:#4376ea;} .ai_base .project_info .pi_slide.owl-carousel .owl-nav button.owl-next {position:absolute; right:0;} .ai_base .mg_tab.tab_project > .tab_bar {padding:0 120px;border:0;} .ai_base .mg_tab.tab_project > .tab_content.project_content {min-height:calc(100vh - 345px);padding:20px 120px;position:relative;background-color:#f9f9f9;} .ai_base .project_content .group_search {position:absolute;top:-50px;right:120px;} .ai_base .project_content .group_search > .btn_searchTag {display:inline-flex;align-items:center;height:20px;padding:0 15px;margin-left:20px;color:#fff;font-size:12px;border:0;border-radius:20px;background-color:#1aadd2;} .ai_base .project_content .group_search > .btn_searchTag:hover {background-color:#26a1ff;} .ai_base .project_content .recently_item {min-height:192px;} .ai_base .project_content .recently_keywords {display:inline-flex;flex-direction:row;align-items:center;} .ai_base .project_content .recently_keywords > label {padding-right:5px;font-weight:300;} .ai_base .project_content .recently_keywords > a {display:inline-block;line-height:25px;padding:0 5px;margin:0 5px;text-decoration:underline;} .ai_base .project_content .recently_keywords > a:hover, .ai_base .project_content .recently_keywords > a.active {text-shadow:2px 0px 2px rgba(0,0,0,0.2);} .ai_base .search_total {display:inline-flex;flex-direction:row;align-items:center;margin:0 15px;} .ai_base .search_total label {font-weight:normal;} .ai_base .search_total label:after {display:inline;content:":";padding:0 5px;} .ai_base .search_total strong {font-size:16px;} .ai_base .project_content .selected_keywords {display:inline-flex;flex-direction:row;align-items:center;} .ai_base .project_content .selected_keywords > span {line-height:25px;padding:0 25px 0 10px;margin:0 5px;position:relative;color:#26a1ff;border-radius:3px;border:1px solid #26a1ff;background-color:#fff;} .ai_base .project_content .selected_keywords > span .delete_keyword {width:25px;height:25px;line-height:25px;position:absolute;top:0;right:0;font-size:0;border:0;background:transparent;} .ai_base .project_content .selected_keywords > span .delete_keyword:after {display:block;content:"";font-family:"icofont";font-size:initial;position:absolute;top:0;right:0;left:0;bottom:0;} .ai_base .project_content .select_sort {display:inline-flex;flex-direction:row;align-items:center;padding:0} .ai_base .project_content .select_sort > .bootstrap-select.m_select {margin:0;} .ai_base .project_content .select_sort > .bootstrap-select.m_select .dropdown-toggle {border:0;} .ai_base .project_list {display:flex;flex-wrap:wrap;padding:0;margin:0 -20px;position:relative;} .ai_base .project_list > li {width:20%;height:290px;padding:10px;margin:0;list-style:none;box-sizing:border-box;transition:all ease 0.2s;} .ai_base .project_list .project_item {height:270px;position:relative;border:1px solid #dadbdd;border-radius:10px;background-color:#fff; transition:0.3s;} .ai_base .project_list .project_item .item_category {display:block;padding:15px 20px 0;color:#1aadd2;} .ai_base .project_list .project_item .item_title {color:#000;display:-webkit-box;height:100px;padding:50px 30px 0;margin:0;font-size:20px;word-break:keep-all;-webkit-line-clamp:2;white-space:normal;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;font-weight:700;line-height:25px;} .ai_base .project_list .project_item .item_brief {display:-webkit-box;height:60px;padding:0 103px 0 30px;margin:15px 0;font-size:15px;word-break:keep-all;-webkit-line-clamp:3;white-space:normal;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;} .ai_base .project_list .project_item .item_tag_list {display:block;height:20px;padding:0 15px;margin:5px 0;word-break:break-word;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .ai_base .project_list .project_item .item_tag_list > li {display:inline-block;line-height:20px;padding:0 5px;margin:0;list-style:none;} .ai_base .project_list .project_item .item_tag_list > li.match_tag {color:#26a1ff;} .ai_base .project_list .project_item .item_info {display:flex;flex-wrap:wrap;height:20px;padding:0 103px 0 25px;margin:5px 0;} .ai_base .project_list .project_item .item_info > span {display:inline-flex;line-height:20px;padding:0 4px;margin:0;list-style:none;color:#7b7e85;font-size:14px; letter-spacing:-0.5px;} .ai_base .project_list .project_item .item_info > .share_by {display:flex;align-items:flex-start;padding:0;position:absolute;right:30px;} .ai_base .project_list .project_item .item_info > .share_by:before {display:block;content:"shared by";padding-right:5px;} .ai_base .project_list .project_item .item_btn {display:flex;padding:0;z-index:2;justify-content:center; min-height:30px;position:absolute; left:0; bottom:0; width:100%;} .ai_base .project_list .project_item .item_btn > .btn_workflow {display:inline-block; height:30px; width:200px; line-height:30px; margin:0; color:#fff; text-align:center; border-radius:30px 30px 0 0; z-index:10; background-color:#757576; border:0; cursor:pointer; transition:0.2s; padding:0; opacity:0;} .ai_base .project_list .project_item .item_btn > .btn_workflow:hover {background-color:#555;} .ai_base .project_list > li.active .project_item .item_btn > .btn_workflow, .ai_base .project_list > li:hover .project_item .item_btn > .btn_workflow {opacity:1;} .ai_base .project_list .project_item:after {display:block; content:""; position:absolute; bottom:-40px; left:50%; transform:translate(-50%,0); opacity:0; transition:all ease 0.4s; line-height:1; width:0; height:0; border-top:20px solid #5e5e5e; border-right:12px solid transparent; border-bottom:20px solid transparent; border-left:12px solid transparent;} .ai_base .project_list > li.active .project_item:after {opacity:1;} .ai_base .project_list > li.active .project_item, .ai_base .project_list > li:hover .project_item {border-color:#989898; box-shadow:0 10px 20px 2px rgba(0,0,0,0.2);} .ai_base .project_list .project_item .item_btn > .d_info_total {display:inline-block; position:absolute; right:20px; bottom:33px; height:80px; width:80px; line-height:1; margin:0; color:#fff; text-align:center; background-color:#002d6d; border:0; transition:0.3s; border-radius:50%; padding:20px 0 0 0; font-size:14px; font-weight:300;} .ai_base .project_list .project_item .item_btn > .d_info_total strong {display:block; font-size:20px; font-weight:700; margin:10px 0 0;} .ai_base .project_list .project_item .item_option {display:flex; height:30px; justify-content:center; position:absolute; top:0px; right:20px; overflow:inherit; opacity:0; z-index:1; transition:all ease 0.2s;} .ai_base .project_list .project_item:hover .item_option {height:30px; top:13px; overflow:inherit; opacity:1;} .ai_base .project_list .project_item .item_option button {width:30px; height:30px; line-height:30px; margin:0 4px; border-radius:15px; color:#002d6d; background-color:#fff; border:1px solid #002d6d;} .ai_base .project_list .project_item .item_option button:hover {background-color:#002d6d; color:#fff;} .ai_base .project_list .project_item .item_option button:after {line-height:30px;} .ai_base .project_list .project_item .item_option button:hover:after {color:inherit;} .ai_base .project_list .project_item .item_option button.icon_btn.icon_detail {background:#000 url(../images/icon/icon_white_detail.png) no-repeat center center;} .ai_base .project_list .project_item .item_option button.icon_btn.icon_detail:hover {background:#1aadd2 url(../images/icon/icon_white_detail.png) no-repeat center center;} .ai_base .project_list .project_item.new {border:0;} .ai_base .project_list .project_item.new:before {display:none;} .ai_base .project_list .project_item.new .project_new {display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;color:#bec2c5;border-radius:10px;border:2px dashed #e1e3e7;background-color:#fff;font-size:17px;} .ai_base .project_list .project_item.new .project_new:before {display:block;content:"";padding:10px;font-family:"icofont";color:#bec2c5;font-size:60px;transform:rotate(-45deg);} .ai_base .project_list .project_item.new:hover {box-shadow:none;} .ai_base .project_list .project_item.new:hover:after {display:none;} .ai_base .project_list .project_item.new:hover .project_new {color:#000;border-color:#26a1ff;background-color:#f3f8ff;} .ai_base .project_list .project_item.new:hover .project_new:before {color:#26a1ff;} .ai_base .project_list .sub_list {display:block; width:calc(100% + 50px); margin-left:-45px; height:0; margin-top:25px; position:absolute; left:20px; background-color:rgb(242, 242, 242); overflow:hidden; opacity:0; transition:all ease 0.2s; box-shadow:inset 0 4px 20px rgba(0,0,0,0.15);} .ai_base .nav-md .project_list .sub_list {width:calc(100vw - 307px);} .ai_base .sub_list {display:block;width:100%;height:0;margin-top:30px;position:absolute;right:120px;left:0;background-color:#fff;overflow:hidden;opacity:0;transition:all ease 0.2s;} .ai_base .sub_list::-webkit-scrollbar {width:4px;height:4px;} .ai_base .sub_list > ul {display:flex; padding:20px 35px; margin:0; white-space:nowrap;} .ai_base .sub_list > ul > li {padding:0 10px; margin:0; list-style:none;} .ai_base .sub_list .serving_info {padding-left:0;} .ai_base .sub_item {width:350px; height:225px; padding:0; position:relative; border:1px solid #dadbdd; border-radius:10px; background:#fff; transition:0.2s; padding:55px 30px 25px;} .ai_base .sub_item > .item_category {color:#1aadd2;} .ai_base .sub_item > .item_title {display:-webkit-box;height:48px;padding:0;margin:5px 0;font-size:17px;-webkit-line-clamp:2;white-space:normal;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;} .ai_base .sub_item > .item_brief {display:-webkit-box;height:38px;padding:0;margin:15px 0;-webkit-line-clamp:2;white-space:normal;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;} .ai_base .sub_item > .item_state {position:absolute; border-radius:0 0 15px 15px; display:inline-block; padding:0; color:#fff; font-size:14px; left:20px; top:0; overflow:hidden; font-weight:700; text-align:center; height:30px; width:120px; line-height:30px;} .ai_base .sub_item > .item_state > span {background:#666; display:block;line-height:30px;padding:0;margin:0;} .ai_base .sub_item > .item_state > .state_failed {background:#ea8c63;} .ai_base .sub_item > .item_state > .state_progressing {background:#51bec2;} .ai_base .sub_item > .item_state > .state_completed {background:#5187ec;} .ai_base .sub_item > .item_state > .quick_state_completed {background:#E98225;} .ai_base .sub_item > .item_state > .quick_workflow_completed {background:#4CDF7B;} .ai_base .sub_item > .item_info {display:flex;flex-wrap:wrap;height:20px;padding:0;margin:5px 0;} .ai_base .sub_item > .item_info > span {display:inline-flex;line-height:20px;padding:0 10px 0 0;margin:0;list-style:none;color:#7b7e85;font-size:12px;} .ai_base .sub_item > .item_info > .share_cnt {display:flex;align-items:flex-start;padding:0;position:absolute;right:30px;} .ai_base .sub_item > .item_info > .share_cnt:before {display:block;content:"";line-height:20px;padding-right:5px;font-family:"icofont";} .ai_base .sub_item > .item_option {display:flex; align-items:center; justify-content:center; opacity:0; transition:all ease 0.2s; position:absolute; right:20px; top:0;} .ai_base .sub_item > .item_option button {width:30px; height:30px; line-height:30px; margin:0 3px; border-radius:15px; background:#fff; transition:all ease 0.2s; border:1px solid #002d6d; color:#002d6d;} .ai_base .sub_item > .item_option button:after {display:block; line-height:30px;} .ai_base .sub_item > .item_option button:hover {background:#002d6d; color:#fff;} .ai_base .sub_item > .item_option button:hover:after {color:#fff;} .ai_base .sub_item > .item_option button.icon_btn.icon_detail:after {content:"";} .ai_base .sub_item:hover {border-color:#989898; box-shadow:0 10px 20px 2px rgba(0,0,0,0.2);} .ai_base .sub_item:hover > .item_option {display:flex; opacity:1; top:15px;} .ai_base .project_list > li.active {height:630px;padding-bottom:324px;} .ai_base .project_list > li.active .sub_list.active {height:265px;border-color:#26a1ff;overflow-x:auto;z-index:2;opacity:1;} .ai_base .sub_item.port_success {border:2px solid #57b82c;} .ai_base .sub_item.port_failed {border:2px solid #fb6543;} .ai_base .sub_item .port_state {position:absolute; left:20px; top:15px; height:25px; padding:0 20px; border-radius:13px; background:#666; color:#fff; font-size:17px; font-weight:700; text-align:center; line-height:26px;} .ai_base .sub_item.port_success .port_state {background-color:#57b82c;} .ai_base .sub_item.port_failed .port_state {background-color:#fb6543;} .ai_base .sub_item.port_type > .item_title {display:block; height:24px; padding:0; margin:5px 0 20px; webkit-line-clamp:1; overflow:hidden; text-overflow:ellipsis;} .ai_base .sub_item.port_type ul.serving_info li {list-style:none; display:inline-block; padding:0; margin:0; text-align:center; width:33%; padding-top:40px; position:relative; font-weight:700; font-size:16px;} .ai_base .sub_item.port_type ul.serving_info li.cpu {background:url(../images/icon/icon_pis_cpu.png) no-repeat center top;} .ai_base .sub_item.port_type ul.serving_info li.ram {background:url(../images/icon/icon_pis_ram.png) no-repeat center 8px;} .ai_base .sub_item.port_type ul.serving_info li.pki {background:url(../images/icon/icon_pis_pki.png) no-repeat center top;} .ai_base #mg_title_wrap, #div_scheduleCalendarWrap, #div_setSchduleByTypeWrap {display:flex; justify-content:center; align-items:center;} .ai_base #div_scheduleCalendar {width:100%; padding-bottom:15px;} .ai_base .fc .fc-toolbar {justify-content:flex-start;} .ai_base .fc .fc-toolbar .fc-toolbar-chunk {margin-left:0; margin-right:20px;} .ai_base .fc .fc-toolbar .fc-toolbar-chunk:nth-child(2) {display:none;} .ai_base .fc .fc-toolbar .fc-toolbar-chunk:last-child {margin-right:0; display:flex; flex-flow:row-reverse;} .ai_base .fc .fc-toolbar-title {font-size:18px; font-weight:700; position:relative; padding-left:40px;} .ai_base .fc .fc-toolbar-title:before {content:""; display:inline-block; width:40px; height:20px; position:absolute; left:0; top:-2px; background:url(../images/icon/icon_calandar_schedule.png) no-repeat center center;} .ai_base .fc table {font-size:13px;} .ai_base .fc table .fc-daygrid-day-top {font-size:13px;} .ai_base .fc .fc-toolbar.fc-header-toolbar {margin-bottom:10px;} .ai_base #div_calendar.fc-theme-standard .fc-scrollgrid {border:none;} .ai_base #div_calendar.fc-theme-standard .fc-scrollgrid table {border:none;} .ai_base #div_calendar.fc-theme-standard .fc-scrollgrid > tbody > tr > td {border:none;} .ai_base #div_calendar.fc-theme-standard th {border:1px solid #000; font-weight:700; font-size:14px;} .ai_base #div_calendar.fc-theme-standard th th {border:none;} .ai_base #div_calendar.fc-theme-standard th, .ai_base .fc-theme-standard td {border-left:none; border-right:none;} .ai_base #div_calendar.fc-theme-standard th a {min-height:30px; line-height:28px;} .ai_base #div_calendar.fc-theme-standard th.fc-day-sun a {color:red;} .ai_base #div_calendar.fc .fc-daygrid-day-number {padding:3px 4px 2px;} .ai_base #div_calendar.fc .fc-daygrid-day.fc-day-today {background-color:#e7f7ff;} .ai_base #div_calendar.fc .fc-toolbar .fc-toolbar-chunk .fc-button-group .fc-button {background:transparent; border:none; transition:0.2s; color:#adadad; padding:0 8px;} .ai_base #div_calendar.fc .fc-toolbar .fc-toolbar-chunk .fc-button-group .fc-button:hover {color:#000;} .ai_base #div_calendar.fc .fc-toolbar .fc-toolbar-chunk .fc-button-group .fc-button:focus, .ai_base #div_calendar.fc .fc-toolbar .fc-toolbar-chunk .fc-button-group .fc-button:active {outline:none; box-shadow:none;} .ai_base #div_calendar.fc .fc-toolbar .fc-toolbar-chunk .fc-today-button {width:70px; height:20px; line-height:18px; border:none; background:#000; color:#fff; transition:0.2s; padding:0 12px; border-radius:10px; margin-left:10px; position:relative; top:1px;} .ai_base #div_calendar.fc .fc-toolbar .fc-toolbar-chunk .fc-today-button:hover {background:#1aadd2;} .ai_base .fc-direction-ltr .fc-toolbar>*>:not(:first-child) {margin-left:0;} .ai_base .fc .fc-daygrid-day-top {flex-direction:row;} .ai_base #div_calendar.fc .fc-daygrid-event-dot {margin:-2px 4px 0;} .ai_base .fc-daygrid-event {border-radius:0;} .ai_base .fc-direction-ltr .fc-daygrid-event.fc-event-end, .ai_base .fc-direction-rtl .fc-daygrid-event.fc-event-start {margin-right:0;} .ai_base .fc-direction-ltr .fc-daygrid-event.fc-event-start, .ai_base .fc-direction-rtl .fc-daygrid-event.fc-event-end {margin-left:0;} .ai_base .fc-daygrid-block-event .fc-event-time, .ai_base .fc-daygrid-block-event .fc-event-title {padding-left:5px;} .ai_base #schedule_info_wrap {position:absolute; right:0; top:47px;} .ai_base #schedule_info_wrap ul.schedule_info {display:flex; justify-content:flex-end; width:100%; margin:0; padding:0;} .ai_base #schedule_info_wrap ul.schedule_info li {display:inline-block; font-size:12px; padding-right:unset; list-style-position:inside; padding-left:12px; position:relative; margin-left:15px;} .ai_base #schedule_info_wrap ul.schedule_info li:before {position:absolute; left:0; top:4px; content:""; display:block; width:8px; height:8px; border-radius:4px; background:#999;} .ai_base #schedule_info_wrap ul.schedule_info li.info_scheduled:before {background:#38a8ff;} .ai_base #schedule_info_wrap ul.schedule_info li.info_completed:before {background:#60d52d;} .ai_base #schedule_info_wrap ul.schedule_info li.info_failed:before {background:#ff7d5f;} .ai_base #div_setSchduleByType {width:100%;} .ai_base #div_calendar {height:500px !important;} .ai_base .schedule_startEndDate {display:flex;} .ai_base .schedule_startDate, .schedule_endDate {flex:1;} .ai_base .opt_preset {width:100px; height:30px; text-align:left; color:red; border:none;} .ai_base #schedule_custom .wrap {display:flex; justify-content:flex-start; align-items:center;} .ai_base #div_setSchduleByTypeWrap .ui-tabs .ui-tabs-panel {padding:14px 0 0;} .ai_base #div_setSchduleByTypeWrap {} .ai_base #div_setSchduleByType .ui-widget.ui-widget-content {border:none; margin-top:10px;} .ai_base #div_setSchduleByType .schedule_tab {height:100%;} .ai_base #div_setSchduleByType .schedule_tab > ul {border:none; background:none; border-bottom:1px solid #b1b1b1; border-radius:0; padding:0;} .ai_base #div_setSchduleByType .schedule_tab > ul > li {margin-right:2px !important; border:none !important; background:none !important; border-radius:0; height:auto !important; width:auto !important;} .ai_base #div_setSchduleByType .schedule_tab > ul > li:last-child {margin-right:0;} .ai_base #div_setSchduleByType .schedule_tab > ul > li > a {padding:0 10px !important; text-align:center; font-size:14px; color:#575757; border:1px solid #b1b1b1; border-bottom:none; transition:0.2s; font-weight:500; height:30px; line-height:28px; position:relative; overflow:hidden; background:#fff; border-radius:10px 10px 0 0; min-width:140px;} .ai_base #div_setSchduleByType .schedule_tab > ul > li > a:after {content:""; display:block; z-index:0; width:100%; height:3px; position:absolute; left:0; bottom:-3px; background:#575757; transition:0.3s;} .ai_base #div_setSchduleByType .schedule_tab > ul > li > a:hover:after {bottom:0;} .ai_base #div_setSchduleByType .schedule_tab > ul > li > a span {position:relative; z-index:2; display:inline-block;} .ai_base #div_setSchduleByType .schedule_tab > ul > li > a:focus, .ai_base #div_setSchduleByType .schedule_tab > ul > li.ui-state-active > a, .ai_base #div_setSchduleByType .schedule_tab > ul > li > a.active {color:#fff; background:#575757;} .ai_base .componnt_recently {padding:0;margin:0 -10px;} .ai_base .componnt_recently:after {display:block;content:"";clear:both;} .ai_base .componnt_recently > li {float:left;width:20%;padding:10px 10px 20px 10px;margin:0;list-style:none;} .ai_base .componnt_recently.col4 > li {width:25%;} .ai_base .componnt_recently.col5 > li {width:20%;} .ai_base #componnt_recently_slider {margin:0 0 50px 0;position:relative;} .ai_base #componnt_recently_slider.slide_on {margin:0 50px 50px;} .ai_base #componnt_recently_slider .bx-controls-direction a {display:flex;align-items:center;width:50px;position:absolute;top:10px;bottom:60px;font-size:0;} .ai_base #componnt_recently_slider .bx-controls-direction a:after {display:block;font-family:"IcoFont";font-size:3rem;} .ai_base #componnt_recently_slider .bx-controls-direction a.disabled {color:#e2e3e7;} .ai_base #componnt_recently_slider .bx-prev {left:-50px;justify-content:flex-start;} .ai_base #componnt_recently_slider .bx-prev:after {content:"";} .ai_base #componnt_recently_slider .bx-next {right:-50px;justify-content:flex-end;} .ai_base #componnt_recently_slider .bx-next:after {content:"";} .ai_base #componnt_recently_slider .bx-pager {text-align:center;} .ai_base #componnt_recently_slider .bx-pager-item {display:inline-block;padding:5px;} .ai_base #componnt_recently_slider .bx-pager-link {display:block;width:10px;height:10px;border-radius:5px;font-size:0;background-color:#e2e3e7;} .ai_base #componnt_recently_slider .bx-pager-link.active {background-color:#26a1ff;} .ai_base .recently_item {padding:10px 20px 15px;position:relative;border-radius:10px;border:1px solid #e2e3e7;background-color:#fff;} .ai_base .recently_item:after {display:block;content:"";clear:both;} .ai_base .recently_item.active {border-color:#26a1ff;box-shadow:0 10px 10px 2px rgb(0 0 0 / 20%);} .ai_base .recently_item .recently_title {display:flex;align-items:center;padding:10px 0;position:relative;font-weight:500;} .ai_base .recently_item .recently_title span.engine_type {margin-right:7px; vertical-align:middle; position:relative; top:-1px;} .ai_base .recently_item .recently_title > i {display:inline-block;margin:0 10px 0 5px;position:relative; padding: 4px 1px 0 0;} .ai_base .recently_item .recently_title > i:before {color:#fff;} .ai_base .recently_item .recently_title > i.icon_extract:after {content:"";background-color:#ffaa1b;} .ai_base .recently_item .recently_title > i.icon_transform:after {content:"";background-color:#00baff;} .ai_base .recently_item .recently_title > i.icon_load:after {content:"";background-color:#496aea;} .ai_base .recently_item .recently_title > i.icon_serving:after {content:"";background-color:#00b050;} .ai_base .recently_item .recently_title > i.icon_operator:after {content:"";background-color:#bb3bcd;} .ai_base .recently_item .recently_title > i.icon_reader:after {content:"";background-color:#ffaa1b;} .ai_base .recently_item .recently_title > i.icon_runner:after {content:"";background-color:#00baff;} .ai_base .recently_item .recently_title > i.icon_controller:after {content:"";background-color:#496aea;} .ai_base .recently_item .recently_title > i.icon_serving:after {content:"";background-color:#00b050;} .ai_base .recently_item .recently_title > i.icon_operator:after {content:"";background-color:#bb3bcd;} .ai_base .recently_item .recently_title > i.icon_writer:after {content:"";background-color:#21bec8;} .ai_base .recently_item .item_list {min-height:105px;} .ai_base .recently_item .item_list > a {display:block;height:35px;line-height:35px;padding:0 20px 0 10px;position:relative;text-overflow:ellipsis;overflow:hidden;border-radius:5px;} .ai_base .recently_item .item_list > a:after {display:block;content:"";width:6px;height:6px;position:absolute;top:14px;right:10px;border-top:2px solid #000;border-right:2px solid #000;transform:rotate(45deg);} .ai_base .recently_item .item_list > a:hover {background-color:#f3f8fe;} .ai_base .recently_item .item_list > a:hover:after {border-color:#25a2fe;} .ai_base .recently_item .recently_filter {float:right;display:inline-block;height:20px;padding-left:20px;border:0;position:relative;border:0;background-color:transparent;} .ai_base .recently_item .recently_filter:after {display:block;content:"";position:absolute;bottom:0;left:0;font-family:"IcoFont";} .ai_base .recently_item .recently_ctrl {position:absolute;top:10px;right:15px;} .ai_base .recently_item.active .recently_filter, .ai_base .recently_item .recently_filter:hover {color:#26a1ff;} .ai_base .recently_item .item_list.noData {padding:50px 0 0;} .ai_base .component_component .btn_reset {margin-left:20px;} .ai_base .component_type {padding:0;margin:0;} .ai_base .component_type > li {padding:5px 5px 5px 5px;margin:0;list-style:none;} .ai_base .component_type > li > i {padding:7px 5px 5px 5px;} .ai_base .component_type > li input[type=radio] {width:0;height:0;min-height:0;margin:0;position:absolute;} .ai_base .component_type > li input[type=radio] + label {display:block;line-height:28px;padding:0 10px 0 35px;position:relative;font-weight:normal;border-radius:5px;border:1px solid #e2e3e7;} .ai_base .component_type > li.icon_extract input[type=radio] + label {border-color:#ffaa1b;color:#ffaa1b;} .ai_base .component_type > li.icon_extract input[type=radio] + label:after {content:"";color:#ffaa1b;} .ai_base .component_type > li.icon_extract input[type=radio]:checked + label {background-color:#ffaa1b;color:#fff;} .ai_base .component_type > li.icon_extract input[type=radio]:checked + label:after {color:#fff;} .ai_base .component_type > li.icon_transform input[type=radio] + label {border-color:#00baff;color:#00baff;} .ai_base .component_type > li.icon_transform input[type=radio] + label:after {content:"";color:#00baff;} .ai_base .component_type > li.icon_transform input[type=radio]:checked + label {background-color:#00baff;color:#fff;} .ai_base .component_type > li.icon_transform input[type=radio]:checked + label:after {color:#fff;} .ai_base .component_type > li.icon_load input[type=radio] + label {border-color:#496aea;color:#496aea;} .ai_base .component_type > li.icon_load input[type=radio] + label:after {content:"";color:#496aea;} .ai_base .component_type > li.icon_load input[type=radio]:checked + label {background-color:#496aea;color:#fff;} .ai_base .component_type > li.icon_load input[type=radio]:checked + label:after {color:#fff;} .ai_base .component_type > li.icon_serving input[type=radio] + label {border-color:#00b050;color:#00b050;} .ai_base .component_type > li.icon_serving input[type=radio] + label:after {content:"";color:#00b050;} .ai_base .component_type > li.icon_serving input[type=radio]:checked + label {background-color:#00b050;color:#fff;} .ai_base .component_type > li.icon_serving input[type=radio]:checked + label:after {color:#fff;} .ai_base .component_type > li.icon_operator input[type=radio] + label {border-color:#bb3bcd;color:#bb3bcd;} .ai_base .component_type > li.icon_operator input[type=radio] + label:after {content:"";color:#bb3bcd;} .ai_base .component_type > li.icon_operator input[type=radio]:checked + label {background-color:#bb3bcd;color:#fff;} .ai_base .component_type > li.icon_operator input[type=radio]:checked + label:after {color:#fff;} .ai_base .component_detail > .mg_form > li > .que {min-width:200px;} .ai_base .component_detail .tab-content {display:none; text-align:center;} .ai_base .component_detail .tab-content.active {display:block; text-align:center;} .ai_base .component_detail .tab-buttons-container {display:flex;} .ai_base .component_detail .tab-button-container {flex:1; display:flex; flex-direction:column;} .ai_base .component_detail .tab-button {cursor:pointer; padding:10px 20px; background-color:#f1f1f1; border:1px solid #ccc; margin-bottom:10px;} .ai_base .component_detail .tab-button.active {background-color:#ddd;} .ai_base .component_detail #table_filed_param_list {table-layout:fixed;} .ai_base .component_detail #table_filed_param_list_second {table-layout:fixed;} .ai_base .component_detail #table_filed_param_list_third {table-layout:fixed;} .ai_base .component_detail .circle_button {width:30px; height:30px; border-radius:50%; background-color:#1aadd2; display:flex; justify-content:center; align-items:center; cursor:pointer; border:none; color:white;} .ai_base .component_detail .circle_button i {font-size:18px;} .ai_base .component_detail span.icon_selected {margin-right:20px; margin-left:20px; font-size:30px; line-height:1; position:relative; top:2px;} .ai_base .popup_createproject .btn_searchTag {height:20px;padding:0 30px 0 15px;position:absolute;top:0;left:10px;color:#fff;font-size:12px;border-radius:10px;border:0;background-color:#4596ff;} .ai_base .popup_createproject .btn_searchTag:after {display:block;content:"";width:20px;height:20px;line-height:20px;position:absolute;top:0;right:5px;color:#fff;font-size:12px;font-family:"IcoFont";text-align:center;} .ai_base .search_tags .mg_search {width:calc(100% - 250px);margin-left:250px;} .ai_base .search_tag_group > .tag_list > li.selected {color:#4596ff;border-color:#4596ff;} .ai_base .selected_tag_group .btn_reset {position:absolute;top:0;right:0;} @media (max-width:1600px) { .ai_base .project_info .pi_panel > ul li span {margin:0 5px; font-size:14px;} .ai_base .project_info .pi_panel > ul li strong {font-size:20px;} } @media (max-width:1700px) { .ai_base .project_list > li {width:25%;} } @media (max-width:1500px) { .ai_base .project_list > li {width:33.33%;} } @keyframes move_batch { 0% {transform:rotate(0);} 100% {transform:rotate(360deg);} } @keyframes flowScale { 0% {transform:scale(0);opacity:0;} 100% {transform:scale(1);opacity:1;} } /*============================================================================================================================ Activ 템플릿 관리 리스트 =============================================================================================================================*/ /* ------- connection_list ------- */ .actic_tem_area {position:relative; overflow:hidden;} /* 리스트 */ .actic_tem_lst {position:relative; overflow-x:hidden; overflow-y:auto; padding:0; display:flex; justify-content:flex-start; gap:20px; flex-wrap:wrap; height:calc(100vh - 192px); align-content:flex-start;} .actic_tem_lst .at_item {border:1px solid #dcdcdc; border-radius:15px; background:#fff; transition:0.3s; padding:20px; position:relative; width:calc((100% - 60px) / 4);} .actic_tem_lst .at_item:hover {border-color:#1559ef; box-shadow:5px 10px 10px rgba(0,0,0,0.05);} .actic_tem_lst .at_item.type_da_group:hover {border-color:#6a40b3;} .actic_tem_lst .at_item.type_nl2_sql:hover {border-color:#117970;} .actic_tem_lst .at_item.type_api:hover {border-color:#1559ef;} .at_item.new{border:0;} .at_item.new:before{display:none;} .at_item.new button{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;position:absolute;top:0;right:0;bottom:0;left:0;color:#bec2c5;border-radius:10px;border:2px dashed #e1e3e7; background-color:#fff;font-size:16px; transition:0.2s;} .at_item.new button span {display:inline-block;} .at_item.new button:before{display:block;content:"\eee1";padding:10px;font-family:'icofont';color:#bec2c5;font-size:45px;transform:rotate(-45deg);} .at_item.new:hover{box-shadow:none;} .at_item.new:hover:after{display:none;} .at_item.new:hover button{color:#000;border-color:#26a1ff; background-color:#f3f8ff;} .at_item.new:hover button:before{color:#26a1ff;} .at_item .item_option {display:flex; height:30px; justify-content:center; position:absolute; top:0px; right:10px; overflow:inherit; opacity:0; z-index:1; transition:all ease 0.2s;} .at_item:hover .item_option {height:30px; top:13px; overflow:inherit; opacity:1;} .at_item .item_option button {width:30px; height:30px; line-height:30px; margin:0 4px; border-radius:15px; color:var(--color-main2) !important; background-color:#fff; border:1px solid var(--color-main2);} .at_item .item_option button:hover {background-color:var(--color-main2); color:#fff !important;} .at_item .item_option button:after {line-height:30px; color:var(--color-main2) !important;} .at_item .item_option button:hover:after {color:inherit; color:#fff !important;} .at_item .at_icon {display:inline-flex; width:50px; height:50px; background:#38a4e2; color:#fff; border-radius:25px; justify-content:center; align-items:center; overflow:hidden; vertical-align:middle; overflow:hidden; border:1px solid #dcdcdc;} .at_item.type_da_group .at_icon {background:#6a40b3; border-color:#6a40b3;} .at_item.type_nl2_sql .at_icon {background:#117970; border-color:#117970;} .at_item.type_api .at_icon {background:#1559ef; border-color:#1559ef;} .at_item .at_icon + .at_icon {margin-left:5px;} .at_item .at_icon i {font-size:25px;} .at_item .at_icon img {width:100%; height:100%; object-fit:cover; object-position:center;} .at_item .at_icon.img_icon {position:relative;} .at_item .at_icon.img_icon:before {content:""; display:block; width:100%; height:100%; background:rgba(255,255,255,0.8); position:absolute; left:0; top:0; z-index:1;} .at_item .at_icon.img_icon img {position:absolute; z-index:2; height:35px; width:auto; object-fit:cover; object-position:center; max-width:40px; border-radius:10px; left:50%; top:50%; transform:translate(-50%,-50%);} .at_item.type_da_group .at_icon.img_icon {border-color:#b199db;} .at_item.type_nl2_sql .at_icon.img_icon {border-color:#52d3bd;} .at_item.type_api .at_icon.img_icon {border-color:#1559ef;} .at_item .at_title_box {height:52px; display:flex; align-items:flex-end; margin:10px 0 0;} .at_item .at_title {font-size:20px; line-height:26px; font-weight:600; margin:0; color:#002d6e; width:100%; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} .at_item .at_info {margin:17px 0 0; font-size:14px; color:#5a5a5a; font-weight:400;} .at_item .at_info + .at_info {margin-top:0;} .at_item .at_info p {margin:10px 0 0; font-size:14px; line-height:20px; height:40px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis;} .at_item .at_info span {display:inline-block; vertical-align:middle;} .at_item .at_info span + span {margin-left:10px;} /* tag */ .at_item .item_tag_list {display:block; height:25px; padding:0; margin:5px 0 0; word-break:break-word; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .at_item .item_tag_list > li {display:inline-block; background:#fff; color:#7b7e85; font-size:11px; padding:0px 6px; border-radius:3px; line-height:20px; margin-right:1px; height:20px; border:1px solid #c4c4c4;} .at_item .item_tag_list > li:before {content:"#"; display:inline;} /* 하단영역 */ .at_item .at_bottom {margin:30px 0 0; display:flex; justify-content:space-between;} .at_item .at_bottom .ati_owner {font-size:14px; color:#5a5a5a; line-height:18px;} .at_item .at_bottom .ati_owner span {display:inline-block; margin:0 5px 0 0;} .at_item .at_bottom .at_type {display:inline-block; width:auto; height:20px; border-radius:5px; background:#999; text-align:center; line-height:20px; color:#fff; transition:0.2s; line-height:20px; font-size:13px; color:#fff; padding:0 5px;} .at_item.type_da_group .at_bottom .at_type {background:#6a40b3;} .at_item.type_nl2_sql .at_bottom .at_type {background:#117970;} .at_item.type_api .at_bottom .at_type {background:#1559ef;} /* 에이전트 아이템 */ .agent_area .actic_tem_lst .at_item {width:calc((100% - 40px) / 3);} @media (min-width:1700px) { .actic_tem_lst .at_item {width:calc((100% - 80px) / 5);} .agent_area .actic_tem_lst .at_item {width:calc((100% - 60px) / 4);} } @media (min-width:2000px) { .actic_tem_lst .at_item {width:calc((100% - 100px) / 6);} .agent_area .actic_tem_lst .at_item {width:calc((100% - 80px) / 5);} } @media (min-width:2400px) { .actic_tem_lst .at_item {width:calc((100% - 120px) / 7);} .agent_area .actic_tem_lst .at_item {width:calc((100% - 100px) / 6);} } /* DLS 템플릿 설정 팝업 */ /* ********** 이미지 업로드 ********** */ .upload_dls{margin:0; min-height:200px; overflow-y:auto; position:relative;} .upload_dls .dropzone {min-height:200px; padding:0; position:relative; border:0;} .upload_dls .dropzone:after {display:block; content:""; clear:both;} .upload_dls .dropzone .msg {padding:0; margin:0 0 5px;} .upload_dls .dropzone .msg.msg1 {padding-top:50px; color:#000; font-size:20px;} .upload_dls .dropzone .msg.msg2 {color:#a4a4a4; font-size:16px;} .upload_dls .dropzone .dz-message {min-height:200px; padding:3rem 0; margin:0; border-radius:5px; border:1px dashed #dbdbdb; background-color:#fff; transition:0s; text-align:center; cursor:pointer;} .upload_dls .dropzone .dz-message > span {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} .upload_dls .dropzone .dz-message > span .c_btn.btn_upload {margin-right:0;} .upload_dls .dropzone .dz-preview.dz-image-preview {background:transparent;} .upload_dls .dropzone .dz-preview:after {display:block; content:""; clear:both;} .upload_dls .dropzone .dz-preview .dz-image {width:40px; height:40px; position:absolute; top:25px; left:0; border-radius:0; background:none;} .upload_dls .dropzone .dz-preview .dz-image:after {content:"\f15c"; display:block; width:50px; height:50px; text-align:center; line-height:40px; font-size:40px; font-weight:400; font-family:'Font Awesome 6 Free'; color:#999; position:absolute; left:50%; top:0; transform:translate(-50%,0);} .upload_dls .dropzone .dz-preview .dz-image img {display:none;} .upload_dls .dropzone .dz-preview .dz-details {float:left; width:calc(100% - 42px); min-width:inherit; padding:0; position:static; text-align:left; opacity:1;} .upload_dls .dropzone .dz-preview .dz-details .dz-size, .upload_dls .dropzone .dz-preview .dz-details .dz-filename {display:block; vertical-align:top; margin:0;} .upload_dls .dropzone .dz-preview .dz-details .dz-size {width:100%;} .upload_dls .dropzone .dz-preview .dz-details .dz-filename {width:100%;} .upload_dls .dropzone .dz-preview .dz-error-message {width:235px; padding:5px 10px; margin:0 0 10px 0; position:absolute; color:#ef3e3e; background:none; opacity:1; text-align:right; top:19px; right:45px; left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .upload_dls .dropzone .dz-preview .dz-error-message:after {display:none;} .upload_dls .dropzone .dz-preview .dz-success-mark, .upload_dls .dropzone .dz-preview .dz-error-mark {float:right; width:20px; height:20px; position:relative; margin-top:5px; z-index:9; cursor:pointer; transition:0.2s; left:19px;} .upload_dls .dropzone .dz-preview .dz-error-mark:hover {} .upload_dls .dropzone .dz-preview .dz-success-mark svg, .upload_dls .dropzone .dz-preview .dz-error-mark svg {width:20px; height:20px;} .upload_dls .dropzone .dz-preview .dz-error-mark svg path {stroke-opacity:1; stroke:#aaa; fill:#afafaf;} .upload_dls .dropzone .dz-preview .dz-progress {width:initial; height:5px; margin:0; top:initial; right:0; bottom:-10px; left:30px; right:20px; opacity:1 !important; position:absolute;} .upload_dls .dropzone .dz-preview .dz-progress .dz-upload{display:block; width:calc(100% - 20px) !important; float:right; height:5px; border-radius:3px; margin:; background:#f35244; /* Old browsers */ background:-moz-linear-gradient(left, #aafbff 10%, #517fea 100%); /* FF3.6-15 */ background:-webkit-linear-gradient(left, #aafbff 10%, #517fea 100%); /* Chrome10-25,Safari5.1-6 */ background:linear-gradient(to right, #aafbff 10%, #517fea 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#aafbff', endColorstr='#517fea',GradientType=1 ); /* IE6-9 */ } .upload_dls .dropzone .dz-message:hover {border-color:#1b45cb; background-color:#f0f5ff;} .upload_dls .dropzone .dz-message .msg.msg1 {transition:0.3s; position:relative;} .upload_dls .dropzone .dz-message .msg.msg1:after {content:"\f15c"; display:block; width:50px; height:50px; text-align:center; line-height:40px; font-size:40px; font-weight:400; font-family:'Font Awesome 6 Free'; color:#999; position:absolute; left:50%; top:0; transform:translate(-50%,0);} .upload_dls .dropzone .dz-message:hover .msg.msg1:after {color:#1b45cb;} .upload_dls .dropzone.dz-started {padding-left:30%; position:relative;} .upload_dls .dropzone.dz-started:after {position:absolute; width:63%; height:2px; background:#000; content:""; display:block; visibility:inherit; right:0; top:0;} .upload_dls .dropzone.dz-started .dz-message > span {width:calc(100% - 20px);} .upload_dls .dropzone.dz-started .dz-message {display:block !important; width:calc(40% - 50px); position:absolute; top:0; left:0;} .nav-md .upload_dls .dropzone.dz-started .dz-message {width:calc(40% - 50px); left:310px;} .upload_dls .dropzone.dz-started .dz-preview {display:block; min-height:40px; padding:25px 20px 0 50px; margin:0 0 10px 50px; position:relative;} .upload_dls .dropzone .dz-preview .dz-remove {margin-top:5px; text-indent:-9999px;} .upload_dls .dropzone .dz-message:hover span.m_btn.btn-gray {border-color:#1559ef; background:#1559ef; color:#fff;} /* Add Image - Dropzone */ .upload_dls .dropzone .dz-preview .dz-remove {width:23px; height:23px; position:absolute; right:20px; z-index:10;} /* DSL 템플릿 설정 */ .dsl_title {display:flex; justify-content:space-between; margin-bottom:10px;} .dsl_title h3 {font-size:18px; font-weight:600; margin:0; line-height:32px;} .dsl_title .btn_copy.btn-success {color:#fff; border-color:#2b58e6; background-color:#2b58e6;} /*=========================================================================================================================== 에이전트 관리 =============================================================================================================================*/ /* 바깥 영역 */ .agent_area {display:flex; width:calc(100% + 20px); height:calc(100% + 10px); position:relative; margin:-10px 0 0 -20px;} /* 사이드바 */ .agent_area ul.agent_sidebar {padding:15px 10px; margin:0 20px 0 0; width:50px; height:100%; display:none; flex:0 0 50px; box-shadow:3px 3px 10px rgba(0,0,0,0.1); border-radius:0 20px 20px 0; border:1px solid #dcdcdc; background:#fff; position:relative; z-index:5;} .agent_area ul.agent_sidebar li {padding:0; margin:0; list-style:none;} .agent_area ul.agent_sidebar li button.btn_sidebar {border:none; background:none; display:block; width:30px; height:30px; line-height:30px; color:#000; transition:0.2s; font-size:18px;} .agent_area ul.agent_sidebar li button.btn_sidebar:hover {color:#1fa0dc;} /* 내부 분할 영역 */ .agent_area #agentContent {display:flex; align-items:stretch; gap:20px; width:100%; height:100%; min-width:0;} /* 좌측 패널 */ .agent_area #splitAgentLeft {flex:0 0 220px; width:220px; min-width:220px; height:100%; overflow:hidden; padding:10px;} .agent_lst .agent_item {width:100%; height:auto; border:1px solid #e3e3e3; border-radius:8px; padding:15px 15px 12px; transition:0.2s; position:relative; display:inline-block; text-align:center; background:#fff; margin:0; transition:0.2s;} .agent_lst .agent_item + .agent_item {margin-top:10px;} .agent_lst .agent_item:hover, .agent_lst .agent_item.active {border-color:#1559ef;} .agent_lst .agent_item.active {box-shadow:0 5px 10px rgba(0,0,0,0.1); background:#f4f7ff;} .agent_lst .agent_item img {height:25px; width:auto; max-width:100%;} .agent_lst .agent_item strong {font-size:15px; font-weight:500; display:block; text-align:center; width:100%; margin-top:10px; color:#2e2e2e; line-height:20px;} .agent_lst .agent_item span {font-size:13px; font-weight:400; display:block; text-align:center; width:100%; margin-top:3px; color:#5a5a5a; line-height:18px;} /* 우측 패널 */ .agent_area #splitAgentRight {flex:1 1 auto; width:auto; min-width:0; height:100%; padding:20px 10px 20px 10px} /* folding */ .agent_area.folding ul.agent_sidebar {display:block;} .agent_area.folding #splitAgentLeft {display:none;} .agent_area.folding #splitAgentRight {flex:1 1 auto; width:auto; min-width:0;} /* 공통 */ #agentContent {height:100%; min-height:100%; width:100%; display:flex;} #agentContent .card {border:none; box-shadow:3px 3px 10px rgba(0,0,0,0.1); border-radius:0 20px 20px 0; border:1px solid #dcdcdc; position:relative; z-index:5;} #agentContent .card .card-body {padding:13px 6px; overflow-y:auto;} /* panel 상단영역 */ #agentContent .card-header {padding:10px 0px 13px 10px; margin-bottom:0; color:#000; background-color:transparent; border-bottom:none; width:100%; margin:0 auto; position:relative; border-bottom:1px solid #ababab;} #agentContent h3.card-title {margin:0; font-size:16px; font-weight:500;} #agentContent h3.card-title i {font-size:17px; margin-right:10px;} #agentContent .card-header button.btn_right {position:absolute; right:0; top:10px;} /* 타입 Sort 그룹 버튼 */ .btn_group.view_agent_type {display:inline-flex !important; justify-content:flex-start;} .btn_group.view_agent_type + .btn_group {margin-left:16px;} .btn_group.view_agent_type button {border-radius:0;} .btn_group.view_agent_type button:first-child {border-radius:8px 0 0 8px;} .btn_group.view_agent_type button:last-child {border-radius:0 8px 8px 0;} .btn_group.view_agent_type button:hover {background:#2b58e6; border-color:#2b58e6; color:#fff;} .btn_group.view_agent_type button + button {border-left:none; margin-left:0;} /* 앱 정보 편집하기 팝업 */ .form_area .form_item.select_app {position:relative; padding-left:80px;} .form_area .form_item.select_app .btn_app_icon {width:50px; height:50px; border-radius:25px; background:#f1f1f1; position:absolute; left:15px; top:50%; transform:translate(0,-50%); border:1px solid #dcdcdc; transition:0.2s; overflow:hidden;} .form_area .form_item.select_app .btn_app_icon:hover {border-color:#1559ef;} .form_area .form_item.select_app .btn_app_icon img {position:absolute; height:100%; width:100%; object-fit:cover; object-position:center; border-radius:10px; left:50%; top:50%; transform:translate(-50%,-50%);} /*=========================================================================================================================== 채팅 =============================================================================================================================*/ .agent_area ::-webkit-scrollbar {width:5px; height:5px;} /* width */ .agent_area ::-webkit-scrollbar-track {background:rgba(255,255,255,0);} /* Track */ .agent_area ::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.1); border-radius:4px;} /* Handle */ .agent_area ::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.2);} /* Handle on hover */ .agent_area ::-webkit-scrollbar {width:5px; height:5px;} .agent_area ::-webkit-scrollbar-track {background:rgba(255,255,255,0);} .agent_area ::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.1); border-radius:4px;} .agent_area ::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.2);} .agent_area .ace_editor.ace-monokai .ace_scrollbar-v, .agent_area .ace_editor.ace-monokai .ace_scrollbar-h {background:transparent !important;} .agent_area .ace_editor.ace-monokai .ace_scrollbar-v::-webkit-scrollbar, .agent_area .ace_editor.ace-monokai .ace_scrollbar-h::-webkit-scrollbar {width:5px; height:5px;} .agent_area .ace_editor.ace-monokai .ace_scrollbar-v::-webkit-scrollbar-track, .agent_area .ace_editor.ace-monokai .ace_scrollbar-h::-webkit-scrollbar-track {background:transparent;} .agent_area .ace_editor.ace-monokai .ace_scrollbar-v::-webkit-scrollbar-thumb, .agent_area .ace_editor.ace-monokai .ace_scrollbar-h::-webkit-scrollbar-thumb {background:rgba(255,255,255,0.22); border-radius:4px;} .agent_area .ace_editor.ace-monokai .ace_scrollbar-v::-webkit-scrollbar-thumb:hover, .agent_area .ace_editor.ace-monokai .ace_scrollbar-h::-webkit-scrollbar-thumb:hover {background:rgba(255,255,255,0.38);} /* 공통 레이아웃 */ .agent_area #agentContent.chat_container {gap:0;} #agentContent.chat_container #splitAgentRight {display:flex; justify-content:flex-start; gap:5px; padding:0;} /* 기본 채팅 화면 */ .chat_container .chat_layout {display:flex; justify-content:space-between; gap:5px; padding:0; width:100%;} /* App 리스트 */ .chat_container .chat_app_lst_area {width:250px; background:#f8f8f8; border-radius:0 20px 20px 0; box-shadow:3px 3px 10px rgba(0,0,0,0.1); position:relative; margin-left:-20px; padding:10px 10px 10px 30px; border:1px solid #dcdcdc;} .agent_area.folding .chat_container .chat_app_lst_area {margin-left:-40px;} .chat_app_lst_area .cal_header {padding:10px 0px 13px 10px; margin-bottom:0; color:#000; background-color:transparent; border-bottom:none; width:100%; margin:0 auto; position:relative; border-bottom:1px solid #ababab;} .cal_header h3 {margin:0; font-size:16px; font-weight:500;} .cal_header h3 i {font-size:17px; margin-right:10px;} .chat_app_lst_area .cal_body {padding:13px 6px 13px 6px; position:relative; height:calc(100% - 33px);} .cal_body .select2 {width:100%; margin:0;} .cal_body ul.chat_app_lst {background:none; margin:13px 0 0; padding:0 6px 0 0; height:calc(100% - 45px); overflow-y:auto; width:calc(100% + 8px);} ul.chat_app_lst li {padding:0; margin:0;} ul.chat_app_lst li + li {margin-top:8px; list-style:none;} ul.chat_app_lst li .btn_select_app {width:100%; height:46px; line-height:44px; padding:0 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:#fff; border:1px solid #dcdcdc; border-radius:10px; transition:0.2s; outline:none; text-align:left; color:#2e2e2e; font-size:14px; font-weight:400;} ul.chat_app_lst li .btn_select_app:hover {outline:none; box-shadow:none; text-decoration:none; border-color:#1559ef;} ul.chat_app_lst li .btn_select_app.active {border-color:#1559ef; box-shadow:0 5px 10px rgba(0,0,0,0.1); background:#f4f7ff;} ul.chat_app_lst li .btn_select_app span {width:30px; height:30px; border-radius:15px; overflow:hidden; display:inline-block; margin:0 10px 0 0; vertical-align:middle; position:relative; border:1px solid #dcdcdc;} ul.chat_app_lst li .btn_select_app span img {position:absolute; height:100%; width:100%; object-fit:cover; object-position:center; left:50%; top:50%; transform:translate(-50%,-50%);} /* 채팅 리스트 */ .c_btn {width:auto; height:32px; line-height:30px; padding:0 10px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; background:#fff; border:1px solid #dcdcdc; border-radius:8px; transition:0.2s; outline:none; text-align:left; color:#2e2e2e; font-size:14px; font-weight:400;} .c_btn:hover {outline:none; box-shadow:none; text-decoration:none; border-color:#1559ef;} .c_btn.active {border-color:#1559ef; box-shadow:0 5px 10px rgba(0,0,0,0.1); background:#f4f7ff;} .chat_container .chat_lst_area {width:250px; padding:25px 10px 10px 20px; height:100%;} .chat_lst_area .chat_lst_header {} .chat_lst_header .chat_app_title {color:#2e2e2e; margin:0; display:flex; align-items:center; position:relative; margin:0 0 10px;} .chat_lst_header .chat_app_title span {width:30px; height:30px; border-radius:15px; overflow:hidden; display:inline-block; margin:0 10px 0 0; vertical-align:middle; position:relative; border:1px solid #dcdcdc;} .chat_lst_header .chat_app_title span img {position:absolute; height:100%; width:100%; object-fit:cover; object-position:center; left:50%; top:50%; transform:translate(-50%,-50%);} .chat_lst_header .chat_app_title strong {font-size:18px; font-weight:600; line-height:24px; display:inline-block; vertical-align:middle; width:calc(100% - 40px); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .chat_lst_area .chat_lst_header .m_btn {width:100%;} .chat_lst_area .chat_lst_body {padding:20px 0 0; margin-top:20px; border-top:1px solid #dcdcdc; height:calc(100% - 82px); width:calc(100% + 10px);} .chat_lst_area .chat_lst_body h3 {font-size:16px; font-weight:500; line-height:20px; margin:0 0 10px;} .chat_lst_area ul.chat_lst {padding:0; margin:0; padding-right:10px; overflow-y:auto; height:calc(100% - 90px);} .chat_lst_area ul.chat_lst li {padding:0; margin:0; list-style:none; position:relative;} .chat_lst_area ul.chat_lst li + li {margin-top:6px;} .chat_lst_area ul.chat_lst li .c_btn {width:100%; padding-right:20px;} .chat_lst_area ul.chat_lst li .icon_delete {position:absolute; right:5px; top:8px; background:url(../images/icon/btn_pop_close.png) no-repeat center center; opacity:1; padding:0; display:inline-block; transition:0.2s; transform-origin:center center; background-size:11px auto; width:15px; height:15px; opacity:0;} .chat_lst_area ul.chat_lst li .icon_delete:after {content:"";} .chat_lst_area ul.chat_lst li .icon_delete:hover {transform:rotate(90deg);} .chat_lst_area ul.chat_lst li:hover .icon_delete {opacity:1;} /* App 배찌 */ .chat_lst_area .app_badge_lst {display:flex; gap:5px; padding:0; margin:15px auto 0;} .chat_lst_area .app_badge_lst li {display:inline-block; vertical-align:middle; list-style:none; padding:0; margin:0;} .chat_badge {display:inline-block; vertical-align:middle; width:25px; height:25px; text-align:center; line-height:26px; border-radius:5px; background:#999; color:#fff; font-size:14px;} .chat_badge + .chat_badge {margin-left:5px;} .chat_badge.cb_start {background:#4c6ef5;} /* 대화시작 - 블루 */ .chat_badge.cb_followup {background:#5f3dc4;} /* 팔로우업 - 퍼플 */ .chat_badge.cb_tts {background:#0ca678;} /* TTS - 그린 */ .chat_badge.cb_stt {background:#f08c00;} /* STT - 오렌지 */ .chat_badge.cb_file {background:#495057;} /* 파일 - 다크그레이 */ .chat_badge.cb_copyright {background:#c92a2a;} /* 저작권 - 레드 */ .chat_badge.cb_moderation {background:#1864ab;} /* 모더레이션 - 딥블루 */ /* ************************************ 채팅 영역 ************************************ */ .chat_container .chat_area {width:calc(100% - 255px); background:none; background:none; padding:20px 0 20px 20px; position:relative;} .chat_area .chat_panel {background:#fff; border-radius:20px; height:100%; width:100%; padding:30px 0 30px; position:relative; display:flex; flex-direction:column; gap:0; box-shadow:0 10px 20px rgba(0,0,0,0.1); border:1px solid #dcdcdc; max-width:1400px; margin:0 auto; overflow:hidden;} .chat_area .chat_panel button#btnSettingChatPop {position:absolute; right:20px; top:10px;} .chat_area .chat_panel button#btnSettingChatPop:after {font-size:20px;} /* 설정 노출 영역 : 사용 안함 */ /* .chat_setting {display:flex; justify-content:space-bbtn_setting etween; align-items:center; padding:10px 20px; background:#fff; width:100%; max-width:800px; min-width:550px; border:1px solid #dcdcdc; border-radius:0 0 20px 20px; box-shadow:0 10px 10px rgba(0,0,0,0.1); position:absolute; left:50%; top:-100%; transform:translate(-50%,0); z-index:5; border-top:none; transition:0.3s;} .chat_setting.active {top:0;} .chat_setting span {display:inline-block; font-size:16px; font-weight:500;} .chat_setting button {display:inline-block;} */ /* ************ 채팅 상단 ************ */ /* .chat_panel .chat_header {width:100%; display:flex; justify-content:space-between; height:60px; border-bottom:1px solid #dcdcdc; padding:20px 20px 0;} */ /* ************ 채팅 대화 본문 ************ */ .chat_panel .chat_body_area {width:100%; height:calc(100% - 60px); overflow-y:auto; overflow-x:hidden; position:relative; padding:0 20px;} .chat_panel .chat_body {width:100%; height:100%; max-width:800px; min-width:550px; margin:0 auto; border-radius:20px; position:relative;} /* 채팅요소 */ .text_box {border:1px solid #000; width:375px; padding:20px; margin:30px; background-color:#f7f7f7;} .user_msg {text-align:right; margin-bottom:40px; word-break:keep-all; overflow-wrap:break-word; min-height:30px; position:relative;} .user_msg p {font-size:16px; line-height:22px; background:#ececf0; padding:15px 20px; border-radius:12px 0 12px 12px; display:inline-block; max-width:80%; text-align:left;} .answer_msg {text-align:left; min-height:30px; position:relative; margin-bottom:70px;} .answer_msg p {font-size:16px; line-height:22px; letter-spacing:-0.36px; word-break:keep-all; margin-bottom:0;} .answer_msg p + p {margin-top:20px;} .answer_msg p + div {margin-top:20px;} .answer_msg > div {font-size:16px; line-height:22px; letter-spacing:-0.36px; word-break:keep-all; margin-bottom:0;} .answer_msg > div + div {maring-top:20px;} .answer_msg div.btn_group {display:flex; justify-content:flex-start; gap:5px; flex-wrap:wrap;} .answer_msg div.btn_group .m_btn + .m_btn {margin-left:0;} /* 차트 결과 */ .answer_chat_chart {border:1px solid #dcdcdc; border-radius:20px; width:100%; max-width:700px; height:400px; overflow:hidden;} .answer_chat_chart h4 {font-size:18px; font-weight:500;} .answer_chat_chart textarea {border:1px solid #dcdcdc !important; border-radius:10px !important; padding:10px !important; font-size:14px !important; height:calc(100% - 25px) !important; width:calc(100% - 20px) !important; margin-left:10px;} .answer_chat_chart > div > div > div {width:auto !important; height:32px !important; padding:0 10px !important; background:#fff !important; border:1px solid #dcdcdc !important; position:relative; top:-10px; border-radius:8px !important; transition:0.2s !important; outline:none !important; text-align:left !important; color:#2e2e2e !important; font-size:14px !important; font-weight:400 !important; line-height:32px !important;} .answer_chat_chart > div > div > div:hover {outline:none !important; box-shadow:none !important; text-decoration:none !important; border-color:#1559ef !important;} /* 그리드 결과 */ .answer_grid_area {border:1px solid #dcdcdc; border-radius:20px; width:100%; max-width:700px; height:400px; padding:20px;} .answer_grid_area .grid_top_function {text-align:right; margin:0 0 10px;} /* 문서 생성 */ .answer_msg .document_result div + div {margin-top:20px; padding-top:20px; border-top:1px solid #dcdcdc;} .answer_msg .document_result div h3 {font-size:18px; font-weight:500; color:#5a5a5a; margin:0 0 15px;} .answer_msg .document_result div h4 {font-size:24px; font-weight:600; color:#2e2e2e; magin:0 0 20px;} .answer_msg .document_result div ul {padding:0 0 0 10px; margin:0;} .answer_msg .document_result div ul li {padding:0 0 0 15px; margin:0; position:relative; list-style:none; font-size:16px; line-height:20px; font-weight:400; color:#2e2e2e;} .answer_msg .document_result div ul li:before {content:""; display:block; width:5px; height:5px; border-radius:50%; background:#5a5a5a; position:absolute; left:0; top:10px;} .answer_msg .document_result div ul li + li {margin-top:5px;} .answer_msg .document_result div ul li strong {display:inline-block; vertical-align:middle; font-weight:600; color:#2e2e2e; margin-right:5px;} .answer_msg .document_result div ul li span {display:inline-block; vertical-align:middle; font-weight:400; color:#2e2e2e;} .answer_msg .document_result div p {font-size:16px; color:#2e2e2e; font-weight:400; margin:0;} .answer_msg .document_result div p + p {margin:20px 0 0;} .answer_msg .document_result div ul + p {margin-top:20px;} .answer_msg .document_result div ul + h4 {margin-top:30px;} /* 이미지 생성 */ .answer_msg .img_area {margin:20px 0 0; position:relative; border-radius:20px; overflow:hidden; max-width:400px; width:100%;} /* 가로 */ .answer_msg .img_area.landscape {max-width:600px;} /* 세로 */ .answer_msg .img_area.portrait {max-width:400px;} .answer_msg .img_area img {width:100%; height:auto;} .answer_msg .img_area .btn_img_area {position:absolute; right:20px; bottom:20px;} .answer_msg .img_area .btn_img_area button.btn_img {width:40px; height:40px; text-align:center; line-height:30px; border-radius:20px; background:rgba(71,71,71,0.8); color:#fff; font-size:20px; transition:0.2s; opacity:0; border:none;} .answer_msg .img_area .btn_img_area button.btn_img:hover {background:#000;} .answer_msg .img_area:hover .btn_img_area button.btn_img {opacity:1;} .answer_msg .ai_working {display:flex; align-items:center; position:relative; font-weight:600; color:#2e2e2e;} /* 진행중 (기본) */ .answer_msg .ai_working:before {content:""; display:inline-block; width:10px; height:10px; margin-right:10px; border-radius:50%; background:#4c4cf2; box-shadow:0 0 0 rgba(76,76,242,0.45); animation:aiWorkingPulse 1.4s infinite ease-out; position:relative; top:-1px;} .answer_msg .ai_working:after {content:"..."; display:inline-block; width:0; overflow:hidden; vertical-align:bottom; animation:aiWorkingDots 1.4s steps(4,end) infinite;} /* 완료 상태 */ .answer_msg .ai_working.done {color:#2e7d32;} .answer_msg .ai_working.done:before {content:"✔"; width:auto; height:auto; background:none; box-shadow:none; margin-right:8px; font-size:14px; color:#2e7d32; animation:none;} .answer_msg .ai_working.done:after {content:""; animation:none;} /* 애니메이션 */ @keyframes aiWorkingPulse { 0% {transform:scale(0.85); box-shadow:0 0 0 0 rgba(76,76,242,0.45);} 70% {transform:scale(1); box-shadow:0 0 0 8px rgba(76,76,242,0);} 100% {transform:scale(0.85); box-shadow:0 0 0 0 rgba(76,76,242,0);} } @keyframes aiWorkingDots { 0% {width:0;} 100% {width:1.5em;} } /* 코드 답변 */ .answer_msg .code_function {text-align:right; margin-bottom:10px;} .answer_msg .code_area {height:400px; border:1px solid #dcdcdc; border-radius:20px; overflow:hidden;} .msg_bold {font-weight:700; font-size:18px;} .msg_bold a.link_blank {width:24px; height:24px; display:inline-block; background:#d9d9d9 url(../images/icon/icon_shortcut_gray.svg) no-repeat center center; border:none; border-radius:50%; transition:0.2s; vertical-align:middle; margin-left:4px; background-size:16px 16px;} .msg_bold a.link_blank:hover {background:#2B2B2B url(../images/icon/icon_shortcut.svg) no-repeat center center; background-size:16px 16px;} .msg_red {color:#ee5a52;} .ac_txt {font-size:16px; margin:0;} .ac_txt + .ac_txt {margin-top:6px;} .ac_btn_area.type_layer {gap:8px;} .ac_btn_area.type_layer button:nth-child(1) {flex:1;} .ac_btn_area.type_layer button:nth-child(2) {flex:2;} /* 로딩 */ .answer_msg .chat_loading {display:inline-block; font-size:0;} .answer_msg .chat_loading small {display:inline-block; vertical-align:middle; width:8px; height:8px; border-radius:4px; background:#999; margin:0 5px 0 0;} .answer_msg .chat_loading small:nth-child(1) {animation:1.5s ease-out 0.2s infinite chatLoading;} .answer_msg .chat_loading small:nth-child(2) {animation:1.5s ease-out 0.4s infinite chatLoading;} .answer_msg .chat_loading small:nth-child(3) {animation:1.5s ease-out 0.6s infinite chatLoading; margin-right:0;} @keyframes chatLoading { 0% {height:8px;} 25% {height:20px;} 50% {height:8px;} 100% {height:8px;} } /* 답변 피드백 */ .answer_msg .btn_answer_area {position:absolute; left:0; bottom:-60px; margin-top:0; padding-top:0; border:none;} .answer_msg .btn_answer_area button {width:30px; height:30px; display:inline-block; background-position:center center; background-repeat:no-repeat; background-color:transparent; transition:0.2s; border:none;} .answer_msg .btn_answer_area button + button {margin-left:-3px;} .answer_msg .btn_answer_area button.btn_a_like {background-image:url(../images/chat/icon_like_edge.png);} .answer_msg .btn_answer_area button.btn_a_like:hover, .answer_msg .btn_answer_area button.btn_a_like.active {background-image:url(../images/chat/icon_like_edge_hover.png);} .answer_msg .btn_answer_area button.btn_a_dislike {background-image:url(../images/chat/icon_dislike_edge.png);} .answer_msg .btn_answer_area button.btn_a_dislike:hover, .answer_msg .btn_answer_area button.btn_a_dislike.active {background-image:url(../images/chat/icon_dislike_edge_hover.png);} .answer_msg .btn_answer_area button.btn_a_copy {background-image:url(../images/chat/icon_copy.png);} .answer_msg .btn_answer_area button.btn_a_copy:hover {background-image:url(../images/chat/icon_copy_hover.png);} .answer_msg .btn_answer_area button.btn_a_share {background-image:url(../images/chat/icon_share.png);} .answer_msg .btn_answer_area button.btn_a_share:hover {background-image:url(../images/chat/icon_share_hover.png);} .answer_msg .btn_answer_area button.btn_a_refresh {background-image:url(../images/chat/icon_refresh.png);} .answer_msg .btn_answer_area button.btn_a_refresh:hover {background-image:url(../images/chat/icon_refresh_hover.png);} .answer_msg .btn_answer_area button.btn_a_etc {background-image:url(../images/chat/icon_etc.png);} .answer_msg .btn_answer_area button.btn_a_etc:hover {background-image:url(../images/chat/icon_etc_hover.png);} .answer_msg .btn_answer_area .dropdown {display:inline-block; vertical-align:top;} .answer_msg .btn_answer_area .dropdown .dropdown-toggle::after {display:none;} .answer_msg .btn_answer_area .dropdown .dropdown-menu {border:1px solid #dcdcdc; border-radius:10px; box-shadow:0 10px 10px rgba(0,0,0,0.1); padding:10px 5px;} .answer_msg .btn_answer_area .dropdown .dropdown-menu .dropdown-item {transition:0.2s; color:#2e2e2e; font-size:14px;} .answer_msg .btn_answer_area .dropdown .dropdown-menu .dropdown-item:hover {color:#005ee3;} /* 채팅 프롬프트 */ .chat_panel .chat_prompt_area {height:80px; width:100%; max-width:840px; min-width:550px; margin:0 auto; padding:20px 20px 0; position:relative;} /* 첨부된 파일(이미지, 파일형태) */ .chat_prompt_area .file_area {width:100%; margin:0;} .chat_prompt_area .file_area > div {display:inline-block; margin:0 1px 15px 0; vertical-align:bottom; position:relative;} .chat_prompt_area .file_area > div button.btn_file_delete {position:absolute; right:-6px; top:-6px; width:15px; height:15px; line-height:15px; text-align:center; border:none; padding:0; border-radius:50%; background:none;} .chat_prompt_area .file_area > div button.btn_file_delete:before {content:""; width:10px; height:10px; position:absolute; border-radius:5px; left:50%; top:50%; transform:translate(-50%,-50%); background:#fff;} .chat_prompt_area .file_area > div button.btn_file_delete:after {content:"\f057"; display:inline-block; font-family:"Font Awesome 6 Free"; color:#000; font-size:15px; font-weight:900; position:relative;} .chat_prompt_area .type_img {width:54px; height:54px; position:relative;} .chat_prompt_area .type_img .img_box {width:100%; height:100%; border-radius:10px; display:block; position:relative; overflow:hidden; border:1px solid #dcdcdc;} .chat_prompt_area .type_img img {position:absolute; height:100%; width:100%; object-fit:cover; object-position:center; left:50%; top:50%; transform:translate(-50%,-50%);} .chat_prompt_area .file_area .type_file {padding:0 10px 0 10px; border:1px solid #dcdcdc; border-radius:10px; position:relative; height:35px;} .chat_prompt_area .file_area .type_file .file_nm {font-size:14px; display:inline-block; vertical-align:middle; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:33px;} /* 프롬프트 */ .chat_prompt {position:absolute; width:100%; max-width:800px; margin:0 auto; padding:19px 10px 19px 55px; margin:0 auto; bottom:0; border:1px solid #d9d9d9; background:#fff; border-radius:30px;} .chat_prompt button.btn_addfile {background:#fff; color:#616161; width:32px; height:32px; border-radius:10px; line-height:32px; border:none; outline:none; transition:0.2s; position:absolute; left:12px; bottom:16px;} .chat_prompt button.btn_addfile:hover, .chat_prompt button.btn_addfile.active {background:#e9e9e9;} .chat_prompt textarea.userMsgBox_textarea {display:block; resize:none; transition:height .2s ease; font-size:15px; min-height:22px; max-height:180px; padding:0 50px 0 0; margin:0; outline:none; line-height:22px; scrollbar-gutter:stable; width:100%; color:#000; border:none; overflow-x:hidden; overflow-y:hidden; word-break:keep-all; overflow-wrap:break-word;} .chat_prompt textarea.userMsgBox_textarea::placeholder {color:#797979 !important; opacity:1;} .chat_prompt textarea.userMsgBox_textarea:disabled::placeholder {color:#d9d9d9 !important; opacity:1;} .chat_prompt button.btn_send {width:40px; height:40px; border-radius:20px; background:#000 url("../images/icon/icon_send.png") no-repeat center center; position:absolute; right:10px; bottom:10px; border:none; color:#fff;} .chat_prompt button.btn_send::before {content:""; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:20px; background:linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%); pointer-events:none;} .chat_prompt button.btn_send:hover {background:#2830d3 url("../images/icon/icon_send.png") no-repeat center center;} .chat_prompt button.btn_send:disabled:hover {point-events:none;} .chat_prompt textarea.userMsgBox_textarea:not(:placeholder-shown) ~ button.btn_send, .chat_prompt textarea.userMsgBox_textarea:focus ~ button.btn_send {background:#2830d3 url("../images/icon/icon_send.png") no-repeat center center;} .chat_prompt textarea.userMsgBox_textarea:disabled ~ button.btn_send {background:#f7f7f7 url("../images/icon/icon_send.png") no-repeat center center; pointer-events:none;} /* 로딩 스피너 스타일 (기존에 제공해주신 스타일) */ .chat_prompt button.btn_send.is_loading {background:#000 !important;} .chat_prompt button.btn_send.is_loading:hover {background-color:#2830d3 !important;} .chat_prompt button.btn_send.is_loading::after {content:""; position:absolute; top:50%; left:50%; width:20px; height:20px; box-sizing:border-box; border-radius:50%; margin:-10px 0 0 -10px; border:2px solid rgba(255, 255, 255, 0.3); /* 스피너 트랙 색상 */ border-top-color:#ffffff; /* 스피너 활성 부분 색상 */ animation:btnMsgSendSpin 0.8s linear infinite; } .chat_prompt textarea.userMsgBox_textarea:disabled ~ button.btn_send.is_loading {} @keyframes btnMsgSendSpin { to { transform:rotate(360deg); } } .chat_prompt button.btn_send.is_stop {background:#000 !important; color:#fff !important;} .chat_prompt button.btn_send.is_stop:hover {background-color:#2830d3 !important;} .chat_prompt button.btn_send.is_stop::after {content:"\f04d"; display:block; font-family:"Font Awesome 5 Free"; font-size:16px; font-weight:900; line-height:39px;} .chat_prompt textarea.userMsgBox_textarea:disabled ~ button.btn_send.is_stop {pointer-events:auto;} /* ****************** 워크플로우 선택시 노출 화면 ****************** */ .chat_container .chat_workflow_area {display:flex; justify-content:space-between; gap:5px; padding:20px 0 20px 15px; width:100%;} /* 워크플로우 세팅 */ .chat_workflow_area .cw_setting {padding:20px; background:#fff; border:1px solid #dcdcdc; border-radius:15px; width:400px;} .cw_setting .cws_title {color:#2e2e2e; margin:0 0 10px; display:flex; align-items:center; position:relative; height:30px;} .cw_setting .cws_title span {width:30px; height:30px; border-radius:15px; overflow:hidden; display:inline-block; margin:0 10px 0 0; vertical-align:middle; position:relative; border:1px solid #dcdcdc;} .cw_setting .cws_title span img {position:absolute; height:100%; width:100%; object-fit:cover; object-position:center; left:50%; top:50%; transform:translate(-50%,-50%);} .cw_setting .cws_title strong {font-size:16px; font-weight:500; line-height:20px; display:inline-block; vertical-align:middle;} /* 워크플로우 세팅 폼양식 */ .cw_setting .pass_style {width:100%; height:calc(100% - 92px); overflow-y:auto; overflow-x:hidden;} /* 워크플로우 결과화면 */ .chat_workflow_area .cw_result {padding:25px 20px 20px; background:#fff; border:1px solid #dcdcdc; border-radius:15px; width:calc(100% - 405px); heoght:100%; overflow-y:auto; overflow-x:hidden;} /* ****************** 워크플로우 결과 패널 ****************** */ .cw_result .cwr_title {color:#2e2e2e; margin:0 0 10px; display:flex; align-items:center; position:relative; min-height:30px; font-size:16px; font-weight:600; line-height:20px; padding-left:10px;} .cw_result .cwr_panel {padding:18px; background:#f8f8f8; border-radius:20px; font-size:14px; color:#2e2e2e; border:1px solid #e6e6e6;} .cw_result .cwr_panel + .cwr_panel {margin-top:20px;} /* 타이틀 버튼 */ .cwr_title.has_toggle {display:flex; justify-content:space-between; align-items:center;} .cwr_toggle_btn {border:0; background:none; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center;} .cwr_toggle_btn i {transition:transform 0.3s ease;} /* 닫힌 상태 아이콘 회전 */ .cwr_title.is_closed .cwr_toggle_btn i {transform:rotate(180deg);} /* 패널 wrapper (핵심) */ .cwr_panel_wrap {overflow:hidden; transition:max-height 0.35s ease;} .cwr_panel_wrap.is_closed {max-height:0 !important;} /* 기본 열림 상태 (넉넉하게) */ .cwr_panel_wrap {max-height:2000px;} /* 워크플로우 과정 */ .workflow_process_list {list-style:none; margin:0; padding:0;} .workflow_process_item {padding:14px 16px; background:#fff; border:1px solid #ececec; border-radius:14px;} .workflow_process_item + .workflow_process_item {margin-top:12px;} .workflow_process_subtitle {display:block; margin:0 0 10px; font-size:13px; font-weight:700; line-height:18px; color:#6f7785;} .workflow_process_row {display:flex; align-items:flex-start; gap:12px;} .workflow_process_row + .workflow_process_row {margin-top:5px; padding-top:5px; border-top:1px solid #f1f1f1;} .workflow_process_badge {display:flex; align-items:center; justify-content:center; width:28px; height:28px; min-width:28px; border-radius:50%; background:#5b79d1; color:#fff; font-size:12px; line-height:1;} .workflow_process_text {flex:1; min-width:0; padding-top:2px; margin:0; font-size:14px; font-weight:500; line-height:20px; color:#2e2e2e;} .workflow_process_state {display:flex; align-items:center; justify-content:center; width:24px; min-width:24px; padding-top:2px; font-size:16px; line-height:1;} .workflow_process_item.success .workflow_process_state {color:#10b981;} .workflow_process_item.fail .workflow_process_state {color:#ec3667;} /* 결과 */ .workflow_result_list {list-style:none; margin:0; padding:0;} .workflow_result_list li {position:relative; padding-left:14px; font-size:14px; line-height:22px; color:#2e2e2e; word-break:keep-all;} .workflow_result_list li + li {margin-top:3px;} .workflow_result_list li:before {content:""; position:absolute; left:0; top:8px; width:5px; height:5px; border-radius:50%; background:#5b79d1;} /* 에러 */ .workflow_error_text {margin:0; font-size:13px; line-height:18px; color:#ec3667; word-break:break-all;} .workflow_error_text + .workflow_error_text {margin-top:5px;} /* 반응형 여백 보정 */ .cw_result .cwr_panel .workflow_process_list, .cw_result .cwr_panel .workflow_result_list, .cw_result .cwr_panel .workflow_error_text {width:100%;} /* 에이전트대화 히스토리ㅌ */ .agent_area.chat_history {width:calc(100% + 40px); height:calc(100% + 40px); position:relative; margin:-20px 0 0 -20px;} .chat_history .chat_container .chat_lst_area {padding:25px 20px 10px 20px; background:#fff;} /*=========================================================================================================================== Actic 공통 레이아웃 =============================================================================================================================*/ /* 바깥 영역 */ .actic_body {width:calc(100% + 40px); height:calc(100% + 10px); position:relative; margin:-10px 0 0 -20px; padding:0; overflow-x:hidden; overflow-y:auto;} /* ******************** 상단 영역 : 사용 안함 ******************** */ /* .actic_body .actic_top {display:flex; justify-content:space-between; height:60px; background:#fff; box-shadow:0 2px 20px rgba(0,0,0,0.1); padding:0 50px; width:100%; align-items:center; border-bottom:1px solid #dcdcdc; border-top:1px solid #ebebeb;} .actic_top .actic_logo {} .actic_top .actic_logo img {height:30px; width:auto;} .actic_top .actic_nav {display:flex; align-items:center; gap:30px; padding:0; margin:0;} .actic_top .actic_nav li {list-style:none; padding:0; margin:0;} .actic_top .actic_nav li a {font-size:18px; font-weight:500; color:#000; line-height:30px;} .actic_top .actic_nav li a:hover, .actic_top .actic_nav li a.active {color:#123a93;} .actic_top ul.actic_top_function {display:block; padding:0; margin:0;} .actic_top ul.actic_top_function > li {display:inline-block; float:left; margin-left:0; line-height:44px; position:relative;} .actic_top ul.actic_top_function > li button {border:none; outline:none; padding:0 10px; background:none; color:#303030; transition:0.2s; font-size:18px; margin-top:0;} .actic_top ul.actic_top_function > li button:hover, .actic_top ul.actic_top_function > li button:focus, .actic_top ul.actic_top_function > li button.active {color:#54b9ff;} .actic_top ul.actic_top_function > li button#showPanelNoticeActic {position:relative;} .actic_top ul.actic_top_function > li button#showPanelNoticeActic span {background:#f96f70; padding:0 5px; border-radius:10px; line-height:12px; font-size:10px; color:#fff; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:-9px 0 0 13px;} */ /* ******************** 컨텐츠 영역 ******************** */ .actic_body .actic_con_area {padding:30px 0;} .actic_body .a_inner {width:calc(100% - 200px); margin:0 auto;} .actic_title {margin:0 0 20px;} .actic_title h2 {font-size:32px; line-height:40px; font-weight:400; color:#000; margin:0 0 10px; letter-spacing:-1px;} .actic_title p {margin:0; font-size:16px; line-height:24px; color:#666; font-weight:400;} ul.tab_actic {display:flex; padding:0; margin:0 0 50px; gap:40px;} ul.tab_actic li {display:block; margin-left:0; position:relative;} ul.tab_actic li a {border:none; outline:none; padding:0; background:none; color:#94A3B8; transition:0.2s; font-size:24px; margin-top:0; line-height:36px; min-height:36px; border-bottom:2px solid transpaarent; font-weight:600; display:block;} ul.tab_actic li a:hover, ul.tab_actic li a.active {color:#012155; border-bottom:2px solid #012155;} .actic_con_area .filter_area {display:flex; justify-content:center; align-items:center; border:1px solid #dcdcdc; border-radius:16px; background:#fff; padding:10px 30px; margin:20px 0; min-height:150px;} .actic_con_area .a_panel {background:#fff; border:1px dashed #dcdcdc; border-radius:16px; padding:30px 50px;} /*============================================================================================================================ Actic 모니터링 연결관리 =============================================================================================================================*/ /* ------- connection_list ------- */ .a_connection_area {position:relative; overflow:hidden;} /* 리스트 */ .a_connection_list {position:relative; overflow-x:hidden; overflow-y:auto; padding:0; display:flex; justify-content:flex-start; gap:20px; flex-wrap:wrap; height:calc(100vh - 192px); align-content:flex-start;} .a_connection_list .c_item {border:1px solid #dcdcdc; border-radius:15px; background:#fff; transition:0.3s; padding:30px 18px 30px 75px; position:relative; cursor:pointer; width:calc((100% - 60px) / 4);} .a_connection_list .c_item:hover, .a_connection_list .c_item.active {border-color:#1559ef; box-shadow:5px 10px 10px rgba(0,0,0,0.05);} .a_connection_list .c_item .c_delete {text-indent:-9999px; border:none; background:none; color:#000; width:20px; height:20px; text-align:center; line-height:20px; position:absolute; right:7px; top:7px; font-size:0; transition:0.2s;} .a_connection_list .c_item .c_delete:after {content:"\f00d"; font-family:"Font Awesome 6 Free"; text-indent:0; display:block; font-size:14px; font-weight:900;} .a_connection_list .c_item .c_delete:hover {color:#c06565;} .a_connection_list .c_item .c_status {width:50px; height:50px; position:absolute; border-radius:25px; background:#38a4e2; text-align:center; line-height:50px; color:#fff; transition:0.2s; left:12px; top:50%; transform:translate(0,-50%);} .a_connection_list .c_item .c_status i {font-size:30px; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);} .a_connection_list .c_item .c_status.disconnected {background:#a1a1a1;} .a_connection_list .c_item .c_status.disconnected:after {content:"\f057"; font-family:"Font Awesome 6 Free"; font-size:16px; text-indent:0; display:block; font-weight:900; color:#ed6e5b; position:absolute; right:3px; top:-7px; width:18px; height:18px; border-radius:9px; background:#fff; border:1px solid #fff; line-height:1;} .a_connection_list .c_item .c_title {font-size:16px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:0; color:#2e2e2e; width:calc(100% - 20px);} .a_connection_list .c_item .c_connection_info {margin:30px 0 0; text-align:right;} .a_connection_list .c_item .c_connection_info .cci_item {display:inline-block; padding:0 10px; height:20px; border-radius:10px; background:#e7e7e7; color:#000; font-size:14px; font-weight:600; line-height:20px;} .a_connection_list .c_item .c_connection_info .cci_item i {} .a_connection_list .c_item .c_connection_info .cci_item span {display:inline-block; margin-left:5px;} .a_connection_list .c_item .c_connection_info .cci_item.cci_host {color:#0960c1;} .a_connection_list .c_item .c_connection_info .cci_item.cci_port {color:#4eac7a;} @media (min-width:1700px) { .a_connection_list .c_item {width:calc((100% - 80px) / 5);} } @media (min-width:2000px) { .a_connection_list .c_item {width:calc((100% - 100px) / 6);} } @media (min-width:2400px) { .a_connection_list .c_item {width:calc((100% - 120px) / 7);} } /* 우측 패널 */ .a_connection_panel {position:absolute; right:-100%; top:0; width:100%; max-width:1000px; background:#fff; padding:25px 20px 45px; border-radius:15px; box-shadow:-20px 0 20px rgba(0,0,0,0.1); transition:0.4s;} .a_connection_panel.active {right:0;} .a_connection_panel h2 {font-size:30px; color:#3262e5; line-height:54px; margin:0 0 20px; letter-spacing:-1px; font-weight:700;} .a_connection_panel h2 span.cp_title_icon {display:inline-block; width:54px; height:54px; border-radius:27px; background:#1559ef; margin-right:15px; text-align:center; line-height:51px;} .a_connection_panel h2 i {font-size:30px; color:#fff;} .a_connection_panel .cp_btn_area {padding:20px 25px 0;} .a_connection_panel .cp_btn_area > .m_btn + .m_btn {margin-left:0;} .a_connection_panel .pp_panel {background:#fafafa;} /*============================================================================================================================ Actic 모니터링 App 관리 =============================================================================================================================*/ .server_box_lst {overflow-x:auto; overflow-y:hidden; white-space:nowrap; padding-bottom:5px; touch-action:pan-y;} .server_box_lst.is-dragging {-webkit-user-select:none; user-select:none;} .server_box_lst::-webkit-scrollbar {width:4px; height:4px;} .server_box_lst::-webkit-scrollbar-track {background:transparent;} .server_box_lst::-webkit-scrollbar-thumb {background:rgba(0,0,0,0.06);} .server_box_lst::-webkit-scrollbar-thumb:hover {background:rgba(0,0,0,0.12);} .server_box_lst .pbl_item {width:140px; height:auto; border:1px solid #e3e3e3; border-radius:8px; padding:15px; transition:0.2s; cursor:pointer; position:relative; display:inline-block; text-align:center; justify-content:center; background:#fff; margin:0 10px 0 0; transition:0.2s;} .server_box_lst .pbl_item:hover, .server_box_lst .pbl_item.active {border-color:#0d6efd; background-color:#f4f7ff;} .server_box_lst .pbl_item img {height:20px; width:auto;} .server_box_lst .pbl_item strong {font-size:15px; font-weight:500; display:block; text-align:center; width:100%; margin-top:10px;} .server_box_lst .pbl_item span {font-size:13px; font-weight:400; display:block; text-align:center; width:100%; margin-top:5px; color:#777; word-break:keep-all;} .app_box_lst {display:flex; justify-content:flex-start; flex-wrap:wrap; gap:20px;} .app_box_lst .pbl_item {height:auto; border:1px solid #e3e3e3; border-radius:8px; padding:15px; transition:0.2s; cursor:pointer; position:relative; display:inline-flex; text-align:center; justify-content:space-between; background:#fff; margin:0; transition:0.2s;} .app_box_lst .pbl_item:hover, .app_box_lst .pbl_item.active {border-color:#0d6efd; background-color:#f4f7ff;} .app_box_lst .pbl_item img {height:20px; width:auto;} .app_box_lst .pbl_item strong {font-size:14px; font-weight:400; display:inline-block; text-align:center; width:100%; margin-top:10px;} .app_box_lst .pbl_item button.btn_delete_pbli {position:absolute; right:3px; top:7px; width:15px; height:15px; border:none; outline:none; background:none; text-align:center; line-height:15px; text-indent:-9999px; padding:0; margin:0;} .app_box_lst .pbl_item button.btn_delete_pbli:after {content:"\f00d"; display:block; font-family:"Font Awesome 6 Free"; font-size:14px; text-indent:0; position:absolute; left:0; top:0; color:#666; transition:0.2s; font-weight:900;} .app_box_lst .pbl_item button.btn_delete_pbli:hover:after {color:#c06565;} .app_box_lst .pbl_item .abl_server, .app_box_lst .pbl_item .abl_app {display:inline-block;} .app_box_lst .pbl_item .abl_server {width:110px;} .app_box_lst .pbl_item .abl_app {width:calc(100% - 130px); text-align:left; padding-left:15px; border-left:1px solid #dcdcdc; justify-content:space-between; align-items:center; display:flex;} .app_box_lst .pbl_item .abl_app .img_box {width:30px; height:30px; border-radius:15px; border:1px solid #dcdcdc; overflow:hidden; position:relative;} .app_box_lst .pbl_item .abl_app .img_box img {position:absolute; height:100%; width:100%; object-fit:cover; object-position:center; left:50%; top:50%; transform:translate(-50%,-50%);} .app_box_lst .pbl_item .abl_app strong {width:calc(100% - 40px); text-align:left; margin:0 0 0 10px; text-align:left;} .app_box_lst .pbl_item {width:calc((100% - 60px) / 4);} @media (min-width:1700px) { .app_box_lst .pbl_item {width:calc((100% - 60px) / 4);} } @media (min-width:2000px) { .app_box_lst .pbl_item {width:calc((100% - 80px) / 5);} } @media (min-width:2400px) { .app_box_lst .pbl_item {width:calc((100% - 100px) / 6);} } /*=========================================================================================================================== ACTIC Tracing 퍼블리싱본 - actic_tracing.jsp 전용 부모 클래스(.actic_tracing) 기준 스타일 - smart_big_style.css 11725라인 이후, smartAI 관련 소스 이전에 추가하는 것을 권장 =============================================================================================================================*/ .actic_tracing {height:100%; min-height:0; background:#f3f6fb;} .actic_tracing .tracing_wrap {display:flex; flex-direction:column; width:100%; height:100%; min-height:0; overflow:hidden; padding:10px 10px 10px 0;} .actic_tracing .tracing_tabs {gap:6px; border-bottom:none; margin-bottom:8px;} .actic_tracing .tracing_tabs .nav-link {height:30px; padding:5px 14px; border:1px solid transparent; border-radius:999px !important; color:#64748b; font-size:12px; font-weight:600; background:#f8fafc;} .actic_tracing .tracing_tabs .nav-link:hover {color:#1559ef; border-color:#c7d2fe; background:#eef4ff;} .actic_tracing .tracing_tabs .nav-link.active {color:#fff !important; border-color:#1559ef !important; background:#1559ef !important; box-shadow:0 7px 16px rgba(21,89,239,.18);} .actic_tracing .tracing_area {display:flex; flex-direction:column; flex:1; min-height:0; overflow:hidden;} .actic_tracing .tracing_toolbar {display:flex; align-items:center; gap:8px; height:34px; min-height:34px; margin-bottom:8px;} .actic_tracing .tracing_toolbar .input-group {width:400px; margin-bottom:0; min-height:30px;} .actic_tracing .tracing_body {display:flex; flex:1; width:100%; min-height:0; overflow:hidden;} .actic_tracing .tracing_filter {flex:0 0 300px; width:300px; min-width:170px; max-width:600px; min-height:0; overflow:auto; padding:10px 10px 12px; border:1px solid #dfe5ee; border-radius:12px; background:#fff;} .actic_tracing .tracing_filter.hidden {flex:0 0 0; width:0 !important; min-width:0 !important; padding:0; border:0; overflow:hidden;} .actic_tracing .tracing_filter_title {display:flex; align-items:center; justify-content:flex-start; margin-bottom:8px; color:#1f2937; font-size:13px; font-weight:700;} .actic_tracing .tracing_filter_title:before {content:""; display:inline-block; width:8px; height:8px; margin-right:7px; border-radius:50%; background:#1559ef; box-shadow:0 0 0 4px rgba(21,89,239,.09);} .actic_tracing .tracing_filter .accordion {display:flex; flex-direction:column; gap:8px;} .actic_tracing .tracing_filter .accordion .accordion-header {margin-top:0;} .actic_tracing .tracing_filter .accordion-item {border:1px solid #e3e9f2 !important; border-radius:12px !important; overflow:hidden; background:#fff !important;} .actic_tracing .tracing_filter .accordion-button {height:34px; padding:0 12px; color:#334155; font-size:12px; font-weight:700; background:#fff; box-shadow:none;} .actic_tracing .tracing_filter .accordion-button:not(.collapsed) {color:#1559ef; background:#fff;} .actic_tracing .tracing_filter .accordion-body {padding:0 12px 14px; background:#fff;} .actic_tracing .tracing_range_inputs {display:flex; align-items:center; gap:7px; margin-bottom:16px;} .actic_tracing .tracing_range_inputs .form-control {height:30px; font-size:12px; text-align:right;} .actic_tracing .tracing_range_inputs span {color:#94a3b8; font-size:12px;} .actic_tracing .tracing_level_list {display:flex; flex-direction:column; gap:7px;} .actic_tracing .tracing_level_item {display:flex; align-items:center; gap:7px; color:#334155; font-size:12px;} .actic_tracing .tracing_level_item input {width:14px; height:14px; margin:0; accent-color:#1559ef;} .actic_tracing .tracing_level_dot {display:inline-block; width:9px; height:9px; border-radius:2px;} .actic_tracing .tracing_grid_area {flex:1; min-width:0; min-height:0; padding-left:8px; overflow:hidden;} .actic_tracing .tracing_grid {width:100%; height:100%; min-height:0;} .actic_tracing .observation-levels {display:flex; align-items:center; gap:4px; min-width:130px; overflow:hidden;} .actic_tracing .level-chip {display:inline-flex; align-items:center; min-width:12px; height:18px; padding:0 5px; border-radius:5px; color:#fff; font-size:10px; font-weight:700; line-height:18px; justify-content:center;} .actic_tracing .level-default {background:#4f7edb;} .actic_tracing .level-debug {background:#64748b;} .actic_tracing .level-warning {background:#d9a441;} .actic_tracing .level-error {background:#d8616a;} .actic_tracing .level-text-default {color:#4f7edb; font-weight:700;} .actic_tracing .level-text-debug {color:#64748b; font-weight:700;} .actic_tracing .level-text-warning {color:#d9a441; font-weight:700;} .actic_tracing .level-text-error {color:#d8616a; font-weight:700;} /* Observations Type 아이콘 - Generation / Span 2종 */ .actic_tracing .obs_type_icon {display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; font-family:"Font Awesome 5 Free"; font-size:14px; font-style:normal; font-weight:900; line-height:1;} .actic_tracing .obs_type_icon.obs_type_generation:before {content:"\f2db"; color:#d8616a;} .actic_tracing .obs_type_icon.obs_type_span:before {content:"\f542"; color:#4f7edb;} .actic_tracing .trace_detail_layout {display:flex; width:100%; height:100%; min-height:0; overflow:hidden; background:#eef2f7;} .actic_tracing .trace_tree_panel {flex:0 0 340px; width:340px; min-width:340px; max-width:340px; margin:0; border-right:1px solid #dfe5ee; overflow:auto; background:#fff;} .actic_tracing .trace_detail_panel {flex:1 1 auto; width:auto; min-width:0; margin:0; overflow:auto; background:#fff;} .actic_tracing .trace_detail_panel .card {height:calc(100% - 20px); overflow-y:auto; border:none !important; border-left:1px solid #eee !important; padding:0 20px; margin-left:20px; box-shadow:none !important;} .actic_tracing .trace-node-item {border:1px solid #e5e7eb; border-radius:10px; box-shadow:none;} /* Ion.RangeSlider 구버전 구조 보정 */ .actic_tracing .irs {height:30px;} .actic_tracing .irs .irs {height:30px;} .actic_tracing .irs .irs-line {top:12px; height:4px; background:#e5e7eb; border-radius:999px;} .actic_tracing .irs .irs-bar {top:12px; height:4px; background:#111827; border-radius:999px;} .actic_tracing .irs .irs-bar-edge {top:12px; height:4px; background:#111827; border-radius:999px;} .actic_tracing .irs .irs-slider {top:5px; width:18px; height:18px; border:1px solid #999; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(15,23,42,.18); cursor:pointer;} .actic_tracing .irs .irs-slider:before, .actic_tracing .irs .irs-slider:after {display:none;} .actic_tracing .irs .irs-grid, .actic_tracing .irs .irs-min, .actic_tracing .irs .irs-max, .actic_tracing .irs .irs-from, .actic_tracing .irs .irs-to, .actic_tracing .irs .irs-single {display:none;} /* 상세 우측 패널 레이아웃 보정 */ .actic_tracing #TracesRightWindow, .actic_tracing #ObservationsRightWindow {width:50%; display:flex; height:100%; padding-top:3%;} .actic_tracing .trace_detail_layout {display:flex; width:100%; height:100%; min-height:0; overflow:hidden; background:#eef2f7;} .actic_tracing .trace_tree_panel {flex:0 0 340px; width:340px; min-width:340px; max-width:340px; height:100%; margin:0; border-right:1px solid #dfe5ee; overflow:auto; background:#fff;} .actic_tracing .trace_detail_panel {flex:1 1 auto; width:auto; min-width:0; height:100%; margin:0; overflow:auto; background:#fff;} .actic_tracing #traceDetail, .actic_tracing #ObservationsDetail {height:100%; overflow:auto;} .actic_tracing .jstree-themeicon {background:none !important;} .actic_tracing .jstree-themeicon:before {content:"\f5d4"; font-family:"bootstrap-icons"; font-style:normal; font-weight:normal;} .actic_tracing .jstree-anchor {display:inline-block; max-width:100%; height:24px; line-height:24px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .actic_tracing .jstree-container-ul {padding-top:8px;} .actic_tracing .table {width:100%; table-layout:fixed; overflow:auto;} .actic_tracing .table td:first-child {width:90px; white-space:nowrap;} .actic_tracing .table th {border:none; border-bottom:1px solid #ccc; text-align:left; background:#f2f2f2; font-weight:600; padding-left:5%;} .actic_tracing .table > tbody td {border:none; border-bottom:1px solid #eee; text-align:left; font-weight:400; vertical-align:middle; background:#fff; padding-left:5%;;} /* 상세 우측 패널 폭/내부 배치 최종 보정 */ .actic_tracing #TracesRightWindow, .actic_tracing #ObservationsRightWindow {width:50% !important; min-width:760px; display:flex !important; height:calc(100% - 87px) !important; padding-top:0 !important; overflow:hidden; top:86px; border-radius:20px 0 0 20px;} .actic_tracing .offcanvas-header .offcanvas-title {font-weight:500; font-size:18px;} .actic_tracing .trace_detail_layout {display:flex !important; flex-direction:row !important; width:100% !important; height:100% !important; min-width:0; min-height:0; overflow:hidden; background:#fff;} .actic_tracing .trace_tree_panel {flex:0 0 280px !important; width:280px !important; min-width:280px !important; max-width:280px !important; height:100% !important; margin:0 !important; border-right:none; overflow:auto; background:#fff;} .actic_tracing .trace_detail_panel {flex:1 1 auto !important; width:auto !important; min-width:0 !important; height:100% !important; margin:0 !important; overflow:auto; background:#fff;} /* ******************** jstree ******************** */ .actic_tracing .trace_tree_panel.jstree-default {font-size:14px;} /* 노드 */ .actic_tracing .trace_tree_panel.jstree-default .jstree-node {position:relative; min-height:28px; line-height:28px; margin-left:8px;} .actic_tracing .trace_tree_panel.jstree-default .jstree-wholerow {height:28px; border-radius:6px;} .actic_tracing .trace_tree_panel.jstree-default .jstree-node .jstree-wholerow + .jstree-icon {margin-left:5px;} .actic_tracing .trace_tree_panel.jstree-default .node-sub {font-size:11px; color:#888; margin-left:6px;} /* anchor */ .actic_tracing .trace_tree_panel.jstree-default .jstree-anchor {position:relative; display:inline-flex; align-items:center; height:28px; line-height:28px; padding-left:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#333; border-radius:6px; vertical-align:top;} .actic_tracing .trace_tree_panel.jstree-default .jstree-clicked {background:none !important; box-shadow:none !important; color:#000 !important;} /* hover / selected */ .actic_tracing .trace_tree_panel.jstree-default .jstree-wholerow-hovered {background:#f3f7ff;} .actic_tracing .trace_tree_panel.jstree-default .jstree-wholerow-clicked {background:#dff1ff !important;} /* 펼침/닫힘 */ .actic_tracing .trace_tree_panel.jstree-default .jstree-ocl {position:relative; width:18px; height:28px; line-height:28px; margin-right:2px; background:none !important; vertical-align:top; text-align:center; font-style:normal;} .actic_tracing .trace_tree_panel.jstree-default .jstree-open > .jstree-ocl:before {content:"\f229"; font-family:"bootstrap-icons"; font-size:10px; color:#555;} .actic_tracing .trace_tree_panel.jstree-default .jstree-closed > .jstree-ocl:before {content:"\f235"; font-family:"bootstrap-icons"; font-size:10px; color:#555;} .actic_tracing .trace_tree_panel.jstree-default .jstree-leaf > .jstree-ocl:before {display:none;} /* ACTIC APP 유형별 트리 아이콘 - Message / Generation / Span */ .actic_tracing .trace_tree_panel.jstree-default .jstree-anchor:before {display:inline-block; width:16px; margin-right:6px; font-family:"Font Awesome 5 Free"; font-size:14px; font-style:normal; font-weight:900; content:"\f542"; color:#4f7edb;} .actic_tracing .trace_tree_panel.jstree-default .tree_node_message > .jstree-anchor:before {content:"\f4ad"; color:#2563eb;} .actic_tracing .trace_tree_panel.jstree-default .tree_node_generation > .jstree-anchor:before {content:"\f2db"; color:#d8616a;} .actic_tracing .trace_tree_panel.jstree-default .tree_node_span > .jstree-anchor:before {content:"\f542"; color:#4f7edb;} /* 선택 시 */ .actic_tracing .trace_tree_panel.jstree-default .tree_node_message > .jstree-wholerow-clicked + .jstree-ocl + .jstree-anchor:before {color:#1559ef;} .actic_tracing .trace_tree_panel.jstree-default .tree_node_generation > .jstree-wholerow-clicked + .jstree-ocl + .jstree-anchor:before {color:#b91c1c;} .actic_tracing .trace_tree_panel.jstree-default .tree_node_span > .jstree-wholerow-clicked + .jstree-ocl + .jstree-anchor:before {color:#1559ef;} .actic_tracing #traceDetail, .actic_tracing #ObservationsDetail {width:100% !important; height:100% !important; overflow:auto;} .actic_tracing .trace_detail_panel table {width:100% !important; table-layout:fixed;} .actic_tracing .trace_detail_panel th, .actic_tracing .trace_detail_panel td {white-space:normal; word-break:break-word;} .actic_tracing .trace_detail_panel .table th:nth-child(1) {width:180px;} .actic_tracing .trace_detail_panel .table th:nth-child(2) {width:calc(100% - 180px);} /* 필터 show/hide 토글 최종 보정 */ .actic_tracing .tracing_body.filter_hidden .tracing_filter {flex:0 0 0 !important; width:0 !important; min-width:0 !important; max-width:0 !important; padding:0 !important; border:0 !important; margin:0 !important; opacity:0; overflow:hidden !important; pointer-events:none;} .actic_tracing .tracing_body.filter_hidden .tracing_grid_area {padding-left:0 !important;} .actic_tracing #TracesLeftFilter.hidden, .actic_tracing #ObservationsLeftFilter.hidden {flex:0 0 0 !important; width:0 !important; min-width:0 !important; max-width:0 !important; padding:0 !important; border:0 !important; margin:0 !important; opacity:0; overflow:hidden !important; pointer-events:none;} /* ========================================================================================================================= 상세 패널 닫기 버튼 커스텀 - Bootstrap 기본 X 아이콘 제거 - 기존 layerTop .btn-close 스타일 재사용 ========================================================================================================================= */ .actic_tracing .offcanvas-header .btn-close { width:17px; height:17px; position:absolute; right:20px; top:27px; background:url(../images/icon/btn_pop_close.png) no-repeat center center !important; background-size:17px 17px !important; opacity:1 !important; padding:0 !important; margin:0 !important; display:inline-block; transition:0.2s; transform-origin:center center; border:0 !important; box-shadow:none !important; /* Bootstrap 기본 X 제거 */ filter:none !important; } .actic_tracing .offcanvas-header .btn-close:hover { transform:rotate(90deg); } /* Bootstrap 기본 before/after 제거 대응 */ .actic_tracing .offcanvas-header .btn-close::before, .actic_tracing .offcanvas-header .btn-close::after { display:none !important; content:none !important; }